MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix datalist, datatable and chart component

This commit is contained in:
Martin McKeaveney 2020-06-02 21:31:29 +01:00
parent ad49ef9976
commit c7e8cc95e4
12 changed files with 81 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/builder/src/components/common/Input.svelte
View File

@ -18,11 +18,19 @@
onChange(_value)
}
$: displayValue = suffix && value && value.endsWith(suffix) ? value.replace(new RegExp(`${suffix}$`), "") : (value || "")
$: displayValue =
suffix && value && value.endsWith(suffix)
? value.replace(new RegExp(`${suffix}$`), "")
: value || ""
</script>
<input class:centerPlaceholder type="text" value={displayValue} {placeholder} {style} on:change={e => handleChange(e.target.value)} />
<input
class:centerPlaceholder
type="text"
value={displayValue}
{placeholder}
{style}
on:change={e => handleChange(e.target.value)} />
<style>
input {

5
packages/builder/src/components/common/Inputs/InputGroup.svelte
View File

@ -13,7 +13,9 @@
value.splice(idx, 1, val !== "auto" ? val + suffix : val)
value = value
let _value = value.map(v => (!v.endsWith(suffix) && v !== "auto" ? v + suffix : v))
let _value = value.map(v =>
!v.endsWith(suffix) && v !== "auto" ? v + suffix : v
)
onChange(_value)
}
@ -44,5 +46,4 @@
.inputs-group {
flex: 1;
}
</style>

2
packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
View File

@ -151,7 +151,7 @@
}
</script>
<div class="root" on:click|stopPropagation={() => {}}>
<div class="root boundary" on:click|stopPropagation={() => {}}>
<button>
<MoreIcon />
</button>

11
packages/builder/src/components/userInterface/FlatButton.svelte
View File

@ -12,15 +12,20 @@
$: useIcon = !!icon
</script>
<div class="flatbutton" {style} class:selected on:click={() => onClick(value || text)}>
<div
class="flatbutton"
{style}
class:selected
on:click={() => onClick(value || text)}>
{#if useIcon}
<i class={icon} />
{:else}
<span>{@html text}</span>
<span>
{@html text}
</span>
{/if}
</div>
<style>
.flatbutton {
cursor: pointer;

2
packages/builder/src/components/userInterface/FlatButtonGroup.svelte
View File

@ -28,10 +28,8 @@
onChange(val)
}
const checkSelected = val =>
isMultiSelect ? value.includes(val) : value === val
</script>
<div class="flatbutton-group">

15
packages/builder/src/components/userInterface/ModelSelect.svelte Normal file
View File

@ -0,0 +1,15 @@
<script>
import { backendUiStore } from "builderStore"
export let value
</script>
<div class="uk-margin block-field">
<div class="uk-form-controls">
<select class="budibase__input" on:change {value}>
{#each $backendUiStore.models as model}
<option value={model._id}>{model.name}</option>
{/each}
</select>
</div>
</div>

4
packages/builder/src/components/userInterface/OptionSelect.svelte
View File

@ -214,10 +214,10 @@
height: auto;
padding: 5px 0px;
cursor: pointer;
padding-left: 10px
padding-left: 10px;
}
li:hover {
background-color:#e6e6e6
background-color: #e6e6e6;
}
</style>

21
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View File

@ -1,6 +1,7 @@
import Input from "../common/Input.svelte"
import OptionSelect from "./OptionSelect.svelte"
import Checkbox from "../common/Checkbox.svelte"
import ModelSelect from "components/userInterface/ModelSelect.svelte"
import { all } from "./propertyCategories.js"
@ -273,14 +274,20 @@ export default {
_component: "@budibase/standard-components/datatable",
description: "A component that generates a table from your data.",
icon: "ri-archive-drawer-fill",
properties: { design: { ...all } },
properties: {
design: { ...all },
settings: [{ label: "Model", key: "model", control: ModelSelect }],
},
children: [],
},
{
name: "Form",
description: "A component that generates a form from your data.",
icon: "ri-file-edit-fill",
properties: { design: { ...all } },
properties: {
design: { ...all },
settings: [{ label: "Model", key: "model", control: ModelSelect }],
},
_component: "@budibase/standard-components/dataform",
template: {
component: "@budibase/materialdesign-components/Form",
@ -294,7 +301,10 @@ export default {
_component: "@budibase/standard-components/datachart",
description: "Shiny chart",
icon: "ri-bar-chart-fill",
properties: { design: { ...all } },
properties: {
design: { ...all },
settings: [{ label: "Model", key: "model", control: ModelSelect }],
},
children: [],
},
{
@ -302,7 +312,10 @@ export default {
_component: "@budibase/standard-components/datalist",
description: "Shiny list",
icon: "ri-file-list-fill",
properties: { design: { ...all } },
properties: {
design: { ...all },
settings: [{ label: "Model", key: "model", control: ModelSelect }],
},
children: [],
},
{

1
packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte
View File

@ -5,7 +5,6 @@
</script>
<div class="uk-margin block-field">
<label class="uk-form-label">Model</label>
<div class="uk-form-controls">
<select class="budibase__input" bind:value>
{#each $backendUiStore.models as model}

6
packages/standard-components/src/DataChart.svelte
View File

@ -20,17 +20,17 @@
height: "400",
dataFormat: "json",
dataSource: {
data: $store[model._id] || [],
data: $store[model] || [],
},
}
async function fetchData() {
const FETCH_RECORDS_URL = `/api/${_instanceId}/all_${model._id}/records`
const FETCH_RECORDS_URL = `/api/${_instanceId}/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)
if (response.status === 200) {
const json = await response.json()
store.update(state => {
state[model._id] = json
state[model] = json
return state
})
} else {

9
packages/standard-components/src/DataList.svelte
View File

@ -10,13 +10,15 @@
let store = _bb.store
async function fetchData() {
const FETCH_RECORDS_URL = `/api/${_instanceId}/all_${model._id}/records`
if (!model || !model.length) return
const FETCH_RECORDS_URL = `/api/${_instanceId}/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)
if (response.status === 200) {
const json = await response.json()
store.update(state => {
state[model._id] = json
state[model] = json
return state
})
} else {
@ -24,7 +26,8 @@
}
}
$: data = $store[model._id] || []
$: data = $store[model] || []
$: if (model) fetchData()
onMount(async () => {
await fetchData()

8
packages/standard-components/src/DataTable.svelte
View File

@ -10,13 +10,14 @@
let store = _bb.store
async function fetchData() {
const FETCH_RECORDS_URL = `/api/${_instanceId}/all_${model._id}/records`
const FETCH_RECORDS_URL = `/api/${_instanceId}/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)
if (response.status === 200) {
const json = await response.json()
store.update(state => {
state[model._id] = json
state[model] = json
return state
})
@ -26,7 +27,8 @@
}
}
$: data = $store[model._id] || []
$: data = $store[model] || []
$: if (model) fetchData()
onMount(async () => {
await fetchData()