@quillsql/react 2.12.37 → 2.12.38

package/dist/esm/components/ReportBuilder/FilterModal.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { Filter, Operator } from '../../models/Filter';
+interface FilterModalProps {
+    schema: any;
+    filter?: Filter;
+    fieldValuesMap: {
+        [key: string]: string[];
+    } | {
+        [key: string]: {
+            [key: string]: string[];
+        };
+    };
+    customOperatorOptions?: OperatorOptionsMap;
+    onSubmitFilter: (filter: Filter) => void;
+    onDeleteFilter: () => void;
+    ButtonComponent: React.ComponentType<any>;
+    SelectComponent: React.ComponentType<any>;
+    TextInputComponent: React.ComponentType<any>;
+    SecondaryButtonComponent?: React.ComponentType<any>;
+    MultiSelectComponent: React.ComponentType<any>;
+}
+type OperatorOptionsMap = {
+    [key: string]: Operator[];
+};
+/**
+ * Modal for adding, editing, and deleting Filters
+ */
+export default function FilterModal({ schema, filter, fieldValuesMap, customOperatorOptions, onSubmitFilter, onDeleteFilter, ButtonComponent, SelectComponent, TextInputComponent, SecondaryButtonComponent, MultiSelectComponent, }: FilterModalProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FilterModal.d.ts.map

package/dist/esm/components/ReportBuilder/FilterModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterModal.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/FilterModal.tsx"],"names":[],"mappings":";AAIA,OAAO,EACL,MAAM,EAIN,QAAQ,EAOT,MAAM,qBAAqB,CAAC;AAM7B,UAAU,gBAAgB;IACxB,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,EACZ;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;KAAE,GACzB;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG;YAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;SAAE,CAAA;KAAE,CAAC;IACnD,qBAAqB,CAAC,EAAE,kBAAkB,CAAC;IAC3C,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,kBAAkB,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C,wBAAwB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACpD,oBAAoB,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;CAChD;AAQD,KAAK,kBAAkB,GAAG;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,EAAE,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,MAAM,EACN,cAAc,EACd,qBAAqB,EACrB,cAAc,EACd,cAAc,EACd,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,wBAAwB,EACxB,oBAAoB,GACrB,EAAE,gBAAgB,2CAwvBlB"}

package/dist/esm/components/ReportBuilder/FilterModal.js

@@ -0,0 +1,576 @@
+/* eslint-disable no-unused-vars */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { NumberOperator, DateOperator, StringOperator, FieldTypes, NullOperator, TimeUnit, FilterNames, BoolOperator, } from '../../models/Filter';
+import { QuillDateRangePicker } from '../../DateRangePicker/QuillDateRangePicker';
+import { isValid, parse, startOfToday } from 'date-fns';
+import { snakeAndCamelCaseToTitleCase } from '../../utils/textProcessing';
+import { getType } from '../../utils/filterProcessing';
+/**
+ * Modal for adding, editing, and deleting Filters
+ */
+export default function FilterModal({ schema, filter, fieldValuesMap, customOperatorOptions, onSubmitFilter, onDeleteFilter, ButtonComponent, SelectComponent, TextInputComponent, SecondaryButtonComponent, MultiSelectComponent, }) {
+    const [field, setField] = useState(filter ? filter.field : '');
+    const [fieldOptions, setFieldOptions] = useState([]);
+    const [fieldValues, setFieldValues] = useState([]);
+    const [type, setType] = useState(filter ? filter.type : '');
+    const [value, setValue] = useState(filter
+        ? filter.name === 'date-filter'
+            ? filter.value.value
+            : filter.value
+        : undefined);
+    const [selectedOptions, setSelectedOptions] = useState(filter && filter.name === 'string-in-filter'
+        ? filter.value.map((val) => {
+            return { label: val, value: val };
+        })
+        : []);
+    const [operator, setOperator] = useState(filter ? filter.operator : '');
+    const [operatorOptions, setOperatorOptions] = useState([]);
+    const [unit, setUnit] = useState(filter && filter.name === 'date-filter' ? filter.value.unit : '');
+    const [unitOptions, setUnitOptions] = useState([]);
+    const [startDate, setStartDate] = useState(filter && filter.value?.startDate
+        ? filter.value.startDate.substring(0, 10)
+        : startOfToday().toISOString().substring(0, 10));
+    const [endDate, setEndDate] = useState(filter && filter.value?.endDate
+        ? filter.value.endDate.substring(0, 10)
+        : startOfToday().toISOString().substring(0, 10));
+    const [filterInitialized, setFilterInitialized] = useState(false);
+    const [table, setTable] = useState('');
+    // Define all supported operator options for each field type
+    const allOperatorOptions = {
+        [FieldTypes.Numeric]: [
+            NumberOperator.EqualTo,
+            NumberOperator.NotEqualTo,
+            NumberOperator.GreaterThan,
+            NumberOperator.LessThan,
+            NumberOperator.GreaterThanOrEqualTo,
+            NumberOperator.LessThanOrEqualTo,
+            NullOperator.IsNotNull,
+            NullOperator.IsNull,
+        ],
+        [FieldTypes.Date]: [
+            DateOperator.Custom,
+            DateOperator.InTheLast,
+            DateOperator.InThePrevious,
+            DateOperator.InTheCurrent,
+            DateOperator.GreaterThan,
+            DateOperator.LessThan,
+            DateOperator.GreaterThanOrEqualTo,
+            DateOperator.LessThanOrEqualTo,
+            NullOperator.IsNotNull,
+            NullOperator.IsNull,
+        ],
+        [FieldTypes.String]: [
+            StringOperator.IsExactly,
+            StringOperator.IsNotExactly,
+            StringOperator.Contains,
+            StringOperator.Is,
+            StringOperator.IsNot,
+            NullOperator.IsNotNull,
+            NullOperator.IsNull,
+        ],
+        [FieldTypes.Boolean]: [
+            BoolOperator.EqualTo,
+            BoolOperator.NotEqualTo,
+            NullOperator.IsNotNull,
+            NullOperator.IsNull,
+        ],
+    };
+    // Effect hook to initialize or update fieldValues based on selected field
+    useEffect(() => {
+        if (filter) {
+            if (filter.name === 'string-in-filter') {
+                setSelectedOptions(filter.value.map((val) => {
+                    return { label: val, value: val };
+                }));
+            }
+        }
+    }, [filter]);
+    // Given the schema, set the options for the field
+    useEffect(() => {
+        if (schema && schema.columns) {
+            const fo = schema.columns.map((column) => {
+                return {
+                    name: column.name,
+                    type: column.fieldType,
+                    table: column.table ?? '',
+                };
+            });
+            setFieldOptions(fo);
+            if (!filter && fo.length > 0 && fo[0]) {
+                setField(fo[0].name);
+            }
+        }
+    }, [schema]);
+    // Effect hook to update UI when field selection changes
+    useEffect(() => {
+        if (field !== '') {
+            const selectedOption = fieldOptions.find((option) => option.name === field);
+            if (selectedOption) {
+                const fv = getFieldValues(selectedOption.name, selectedOption.table);
+                setFieldValues(fv);
+                if (!selectedOptions.every((item) => fv
+                    .map((v) => v.toLowerCase())
+                    .includes(item.value.toLowerCase()))) {
+                    setSelectedOptions([]);
+                }
+                setType(getType(selectedOption.type));
+                setTable(selectedOption.table);
+            }
+        }
+        else {
+            setType('');
+            setFieldValues([]);
+            setSelectedOptions([]);
+        }
+    }, [field, fieldOptions]);
+    // Effect hook to update operator options based on selected field type
+    useEffect(() => {
+        if (type) {
+            const options = customOperatorOptions?.[type] ?? allOperatorOptions[type];
+            if (options) {
+                setOperatorOptions(options);
+                if (filterInitialized || !filter) {
+                    switch (type) {
+                        case 'string':
+                            setOperator(StringOperator.Is);
+                            setValue('');
+                            break;
+                        case 'date':
+                            setOperator(DateOperator.InTheLast);
+                            setValue('90');
+                            break;
+                        case 'numeric':
+                            setOperator(NumberOperator.EqualTo);
+                            setValue('0');
+                            break;
+                        case 'boolean':
+                            setOperator(BoolOperator.EqualTo);
+                            setValue(true);
+                            break;
+                    }
+                }
+                else if (filter) {
+                    setFilterInitialized(true);
+                }
+            }
+        }
+        else {
+            setOperatorOptions([]);
+            setOperator('');
+            setType('');
+        }
+    }, [type]);
+    // Effect hook to update UI when operator selection changes
+    useEffect(() => {
+        if (operator === '') {
+            setValue('');
+        }
+        if (typeof value !== 'string' &&
+            typeof value !== 'number' &&
+            typeof value !== 'boolean' &&
+            operator !== DateOperator.Custom) {
+            setValue('');
+        }
+        const options = getUnits(operator);
+        setUnitOptions(options);
+        if (!options || !options.includes(unit)) {
+            setUnit('');
+        }
+    }, [operator]);
+    useEffect(() => {
+        if (!filter && unitOptions.length > 0) {
+            setUnit(TimeUnit.Day);
+        }
+    }, [unitOptions]);
+    // Function that returns the list of units used for certain DateOperators
+    const getUnits = (operator) => {
+        switch (operator) {
+            case DateOperator.InTheLast:
+            case DateOperator.InThePrevious:
+                return [
+                    TimeUnit.Year,
+                    TimeUnit.Month,
+                    TimeUnit.Week,
+                    TimeUnit.Day,
+                    TimeUnit.Hour,
+                ];
+            case DateOperator.InTheCurrent:
+                return [
+                    TimeUnit.Year,
+                    TimeUnit.Quarter,
+                    TimeUnit.Month,
+                    TimeUnit.Week,
+                    TimeUnit.Day,
+                    TimeUnit.Hour,
+                ];
+            default:
+                return [];
+        }
+    };
+    // Get the unique values available to a field
+    const getFieldValues = (field, table) => {
+        if (table !== '' &&
+            typeof fieldValuesMap[table] === 'object' &&
+            !Array.isArray(fieldValuesMap[table])) {
+            const tableMap = fieldValuesMap[table];
+            return tableMap[field] ?? [];
+        }
+        else if (typeof fieldValuesMap === 'object' &&
+            !Array.isArray(fieldValuesMap)) {
+            return fieldValuesMap[field] ?? [];
+        }
+        else {
+            return [];
+        }
+    };
+    // Handler for operator selection change
+    const handleOperatorChange = (event) => {
+        const newOp = event.target.value;
+        setOperator(newOp);
+    };
+    // Handler for date range selection
+    const handleDateRangeSelect = (date) => {
+        if (date) {
+            if (date.from) {
+                setStartDate(date.from.toISOString().substring(0, 10));
+            }
+            if (date.to) {
+                setEndDate(date.to.toISOString().substring(0, 10));
+            }
+        }
+        setOperator(DateOperator.Custom);
+    };
+    // Handler for form submission
+    const handleSubmit = () => {
+        if (!field || field === '') {
+            alert('Please specify field');
+            return;
+        }
+        if (!operator || operator === '') {
+            alert('Please specify operator');
+            return;
+        }
+        // Handle different filter types and submit the filter
+        switch (type) {
+            case 'date':
+                switch (operator) {
+                    case DateOperator.InTheLast:
+                    case DateOperator.InThePrevious:
+                        if (typeof value !== 'number' && isNaN(Number(value))) {
+                            alert('Please specify a valid number');
+                            return;
+                        }
+                        if (!getUnits(operator).includes(unit)) {
+                            alert('Please specify a valid unit');
+                            return;
+                        }
+                        onSubmitFilter({
+                            field,
+                            name: FilterNames.DateFilter,
+                            type: FieldTypes.Date,
+                            operator: operator,
+                            value: { value: value, unit: unit },
+                            table,
+                        });
+                        break;
+                    case DateOperator.InTheCurrent:
+                        if (!getUnits(operator).includes(unit)) {
+                            alert('Please specify a valid unit');
+                            return;
+                        }
+                        onSubmitFilter({
+                            field,
+                            name: FilterNames.DateFilter,
+                            type: FieldTypes.Date,
+                            operator: operator,
+                            value: { value: 0, unit: unit },
+                            table,
+                        });
+                        break;
+                    case DateOperator.Custom:
+                        if (!startDate || !endDate) {
+                            alert('Please specify a valid date range');
+                            return;
+                        }
+                        onSubmitFilter({
+                            field,
+                            name: FilterNames.DateCustomFilter,
+                            type: FieldTypes.Date,
+                            operator: operator,
+                            value: { startDate, endDate },
+                            table,
+                        });
+                        break;
+                    case DateOperator.EqualTo:
+                    case DateOperator.NotEqualTo:
+                    case DateOperator.GreaterThan:
+                    case DateOperator.LessThan:
+                    case DateOperator.GreaterThanOrEqualTo:
+                    case DateOperator.LessThanOrEqualTo:
+                        // eslint-disable-next-line no-case-declarations
+                        const parsedDate = parse(value, 'yyyy-mm-dd', new Date());
+                        if (!isValid(parsedDate)) {
+                            alert('Please specify a valid date in yyyy-mm-dd');
+                            return;
+                        }
+                        onSubmitFilter({
+                            field,
+                            name: FilterNames.DateComparisonFilter,
+                            type: FieldTypes.Date,
+                            operator: operator,
+                            value,
+                            table,
+                        });
+                        break;
+                    case NullOperator.IsNotNull:
+                    case NullOperator.IsNull:
+                        onSubmitFilter({
+                            field,
+                            name: FilterNames.NullFilter,
+                            type: FieldTypes.Null,
+                            operator: operator,
+                            value: null,
+                            table,
+                        });
+                        break;
+                }
+                break;
+            case 'string':
+                switch (operator) {
+                    case StringOperator.Is:
+                    case StringOperator.IsNot:
+                        if (!selectedOptions || selectedOptions.length === 0) {
+                            alert('Please specify some values');
+                            return;
+                        }
+                        onSubmitFilter({
+                            field,
+                            name: FilterNames.StringInFilter,
+                            type: FieldTypes.String,
+                            operator: operator,
+                            value: selectedOptions.map((val) => val.label),
+                            table,
+                        });
+                        break;
+                    case NullOperator.IsNotNull:
+                    case NullOperator.IsNull:
+                        onSubmitFilter({
+                            field,
+                            name: FilterNames.NullFilter,
+                            type: FieldTypes.Null,
+                            operator: operator,
+                            value: null,
+                            table,
+                        });
+                        break;
+                    default:
+                        if (typeof value !== 'string') {
+                            alert('Please specify a valid string');
+                            return;
+                        }
+                        onSubmitFilter({
+                            field,
+                            name: FilterNames.StringFilter,
+                            type: FieldTypes.String,
+                            operator: operator,
+                            value,
+                            table,
+                        });
+                }
+                break;
+            case 'numeric':
+                switch (operator) {
+                    case NullOperator.IsNotNull:
+                    case NullOperator.IsNull:
+                        onSubmitFilter({
+                            field,
+                            name: FilterNames.NullFilter,
+                            type: FieldTypes.Null,
+                            operator: operator,
+                            value: null,
+                            table,
+                        });
+                        break;
+                    default:
+                        if (value === undefined ||
+                            value === '' ||
+                            (typeof value !== 'number' && isNaN(Number(value)))) {
+                            alert('Please specify a valid number');
+                            return;
+                        }
+                        onSubmitFilter({
+                            field,
+                            name: FilterNames.NumericFilter,
+                            type: FieldTypes.Numeric,
+                            operator: operator,
+                            value,
+                            table,
+                        });
+                }
+                break;
+            case 'boolean':
+                switch (operator) {
+                    case NullOperator.IsNotNull:
+                    case NullOperator.IsNull:
+                        onSubmitFilter({
+                            field,
+                            name: FilterNames.NullFilter,
+                            type: FieldTypes.Null,
+                            operator: operator,
+                            value: null,
+                            table,
+                        });
+                        break;
+                    case BoolOperator.EqualTo:
+                    case BoolOperator.NotEqualTo:
+                        onSubmitFilter({
+                            field,
+                            name: FilterNames.BooleanFilter,
+                            type: FieldTypes.Boolean,
+                            operator: operator,
+                            value: value,
+                            table,
+                        });
+                        break;
+                }
+                break;
+            default:
+                alert('Error parsing filter');
+        }
+    };
+    // Handler filter delete
+    const handleDelete = () => {
+        onDeleteFilter();
+    };
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 12,
+        }, children: [_jsx("div", { style: {
+                    display: 'flex',
+                    gap: '12px',
+                    flexDirection: 'column',
+                    width: '100%',
+                    padding: '6px 0px',
+                }, children: _jsxs("div", { style: {
+                        display: 'flex',
+                        gap: '20px',
+                        flexDirection: 'row',
+                        width: '100%',
+                    }, children: [_jsx("div", { style: { display: 'flex', gap: 20 }, children: _jsx(SelectComponent, { value: field, width: 200, onChange: (event) => setField(event.target.value), options: [
+                                    ...fieldOptions.map((option) => ({
+                                        value: option.name,
+                                        label: option.table !== ''
+                                            ? `${snakeAndCamelCaseToTitleCase(option.name)} (${option.table})`
+                                            : snakeAndCamelCaseToTitleCase(option.name),
+                                    })),
+                                ] }) }), operatorOptions.length > 0 && (_jsx("div", { style: { display: 'flex', gap: 20 }, children: _jsx(SelectComponent, { value: operator, width: 200, onChange: handleOperatorChange, options: [
+                                    ...operatorOptions.map((operator) => ({
+                                        value: operator,
+                                        label: operator === StringOperator.Is ||
+                                            operator === StringOperator.IsNot
+                                            ? `${operator} one of`
+                                            : operator,
+                                    })),
+                                ] }) })), _jsx("div", { style: { display: 'flex', gap: 20 }, children: (() => {
+                                switch (operator) {
+                                    case BoolOperator.EqualTo:
+                                    case BoolOperator.NotEqualTo:
+                                    case StringOperator.IsExactly:
+                                    case StringOperator.IsNotExactly:
+                                    case StringOperator.Contains:
+                                    case NumberOperator.EqualTo:
+                                    case NumberOperator.NotEqualTo:
+                                    case NumberOperator.GreaterThan:
+                                    case NumberOperator.LessThan:
+                                    case NumberOperator.GreaterThanOrEqualTo:
+                                    case NumberOperator.LessThanOrEqualTo:
+                                        if (type === 'boolean') {
+                                            return (_jsx(SelectComponent, { value: value, width: 200, onChange: (event) => setValue(event.target.value), options: [
+                                                    { value: true, label: 'true' },
+                                                    { value: false, label: 'false' },
+                                                ] }));
+                                        }
+                                        else {
+                                            return (_jsx(TextInputComponent, { value: value, width: 120, onChange: (event) => {
+                                                    setValue(event.target.value);
+                                                } }));
+                                        }
+                                    case StringOperator.Is:
+                                    case StringOperator.IsNot:
+                                        return (_jsx(MultiSelectComponent, { options: fieldValues.map((v) => {
+                                                return { value: v.toLowerCase(), label: v };
+                                            }), width: 200, value: selectedOptions.map((val) => val.value.toLowerCase()), onChange: (e) => {
+                                                if (e.target.value === '') {
+                                                    setSelectedOptions([]);
+                                                    return;
+                                                }
+                                                let parsedValue = e.target.value;
+                                                if (typeof e.target.value === 'string') {
+                                                    parsedValue = e.target.value.split(',');
+                                                }
+                                                const jsonValue = parsedValue.map((val) => {
+                                                    return {
+                                                        value: val,
+                                                        label: fieldValues.find((v) => v.toLowerCase() === val.toLowerCase()) ?? val,
+                                                    };
+                                                });
+                                                setSelectedOptions(jsonValue);
+                                            } }));
+                                    case DateOperator.Custom:
+                                        return (_jsx(QuillDateRangePicker, { dateRange: {
+                                                startDate: startDate
+                                                    ? new Date(startDate + 'T00:00:00')
+                                                    : startOfToday(),
+                                                endDate: endDate
+                                                    ? new Date(endDate + 'T00:00:00')
+                                                    : startOfToday(),
+                                            }, preset: "", presetOptions: [], onChangePreset: () => { }, hidePreset: true, onChangeDateRange: (value) => {
+                                                handleDateRangeSelect({
+                                                    from: value.startDate,
+                                                    to: value.endDate,
+                                                });
+                                            } }));
+                                    case DateOperator.InTheLast:
+                                    case DateOperator.InThePrevious:
+                                        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'row' }, children: [_jsx(TextInputComponent, { value: value, width: 120, onChange: (event) => {
+                                                        setValue(event.target.value);
+                                                    } }), unitOptions.length > 0 && (_jsx("div", { style: { marginLeft: '10px', marginRight: '10px' }, children: _jsx(SelectComponent, { value: unit, width: 200, onChange: (event) => setUnit(event.target.value), options: [
+                                                            // { value: 'Select', label: 'Select' },
+                                                            ...unitOptions.map((unit) => ({
+                                                                value: unit,
+                                                                label: `${unit}${value && value !== '1' && value !== 1
+                                                                    ? 's'
+                                                                    : ''}`,
+                                                            })),
+                                                        ] }) }))] }));
+                                    case DateOperator.InTheCurrent:
+                                        return (_jsx(_Fragment, { children: unitOptions.length > 0 && (_jsx("div", { style: { marginLeft: '10px', marginRight: '10px' }, children: _jsx(SelectComponent, { value: unit, width: 200, onChange: (event) => setUnit(event.target.value), options: [
+                                                        // { value: 'Select', label: 'Select' },
+                                                        ...unitOptions.map((unit) => ({
+                                                            value: unit,
+                                                            label: `${unit}${operator !== DateOperator.InTheCurrent &&
+                                                                value &&
+                                                                value !== '1' &&
+                                                                value !== 1
+                                                                ? 's'
+                                                                : ''}`,
+                                                        })),
+                                                    ] }) })) }));
+                                    default:
+                                        return _jsx(_Fragment, {});
+                                }
+                            })() })] }) }), _jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'flex-end',
+                }, children: filter ? (_jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        justifyContent: 'end',
+                        gap: 8,
+                        width: '100%',
+                    }, children: [SecondaryButtonComponent ? (_jsx(SecondaryButtonComponent, { onClick: handleDelete, label: 'Delete' })) : (_jsx(ButtonComponent, { onClick: handleDelete, label: 'Delete' })), _jsx(ButtonComponent, { onClick: handleSubmit, label: 'Save' })] })) : (operator && (_jsx(ButtonComponent, { onClick: handleSubmit, label: 'Add Filter' }))) })] }));
+}