From 9d8b5e99afa90b0f708b64b74a2334e3340a4cd6 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 19 Jun 2023 17:38:44 +0100 Subject: [PATCH] Add column setting to grid --- .../backend/DataTable/DataTable.svelte | 1 + packages/client/manifest.json | 10 +++++----- .../src/components/app/GridBlock.svelte | 2 ++ .../components/grid/cells/HeaderCell.svelte | 6 ++++-- .../src/components/grid/layout/Grid.svelte | 2 ++ .../src/components/grid/stores/columns.js | 19 +++++++++++++++---- .../src/components/grid/stores/config.js | 4 ++++ 7 files changed, 33 insertions(+), 11 deletions(-) diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte index 81df5a475d..b9d45acea7 100644 --- a/packages/builder/src/components/backend/DataTable/DataTable.svelte +++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte @@ -36,6 +36,7 @@ allowDeleteRows={!isUsersTable} schemaOverrides={isUsersTable ? userSchemaOverrides : null} showAvatars={false} + columnWhitelist={["email", "firstName", "lastName"]} on:updatetable={e => tables.replaceTable(id, e.detail)} > diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 3186c40259..e425edc1b1 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -5227,9 +5227,8 @@ } }, "gridblock": { - "block": true, "name": "Grid block", - "icon": "Table", + "icon": "ViewTable", "styles": ["size"], "size": { "width": 600, @@ -5244,10 +5243,11 @@ "required": true }, { - "type": "columns", + "type": "multifield", "label": "Columns", - "key": "columns", - "dependsOn": "table" + "key": "columnWhitelist", + "dependsOn": "table", + "placeholder": "All columns" }, { "type": "filter", diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte index bfc3a15d1c..ee663ebd6b 100644 --- a/packages/client/src/components/app/GridBlock.svelte +++ b/packages/client/src/components/app/GridBlock.svelte @@ -13,6 +13,7 @@ export let initialSortColumn = null export let initialSortOrder = null export let initialRowHeight = null + export let columnWhitelist = null const component = getContext("component") const { styleable, API, builderStore } = getContext("sdk") @@ -33,6 +34,7 @@ {initialSortColumn} {initialSortOrder} {initialRowHeight} + {columnWhitelist} showControls={false} allowExpandRows={false} allowSchemaChanges={false} diff --git a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte index e773af9e14..3604dd6d42 100644 --- a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte @@ -197,10 +197,12 @@ Move right Hide column + Hide column + diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte index 211bb15917..38664c0813 100644 --- a/packages/frontend-core/src/components/grid/layout/Grid.svelte +++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte @@ -33,6 +33,7 @@ export let API = null export let tableId = null export let schemaOverrides = null + export let columnWhitelist = null export let allowAddRows = true export let allowExpandRows = true export let allowEditRows = true @@ -76,6 +77,7 @@ $: config.set({ tableId, schemaOverrides, + columnWhitelist, allowAddRows, allowExpandRows, allowEditRows, diff --git a/packages/frontend-core/src/components/grid/stores/columns.js b/packages/frontend-core/src/components/grid/stores/columns.js index 5f34de1434..b08b23895f 100644 --- a/packages/frontend-core/src/components/grid/stores/columns.js +++ b/packages/frontend-core/src/components/grid/stores/columns.js @@ -131,11 +131,12 @@ export const deriveStores = context => { } export const initialise = context => { - const { table, columns, stickyColumn, schemaOverrides } = context + const { table, columns, stickyColumn, schemaOverrides, columnWhitelist } = + context const schema = derived( - [table, schemaOverrides], - ([$table, $schemaOverrides]) => { + [table, schemaOverrides, columnWhitelist], + ([$table, $schemaOverrides, $columnWhitelist]) => { if (!$table?.schema) { return null } @@ -162,6 +163,16 @@ export const initialise = context => { } } }) + + // Apply whitelist if specified + if ($columnWhitelist?.length) { + Object.keys(newSchema).forEach(key => { + if (!$columnWhitelist.includes(key)) { + delete newSchema[key] + } + }) + } + return newSchema } ) @@ -229,7 +240,7 @@ export const initialise = context => { } stickyColumn.set({ name: primaryDisplay, - label: $schema[primaryDisplay].name || primaryDisplay, + label: $schema[primaryDisplay].displayName || primaryDisplay, schema: $schema[primaryDisplay], width: $schema[primaryDisplay].width || DefaultColumnWidth, visible: true, diff --git a/packages/frontend-core/src/components/grid/stores/config.js b/packages/frontend-core/src/components/grid/stores/config.js index 3e8da81e2e..2fe9bafa91 100644 --- a/packages/frontend-core/src/components/grid/stores/config.js +++ b/packages/frontend-core/src/components/grid/stores/config.js @@ -11,6 +11,8 @@ export const createStores = context => { const initialSortOrder = getProp("initialSortOrder") const initialFilter = getProp("initialFilter") const initialRowHeight = getProp("initialRowHeight") + const schemaOverrides = getProp("schemaOverrides") + const columnWhitelist = getProp("columnWhitelist") return { config, @@ -19,5 +21,7 @@ export const createStores = context => { initialSortOrder, initialFilter, initialRowHeight, + schemaOverrides, + columnWhitelist, } }