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