82 lines
2.3 KiB
Svelte
82 lines
2.3 KiB
Svelte
<script>
|
|
import { Label, DatePicker, Input, Select, Toggle } from "@budibase/bbui"
|
|
import Dropzone from "./attachments/Dropzone.svelte"
|
|
import LinkedRowSelector from "./LinkedRowSelector.svelte"
|
|
import ErrorsBox from "./ErrorsBox.svelte"
|
|
import { capitalise } from "./helpers"
|
|
|
|
export let _bb
|
|
export let table
|
|
export let wide = false
|
|
|
|
let store = _bb.store
|
|
let schema = {}
|
|
let rowId
|
|
let errors = {}
|
|
|
|
$: schema = $store.data && $store.data._table && $store.data._table.schema
|
|
$: fields = schema ? Object.keys(schema) : []
|
|
</script>
|
|
|
|
<div class="form-content">
|
|
<ErrorsBox errors={$store.saveRowErrors || {}} />
|
|
{#each fields as field}
|
|
<div class="form-field" class:wide>
|
|
{#if !(schema[field].type === 'boolean' && !wide)}
|
|
<Label extraSmall={!wide} grey>{capitalise(schema[field].name)}</Label>
|
|
{/if}
|
|
{#if schema[field].type === 'options'}
|
|
<Select secondary bind:value={$store.data[field]}>
|
|
<option value="">Choose an option</option>
|
|
{#each schema[field].constraints.inclusion as opt}
|
|
<option>{opt}</option>
|
|
{/each}
|
|
</Select>
|
|
{:else if schema[field].type === 'datetime'}
|
|
<DatePicker bind:value={$store.data[field]} />
|
|
{:else if schema[field].type === 'boolean'}
|
|
<Toggle
|
|
text={wide ? null : capitalise(schema[field].name)}
|
|
bind:checked={$store.data[field]} />
|
|
{:else if schema[field].type === 'number'}
|
|
<Input type="number" bind:value={$store.data[field]} />
|
|
{:else if schema[field].type === 'string'}
|
|
<Input bind:value={$store.data[field]} />
|
|
{:else if schema[field].type === 'attachment'}
|
|
<Dropzone bind:files={$store.data[field]} />
|
|
{:else if schema[field].type === 'link'}
|
|
<LinkedRowSelector
|
|
secondary
|
|
showLabel={false}
|
|
bind:linkedRows={$store.data[field]}
|
|
schema={schema[field]} />
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<style>
|
|
.form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.form-content {
|
|
display: grid;
|
|
gap: var(--spacing-xl);
|
|
width: 100%;
|
|
}
|
|
|
|
.form-field {
|
|
display: grid;
|
|
}
|
|
.form-field.wide {
|
|
align-items: center;
|
|
grid-template-columns: 20% 1fr;
|
|
gap: var(--spacing-xl);
|
|
}
|
|
.form-field.wide :global(label) {
|
|
margin-bottom: 0;
|
|
}
|
|
</style>
|