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

Merge branch 'master' of github.com:Budibase/budibase

This commit is contained in:
Michael Shanks 2020-06-03 06:36:42 +01:00
parent ceb21acb53 4ee546d2c7
commit c81ffe04d4
22 changed files with 268 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/builder/src/budibase.css
View File

@ -1,8 +1,7 @@
/* Budibase Component Styles */ /* Budibase Component Styles */
.header { .header {
font-size: 0.75rem; font-size: 0.75rem;
color: #000333; color: var(--ink);
opacity: 0.4;
text-transform: uppercase; text-transform: uppercase;
margin-top: 1rem; margin-top: 1rem;
font-weight: 500; font-weight: 500;
@ -81,10 +80,9 @@
max-width: 250px; max-width: 250px;
height: 35px; height: 35px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #DBDBDB; border: 1px solid var(--grey-dark);
text-align: left; text-align: left;
letter-spacing: 0.7px; color: var(--ink);
color: #000333;
font-size: 16px; font-size: 16px;
padding-left: 5px; padding-left: 5px;
} }
@ -103,27 +101,32 @@
} }
.budibase__table { .budibase__table {
border: 1px solid #ccc; border: 1px solid var(--grey-dark);
background: #fff; background: #fff;
border-radius: 2px; border-radius: 2px;
} }
.budibase__table thead { .budibase__table thead {
background: #fafafa; background: var(--blue-light);
} }
.budibase__table thead > tr > th { .budibase__table thead > tr > th {
color: var(--button-text); color: var(--ink);
text-transform: capitalize; text-transform: capitalize;
font-weight: 500; font-weight: 500;
} }
.budibase__table tr { .budibase__table tr {
border-bottom: 1px solid #ccc; border-bottom: 1px solid var(--grey-light);
} }
.button--toggled { .button--toggled {
background: #fafafa; background: var(--blue-light);
color: var(--button-text); color: var(--ink-light);
padding: 10px; width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
} }

24
packages/builder/src/components/common/ActionButton.svelte
View File

@ -1,6 +1,7 @@
<script> <script>
export let disabled = false export let disabled = false
export let hidden = false export let hidden = false
export let secondary = false
export let primary = true export let primary = true
export let cancel = false export let cancel = false
export let alert = false export let alert = false
@ -11,6 +12,7 @@
on:click on:click
class="button" class="button"
class:hidden class:hidden
class:secondary
class:primary class:primary
class:alert class:alert
class:cancel class:cancel
@ -22,12 +24,14 @@
<style> <style>
.primary { .primary {
color: #ffffff; color: #ffffff;
background: #0055ff; background: var(--blue);
border: solid 1px var(--blue);
} }
.alert { .alert {
color: rgba(255, 0, 31, 1); color: white;
background: rgba(255, 0, 31, 0.1); background: #e26d69;
border: solid 1px #e26d69;
} }
.cancel { .cancel {
@ -35,18 +39,22 @@
background: none; background: none;
} }
.secondary {
color: var(--ink);
border: solid 1px var(--grey-dark);
background: white;
}
.button { .button {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 500;
border-radius: 5px; border-radius: 3px;
border: none;
padding: 10px 20px; padding: 10px 20px;
height: 45px; height: 40px;
} }
.button:hover { .button:hover {
cursor: pointer; cursor: pointer;
font-weight: 600;
filter: saturate(90%); filter: saturate(90%);
} }

3
packages/builder/src/components/common/CodeArea.svelte
View File

@ -14,8 +14,7 @@
background: var(--secondary80); background: var(--secondary80);
color: var(--white); color: var(--white);
font-family: "Courier New", Courier, monospace; font-family: "Courier New", Courier, monospace;
width: 95%; height: 200px;
height: 100px;
border-radius: 5px; border-radius: 5px;
} }
</style> </style>

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

