forked from tsai/budibase
Andrew Kingston
5 years ago
committed by
GitHub
GitHub
17 changed files with 475 additions and 101 deletions
@ -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)") |
|||
}) |
|||
}) |
|||
}) |
|||
|
|||
@ -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" |
|||
Loading…
Reference in new issue