Use bbui selects for all selects in workflow steps
This commit is contained in:
parent
1610f483b0
commit
c44ba8b995
|
@ -1,14 +1,15 @@
|
||||||
<script>
|
<script>
|
||||||
import { backendUiStore } from "builderStore"
|
import { backendUiStore } from "builderStore"
|
||||||
|
import { Select } from "@budibase/bbui"
|
||||||
|
|
||||||
export let value
|
export let value
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="block-field">
|
<div class="block-field">
|
||||||
<select class="budibase__input" bind:value>
|
<Select bind:value secondary thin>
|
||||||
<option value="">Choose an option</option>
|
<option value="">Choose an option</option>
|
||||||
{#each $backendUiStore.models as model}
|
{#each $backendUiStore.models as model}
|
||||||
<option value={model._id}>{model.name}</option>
|
<option value={model._id}>{model.name}</option>
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
<script>
|
<script>
|
||||||
import { backendUiStore } from "builderStore"
|
import { backendUiStore } from "builderStore"
|
||||||
import { Input, Label } from "@budibase/bbui"
|
import { Input, Select, Label } from "@budibase/bbui"
|
||||||
|
|
||||||
export let value
|
export let value
|
||||||
$: value = value || {}
|
$: value = value || {}
|
||||||
$: model = $backendUiStore.models.find(model => model._id === value?.modelId)
|
$: model = $backendUiStore.models.find(model => model._id === value?.modelId)
|
||||||
$: schemaFields = Object.keys(model?.schema ?? {})
|
$: schemaFields = Object.entries(model?.schema ?? {})
|
||||||
|
|
||||||
function setParsedValue(evt, field) {
|
function setParsedValue(evt, field) {
|
||||||
const fieldSchema = model?.schema[field]
|
const fieldSchema = model?.schema[field]
|
||||||
|
@ -20,30 +20,52 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="block-field">
|
<div class="block-field">
|
||||||
<select class="budibase__input" bind:value={value.modelId}>
|
<Select bind:value={value.modelId} thin secondary>
|
||||||
<option value="">Choose an option</option>
|
<option value="">Choose an option</option>
|
||||||
{#each $backendUiStore.models as model}
|
{#each $backendUiStore.models as model}
|
||||||
<option value={model._id}>{model.name}</option>
|
<option value={model._id}>{model.name}</option>
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if schemaFields.length}
|
{#if schemaFields.length}
|
||||||
<div class="bb-margin-xl block-field">
|
<div class="bb-margin-xl block-field">
|
||||||
{#each schemaFields as field}
|
{#each schemaFields as [field, schema]}
|
||||||
<div class="bb-margin-xl capitalise">
|
<div class="bb-margin-xl capitalise">
|
||||||
<Input
|
{#if schema.constraints?.inclusion?.length}
|
||||||
thin
|
<div class="field-label">{field}</div>
|
||||||
value={value[field]}
|
<Select
|
||||||
label={field}
|
thin
|
||||||
on:change={e => setParsedValue(e, field)} />
|
secondary
|
||||||
|
bind:value={value[field]}>
|
||||||
|
<option value="">Choose an option</option>
|
||||||
|
{#each schema.constraints.inclusion as option}
|
||||||
|
<option value={option}>{option}</option>
|
||||||
|
{/each}
|
||||||
|
</Select>
|
||||||
|
{:else}
|
||||||
|
<Input
|
||||||
|
thin
|
||||||
|
value={value[field]}
|
||||||
|
label={field}
|
||||||
|
on:change={e => setParsedValue(e, field)} />
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.capitalise :global(label) {
|
.field-label {
|
||||||
text-transform: capitalize !important;
|
color: var(--ink);
|
||||||
|
margin-bottom: 12px;
|
||||||
|
display: flex;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.capitalise :global(label), .field-label {
|
||||||
|
text-transform: capitalize;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
{#each inputs as [key, value]}
|
{#each inputs as [key, value]}
|
||||||
<div class="bb-margin-xl block-field">
|
<div class="bb-margin-xl block-field">
|
||||||
<div class="field-label">{value.title}</div>
|
<div class="field-label">{value.title}</div>
|
||||||
{#if value.type === 'string' && value.enum}
|
{#if value.type === 'string' && value.enum?.length}
|
||||||
<Select bind:value={block.inputs[key]} thin secondary>
|
<Select bind:value={block.inputs[key]} thin secondary>
|
||||||
<option value="">Choose an option</option>
|
<option value="">Choose an option</option>
|
||||||
{#each value.enum as option}
|
{#each value.enum as option}
|
||||||
|
|
Loading…
Reference in New Issue