@ -1,5 +1,5 @@
<script> <script>
import {onMount} from "svelte" import { onMount } from "svelte"
import { buildStyle } from "../../helpers.js" import { buildStyle } from "../../helpers.js"
export let value = "" export let value = ""
export let textAlign = "left" export let textAlign = "left"
@ -7,22 +7,30 @@
export let placeholder = "" export let placeholder = ""
export let suffix = "" export let suffix = ""
export let onChange = val => {} export let onChange = val => {}
let centerPlaceholder = textAlign === "center" let centerPlaceholder = textAlign === "center"
let style = buildStyle({ width, textAlign }) let style = buildStyle({ width, textAlign })
function handleChange(val) { function handleChange(val) {
value = val value = val
let _value = value !== "auto" ? value + suffix : value let _value = value !== "auto" ? value + suffix : value
onChange(_value) 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> </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> <style>
input { input {
@ -43,7 +51,7 @@
outline: none; outline: none;
} }
input::placeholder { input::placeholder {
text-align: left; text-align: left;
} }

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

@ -11,9 +11,11 @@
function handleChange(val, idx) { function handleChange(val, idx) {
value.splice(idx, 1, val !== "auto" ? val + suffix : val) value.splice(idx, 1, val !== "auto" ? val + suffix : val)
value = value 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) onChange(_value)
} }
@ -44,5 +46,4 @@
.inputs-group { .inputs-group {
flex: 1; flex: 1;
} }
</style> </style>

4
packages/builder/src/components/common/Modal.svelte
View File

@ -50,10 +50,10 @@
<style> <style>
.uk-modal-dialog { .uk-modal-dialog {
border-radius: 0.3rem; border-radius: 0.3rem;
width: 60%; width: 520px;
height: 80vh; height: 80vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0; padding: 40px;
} }
</style> </style>

10
packages/builder/src/components/common/Select.svelte
View File

@ -20,11 +20,9 @@
<style> <style>
.select-container { .select-container {
font-size: 14px; font-size: 14px;
color: var(--secondary60);
font-weight: bold;
position: relative; position: relative;
max-width: 400px; border: var(--grey-dark) 1px solid;
min-width: 275px; max-width: 256px;
} }
.adjusted { .adjusted {
@ -43,7 +41,7 @@
font-family: sans-serif; font-family: sans-serif;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
color: #000333; color: var(--ink);
padding: 0 40px 0px 20px; padding: 0 40px 0px 20px;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
@ -63,6 +61,6 @@
width: 30px; width: 30px;
height: 30px; height: 30px;
pointer-events: none; pointer-events: none;
color: var(--secondary100); color: var(--ink);
} }
</style> </style>

14
packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
View File

@ -145,19 +145,19 @@
} }
table { table {
border: 1px solid #ccc; border: 1px solid var(--grey-dark);
background: #fff; background: #fff;
border-radius: 3px; border-radius: 3px;
border-collapse: collapse; border-collapse: collapse;
} }
thead { thead {
background: #f9f9f9; background: var(--blue-light);
border: 1px solid #ccc; border: 1px solid var(--grey-dark);
} }
thead th { thead th {
color: var(--button-text); color: var(--ink);
text-transform: capitalize; text-transform: capitalize;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
@ -166,14 +166,14 @@
} }
tbody tr { tbody tr {
border-bottom: 1px solid #ccc; border-bottom: 1px solid var(--grey-dark);
transition: 0.3s background-color; transition: 0.3s background-color;
color: var(--secondary100); color: var(--ink);
font-size: 14px; font-size: 14px;
} }
tbody tr:hover { tbody tr:hover {
background: #fafafa; background: var(--grey-light);
} }
.table-controls { .table-controls {

57
packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
View File

@ -35,7 +35,7 @@
} }
</script> </script>
<header> <div class="heading">
{#if !showFieldView} {#if !showFieldView}
<i class="ri-list-settings-line button--toggled" /> <i class="ri-list-settings-line button--toggled" />
<h3 class="budibase__title--3">Create / Edit Model</h3> <h3 class="budibase__title--3">Create / Edit Model</h3>
@ -43,22 +43,20 @@
<i class="ri-file-list-line button--toggled" /> <i class="ri-file-list-line button--toggled" />
<h3 class="budibase__title--3">Create / Edit Field</h3> <h3 class="budibase__title--3">Create / Edit Field</h3>
{/if} {/if}
</header> </div>
{#if !showFieldView} {#if !showFieldView}
<div class="padding"> <div class="padding">
<h4 class="budibase__label--big">Settings</h4>
{#if $store.errors && $store.errors.length > 0} {#if $store.errors && $store.errors.length > 0}
<ErrorsBox errors={$store.errors} /> <ErrorsBox errors={$store.errors} />
{/if} {/if}
<div class="textbox">
<Textbox label="Name" bind:text={model.name} /> <Textbox label="Name" bind:text={model.name} />
</div>
<div class="table-controls"> <div class="table-controls">
<span class="budibase__label--big">Fields</span> <span class="label">Fields</span>
<h4 class="hoverable new-field" on:click={() => (showFieldView = true)}> <div class="hoverable new-field" on:click={() => (showFieldView = true)}>
Add new field Add new field
</h4> </div>
</div> </div>
<table class="uk-table fields-table budibase__table"> <table class="uk-table fields-table budibase__table">
@ -67,7 +65,6 @@
<th>Edit</th> <th>Edit</th>
<th>Name</th> <th>Name</th>
<th>Type</th> <th>Type</th>
<th>Values</th>
<th /> <th />
</tr> </tr>
</thead> </thead>
@ -90,9 +87,9 @@
{/each} {/each}
</tbody> </tbody>
</table> </table>
<div class="uk-margin"> <footer>
<ActionButton color="secondary" on:click={saveModel}>Save</ActionButton> <ActionButton color="secondary" on:click={saveModel}>Save</ActionButton>
</div> </footer>
</div> </div>
{:else} {:else}
<FieldView <FieldView
@ -104,41 +101,63 @@
<style> <style>
.padding { .padding {
padding: 20px; padding-top: 40px;
}
.label {
font-size: 14px;
font-weight: 500;
}
.textbox {
margin: 0px 40px 0px 40px;
font-size: 14px;
font-weight: 500;
} }
.new-field { .new-field {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: var(--button-text); color: var(--blue);
} }
.fields-table { .fields-table {
margin: 1rem 1rem 0rem 0rem; margin: 8px 40px 0px 40px;
border-collapse: collapse; border-collapse: collapse;
width: 88%;
} }
tbody > tr:hover { tbody > tr:hover {
background-color: var(--primary10); background-color: var(--grey-light);
} }
.table-controls { .table-controls {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin: 0px 40px;
} }
.ri-more-line:hover { .ri-more-line:hover {
cursor: pointer; cursor: pointer;
} }
heading { .heading {
padding: 20px 20px 0 20px; padding: 40px 40px 0 40px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
h3 { h3 {
margin: 0 0 0 10px; margin: 0 0 0 10px;
color: var(--ink);
}
footer {
background-color: var(--grey-light);
margin-top: 40px;
padding: 20px 40px 20px 40px;
display: flex;
justify-content: flex-end;
} }
</style> </style>

17
packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte
View File

@ -79,19 +79,28 @@
</form> </form>
</div> </div>
<footer> <footer>
<div class="button">
<ActionButton secondary on:click={goBack}>Cancel</ActionButton>
</div>
<ActionButton primary on:click={save}>Save</ActionButton> <ActionButton primary on:click={save}>Save</ActionButton>
<ActionButton alert on:click={goBack}>Cancel</ActionButton>
</footer> </footer>
<style> <style>
.root { .root {
margin: 20px; margin: 40px;
} }
footer { footer {
padding: 20px; padding: 20px 40px;
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: #fafafa; background: var(--grey-light);
display: flex;
align-items: center;
justify-content: flex-end;
}
.button {
margin-right: 20px;
} }
</style> </style>

93
packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
View File

@ -39,51 +39,49 @@
} }
</script> </script>
<heading> <div class="header">
<i class="ri-eye-line button--toggled" /> <i class="ri-eye-line button--toggled" />
<h3 class="budibase__title--3">Create / Edit View</h3> <h3 class="budibase__title--3">Create / Edit View</h3>
</heading> </div>
<form on:submit|preventDefault class="uk-form-stacked root"> <form on:submit|preventDefault class="uk-form-stacked root">
<h4 class="budibase__label--big">Settings</h4>
{#if $store.errors && $store.errors.length > 0} {#if $store.errors && $store.errors.length > 0}
<ErrorsBox errors={$store.errors} /> <ErrorsBox errors={$store.errors} />
{/if} {/if}
<div class="uk-grid-small" uk-grid> <div class="main">
<div class="uk-width-1-2@s"> <div class="uk-grid-small" uk-grid>
<Textbox bind:text={view.name} label="Name" /> <div class="uk-width-1-2@s">
<Textbox bind:text={view.name} label="Name" />
</div>
</div>
<div class="code-snippets">
{#each Object.values(SNIPPET_EDITORS) as snippetType}
<span
class="snippet-selector__heading hoverable"
class:highlighted={currentSnippetEditor === snippetType}
on:click={() => (currentSnippetEditor = snippetType)}>
{snippetType}
</span>
{/each}
{#if currentSnippetEditor === SNIPPET_EDITORS.MAP}
<CodeArea bind:text={view.map} label="Map" />
{:else if currentSnippetEditor === SNIPPET_EDITORS.FILTER}
<CodeArea bind:text={view.filter} label="Filter" />
{:else if currentSnippetEditor === SNIPPET_EDITORS.REDUCE}
<CodeArea bind:text={view.reduce} label="Reduce" />
{/if}
</div> </div>
</div> </div>
<div class="buttons">
<h4 class="budibase__label--big">Snippets</h4> <div class="button">
{#each Object.values(SNIPPET_EDITORS) as snippetType} <ActionButton secondary on:click={deleteView}>Delete</ActionButton>
<span </div>
class="snippet-selector__heading hoverable" <ActionButton color="secondary" on:click={saveView}>Save</ActionButton>
class:highlighted={currentSnippetEditor === snippetType} </div>
on:click={() => (currentSnippetEditor = snippetType)}>
{snippetType}
</span>
{/each}
{#if currentSnippetEditor === SNIPPET_EDITORS.MAP}
<CodeArea bind:text={view.map} label="Map" />
{:else if currentSnippetEditor === SNIPPET_EDITORS.FILTER}
<CodeArea bind:text={view.filter} label="Filter" />
{:else if currentSnippetEditor === SNIPPET_EDITORS.REDUCE}
<CodeArea bind:text={view.reduce} label="Reduce" />
{/if}
<ActionButton color="secondary" on:click={saveView}>Save</ActionButton>
<ActionButton alert on:click={deleteView}>Delete</ActionButton>
</form> </form>
<style> <style>
.root { .root {
height: 100%; height: 100%;
padding: 15px;
}
.snippet-selector__heading {
margin-right: 20px;
opacity: 0.7;
} }
.highlighted { .highlighted {
@ -92,11 +90,38 @@
h3 { h3 {
margin: 0 0 0 10px; margin: 0 0 0 10px;
color: var(--ink);
} }
heading { .snippet-selector__heading {
padding: 20px 20px 0 20px; margin-right: 20px;
font-size: 14px;
color: var(--ink-lighter);
}
.header {
padding: 20px 40px 0 40px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.main {
margin: 20px 40px 0px 40px;
}
.code-snippets {
margin: 20px 0px 20px 0px;
}
.buttons {
display: flex;
justify-content: flex-end;
background-color: var(--grey-light);
margin: 0 40px;
padding: 20px 0;
}
.button {
margin-right: 20px;
}
</style> </style>

38
packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
View File

@ -22,7 +22,11 @@
</script> </script>
<form on:submit|preventDefault class="uk-form-stacked"> <form on:submit|preventDefault class="uk-form-stacked">
<div> <div class="main">
<div class="heading">
<i class="ri-list-settings-line button--toggled" />
<div class="title">Create User</div>
</div>
<div class="uk-margin"> <div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Username</label> <label class="uk-form-label" for="form-stacked-text">Username</label>
<input class="uk-input" type="text" bind:value={username} /> <input class="uk-input" type="text" bind:value={username} />
@ -41,18 +45,40 @@
</div> </div>
</div> </div>
<footer> <footer>
<ActionButton alert on:click={onClosed}>Cancel</ActionButton> <div class="button">
<ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
</div>
<ActionButton disabled={!valid} on:click={createUser}>Save</ActionButton> <ActionButton disabled={!valid} on:click={createUser}>Save</ActionButton>
</footer> </footer>
</form> </form>
<style> <style>
div { .main {
padding: 30px; padding: 40px 40px 20px 40px;
} }
.title {
font-size: 24px;
font-weight: 700;
color: var(--ink);
margin-left: 12px;
}
.heading {
display: flex;
align-items: baseline;
}
footer { footer {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 20px; padding: 20px;
background: #fafafa; background: var(--grey-light);
border-radius: 0.5rem; border-radius: 0 0 5px 5px;
}
.button {
margin-right: 20px;
} }
</style> </style>

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

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

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

@ -1,5 +1,5 @@
<script> <script>
import {buildStyle} from "../../helpers.js" import { buildStyle } from "../../helpers.js"
export let value = "" export let value = ""
export let text = "" export let text = ""
export let icon = "" export let icon = ""
@ -8,19 +8,24 @@
export let selected = false export let selected = false
export let fontWeight = "" export let fontWeight = ""
$: style = buildStyle({padding, fontWeight}) $: style = buildStyle({ padding, fontWeight })
$: useIcon = !!icon $: useIcon = !!icon
</script> </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} {#if useIcon}
<i class={icon} /> <i class={icon} />
{:else} {:else}
<span>{@html text}</span> <span>
{@html text}
</span>
{/if} {/if}
</div> </div>
<style> <style>
.flatbutton { .flatbutton {
cursor: pointer; cursor: pointer;
@ -41,8 +46,8 @@
background: var(--ink-light); background: var(--ink-light);
color: #ffffff; color: #ffffff;
} }
i{ i {
font-size: 20px; font-size: 20px;
} }
</style> </style>

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

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

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

@ -1,6 +1,6 @@
<script> <script>
import { onMount, beforeUpdate } from "svelte" import { onMount, beforeUpdate } from "svelte"
import {buildStyle} from "../../helpers.js" import { buildStyle } from "../../helpers.js"
export let options = [] export let options = []
export let value = "" export let value = ""
export let styleBindingProperty export let styleBindingProperty
@ -214,10 +214,10 @@
height: auto; height: auto;
padding: 5px 0px; padding: 5px 0px;
cursor: pointer; cursor: pointer;
padding-left: 10px padding-left: 10px;
} }
li:hover { li:hover {
background-color:#e6e6e6 background-color: #e6e6e6;
} }
</style> </style>

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

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

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

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

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

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

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

@ -10,13 +10,15 @@
let store = _bb.store let store = _bb.store
async function fetchData() { 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) const response = await _bb.api.get(FETCH_RECORDS_URL)
if (response.status === 200) { if (response.status === 200) {
const json = await response.json() const json = await response.json()
store.update(state => { store.update(state => {
state[model._id] = json state[model] = json
return state return state
}) })
} else { } else {
@ -24,7 +26,8 @@
} }
} }
$: data = $store[model._id] || [] $: data = $store[model] || []
$: if (model) fetchData()
onMount(async () => { onMount(async () => {
await fetchData() await fetchData()

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

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