Merge pull request #3476 from Budibase/multi-filter-component
Dynamic filter component
This commit is contained in:
Andrew Kingston
GitHub
commit
567d188e29
|
|
@ -1,41 +1,44 @@
|
|||
context("Add Multi-Option Datatype", () => {
|
||||
before(() => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
})
|
||||
before(() => {
|
||||
cy.login()
|
||||
cy.createTestApp()
|
||||
})
|
||||
|
||||
it("should create a new table, with data", () => {
|
||||
cy.createTable("Multi Data")
|
||||
cy.addColumn("Multi Data", "Test Data", "Multi-select", "1\n2\n3\n4\n5")
|
||||
cy.addRowMultiValue(["1", "2", "3", "4", "5"])
|
||||
})
|
||||
it("should create a new table, with data", () => {
|
||||
cy.createTable("Multi Data")
|
||||
cy.addColumn("Multi Data", "Test Data", "Multi-select", "1\n2\n3\n4\n5")
|
||||
cy.addRowMultiValue(["1", "2", "3", "4", "5"])
|
||||
})
|
||||
|
||||
it ("should add form with multi select picker, containing 5 options", () => {
|
||||
cy.navigateToFrontend()
|
||||
cy.wait(500)
|
||||
// Add data provider
|
||||
cy.get(`[data-cy="category-Data Provider"]`).click()
|
||||
cy.get('[data-cy="dataSource-prop-control"]').click()
|
||||
cy.get(".dropdown").contains("Multi Data").click()
|
||||
cy.wait(500)
|
||||
// Add Form with schema to match table
|
||||
cy.addComponent("Form", "Form")
|
||||
cy.get('[data-cy="dataSource-prop-control"').click()
|
||||
cy.get(".dropdown").contains("Multi Data").click()
|
||||
cy.wait(500)
|
||||
// Add multi-select picker to form
|
||||
cy.addComponent("Form", "Multi-select Picker").then((componentId) => {
|
||||
cy.get('[data-cy="field-prop-control"]').type("Test Data").type('{enter}')
|
||||
cy.wait(1000)
|
||||
cy.getComponent(componentId).contains("Choose some options").click()
|
||||
// Check picker has 5 items
|
||||
cy.getComponent(componentId).find('li').should('have.length', 5)
|
||||
// Select all items
|
||||
for (let i = 1; i < 6; i++) {
|
||||
cy.getComponent(componentId).find('li').contains(i).click()
|
||||
}
|
||||
// Check items have been selected
|
||||
cy.getComponent(componentId).find('.spectrum-Picker-label').contains("(5)")
|
||||
})
|
||||
it("should add form with multi select picker, containing 5 options", () => {
|
||||
cy.navigateToFrontend()
|
||||
cy.wait(500)
|
||||
// Add data provider
|
||||
cy.get(`[data-cy="category-Data"]`).click()
|
||||
cy.get(`[data-cy="component-Data Provider"]`).click()
|
||||
cy.get('[data-cy="dataSource-prop-control"]').click()
|
||||
cy.get(".dropdown").contains("Multi Data").click()
|
||||
cy.wait(500)
|
||||
// Add Form with schema to match table
|
||||
cy.addComponent("Form", "Form")
|
||||
cy.get('[data-cy="dataSource-prop-control"').click()
|
||||
cy.get(".dropdown").contains("Multi Data").click()
|
||||
cy.wait(500)
|
||||
// Add multi-select picker to form
|
||||
cy.addComponent("Form", "Multi-select Picker").then(componentId => {
|
||||
cy.get('[data-cy="field-prop-control"]').type("Test Data").type("{enter}")
|
||||
cy.wait(1000)
|
||||
cy.getComponent(componentId).contains("Choose some options").click()
|
||||
// Check picker has 5 items
|
||||
cy.getComponent(componentId).find("li").should("have.length", 5)
|
||||
// Select all items
|
||||
for (let i = 1; i < 6; i++) {
|
||||
cy.getComponent(componentId).find("li").contains(i).click()
|
||||
}
|
||||
// Check items have been selected
|
||||
cy.getComponent(componentId)
|
||||
.find(".spectrum-Picker-label")
|
||||
.contains("(5)")
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -8,12 +8,24 @@
|
|||
"repeaterblock"
|
||||
]
|
||||
},
|
||||
"section",
|
||||
"container",
|
||||
"dataprovider",
|
||||
"table",
|
||||
"repeater",
|
||||
"button",
|
||||
{
|
||||
"name": "Layout",
|
||||
"icon": "ClassicGridView",
|
||||
"children": [
|
||||
"container",
|
||||
"section"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Data",
|
||||
"icon": "Data",
|
||||
"children": [
|
||||
"dataprovider",
|
||||
"repeater",
|
||||
"table",
|
||||
"dynamicfilter"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Form",
|
||||
"icon": "Form",
|
||||
|
|
@ -60,6 +72,7 @@
|
|||
"children": [
|
||||
"heading",
|
||||
"text",
|
||||
"button",
|
||||
"divider",
|
||||
"image",
|
||||
"backgroundimage",
|
||||
|
|
|
|||
|
|
@ -247,7 +247,6 @@
|
|||
"description": "A basic html button that is ready for styling",
|
||||
"icon": "Button",
|
||||
"editable": true,
|
||||
"illegalChildren": ["section"],
|
||||
"showSettingsBar": true,
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -2647,6 +2646,49 @@
|
|||
}
|
||||
]
|
||||
},
|
||||
"dynamicfilter": {
|
||||
"name": "Dynamic Filter",
|
||||
"icon": "FilterEdit",
|
||||
"showSettingsBar": true,
|
||||
"settings": [
|
||||
{
|
||||
"type": "dataProvider",
|
||||
"label": "Provider",
|
||||
"key": "dataProvider"
|
||||
},
|
||||
{
|
||||
"type": "multifield",
|
||||
"label": "Allowed filter fields",
|
||||
"key": "allowedFields",
|
||||
"placeholder": "All fields"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"label": "Button size",
|
||||
"showInBar": true,
|
||||
"key": "size",
|
||||
"options": [
|
||||
{
|
||||
"label": "Small",
|
||||
"value": "S"
|
||||
},
|
||||
{
|
||||
"label": "Medium",
|
||||
"value": "M"
|
||||
},
|
||||
{
|
||||
"label": "Large",
|
||||
"value": "L"
|
||||
},
|
||||
{
|
||||
"label": "Extra large",
|
||||
"value": "XL"
|
||||
}
|
||||
],
|
||||
"defaultValue": "M"
|
||||
}
|
||||
]
|
||||
},
|
||||
"tableblock": {
|
||||
"block": true,
|
||||
"name": "Table block",
|
||||
|
|
|
|||
|
|
@ -121,6 +121,9 @@
|
|||
-->
|
||||
<div id="flatpickr-root" />
|
||||
|
||||
<!-- Modal container to ensure they sit on top -->
|
||||
<div class="modal-container" />
|
||||
|
||||
<!-- Layers on top of app -->
|
||||
<NotificationDisplay />
|
||||
<ConfirmationDisplay />
|
||||
|
|
|
|||
|
|
@ -72,13 +72,18 @@
|
|||
$: inSelectedPath = $builderStore.selectedComponentPath?.includes(id)
|
||||
$: inDragPath = inSelectedPath && $builderStore.editMode
|
||||
|
||||
// Derive definition properties which can all be optional, so need to be
|
||||
// coerced to booleans
|
||||
$: editable = !!definition?.editable
|
||||
$: hasChildren = !!definition?.hasChildren
|
||||
$: showEmptyState = definition?.showEmptyState !== false
|
||||
|
||||
// Interactive components can be selected, dragged and highlighted inside
|
||||
// the builder preview
|
||||
$: interactive =
|
||||
$builderStore.inBuilder &&
|
||||
($builderStore.previewType === "layout" || insideScreenslot) &&
|
||||
!isBlock
|
||||
$: editable = definition?.editable
|
||||
$: editing = editable && selected && $builderStore.editMode
|
||||
$: draggable = !inDragPath && interactive && !isLayout && !isScreen
|
||||
$: droppable = interactive && !isLayout && !isScreen
|
||||
|
|
@ -86,8 +91,8 @@
|
|||
// Empty components are those which accept children but do not have any.
|
||||
// Empty states can be shown for these components, but can be disabled
|
||||
// in the component manifest.
|
||||
$: empty = interactive && !children.length && definition?.hasChildren
|
||||
$: emptyState = empty && definition?.showEmptyState !== false
|
||||
$: empty = interactive && !children.length && hasChildren
|
||||
$: emptyState = empty && showEmptyState
|
||||
|
||||
// Raw settings are all settings excluding internal props and children
|
||||
$: rawSettings = getRawSettings(instance)
|
||||
|
|
@ -103,6 +108,9 @@
|
|||
// Build up the final settings object to be passed to the component
|
||||
$: cacheSettings(enrichedSettings, nestedSettings, conditionalSettings)
|
||||
|
||||
// Render key is used to determine when components need to fully remount
|
||||
$: renderKey = getRenderKey(id, editing)
|
||||
|
||||
// Update component context
|
||||
$: componentStore.set({
|
||||
id,
|
||||
|
|
@ -268,35 +276,43 @@
|
|||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Generates a key used to determine when components need to fully remount.
|
||||
// Currently only toggling editing requires remounting.
|
||||
const getRenderKey = (id, editing) => {
|
||||
return hashString(`${id}-${editing}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if constructor && cachedSettings && (visible || inSelectedPath)}
|
||||
<!-- The ID is used as a class because getElementsByClassName is O(1) -->
|
||||
<!-- and the performance matters for the selection indicators -->
|
||||
<div
|
||||
class={`component ${id}`}
|
||||
class:draggable
|
||||
class:droppable
|
||||
class:empty
|
||||
class:interactive
|
||||
class:editing
|
||||
class:block={isBlock}
|
||||
data-id={id}
|
||||
data-name={name}
|
||||
>
|
||||
<svelte:component this={constructor} {...cachedSettings}>
|
||||
{#if children.length}
|
||||
{#each children as child (child._id)}
|
||||
<svelte:self instance={child} />
|
||||
{/each}
|
||||
{:else if emptyState}
|
||||
<Placeholder />
|
||||
{:else if isBlock}
|
||||
<slot />
|
||||
{/if}
|
||||
</svelte:component>
|
||||
</div>
|
||||
{/if}
|
||||
{#key renderKey}
|
||||
{#if constructor && cachedSettings && (visible || inSelectedPath)}
|
||||
<!-- The ID is used as a class because getElementsByClassName is O(1) -->
|
||||
<!-- and the performance matters for the selection indicators -->
|
||||
<div
|
||||
class={`component ${id}`}
|
||||
class:draggable
|
||||
class:droppable
|
||||
class:empty
|
||||
class:interactive
|
||||
class:editing
|
||||
class:block={isBlock}
|
||||
data-id={id}
|
||||
data-name={name}
|
||||
>
|
||||
<svelte:component this={constructor} {...cachedSettings}>
|
||||
{#if children.length}
|
||||
{#each children as child (child._id)}
|
||||
<svelte:self instance={child} />
|
||||
{/each}
|
||||
{:else if emptyState}
|
||||
<Placeholder />
|
||||
{:else if isBlock}
|
||||
<slot />
|
||||
{/if}
|
||||
</svelte:component>
|
||||
</div>
|
||||
{/if}
|
||||
{/key}
|
||||
|
||||
<style>
|
||||
.component {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,10 @@
|
|||
export let type = "primary"
|
||||
export let quiet = false
|
||||
|
||||
// For internal use only for now - not defined in the manifest
|
||||
export let icon = null
|
||||
export let active = false
|
||||
|
||||
let node
|
||||
|
||||
$: $component.editing && node?.focus()
|
||||
|
|
@ -25,7 +29,7 @@
|
|||
}
|
||||
|
||||
const updateText = e => {
|
||||
builderStore.actions.updateProp("text", e.target.textContent)
|
||||
builderStore.actions.updateProp("text", e.target.textContent.trim())
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -35,10 +39,22 @@
|
|||
{disabled}
|
||||
use:styleable={$component.styles}
|
||||
on:click={onClick}
|
||||
contenteditable={$component.editing}
|
||||
contenteditable={$component.editing && !icon}
|
||||
on:blur={$component.editing ? updateText : null}
|
||||
bind:this={node}
|
||||
class:active
|
||||
>
|
||||
{#if icon}
|
||||
<svg
|
||||
class:hasText={componentText?.length > 0}
|
||||
class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
|
||||
focusable="false"
|
||||
aria-hidden="true"
|
||||
aria-label={icon}
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-{icon}" />
|
||||
</svg>
|
||||
{/if}
|
||||
{componentText}
|
||||
</button>
|
||||
|
||||
|
|
@ -56,4 +72,10 @@
|
|||
.spectrum-Button::after {
|
||||
display: none;
|
||||
}
|
||||
.spectrum-Icon.hasText {
|
||||
margin-right: var(--spectrum-button-primary-icon-gap);
|
||||
}
|
||||
.active {
|
||||
color: var(--spectrum-global-color-blue-600);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -275,11 +275,10 @@
|
|||
allRows = res.rows
|
||||
}
|
||||
|
||||
const addQueryExtension = (key, operator, field, value) => {
|
||||
if (!key || !operator || !field) {
|
||||
const addQueryExtension = (key, extension) => {
|
||||
if (!key || !extension) {
|
||||
return
|
||||
}
|
||||
const extension = { operator, field, value }
|
||||
queryExtensions = { ...queryExtensions, [key]: extension }
|
||||
}
|
||||
|
||||
|
|
@ -295,11 +294,13 @@
|
|||
const extendQuery = (defaultQuery, extensions) => {
|
||||
const extensionValues = Object.values(extensions || {})
|
||||
let extendedQuery = { ...defaultQuery }
|
||||
extensionValues.forEach(({ operator, field, value }) => {
|
||||
extendedQuery[operator] = {
|
||||
...extendedQuery[operator],
|
||||
[field]: value,
|
||||
}
|
||||
extensionValues.forEach(extension => {
|
||||
Object.entries(extension || {}).forEach(([operator, fields]) => {
|
||||
extendedQuery[operator] = {
|
||||
...extendedQuery[operator],
|
||||
...fields,
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
if (JSON.stringify(query) !== JSON.stringify(extendedQuery)) {
|
||||
|
|
|
|||
|
|
@ -13,15 +13,6 @@
|
|||
|
||||
const component = getContext("component")
|
||||
const { styleable, ActionTypes, getAction } = getContext("sdk")
|
||||
|
||||
$: addExtension = getAction(
|
||||
dataProvider?.id,
|
||||
ActionTypes.AddDataProviderQueryExtension
|
||||
)
|
||||
$: removeExtension = getAction(
|
||||
dataProvider?.id,
|
||||
ActionTypes.RemoveDataProviderQueryExtension
|
||||
)
|
||||
const options = [
|
||||
"Last 1 day",
|
||||
"Last 7 days",
|
||||
|
|
@ -32,10 +23,23 @@
|
|||
]
|
||||
let value = options.includes(defaultValue) ? defaultValue : "Last 30 days"
|
||||
|
||||
$: queryExtension = getQueryExtension(value)
|
||||
$: addExtension?.($component.id, "range", field, queryExtension)
|
||||
$: dataProviderId = dataProvider?.id
|
||||
$: addExtension = getAction(
|
||||
dataProviderId,
|
||||
ActionTypes.AddDataProviderQueryExtension
|
||||
)
|
||||
$: removeExtension = getAction(
|
||||
dataProviderId,
|
||||
ActionTypes.RemoveDataProviderQueryExtension
|
||||
)
|
||||
$: queryExtension = getQueryExtension(field, value)
|
||||
$: addExtension?.($component.id, queryExtension)
|
||||
|
||||
const getQueryExtension = (field, value) => {
|
||||
if (!field || !value) {
|
||||
return null
|
||||
}
|
||||
|
||||
const getQueryExtension = value => {
|
||||
let low = dayjs.utc().subtract(1, "year")
|
||||
let high = dayjs.utc().add(1, "day")
|
||||
|
||||
|
|
@ -51,7 +55,14 @@
|
|||
low = dayjs.utc().subtract(6, "months")
|
||||
}
|
||||
|
||||
return { low: low.format(), high: high.format() }
|
||||
return {
|
||||
range: {
|
||||
[field]: {
|
||||
low: low.format(),
|
||||
high: high.format(),
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
onDestroy(() => {
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
|
||||
// Convert contenteditable HTML to text and save
|
||||
const updateText = e => {
|
||||
const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n")
|
||||
const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n").trim()
|
||||
builderStore.actions.updateProp("text", sanitized)
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
}
|
||||
|
||||
const updateText = e => {
|
||||
builderStore.actions.updateProp("text", e.target.textContent)
|
||||
builderStore.actions.updateProp("text", e.target.textContent.trim())
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
|
||||
// Convert contenteditable HTML to text and save
|
||||
const updateText = e => {
|
||||
const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n")
|
||||
const sanitized = e.target.innerHTML.replace(/<br>/gi, "\n").trim()
|
||||
builderStore.actions.updateProp("text", sanitized)
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,85 @@
|
|||
<script>
|
||||
import { get } from "svelte/store"
|
||||
import { getContext, onDestroy } from "svelte"
|
||||
import { ModalContent, Modal } from "@budibase/bbui"
|
||||
import FilterModal from "./FilterModal.svelte"
|
||||
import { buildLuceneQuery } from "builder/src/helpers/lucene"
|
||||
import Button from "../Button.svelte"
|
||||
|
||||
export let dataProvider
|
||||
export let allowedFields
|
||||
export let size = "M"
|
||||
|
||||
const component = getContext("component")
|
||||
const { builderStore, ActionTypes, getAction } = getContext("sdk")
|
||||
|
||||
let modal
|
||||
let tmpFilters = []
|
||||
let filters = []
|
||||
|
||||
$: dataProviderId = dataProvider?.id
|
||||
$: addExtension = getAction(
|
||||
dataProviderId,
|
||||
ActionTypes.AddDataProviderQueryExtension
|
||||
)
|
||||
$: removeExtension = getAction(
|
||||
dataProviderId,
|
||||
ActionTypes.RemoveDataProviderQueryExtension
|
||||
)
|
||||
$: schema = dataProvider?.schema
|
||||
$: schemaFields = getSchemaFields(schema, allowedFields)
|
||||
|
||||
// Add query extension to data provider
|
||||
$: {
|
||||
if (filters?.length) {
|
||||
const queryExtension = buildLuceneQuery(filters)
|
||||
addExtension?.($component.id, queryExtension)
|
||||
} else {
|
||||
removeExtension?.($component.id)
|
||||
}
|
||||
}
|
||||
|
||||
const getSchemaFields = (schema, allowedFields) => {
|
||||
let clonedSchema = {}
|
||||
if (!allowedFields?.length) {
|
||||
clonedSchema = schema
|
||||
} else {
|
||||
allowedFields?.forEach(field => {
|
||||
clonedSchema[field] = schema[field]
|
||||
})
|
||||
}
|
||||
return Object.values(clonedSchema || {})
|
||||
}
|
||||
|
||||
const openEditor = () => {
|
||||
if (get(builderStore).inBuilder) {
|
||||
return
|
||||
}
|
||||
tmpFilters = [...filters]
|
||||
modal.show()
|
||||
}
|
||||
|
||||
const updateQuery = () => {
|
||||
filters = [...tmpFilters]
|
||||
}
|
||||
|
||||
onDestroy(() => {
|
||||
removeExtension?.($component.id)
|
||||
})
|
||||
</script>
|
||||
|
||||
<Button
|
||||
onClick={openEditor}
|
||||
icon="Properties"
|
||||
text="Filter"
|
||||
{size}
|
||||
type="secondary"
|
||||
quiet
|
||||
active={filters?.length > 0}
|
||||
/>
|
||||
|
||||
<Modal bind:this={modal}>
|
||||
<ModalContent title="Edit filters" size="XL" onConfirm={updateQuery}>
|
||||
<FilterModal bind:filters={tmpFilters} {schemaFields} />
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
<script>
|
||||
import {
|
||||
Body,
|
||||
Button,
|
||||
Combobox,
|
||||
DatePicker,
|
||||
DrawerContent,
|
||||
Icon,
|
||||
Input,
|
||||
Layout,
|
||||
Select,
|
||||
} from "@budibase/bbui"
|
||||
import { generate } from "shortid"
|
||||
import {
|
||||
getValidOperatorsForType,
|
||||
OperatorOptions,
|
||||
} from "builder/src/constants/lucene"
|
||||
|
||||
export let schemaFields
|
||||
export let filters = []
|
||||
|
||||
const BannedTypes = ["link", "attachment", "formula"]
|
||||
|
||||
$: fieldOptions = (schemaFields ?? [])
|
||||
.filter(field => !BannedTypes.includes(field.type))
|
||||
.map(field => 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)
|
||||
}
|
||||
|
||||
const duplicateFilter = id => {
|
||||
const existingFilter = filters.find(filter => filter.id === id)
|
||||
const duplicate = { ...existingFilter, id: generate() }
|
||||
filters = [...filters, duplicate]
|
||||
}
|
||||
|
||||
const onFieldChange = (expression, field) => {
|
||||
// Update the field type
|
||||
expression.type = schemaFields.find(x => x.name === field)?.type
|
||||
|
||||
// Ensure a valid operator is set
|
||||
const validOperators = getValidOperatorsForType(expression.type).map(
|
||||
x => x.value
|
||||
)
|
||||
if (!validOperators.includes(expression.operator)) {
|
||||
expression.operator = validOperators[0] ?? OperatorOptions.Equals.value
|
||||
onOperatorChange(expression, expression.operator)
|
||||
}
|
||||
|
||||
// if changed to an array, change default value to empty array
|
||||
const idx = filters.findIndex(x => x.field === field)
|
||||
if (expression.type === "array") {
|
||||
filters[idx].value = []
|
||||
} else {
|
||||
filters[idx].value = null
|
||||
}
|
||||
}
|
||||
|
||||
const onOperatorChange = (expression, operator) => {
|
||||
const noValueOptions = [
|
||||
OperatorOptions.Empty.value,
|
||||
OperatorOptions.NotEmpty.value,
|
||||
]
|
||||
expression.noValue = noValueOptions.includes(operator)
|
||||
if (expression.noValue) {
|
||||
expression.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const getFieldOptions = field => {
|
||||
const schema = schemaFields.find(x => x.name === field)
|
||||
return schema?.constraints?.inclusion || []
|
||||
}
|
||||
</script>
|
||||
|
||||
<DrawerContent>
|
||||
<div class="container">
|
||||
<Layout noPadding>
|
||||
<Body size="S">
|
||||
{#if !filters?.length}
|
||||
Add your first filter expression.
|
||||
{:else}
|
||||
Results are filtered to only those which match all of the following
|
||||
constraints.
|
||||
{/if}
|
||||
</Body>
|
||||
{#if filters?.length}
|
||||
<div class="fields">
|
||||
{#each filters as filter, idx}
|
||||
<Select
|
||||
bind:value={filter.field}
|
||||
options={fieldOptions}
|
||||
on:change={e => onFieldChange(filter, e.detail)}
|
||||
placeholder="Column"
|
||||
/>
|
||||
<Select
|
||||
disabled={!filter.field}
|
||||
options={getValidOperatorsForType(filter.type)}
|
||||
bind:value={filter.operator}
|
||||
on:change={e => onOperatorChange(filter, e.detail)}
|
||||
placeholder={null}
|
||||
/>
|
||||
{#if ["string", "longform", "number"].includes(filter.type)}
|
||||
<Input disabled={filter.noValue} bind:value={filter.value} />
|
||||
{:else if ["options", "array"].includes(filter.type)}
|
||||
<Combobox
|
||||
disabled={filter.noValue}
|
||||
options={getFieldOptions(filter.field)}
|
||||
bind:value={filter.value}
|
||||
/>
|
||||
{:else if filter.type === "boolean"}
|
||||
<Combobox
|
||||
disabled={filter.noValue}
|
||||
options={[
|
||||
{ label: "True", value: "true" },
|
||||
{ label: "False", value: "false" },
|
||||
]}
|
||||
bind:value={filter.value}
|
||||
/>
|
||||
{:else if filter.type === "datetime"}
|
||||
<DatePicker disabled={filter.noValue} bind:value={filter.value} />
|
||||
{:else}
|
||||
<Input disabled />
|
||||
{/if}
|
||||
<Icon
|
||||
name="Duplicate"
|
||||
hoverable
|
||||
size="S"
|
||||
on:click={() => duplicateFilter(filter.id)}
|
||||
/>
|
||||
<Icon
|
||||
name="Close"
|
||||
hoverable
|
||||
size="S"
|
||||
on:click={() => removeFilter(filter.id)}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
<Button icon="AddCircle" size="M" secondary on:click={addFilter}>
|
||||
Add filter
|
||||
</Button>
|
||||
</div>
|
||||
</Layout>
|
||||
</div>
|
||||
</DrawerContent>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.fields {
|
||||
display: grid;
|
||||
column-gap: var(--spacing-l);
|
||||
row-gap: var(--spacing-s);
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr 120px 1fr auto auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default as dynamicfilter } from "./DynamicFilter.svelte"
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
$: labelClass = labelPos === "above" ? "" : `spectrum-FieldLabel--${labelPos}`
|
||||
|
||||
const updateLabel = e => {
|
||||
builderStore.actions.updateProp("label", e.target.textContent)
|
||||
builderStore.actions.updateProp("label", e.target.textContent.trim())
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ export * from "./charts"
|
|||
export * from "./forms"
|
||||
export * from "./table"
|
||||
export * from "./blocks"
|
||||
export * from "./dynamic-filter"
|
||||
|
||||
// Deprecated component left for compatibility in old apps
|
||||
export { default as navigation } from "./deprecated/Navigation.svelte"
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ const dispatchEvent = (type, data = {}) => {
|
|||
const createBuilderStore = () => {
|
||||
const initialState = {
|
||||
inBuilder: false,
|
||||
appId: null,
|
||||
layout: null,
|
||||
screen: null,
|
||||
selectedComponentId: null,
|
||||
|
|
@ -94,6 +93,7 @@ const createBuilderStore = () => {
|
|||
}
|
||||
return {
|
||||
...writableStore,
|
||||
set: state => writableStore.set({ ...initialState, ...state }),
|
||||
subscribe: derivedStore.subscribe,
|
||||
actions,
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue