CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-08-23 14:01:34 +12:00
Code Issues Projects Releases Wiki Activity

Removed fix for grid keyboard events

Browse source
This commit is contained in:
Dean 2024-05-23 18:06:08 +01:00
parent 9edc0b7c3c
commit 5a289bd027
2 changed files with 236 additions and 240 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

475
packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
View file

@ -517,261 +517,258 @@
}) })
</script> </script>
<span class="create-edit-column"> <Layout noPadding gap="S">
<Layout noPadding gap="S"> {#if mounted}
{#if mounted} <Input
<Input value={editableColumn.name}
value={editableColumn.name} autofocus
autofocus on:input={e => {
on:input={e => { if (
if ( !uneditable &&
!uneditable && !(linkEditDisabled && editableColumn.type === LINK_TYPE)
!(linkEditDisabled && editableColumn.type === LINK_TYPE) ) {
) { editableColumn.name = e.target.value
editableColumn.name = e.target.value
}
}}
disabled={uneditable ||
(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
}} }}
disabled={uneditable ||
(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} {#if editableColumn.type === FieldType.STRING}
<Input <Input
type="number" type="number"
label="Max Length" label="Max Length"
bind:value={editableColumn.constraints.length.maximum} bind:value={editableColumn.constraints.length.maximum}
/> />
{:else if editableColumn.type === FieldType.OPTIONS} {:else if editableColumn.type === FieldType.OPTIONS}
<OptionSelectDnD <OptionSelectDnD
bind:constraints={editableColumn.constraints} bind:constraints={editableColumn.constraints}
bind:optionColors={editableColumn.optionColors} bind:optionColors={editableColumn.optionColors}
/> />
{:else if editableColumn.type === FieldType.LONGFORM} {:else if editableColumn.type === FieldType.LONGFORM}
<div> <div>
<div class="tooltip-alignment"> <div class="tooltip-alignment">
<Label size="M">Formatting</Label> <Label size="M">Formatting</Label>
<AbsTooltip <AbsTooltip
position="top" position="top"
type="info" type="info"
text={"Rich text includes support for images, link"} text={"Rich text includes support for images, link"}
> >
<Icon size="XS" name="InfoOutline" /> <Icon size="XS" name="InfoOutline" />
</AbsTooltip> </AbsTooltip>
</div> </div>
<Toggle <Toggle
bind:value={editableColumn.useRichText} bind:value={editableColumn.useRichText}
text="Enable rich text support (markdown)" 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>
{:else if editableColumn.type === FieldType.ARRAY} </div>
<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="split-label">
<div class="label-length"> <div class="label-length">
<Label size="M">Latest</Label> <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> </div>
{#if !editableColumn.timeOnly} <div class="input-length">
{#if datasource?.source !== SourceName.ORACLE && datasource?.source !== SourceName.SQL_SERVER && !editableColumn.dateOnly} <DatePicker
<div> bind:value={editableColumn.constraints.datetime.latest}
<div class="row"> enableTime={!editableColumn.dateOnly}
<Label>Time zones</Label> timeOnly={editableColumn.timeOnly}
<AbsTooltip />
position="top" </div>
type="info" </div>
text={isCreating {#if !editableColumn.timeOnly}
? null {#if datasource?.source !== SourceName.ORACLE && datasource?.source !== SourceName.SQL_SERVER && !editableColumn.dateOnly}
: "We recommend not changing how timezones are handled for existing columns, as existing data will not be updated"} <div>
> <div class="row">
<Icon size="XS" name="InfoOutline" /> <Label>Time zones</Label>
</AbsTooltip> <AbsTooltip
</div> position="top"
<Toggle type="info"
bind:value={editableColumn.ignoreTimezones} text={isCreating
text="Ignore time zones" ? 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> </div>
{/if}
<Toggle bind:value={editableColumn.dateOnly} text="Date only" />
{/if}
{:else if editableColumn.type === FieldType.NUMBER && !editableColumn.autocolumn}
<div class="split-label">
<div class="label-length">
<Label size="M">Min Value</Label>
</div>
<div class="input-length">
<Input
type="number"
bind:value={editableColumn.constraints.numericality
.greaterThanOrEqualTo}
/>
</div>
</div>
<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 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>
{#if canBeRequired}
<Toggle <Toggle
value={required} bind:value={editableColumn.ignoreTimezones}
on:change={onChangeRequired} text="Ignore time zones"
disabled={primaryDisplay}
thin
text="Required"
/> />
{/if} </div>
{/if}
<Toggle bind:value={editableColumn.dateOnly} text="Date only" />
{/if}
{:else if editableColumn.type === FieldType.NUMBER && !editableColumn.autocolumn}
<div class="split-label">
<div class="label-length">
<Label size="M">Min Value</Label>
</div>
<div class="input-length">
<Input
type="number"
bind:value={editableColumn.constraints.numericality
.greaterThanOrEqualTo}
/>
</div>
</div>
<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> </div>
{/if} {/if}
</Layout> <div class="split-label">
<div class="label-length">
<div class="action-buttons"> <Label size="M">Formula</Label>
{#if !uneditable && originalName != null} </div>
<Button quiet warning text on:click={confirmDelete}>Delete</Button> <div class="input-length">
{/if} <ModalBindableInput
<Button secondary newStyles on:click={cancelEdit}>Cancel</Button> panel={ServerBindingPanel}
<Button title="Formula"
disabled={invalid || savingColumn} value={editableColumn.formula}
newStyles on:change={e => {
cta editableColumn = {
on:click={saveColumn} ...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 savingColumn} {/if}
<div class="save-loading"> {#if editableColumn.type === AUTO_TYPE || editableColumn.autocolumn}
<ProgressCircle overBackground={true} size="S" /> <Select
</div> label="Auto column type"
{:else} value={editableColumn.subtype}
Save 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} {/if}
</Button> </div>
</div> {/if}
</span> </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>
<Modal bind:this={jsonSchemaModal}> <Modal bind:this={jsonSchemaModal}>
<JSONSchemaModal <JSONSchemaModal
schema={editableColumn.schema} schema={editableColumn.schema}

1
packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
View file

@ -24,7 +24,6 @@
".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