CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-03 10:36:59 +13:00
Code Issues Projects Releases Wiki Activity

Refactor inline searching to be a separate concept from normal filters, and optimise API usage across all datasources

Browse source
This commit is contained in:
Andrew Kingston 2023-10-13 19:06:53 +01:00
parent b337bd7435
commit e3d6a68ea1
7 changed files with 96 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/frontend-core/src/components/grid/stores/datasource.js
View file

@ -1,8 +1,9 @@
import { derived, get, writable } from "svelte/store"
import { derived, get } from "svelte/store"
import { getDatasourceDefinition } from "../../../fetch"
import { memo } from "../../../utils"
export const createStores = () => {
const definition = writable(null)
const definition = memo(null)
return {
definition,

7
packages/frontend-core/src/components/grid/stores/datasources/nonPlus.js
View file

@ -66,6 +66,8 @@ export const initialise = context => {
datasource,
sort,
filter,
inlineFilters,
allFilters,
nonPlus,
initialFilter,
initialSortColumn,
@ -87,6 +89,7 @@ export const initialise = context => {
// Wipe state
filter.set(get(initialFilter))
inlineFilters.set([])
sort.set({
column: get(initialSortColumn),
order: get(initialSortOrder) || "ascending",
@ -94,14 +97,14 @@ export const initialise = context => {
// Update fetch when filter changes
unsubscribers.push(
filter.subscribe($filter => {
allFilters.subscribe($allFilters => {
// Ensure we're updating the correct fetch
const $fetch = get(fetch)
if (!isSameDatasource($fetch?.options?.datasource, $datasource)) {
return
}
$fetch.update({
filter: $filter,
filter: $allFilters,
})
})
)

7
packages/frontend-core/src/components/grid/stores/datasources/table.js
View file

@ -71,6 +71,8 @@ export const initialise = context => {
datasource,
fetch,
filter,
inlineFilters,
allFilters,
sort,
table,
initialFilter,
@ -93,6 +95,7 @@ export const initialise = context => {
// Wipe state
filter.set(get(initialFilter))
inlineFilters.set([])
sort.set({
column: get(initialSortColumn),
order: get(initialSortOrder) || "ascending",
@ -100,14 +103,14 @@ export const initialise = context => {
// Update fetch when filter changes
unsubscribers.push(
filter.subscribe($filter => {
allFilters.subscribe($allFilters => {
// Ensure we're updating the correct fetch
const $fetch = get(fetch)
if ($fetch?.options?.datasource?.tableId !== $datasource.tableId) {
return
}
$fetch.update({
filter: $filter,
filter: $allFilters,
})
})
)

52
packages/frontend-core/src/components/grid/stores/datasources/viewV2.js
View file

@ -73,6 +73,8 @@ export const initialise = context => {
sort,
rows,
filter,
inlineFilters,
allFilters,
subscribe,
viewV2,
initialFilter,
@ -97,6 +99,7 @@ export const initialise = context => {
// Reset state for new view
filter.set(get(initialFilter))
inlineFilters.set([])
sort.set({
column: get(initialSortColumn),
order: get(initialSortOrder) || "ascending",
@ -143,21 +146,19 @@ export const initialise = context => {
order: $sort.order || "ascending",
},
})
await rows.actions.refreshData()
}
}
// Otherwise just update the fetch
else {
// Ensure we're updating the correct fetch
const $fetch = get(fetch)
if ($fetch?.options?.datasource?.tableId !== $datasource.tableId) {
return
}
$fetch.update({
sortOrder: $sort.order || "ascending",
sortColumn: $sort.column,
})
// Also update the fetch to ensure the new sort is respected.
// Ensure we're updating the correct fetch.
const $fetch = get(fetch)
if ($fetch?.options?.datasource?.tableId !== $datasource.tableId) {
return
}
$fetch.update({
sortOrder: $sort.order,
sortColumn: $sort.column,
})
})
)
@ -176,20 +177,25 @@ export const initialise = context => {
...$view,
query: $filter,
})
await rows.actions.refreshData()
}
}
// Otherwise just update the fetch
else {
// Ensure we're updating the correct fetch
const $fetch = get(fetch)
if ($fetch?.options?.datasource?.tableId !== $datasource.tableId) {
return
}
$fetch.update({
filter: $filter,
})
})
)
// Keep fetch up to date with filters.
// If we're able to save filters against the view then we only need to apply
// inline filters to the fetch, as saved filters are applied server side.
// If we can't save filters, then all filters must be applied to the fetch.
unsubscribers.push(
allFilters.subscribe($allFilters => {
// Ensure we're updating the correct fetch
const $fetch = get(fetch)
if ($fetch?.options?.datasource?.tableId !== $datasource.tableId) {
return
}
$fetch.update({
filter: $allFilters,
})
})
)

34
packages/frontend-core/src/components/grid/stores/filter.js
View file

@ -1,4 +1,4 @@
import { writable, get } from "svelte/store"
import { writable, get, derived } from "svelte/store"
import { FieldType } from "@budibase/types"
export const createStores = context => {
@ -6,14 +6,31 @@ export const createStores = context => {
// Initialise to default props
const filter = writable(get(props).initialFilter)
const inlineFilters = writable([])
return {
filter,
inlineFilters,
}
}
export const deriveStores = context => {
const { filter, inlineFilters } = context
const allFilters = derived(
[filter, inlineFilters],
([$filter, $inlineFilters]) => {
return [...($filter || []), ...$inlineFilters]
}
)
return {
allFilters,
}
}
export const createActions = context => {
const { filter } = context
const { filter, inlineFilters } = context
const addInlineFilter = (column, value) => {
const filterId = `inline-${column.name}`
@ -38,16 +55,15 @@ export const createActions = context => {
}
// Add this filter
filter.update($filter => {
// Remove any existing inline filter
if ($filter?.length) {
$filter = $filter?.filter(x => x.id !== filterId)
}
inlineFilters.update($inlineFilters => {
// Remove any existing inline filter for this column
$inlineFilters = $inlineFilters?.filter(x => x.id !== filterId)
// Add new one if a value exists
if (value) {
$filter = [...($filter || []), inlineFilter]
$inlineFilters.push(inlineFilter)
}
return $filter
return $inlineFilters
})
}

6
packages/frontend-core/src/components/grid/stores/rows.js
View file

@ -68,7 +68,7 @@ export const createActions = context => {
rows,
rowLookupMap,
definition,
filter,
allFilters,
loading,
sort,
datasource,
@ -111,7 +111,7 @@ export const createActions = context => {
// Tick to allow other reactive logic to update stores when datasource changes
// before proceeding. This allows us to wipe filters etc if needed.
await tick()
const $filter = get(filter)
const $allFilters = get(allFilters)
const $sort = get(sort)
// Determine how many rows to fetch per page
@ -123,7 +123,7 @@ export const createActions = context => {
API,
datasource: $datasource,
options: {
filter: $filter,
filter: $allFilters,
sortColumn: $sort.column,
sortOrder: $sort.order,
limit,

29
packages/frontend-core/src/fetch/ViewV2Fetch.js
View file

@ -35,9 +35,32 @@ export default class ViewV2Fetch extends DataFetch {
}
async getData() {
const { datasource, limit, sortColumn, sortOrder, sortType, paginate } =
this.options
const { cursor, query } = get(this.store)
const {
datasource,
limit,
sortColumn,
sortOrder,
sortType,
paginate,
filter,
} = this.options
const { cursor, query, definition } = get(this.store)
// If sort params are not defined, update options to store the sorting
// params built in to this view. This ensures that we can accurately
// compare old and new sorting params and skip a redundant API call.
if (!sortColumn && definition.sort?.field) {
this.options.sortColumn = definition.sort.field
this.options.sortOrder = definition.sort.order
}
// If sort params are not defined, update options to store the sorting
// params built in to this view. This ensures that we can accurately
// compare old and new sorting params and skip a redundant API call.
if (!filter?.length && definition.query?.length) {
this.options.filter = definition.query
}
try {
const res = await this.API.viewV2.fetch({
viewId: datasource.id,