Update create table modal to use new forms

This commit is contained in:
Andrew Kingston 2021-04-16 09:40:44 +01:00
parent 4f7b91f34f
commit 93f64cc671
2 changed files with 26 additions and 16 deletions

View File

@ -91,9 +91,24 @@
}
const handleTypeChange = column => evt => {
schema[column].type = evt.target.value
schema[column].type = evt.detail
validateCSV()
}
const typeOptions = [
{
label: "Text",
value: "string",
},
{
label: "Number",
value: "number",
},
{
label: "Date",
value: "datetime",
},
]
</script>
<div class="dropzone">
@ -108,14 +123,12 @@
<div class="field">
<span>{columnName}</span>
<Select
secondary
thin
bind:value={schema[columnName].type}
on:change={handleTypeChange(columnName)}>
<option value={'string'}>Text</option>
<option value={'number'}>Number</option>
<option value={'datetime'}>Date</option>
</Select>
on:change={handleTypeChange(columnName)}
options={typeOptions}
placeholder={null}
getOptionLabel={option => option.label}
getOptionValue={option => option.value} />
<span class="field-status" class:error={!schema[columnName].success}>
{schema[columnName].success ? 'Success' : 'Failure'}
</span>
@ -128,12 +141,10 @@
</div>
{#if fields.length}
<div class="display-column">
<Label extraSmall grey>Display Column</Label>
<Select thin secondary bind:value={primaryDisplay}>
{#each fields as field}
<option value={field}>{field}</option>
{/each}
</Select>
<Select
label="Display Column"
bind:value={primaryDisplay}
options={fields} />
</div>
{/if}
@ -201,7 +212,7 @@
.field {
display: grid;
grid-template-columns: 2fr 4fr 1fr 1fr;
grid-template-columns: 2fr 2fr 1fr auto;
margin-top: var(--spacing-m);
align-items: center;
grid-gap: var(--spacing-m);

View File

@ -92,7 +92,6 @@
<ModalContent
title="Create Table"
confirmText="Create"
size="large"
onConfirm={saveTable}
disabled={error || !name || (dataImport && !dataImport.valid)}>
<Input