From 6ca6eb0d4bcb52cabda34ce4e6da7a814099c39a Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 16 Nov 2021 16:28:48 +0000 Subject: [PATCH] Refactor how client app actions programmatically mutate data provider queries to allow for correctly handling removal of query extensions --- .../src/components/app/DataProvider.svelte | 47 ++++++++++++++++-- .../src/components/app/DateRangePicker.svelte | 49 ++++++++----------- packages/client/src/constants.js | 3 +- 3 files changed, 67 insertions(+), 32 deletions(-) diff --git a/packages/client/src/components/app/DataProvider.svelte b/packages/client/src/components/app/DataProvider.svelte index 68f6cc6c07..61f985bce9 100644 --- a/packages/client/src/components/app/DataProvider.svelte +++ b/packages/client/src/components/app/DataProvider.svelte @@ -34,12 +34,16 @@ let bookmarks = [null] let pageNumber = 0 let query = null + let queryExtensions = {} // Sorting can be overridden at run time, so we can't use the prop directly let currentSortColumn = sortColumn let currentSortOrder = sortOrder + $: currentSortColumn = sortColumn + $: currentSortOrder = sortOrder - $: query = buildLuceneQuery(filter) + $: defaultQuery = buildLuceneQuery(filter) + $: extendQuery(defaultQuery, queryExtensions) $: internalTable = dataSource?.type === "table" $: nestedProvider = dataSource?.type === "provider" $: hasNextPage = bookmarks[pageNumber + 1] != null @@ -91,8 +95,12 @@ metadata: { dataSource }, }, { - type: ActionTypes.SetDataProviderQuery, - callback: newQuery => (query = newQuery), + type: ActionTypes.AddDataProviderQueryExtension, + callback: addQueryExtension, + }, + { + type: ActionTypes.RemoveDataProviderQueryExtension, + callback: removeQueryExtension, }, { type: ActionTypes.SetDataProviderSorting, @@ -164,6 +172,7 @@ const sort = schema?.[sortColumn] ? sortColumn : undefined // For internal tables we use server-side processing + console.log("SEARCH!") const res = await API.searchTable({ tableId: dataSource.tableId, query, @@ -264,6 +273,38 @@ pageNumber-- allRows = res.rows } + + const addQueryExtension = (key, operator, field, value) => { + if (!key || !operator || !field) { + return + } + const extension = { operator, field, value } + queryExtensions = { ...queryExtensions, [key]: extension } + } + + const removeQueryExtension = key => { + if (!key) { + return + } + const newQueryExtensions = { ...queryExtensions } + delete newQueryExtensions[key] + queryExtensions = newQueryExtensions + } + + const extendQuery = (defaultQuery, extensions) => { + const extensionValues = Object.values(extensions || {}) + let extendedQuery = { ...query } + extensionValues.forEach(({ operator, field, value }) => { + extendedQuery[operator] = { + ...extendedQuery[operator], + [field]: value, + } + }) + + if (JSON.stringify(query) !== JSON.stringify(extendedQuery)) { + query = extendedQuery + } + }
diff --git a/packages/client/src/components/app/DateRangePicker.svelte b/packages/client/src/components/app/DateRangePicker.svelte index 9d725c634c..651a19abc4 100644 --- a/packages/client/src/components/app/DateRangePicker.svelte +++ b/packages/client/src/components/app/DateRangePicker.svelte @@ -3,7 +3,7 @@ import { getContext } from "svelte" import dayjs from "dayjs" import utc from "dayjs/plugin/utc" - import { onMount } from "svelte" + import { onDestroy } from "svelte" dayjs.extend(utc) @@ -14,7 +14,14 @@ const component = getContext("component") const { styleable, ActionTypes, getAction } = getContext("sdk") - const setQuery = getAction(dataProvider?.id, ActionTypes.SetDataProviderQuery) + $: addExtension = getAction( + dataProvider?.id, + ActionTypes.AddDataProviderQueryExtension + ) + $: removeExtension = getAction( + dataProvider?.id, + ActionTypes.RemoveDataProviderQueryExtension + ) const options = [ "Last 1 day", "Last 7 days", @@ -25,44 +32,30 @@ ] let value = options.includes(defaultValue) ? defaultValue : "Last 30 days" - const updateDateRange = option => { - const query = dataProvider?.state?.query - if (!query || !setQuery) { - return - } + $: queryExtension = getQueryExtension(value) + $: addExtension?.($component.id, "range", field, queryExtension) - value = option + const getQueryExtension = value => { let low = dayjs.utc().subtract(1, "year") let high = dayjs.utc().add(1, "day") - if (option === "Last 1 day") { + if (value === "Last 1 day") { low = dayjs.utc().subtract(1, "day") - } else if (option === "Last 7 days") { + } else if (value === "Last 7 days") { low = dayjs.utc().subtract(7, "days") - } else if (option === "Last 30 days") { + } else if (value === "Last 30 days") { low = dayjs.utc().subtract(30, "days") - } else if (option === "Last 3 months") { + } else if (value === "Last 3 months") { low = dayjs.utc().subtract(3, "months") - } else if (option === "Last 6 months") { + } else if (value === "Last 6 months") { low = dayjs.utc().subtract(6, "months") } - // Update data provider query with the new filter - setQuery({ - ...query, - range: { - ...query.range, - [field]: { - high: high.format(), - low: low.format(), - }, - }, - }) + return { low: low.format(), high: high.format() } } - // Update the range on mount to the initial value - onMount(() => { - updateDateRange(value) + onDestroy(() => { + removeExtension?.($component.id) }) @@ -71,6 +64,6 @@ placeholder={null} {options} {value} - on:change={e => updateDateRange(e.detail)} + on:change={e => (value = e.detail)} />
diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js index 214a954929..740f279b36 100644 --- a/packages/client/src/constants.js +++ b/packages/client/src/constants.js @@ -25,7 +25,8 @@ export const UnsortableTypes = [ export const ActionTypes = { ValidateForm: "ValidateForm", RefreshDatasource: "RefreshDatasource", - SetDataProviderQuery: "SetDataProviderQuery", + AddDataProviderQueryExtension: "AddDataProviderQueryExtension", + RemoveDataProviderQueryExtension: "RemoveDataProviderQueryExtension", SetDataProviderSorting: "SetDataProviderSorting", ClearForm: "ClearForm", ChangeFormStep: "ChangeFormStep",