diff --git a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte index 3f0e2341be..43efda80fa 100644 --- a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte +++ b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte @@ -11,7 +11,9 @@ let open = false let anchor - $: restrictedColumns = $columns.filter(col => !col.visible || col.readonly) + $: allColumns = $stickyColumn ? [$stickyColumn, ...$columns] : $columns + + $: restrictedColumns = allColumns.filter(col => !col.visible || col.readonly) $: anyRestricted = restrictedColumns.length $: text = anyRestricted ? `Columns (${anyRestricted} restricted)` : "Columns" @@ -34,36 +36,44 @@ HIDDEN: "hidden", } - const EDIT_OPTION = { - icon: "Edit", - value: PERMISSION_OPTIONS.WRITABLE, - tooltip: "Writable", - } - $: READONLY_OPTION = { - icon: "Visibility", - value: PERMISSION_OPTIONS.READONLY, - tooltip: allowViewReadonlyColumns - ? "Read only" - : "Read only (premium feature)", - disabled: !allowViewReadonlyColumns, - } - const HIDDEN_OPTION = { - icon: "VisibilityOff", - value: PERMISSION_OPTIONS.HIDDEN, - tooltip: "Hidden", - } + $: displayColumns = allColumns.map(c => { + const isDisplayColumn = $stickyColumn === c - $: options = - $datasource.type === "viewV2" - ? [EDIT_OPTION, READONLY_OPTION, HIDDEN_OPTION] - : [EDIT_OPTION, HIDDEN_OPTION] + const options = [ + { + icon: "Edit", + value: PERMISSION_OPTIONS.WRITABLE, + tooltip: "Writable", + }, + ] + if ($datasource.type === "viewV2") { + options.push({ + icon: "Visibility", + value: PERMISSION_OPTIONS.READONLY, + tooltip: allowViewReadonlyColumns + ? "Read only" + : "Read only (premium feature)", + disabled: !allowViewReadonlyColumns, + }) + } + + options.push({ + icon: "VisibilityOff", + value: PERMISSION_OPTIONS.HIDDEN, + tooltip: "Hidden", + disabled: isDisplayColumn, + tooltip: isDisplayColumn && "Display column cannot be hidden", + }) + + return { ...c, options } + }) function columnToPermissionOptions(column) { - if (!column.visible) { + if (!column.schema.visible) { return PERMISSION_OPTIONS.HIDDEN } - if (column.readonly) { + if (column.schema.readonly) { return PERMISSION_OPTIONS.READONLY } @@ -87,19 +97,7 @@
- {#if $stickyColumn} -
- - {$stickyColumn.label} -
- - ({ ...o, disabled: true }))} - /> - {/if} - {#each $columns as column} + {#each displayColumns as column}
{column.label} @@ -107,7 +105,7 @@ toggleColumn(column, e.detail)} value={columnToPermissionOptions(column)} - {options} + options={column.options} /> {/each}