From 61a143628b2fccfc88030b07ba55cdce6a18cc04 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 7 Jun 2023 10:48:08 +0100 Subject: [PATCH 01/46] Revert tableType flag and derive from table instead --- .../builder/src/components/backend/DataTable/DataTable.svelte | 1 - .../backend/DataTable/buttons/grid/GridImportButton.svelte | 4 ++-- .../components/backend/DataTable/modals/ImportModal.svelte | 1 + packages/frontend-core/src/components/grid/layout/Grid.svelte | 2 -- 4 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte index 1b0c92bde0..81df5a475d 100644 --- a/packages/builder/src/components/backend/DataTable/DataTable.svelte +++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte @@ -32,7 +32,6 @@ diff --git a/packages/builder/src/components/backend/DataTable/modals/ImportModal.svelte b/packages/builder/src/components/backend/DataTable/modals/ImportModal.svelte index c020d1a7ac..1696c6ba03 100644 --- a/packages/builder/src/components/backend/DataTable/modals/ImportModal.svelte +++ b/packages/builder/src/components/backend/DataTable/modals/ImportModal.svelte @@ -14,6 +14,7 @@ export let tableId export let tableType + let rows = [] let allValid = false let displayColumn = null diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte index 81f42ca257..dc24fc0d64 100644 --- a/packages/frontend-core/src/components/grid/layout/Grid.svelte +++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte @@ -33,7 +33,6 @@ export let API = null export let tableId = null - export let tableType = null export let schemaOverrides = null export let allowAddRows = true export let allowAddColumns = true @@ -67,7 +66,6 @@ rand, config, tableId: tableIdStore, - tableType, schemaOverrides: schemaOverridesStore, } context = { ...context, ...createEventManagers() } From 752dd93d84fbdc4aa02f363128b77a630cd6451d Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 7 Jun 2023 15:50:38 +0100 Subject: [PATCH 02/46] Add initial grid block, and update grid to keep indentation consistent when row expansion is disabled --- .../new/_components/componentStructure.json | 1 + packages/client/manifest.json | 20 ++++++++++ .../src/components/app/GridBlock.svelte | 37 +++++++++++++++++++ packages/client/src/components/app/index.js | 1 + .../components/grid/cells/GutterCell.svelte | 6 ++- .../src/components/grid/layout/Grid.svelte | 35 ++++++++++-------- 6 files changed, 83 insertions(+), 17 deletions(-) create mode 100644 packages/client/src/components/app/GridBlock.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json index d35e7cd515..012ab461f0 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json @@ -3,6 +3,7 @@ "name": "Blocks", "icon": "Article", "children": [ + "gridblock", "tableblock", "cardsblock", "repeaterblock", diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 71637723c1..b3e4438646 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -5225,5 +5225,25 @@ "type": "schema", "suffix": "repeater" } + }, + "gridblock": { + "block": true, + "name": "Grid block", + "icon": "Table", + "styles": [ + "size" + ], + "size": { + "width": 600, + "height": 400 + }, + "settings": [ + { + "type": "table", + "label": "Table", + "key": "table", + "required": true + } + ] } } diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte new file mode 100644 index 0000000000..aae41b30c6 --- /dev/null +++ b/packages/client/src/components/app/GridBlock.svelte @@ -0,0 +1,37 @@ + + +
+ +
+ + diff --git a/packages/client/src/components/app/index.js b/packages/client/src/components/app/index.js index 70074790ac..060c15a857 100644 --- a/packages/client/src/components/app/index.js +++ b/packages/client/src/components/app/index.js @@ -36,6 +36,7 @@ export { default as markdownviewer } from "./MarkdownViewer.svelte" export { default as embeddedmap } from "./embedded-map/EmbeddedMap.svelte" export { default as grid } from "./Grid.svelte" export { default as sidepanel } from "./SidePanel.svelte" +export { default as gridblock } from "./GridBlock.svelte" export * from "./charts" export * from "./forms" export * from "./table" diff --git a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte index 56c4c20d54..a8e0da85de 100644 --- a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte @@ -70,10 +70,12 @@ color="var(--spectrum-global-color-red-400)" /> - {:else if $config.allowExpandRows} + {:else}
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte index dc24fc0d64..3fead0c926 100644 --- a/packages/frontend-core/src/components/grid/layout/Grid.svelte +++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte @@ -43,6 +43,9 @@ export let stripeRows = false export let collaboration = true export let showAvatars = true + export let showControls = true + + allowExpandRows = false // Unique identifier for DOM nodes inside this instance const rand = Math.random() @@ -117,22 +120,24 @@ class:stripe={$config.stripeRows} style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-height:{MaxCellRenderHeight}px; --max-cell-render-width-overflow:{MaxCellRenderWidthOverflow}px; --content-lines:{$contentLines};" > -
-
- - - - - - - + {#if showControls} +
+
+ + + + + + + +
+
+ {#if showAvatars} + + {/if} +
-
- {#if showAvatars} - - {/if} -
-
+ {/if} {#if $loaded}
From f9a8be507dfc1c607fadba73e2216105ee12d03a Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 7 Jun 2023 15:51:27 +0100 Subject: [PATCH 03/46] Undo hardcoded disabling of row expansion --- packages/frontend-core/src/components/grid/layout/Grid.svelte | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte index 3fead0c926..ae4409ddca 100644 --- a/packages/frontend-core/src/components/grid/layout/Grid.svelte +++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte @@ -45,8 +45,6 @@ export let showAvatars = true export let showControls = true - allowExpandRows = false - // Unique identifier for DOM nodes inside this instance const rand = Math.random() From 5820996e4d55e4c1ffb5dd4ffc5e2ea528fa097c Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 8 Jun 2023 08:35:36 +0100 Subject: [PATCH 04/46] Update grid flags to allow readonly modifications of schema --- packages/client/src/components/app/GridBlock.svelte | 3 +-- .../src/components/grid/cells/HeaderCell.svelte | 4 ++-- .../src/components/grid/controls/AddColumnButton.svelte | 2 +- .../frontend-core/src/components/grid/layout/Grid.svelte | 9 +++------ .../src/components/grid/layout/HeaderRow.svelte | 2 +- .../frontend-core/src/components/grid/stores/columns.js | 6 ++++-- 6 files changed, 12 insertions(+), 14 deletions(-) diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte index aae41b30c6..3bf7fef231 100644 --- a/packages/client/src/components/app/GridBlock.svelte +++ b/packages/client/src/components/app/GridBlock.svelte @@ -21,9 +21,8 @@ {allowEditRows} {allowDeleteRows} showControls={false} - allowAddColumns={false} - allowEditColumns={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 21ee210233..db2e1a729b 100644 --- a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte @@ -163,7 +163,7 @@ Edit column @@ -171,7 +171,7 @@ icon="Label" on:click={makeDisplayColumn} disabled={idx === "sticky" || - !$config.allowEditColumns || + !$config.allowSchemaChanges || bannedDisplayColumnTypes.includes(column.schema.type)} > Use as display column diff --git a/packages/frontend-core/src/components/grid/controls/AddColumnButton.svelte b/packages/frontend-core/src/components/grid/controls/AddColumnButton.svelte index 6ad241eb65..20125bc49c 100644 --- a/packages/frontend-core/src/components/grid/controls/AddColumnButton.svelte +++ b/packages/frontend-core/src/components/grid/controls/AddColumnButton.svelte @@ -10,7 +10,7 @@ quiet size="M" on:click={() => dispatch("add-column")} - disabled={!$config.allowAddColumns} + disabled={!$config.allowSchemaChanges} > Add column diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte index ae4409ddca..e33cb65940 100644 --- a/packages/frontend-core/src/components/grid/layout/Grid.svelte +++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte @@ -35,11 +35,10 @@ export let tableId = null export let schemaOverrides = null export let allowAddRows = true - export let allowAddColumns = true - export let allowEditColumns = true export let allowExpandRows = true export let allowEditRows = true export let allowDeleteRows = true + export let allowSchemaChanges = true export let stripeRows = false export let collaboration = true export let showAvatars = true @@ -53,8 +52,7 @@ const schemaOverridesStore = writable(schemaOverrides) const config = writable({ allowAddRows, - allowAddColumns, - allowEditColumns, + allowSchemaChanges, allowExpandRows, allowEditRows, allowDeleteRows, @@ -88,8 +86,7 @@ $: schemaOverridesStore.set(schemaOverrides) $: config.set({ allowAddRows, - allowAddColumns, - allowEditColumns, + allowSchemaChanges, allowExpandRows, allowEditRows, allowDeleteRows, diff --git a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte index 9d6cc2275b..c22ee511a3 100644 --- a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte +++ b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte @@ -29,7 +29,7 @@ {/each}
- {#if $config.allowAddColumns} + {#if $config.allowSchemaChanges}
{ } export const deriveStores = context => { - const { table, columns, stickyColumn, API, dispatch } = context + const { table, columns, stickyColumn, API, dispatch, config } = context // Updates the tables primary display column const changePrimaryDisplay = async column => { @@ -95,7 +95,9 @@ export const deriveStores = context => { dispatch("updatetable", newTable) // Update server - await API.saveTable(newTable) + if (get(config).allowSchemaChanges) { + await API.saveTable(newTable) + } } return { From 0ab1346577c7712cf32573a2b32734abb340b679 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 13 Jun 2023 17:17:29 +0100 Subject: [PATCH 05/46] Add settings to grid block for controlling CRUD --- packages/client/manifest.json | 18 ++++++++++++ .../src/components/app/GridBlock.svelte | 10 +++++-- .../src/components/grid/layout/Grid.svelte | 2 +- .../src/components/grid/layout/NewRow.svelte | 28 +++++++++++++++++++ 4 files changed, 55 insertions(+), 3 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index b3e4438646..883d6fa0a6 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -5243,6 +5243,24 @@ "label": "Table", "key": "table", "required": true + }, + { + "type": "boolean", + "label": "Add rows", + "key": "allowAddRows", + "defaultValue": true + }, + { + "type": "boolean", + "label": "Edit rows", + "key": "allowEditRows", + "defaultValue": true + }, + { + "type": "boolean", + "label": "Delete rows", + "key": "allowDeleteRows", + "defaultValue": true } ] } diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte index 3bf7fef231..7e69fcdcea 100644 --- a/packages/client/src/components/app/GridBlock.svelte +++ b/packages/client/src/components/app/GridBlock.svelte @@ -10,10 +10,13 @@ export let allowDeleteRows const component = getContext("component") - const { styleable, API } = getContext("sdk") + const { styleable, API, builderStore } = getContext("sdk") -
+
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte index e33cb65940..e6550fa5a5 100644 --- a/packages/frontend-core/src/components/grid/layout/Grid.svelte +++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte @@ -232,7 +232,7 @@ border-bottom: 2px solid var(--spectrum-global-color-gray-200); padding: var(--cell-padding); gap: var(--cell-spacing); - background: var(--background); + background: var(--spectrum-global-color-gray-100); z-index: 2; } .controls-left, diff --git a/packages/frontend-core/src/components/grid/layout/NewRow.svelte b/packages/frontend-core/src/components/grid/layout/NewRow.svelte index 85b430f79b..4581e37746 100644 --- a/packages/frontend-core/src/components/grid/layout/NewRow.svelte +++ b/packages/frontend-core/src/components/grid/layout/NewRow.svelte @@ -141,6 +141,17 @@ }) + +{#if !visible} +
dispatch("add-row-inline")} + transition:fade|local={{ duration: 130 }} + > + +
+{/if} + {#if visible}
+ /* New row FAB */ + .new-row-fab { + position: absolute; + top: var(--default-row-height); + left: calc(var(--gutter-width) / 2); + transform: translateX(8px) translateY(-50%); + background: var(--cell-background); + padding: 4px; + border-radius: 50%; + border: var(--cell-border); + z-index: 10; + } + .new-row-fab:hover { + background: var(--cell-background-hover); + cursor: pointer; + } + .container { position: absolute; top: var(--default-row-height); From f56bd3ad13257fbede01e1a1d9004941c526da33 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 13 Jun 2023 17:19:12 +0100 Subject: [PATCH 06/46] Fix grid loading overlay color in client apps --- packages/frontend-core/src/components/grid/layout/Grid.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte index e6550fa5a5..c4828e2791 100644 --- a/packages/frontend-core/src/components/grid/layout/Grid.svelte +++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte @@ -268,7 +268,7 @@ left: 0; width: 100%; height: 100%; - background: var(--background); + background: var(--spectrum-global-color-gray-100); opacity: 0.6; } From 9991fd9558bbb877525ed8fe69ffce6120dfaca0 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 14 Jun 2023 09:09:59 +0100 Subject: [PATCH 07/46] Add grid block setting for striping row colours --- packages/client/manifest.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 883d6fa0a6..327b05a320 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -5261,6 +5261,12 @@ "label": "Delete rows", "key": "allowDeleteRows", "defaultValue": true + }, + { + "type": "boolean", + "label": "Stripe rows", + "key": "stripeRows", + "defaultValue": false } ] } From ed9065aae3c76b33706d62fc84054aef7f9577e6 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 14 Jun 2023 09:10:09 +0100 Subject: [PATCH 08/46] Hide add row FAB when selecting rows --- packages/client/src/components/app/GridBlock.svelte | 8 +++++--- .../components/grid/controls/BulkDeleteHandler.svelte | 10 ++-------- .../src/components/grid/layout/Grid.svelte | 2 ++ .../src/components/grid/layout/NewRow.svelte | 7 +++++-- .../src/components/grid/layout/StickyColumn.svelte | 2 +- 5 files changed, 15 insertions(+), 14 deletions(-) diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte index 7e69fcdcea..6fe436c0e2 100644 --- a/packages/client/src/components/app/GridBlock.svelte +++ b/packages/client/src/components/app/GridBlock.svelte @@ -5,9 +5,10 @@ import { Grid } from "@budibase/frontend-core" export let table - export let allowAddRows - export let allowEditRows - export let allowDeleteRows + export let allowAddRows = true + export let allowEditRows = true + export let allowDeleteRows = true + export let stripeRows = false const component = getContext("component") const { styleable, API, builderStore } = getContext("sdk") @@ -23,6 +24,7 @@ {allowAddRows} {allowEditRows} {allowDeleteRows} + {stripeRows} showControls={false} allowExpandRows={false} allowSchemaChanges={false} diff --git a/packages/frontend-core/src/components/grid/controls/BulkDeleteHandler.svelte b/packages/frontend-core/src/components/grid/controls/BulkDeleteHandler.svelte index f87b529390..3218ef9ffe 100644 --- a/packages/frontend-core/src/components/grid/controls/BulkDeleteHandler.svelte +++ b/packages/frontend-core/src/components/grid/controls/BulkDeleteHandler.svelte @@ -6,15 +6,9 @@ let modal - $: selectedRowCount = Object.values($selectedRows).filter(x => !!x).length + $: selectedRowCount = Object.values($selectedRows).length $: rowsToDelete = Object.entries($selectedRows) - .map(entry => { - if (entry[1] === true) { - return $rows.find(x => x._id === entry[0]) - } else { - return null - } - }) + .map(entry => $rows.find(x => x._id === entry[0])) .filter(x => x != null) // Deletion callback when confirmed diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte index c4828e2791..8cf5803f23 100644 --- a/packages/frontend-core/src/components/grid/layout/Grid.svelte +++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte @@ -57,6 +57,7 @@ allowEditRows, allowDeleteRows, stripeRows, + showControls, }) // Build up context @@ -91,6 +92,7 @@ allowEditRows, allowDeleteRows, stripeRows, + showControls, }) // Set context for children to consume diff --git a/packages/frontend-core/src/components/grid/layout/NewRow.svelte b/packages/frontend-core/src/components/grid/layout/NewRow.svelte index 4581e37746..06e4f0bfd6 100644 --- a/packages/frontend-core/src/components/grid/layout/NewRow.svelte +++ b/packages/frontend-core/src/components/grid/layout/NewRow.svelte @@ -26,6 +26,8 @@ maxScrollTop, rowVerticalInversionIndex, columnHorizontalInversionIndex, + config, + selectedRows, } = getContext("grid") let visible = false @@ -37,6 +39,7 @@ $: width = GutterWidth + ($stickyColumn?.width || 0) $: $tableId, (visible = false) $: invertY = shouldInvertY(offset, $rowVerticalInversionIndex, $renderedRows) + $: selectedRowCount = Object.values($selectedRows).length const shouldInvertY = (offset, inversionIndex, rows) => { if (offset === 0) { @@ -142,7 +145,7 @@ -{#if !visible} +{#if !visible && !$config.showControls && !selectedRowCount}
dispatch("add-row-inline")} @@ -243,7 +246,7 @@ position: absolute; top: var(--default-row-height); left: calc(var(--gutter-width) / 2); - transform: translateX(8px) translateY(-50%); + transform: translateX(6px) translateY(-50%); background: var(--cell-background); padding: 4px; border-radius: 50%; diff --git a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte index 801772ed51..f8a65faadb 100644 --- a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte +++ b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte @@ -26,7 +26,7 @@ } = getContext("grid") $: rowCount = $rows.length - $: selectedRowCount = Object.values($selectedRows).filter(x => !!x).length + $: selectedRowCount = Object.values($selectedRows).length $: width = GutterWidth + ($stickyColumn?.width || 0) const selectAll = () => { From 328336463c1c47955bc37104e965737f783d08c3 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 14 Jun 2023 09:19:11 +0100 Subject: [PATCH 09/46] Standardise usage of CSS variables to work inside client and builder --- .../grid/cells/AttachmentCell.svelte | 2 +- .../components/grid/cells/HeaderCell.svelte | 2 +- .../components/grid/cells/OptionsCell.svelte | 2 +- .../grid/cells/RelationshipCell.svelte | 2 +- .../src/components/grid/layout/Grid.svelte | 28 ++++++++++--------- .../components/grid/layout/HeaderRow.svelte | 4 +-- .../grid/layout/StickyColumn.svelte | 2 +- 7 files changed, 22 insertions(+), 20 deletions(-) diff --git a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte index 4d830723c2..c054c57498 100644 --- a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte @@ -138,7 +138,7 @@ top: 100%; left: 0; width: 320px; - background: var(--background); + background: var(--grid-background-alt); border: var(--cell-border); padding: var(--cell-padding); box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15); diff --git a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte index db2e1a729b..e773af9e14 100644 --- a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte @@ -218,7 +218,7 @@ .header-cell :global(.cell) { padding: 0 var(--cell-padding); gap: calc(2 * var(--cell-spacing)); - background: var(--spectrum-global-color-gray-100); + background: var(--grid-background-alt); } .name { diff --git a/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte b/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte index 9399617eb7..46ad048c20 100644 --- a/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte @@ -240,7 +240,7 @@ justify-content: space-between; align-items: center; gap: var(--cell-spacing); - background-color: var(--background); + background-color: var(--grid-background-alt); } .option:hover, .option.focused { diff --git a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte index 40b6de5eaa..2bd0a17054 100644 --- a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte @@ -453,7 +453,7 @@ var(--max-cell-render-height) + var(--row-height) - var(--max-relationship-height) ); - background: var(--background); + background: var(--grid-background-alt); border: var(--cell-border); box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15); display: flex; diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte index 8cf5803f23..39a67d44eb 100644 --- a/packages/frontend-core/src/components/grid/layout/Grid.svelte +++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte @@ -168,6 +168,18 @@ diff --git a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte index c22ee511a3..f31cc198fb 100644 --- a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte +++ b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte @@ -42,7 +42,7 @@ From b05eb5ad01c421b4feeee69c1ca1c2fb568a86bb Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 16 Jun 2023 12:09:44 +0100 Subject: [PATCH 15/46] Improve calculation of inversion indices, improve cell max sizes and grid padding for consitency --- .../src/components/app/GridBlock.svelte | 1 + .../components/grid/cells/LongFormCell.svelte | 2 +- .../src/components/grid/lib/constants.js | 7 ++++--- .../src/components/grid/stores/scroll.js | 12 +++++------- .../src/components/grid/stores/viewport.js | 19 ++++++++++++------- 5 files changed, 23 insertions(+), 18 deletions(-) diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte index da9ae74411..482721613d 100644 --- a/packages/client/src/components/app/GridBlock.svelte +++ b/packages/client/src/components/app/GridBlock.svelte @@ -39,6 +39,7 @@ border: 1px solid var(--spectrum-global-color-gray-300); border-radius: 4px; overflow: hidden; + min-height: 410px; } div.in-builder :global(*) { pointer-events: none; diff --git a/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte b/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte index 886d4ef8b0..233533c446 100644 --- a/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte @@ -102,7 +102,7 @@ top: 0; left: 0; width: calc(100% + var(--max-cell-render-width-overflow)); - height: var(--max-cell-render-height); + height: calc(var(--row-height) + var(--max-cell-render-height)); z-index: 1; border-radius: 2px; resize: none; diff --git a/packages/frontend-core/src/components/grid/lib/constants.js b/packages/frontend-core/src/components/grid/lib/constants.js index f078ef7274..a6e6723463 100644 --- a/packages/frontend-core/src/components/grid/lib/constants.js +++ b/packages/frontend-core/src/components/grid/lib/constants.js @@ -1,6 +1,5 @@ -export const Padding = 256 -export const MaxCellRenderHeight = 252 -export const MaxCellRenderWidthOverflow = 200 +export const Padding = 246 +export const MaxCellRenderHeight = 222 export const ScrollBarSize = 8 export const GutterWidth = 72 export const DefaultColumnWidth = 200 @@ -12,3 +11,5 @@ export const DefaultRowHeight = SmallRowHeight export const NewRowID = "new" export const BlankRowID = "blank" export const RowPageSize = 100 +export const FocusedCellMinOffset = 48 +export const MaxCellRenderWidthOverflow = Padding - 3 * ScrollBarSize diff --git a/packages/frontend-core/src/components/grid/stores/scroll.js b/packages/frontend-core/src/components/grid/stores/scroll.js index c1ca19633a..89e759854f 100644 --- a/packages/frontend-core/src/components/grid/stores/scroll.js +++ b/packages/frontend-core/src/components/grid/stores/scroll.js @@ -1,6 +1,6 @@ import { writable, derived, get } from "svelte/store" import { tick } from "svelte" -import { Padding, GutterWidth } from "../lib/constants" +import { Padding, GutterWidth, FocusedCellMinOffset } from "../lib/constants" export const createStores = () => { const scroll = writable({ @@ -138,14 +138,13 @@ export const initialise = context => { const $scroll = get(scroll) const $bounds = get(bounds) const $rowHeight = get(rowHeight) - const verticalOffset = 60 // Ensure vertical position is viewable if ($focusedRow) { // Ensure row is not below bottom of screen const rowYPos = $focusedRow.__idx * $rowHeight const bottomCutoff = - $scroll.top + $bounds.height - $rowHeight - verticalOffset + $scroll.top + $bounds.height - $rowHeight - FocusedCellMinOffset let delta = rowYPos - bottomCutoff if (delta > 0) { scroll.update(state => ({ @@ -156,7 +155,7 @@ export const initialise = context => { // Ensure row is not above top of screen else { - const delta = $scroll.top - rowYPos + verticalOffset + const delta = $scroll.top - rowYPos + FocusedCellMinOffset if (delta > 0) { scroll.update(state => ({ ...state, @@ -171,13 +170,12 @@ export const initialise = context => { const $visibleColumns = get(visibleColumns) const columnName = $focusedCellId?.split("-")[1] const column = $visibleColumns.find(col => col.name === columnName) - const horizontalOffset = 50 if (!column) { return } // Ensure column is not cutoff on left edge - let delta = $scroll.left - column.left + horizontalOffset + let delta = $scroll.left - column.left + FocusedCellMinOffset if (delta > 0) { scroll.update(state => ({ ...state, @@ -188,7 +186,7 @@ export const initialise = context => { // Ensure column is not cutoff on right edge else { const rightEdge = column.left + column.width - const rightBound = $bounds.width + $scroll.left - horizontalOffset + const rightBound = $bounds.width + $scroll.left - FocusedCellMinOffset delta = rightEdge - rightBound if (delta > 0) { scroll.update(state => ({ diff --git a/packages/frontend-core/src/components/grid/stores/viewport.js b/packages/frontend-core/src/components/grid/stores/viewport.js index f258b7daef..a363ffca00 100644 --- a/packages/frontend-core/src/components/grid/stores/viewport.js +++ b/packages/frontend-core/src/components/grid/stores/viewport.js @@ -108,12 +108,17 @@ export const deriveStores = context => { // Determine the row index at which we should start vertically inverting cell // dropdowns const rowVerticalInversionIndex = derived( - [visualRowCapacity, rowHeight], - ([$visualRowCapacity, $rowHeight]) => { - const maxCellRenderRows = Math.ceil(MaxCellRenderHeight / $rowHeight) - const topIdx = $visualRowCapacity - maxCellRenderRows - 2 - const bottomIdx = maxCellRenderRows + 1 - return Math.max(topIdx, bottomIdx) + [height, rowHeight, scrollTop], + ([$height, $rowHeight, $scrollTop]) => { + const offset = $scrollTop % $rowHeight + const minBottom = + $height - ScrollBarSize * 3 - MaxCellRenderHeight + offset + return Math.floor(minBottom / $rowHeight) + + // const maxCellRenderRows = Math.ceil(MaxCellRenderHeight / $rowHeight) + // const topIdx = $visualRowCapacity - maxCellRenderRows - 2 + // const bottomIdx = maxCellRenderRows + 1 + // return Math.max(topIdx, bottomIdx) } ) @@ -126,7 +131,7 @@ export const deriveStores = context => { let inversionIdx = $renderedColumns.length for (let i = $renderedColumns.length - 1; i >= 0; i--, inversionIdx--) { const rightEdge = $renderedColumns[i].left + $renderedColumns[i].width - if (rightEdge + MaxCellRenderWidthOverflow < cutoff) { + if (rightEdge + MaxCellRenderWidthOverflow <= cutoff) { break } } From 8fc29cb6dc3e27284505c08664c7c88d54259474 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 16 Jun 2023 14:54:50 +0100 Subject: [PATCH 16/46] Add slight border radius to cells which were missing it --- .../src/components/grid/cells/AttachmentCell.svelte | 2 ++ .../frontend-core/src/components/grid/cells/OptionsCell.svelte | 2 ++ .../src/components/grid/cells/RelationshipCell.svelte | 2 ++ 3 files changed, 6 insertions(+) diff --git a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte index c054c57498..c80b12cf1a 100644 --- a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte @@ -142,6 +142,8 @@ border: var(--cell-border); padding: var(--cell-padding); box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15); + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; } .dropzone.invertX { left: auto; diff --git a/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte b/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte index 46ad048c20..3969938012 100644 --- a/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte @@ -223,6 +223,8 @@ overflow-y: auto; border: var(--cell-border); box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15); + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; } .options.invertX { left: auto; diff --git a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte index 2bd0a17054..689c9a8a92 100644 --- a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte @@ -460,6 +460,8 @@ flex-direction: column; align-items: stretch; padding: 0 0 8px 0; + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; } .dropdown.invertY { transform: translateY(-100%); From 68f21274edb39148a41e4b11571033f2379b8704 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 19 Jun 2023 09:54:24 +0100 Subject: [PATCH 17/46] Add settings to grid block for filtering and sorting, and refactor grid logic to allow external control of these stores --- .../buttons/grid/GridFilterButton.svelte | 3 ++ packages/client/manifest.json | 18 +++++++++ .../src/components/app/GridBlock.svelte | 6 +++ .../grid/cells/RelationshipCell.svelte | 7 +++- .../src/components/grid/layout/Grid.svelte | 38 ++++++++++++++----- .../src/components/grid/stores/rows.js | 25 +++++------- packages/frontend-core/src/fetch/DataFetch.js | 6 ++- packages/frontend-core/src/utils/index.js | 1 + packages/frontend-core/src/utils/memo.js | 35 +++++++++++++++++ 9 files changed, 111 insertions(+), 28 deletions(-) create mode 100644 packages/frontend-core/src/utils/memo.js diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridFilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridFilterButton.svelte index 2283862303..45e5d4e2b0 100644 --- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridFilterButton.svelte +++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridFilterButton.svelte @@ -4,6 +4,9 @@ const { columns, tableId, filter, table } = getContext("grid") + // Wipe filter whenever table ID changes to avoid using stale filters + $: $tableId, filter.set([]) + const onFilter = e => { filter.set(e.detail || []) } diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 327b05a320..3f36f2f666 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -5237,6 +5237,7 @@ "width": 600, "height": 400 }, + "info": "Grid Block is only compatible with internal or SQL tables", "settings": [ { "type": "table", @@ -5244,6 +5245,23 @@ "key": "table", "required": true }, + { + "type": "filter", + "label": "Filtering", + "key": "filter" + }, + { + "type": "field/sortable", + "label": "Sort column", + "key": "sortColumn" + }, + { + "type": "select", + "label": "Sort order", + "key": "sortOrder", + "options": ["Ascending", "Descending"], + "defaultValue": "Ascending" + }, { "type": "boolean", "label": "Add rows", diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte index 482721613d..5267582bc8 100644 --- a/packages/client/src/components/app/GridBlock.svelte +++ b/packages/client/src/components/app/GridBlock.svelte @@ -9,6 +9,9 @@ export let allowEditRows = true export let allowDeleteRows = true export let stripeRows = false + export let filter = null + export let sortColumn = null + export let sortOrder = null const component = getContext("component") const { styleable, API, builderStore } = getContext("sdk") @@ -25,6 +28,9 @@ {allowEditRows} {allowDeleteRows} {stripeRows} + {filter} + {sortColumn} + {sortOrder} showControls={false} allowExpandRows={false} allowSchemaChanges={false} diff --git a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte index 689c9a8a92..58aab8038b 100644 --- a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte @@ -42,6 +42,8 @@ let candidateIndex let lastSearchId let searching = false + let valuesHeight = 0 + let container $: oneRowOnly = schema?.relationshipType === "one-to-many" $: editable = focused && !readonly @@ -138,6 +140,8 @@ const open = async () => { isOpen = true + valuesHeight = container.getBoundingClientRect().height + console.log(valuesHeight) // Find the primary display for the related table if (!primaryDisplay) { @@ -243,7 +247,7 @@
-
+
1} @@ -290,6 +294,7 @@ class:invertY on:wheel|stopPropagation use:clickOutside={close} + style="--values-height:{valuesHeight}px;" >
import { setContext, onMount } from "svelte" - import { writable } from "svelte/store" import { fade } from "svelte/transition" import { clickOutside, ProgressCircle } from "@budibase/bbui" import { createEventManagers } from "../lib/events" @@ -30,6 +29,7 @@ GutterWidth, DefaultRowHeight, } from "../lib/constants" + import { memo } from "../../../utils" export let API = null export let tableId = null @@ -43,19 +43,29 @@ export let collaboration = true export let showAvatars = true export let showControls = true + export let filter = null + export let sortColumn = null + export let sortOrder = null // Unique identifier for DOM nodes inside this instance const rand = Math.random() - // State stores - const tableIdStore = writable(tableId) - const schemaOverridesStore = writable(schemaOverrides) - const config = writable({ + // Stores derived from props. + // We use memo here to ensure redundant store reactions don't fire and cause + // wasted API calls. + const tableIdStore = memo(tableId) + const schemaOverridesStore = memo(schemaOverrides) + const filterStore = memo(filter) + const sortStore = memo({ + column: sortColumn, + order: sortOrder, + }) + const config = memo({ allowAddRows, - allowSchemaChanges, allowExpandRows, allowEditRows, allowDeleteRows, + allowSchemaChanges, stripeRows, showControls, }) @@ -67,6 +77,8 @@ config, tableId: tableIdStore, schemaOverrides: schemaOverridesStore, + filter: filterStore, + sort: sortStore, } context = { ...context, ...createEventManagers() } context = attachStores(context) @@ -83,9 +95,14 @@ gridFocused, } = context - // Keep stores up to date + // Keep prop-derived stores up to date $: tableIdStore.set(tableId) $: schemaOverridesStore.set(schemaOverrides) + $: filterStore.set(filter) + $: sortStore.set({ + column: sortColumn, + order: sortOrder, + }) $: config.set({ allowAddRows, allowSchemaChanges, @@ -115,10 +132,10 @@ id="grid-{rand}" class:is-resizing={$isResizing} class:is-reordering={$isReordering} - class:stripe={$config.stripeRows} - style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-height:{MaxCellRenderHeight}px; --max-cell-render-width-overflow:{MaxCellRenderWidthOverflow}px; --content-lines:{$contentLines};" + class:stripe={stripeRows} on:mouseenter={() => gridFocused.set(true)} on:mouseleave={() => gridFocused.set(false)} + style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-height:{MaxCellRenderHeight}px; --max-cell-render-width-overflow:{MaxCellRenderWidthOverflow}px; --content-lines:{$contentLines};" > {#if showControls}
@@ -170,6 +187,7 @@
diff --git a/packages/frontend-core/src/components/grid/overlays/ResizeOverlay.svelte b/packages/frontend-core/src/components/grid/overlays/ResizeOverlay.svelte index 42fb796ac9..33a0a0e2d3 100644 --- a/packages/frontend-core/src/components/grid/overlays/ResizeOverlay.svelte +++ b/packages/frontend-core/src/components/grid/overlays/ResizeOverlay.svelte @@ -65,6 +65,6 @@ margin-left: -1px; width: 2px; height: 100%; - background: var(--spectrum-global-color-blue-400); + background: var(--accent-color); } From d77b2c6ab16d4a9c58e73911717df2be53474dde Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 19 Jun 2023 17:24:40 +0100 Subject: [PATCH 20/46] Refactor how grid settings are used and add option for row height --- packages/client/manifest.json | 36 ++++++++++--- .../src/components/app/GridBlock.svelte | 14 ++--- .../grid/controls/ColumnWidthButton.svelte | 18 +------ .../src/components/grid/layout/Grid.svelte | 54 ++++++------------- .../src/components/grid/stores/columns.js | 18 +++++++ .../src/components/grid/stores/config.js | 23 ++++++++ .../src/components/grid/stores/filter.js | 20 +++++++ .../src/components/grid/stores/index.js | 6 +++ .../src/components/grid/stores/sort.js | 27 ++++++++++ .../src/components/grid/stores/ui.js | 13 +++-- packages/frontend-core/src/utils/index.js | 2 +- packages/frontend-core/src/utils/memo.js | 10 +++- 12 files changed, 168 insertions(+), 73 deletions(-) create mode 100644 packages/frontend-core/src/components/grid/stores/config.js create mode 100644 packages/frontend-core/src/components/grid/stores/filter.js create mode 100644 packages/frontend-core/src/components/grid/stores/sort.js diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 3f36f2f666..3186c40259 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -5230,9 +5230,7 @@ "block": true, "name": "Grid block", "icon": "Table", - "styles": [ - "size" - ], + "styles": ["size"], "size": { "width": 600, "height": 400 @@ -5245,23 +5243,49 @@ "key": "table", "required": true }, + { + "type": "columns", + "label": "Columns", + "key": "columns", + "dependsOn": "table" + }, { "type": "filter", "label": "Filtering", - "key": "filter" + "key": "initialFilter" }, { "type": "field/sortable", "label": "Sort column", - "key": "sortColumn" + "key": "initialSortColumn" }, { "type": "select", "label": "Sort order", - "key": "sortOrder", + "key": "initialSortOrder", "options": ["Ascending", "Descending"], "defaultValue": "Ascending" }, + { + "type": "select", + "label": "Row height", + "key": "initialRowHeight", + "placeholder": "Default", + "options": [ + { + "label": "Small", + "value": 36 + }, + { + "label": "Medium", + "value": 64 + }, + { + "label": "Large", + "value": 92 + } + ] + }, { "type": "boolean", "label": "Add rows", diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte index 5267582bc8..bfc3a15d1c 100644 --- a/packages/client/src/components/app/GridBlock.svelte +++ b/packages/client/src/components/app/GridBlock.svelte @@ -9,9 +9,10 @@ export let allowEditRows = true export let allowDeleteRows = true export let stripeRows = false - export let filter = null - export let sortColumn = null - export let sortOrder = null + export let initialFilter = null + export let initialSortColumn = null + export let initialSortOrder = null + export let initialRowHeight = null const component = getContext("component") const { styleable, API, builderStore } = getContext("sdk") @@ -28,9 +29,10 @@ {allowEditRows} {allowDeleteRows} {stripeRows} - {filter} - {sortColumn} - {sortOrder} + {initialFilter} + {initialSortColumn} + {initialSortOrder} + {initialRowHeight} showControls={false} allowExpandRows={false} allowSchemaChanges={false} diff --git a/packages/frontend-core/src/components/grid/controls/ColumnWidthButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnWidthButton.svelte index 5ffd968d30..fb20cc50e5 100644 --- a/packages/frontend-core/src/components/grid/controls/ColumnWidthButton.svelte +++ b/packages/frontend-core/src/components/grid/controls/ColumnWidthButton.svelte @@ -33,22 +33,6 @@ selected: allLarge, }, ] - - const changeColumnWidth = async width => { - columns.update(state => { - state.forEach(column => { - column.width = width - }) - return state - }) - if ($stickyColumn) { - stickyColumn.update(state => ({ - ...state, - width, - })) - } - await columns.actions.saveChanges() - }
@@ -70,7 +54,7 @@ {#each sizeOptions as option} changeColumnWidth(option.size)} + on:click={() => columns.actions.changeAllColumnWidths(option.size)} selected={option.selected} > {option.label} diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte index 9edd69d09d..211bb15917 100644 --- a/packages/frontend-core/src/components/grid/layout/Grid.svelte +++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte @@ -29,7 +29,6 @@ GutterWidth, DefaultRowHeight, } from "../lib/constants" - import { memo } from "../../../utils" export let API = null export let tableId = null @@ -43,48 +42,26 @@ export let collaboration = true export let showAvatars = true export let showControls = true - export let filter = null - export let sortColumn = null - export let sortOrder = null + export let initialFilter = null + export let initialSortColumn = null + export let initialSortOrder = null + export let initialRowHeight = null // Unique identifier for DOM nodes inside this instance const rand = Math.random() - // Stores derived from props. - // We use memo here to ensure redundant store reactions don't fire and cause - // wasted API calls. - const tableIdStore = memo(tableId) - const schemaOverridesStore = memo(schemaOverrides) - const filterStore = memo(filter) - const sortStore = memo({ - column: sortColumn, - order: sortOrder, - }) - const config = memo({ - allowAddRows, - allowExpandRows, - allowEditRows, - allowDeleteRows, - allowSchemaChanges, - stripeRows, - showControls, - }) - // Build up context let context = { API: API || createAPIClient(), rand, - config, - tableId: tableIdStore, - schemaOverrides: schemaOverridesStore, - filter: filterStore, - sort: sortStore, + props: $$props, } context = { ...context, ...createEventManagers() } context = attachStores(context) // Reference some stores for local use const { + config, isResizing, isReordering, ui, @@ -95,22 +72,23 @@ gridFocused, } = context - // Keep prop-derived stores up to date - $: tableIdStore.set(tableId) - $: schemaOverridesStore.set(schemaOverrides) - $: filterStore.set(filter) - $: sortStore.set({ - column: sortColumn, - order: sortOrder, - }) + // Keep config store up to date with props $: config.set({ + tableId, + schemaOverrides, allowAddRows, - allowSchemaChanges, allowExpandRows, allowEditRows, allowDeleteRows, + allowSchemaChanges, stripeRows, + collaboration, + showAvatars, showControls, + initialFilter, + initialSortColumn, + initialSortOrder, + initialRowHeight, }) // Set context for children to consume diff --git a/packages/frontend-core/src/components/grid/stores/columns.js b/packages/frontend-core/src/components/grid/stores/columns.js index a0820e77bb..5f34de1434 100644 --- a/packages/frontend-core/src/components/grid/stores/columns.js +++ b/packages/frontend-core/src/components/grid/stores/columns.js @@ -56,6 +56,23 @@ export const deriveStores = context => { }) } + // Updates the width of all columns + const changeAllColumnWidths = async width => { + columns.update(state => { + return state.map(col => ({ + ...col, + width, + })) + }) + if (get(stickyColumn)) { + stickyColumn.update(state => ({ + ...state, + width, + })) + } + await saveChanges() + } + // Persists column changes by saving metadata against table schema const saveChanges = async () => { const $columns = get(columns) @@ -107,6 +124,7 @@ export const deriveStores = context => { saveChanges, saveTable, changePrimaryDisplay, + changeAllColumnWidths, }, }, } diff --git a/packages/frontend-core/src/components/grid/stores/config.js b/packages/frontend-core/src/components/grid/stores/config.js new file mode 100644 index 0000000000..3e8da81e2e --- /dev/null +++ b/packages/frontend-core/src/components/grid/stores/config.js @@ -0,0 +1,23 @@ +import { writable } from "svelte/store" +import { derivedMemo } from "../../../utils" + +export const createStores = context => { + const config = writable(context.props) + const getProp = prop => derivedMemo(config, $config => $config[prop]) + + // Derive and memoize some props so that we can react to them in isolation + const tableId = getProp("tableId") + const initialSortColumn = getProp("initialSortColumn") + const initialSortOrder = getProp("initialSortOrder") + const initialFilter = getProp("initialFilter") + const initialRowHeight = getProp("initialRowHeight") + + return { + config, + tableId, + initialSortColumn, + initialSortOrder, + initialFilter, + initialRowHeight, + } +} diff --git a/packages/frontend-core/src/components/grid/stores/filter.js b/packages/frontend-core/src/components/grid/stores/filter.js new file mode 100644 index 0000000000..1f01aaec40 --- /dev/null +++ b/packages/frontend-core/src/components/grid/stores/filter.js @@ -0,0 +1,20 @@ +import { writable } from "svelte/store" +import { derivedMemo } from "../../../utils" + +export const createStores = context => { + const { props } = context + + // Initialise to default props + const filter = writable(props.initialFilter) + + return { + filter, + } +} + +export const initialise = context => { + const { filter, initialFilter } = context + + // Reset filter when initial filter prop changes + initialFilter.subscribe(filter.set) +} diff --git a/packages/frontend-core/src/components/grid/stores/index.js b/packages/frontend-core/src/components/grid/stores/index.js index aa552a9ffe..588b568c8e 100644 --- a/packages/frontend-core/src/components/grid/stores/index.js +++ b/packages/frontend-core/src/components/grid/stores/index.js @@ -11,8 +11,14 @@ import * as Users from "./users" import * as Validation from "./validation" import * as Viewport from "./viewport" import * as Clipboard from "./clipboard" +import * as Config from "./config" +import * as Sort from "./sort" +import * as Filter from "./filter" const DependencyOrderedStores = [ + Config, + Sort, + Filter, Bounds, Scroll, Rows, diff --git a/packages/frontend-core/src/components/grid/stores/sort.js b/packages/frontend-core/src/components/grid/stores/sort.js new file mode 100644 index 0000000000..211124f640 --- /dev/null +++ b/packages/frontend-core/src/components/grid/stores/sort.js @@ -0,0 +1,27 @@ +import { writable } from "svelte/store" + +export const createStores = context => { + const { props } = context + + // Initialise to default props + const sort = writable({ + column: props.initialSortColumn, + order: props.initialSortOrder || "ascending", + }) + + return { + sort, + } +} + +export const initialise = context => { + const { sort, initialSortColumn, initialSortOrder } = context + + // Reset sort when initial sort props change + initialSortColumn.subscribe(newSortColumn => { + sort.update(state => ({ ...state, column: newSortColumn })) + }) + initialSortOrder.subscribe(newSortOrder => { + sort.update(state => ({ ...state, order: newSortOrder })) + }) +} diff --git a/packages/frontend-core/src/components/grid/stores/ui.js b/packages/frontend-core/src/components/grid/stores/ui.js index f5c0905320..168b0c8184 100644 --- a/packages/frontend-core/src/components/grid/stores/ui.js +++ b/packages/frontend-core/src/components/grid/stores/ui.js @@ -8,12 +8,13 @@ import { NewRowID, } from "../lib/constants" -export const createStores = () => { +export const createStores = context => { + const { props } = context const focusedCellId = writable(null) const focusedCellAPI = writable(null) const selectedRows = writable({}) const hoveredRowId = writable(null) - const rowHeight = writable(DefaultRowHeight) + const rowHeight = writable(props.initialRowHeight || DefaultRowHeight) const previousFocusedRowId = writable(null) const gridFocused = writable(false) const isDragging = writable(false) @@ -98,9 +99,9 @@ export const deriveStores = context => { // Derive the amount of content lines to show in cells depending on row height const contentLines = derived(rowHeight, $rowHeight => { - if ($rowHeight === LargeRowHeight) { + if ($rowHeight >= LargeRowHeight) { return 3 - } else if ($rowHeight === MediumRowHeight) { + } else if ($rowHeight >= MediumRowHeight) { return 2 } return 1 @@ -133,6 +134,7 @@ export const initialise = context => { hoveredRowId, table, rowHeight, + initialRowHeight, } = context // Ensure we clear invalid rows from state if they disappear @@ -189,4 +191,7 @@ export const initialise = context => { table.subscribe($table => { rowHeight.set($table?.rowHeight || DefaultRowHeight) }) + + // Reset row height when initial row height prop changes + initialRowHeight.subscribe(rowHeight.set) } diff --git a/packages/frontend-core/src/utils/index.js b/packages/frontend-core/src/utils/index.js index e3ec87a5e9..26e44410ba 100644 --- a/packages/frontend-core/src/utils/index.js +++ b/packages/frontend-core/src/utils/index.js @@ -3,5 +3,5 @@ export * as JSONUtils from "./json" export * as CookieUtils from "./cookies" export * as RoleUtils from "./roles" export * as Utils from "./utils" -export { memo } from "./memo" +export { memo, derivedMemo } from "./memo" export { createWebsocket } from "./websocket" diff --git a/packages/frontend-core/src/utils/memo.js b/packages/frontend-core/src/utils/memo.js index d46b264d1b..ba0e3f3490 100644 --- a/packages/frontend-core/src/utils/memo.js +++ b/packages/frontend-core/src/utils/memo.js @@ -1,4 +1,4 @@ -import { writable, get } from "svelte/store" +import { writable, get, derived } from "svelte/store" // A simple svelte store which deeply compares all changes and ensures that // subscribed children will only fire when a new value is actually set @@ -33,3 +33,11 @@ export const memo = initialValue => { }, } } + +// Enriched version of svelte's derived store which returns a memo +export const derivedMemo = (store, derivation) => { + const derivedStore = derived(store, derivation) + const memoStore = memo(get(derivedStore)) + derivedStore.subscribe(memoStore.set) + return memoStore +} From 9d8b5e99afa90b0f708b64b74a2334e3340a4cd6 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 19 Jun 2023 17:38:44 +0100 Subject: [PATCH 21/46] 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, } } From c03e64699d9225265ac3c9fe1030ec287837d7be Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 19 Jun 2023 17:40:57 +0100 Subject: [PATCH 22/46] Only apply row height prop if defined --- packages/frontend-core/src/components/grid/stores/ui.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/frontend-core/src/components/grid/stores/ui.js b/packages/frontend-core/src/components/grid/stores/ui.js index 168b0c8184..7b4a9534c6 100644 --- a/packages/frontend-core/src/components/grid/stores/ui.js +++ b/packages/frontend-core/src/components/grid/stores/ui.js @@ -193,5 +193,9 @@ export const initialise = context => { }) // Reset row height when initial row height prop changes - initialRowHeight.subscribe(rowHeight.set) + initialRowHeight.subscribe(height => { + if (height) { + rowHeight.set(height) + } + }) } From 030b767d1b775e29001321be4feae7b486157149 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 19 Jun 2023 17:42:33 +0100 Subject: [PATCH 23/46] Revert grid row height to default when unsetting prop --- packages/frontend-core/src/components/grid/stores/ui.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/frontend-core/src/components/grid/stores/ui.js b/packages/frontend-core/src/components/grid/stores/ui.js index 7b4a9534c6..ba780dee6c 100644 --- a/packages/frontend-core/src/components/grid/stores/ui.js +++ b/packages/frontend-core/src/components/grid/stores/ui.js @@ -196,6 +196,8 @@ export const initialise = context => { initialRowHeight.subscribe(height => { if (height) { rowHeight.set(height) + } else { + rowHeight.set(get(table)?.rowHeight || DefaultRowHeight) } }) } From 5350cdf346b3648cfe8f8aa418a4261e8b6418c1 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 19 Jun 2023 17:45:07 +0100 Subject: [PATCH 24/46] Revert testing whitelist --- .../builder/src/components/backend/DataTable/DataTable.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte index b9d45acea7..81df5a475d 100644 --- a/packages/builder/src/components/backend/DataTable/DataTable.svelte +++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte @@ -36,7 +36,6 @@ allowDeleteRows={!isUsersTable} schemaOverrides={isUsersTable ? userSchemaOverrides : null} showAvatars={false} - columnWhitelist={["email", "firstName", "lastName"]} on:updatetable={e => tables.replaceTable(id, e.detail)} > From dda498784837d1c4634d66debadda807399a9093 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 19 Jun 2023 17:54:06 +0100 Subject: [PATCH 25/46] Improve grid row inversion index calculation --- .../src/components/grid/stores/viewport.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/frontend-core/src/components/grid/stores/viewport.js b/packages/frontend-core/src/components/grid/stores/viewport.js index a363ffca00..b03f10f8fa 100644 --- a/packages/frontend-core/src/components/grid/stores/viewport.js +++ b/packages/frontend-core/src/components/grid/stores/viewport.js @@ -111,14 +111,19 @@ export const deriveStores = context => { [height, rowHeight, scrollTop], ([$height, $rowHeight, $scrollTop]) => { const offset = $scrollTop % $rowHeight + + // Compute the last row index with space to render popovers below it const minBottom = $height - ScrollBarSize * 3 - MaxCellRenderHeight + offset - return Math.floor(minBottom / $rowHeight) + const lastIdx = Math.floor(minBottom / $rowHeight) - // const maxCellRenderRows = Math.ceil(MaxCellRenderHeight / $rowHeight) - // const topIdx = $visualRowCapacity - maxCellRenderRows - 2 - // const bottomIdx = maxCellRenderRows + 1 - // return Math.max(topIdx, bottomIdx) + // Compute the first row index with space to render popovers above it + const minTop = MaxCellRenderHeight + offset + const firstIdx = Math.ceil(minTop / $rowHeight) + + // Use the greater of the two indices so that we prefer content below, + // unless there is room to render the entire popover above + return Math.max(lastIdx, firstIdx) } ) From 9942956a063e0eb2f5536fee8fd8508ff96d367e Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 19 Jun 2023 17:57:58 +0100 Subject: [PATCH 26/46] Invert relationship cells properly when required --- .../components/grid/cells/RelationshipCell.svelte | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte index 3a338725fe..8dea24f09e 100644 --- a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte @@ -245,7 +245,13 @@ }) -
+
Date: Mon, 19 Jun 2023 18:21:14 +0100 Subject: [PATCH 27/46] Add functionality to suppress errors to avoid spam in grids in client apps --- packages/client/src/api/api.js | 5 +++-- packages/frontend-core/src/api/index.js | 10 ++++++++-- packages/frontend-core/src/api/rows.js | 4 +++- .../frontend-core/src/components/grid/stores/rows.js | 12 ++++++++++-- 4 files changed, 24 insertions(+), 7 deletions(-) diff --git a/packages/client/src/api/api.js b/packages/client/src/api/api.js index b4a137f85d..4062bd3b73 100644 --- a/packages/client/src/api/api.js +++ b/packages/client/src/api/api.js @@ -35,7 +35,8 @@ export const API = createAPIClient({ // We could also log these to sentry. // Or we could check error.status and redirect to login on a 403 etc. onError: error => { - const { status, method, url, message, handled } = error || {} + const { status, method, url, message, handled, suppressErrors } = + error || {} const ignoreErrorUrls = [ "bbtel", "/api/global/self", @@ -49,7 +50,7 @@ export const API = createAPIClient({ } // Notify all errors - if (message) { + if (message && !suppressErrors) { // Don't notify if the URL contains the word analytics as it may be // blocked by browser extensions let ignore = false diff --git a/packages/frontend-core/src/api/index.js b/packages/frontend-core/src/api/index.js index 739e0fe711..05abded61c 100644 --- a/packages/frontend-core/src/api/index.js +++ b/packages/frontend-core/src/api/index.js @@ -75,7 +75,11 @@ export const createAPIClient = config => { let cache = {} // Generates an error object from an API response - const makeErrorFromResponse = async (response, method) => { + const makeErrorFromResponse = async ( + response, + method, + suppressErrors = false + ) => { // Try to read a message from the error let message = response.statusText let json = null @@ -96,6 +100,7 @@ export const createAPIClient = config => { url: response.url, method, handled: true, + suppressErrors, } } @@ -119,6 +124,7 @@ export const createAPIClient = config => { json = true, external = false, parseResponse, + suppressErrors = false, }) => { // Ensure we don't do JSON processing if sending a GET request json = json && method !== "GET" @@ -174,7 +180,7 @@ export const createAPIClient = config => { } } else { delete cache[url] - throw await makeErrorFromResponse(response, method) + throw await makeErrorFromResponse(response, method, suppressErrors) } } diff --git a/packages/frontend-core/src/api/rows.js b/packages/frontend-core/src/api/rows.js index 41ba505d81..8e8570ea2a 100644 --- a/packages/frontend-core/src/api/rows.js +++ b/packages/frontend-core/src/api/rows.js @@ -16,14 +16,16 @@ export const buildRowEndpoints = API => ({ /** * Creates or updates a row in a table. * @param row the row to save + * @param suppressErrors whether or not to suppress error notifications */ - saveRow: async row => { + saveRow: async (row, suppressErrors = false) => { if (!row?.tableId) { return } return await API.post({ url: `/api/${row.tableId}/rows`, body: row, + suppressErrors, }) }, diff --git a/packages/frontend-core/src/components/grid/stores/rows.js b/packages/frontend-core/src/components/grid/stores/rows.js index 9e12e16eb1..d7e623692e 100644 --- a/packages/frontend-core/src/components/grid/stores/rows.js +++ b/packages/frontend-core/src/components/grid/stores/rows.js @@ -4,6 +4,8 @@ import { notifications } from "@budibase/bbui" import { NewRowID, RowPageSize } from "../lib/constants" import { tick } from "svelte" +const SuppressErrors = true + export const createStores = () => { const rows = writable([]) const table = writable(null) @@ -209,7 +211,10 @@ export const deriveStores = context => { const addRow = async (row, idx, bubble = false) => { try { // Create row - const newRow = await API.saveRow({ ...row, tableId: get(tableId) }) + const newRow = await API.saveRow( + { ...row, tableId: get(tableId) }, + SuppressErrors + ) // Update state if (idx != null) { @@ -336,7 +341,10 @@ export const deriveStores = context => { ...state, [rowId]: true, })) - const saved = await API.saveRow({ ...row, ...get(rowChangeCache)[rowId] }) + const saved = await API.saveRow( + { ...row, ...get(rowChangeCache)[rowId] }, + SuppressErrors + ) // Update state after a successful change if (saved?._id) { From 7b75d7f13de8bb0d955ee407190afb7a9956792c Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 19 Jun 2023 18:32:03 +0100 Subject: [PATCH 28/46] Update column editor and filter editor to make action buttons full width --- .../controls/ColumnEditor/ColumnEditor.svelte | 10 +++++++++- .../controls/FilterEditor/FilterEditor.svelte | 19 ++++++++++++++++++- 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte index 59340d4898..fcad4be180 100644 --- a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte +++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte @@ -75,7 +75,9 @@ } -Configure columns +
+ Configure columns +
Configure the columns in your {subject.toLowerCase()}. @@ -89,3 +91,9 @@ {allowCellEditing} /> + + diff --git a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte b/packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte index 1d4b629f2e..9d48789947 100644 --- a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte +++ b/packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte @@ -20,15 +20,26 @@ $: datasource = getDatasourceForProvider($currentAsset, componentInstance) $: schema = getSchemaForDatasource($currentAsset, datasource)?.schema $: schemaFields = Object.values(schema || {}) + $: text = getText(value) async function saveFilter() { dispatch("change", tempValue) notifications.success("Filters saved") drawer.hide() } + + const getText = filters => { + if (!filters?.length) { + return "No filters set" + } else { + return `${filters.length} filter${filters.length === 1 ? "" : "s"} set` + } + } -Define filters +
+ {text} +
(tempValue = e.detail)} /> + + From e436c1da1c8266c612751b6f55394a727f30f59c Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 19 Jun 2023 18:32:13 +0100 Subject: [PATCH 29/46] Use old icon for grids --- packages/client/manifest.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index e425edc1b1..73ab2ee3ee 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -5228,13 +5228,13 @@ }, "gridblock": { "name": "Grid block", - "icon": "ViewTable", + "icon": "Table", "styles": ["size"], "size": { "width": 600, "height": 400 }, - "info": "Grid Block is only compatible with internal or SQL tables", + "info": "Grid Blocks are only compatible with internal or SQL tables", "settings": [ { "type": "table", @@ -5306,7 +5306,7 @@ }, { "type": "boolean", - "label": "Stripe rows", + "label": "High contrast", "key": "stripeRows", "defaultValue": false } From 9fd04cc2c7c82f8fe5a6f3c0efd86fd05edce36d Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 19 Jun 2023 18:49:57 +0100 Subject: [PATCH 30/46] Update multiple settings components to enable more generic usage of column selectors and remove some bespoke copy from generic components. Enable display names for grid columns --- .../ColumnEditor/BasicColumnEditor.svelte | 7 +------ .../controls/ColumnEditor/ColumnDrawer.svelte | 6 +++--- .../controls/ColumnEditor/ColumnEditor.svelte | 6 +----- .../settings/controls/FieldConfiguration.svelte | 2 +- packages/client/manifest.json | 7 +++---- .../client/src/components/app/GridBlock.svelte | 16 +++++++++++++++- 6 files changed, 24 insertions(+), 20 deletions(-) diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte index 053735cc6d..f051d68a48 100644 --- a/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte +++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte @@ -2,9 +2,4 @@ import ColumnEditor from "./ColumnEditor.svelte" - + diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte index 87fbba3b52..6e57d20751 100644 --- a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte +++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte @@ -142,10 +142,10 @@
- By default, all table columns will automatically be shown. + By default, all columns will automatically be shown.
- You can manually control which columns are included in your table, - and their appearance, by adding them below. + You can manually control which columns are included by adding them + below.
diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte index fcad4be180..b34edd880a 100644 --- a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte +++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte @@ -13,7 +13,6 @@ export let componentInstance export let value = [] export let allowCellEditing = true - export let subject = "Table" const dispatch = createEventDispatcher() @@ -78,10 +77,7 @@
Configure columns
- - - Configure the columns in your {subject.toLowerCase()}. - + import { Button, ActionButton, Drawer } from "@budibase/bbui" import { createEventDispatcher } from "svelte" - import ColumnDrawer from "./ColumnDrawer.svelte" + import ColumnDrawer from "./ColumnEditor/ColumnDrawer.svelte" import { cloneDeep } from "lodash/fp" import { getDatasourceForProvider, diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 73ab2ee3ee..568c17d034 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -5243,11 +5243,10 @@ "required": true }, { - "type": "multifield", + "type": "columns/basic", "label": "Columns", - "key": "columnWhitelist", - "dependsOn": "table", - "placeholder": "All columns" + "key": "columns", + "dependsOn": "table" }, { "type": "filter", diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte index ee663ebd6b..4314f6e99c 100644 --- a/packages/client/src/components/app/GridBlock.svelte +++ b/packages/client/src/components/app/GridBlock.svelte @@ -13,10 +13,23 @@ export let initialSortColumn = null export let initialSortOrder = null export let initialRowHeight = null - export let columnWhitelist = null + export let columns = null const component = getContext("component") const { styleable, API, builderStore } = getContext("sdk") + + $: columnWhitelist = columns?.map(col => col.name) + $: schemaOverrides = getSchemaOverrides(columns) + + const getSchemaOverrides = columns => { + let overrides = {} + columns?.forEach(column => { + overrides[column.name] = { + displayName: column.displayName || column.name, + } + }) + return overrides + }
Date: Mon, 19 Jun 2023 18:51:29 +0100 Subject: [PATCH 31/46] Update placeholder text for grid block settings --- packages/client/manifest.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 568c17d034..eb9a45dda1 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -5256,7 +5256,8 @@ { "type": "field/sortable", "label": "Sort column", - "key": "initialSortColumn" + "key": "initialSortColumn", + "placeholder": "Default" }, { "type": "select", From 164bacf783444b46ea81139adcc3eb87acda28b8 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 20 Jun 2023 07:42:26 +0100 Subject: [PATCH 32/46] Lint --- packages/frontend-core/src/components/grid/stores/filter.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/frontend-core/src/components/grid/stores/filter.js b/packages/frontend-core/src/components/grid/stores/filter.js index 1f01aaec40..76c6a86c21 100644 --- a/packages/frontend-core/src/components/grid/stores/filter.js +++ b/packages/frontend-core/src/components/grid/stores/filter.js @@ -1,5 +1,4 @@ import { writable } from "svelte/store" -import { derivedMemo } from "../../../utils" export const createStores = context => { const { props } = context From 901ba5363036c93cc5d039d3fb200948ddb6ced4 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 20 Jun 2023 07:55:46 +0100 Subject: [PATCH 33/46] Respect the allowExpandRows flag in when considering if rows can be edited in modals --- .../src/components/grid/overlays/MenuOverlay.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte b/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte index 15ca08dbdf..36ea977913 100644 --- a/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte +++ b/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte @@ -72,7 +72,9 @@ dispatch("edit-row", $focusedRow)} on:click={menu.actions.close} > From 7486d3dde05c5edc3ce25a67cdad2f2c70cab1f3 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 20 Jun 2023 08:01:41 +0100 Subject: [PATCH 34/46] Close context menu when using mouse wheel or menu touching scrollbars --- .../components/grid/layout/GridScrollWrapper.svelte | 6 ++++++ .../src/components/grid/overlays/ScrollOverlay.svelte | 10 ++++++++++ 2 files changed, 16 insertions(+) diff --git a/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte b/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte index 04f0960057..7599135c63 100644 --- a/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte +++ b/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte @@ -12,6 +12,7 @@ bounds, hoveredRowId, hiddenColumnsWidth, + menu, } = getContext("grid") export let scrollVertically = false @@ -30,6 +31,11 @@ const handleWheel = e => { e.preventDefault() debouncedHandleWheel(e.deltaX, e.deltaY, e.clientY) + + // If a context menu was visible, hide it + if ($menu.visible) { + menu.actions.close() + } } const debouncedHandleWheel = domDebounce((deltaX, deltaY, clientY) => { const { top, left } = $scroll diff --git a/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte b/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte index 654a7529b5..315c3d21e5 100644 --- a/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte +++ b/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte @@ -16,6 +16,7 @@ scrollTop, height, isDragging, + menu, } = getContext("grid") // State for dragging bars @@ -45,6 +46,13 @@ $: availWidth = renderWidth - barWidth $: barLeft = ScrollBarSize + availWidth * ($scrollLeft / $maxScrollLeft) + // Helper to close the context menu if it's open + const closeMenu = () => { + if ($menu.visible) { + menu.actions.close() + } + } + // V scrollbar drag handlers const startVDragging = e => { e.preventDefault() @@ -53,6 +61,7 @@ document.addEventListener("mousemove", moveVDragging) document.addEventListener("mouseup", stopVDragging) isDraggingV = true + closeMenu() } const moveVDragging = domDebounce(e => { const delta = e.clientY - initialMouse @@ -77,6 +86,7 @@ document.addEventListener("mousemove", moveHDragging) document.addEventListener("mouseup", stopHDragging) isDraggingH = true + closeMenu() } const moveHDragging = domDebounce(e => { const delta = e.clientX - initialMouse From 2df810c59b1520096d33a3db70d36ba67e120b84 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 20 Jun 2023 09:34:27 +0100 Subject: [PATCH 35/46] Update grid context menu position determination to work regardless of page scroll offsets --- .../src/components/grid/cells/GridCell.svelte | 5 ++++ .../src/components/grid/stores/menu.js | 25 ++++++++++++------- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/packages/frontend-core/src/components/grid/cells/GridCell.svelte b/packages/frontend-core/src/components/grid/cells/GridCell.svelte index fe4bd70ba4..ac2a4da5a0 100644 --- a/packages/frontend-core/src/components/grid/cells/GridCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/GridCell.svelte @@ -82,6 +82,11 @@ align-items: center; } + /* Disable pointer events for non-focused cells */ + .cell:not(.focused) :global(*) { + pointer-events: none; + } + /* Cell border */ .cell.focused:after, .cell.error:after, diff --git a/packages/frontend-core/src/components/grid/stores/menu.js b/packages/frontend-core/src/components/grid/stores/menu.js index 3f34c0a266..db56f57ce9 100644 --- a/packages/frontend-core/src/components/grid/stores/menu.js +++ b/packages/frontend-core/src/components/grid/stores/menu.js @@ -1,5 +1,5 @@ -import { writable, get } from "svelte/store" -import { GutterWidth } from "../lib/constants" +import { writable } from "svelte/store" +import { tick } from "svelte" export const createStores = () => { const menu = writable({ @@ -14,18 +14,25 @@ export const createStores = () => { } export const deriveStores = context => { - const { menu, bounds, focusedCellId, stickyColumn, rowHeight } = context + const { menu, focusedCellId, rand } = context const open = (cellId, e) => { - const $bounds = get(bounds) - const $stickyColumn = get(stickyColumn) - const $rowHeight = get(rowHeight) e.preventDefault() + + // Get DOM node for grid data wrapper to compute relative position to + const gridNode = document.getElementById(`grid-${rand}`) + const dataNode = gridNode?.getElementsByClassName("grid-data-outer")?.[0] + if (!dataNode) { + return + } + + // Compute bounds of cell relative to outer data node + const targetBounds = e.target.getBoundingClientRect() + const dataBounds = dataNode.getBoundingClientRect() focusedCellId.set(cellId) menu.set({ - left: - e.clientX - $bounds.left + GutterWidth + ($stickyColumn?.width || 0), - top: e.clientY - $bounds.top + $rowHeight, + left: targetBounds.left - dataBounds.left + e.offsetX, + top: targetBounds.top - dataBounds.top + e.offsetY, visible: true, }) } From c1f7774602126beab8ef381082f626f71c119e49 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 20 Jun 2023 09:34:56 +0100 Subject: [PATCH 36/46] Lint --- packages/frontend-core/src/components/grid/stores/menu.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/frontend-core/src/components/grid/stores/menu.js b/packages/frontend-core/src/components/grid/stores/menu.js index db56f57ce9..f1d822aeaf 100644 --- a/packages/frontend-core/src/components/grid/stores/menu.js +++ b/packages/frontend-core/src/components/grid/stores/menu.js @@ -1,5 +1,4 @@ import { writable } from "svelte/store" -import { tick } from "svelte" export const createStores = () => { const menu = writable({ From 9d6fbf067f52c1e87d31e18ae81c4d443eb444d7 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 20 Jun 2023 11:10:23 +0100 Subject: [PATCH 37/46] Restore pointer events for unfocused cells --- .../frontend-core/src/components/grid/cells/GridCell.svelte | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/frontend-core/src/components/grid/cells/GridCell.svelte b/packages/frontend-core/src/components/grid/cells/GridCell.svelte index ac2a4da5a0..fe4bd70ba4 100644 --- a/packages/frontend-core/src/components/grid/cells/GridCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/GridCell.svelte @@ -82,11 +82,6 @@ align-items: center; } - /* Disable pointer events for non-focused cells */ - .cell:not(.focused) :global(*) { - pointer-events: none; - } - /* Cell border */ .cell.focused:after, .cell.error:after, From 3f20a3a439209a497286e5d9968bbb10ea625c14 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 21 Jun 2023 08:33:58 +0100 Subject: [PATCH 38/46] Enable collaboration for public users and fix collaboration for non-devs --- packages/frontend-core/src/api/index.js | 8 ++++ .../src/components/grid/lib/websocket.js | 5 ++- packages/server/src/websockets/grid.ts | 45 +++++++++++++++---- packages/server/src/websockets/websocket.ts | 14 ++++-- 4 files changed, 59 insertions(+), 13 deletions(-) diff --git a/packages/frontend-core/src/api/index.js b/packages/frontend-core/src/api/index.js index 05abded61c..7b823d28c2 100644 --- a/packages/frontend-core/src/api/index.js +++ b/packages/frontend-core/src/api/index.js @@ -234,6 +234,14 @@ export const createAPIClient = config => { invalidateCache: () => { cache = {} }, + + // Generic utility to extract the current app ID. Assumes that any client + // that exists in an app context will be attaching our app ID header. + getAppID: () => { + let headers = {} + config?.attachHeaders(headers) + return headers?.["x-budibase-app-id"] + }, } // Attach all endpoints diff --git a/packages/frontend-core/src/components/grid/lib/websocket.js b/packages/frontend-core/src/components/grid/lib/websocket.js index 9de0199cfc..66863ca1f2 100644 --- a/packages/frontend-core/src/components/grid/lib/websocket.js +++ b/packages/frontend-core/src/components/grid/lib/websocket.js @@ -3,7 +3,7 @@ import { createWebsocket } from "../../../utils" import { SocketEvent, GridSocketEvent } from "@budibase/shared-core" export const createGridWebsocket = context => { - const { rows, tableId, users, focusedCellId, table } = context + const { rows, tableId, users, focusedCellId, table, API } = context const socket = createWebsocket("/socket/grid") const connectToTable = tableId => { @@ -11,9 +11,10 @@ export const createGridWebsocket = context => { return } // Identify which table we are editing + const appId = API.getAppID() socket.emit( GridSocketEvent.SelectTable, - { tableId }, + { tableId, appId }, ({ users: gridUsers }) => { users.set(gridUsers) } diff --git a/packages/server/src/websockets/grid.ts b/packages/server/src/websockets/grid.ts index 6731c2d899..a1f790fc68 100644 --- a/packages/server/src/websockets/grid.ts +++ b/packages/server/src/websockets/grid.ts @@ -1,6 +1,6 @@ import authorized from "../middleware/authorized" import { BaseSocket } from "./websocket" -import { permissions } from "@budibase/backend-core" +import { context, permissions } from "@budibase/backend-core" import http from "http" import Koa from "koa" import { getTableId } from "../api/controllers/row/utils" @@ -8,20 +8,49 @@ import { Row, Table } from "@budibase/types" import { Socket } from "socket.io" import { GridSocketEvent } from "@budibase/shared-core" +const { PermissionType, PermissionLevel } = permissions + export default class GridSocket extends BaseSocket { constructor(app: Koa, server: http.Server) { - super(app, server, "/socket/grid", [authorized(permissions.BUILDER)]) + super(app, server, "/socket/grid") } async onConnect(socket: Socket) { // Initial identification of connected spreadsheet - socket.on(GridSocketEvent.SelectTable, async ({ tableId }, callback) => { - await this.joinRoom(socket, tableId) + socket.on( + GridSocketEvent.SelectTable, + async ({ tableId, appId }, callback) => { + // Check if the user has permission to read this resource + const middleware = authorized( + PermissionType.TABLE, + PermissionLevel.READ + ) + const ctx = { + appId, + resourceId: tableId, + roleId: socket.data.roleId, + user: { _id: socket.data._id }, + isAuthenticated: socket.data.isAuthenticated, + request: { + url: "/fake", + }, + get: () => null, + throw: () => { + // If they don't have access, immediately disconnect them + socket.disconnect(true) + }, + } + await context.doInAppContext(appId, async () => { + await middleware(ctx, async () => { + await this.joinRoom(socket, tableId) - // Reply with all users in current room - const sessions = await this.getRoomSessions(tableId) - callback({ users: sessions }) - }) + // Reply with all users in current room + const sessions = await this.getRoomSessions(tableId) + callback({ users: sessions }) + }) + }) + } + ) // Handle users selecting a new cell socket.on(GridSocketEvent.SelectCell, ({ cellId }) => { diff --git a/packages/server/src/websockets/websocket.ts b/packages/server/src/websockets/websocket.ts index d8cc10bda4..52351aea36 100644 --- a/packages/server/src/websockets/websocket.ts +++ b/packages/server/src/websockets/websocket.ts @@ -4,12 +4,18 @@ import Koa from "koa" import Cookies from "cookies" import { userAgent } from "koa-useragent" import { auth, Header, redis } from "@budibase/backend-core" -import currentApp from "../middleware/currentapp" import { createAdapter } from "@socket.io/redis-adapter" import { Socket } from "socket.io" import { getSocketPubSubClients } from "../utilities/redis" import { SocketEvent, SocketSessionTTL } from "@budibase/shared-core" import { SocketSession } from "@budibase/types" +import { v4 as uuid } from "uuid" + +const anonUser = () => ({ + _id: uuid(), + email: "user@mail.com", + firstName: "Anonymous", +}) export class BaseSocket { io: Server @@ -34,7 +40,6 @@ export class BaseSocket { const middlewares = [ userAgent, authenticate, - currentApp, ...(additionalMiddlewares || []), ] @@ -70,7 +75,8 @@ export class BaseSocket { // Middlewares are finished // Extract some data from our enriched koa context to persist // as metadata for the socket - const { _id, email, firstName, lastName } = ctx.user + const user = ctx.user?._id ? ctx.user : anonUser() + const { _id, email, firstName, lastName } = user socket.data = { _id, email, @@ -78,6 +84,8 @@ export class BaseSocket { lastName, sessionId: socket.id, connectedAt: Date.now(), + isAuthenticated: ctx.isAuthenticated, + roleId: ctx.roleId, } next() } From 1403ee59ce4108654b6e814afc29fe26f667bcc8 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 21 Jun 2023 08:51:43 +0100 Subject: [PATCH 39/46] Use app ID as part of room key for grid websocket to fix issues with dev/prod tables having the same table ID but being different tables --- packages/server/src/websockets/grid.ts | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/packages/server/src/websockets/grid.ts b/packages/server/src/websockets/grid.ts index a1f790fc68..2a797623cf 100644 --- a/packages/server/src/websockets/grid.ts +++ b/packages/server/src/websockets/grid.ts @@ -20,6 +20,12 @@ export default class GridSocket extends BaseSocket { socket.on( GridSocketEvent.SelectTable, async ({ tableId, appId }, callback) => { + // Ignore if no table or app specified + if (!tableId || !appId) { + socket.disconnect(true) + return + } + // Check if the user has permission to read this resource const middleware = authorized( PermissionType.TABLE, @@ -42,10 +48,11 @@ export default class GridSocket extends BaseSocket { } await context.doInAppContext(appId, async () => { await middleware(ctx, async () => { - await this.joinRoom(socket, tableId) + const room = `${appId}-${tableId}` + await this.joinRoom(socket, room) // Reply with all users in current room - const sessions = await this.getRoomSessions(tableId) + const sessions = await this.getRoomSessions(room) callback({ users: sessions }) }) }) @@ -60,7 +67,8 @@ export default class GridSocket extends BaseSocket { emitRowUpdate(ctx: any, row: Row) { const tableId = getTableId(ctx) - this.emitToRoom(ctx, tableId, GridSocketEvent.RowChange, { + const room = `${ctx.appId}-${tableId}` + this.emitToRoom(ctx, room, GridSocketEvent.RowChange, { id: row._id, row, }) @@ -68,17 +76,20 @@ export default class GridSocket extends BaseSocket { emitRowDeletion(ctx: any, id: string) { const tableId = getTableId(ctx) - this.emitToRoom(ctx, tableId, GridSocketEvent.RowChange, { id, row: null }) + const room = `${ctx.appId}-${tableId}` + this.emitToRoom(ctx, room, GridSocketEvent.RowChange, { id, row: null }) } emitTableUpdate(ctx: any, table: Table) { - this.emitToRoom(ctx, table._id!, GridSocketEvent.TableChange, { + const room = `${ctx.appId}-${table._id}` + this.emitToRoom(ctx, room, GridSocketEvent.TableChange, { id: table._id, table, }) } emitTableDeletion(ctx: any, id: string) { - this.emitToRoom(ctx, id, GridSocketEvent.TableChange, { id, table: null }) + const room = `${ctx.appId}-${id}` + this.emitToRoom(ctx, room, GridSocketEvent.TableChange, { id, table: null }) } } From 0a3dd1a1b4e47f2d588d920a382765103f7d1b7b Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 21 Jun 2023 11:51:23 +0100 Subject: [PATCH 40/46] Remove expand icons from grids --- .../components/grid/cells/GutterCell.svelte | 23 +++++++------------ .../src/components/grid/layout/NewRow.svelte | 4 ++-- .../grid/layout/StickyColumn.svelte | 3 +-- 3 files changed, 11 insertions(+), 19 deletions(-) diff --git a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte index a8e0da85de..dd11066b98 100644 --- a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte @@ -9,7 +9,7 @@ export let rowFocused = false export let rowHovered = false export let rowSelected = false - export let disableExpand = false + export let expandable = false export let disableNumber = false export let defaultHeight = false export let disabled = false @@ -24,13 +24,6 @@ selectedRows.actions.toggleRow(id) } } - - const expand = () => { - svelteDispatch("expand") - if (row) { - dispatch("edit-row", row) - } - }
{:else} -
- +
+ svelteDispatch("expand")} + />
{/if}
diff --git a/packages/frontend-core/src/components/grid/layout/NewRow.svelte b/packages/frontend-core/src/components/grid/layout/NewRow.svelte index 9eb2cf4951..baec7c8e91 100644 --- a/packages/frontend-core/src/components/grid/layout/NewRow.svelte +++ b/packages/frontend-core/src/components/grid/layout/NewRow.svelte @@ -145,7 +145,7 @@ -{#if !visible && !$config.showControls && !selectedRowCount} +{#if !visible && !selectedRowCount}
dispatch("add-row-inline")} @@ -165,7 +165,7 @@
- + {#if isAdding}
diff --git a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte index b6205a1f59..97b40e3e23 100644 --- a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte +++ b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte @@ -51,7 +51,6 @@ >
($hoveredRowId = null)} on:click={() => dispatch("add-row-inline")} > - + {#if $stickyColumn} From bcbeae22799c75d1e09384cc26a4099f384c68cb Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 22 Jun 2023 08:16:59 +0100 Subject: [PATCH 41/46] Rework grid buttons, removing add row and add column buttons, and compression height and width into new size button --- .../backend/DataTable/DataTable.svelte | 4 +- .../buttons/TableFilterButton.svelte | 8 +- .../components/grid/cells/BooleanCell.svelte | 6 - .../grid/controls/ColumnWidthButton.svelte | 76 ---------- .../grid/controls/HideColumnsButton.svelte | 13 +- .../grid/controls/RowHeightButton.svelte | 71 --------- .../grid/controls/SizeButton.svelte | 135 ++++++++++++++++++ .../grid/controls/SortButton.svelte | 7 +- .../src/components/grid/layout/Grid.svelte | 21 +-- 9 files changed, 169 insertions(+), 172 deletions(-) delete mode 100644 packages/frontend-core/src/components/grid/controls/ColumnWidthButton.svelte delete mode 100644 packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte create mode 100644 packages/frontend-core/src/components/grid/controls/SizeButton.svelte diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte index 81df5a475d..449be506f3 100644 --- a/packages/builder/src/components/backend/DataTable/DataTable.svelte +++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte @@ -38,6 +38,9 @@ showAvatars={false} on:updatetable={e => tables.replaceTable(id, e.detail)} > + + + {#if isInternal} @@ -52,7 +55,6 @@ {/if} - {#if isUsersTable} diff --git a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte index 5af8d1bac8..ce6a3f0c51 100644 --- a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte +++ b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte @@ -14,6 +14,12 @@ $: tempValue = filters || [] $: schemaFields = Object.values(schema || {}) + $: text = getText(filters) + + const getText = filters => { + const count = filters?.length + return count ? `Filter (${count})` : "Filter" + } 0} > - Filter + {text} diff --git a/packages/frontend-core/src/components/grid/controls/ColumnWidthButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnWidthButton.svelte deleted file mode 100644 index fb20cc50e5..0000000000 --- a/packages/frontend-core/src/components/grid/controls/ColumnWidthButton.svelte +++ /dev/null @@ -1,76 +0,0 @@ - - -
- (open = !open)} - selected={open} - disabled={!allCols.length} - tooltip={$compact ? "Width" : null} - > - {$compact ? "" : "Width"} - -
- - -
- {#each sizeOptions as option} - columns.actions.changeAllColumnWidths(option.size)} - selected={option.selected} - > - {option.label} - - {/each} - {#if custom} - Custom - {/if} -
- - - diff --git a/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte b/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte index fb66b106c9..b8728156db 100644 --- a/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte +++ b/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte @@ -3,12 +3,13 @@ import { ActionButton, Popover, Toggle, Icon } from "@budibase/bbui" import { getColumnIcon } from "../lib/utils" - const { columns, stickyColumn, compact } = getContext("grid") + const { columns, stickyColumn } = getContext("grid") let open = false let anchor $: anyHidden = $columns.some(col => !col.visible) + $: text = getText($columns) const toggleVisibility = (column, visible) => { columns.update(state => { @@ -38,6 +39,11 @@ }) columns.actions.saveChanges() } + + const getText = columns => { + const hidden = columns.filter(col => !col.visible).length + return hidden ? `Hide columns (${hidden})` : "Hide columns" + }
@@ -48,13 +54,12 @@ on:click={() => (open = !open)} selected={open || anyHidden} disabled={!$columns.length} - tooltip={$compact ? "Columns" : ""} > - {$compact ? "" : "Columns"} + {text}
- +
{#if $stickyColumn} diff --git a/packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte b/packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte deleted file mode 100644 index e9617ce0b6..0000000000 --- a/packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte +++ /dev/null @@ -1,71 +0,0 @@ - - -
- (open = !open)} - selected={open} - tooltip={$compact ? "Height" : null} - > - {$compact ? "" : "Height"} - -
- - -
- {#each sizeOptions as option} - changeRowHeight(option.size)} - > - {option.label} - - {/each} -
- - - diff --git a/packages/frontend-core/src/components/grid/controls/SizeButton.svelte b/packages/frontend-core/src/components/grid/controls/SizeButton.svelte new file mode 100644 index 0000000000..eb9bf917d9 --- /dev/null +++ b/packages/frontend-core/src/components/grid/controls/SizeButton.svelte @@ -0,0 +1,135 @@ + + +
+ (open = !open)} + selected={open} + disabled={!allCols.length} + > + Size + +
+ + +
+
+ +
+ {#each rowSizeOptions as option} + changeRowHeight(option.size)} + > + {option.label} + + {/each} +
+
+
+ +
+ {#each columnSizeOptions as option} + columns.actions.changeAllColumnWidths(option.size)} + selected={option.selected} + > + {option.label} + + {/each} + {#if custom} + Custom + {/if} +
+
+
+ + + diff --git a/packages/frontend-core/src/components/grid/controls/SortButton.svelte b/packages/frontend-core/src/components/grid/controls/SortButton.svelte index 2018e83e44..bd75249216 100644 --- a/packages/frontend-core/src/components/grid/controls/SortButton.svelte +++ b/packages/frontend-core/src/components/grid/controls/SortButton.svelte @@ -2,7 +2,7 @@ import { getContext } from "svelte" import { ActionButton, Popover, Select } from "@budibase/bbui" - const { sort, columns, stickyColumn, compact } = getContext("grid") + const { sort, columns, stickyColumn } = getContext("grid") let open = false let anchor @@ -90,13 +90,12 @@ on:click={() => (open = !open)} selected={open} disabled={!columnOptions.length} - tooltip={$compact ? "Sort" : ""} > - {$compact ? "" : "Sort"} + Sort
- +