MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Updates to filter UI and API requests across budibase

This commit is contained in:
Dean 2024-09-09 16:36:31 +01:00
parent b84c2e2adb
commit 11b146fcbf
32 changed files with 1300 additions and 832 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/backend-core/src/users/users.ts
View File

@ -17,11 +17,8 @@ import {
ContextUser,
CouchFindOptions,
DatabaseQueryOpts,
SearchFilters,
SearchUsersRequest,
User,
BasicOperator,
ArrayOperator,
} from "@budibase/types"
import * as context from "../context"
import { getGlobalDB } from "../context"
@ -45,32 +42,6 @@ function removeUserPassword(users: User | User[]) {
return users
}
export function isSupportedUserSearch(query: SearchFilters) {
const allowed = [
{ op: BasicOperator.STRING, key: "email" },
{ op: BasicOperator.EQUAL, key: "_id" },
{ op: ArrayOperator.ONE_OF, key: "_id" },
]
for (let [key, operation] of Object.entries(query)) {
if (typeof operation !== "object") {
return false
}
const fields = Object.keys(operation || {})
// this filter doesn't contain options - ignore
if (fields.length === 0) {
continue
}
const allowedOperation = allowed.find(
allow =>
allow.op === key && fields.length === 1 && fields[0] === allow.key
)
if (!allowedOperation) {
return false
}
}
return true
}
export async function bulkGetGlobalUsersById(
userIds: string[],
opts?: GetOpts

36
packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
View File

@ -62,6 +62,7 @@
} from "@budibase/types"
import { FIELDS } from "constants/backend"
import PropField from "./PropField.svelte"
import { utils } from "@budibase/shared-core"
export let block
export let testData
@ -95,8 +96,14 @@
$: memoEnvVariables.set($environment.variables)
$: memoBlock.set(block)
$: filters = lookForFilters(schemaProperties) || []
$: tempFilters = filters
$: filters = lookForFilters(schemaProperties)
$: filterCount =
filters?.groups?.reduce((acc, group) => {
acc = acc += group?.filters?.length || 0
return acc
}, 0) || 0
$: tempFilters = cloneDeep(filters)
$: stepId = $memoBlock.stepId
$: automationBindings = getAvailableBindings(
@ -768,14 +775,13 @@
break
}
}
return filters || []
return utils.processSearchFilters(filters)
}
function saveFilters(key) {
const filters = QueryUtils.buildQuery(tempFilters)
const query = QueryUtils.buildQuery(tempFilters)
onChange({
[key]: filters,
[key]: query,
[`${key}-def`]: tempFilters, // need to store the builder definition in the automation
})
@ -1004,18 +1010,24 @@
</div>
</div>
{:else if value.customType === AutomationCustomIOType.FILTERS || value.customType === AutomationCustomIOType.TRIGGER_FILTER}
<ActionButton fullWidth on:click={drawer.show}
>{filters.length > 0
? "Update Filter"
: "No Filter set"}</ActionButton
<ActionButton fullWidth on:click={drawer.show}>
{filterCount > 0 ? "Update Filter" : "No Filter set"}
</ActionButton>
<Drawer
bind:this={drawer}
title="Filtering"
forceModal
on:drawerShow={() => {
tempFilters = filters
}}
>
<Drawer bind:this={drawer} title="Filtering">
<Button cta slot="buttons" on:click={() => saveFilters(key)}>
Save
</Button>
<DrawerContent slot="body">
<FilterBuilder
{filters}
filters={tempFilters}
{bindings}
{schemaFields}
datasource={{ type: "table", tableId }}

10
packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
View File

@ -233,6 +233,14 @@
)
dispatch("change", result)
}
/**
* Converts arrays into strings. The CodeEditor expects a string or encoded JS
* @param{object} fieldValue
*/
const drawerValue = fieldValue => {
return Array.isArray(fieldValue) ? fieldValue.join(",") : fieldValue
}
</script>
{#each schemaFields || [] as [field, schema]}
@ -257,7 +265,7 @@
panel={AutomationBindingPanel}
type={schema.type}
{schema}
value={editableRow[field]}
value={drawerValue(editableRow[field])}
on:change={e =>
onChange({
row: {

35
packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
View File

@ -5,6 +5,7 @@
import { getUserBindings } from "dataBinding"
import { makePropSafe } from "@budibase/string-templates"
import { search } from "@budibase/frontend-core"
import { utils } from "@budibase/shared-core"
import { tables } from "stores/builder"
export let schema
@ -16,15 +17,19 @@
let drawer
$: tempValue = filters || []
$: localFilters = utils.processSearchFilters(filters)
$: schemaFields = search.getFields(
$tables.list,
Object.values(schema || {}),
{ allowLinks: true }
)
$: text = getText(filters)
$: selected = tempValue.filter(x => !x.onEmptyFilter)?.length > 0
$: filterCount =
localFilters?.groups?.reduce((acc, group) => {
return (acc += group.filters.filter(filter => filter.field).length)
}, 0) || 0
$: bindings = [
{
type: "context",
@ -38,28 +43,32 @@
},
...getUserBindings(),
]
const getText = filters => {
const count = filters?.filter(filter => filter.field)?.length
return count ? `Filter (${count})` : "Filter"
}
</script>
<ActionButton icon="Filter" quiet {disabled} on:click={drawer.show} {selected}>
{text}
<ActionButton
icon="Filter"
quiet
{disabled}
on:click={drawer.show}
selected={filterCount > 0}
>
{filterCount ? `Filter (${filterCount})` : "Filter"}
</ActionButton>
<Drawer
bind:this={drawer}
title="Filtering"
on:drawerHide
on:drawerShow
on:drawerShow={() => {
localFilters = utils.processSearchFilters(filters)
}}
forceModal
>
<Button
cta
slot="buttons"
on:click={() => {
dispatch("change", tempValue)
dispatch("change", localFilters)
drawer.hide()
}}
>
@ -67,10 +76,10 @@
</Button>
<DrawerContent slot="body">
<FilterBuilder
{filters}
filters={localFilters}
{schemaFields}
datasource={{ type: "table", tableId }}
on:change={e => (tempValue = e.detail)}
on:change={e => (localFilters = e.detail)}
{bindings}
/>
</DrawerContent>

83
packages/builder/src/components/design/settings/controls/FilterEditor/FilterBuilder.svelte
View File

@ -1,87 +1,32 @@
<script>
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
import { dataFilters } from "@budibase/shared-core"
import { FilterBuilder } from "@budibase/frontend-core"
import { CoreFilterBuilder } from "@budibase/frontend-core"
import { tables } from "stores/builder"
import { createEventDispatcher, onMount } from "svelte"
import {
runtimeToReadableBinding,
readableToRuntimeBinding,
} from "dataBinding"
export let schemaFields
export let filters = []
export let filters
export let bindings = []
export let panel = ClientBindingPanel
export let allowBindings = true
export let datasource
export let showFilterEmptyDropdown
const dispatch = createEventDispatcher()
let rawFilters
$: parseFilters(rawFilters)
$: dispatch("change", enrichFilters(rawFilters))
// Remove field key prefixes and determine which behaviours to use
const parseFilters = filters => {
rawFilters = (filters || []).map(filter => {
const { field } = filter
let newFilter = { ...filter }
delete newFilter.allOr
newFilter.field = dataFilters.removeKeyNumbering(field)
return newFilter
})
}
onMount(() => {
parseFilters(filters)
rawFilters.forEach(filter => {
filter.type =
schemaFields.find(field => field.name === filter.field)?.type ||
filter.type
})
})
// Add field key prefixes and a special metadata filter object to indicate
// how to handle filter behaviour
const enrichFilters = rawFilters => {
let count = 1
return rawFilters
.filter(filter => filter.field)
.map(filter => ({
...filter,
field: `${count++}:${filter.field}`,
}))
.concat(...rawFilters.filter(filter => !filter.field))
}
</script>
<FilterBuilder
bind:filters={rawFilters}
<CoreFilterBuilder
toReadable={runtimeToReadableBinding}
toRuntime={readableToRuntimeBinding}
behaviourFilters={true}
tables={$tables.list}
{filters}
{panel}
{schemaFields}
{datasource}
{allowBindings}
{showFilterEmptyDropdown}
>
<div slot="filtering-hero-content" />
<DrawerBindableInput
let:filter
slot="binding"
disabled={filter.noValue}
title={filter.field}
value={filter.value}
placeholder="Value"
{panel}
{bindings}
on:change={event => {
const indexToUpdate = rawFilters.findIndex(f => f.id === filter.id)
rawFilters[indexToUpdate] = {
...rawFilters[indexToUpdate],
value: event.detail,
}
}}
/>
</FilterBuilder>
{bindings}
on:change
/>

40
packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte
View File

@ -5,9 +5,14 @@
Button,
Drawer,
DrawerContent,
Helpers,
} from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
import {
getDatasourceForProvider,
getSchemaForDatasource,
readableToRuntimeBinding,
} from "dataBinding"
import FilterBuilder from "./FilterBuilder.svelte"
import { tables, selectedScreen } from "stores/builder"
import { search } from "@budibase/frontend-core"
@ -21,7 +26,7 @@
let drawer
$: tempValue = value
$: localFilters = Helpers.cloneDeep(value)
$: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
$: dsSchema = getSchemaForDatasource($selectedScreen, datasource)?.schema
$: schemaFields = search.getFields(
@ -29,19 +34,24 @@
Object.values(schema || dsSchema || {}),
{ allowLinks: true }
)
$: text = getText(value?.filter(filter => filter.field))
$: text = getText(value?.groups)
async function saveFilter() {
dispatch("change", tempValue)
dispatch("change", localFilters)
notifications.success("Filters saved")
drawer.hide()
}
const getText = filters => {
if (!filters?.length) {
const getText = (filterGroups = []) => {
const allFilters = filterGroups.reduce((acc, group) => {
return (acc += group.filters.filter(filter => filter.field).length)
}, 0)
if (allFilters === 0) {
return "No filters set"
} else {
return `${filters.length} filter${filters.length === 1 ? "" : "s"} set`
return `${allFilters} filter${allFilters === 1 ? "" : "s"} set`
}
}
</script>
@ -49,15 +59,25 @@
<div class="filter-editor">
<ActionButton on:click={drawer.show}>{text}</ActionButton>
</div>
<Drawer bind:this={drawer} title="Filtering" on:drawerHide on:drawerShow>
<Drawer
bind:this={drawer}
title="Filtering"
on:drawerHide
on:drawerShow={() => {
// Reset to the currently available value.
localFilters = Helpers.cloneDeep(value)
}}
>
<Button cta slot="buttons" on:click={saveFilter}>Save</Button>
<DrawerContent slot="body">
<FilterBuilder
filters={value}
filters={localFilters}
{bindings}
{schemaFields}
{datasource}
on:change={e => (tempValue = e.detail)}
on:change={e => {
localFilters = e.detail
}}
/>
</DrawerContent>
</Drawer>

30
packages/builder/src/components/design/settings/controls/GridColumnConfiguration/GridColumnConfiguration.svelte
View File

@ -6,6 +6,7 @@
import FieldSetting from "./FieldSetting.svelte"
import PrimaryColumnFieldSetting from "./PrimaryColumnFieldSetting.svelte"
import getColumns from "./getColumns.js"
import InfoDisplay from "pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
export let value
export let componentInstance
@ -58,16 +59,25 @@
</div>
</div>
{/if}
<DraggableList
on:change={e => columns.updateSortable(e.detail)}
on:itemChange={e => columns.update(e.detail)}
items={columns.sortable}
listItemKey={"_id"}
listType={FieldSetting}
listTypeProps={{
bindings,
}}
/>
{#if columns?.sortable?.length}
<DraggableList
on:change={e => columns.updateSortable(e.detail)}
on:itemChange={e => columns.update(e.detail)}
items={columns.sortable}
listItemKey={"_id"}
listType={FieldSetting}
listTypeProps={{
bindings,
}}
/>
{:else}
<InfoDisplay
body={datasource?.type !== "custom"
? "No available columns"
: "No available columns for JSON/CSV data sources"}
/>
{/if}
<style>
.right-content {

5
packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
View File

@ -243,11 +243,14 @@
{/if}
{:else if (type === FieldType.BB_REFERENCE || type === FieldType.BB_REFERENCE_SINGLE) && condition.valueType === type}
<FilterUsers
bind:value={condition.referenceValue}
value={condition.referenceValue}
multiselect={[
Constants.OperatorOptions.In.value,
Constants.OperatorOptions.ContainsAny.value,
].includes(condition.operator)}
on:change={e => {
condition.referenceValue = e.detail
}}
disabled={condition.noValue}
type={condition.valueType}
/>

13
packages/builder/src/stores/builder/components.js
View File

@ -29,8 +29,9 @@ import {
DB_TYPE_EXTERNAL,
} from "constants/backend"
import BudiStore from "../BudiStore"
import { Utils, Constants } from "@budibase/frontend-core"
import { Utils } from "@budibase/frontend-core"
import { FieldType } from "@budibase/types"
import { utils } from "@budibase/shared-core"
export const INITIAL_COMPONENTS_STATE = {
components: {},
@ -204,18 +205,11 @@ export class ComponentStore extends BudiStore {
const filterableTypes = def.settings.filter(setting =>
setting?.type?.startsWith("filter")
)
// Map this?
for (let setting of filterableTypes) {
const updateFilter = Utils.migrateSearchFilters(
enrichedComponent[setting.key] = utils.processSearchFilters(
enrichedComponent[setting.key]
)
// DEAN - switch to real value when complete
if (updateFilter) {
enrichedComponent[setting.key + "_x"] = updateFilter
}
}
return migrated
}
@ -581,7 +575,6 @@ export class ComponentStore extends BudiStore {
const patchResult = patchFn(component, screen)
// Post processing
// DEAN - SKIP ON SAVE FOR THE MOMENT
const migrated = null
this.migrateSettings(component)

14
packages/builder/src/stores/portal/featureFlags.js Normal file
View File

@ -0,0 +1,14 @@
import { derived } from "svelte/store"
import { auth } from "stores/portal"
export const INITIAL_FEATUREFLAG_STATE = {
SQS: false,
DEFAULT_VALUES: false,
}
export const featureFlags = derived([auth], ([$auth]) => {
return {
...INITIAL_FEATUREFLAG_STATE,
...($auth?.user?.flags || {}),
}
})

1
packages/builder/src/stores/portal/index.js
View File

@ -19,5 +19,6 @@ export { features } from "./features"
export { themeStore } from "./theme"
export { temporalStore } from "./temporal"
export { navigation } from "./navigation"
export { featureFlags } from "./featureFlags"
export const sideBarCollapsed = writable(false)

3
packages/client/manifest.json
View File

@ -5101,7 +5101,8 @@
{
"type": "filter",
"label": "Filtering",
"key": "filter"
"key": "filter",
"resetOn": "dataSource"
},
{
"type": "field/sortable",

31
packages/client/src/components/app/DataProvider.svelte
View File

@ -1,7 +1,8 @@
<script>
import { getContext } from "svelte"
import { Pagination, ProgressCircle } from "@budibase/bbui"
import { Pagination, ProgressCircle, Helpers } from "@budibase/bbui"
import { fetchData, QueryUtils } from "@budibase/frontend-core"
import { LogicalOperator, EmptyFilterOption } from "@budibase/types"
export let dataSource
export let filter
@ -16,10 +17,16 @@
let interval
let queryExtensions = {}
let localFilters
$: if (filter) {
localFilters = Helpers.cloneDeep(filter)
}
$: defaultQuery = QueryUtils.buildQuery(localFilters)
// We need to manage our lucene query manually as we want to allow components
// to extend it
$: defaultQuery = QueryUtils.buildQuery(filter)
$: query = extendQuery(defaultQuery, queryExtensions)
$: fetch = createFetch(dataSource)
$: fetch.update({
@ -124,17 +131,15 @@
}
const extendQuery = (defaultQuery, extensions) => {
const extensionValues = Object.values(extensions || {})
let extendedQuery = { ...defaultQuery }
extensionValues.forEach(extension => {
Object.entries(extension || {}).forEach(([operator, fields]) => {
extendedQuery[operator] = {
...extendedQuery[operator],
...fields,
}
})
})
return extendedQuery
return {
[LogicalOperator.AND]: {
conditions: [
...(defaultQuery ? [defaultQuery] : []),
...Object.values(extensions || {}),
],
},
onEmptyFilter: EmptyFilterOption.RETURN_NONE,
}
}
const setUpAutoRefresh = autoRefresh => {

40
packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte
View File

@ -1,9 +1,12 @@
<script>
import { get } from "svelte/store"
import { getContext, onDestroy } from "svelte"
import { ModalContent, Modal } from "@budibase/bbui"
import FilterModal from "./FilterModal.svelte"
import { QueryUtils, Constants } from "@budibase/frontend-core"
import { ModalContent, Modal, Helpers } from "@budibase/bbui"
import {
QueryUtils,
Constants,
CoreFilterBuilder,
} from "@budibase/frontend-core"
import Button from "../Button.svelte"
export let dataProvider
@ -15,14 +18,15 @@
getContext("sdk")
let modal
let tmpFilters = []
let filters = []
let editableFilters
let filters
let schemaLoaded = false,
schema
$: dataProviderId = dataProvider?.id
$: datasource = dataProvider?.datasource
$: isDSPlus = ["table", "link", "viewV2"].includes(datasource?.type)
$: addExtension = getAction(
dataProviderId,
ActionTypes.AddDataProviderQueryExtension
@ -34,10 +38,15 @@
$: fetchSchema(datasource)
$: schemaFields = getSchemaFields(schema, allowedFields)
// Add query extension to data provider
$: filterCount = filters?.groups?.reduce((acc, group) => {
acc += group?.filters?.length || 0
return acc
}, 0)
$: {
if (filters?.length) {
if (filterCount) {
const queryExtension = QueryUtils.buildQuery(filters)
delete queryExtension.onEmptyFilter
addExtension?.($component.id, queryExtension)
} else {
removeExtension?.($component.id)
@ -80,12 +89,13 @@
if (get(builderStore).inBuilder) {
return
}
tmpFilters = [...filters]
editableFilters = filters ? Helpers.cloneDeep(filters) : null
modal.show()
}
const updateQuery = () => {
filters = [...tmpFilters]
filters = Helpers.cloneDeep(editableFilters)
}
onDestroy(() => {
@ -101,12 +111,20 @@
{size}
type="secondary"
quiet
active={filters?.length > 0}
active={filters?.groups?.length > 0}
/>
<Modal bind:this={modal}>
<ModalContent title="Edit filters" size="XL" onConfirm={updateQuery}>
<FilterModal bind:filters={tmpFilters} {schemaFields} {datasource} />
<CoreFilterBuilder
on:change={e => {
editableFilters = e.detail
}}
filters={editableFilters}
{schemaFields}
{datasource}
filtersLabel={null}
/>
</ModalContent>
</Modal>
{/if}

14
packages/client/src/components/app/dynamic-filter/FilterModal.svelte
View File

@ -1,14 +0,0 @@
<script>
import { FilterBuilder } from "@budibase/frontend-core"
export let schemaFields
export let filters = []
export let datasource
</script>
<FilterBuilder bind:filters {schemaFields} {datasource} filtersLabel={null}>
<div slot="filtering-hero-content">
Results are filtered to only those which match all of the following
constraints.
</div>
</FilterBuilder>

505
packages/frontend-core/src/components/CoreFilterBuilder.svelte Normal file
View File

@ -0,0 +1,505 @@
<script>
import {
Body,
Button,
Icon,
Layout,
Select,
Helpers,
ActionButton,
} from "@budibase/bbui"
import {
FieldType,
FilterGroupLogicalOperator,
EmptyFilterOption,
} from "@budibase/types"
import { QueryUtils, Constants } from "@budibase/frontend-core"
import { getContext, createEventDispatcher } from "svelte"
import FilterField from "./FilterField.svelte"
const dispatch = createEventDispatcher()
const {
OperatorOptions,
DEFAULT_BB_DATASOURCE_ID,
FilterOperator,
OnEmptyFilter,
FilterValueType,
} = Constants
export let schemaFields
export let filters
export let tables = []
export let datasource
export let behaviourFilters = false
export let allowBindings = false
// Review
export let bindings
export let panel
export let toReadable
export let toRuntime
$: editableFilters = filters
? Helpers.cloneDeep(filters)
: {
logicalOperator: FilterGroupLogicalOperator.ALL,
onEmptyFilter: EmptyFilterOption.RETURN_NONE,
groups: [],
}
$: {
if (
tables.find(
table =>
table._id === datasource?.tableId &&
table.sourceId === DEFAULT_BB_DATASOURCE_ID
) &&
!schemaFields.some(field => field.name === "_id")
) {
schemaFields = [...schemaFields, { name: "_id", type: "string" }]
}
}
const filterOperatorOptions = Object.values(FilterOperator).map(entry => {
return { value: entry, label: Helpers.capitalise(entry) }
})
const onEmptyOptions = Object.values(OnEmptyFilter).map(entry => {
return { value: entry, label: Helpers.capitalise(entry) }
})
const context = getContext("context")
$: fieldOptions = (schemaFields || []).map(field => ({
label: field.displayName || field.name,
value: field.name,
}))
const onFieldChange = filter => {
const previousType = filter.type
sanitizeTypes(filter)
sanitizeOperator(filter)
sanitizeValue(filter, previousType)
}
const onOperatorChange = filter => {
sanitizeOperator(filter)
sanitizeValue(filter, filter.type)
}
const getSchema = filter => {
return schemaFields.find(field => field.name === filter.field)
}
const getValidOperatorsForType = filter => {
if (!filter?.field && !filter?.name) {
return []
}
return QueryUtils.getValidOperatorsForType(
filter,
filter.field || filter.name,
datasource
)
}
const sanitizeTypes = filter => {
// Update type based on field
const fieldSchema = schemaFields.find(x => x.name === filter.field)
filter.type = fieldSchema?.type
filter.subtype = fieldSchema?.subtype
filter.formulaType = fieldSchema?.formulaType
filter.constraints = fieldSchema?.constraints
// Update external type based on field
filter.externalType = getSchema(filter)?.externalType
}
const sanitizeOperator = filter => {
// Ensure a valid operator is selected
const operators = getValidOperatorsForType(filter).map(x => x.value)
if (!operators.includes(filter.operator)) {
filter.operator = operators[0] ?? OperatorOptions.Equals.value
}
// Update the noValue flag if the operator does not take a value
const noValueOptions = [
OperatorOptions.Empty.value,
OperatorOptions.NotEmpty.value,
]
filter.noValue = noValueOptions.includes(filter.operator)
}
const sanitizeValue = (filter, previousType) => {
// Check if the operator allows a value at all
if (filter.noValue) {
filter.value = null
return
}
// Ensure array values are properly set and cleared
if (Array.isArray(filter.value)) {
if (filter.valueType !== "Value" || filter.type !== FieldType.ARRAY) {
filter.value = null
}
} else if (
filter.type === FieldType.ARRAY &&
filter.valueType === "Value"
) {
filter.value = []
} else if (
previousType !== filter.type &&
(previousType === FieldType.BB_REFERENCE ||
filter.type === FieldType.BB_REFERENCE)
) {
filter.value = filter.type === FieldType.ARRAY ? [] : null
}
}
const getGroupPrefix = groupIdx => {
if (groupIdx == 0) {
return "Where"
}
const operatorMapping = {
[FilterOperator.ANY]: "or",
[FilterOperator.ALL]: "and",
}
return operatorMapping[editableFilters.logicalOperator]
}
const onFilterFieldUpdate = (filter, groupIdx, filterIdx) => {
const updated = Helpers.cloneDeep(filter)
handleFilterChange({
groupIdx,
filterIdx,
filter: { ...updated },
})
}
const handleFilterChange = req => {
const {
groupIdx,
filterIdx,
filter,
group,
addFilter,
addGroup,
deleteGroup,
deleteFilter,
logicalOperator,
onEmptyFilter,
} = req
let editable = Helpers.cloneDeep(editableFilters)
let targetGroup = editable.groups?.[groupIdx]
let targetFilter = targetGroup?.filters?.[filterIdx]
if (targetFilter) {
if (deleteFilter) {
targetGroup.filters.splice(filterIdx, 1)
} else if (filter) {
targetGroup.filters[filterIdx] = filter
}
} else if (targetGroup) {
if (deleteGroup) {
editable.groups.splice(groupIdx, 1)
} else if (addFilter) {
targetGroup.filters.push({
valueType: FilterValueType.VALUE,
})
} else if (group) {
editable.groups[groupIdx] = {
...targetGroup,
...group,
}
}
} else if (addGroup) {
editable.groups.push({
logicalOperator: Constants.FilterOperator.ANY,
filters: [
{
valueType: FilterValueType.VALUE,
},
],
})
} else if (logicalOperator) {
editable = {
...editable,
logicalOperator,
}
} else if (onEmptyFilter) {
editable = {
...editable,
onEmptyFilter,
}
}
dispatch("change", editable)
}
</script>
<div class="container" class:mobile={$context?.device?.mobile}>
<Layout noPadding>
{#if fieldOptions?.length}
<slot name="filtering-hero-content" />
{#if editableFilters?.groups?.length}
<div class="global-filter-header">
<span>Show data which matches</span>
<span class="operator-picker">
<Select
value={editableFilters?.logicalOperator}
options={filterOperatorOptions}
getOptionLabel={opt => opt.label}
getOptionValue={opt => opt.value}
on:change={e => {
handleFilterChange({
logicalOperator: e.detail,
})
}}
placeholder={false}
/>
</span>
<span>of the following filter groups:</span>
</div>
{/if}
{#if editableFilters?.groups?.length}
<div class="filter-groups">
{#each editableFilters?.groups as group, groupIdx}
<div class="group">
<div class="group-header">
<div class="group-options">
<span>
{getGroupPrefix(groupIdx, editableFilters.logicalOperator)}
</span>
<span class="operator-picker">
<Select
value={group?.logicalOperator}
options={filterOperatorOptions}
getOptionLabel={opt => opt.label}
getOptionValue={opt => opt.value}
on:change={e => {
handleFilterChange({
groupIdx,
group: {
logicalOperator: e.detail,
},
})
}}
placeholder={false}
/>
</span>
<span>of the following filters are met:</span>
</div>
<div class="group-actions">
<Icon
name="Add"
hoverable
hoverColor="var(--ink)"
on:click={() => {
handleFilterChange({
groupIdx,
addFilter: true,
})
}}
/>
<Icon
name="Delete"
hoverable
hoverColor="var(--ink)"
on:click={() => {
handleFilterChange({
groupIdx,
deleteGroup: true,
})
}}
/>
</div>
</div>
<div class="filters">
{#each group.filters as filter, filterIdx}
<div class="filter">
<Select
value={filter.field}
options={fieldOptions}
on:change={e => {
const updated = { ...filter, field: e.detail }
onFieldChange(updated)
onFilterFieldUpdate(updated, groupIdx, filterIdx)
}}
placeholder="Column"
/>
<Select
value={filter.operator}
disabled={!filter.field}
options={getValidOperatorsForType(filter)}
on:change={e => {
const updated = { ...filter, operator: e.detail }
onOperatorChange(updated)
onFilterFieldUpdate(updated, groupIdx, filterIdx)
}}
placeholder={false}
/>
<FilterField
placeholder="Value"
{allowBindings}
{filter}
{schemaFields}
{bindings}
{panel}
{toReadable}
{toRuntime}
on:change={e => {
onFilterFieldUpdate(
{ ...filter, ...e.detail },
groupIdx,
filterIdx
)
}}
/>
<ActionButton
size="M"
icon="Delete"
on:click={() => {
handleFilterChange({
groupIdx,
filterIdx,
deleteFilter: true,
})
}}
/>
</div>
{/each}
</div>
</div>
{/each}
</div>
{/if}
<div class="filters-footer">
{#if behaviourFilters && editableFilters?.groups.length}
<div class="empty-filter">
<span>Return</span>
<span class="empty-filter-picker">
<Select
value={editableFilters?.onEmptyFilter}
options={onEmptyOptions}
getOptionLabel={opt => opt.label}
getOptionValue={opt => opt.value}
on:change={e => {
handleFilterChange({
onEmptyFilter: e.detail,
})
}}
placeholder={false}
/>
</span>
<span>when all filters are empty</span>
</div>
{/if}
<div class="add-group">
<Button
icon="AddCircle"
size="M"
secondary
on:click={() => {
handleFilterChange({
addGroup: true,
})
}}
>
Add filter group
</Button>
<a
href="https://docs.budibase.com/docs/searchfilter-data"
target="_blank"
>
<Icon
name="HelpOutline"
color="var(--spectrum-global-color-gray-600)"
/>
</a>
</div>
</div>
{:else}
<Body size="S">None of the table column can be used for filtering.</Body>
{/if}
</Layout>
</div>
<style>
.group-actions {
display: flex;
gap: var(--spacing-m);
}
.global-filter-header,
.empty-filter,
.group-options {
display: flex;
gap: var(--spacing-xl);
align-items: center;
}
.group-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.operator-picker {
width: 72px;
}
.empty-filter-picker {
width: 80px;
}
.filter-groups {
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
/* overflow-x: scroll; */
}
.group {
display: flex;
flex-direction: column;
gap: var(--spacing-l);
border: 1px solid var(--spectrum-global-color-gray-400);
border-radius: 4px;
padding: var(--spacing-xl);
}
.filters {
display: flex;
flex-direction: column;
gap: var(--spacing-l);
}
.filter {
display: grid;
gap: var(--spacing-l);
grid-template-columns: minmax(150px, 1fr) 170px 200px 40px 40px;
}
.filters-footer {
display: flex;
gap: var(--spacing-xl);
flex-direction: column;
}
.add-group {
display: flex;
gap: var(--spacing-m);
align-items: center;
}
.container {
width: 100%;
}
</style>

379
packages/frontend-core/src/components/FilterBuilder.svelte
View File

@ -1,379 +0,0 @@
<script>
import {
Body,
Button,
Combobox,
DatePicker,
Icon,
Input,
Layout,
Select,
Label,
Multiselect,
} from "@budibase/bbui"
import { ArrayOperator, FieldType } from "@budibase/types"
import { generate } from "shortid"
import { QueryUtils, Constants } from "@budibase/frontend-core"
import { getContext } from "svelte"
import FilterUsers from "./FilterUsers.svelte"
const { OperatorOptions, DEFAULT_BB_DATASOURCE_ID } = Constants
export let schemaFields
export let filters = []
export let tables = []
export let datasource
export let behaviourFilters = false
export let allowBindings = false
export let filtersLabel = "Filters"
export let showFilterEmptyDropdown = true
$: {
if (
tables.find(
table =>
table._id === datasource?.tableId &&
table.sourceId === DEFAULT_BB_DATASOURCE_ID
) &&
!schemaFields.some(field => field.name === "_id")
) {
schemaFields = [...schemaFields, { name: "_id", type: "string" }]
}
}
$: matchAny = filters?.find(filter => filter.operator === "allOr") != null
$: onEmptyFilter =
filters?.find(filter => filter.onEmptyFilter)?.onEmptyFilter ?? "all"
$: fieldFilters = filters.filter(
filter => filter.operator !== "allOr" && !filter.onEmptyFilter
)
const behaviourOptions = [
{ value: "and", label: "Match all filters" },
{ value: "or", label: "Match any filter" },
]
const onEmptyOptions = [
{ value: "all", label: "Return all table rows" },
{ value: "none", label: "Return no rows" },
]
const context = getContext("context")
$: fieldOptions = (schemaFields || []).map(field => ({
label: field.displayName || field.name,
value: field.name,
}))
const addFilter = () => {
filters = [
...(filters || []),
{
id: generate(),
field: null,
operator: OperatorOptions.Equals.value,
value: null,
valueType: "Value",
},
]
}
const removeFilter = id => {
filters = filters.filter(field => field.id !== id)
// Clear all filters when no fields are specified
if (filters.length === 1 && filters[0].onEmptyFilter) {
filters = []
}
}
const duplicateFilter = id => {
const existingFilter = filters.find(filter => filter.id === id)
const duplicate = { ...existingFilter, id: generate() }
filters = [...filters, duplicate]
}
const onFieldChange = filter => {
const previousType = filter.type
sanitizeTypes(filter)
sanitizeOperator(filter)
sanitizeValue(filter, previousType)
}
const onOperatorChange = filter => {
sanitizeOperator(filter)
sanitizeValue(filter, filter.type)
}
const onValueTypeChange = filter => {
sanitizeValue(filter)
}
const getFieldOptions = field => {
const schema = schemaFields.find(x => x.name === field)
return schema?.constraints?.inclusion || []
}
const getSchema = filter => {
return schemaFields.find(field => field.name === filter.field)
}
const getValidOperatorsForType = filter => {
if (!filter?.field && !filter?.name) {
return []
}
return QueryUtils.getValidOperatorsForType(
filter,
filter.field || filter.name,
datasource
)
}
$: valueTypeOptions = allowBindings ? ["Value", "Binding"] : ["Value"]
const sanitizeTypes = filter => {
// Update type based on field
const fieldSchema = schemaFields.find(x => x.name === filter.field)
filter.type = fieldSchema?.type
filter.subtype = fieldSchema?.subtype
filter.formulaType = fieldSchema?.formulaType
filter.constraints = fieldSchema?.constraints
// Update external type based on field
filter.externalType = getSchema(filter)?.externalType
}
const sanitizeOperator = filter => {
// Ensure a valid operator is selected
const operators = getValidOperatorsForType(filter).map(x => x.value)
if (!operators.includes(filter.operator)) {
filter.operator = operators[0] ?? OperatorOptions.Equals.value
}
// Update the noValue flag if the operator does not take a value
const noValueOptions = [
OperatorOptions.Empty.value,
OperatorOptions.NotEmpty.value,
]
filter.noValue = noValueOptions.includes(filter.operator)
}
const sanitizeValue = (filter, previousType) => {
// Check if the operator allows a value at all
if (filter.noValue) {
filter.value = null
return
}
// Ensure array values are properly set and cleared
if (Array.isArray(filter.value)) {
if (filter.valueType !== "Value" || filter.type !== FieldType.ARRAY) {
filter.value = null
}
} else if (
filter.type === FieldType.ARRAY &&
filter.valueType === "Value"
) {
filter.value = []
} else if (
previousType !== filter.type &&
(previousType === FieldType.BB_REFERENCE ||
filter.type === FieldType.BB_REFERENCE)
) {
filter.value = filter.type === FieldType.ARRAY ? [] : null
}
}
function handleAllOr(option) {
filters = filters.filter(f => f.operator !== "allOr")
if (option === "or") {
filters.push({ operator: "allOr" })
}
}
function handleOnEmptyFilter(value) {
filters = filters?.filter(filter => !filter.onEmptyFilter)
filters.push({ onEmptyFilter: value })
}
</script>
<div class="container" class:mobile={$context?.device?.mobile}>
<Layout noPadding>
{#if fieldOptions?.length}
<Body size="S">
{#if !fieldFilters?.length}
Add your first filter expression.
{:else}
<slot name="filtering-hero-content" />
{#if behaviourFilters}
<div class="behaviour-filters">
<Select
label="Behaviour"
value={matchAny ? "or" : "and"}
options={behaviourOptions}
getOptionLabel={opt => opt.label}
getOptionValue={opt => opt.value}
on:change={e => handleAllOr(e.detail)}
placeholder={null}
/>
{#if datasource?.type === "table" && showFilterEmptyDropdown}
<Select
label="When filter empty"
value={onEmptyFilter}
options={onEmptyOptions}
getOptionLabel={opt => opt.label}
getOptionValue={opt => opt.value}
on:change={e => handleOnEmptyFilter(e.detail)}
placeholder={null}
/>
{/if}
</div>
{/if}
{/if}
</Body>
{#if fieldFilters?.length}
<div>
{#if filtersLabel}
<div class="filter-label">
<Label>{filtersLabel}</Label>
</div>
{/if}
<div class="fields" class:with-bindings={allowBindings}>
{#each fieldFilters as filter}
<Select
bind:value={filter.field}
options={fieldOptions}
on:change={() => onFieldChange(filter)}
placeholder="Column"
/>
<Select
disabled={!filter.field}
options={getValidOperatorsForType(filter)}
bind:value={filter.operator}
on:change={() => onOperatorChange(filter)}
placeholder={null}
/>
{#if allowBindings}
<Select
disabled={filter.noValue || !filter.field}
options={valueTypeOptions}
bind:value={filter.valueType}
on:change={() => onValueTypeChange(filter)}
placeholder={null}
/>
{/if}
{#if allowBindings && filter.field && filter.valueType === "Binding"}
<slot name="binding" {filter} />
{:else if [FieldType.STRING, FieldType.LONGFORM, FieldType.NUMBER, FieldType.BIGINT, FieldType.FORMULA].includes(filter.type)}
<Input disabled={filter.noValue} bind:value={filter.value} />
{:else if filter.type === FieldType.ARRAY || (filter.type === FieldType.OPTIONS && filter.operator === ArrayOperator.ONE_OF)}
<Multiselect
disabled={filter.noValue}
options={getFieldOptions(filter.field)}
bind:value={filter.value}
/>
{:else if filter.type === FieldType.OPTIONS}
<Combobox
disabled={filter.noValue}
options={getFieldOptions(filter.field)}
bind:value={filter.value}
/>
{:else if filter.type === FieldType.BOOLEAN}
<Combobox
disabled={filter.noValue}
options={[
{ label: "True", value: "true" },
{ label: "False", value: "false" },
]}
bind:value={filter.value}
/>
{:else if filter.type === FieldType.DATETIME}
<DatePicker
disabled={filter.noValue}
enableTime={!getSchema(filter)?.dateOnly}
timeOnly={getSchema(filter)?.timeOnly}
bind:value={filter.value}
/>
{:else if [FieldType.BB_REFERENCE, FieldType.BB_REFERENCE_SINGLE].includes(filter.type)}
<FilterUsers
bind:value={filter.value}
multiselect={[
OperatorOptions.In.value,
OperatorOptions.ContainsAny.value,
].includes(filter.operator)}
disabled={filter.noValue}
type={filter.valueType}
/>
{:else}
<Input disabled />
{/if}
<div class="controls">
<Icon
name="Duplicate"
hoverable
size="S"
on:click={() => duplicateFilter(filter.id)}
/>
<Icon
name="Close"
hoverable
size="S"
on:click={() => removeFilter(filter.id)}
/>
</div>
{/each}
</div>
</div>
{/if}
<div>
<Button icon="AddCircle" size="M" secondary on:click={addFilter}>
Add filter
</Button>
</div>
{:else}
<Body size="S">None of the table column can be used for filtering.</Body>
{/if}
</Layout>
</div>
<style>
.container {
width: 100%;
}
.fields {
display: grid;
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
align-items: center;
grid-template-columns: 1fr 120px 1fr auto auto;
}
.fields.with-bindings {
grid-template-columns: minmax(150px, 1fr) 170px 120px minmax(150px, 1fr) 16px 16px;
}
.controls {
display: contents;
}
.container.mobile .fields {
grid-template-columns: 1fr;
}
.container.mobile .controls {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding: var(--spacing-s) 0;
gap: var(--spacing-s);
}
.filter-label {
margin-bottom: var(--spacing-s);
}
.behaviour-filters {
display: grid;
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
align-items: center;
grid-template-columns: minmax(150px, 1fr) 170px 120px minmax(150px, 1fr) 16px 16px;
}
</style>

318
packages/frontend-core/src/components/FilterField.svelte Normal file
View File

@ -0,0 +1,318 @@
<script>
import {
Combobox,
DatePicker,
Input,
Multiselect,
Icon,
Drawer,
Button,
} from "@budibase/bbui"
import FilterUsers from "./FilterUsers.svelte"
import { FieldType, ArrayOperator } from "@budibase/types"
import * as Constants from "../constants"
import { isJSBinding, findHBSBlocks } from "@budibase/string-templates"
import { createEventDispatcher } from "svelte"
export let filter
export let disabled = false
export let bindings = []
export let allowBindings = false
export let schemaFields
// Export these to another field type
export let panel
export let toReadable
export let toRuntime
// Only required if you're in the builder, which we aint.
const dispatch = createEventDispatcher()
const { OperatorOptions, FilterValueType } = Constants
let bindingDrawer
let fieldValue
$: fieldValue = filter?.value
$: readableValue = toReadable ? toReadable(bindings, fieldValue) : fieldValue
$: drawerValue = toDrawerValue(fieldValue)
$: isJS = isJSBinding(fieldValue)
$: fieldIsValid = isValid(fieldValue)
const getFieldOptions = field => {
const schema = schemaFields.find(x => x.name === field)
return schema?.constraints?.inclusion || []
}
const getSchema = filter => {
return schemaFields.find(field => field.name === filter.field)
}
const onChange = e => {
fieldValue = e.detail
dispatch("change", {
value: toRuntime(bindings, fieldValue),
})
}
const onConfirm = () => {
dispatch("change", {
value: fieldValue,
valueType: fieldValue ? FilterValueType.BINDING : FilterValueType.VALUE,
})
}
const isValidDate = value => {
return !value || !isNaN(new Date(value).valueOf())
}
const hasValidOptions = value => {
let links = []
if (Array.isArray(value)) {
links = value
} else if (value && typeof value === "string") {
links = value.split(",")
} else {
return !value
}
return links.every(link =>
getSchema(filter)?.constraints?.inclusion?.includes(link)
)
}
const isValidBoolean = value => {
return value === "false" || value === "true" || value == ""
}
const hasValidLinks = value => {
let links = []
if (Array.isArray(value)) {
links = value
} else if (value && typeof value === "string") {
links = value.split(",")
} else {
return !value
}
return links.every(link => link.startsWith("ro_"))
}
const validationMap = {
date: isValidDate,
datetime: isValidDate,
bb_reference: hasValidLinks,
bb_reference_single: hasValidLinks,
array: hasValidOptions,
longform: value => !isJSBinding(value),
options: value => !isJSBinding(value) && !findHBSBlocks(value)?.length,
boolean: isValidBoolean,
}
const isValid = value => {
const validate = validationMap[filter.type]
return validate ? validate(value) : true
}
/**
* Converts arrays into strings. The CodeEditor expects a string or encoded JS
* FilterValueType.VALUE values are emptied when first loaded in the binding drawer.
*
* @param{string} fieldValue
*/
const toDrawerValue = fieldValue => {
if (filter.valueType == FilterValueType.VALUE) {
return ""
}
return Array.isArray(fieldValue) ? fieldValue.join(",") : readableValue
}
</script>
<div>
<Drawer
on:drawerHide
on:drawerShow
bind:this={bindingDrawer}
title={filter.field}
forceModal
>
<Button
cta
slot="buttons"
on:click={() => {
onConfirm()
bindingDrawer.hide()
}}
>
Confirm
</Button>
<svelte:component
this={panel}
slot="body"
value={drawerValue}
allowJS
allowHelpers
allowHBS
on:change={onChange}
{bindings}
/>
</Drawer>
<div
class="field-wrap"
class:bindings={allowBindings}
class:valid={fieldIsValid}
>
<div class="field">
{#if filter.valueType === FilterValueType.BINDING}
<Input
disabled={filter.noValue}
readonly={true}
value={isJS ? "(JavaScript function)" : readableValue}
on:change={onChange}
/>
{:else}
<div>
{#if [FieldType.STRING, FieldType.LONGFORM, FieldType.NUMBER, FieldType.BIGINT, FieldType.FORMULA].includes(filter.type)}
<Input
disabled={filter.noValue}
value={readableValue}
on:change={onChange}
/>
{:else if filter.type === FieldType.ARRAY || (filter.type === FieldType.OPTIONS && filter.operator === ArrayOperator.ONE_OF)}
<Multiselect
disabled={filter.noValue}
options={getFieldOptions(filter.field)}
value={readableValue}
on:change={onChange}
/>
{:else if filter.type === FieldType.OPTIONS}
<Combobox
disabled={filter.noValue}
options={getFieldOptions(filter.field)}
value={readableValue}
on:change={onChange}
/>
{:else if filter.type === FieldType.BOOLEAN}
<Combobox
disabled={filter.noValue}
options={[
{ label: "True", value: "true" },
{ label: "False", value: "false" },
]}
value={readableValue}
on:change={onChange}
/>
{:else if filter.type === FieldType.DATETIME}
<DatePicker
disabled={filter.noValue}
enableTime={!getSchema(filter)?.dateOnly}
timeOnly={getSchema(filter)?.timeOnly}
value={readableValue}
on:change={onChange}
/>
{:else if [FieldType.BB_REFERENCE, FieldType.BB_REFERENCE_SINGLE].includes(filter.type)}
<FilterUsers
multiselect={[
OperatorOptions.In.value,
OperatorOptions.ContainsAny.value,
].includes(filter.operator)}
disabled={filter.noValue}
value={readableValue}
on:change={onChange}
/>
{:else}
<Input disabled />
{/if}
</div>
{/if}
</div>
<div class="binding-control">
<!-- needs field, operator -->
{#if !disabled && allowBindings && filter.field && !filter.noValue}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="icon"
class:binding={filter.valueType === "Binding"}
on:click={() => {
bindingDrawer.show()
}}
>
<Icon size="S" name="FlashOn" />
</div>
{/if}
</div>
</div>
</div>
<style>
.field-wrap {
display: flex;
}
.field {
flex: 1;
}
.field-wrap.bindings .field :global(.spectrum-Form-itemField),
.field-wrap.bindings .field :global(input),
.field-wrap.bindings .field :global(.spectrum-Picker) {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.field-wrap.bindings
.field
:global(.spectrum-InputGroup.spectrum-Datepicker) {
min-width: unset;
border-radius: 0px;
}
.field-wrap.bindings
.field
:global(
.spectrum-InputGroup.spectrum-Datepicker
.spectrum-Textfield-input.spectrum-InputGroup-input
) {
width: 100%;
}
.binding-control .icon {
border: 1px solid
var(
--spectrum-textfield-m-border-color,
var(--spectrum-alias-border-color)
);
border-left: 0px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
justify-content: center;
align-items: center;
display: flex;
flex-direction: row;
box-sizing: border-box;
width: 31px;
color: var(--spectrum-alias-text-color);
background-color: var(--spectrum-global-color-gray-75);
transition: background-color
var(--spectrum-global-animation-duration-100, 130ms),
box-shadow var(--spectrum-global-animation-duration-100, 130ms),
border-color var(--spectrum-global-animation-duration-100, 130ms);
height: calc(var(--spectrum-alias-item-height-m));
}
.binding-control .icon.binding {
color: var(--yellow);
}
.binding-control .icon:hover {
cursor: pointer;
background-color: var(--spectrum-global-color-gray-50);
border-color: var(--spectrum-alias-border-color-hover);
color: var(--spectrum-alias-text-color-hover);
}
.binding-control .icon.binding:hover {
color: var(--yellow);
}
</style>

3
packages/frontend-core/src/components/FilterUsers.svelte
View File

@ -27,7 +27,8 @@
<div class="user-control">
<svelte:component
this={component}
bind:value
{value}
on:change
autocomplete
{options}
getOptionLabel={option => option.email}

18
packages/frontend-core/src/components/grid/stores/filter.js
View File

@ -1,5 +1,5 @@
import { writable, get, derived } from "svelte/store"
import { FieldType } from "@budibase/types"
import { FieldType, FilterGroupLogicalOperator } from "@budibase/types"
export const createStores = context => {
const { props } = context
@ -16,11 +16,22 @@ export const createStores = context => {
export const deriveStores = context => {
const { filter, inlineFilters } = context
const allFilters = derived(
[filter, inlineFilters],
([$filter, $inlineFilters]) => {
return [...($filter || []), ...$inlineFilters]
const inlineFilterGroup = $inlineFilters?.length
? {
logicalOperator: FilterGroupLogicalOperator.ALL,
filters: [...($inlineFilters || [])],
}
: null
return inlineFilterGroup
? {
logicalOperator: FilterGroupLogicalOperator.ALL,
groups: [...($filter?.groups || []), inlineFilterGroup],
}
: $filter
}
)
@ -54,7 +65,6 @@ export const createActions = context => {
inlineFilter.operator = "contains"
}
// Add this filter
inlineFilters.update($inlineFilters => {
// Remove any existing inline filter for this column
$inlineFilters = $inlineFilters?.filter(x => x.id !== filterId)

2
packages/frontend-core/src/components/index.js
View File

@ -7,5 +7,5 @@ export { default as UserAvatars } from "./UserAvatars.svelte"
export { default as Updating } from "./Updating.svelte"
export { Grid } from "./grid"
export { default as ClientAppSkeleton } from "./ClientAppSkeleton.svelte"
export { default as FilterBuilder } from "./FilterBuilder.svelte"
export { default as CoreFilterBuilder } from "./CoreFilterBuilder.svelte"
export { default as FilterUsers } from "./FilterUsers.svelte"

8
packages/frontend-core/src/fetch/CustomFetch.js
View File

@ -1,6 +1,14 @@
import DataFetch from "./DataFetch.js"
export default class CustomFetch extends DataFetch {
determineFeatureFlags() {
return {
supportsSearch: false,
supportsSort: false,
supportsPagination: false,
}
}
// Gets the correct Budibase type for a JS value
getType(value) {
if (value == null) {

13
packages/frontend-core/src/fetch/DataFetch.js
View File

@ -2,6 +2,7 @@ import { writable, derived, get } from "svelte/store"
import { cloneDeep } from "lodash/fp"
import { QueryUtils } from "../utils"
import { convertJSONSchemaToTableSchema } from "../utils/json"
import { FilterGroupLogicalOperator, EmptyFilterOption } from "@budibase/types"
const { buildQuery, limit: queryLimit, runQuery, sort } = QueryUtils
@ -176,10 +177,16 @@ export default class DataFetch {
}
}
let defaultQuery = {
logicalOperator: FilterGroupLogicalOperator.ALL,
groups: [],
}
// Build the query
let query = this.options.query
if (!query) {
query = buildQuery(filter)
let query = this.features.supportsSearch ? this.options.query : null
if (!query && this.features.supportsSearch) {
query = buildQuery(filter || defaultQuery)
}
// Update store

12
packages/frontend-core/src/fetch/UserFetch.js
View File

@ -1,7 +1,7 @@
import { get } from "svelte/store"
import DataFetch from "./DataFetch.js"
import { TableNames } from "../constants"
import { QueryUtils } from "../utils"
import { utils } from "@budibase/shared-core"
export default class UserFetch extends DataFetch {
constructor(opts) {
@ -33,11 +33,11 @@ export default class UserFetch extends DataFetch {
let finalQuery
// convert old format to new one - we now allow use of the lucene format
const { appId, paginated, ...rest } = query
if (!QueryUtils.hasFilters(query) && rest.email != null) {
finalQuery = { string: { email: rest.email } }
} else {
finalQuery = rest
}
finalQuery = utils.isSupportedUserSearch(rest)
? query
: { string: { email: null } }
try {
const opts = {
bookmark: cursor,

6
packages/frontend-core/src/fetch/ViewV2Fetch.js
View File

@ -1,5 +1,6 @@
import DataFetch from "./DataFetch.js"
import { get } from "svelte/store"
import { utils } from "@budibase/shared-core"
export default class ViewV2Fetch extends DataFetch {
determineFeatureFlags() {
@ -53,7 +54,10 @@ export default class ViewV2Fetch extends DataFetch {
this.options.sortColumn = definition.sort.field
this.options.sortOrder = definition.sort.order
}
if (!filter?.length && definition.query?.length) {
const parsed = utils.processSearchFilters(filter)
if (!parsed?.groups?.length && definition.query?.groups?.length) {
this.options.filter = definition.query
}

137
packages/frontend-core/src/utils/utils.js
View File

@ -353,98 +353,57 @@ export const buildMultiStepFormBlockDefaultProps = props => {
}
}
/**
* Processes the filter config. Filters are migrated
* SearchFilter[] to SearchFilterGroup
*
* This is supposed to be in shared-core
* @param {Object[]} filter
*/
export const migrateSearchFilters = filters => {
const defaultCfg = {
logicalOperator: Constants.FilterOperator.ALL,
groups: [],
}
export const handleFilterChange = (req, filters) => {
const {
groupIdx,
filterIdx,
filter,
group,
addFilter,
addGroup,
deleteGroup,
deleteFilter,
logicalOperator,
onEmptyFilter,
} = req
const filterWhitelistKeys = [
"field",
"operator",
"valueType", // bb
"value",
"type",
"noValue", // bb
]
let editable = Helpers.cloneDeep(filters)
let targetGroup = editable.groups?.[groupIdx]
let targetFilter = targetGroup?.filters?.[filterIdx]
/**
* Review these
* externalType, formulaType, subtype
*/
if (Array.isArray(filters)) {
const baseGroup = {
filters: [],
logicalOperator: Constants.FilterOperator.ALL,
if (targetFilter) {
if (deleteFilter) {
targetGroup.filters.splice(filterIdx, 1)
} else if (filter) {
targetGroup.filters[filterIdx] = filter
}
const migratedSetting = filters.reduce((acc, filter) => {
// Sort the properties for easier debugging
// Remove unset values
const filterEntries = Object.entries(filter)
.sort((a, b) => {
return a[0].localeCompare(b[0])
})
.filter(x => x[1] ?? false)
// Scrub invalid filters
const { operator, onEmptyFilter, field, valueType } = filter
if (!field || !valueType) {
// THIS SCRUBS THE 2 GLOBALS
// return acc
} else if (targetGroup) {
if (deleteGroup) {
editable.groups.splice(groupIdx, 1)
} else if (addFilter) {
targetGroup.filters.push({})
} else if (group) {
editable.groups[groupIdx] = {
...targetGroup,
...group,
}
if (filterEntries.length == 1) {
console.log("### one entry ")
const [key, value] = filterEntries[0]
// Global
if (key === "onEmptyFilter") {
// unset otherwise, seems to be the default
acc.onEmptyFilter = value
} else if (key === "operator" && value === "allOr") {
// Group 1 logical operator
baseGroup.logicalOperator = Constants.FilterOperator.ANY
}
return acc
}
// Process settings??
const whiteListedFilterSettings = filterEntries.reduce((acc, entry) => {
const [key, value] = entry
if (filterWhitelistKeys.includes(key)) {
if (key === "field") {
acc.push([key, value.replace(/^[0-9]+:/, "")])
} else {
acc.push([key, value])
}
}
return acc
}, [])
const migratedFilter = Object.fromEntries(whiteListedFilterSettings)
baseGroup.filters.push(migratedFilter)
if (!acc.groups.length) {
// init the base group
acc.groups.push(baseGroup)
}
return acc
}, defaultCfg)
console.log("MIGRATED ", migratedSetting)
return migratedSetting
}
} else if (addGroup) {
editable.groups.push({
logicalOperator: Constants.FilterOperator.ANY,
filters: [{}],
})
} else if (logicalOperator) {
editable = {
...editable,
logicalOperator,
}
} else if (onEmptyFilter) {
editable = {
...editable,
onEmptyFilter,
}
}
return false
return editable
}

13
packages/server/src/api/controllers/row/views.ts
View File

@ -7,6 +7,7 @@ import {
RowSearchParams,
SearchFilterKey,
LogicalOperator,
SearchFilter,
} from "@budibase/types"
import { dataFilters } from "@budibase/shared-core"
import sdk from "../../../sdk"
@ -19,7 +20,7 @@ export async function searchView(
) {
const { viewId } = ctx.params
const view = await sdk.views.get(viewId)
const view: ViewV2 = await sdk.views.get(viewId)
if (!view) {
ctx.throw(404, `View ${viewId} not found`)
}
@ -35,7 +36,7 @@ export async function searchView(
// Enrich saved query with ephemeral query params.
// We prevent searching on any fields that are saved as part of the query, as
// that could let users find rows they should not be allowed to access.
let query = dataFilters.buildQuery(view.query || [])
let query: any = dataFilters.buildQuery(view.query ?? [])
if (body.query) {
// Delete extraneous search params that cannot be overridden
delete body.query.onEmptyFilter
@ -44,9 +45,15 @@ export async function searchView(
!isExternalTableID(view.tableId) &&
!(await features.flags.isEnabled("SQS"))
) {
// In the unlikely event that a Grouped Filter is in a non-SQS environment
// It needs to be ignored. Entirely
let queryFilters: SearchFilter[] = Array.isArray(view.query)
? view.query
: []
// Extract existing fields
const existingFields =
view.query
queryFilters
?.filter(filter => filter.field)
.map(filter => db.removeKeyNumbering(filter.field)) || []

177
packages/shared-core/src/filters.ts
View File

@ -24,6 +24,7 @@ import {
} from "@budibase/types"
import dayjs from "dayjs"
import { OperatorOptions, SqlNumberTypeRangeMap } from "./constants"
import { processSearchFilters } from "./utils"
import { deepGet, schema } from "./helpers"
import { isPlainObject, isEmpty } from "lodash"
import { decodeNonAscii } from "./helpers/schema"
@ -299,10 +300,6 @@ export class ColumnSplitter {
}
}
/*
separate into buildQuery and build filter?
*/
/**
* Builds a JSON query from the filter structure generated in the builder
* @param filter the builder filter structure
@ -323,13 +320,6 @@ const builderFilter = (expression: SearchFilter) => {
oneOf: {},
containsAny: {},
}
// DEAN -
// This is the chattiest service we have, pruning the requests
// of bloat should have meaningful impact
// Further validation in this area is a must
let { operator, field, type, value, externalType, onEmptyFilter } = expression
const queryOperator = operator as SearchFilterOperator
const isHbs =
@ -343,6 +333,13 @@ const builderFilter = (expression: SearchFilter) => {
query.onEmptyFilter = onEmptyFilter
return
}
// Default the value for noValue fields to ensure they are correctly added
// to the final query
if (queryOperator === "empty" || queryOperator === "notEmpty") {
value = null
}
if (
type === "datetime" &&
!isHbs &&
@ -426,131 +423,11 @@ const builderFilter = (expression: SearchFilter) => {
return query
}
export const buildQuery = (filter: SearchFilter[]) => {
//
let query: SearchFilters = {
string: {},
fuzzy: {},
range: {},
equal: {},
notEqual: {},
empty: {},
notEmpty: {},
contains: {},
notContains: {},
oneOf: {},
containsAny: {},
}
export const buildQuery = (filter: SearchFilterGroup | SearchFilter[]) => {
const parsedFilter = processSearchFilters(filter)
if (!Array.isArray(filter)) {
return query
}
// DEAN Replace with builderFilter
filter.forEach(expression => {
let { operator, field, type, value, externalType, onEmptyFilter } =
expression
const queryOperator = operator as SearchFilterOperator
const isHbs =
typeof value === "string" && (value.match(HBS_REGEX) || []).length > 0
// Parse all values into correct types
if (operator === "allOr") {
query.allOr = true
return
}
if (onEmptyFilter) {
query.onEmptyFilter = onEmptyFilter
return
}
if (
type === "datetime" &&
!isHbs &&
queryOperator !== "empty" &&
queryOperator !== "notEmpty"
) {
// Ensure date value is a valid date and parse into correct format
if (!value) {
return
}
try {
value = new Date(value).toISOString()
} catch (error) {
return
}
}
if (type === "number" && typeof value === "string" && !isHbs) {
if (queryOperator === "oneOf") {
value = value.split(",").map(item => parseFloat(item))
} else {
value = parseFloat(value)
}
}
if (type === "boolean") {
value = `${value}`?.toLowerCase() === "true"
}
if (
["contains", "notContains", "containsAny"].includes(operator) &&
type === "array" &&
typeof value === "string"
) {
value = value.split(",")
}
if (operator.startsWith("range") && query.range) {
const minint =
SqlNumberTypeRangeMap[
externalType as keyof typeof SqlNumberTypeRangeMap
]?.min || Number.MIN_SAFE_INTEGER
const maxint =
SqlNumberTypeRangeMap[
externalType as keyof typeof SqlNumberTypeRangeMap
]?.max || Number.MAX_SAFE_INTEGER
if (!query.range[field]) {
query.range[field] = {
low: type === "number" ? minint : "0000-00-00T00:00:00.000Z",
high: type === "number" ? maxint : "9999-00-00T00:00:00.000Z",
}
}
if (operator === "rangeLow" && value != null && value !== "") {
query.range[field] = {
...query.range[field],
low: value,
}
} else if (operator === "rangeHigh" && value != null && value !== "") {
query.range[field] = {
...query.range[field],
high: value,
}
}
} else if (isLogicalSearchOperator(queryOperator)) {
// TODO
} else if (query[queryOperator] && operator !== "onEmptyFilter") {
if (type === "boolean") {
// Transform boolean filters to cope with null.
// "equals false" needs to be "not equals true"
// "not equals false" needs to be "equals true"
if (queryOperator === "equal" && value === false) {
query.notEqual = query.notEqual || {}
query.notEqual[field] = true
} else if (queryOperator === "notEqual" && value === false) {
query.equal = query.equal || {}
query.equal[field] = true
} else {
query[queryOperator] ??= {}
query[queryOperator]![field] = value
}
} else {
query[queryOperator] ??= {}
query[queryOperator]![field] = value
}
}
})
return query
}
// Grouped query
export const buildQueryX = (filter: SearchFilterGroup) => {
if (!filter) {
return {}
if (!parsedFilter) {
return
}
const operatorMap = {
@ -558,13 +435,15 @@ export const buildQueryX = (filter: SearchFilterGroup) => {
[FilterGroupLogicalOperator.ANY]: LogicalOperator.OR,
}
const globalOnEmpty = filter.onEmptyFilter ? filter.onEmptyFilter : null
const globalOperator = operatorMap[filter.logicalOperator]
const globalOnEmpty = parsedFilter.onEmptyFilter
? parsedFilter.onEmptyFilter
: null
const globalOperator = operatorMap[parsedFilter.logicalOperator]
const coreRequest: SearchFilters = {
...(globalOnEmpty ? { onEmptyFilter: globalOnEmpty } : {}),
[globalOperator]: {
conditions: filter.groups?.map((group: SearchFilterGroup) => {
conditions: parsedFilter.groups?.map((group: SearchFilterGroup) => {
return {
[operatorMap[group.logicalOperator]]: {
conditions: group.filters?.map(x => builderFilter(x)),
@ -580,6 +459,9 @@ export const buildQueryX = (filter: SearchFilterGroup) => {
// this we convert them to arrays at the controller level so that nothing below
// this has to worry about the non-array values.
export function fixupFilterArrays(filters: SearchFilters) {
if (!filters) {
return filters
}
for (const searchField of Object.values(ArrayOperator)) {
const field = filters[searchField]
if (field == null || !isPlainObject(field)) {
@ -1005,14 +887,13 @@ export const hasFilters = (query?: SearchFilters) => {
if (!query) {
return false
}
const skipped = ["allOr", "onEmptyFilter"]
for (let [key, value] of Object.entries(query)) {
if (skipped.includes(key) || typeof value !== "object") {
continue
}
if (Object.keys(value || {}).length !== 0) {
return true
}
}
return false
const queryRoot = query[LogicalOperator.AND] ?? query[LogicalOperator.OR]
return (
(queryRoot?.conditions || []).reduce((acc, group) => {
const groupRoot = group[LogicalOperator.AND] ?? group[LogicalOperator.OR]
acc += groupRoot?.conditions?.length || 0
return acc
}, 0) > 0
)
}

135
packages/shared-core/src/utils.ts
View File

@ -1,4 +1,14 @@
import {
SearchFilter,
SearchFilterGroup,
FilterGroupLogicalOperator,
EmptyFilterOption,
SearchFilters,
BasicOperator,
ArrayOperator,
} from "@budibase/types"
import * as Constants from "./constants"
import { removeKeyNumbering } from "./filters"
export function unreachable(
value: never,
@ -77,3 +87,128 @@ export function trimOtherProps(object: any, allowedProps: string[]) {
)
return result
}
/**
* Processes the filter config. Filters are migrated from
* SearchFilter[] to SearchFilterGroup
*
* If filters is not an array, the migration is skipped
*
* @param {SearchFilter[] | SearchFilterGroup} filters
*/
export const processSearchFilters = (
filters: SearchFilter[] | SearchFilterGroup
) => {
if (!filters) {
return
}
const defaultCfg: SearchFilterGroup = {
logicalOperator: FilterGroupLogicalOperator.ALL,
onEmptyFilter: EmptyFilterOption.RETURN_NONE,
groups: [],
}
const filterWhitelistKeys = [
"field",
"operator",
"value",
"type",
"externalType",
"valueType",
"noValue",
"formulaType",
]
if (Array.isArray(filters)) {
let baseGroup: SearchFilterGroup = {
filters: [],
logicalOperator: FilterGroupLogicalOperator.ALL,
}
const migratedSetting: SearchFilterGroup = filters.reduce(
(acc: SearchFilterGroup, filter: SearchFilter) => {
// Sort the properties for easier debugging
const filterEntries = Object.entries(filter)
.sort((a, b) => {
return a[0].localeCompare(b[0])
})
.filter(x => x[1] ?? false)
if (filterEntries.length == 1) {
const [key, value] = filterEntries[0]
// Global
if (key === "onEmptyFilter") {
// unset otherwise
acc.onEmptyFilter = value
} else if (key === "operator" && value === "allOr") {
// Group 1 logical operator
baseGroup.logicalOperator = FilterGroupLogicalOperator.ANY
}
return acc
}
const whiteListedFilterSettings: [string, any][] = filterEntries.reduce(
(acc: [string, any][], entry: [string, any]) => {
const [key, value] = entry
if (filterWhitelistKeys.includes(key)) {
if (key === "field") {
acc.push([key, removeKeyNumbering(value)])
} else {
acc.push([key, value])
}
}
return acc
},
[]
)
const migratedFilter: SearchFilter = Object.fromEntries(
whiteListedFilterSettings
) as SearchFilter
baseGroup.filters!.push(migratedFilter)
if (!acc.groups || !acc.groups.length) {
// init the base group
acc.groups = [baseGroup]
}
return acc
},
defaultCfg
)
return migratedSetting
} else if (!filters?.groups) {
return defaultCfg
}
return filters
}
export function isSupportedUserSearch(query: SearchFilters) {
const allowed = [
{ op: BasicOperator.STRING, key: "email" },
{ op: BasicOperator.EQUAL, key: "_id" },
{ op: ArrayOperator.ONE_OF, key: "_id" },
]
for (let [key, operation] of Object.entries(query)) {
if (typeof operation !== "object") {
return false
}
const fields = Object.keys(operation || {})
// this filter doesn't contain options - ignore
if (fields.length === 0) {
continue
}
const allowedOperation = allowed.find(
allow =>
allow.op === key && fields.length === 1 && fields[0] === allow.key
)
if (!allowedOperation) {
return false
}
}
return true
}

13
packages/types/src/api/web/searchFilter.ts
View File

@ -1,5 +1,9 @@
import { FieldType } from "../../documents"
import { EmptyFilterOption, SearchFilters } from "../../sdk"
import {
EmptyFilterOption,
FilterGroupLogicalOperator,
SearchFilters,
} from "../../sdk"
export type SearchFilter = {
operator: keyof SearchFilters | "rangeLow" | "rangeHigh"
@ -9,3 +13,10 @@ export type SearchFilter = {
value: any
externalType?: string
}
export type SearchFilterGroup = {
logicalOperator: FilterGroupLogicalOperator
onEmptyFilter?: EmptyFilterOption
groups?: SearchFilterGroup[]
filters?: SearchFilter[]
}

5
packages/types/src/sdk/search.ts
View File

@ -180,6 +180,11 @@ export enum EmptyFilterOption {
RETURN_NONE = "none",
}
export enum FilterGroupLogicalOperator {
ALL = "all",
ANY = "any",
}
export enum SqlClient {
MS_SQL = "mssql",
POSTGRES = "pg",

4
packages/worker/src/api/controllers/global/users.ts
View File

@ -37,7 +37,7 @@ import {
} from "@budibase/backend-core"
import { checkAnyUserExists } from "../../../utilities/users"
import { isEmailConfigured } from "../../../utilities/email"
import { BpmStatusKey, BpmStatusValue } from "@budibase/shared-core"
import { BpmStatusKey, BpmStatusValue, utils } from "@budibase/shared-core"
const MAX_USERS_UPLOAD_LIMIT = 1000
@ -256,7 +256,7 @@ export const search = async (ctx: Ctx<SearchUsersRequest>) => {
}
}
// Validate we aren't trying to search on any illegal fields
if (!userSdk.core.isSupportedUserSearch(body.query)) {
if (!utils.isSupportedUserSearch(body.query)) {
ctx.throw(400, "Can only search by string.email, equal._id or oneOf._id")
}
}