Use bbui selects for all selects in workflow steps

This commit is contained in:
Andrew Kingston 2020-09-16 14:38:18 +01:00
parent 1610f483b0
commit c44ba8b995
3 changed files with 38 additions and 15 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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}