Update create table modal to use new forms
This commit is contained in:
parent
4f7b91f34f
commit
93f64cc671
|
@ -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);
|
||||
|
|
|
@ -92,7 +92,6 @@
|
|||
<ModalContent
|
||||
title="Create Table"
|
||||
confirmText="Create"
|
||||
size="large"
|
||||
onConfirm={saveTable}
|
||||
disabled={error || !name || (dataImport && !dataImport.valid)}>
|
||||
<Input
|
||||
|
|
Loading…
Reference in New Issue