Fix for grid arrow event handling when creating a column

This commit is contained in:
Dean 2024-05-23 17:44:23 +01:00
parent 28a1401793
commit 0db08498d9
2 changed files with 242 additions and 238 deletions

View File

@ -517,258 +517,261 @@
}) })
</script> </script>
<Layout noPadding gap="S"> <span class="create-edit-column">
{#if mounted} <Layout noPadding gap="S">
<Input {#if mounted}
value={editableColumn.name} <Input
autofocus value={editableColumn.name}
on:input={e => { autofocus
if ( on:input={e => {
!uneditable && if (
!(linkEditDisabled && editableColumn.type === LINK_TYPE) !uneditable &&
) { !(linkEditDisabled && editableColumn.type === LINK_TYPE)
editableColumn.name = e.target.value ) {
} editableColumn.name = e.target.value
}} }
disabled={uneditable || }}
(linkEditDisabled && editableColumn.type === LINK_TYPE)} disabled={uneditable ||
error={errors?.name} (linkEditDisabled && editableColumn.type === LINK_TYPE)}
/> error={errors?.name}
{/if}
<Select
placeholder={null}
disabled={!typeEnabled}
bind:value={editableColumn.fieldId}
on:change={onHandleTypeChange}
options={allowedTypes}
getOptionLabel={field => field.name}
getOptionValue={field => field.fieldId}
getOptionIcon={field => field.icon}
isOptionEnabled={option => {
if (option.type === AUTO_TYPE) {
return availableAutoColumnKeys?.length > 0
}
return true
}}
/>
{#if editableColumn.type === FieldType.STRING}
<Input
type="number"
label="Max Length"
bind:value={editableColumn.constraints.length.maximum}
/>
{:else if editableColumn.type === FieldType.OPTIONS}
<OptionSelectDnD
bind:constraints={editableColumn.constraints}
bind:optionColors={editableColumn.optionColors}
/>
{:else if editableColumn.type === FieldType.LONGFORM}
<div>
<div class="tooltip-alignment">
<Label size="M">Formatting</Label>
<AbsTooltip
position="top"
type="info"
text={"Rich text includes support for images, link"}
>
<Icon size="XS" name="InfoOutline" />
</AbsTooltip>
</div>
<Toggle
bind:value={editableColumn.useRichText}
text="Enable rich text support (markdown)"
/> />
</div>
{:else if editableColumn.type === FieldType.ARRAY}
<OptionSelectDnD
bind:constraints={editableColumn.constraints}
bind:optionColors={editableColumn.optionColors}
/>
{:else if editableColumn.type === DATE_TYPE && !editableColumn.autocolumn}
<div class="split-label">
<div class="label-length">
<Label size="M">Earliest</Label>
</div>
<div class="input-length">
<DatePicker
bind:value={editableColumn.constraints.datetime.earliest}
enableTime={!editableColumn.dateOnly}
timeOnly={editableColumn.timeOnly}
/>
</div>
</div>
<div class="split-label">
<div class="label-length">
<Label size="M">Latest</Label>
</div>
<div class="input-length">
<DatePicker
bind:value={editableColumn.constraints.datetime.latest}
enableTime={!editableColumn.dateOnly}
timeOnly={editableColumn.timeOnly}
/>
</div>
</div>
{#if !editableColumn.timeOnly}
{#if datasource?.source !== SourceName.ORACLE && datasource?.source !== SourceName.SQL_SERVER && !editableColumn.dateOnly}
<div>
<div class="row">
<Label>Time zones</Label>
<AbsTooltip
position="top"
type="info"
text={isCreating
? null
: "We recommend not changing how timezones are handled for existing columns, as existing data will not be updated"}
>
<Icon size="XS" name="InfoOutline" />
</AbsTooltip>
</div>
<Toggle
bind:value={editableColumn.ignoreTimezones}
text="Ignore time zones"
/>
</div>
{/if}
<Toggle bind:value={editableColumn.dateOnly} text="Date only" />
{/if} {/if}
{:else if editableColumn.type === FieldType.NUMBER && !editableColumn.autocolumn} <Select
<div class="split-label"> placeholder={null}
<div class="label-length"> disabled={!typeEnabled}
<Label size="M">Min Value</Label> bind:value={editableColumn.fieldId}
</div> on:change={onHandleTypeChange}
<div class="input-length"> options={allowedTypes}
<Input getOptionLabel={field => field.name}
type="number" getOptionValue={field => field.fieldId}
bind:value={editableColumn.constraints.numericality getOptionIcon={field => field.icon}
.greaterThanOrEqualTo} isOptionEnabled={option => {
/> if (option.type === AUTO_TYPE) {
</div> return availableAutoColumnKeys?.length > 0
</div> }
return true
<div class="split-label"> }}
<div class="label-length">
<Label size="M">Max Value</Label>
</div>
<div class="input-length">
<Input
type="number"
bind:value={editableColumn.constraints.numericality.lessThanOrEqualTo}
/>
</div>
</div>
{:else if editableColumn.type === FieldType.LINK && !editableColumn.autocolumn}
<RelationshipSelector
bind:relationshipPart1
bind:relationshipPart2
bind:relationshipTableIdPrimary
bind:relationshipTableIdSecondary
bind:editableColumn
{relationshipOpts1}
{relationshipOpts2}
{linkEditDisabled}
{tableOptions}
{errors}
/> />
{:else if editableColumn.type === FORMULA_TYPE}
{#if !table.sql} {#if editableColumn.type === FieldType.STRING}
<Input
type="number"
label="Max Length"
bind:value={editableColumn.constraints.length.maximum}
/>
{:else if editableColumn.type === FieldType.OPTIONS}
<OptionSelectDnD
bind:constraints={editableColumn.constraints}
bind:optionColors={editableColumn.optionColors}
/>
{:else if editableColumn.type === FieldType.LONGFORM}
<div>
<div class="tooltip-alignment">
<Label size="M">Formatting</Label>
<AbsTooltip
position="top"
type="info"
text={"Rich text includes support for images, link"}
>
<Icon size="XS" name="InfoOutline" />
</AbsTooltip>
</div>
<Toggle
bind:value={editableColumn.useRichText}
text="Enable rich text support (markdown)"
/>
</div>
{:else if editableColumn.type === FieldType.ARRAY}
<OptionSelectDnD
bind:constraints={editableColumn.constraints}
bind:optionColors={editableColumn.optionColors}
/>
{:else if editableColumn.type === DATE_TYPE && !editableColumn.autocolumn}
<div class="split-label"> <div class="split-label">
<div class="label-length"> <div class="label-length">
<Label size="M">Formula Type</Label> <Label size="M">Earliest</Label>
</div> </div>
<div class="input-length"> <div class="input-length">
<Select <DatePicker
bind:value={editableColumn.formulaType} bind:value={editableColumn.constraints.datetime.earliest}
options={[ enableTime={!editableColumn.dateOnly}
{ label: "Dynamic", value: "dynamic" }, timeOnly={editableColumn.timeOnly}
{ label: "Static", value: "static" },
]}
disabled={!isCreating}
getOptionLabel={option => option.label}
getOptionValue={option => option.value}
tooltip="Dynamic formula are calculated when retrieved, but cannot be filtered or sorted by,
while static formula are calculated when the row is saved."
/> />
</div> </div>
</div> </div>
{/if}
<div class="split-label">
<div class="label-length">
<Label size="M">Formula</Label>
</div>
<div class="input-length">
<ModalBindableInput
panel={ServerBindingPanel}
title="Formula"
value={editableColumn.formula}
on:change={e => {
editableColumn = {
...editableColumn,
formula: e.detail,
}
}}
bindings={getBindings({ table })}
allowJS
context={rowGoldenSample}
/>
</div>
</div>
{:else if editableColumn.type === JSON_TYPE}
<Button primary text on:click={openJsonSchemaEditor}
>Open schema editor</Button
>
{/if}
{#if editableColumn.type === AUTO_TYPE || editableColumn.autocolumn}
<Select
label="Auto column type"
value={editableColumn.subtype}
on:change={e => (editableColumn.subtype = e.detail)}
options={Object.entries(autoColumnOptions)}
getOptionLabel={option => option[1].name}
getOptionValue={option => option[0]}
disabled={!availableAutoColumnKeys?.length || editableColumn.autocolumn}
error={errors?.subtype}
/>
{/if}
{#if canBeRequired || canBeDisplay} <div class="split-label">
<div> <div class="label-length">
{#if canBeRequired} <Label size="M">Latest</Label>
<Toggle </div>
value={required} <div class="input-length">
on:change={onChangeRequired} <DatePicker
disabled={primaryDisplay} bind:value={editableColumn.constraints.datetime.latest}
thin enableTime={!editableColumn.dateOnly}
text="Required" timeOnly={editableColumn.timeOnly}
/> />
</div>
</div>
{#if !editableColumn.timeOnly}
{#if datasource?.source !== SourceName.ORACLE && datasource?.source !== SourceName.SQL_SERVER && !editableColumn.dateOnly}
<div>
<div class="row">
<Label>Time zones</Label>
<AbsTooltip
position="top"
type="info"
text={isCreating
? null
: "We recommend not changing how timezones are handled for existing columns, as existing data will not be updated"}
>
<Icon size="XS" name="InfoOutline" />
</AbsTooltip>
</div>
<Toggle
bind:value={editableColumn.ignoreTimezones}
text="Ignore time zones"
/>
</div>
{/if}
<Toggle bind:value={editableColumn.dateOnly} text="Date only" />
{/if} {/if}
</div> {:else if editableColumn.type === FieldType.NUMBER && !editableColumn.autocolumn}
{/if} <div class="split-label">
</Layout> <div class="label-length">
<Label size="M">Min Value</Label>
<div class="action-buttons"> </div>
{#if !uneditable && originalName != null} <div class="input-length">
<Button quiet warning text on:click={confirmDelete}>Delete</Button> <Input
{/if} type="number"
<Button secondary newStyles on:click={cancelEdit}>Cancel</Button> bind:value={editableColumn.constraints.numericality
<Button .greaterThanOrEqualTo}
disabled={invalid || savingColumn} />
newStyles </div>
cta
on:click={saveColumn}
>
{#if savingColumn}
<div class="save-loading">
<ProgressCircle overBackground={true} size="S" />
</div> </div>
{:else}
Save <div class="split-label">
<div class="label-length">
<Label size="M">Max Value</Label>
</div>
<div class="input-length">
<Input
type="number"
bind:value={editableColumn.constraints.numericality
.lessThanOrEqualTo}
/>
</div>
</div>
{:else if editableColumn.type === FieldType.LINK && !editableColumn.autocolumn}
<RelationshipSelector
bind:relationshipPart1
bind:relationshipPart2
bind:relationshipTableIdPrimary
bind:relationshipTableIdSecondary
bind:editableColumn
{relationshipOpts1}
{relationshipOpts2}
{linkEditDisabled}
{tableOptions}
{errors}
/>
{:else if editableColumn.type === FORMULA_TYPE}
{#if !table.sql}
<div class="split-label">
<div class="label-length">
<Label size="M">Formula Type</Label>
</div>
<div class="input-length">
<Select
bind:value={editableColumn.formulaType}
options={[
{ label: "Dynamic", value: "dynamic" },
{ label: "Static", value: "static" },
]}
disabled={!isCreating}
getOptionLabel={option => option.label}
getOptionValue={option => option.value}
tooltip="Dynamic formula are calculated when retrieved, but cannot be filtered or sorted by,
while static formula are calculated when the row is saved."
/>
</div>
</div>
{/if}
<div class="split-label">
<div class="label-length">
<Label size="M">Formula</Label>
</div>
<div class="input-length">
<ModalBindableInput
panel={ServerBindingPanel}
title="Formula"
value={editableColumn.formula}
on:change={e => {
editableColumn = {
...editableColumn,
formula: e.detail,
}
}}
bindings={getBindings({ table })}
allowJS
context={rowGoldenSample}
/>
</div>
</div>
{:else if editableColumn.type === JSON_TYPE}
<Button primary text on:click={openJsonSchemaEditor}
>Open schema editor</Button
>
{/if} {/if}
</Button> {#if editableColumn.type === AUTO_TYPE || editableColumn.autocolumn}
</div> <Select
label="Auto column type"
value={editableColumn.subtype}
on:change={e => (editableColumn.subtype = e.detail)}
options={Object.entries(autoColumnOptions)}
getOptionLabel={option => option[1].name}
getOptionValue={option => option[0]}
disabled={!availableAutoColumnKeys?.length || editableColumn.autocolumn}
error={errors?.subtype}
/>
{/if}
{#if canBeRequired || canBeDisplay}
<div>
{#if canBeRequired}
<Toggle
value={required}
on:change={onChangeRequired}
disabled={primaryDisplay}
thin
text="Required"
/>
{/if}
</div>
{/if}
</Layout>
<div class="action-buttons">
{#if !uneditable && originalName != null}
<Button quiet warning text on:click={confirmDelete}>Delete</Button>
{/if}
<Button secondary newStyles on:click={cancelEdit}>Cancel</Button>
<Button
disabled={invalid || savingColumn}
newStyles
cta
on:click={saveColumn}
>
{#if savingColumn}
<div class="save-loading">
<ProgressCircle overBackground={true} size="S" />
</div>
{:else}
Save
{/if}
</Button>
</div>
</span>
<Modal bind:this={jsonSchemaModal}> <Modal bind:this={jsonSchemaModal}>
<JSONSchemaModal <JSONSchemaModal
schema={editableColumn.schema} schema={editableColumn.schema}

View File

@ -24,6 +24,7 @@
".date-time-popover", ".date-time-popover",
"#builder-side-panel-container", "#builder-side-panel-container",
"[data-grid-ignore]", "[data-grid-ignore]",
".create-edit-column",
] ]
// Global key listener which intercepts all key events // Global key listener which intercepts all key events