Merge branch 'master' of github.com:Budibase/budibase
This commit is contained in:
Michael Shanks
commit
c81ffe04d4
|
|
@ -1,8 +1,7 @@
|
|||
/* Budibase Component Styles */
|
||||
.header {
|
||||
font-size: 0.75rem;
|
||||
color: #000333;
|
||||
opacity: 0.4;
|
||||
color: var(--ink);
|
||||
text-transform: uppercase;
|
||||
margin-top: 1rem;
|
||||
font-weight: 500;
|
||||
|
|
@ -81,10 +80,9 @@
|
|||
max-width: 250px;
|
||||
height: 35px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #DBDBDB;
|
||||
border: 1px solid var(--grey-dark);
|
||||
text-align: left;
|
||||
letter-spacing: 0.7px;
|
||||
color: #000333;
|
||||
color: var(--ink);
|
||||
font-size: 16px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
|
@ -103,27 +101,32 @@
|
|||
}
|
||||
|
||||
.budibase__table {
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid var(--grey-dark);
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.budibase__table thead {
|
||||
background: #fafafa;
|
||||
background: var(--blue-light);
|
||||
}
|
||||
|
||||
.budibase__table thead > tr > th {
|
||||
color: var(--button-text);
|
||||
color: var(--ink);
|
||||
text-transform: capitalize;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.budibase__table tr {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-bottom: 1px solid var(--grey-light);
|
||||
}
|
||||
|
||||
.button--toggled {
|
||||
background: #fafafa;
|
||||
color: var(--button-text);
|
||||
padding: 10px;
|
||||
background: var(--blue-light);
|
||||
color: var(--ink-light);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<script>
|
||||
export let disabled = false
|
||||
export let hidden = false
|
||||
export let secondary = false
|
||||
export let primary = true
|
||||
export let cancel = false
|
||||
export let alert = false
|
||||
|
|
@ -11,6 +12,7 @@
|
|||
on:click
|
||||
class="button"
|
||||
class:hidden
|
||||
class:secondary
|
||||
class:primary
|
||||
class:alert
|
||||
class:cancel
|
||||
|
|
@ -22,12 +24,14 @@
|
|||
<style>
|
||||
.primary {
|
||||
color: #ffffff;
|
||||
background: #0055ff;
|
||||
background: var(--blue);
|
||||
border: solid 1px var(--blue);
|
||||
}
|
||||
|
||||
.alert {
|
||||
color: rgba(255, 0, 31, 1);
|
||||
background: rgba(255, 0, 31, 0.1);
|
||||
color: white;
|
||||
background: #e26d69;
|
||||
border: solid 1px #e26d69;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
|
|
@ -35,18 +39,22 @@
|
|||
background: none;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
color: var(--ink);
|
||||
border: solid 1px var(--grey-dark);
|
||||
background: white;
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
font-weight: 500;
|
||||
border-radius: 3px;
|
||||
padding: 10px 20px;
|
||||
height: 45px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
filter: saturate(90%);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,8 +14,7 @@
|
|||
background: var(--secondary80);
|
||||
color: var(--white);
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
width: 95%;
|
||||
height: 100px;
|
||||
height: 200px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import {onMount} from "svelte"
|
||||
import { onMount } from "svelte"
|
||||
import { buildStyle } from "../../helpers.js"
|
||||
export let value = ""
|
||||
export let textAlign = "left"
|
||||
|
|
@ -7,22 +7,30 @@
|
|||
export let placeholder = ""
|
||||
export let suffix = ""
|
||||
export let onChange = val => {}
|
||||
|
||||
|
||||
let centerPlaceholder = textAlign === "center"
|
||||
|
||||
let style = buildStyle({ width, textAlign })
|
||||
|
||||
|
||||
function handleChange(val) {
|
||||
value = val
|
||||
let _value = value !== "auto" ? value + suffix : 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>
|
||||
|
||||
<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 {
|
||||
|
|
@ -43,7 +51,7 @@
|
|||
outline: none;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
input::placeholder {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,9 +11,11 @@
|
|||
|
||||
function handleChange(val, idx) {
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -50,10 +50,10 @@
|
|||
<style>
|
||||
.uk-modal-dialog {
|
||||
border-radius: 0.3rem;
|
||||
width: 60%;
|
||||
width: 520px;
|
||||
height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
padding: 40px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -20,11 +20,9 @@
|
|||
<style>
|
||||
.select-container {
|
||||
font-size: 14px;
|
||||
color: var(--secondary60);
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
max-width: 400px;
|
||||
min-width: 275px;
|
||||
border: var(--grey-dark) 1px solid;
|
||||
max-width: 256px;
|
||||
}
|
||||
|
||||
.adjusted {
|
||||
|
|
@ -43,7 +41,7 @@
|
|||
font-family: sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #000333;
|
||||
color: var(--ink);
|
||||
padding: 0 40px 0px 20px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
|
@ -63,6 +61,6 @@
|
|||
width: 30px;
|
||||
height: 30px;
|
||||
pointer-events: none;
|
||||
color: var(--secondary100);
|
||||
color: var(--ink);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -145,19 +145,19 @@
|
|||
}
|
||||
|
||||
table {
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid var(--grey-dark);
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: #f9f9f9;
|
||||
border: 1px solid #ccc;
|
||||
background: var(--blue-light);
|
||||
border: 1px solid var(--grey-dark);
|
||||
}
|
||||
|
||||
thead th {
|
||||
color: var(--button-text);
|
||||
color: var(--ink);
|
||||
text-transform: capitalize;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
|
|
@ -166,14 +166,14 @@
|
|||
}
|
||||
|
||||
tbody tr {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-bottom: 1px solid var(--grey-dark);
|
||||
transition: 0.3s background-color;
|
||||
color: var(--secondary100);
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: #fafafa;
|
||||
background: var(--grey-light);
|
||||
}
|
||||
|
||||
.table-controls {
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<div class="heading">
|
||||
{#if !showFieldView}
|
||||
<i class="ri-list-settings-line button--toggled" />
|
||||
<h3 class="budibase__title--3">Create / Edit Model</h3>
|
||||
|
|
@ -43,22 +43,20 @@
|
|||
<i class="ri-file-list-line button--toggled" />
|
||||
<h3 class="budibase__title--3">Create / Edit Field</h3>
|
||||
{/if}
|
||||
</header>
|
||||
</div>
|
||||
{#if !showFieldView}
|
||||
<div class="padding">
|
||||
<h4 class="budibase__label--big">Settings</h4>
|
||||
|
||||
{#if $store.errors && $store.errors.length > 0}
|
||||
<ErrorsBox errors={$store.errors} />
|
||||
{/if}
|
||||
|
||||
<Textbox label="Name" bind:text={model.name} />
|
||||
|
||||
<div class="textbox">
|
||||
<Textbox label="Name" bind:text={model.name} />
|
||||
</div>
|
||||
<div class="table-controls">
|
||||
<span class="budibase__label--big">Fields</span>
|
||||
<h4 class="hoverable new-field" on:click={() => (showFieldView = true)}>
|
||||
<span class="label">Fields</span>
|
||||
<div class="hoverable new-field" on:click={() => (showFieldView = true)}>
|
||||
Add new field
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="uk-table fields-table budibase__table">
|
||||
|
|
@ -67,7 +65,6 @@
|
|||
<th>Edit</th>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Values</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
@ -90,9 +87,9 @@
|
|||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="uk-margin">
|
||||
<footer>
|
||||
<ActionButton color="secondary" on:click={saveModel}>Save</ActionButton>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
{:else}
|
||||
<FieldView
|
||||
|
|
@ -104,41 +101,63 @@
|
|||
|
||||
<style>
|
||||
.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 {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: var(--button-text);
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.fields-table {
|
||||
margin: 1rem 1rem 0rem 0rem;
|
||||
margin: 8px 40px 0px 40px;
|
||||
border-collapse: collapse;
|
||||
width: 88%;
|
||||
}
|
||||
|
||||
tbody > tr:hover {
|
||||
background-color: var(--primary10);
|
||||
background-color: var(--grey-light);
|
||||
}
|
||||
|
||||
.table-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0px 40px;
|
||||
}
|
||||
|
||||
.ri-more-line:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
heading {
|
||||
padding: 20px 20px 0 20px;
|
||||
.heading {
|
||||
padding: 40px 40px 0 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h3 {
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -79,19 +79,28 @@
|
|||
</form>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="button">
|
||||
<ActionButton secondary on:click={goBack}>Cancel</ActionButton>
|
||||
</div>
|
||||
<ActionButton primary on:click={save}>Save</ActionButton>
|
||||
<ActionButton alert on:click={goBack}>Cancel</ActionButton>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
margin: 20px;
|
||||
margin: 40px;
|
||||
}
|
||||
footer {
|
||||
padding: 20px;
|
||||
padding: 20px 40px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #fafafa;
|
||||
background: var(--grey-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -39,51 +39,49 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<heading>
|
||||
<div class="header">
|
||||
<i class="ri-eye-line button--toggled" />
|
||||
<h3 class="budibase__title--3">Create / Edit View</h3>
|
||||
</heading>
|
||||
</div>
|
||||
<form on:submit|preventDefault class="uk-form-stacked root">
|
||||
<h4 class="budibase__label--big">Settings</h4>
|
||||
{#if $store.errors && $store.errors.length > 0}
|
||||
<ErrorsBox errors={$store.errors} />
|
||||
{/if}
|
||||
<div class="uk-grid-small" uk-grid>
|
||||
<div class="uk-width-1-2@s">
|
||||
<Textbox bind:text={view.name} label="Name" />
|
||||
<div class="main">
|
||||
<div class="uk-grid-small" uk-grid>
|
||||
<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>
|
||||
|
||||
<h4 class="budibase__label--big">Snippets</h4>
|
||||
{#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}
|
||||
|
||||
<ActionButton color="secondary" on:click={saveView}>Save</ActionButton>
|
||||
<ActionButton alert on:click={deleteView}>Delete</ActionButton>
|
||||
<div class="buttons">
|
||||
<div class="button">
|
||||
<ActionButton secondary on:click={deleteView}>Delete</ActionButton>
|
||||
</div>
|
||||
<ActionButton color="secondary" on:click={saveView}>Save</ActionButton>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
height: 100%;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.snippet-selector__heading {
|
||||
margin-right: 20px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.highlighted {
|
||||
|
|
@ -92,11 +90,38 @@
|
|||
|
||||
h3 {
|
||||
margin: 0 0 0 10px;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
heading {
|
||||
padding: 20px 20px 0 20px;
|
||||
.snippet-selector__heading {
|
||||
margin-right: 20px;
|
||||
font-size: 14px;
|
||||
color: var(--ink-lighter);
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 20px 40px 0 40px;
|
||||
display: flex;
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,11 @@
|
|||
</script>
|
||||
|
||||
<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">
|
||||
<label class="uk-form-label" for="form-stacked-text">Username</label>
|
||||
<input class="uk-input" type="text" bind:value={username} />
|
||||
|
|
@ -41,18 +45,40 @@
|
|||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</footer>
|
||||
</form>
|
||||
|
||||
<style>
|
||||
div {
|
||||
padding: 30px;
|
||||
.main {
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border-radius: 0.5rem;
|
||||
background: var(--grey-light);
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="root" on:click|stopPropagation={() => {}}>
|
||||
<div class="root boundary" on:click|stopPropagation={() => {}}>
|
||||
<button>
|
||||
<MoreIcon />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import {buildStyle} from "../../helpers.js"
|
||||
import { buildStyle } from "../../helpers.js"
|
||||
export let value = ""
|
||||
export let text = ""
|
||||
export let icon = ""
|
||||
|
|
@ -8,19 +8,24 @@
|
|||
export let selected = false
|
||||
export let fontWeight = ""
|
||||
|
||||
$: style = buildStyle({padding, fontWeight})
|
||||
$: style = buildStyle({ padding, fontWeight })
|
||||
$: 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;
|
||||
|
|
@ -41,8 +46,8 @@
|
|||
background: var(--ink-light);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
i{
|
||||
|
||||
i {
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -28,10 +28,8 @@
|
|||
onChange(val)
|
||||
}
|
||||
|
||||
|
||||
const checkSelected = val =>
|
||||
isMultiSelect ? value.includes(val) : value === val
|
||||
|
||||
</script>
|
||||
|
||||
<div class="flatbutton-group">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import { onMount, beforeUpdate } from "svelte"
|
||||
import {buildStyle} from "../../helpers.js"
|
||||
import { buildStyle } from "../../helpers.js"
|
||||
export let options = []
|
||||
export let value = ""
|
||||
export let styleBindingProperty
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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: [],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
Loading…
Reference in New Issue