1
0
Fork 0
mirror of synced 2024-07-21 06:05:52 +12:00

Update some more parts of the builder to use new form components

This commit is contained in:
Andrew Kingston 2021-04-16 13:07:38 +01:00
parent 106b7b9ebd
commit 359588592e
3 changed files with 21 additions and 25 deletions

View file

@ -32,9 +32,8 @@
<div class="control"> <div class="control">
<Input <Input
{thin}
value={readableValue} value={readableValue}
on:change={event => onChange(event.target.value)} on:change={event => onChange(event.detail)}
{placeholder} /> {placeholder} />
<div class="icon" on:click={bindingDrawer.show}> <div class="icon" on:click={bindingDrawer.show}>
<Icon name="lightning" /> <Icon name="lightning" />

View file

@ -53,15 +53,9 @@
<Label small>{fieldLabel}</Label> <Label small>{fieldLabel}</Label>
{#if schemaFields} {#if schemaFields}
<Select <Select
thin
secondary
value={field[0]} value={field[0]}
on:change={event => updateFieldName(idx, event.target.value)}> on:change={event => updateFieldName(idx, event.detail)}
<option value="" /> options={schemaFields.map(field => field.name)} />
{#each schemaFields as schemaField}
<option value={schemaField.name}>{schemaField.name}</option>
{/each}
</Select>
{:else} {:else}
<Input <Input
thin thin
@ -76,7 +70,11 @@
bindings={bindableProperties} bindings={bindableProperties}
on:change={event => updateFieldValue(idx, event.detail)} /> on:change={event => updateFieldValue(idx, event.detail)} />
<div class="remove-field-container"> <div class="remove-field-container">
<Button icon="Close" size="S" quiet on:click={() => removeField(field[0])} /> <Button
icon="Close"
size="S"
quiet
on:click={() => removeField(field[0])} />
</div> </div>
{/each} {/each}
<div> <div>

View file

@ -15,7 +15,7 @@
$store.selectedComponentId $store.selectedComponentId
) )
$: schemaFields = getSchemaFields(parameters?.tableId) $: schemaFields = getSchemaFields(parameters?.tableId)
$: tableOptions = $tables || [] $: tableOptions = $tables.list || []
const getSchemaFields = tableId => { const getSchemaFields = tableId => {
const { schema } = getSchemaForDatasource({ type: "table", tableId }) const { schema } = getSchemaForDatasource({ type: "table", tableId })
@ -35,20 +35,19 @@
</Body> </Body>
<div class="fields"> <div class="fields">
<Label small>Data Source</Label> <Label small>Data Source</Label>
<Select thin secondary bind:value={parameters.providerId}> <Select
<option value="">None</option> bind:value={parameters.providerId}
{#each dataProviderComponents as provider} options={dataProviderComponents}
<option value={provider._id}>{provider._instanceName}</option> placeholder="None"
{/each} getOptionLabel={option => option._instanceName}
</Select> getOptionValue={option => option._id} />
<Label small>Table</Label> <Label small>Table</Label>
<Select thin secondary bind:value={parameters.tableId}> <Select
<option value="" /> bind:value={parameters.tableId}
{#each tableOptions as table} options={tableOptions}
<option value={table._id}>{table.name}</option> getOptionLabel={option => option.name}
{/each} getOptionValue={option => option._id} />
</Select>
{#if parameters.tableId} {#if parameters.tableId}
<SaveFields <SaveFields
@ -74,7 +73,7 @@
column-gap: var(--spacing-l); column-gap: var(--spacing-l);
row-gap: var(--spacing-s); row-gap: var(--spacing-s);
grid-template-columns: auto 1fr auto 1fr auto; grid-template-columns: auto 1fr auto 1fr auto;
align-items: baseline; align-items: center;
} }
.fields :global(> div:nth-child(2)), .fields :global(> div:nth-child(2)),