From a72c94426f6e92e4fde4d205534598494bb3efa0 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 8 Aug 2023 09:29:05 +0100 Subject: [PATCH] Hydrate view filters and allow filter changes to be saved to views --- .../backend/DataTable/ViewV2DataTable.svelte | 4 +- .../buttons/grid/GridFilterButton.svelte | 3 -- .../modals/grid/GridCreateViewModal.svelte | 5 +- .../src/components/grid/stores/table.js | 49 ++++++++++++------- .../src/components/grid/stores/viewV2.js | 20 +++++++- 5 files changed, 52 insertions(+), 29 deletions(-) diff --git a/packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte b/packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte index 789f7d730a..e4e1adda36 100644 --- a/packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte +++ b/packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte @@ -26,7 +26,9 @@ showAvatars={false} on:updatedatasource={handleGridViewUpdate} > - + + + 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 ae4d39483e..f927f84876 100644 --- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridFilterButton.svelte +++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridFilterButton.svelte @@ -4,9 +4,6 @@ const { columns, datasource, filter, definition } = getContext("grid") - // Wipe filter whenever table ID changes to avoid using stale filters - $: $datasource, filter.set([]) - const onFilter = e => { filter.set(e.detail || []) } diff --git a/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateViewModal.svelte b/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateViewModal.svelte index 1531fd5187..ba55a3c540 100644 --- a/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateViewModal.svelte +++ b/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateViewModal.svelte @@ -3,12 +3,9 @@ import { Input, notifications, ModalContent } from "@budibase/bbui" import { goto } from "@roxi/routify" import { viewsV2 } from "stores/backend" - import { LuceneUtils } from "@budibase/frontend-core" const { filter, sort, definition } = getContext("grid") - $: query = LuceneUtils.buildLuceneQuery($filter) - let name $: views = Object.keys($definition?.views || {}) @@ -20,7 +17,7 @@ const newView = await viewsV2.create({ name, tableId: $definition._id, - query, + query: $filter, sort: { field: $sort.column, order: $sort.order, diff --git a/packages/frontend-core/src/components/grid/stores/table.js b/packages/frontend-core/src/components/grid/stores/table.js index bf4eebcda4..291e639572 100644 --- a/packages/frontend-core/src/components/grid/stores/table.js +++ b/packages/frontend-core/src/components/grid/stores/table.js @@ -61,38 +61,49 @@ export const createActions = context => { export const initialise = context => { const { datasource, fetch, filter, sort, definition } = context + // Wipe filter whenever table ID changes to avoid using stale filters + definition.subscribe(() => { + if (get(datasource)?.type !== "table") { + return + } + filter.set([]) + }) + // Update fetch when filter changes filter.subscribe($filter => { - if (get(datasource)?.type === "table") { - get(fetch)?.update({ - filter: $filter, - }) + if (get(datasource)?.type !== "table") { + return } + get(fetch)?.update({ + filter: $filter, + }) }) // Update fetch when sorting changes sort.subscribe($sort => { - if (get(datasource)?.type === "table") { - get(fetch)?.update({ - sortOrder: $sort.order, - sortColumn: $sort.column, - }) + if (get(datasource)?.type !== "table") { + return } + get(fetch)?.update({ + sortOrder: $sort.order, + sortColumn: $sort.column, + }) }) // Ensure sorting UI reflects the fetch state whenever we reset the fetch, // which triggers a new definition definition.subscribe(() => { - if (get(datasource)?.type === "table") { - const $fetch = get(fetch) - if (!$fetch) { - return - } - const { sortColumn, sortOrder } = get($fetch) - sort.set({ - column: sortColumn, - order: sortOrder, - }) + if (get(datasource)?.type !== "table") { + return } + const $fetch = get(fetch) + if (!$fetch) { + return + } + const { sortColumn, sortOrder } = get($fetch) + sort.set({ + column: sortColumn, + order: sortOrder, + }) }) } diff --git a/packages/frontend-core/src/components/grid/stores/viewV2.js b/packages/frontend-core/src/components/grid/stores/viewV2.js index 31ccba8c76..cb6f4cc3e6 100644 --- a/packages/frontend-core/src/components/grid/stores/viewV2.js +++ b/packages/frontend-core/src/components/grid/stores/viewV2.js @@ -82,9 +82,9 @@ export const createActions = context => { } export const initialise = context => { - const { definition, datasource, sort, rows } = context + const { definition, datasource, sort, rows, filter } = context - // For views, keep sort state in line with the view definition + // Keep sort and filter state in line with the view definition definition.subscribe($definition => { if (!$definition || get(datasource)?.type !== "viewV2") { return @@ -93,6 +93,7 @@ export const initialise = context => { column: $definition.sort?.field, order: $definition.sort?.order, }) + filter.set($definition.query || []) }) // When sorting changes, ensure view definition is kept up to date @@ -115,4 +116,19 @@ export const initialise = context => { await rows.actions.refreshData() } }) + + // When filters change, ensure view definition is kept up to date + filter.subscribe(async $filter => { + const $view = get(definition) + if (!$view || get(datasource)?.type !== "viewV2") { + return + } + if (JSON.stringify($filter) !== JSON.stringify($view.query)) { + await datasource.actions.saveDefinition({ + ...$view, + query: $filter, + }) + await rows.actions.refreshData() + } + }) }