@quillsql/react 2.15.2 → 2.15.4

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

@@ -1,703 +0,0 @@
-"use strict";
-/* eslint-disable no-unused-vars */
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = FilterModal;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Filter_1 = require("../../models/Filter");
-const QuillDateRangePicker_1 = require("../../DateRangePicker/QuillDateRangePicker");
-const date_fns_1 = require("date-fns");
-const textProcessing_1 = require("../../utils/textProcessing");
-const filterProcessing_1 = require("../../utils/filterProcessing");
-/**
- * Modal for adding, editing, and deleting Filters
- */
-function FilterModal({ schema, tables, filter, fieldValuesMap, fieldValuesMapIsLoading, customOperatorOptions, hideTableName, onSubmitFilter, onDeleteFilter, ButtonComponent, SelectComponent, TextInputComponent, SecondaryButtonComponent, MultiSelectComponent, reportBuilderColumns, }) {
-    const [field, setField] = (0, react_1.useState)('');
-    const [fieldOptions, setFieldOptions] = (0, react_1.useState)([]);
-    const [fieldValues, setFieldValues] = (0, react_1.useState)([]);
-    const [type, setType] = (0, react_1.useState)(null);
-    const [value, setValue] = (0, react_1.useState)(undefined);
-    const [selectedOptions, setSelectedOptions] = (0, react_1.useState)([]);
-    const [operator, setOperator] = (0, react_1.useState)(undefined);
-    const [operatorOptions, setOperatorOptions] = (0, react_1.useState)([]);
-    const [unit, setUnit] = (0, react_1.useState)('');
-    const [unitOptions, setUnitOptions] = (0, react_1.useState)([]);
-    const [startDate, setStartDate] = (0, react_1.useState)((0, date_fns_1.startOfToday)().toISOString().substring(0, 10));
-    const [endDate, setEndDate] = (0, react_1.useState)((0, date_fns_1.startOfToday)().toISOString().substring(0, 10));
-    const [filterInitialized, setFilterInitialized] = (0, react_1.useState)(false);
-    const [table, setTable] = (0, react_1.useState)(undefined);
-    const memoizedFieldValuesMap = (0, react_1.useMemo)(() => fieldValuesMap, [JSON.stringify(fieldValuesMap)]);
-    const memoizedFilter = (0, react_1.useMemo)(() => filter, [JSON.stringify(filter)]);
-    (0, react_1.useEffect)(() => {
-        if (!filter) {
-            onFieldChange(field, fieldOptions, table);
-        }
-    }, [memoizedFieldValuesMap]);
-    // Define all supported operator options for each field type
-    const allOperatorOptions = {
-        [Filter_1.FieldType.Number]: [
-            Filter_1.NumberOperator.EqualTo,
-            Filter_1.NumberOperator.NotEqualTo,
-            Filter_1.NumberOperator.GreaterThan,
-            Filter_1.NumberOperator.LessThan,
-            Filter_1.NumberOperator.GreaterThanOrEqualTo,
-            Filter_1.NumberOperator.LessThanOrEqualTo,
-            Filter_1.NullOperator.IsNotNull,
-            Filter_1.NullOperator.IsNull,
-        ],
-        [Filter_1.FieldType.Date]: [
-            Filter_1.DateOperator.Custom,
-            Filter_1.DateOperator.InTheLast,
-            Filter_1.DateOperator.InThePrevious,
-            Filter_1.DateOperator.InTheCurrent,
-            Filter_1.DateOperator.GreaterThan,
-            Filter_1.DateOperator.LessThan,
-            Filter_1.DateOperator.GreaterThanOrEqualTo,
-            Filter_1.DateOperator.LessThanOrEqualTo,
-            Filter_1.NullOperator.IsNotNull,
-            Filter_1.NullOperator.IsNull,
-        ],
-        [Filter_1.FieldType.String]: [
-            Filter_1.StringOperator.IsExactly,
-            Filter_1.StringOperator.IsNotExactly,
-            Filter_1.StringOperator.Contains,
-            Filter_1.StringOperator.Is,
-            Filter_1.StringOperator.IsNot,
-            Filter_1.NullOperator.IsNotNull,
-            Filter_1.NullOperator.IsNull,
-        ],
-        [Filter_1.FieldType.Boolean]: [
-            Filter_1.BoolOperator.EqualTo,
-            Filter_1.BoolOperator.NotEqualTo,
-            Filter_1.NullOperator.IsNotNull,
-            Filter_1.NullOperator.IsNull,
-        ],
-        [Filter_1.FieldType.Null]: [Filter_1.NullOperator.IsNotNull, Filter_1.NullOperator.IsNull],
-    };
-    // Effect hook to initialize or update fieldValues based on selected field
-    (0, react_1.useEffect)(() => {
-        if (filter) {
-            setField(filter.field);
-            setTable(filter.table);
-            onFieldChange(filter.field, fieldOptions, filter.table);
-            setType(filter.fieldType);
-            onTypeChange(filter.fieldType);
-            setValue(filter.filterType === 'date-filter' ? filter.value.value : filter.value);
-            setOperator(filter.operator);
-            onOperatorChange(filter.operator);
-            setUnit(filter.filterType === 'date-filter' ? filter.value.unit : '');
-            setStartDate(filter.value?.startDate
-                ? filter.value.startDate.substring(0, 10)
-                : (0, date_fns_1.startOfToday)().toISOString().substring(0, 10));
-            setEndDate(filter.value?.endDate
-                ? filter.value.endDate.substring(0, 10)
-                : (0, date_fns_1.startOfToday)().toISOString().substring(0, 10));
-            if (filter.filterType === 'string-in-filter') {
-                setSelectedOptions(filter.value.map((val) => {
-                    return { label: val, value: val };
-                }));
-            }
-        }
-    }, [memoizedFilter]);
-    // Given the schema, set the options for the field
-    (0, react_1.useEffect)(() => {
-        if (schema) {
-            const fo = schema.flatMap((table) => {
-                if (tables && !tables.includes(table.name)) {
-                    return [];
-                }
-                return table.columns.map((column) => {
-                    return {
-                        name: column.field,
-                        type: column.fieldType,
-                        table: table.name,
-                    };
-                });
-            });
-            setFieldOptions(fo);
-            if (!filter && fo.length > 0 && fo[0]) {
-                setField(fo[0].name);
-                onFieldChange(fo[0].name, fo, fo[0].table);
-            }
-            else {
-                onFieldChange(field !== '' ? field : (filter?.field ?? ''), fo, table ?? filter?.table);
-            }
-        }
-    }, [schema]);
-    function onTypeChange(type) {
-        if (type) {
-            const options = customOperatorOptions?.[type] ?? allOperatorOptions[type];
-            if (options) {
-                setOperatorOptions(options);
-                if (filterInitialized || !filter) {
-                    switch (type) {
-                        case 'string':
-                            setOperator(Filter_1.StringOperator.Is);
-                            onOperatorChange(Filter_1.StringOperator.Is);
-                            setValue('');
-                            break;
-                        case 'date':
-                            setOperator(Filter_1.DateOperator.InTheLast);
-                            onOperatorChange(Filter_1.DateOperator.InTheLast);
-                            setValue('90');
-                            break;
-                        case 'number':
-                            setOperator(Filter_1.NumberOperator.EqualTo);
-                            onOperatorChange(Filter_1.NumberOperator.EqualTo);
-                            setValue('0');
-                            break;
-                        case 'boolean':
-                            setOperator(Filter_1.BoolOperator.EqualTo);
-                            onOperatorChange(Filter_1.BoolOperator.EqualTo);
-                            setValue(true);
-                            break;
-                        case 'null':
-                            setOperator(Filter_1.NullOperator.IsNotNull);
-                            onOperatorChange(Filter_1.NullOperator.IsNotNull);
-                            setValue('');
-                            break;
-                    }
-                }
-                else if (filter) {
-                    setFilterInitialized(true);
-                }
-            }
-        }
-        else {
-            setOperatorOptions([]);
-            setOperator('');
-            onOperatorChange('');
-        }
-    }
-    function onOperatorChange(operator) {
-        if (operator === '' || operator === undefined) {
-            setValue('');
-            return;
-        }
-        if (typeof value !== 'string' &&
-            typeof value !== 'number' &&
-            typeof value !== 'boolean' &&
-            operator !== Filter_1.DateOperator.Custom &&
-            (filterInitialized || !filter)) {
-            setValue('');
-        }
-        else if (type === Filter_1.FieldType.Date &&
-            [
-                Filter_1.DateOperator.GreaterThan,
-                Filter_1.DateOperator.GreaterThanOrEqualTo,
-                Filter_1.DateOperator.EqualTo,
-                Filter_1.DateOperator.LessThan,
-                Filter_1.DateOperator.LessThanOrEqualTo,
-                Filter_1.DateOperator.NotEqualTo,
-            ].includes(operator) &&
-            !(0, date_fns_1.isValid)((0, date_fns_1.parse)(value, 'yyyy-mm-dd', new Date())) &&
-            (filterInitialized || !filter)) {
-            setValue((0, date_fns_1.startOfToday)().toISOString().substring(0, 10));
-        }
-        else if (type === Filter_1.FieldType.Date &&
-            [
-                Filter_1.DateOperator.InTheLast,
-                Filter_1.DateOperator.InTheCurrent,
-                Filter_1.DateOperator.InThePrevious,
-            ].includes(operator) &&
-            (value === '' || (typeof value !== 'number' && isNaN(Number(value)))) &&
-            (filterInitialized || !filter)) {
-            setValue('90');
-        }
-        const options = getUnits(operator);
-        setUnitOptions(options);
-        if (unit === '' && options.length > 0) {
-            setUnit(Filter_1.TimeUnit.Day);
-        }
-        else if (!options || !options.includes(unit)) {
-            setUnit('');
-        }
-    }
-    function onFieldChange(field, fieldOptions, table) {
-        if (field !== '') {
-            const selectedOption = fieldOptions.find((option) => option.name === field && (!table || option.table === table));
-            if (selectedOption) {
-                const fieldValues = getFieldValues(selectedOption.name, selectedOption.table);
-                if (filterInitialized || !filter) {
-                    if (!selectedOptions.every((item) => fieldValues
-                        .map((v) => v.toLowerCase())
-                        .includes(item.value.toLowerCase()))) {
-                        setSelectedOptions([]);
-                    }
-                }
-                else {
-                    const preSelected = Array.isArray(filter.value)
-                        ? filter.value.map((val) => {
-                            return { label: val, value: val };
-                        })
-                        : [];
-                    // if a filter comes with invalid choices, include them anyway
-                    const valuesSet = new Set(fieldValues.map((v) => v.toLowerCase()));
-                    preSelected.forEach((option) => {
-                        if (!valuesSet.has(option.value.toLowerCase())) {
-                            valuesSet.add(option.value.toLowerCase());
-                            fieldValues.push(option.value);
-                        }
-                    });
-                }
-                setFieldValues(fieldValues);
-                setType((0, filterProcessing_1.getType)(selectedOption.type));
-                onTypeChange((0, filterProcessing_1.getType)(selectedOption.type));
-                if (selectedOption.table !== '') {
-                    setTable(selectedOption.table);
-                }
-            }
-        }
-        else {
-            setType(null);
-            onTypeChange(null);
-            setFieldValues([]);
-            setSelectedOptions([]);
-        }
-    }
-    // Function that returns the list of units used for certain DateOperators
-    const getUnits = (operator) => {
-        switch (operator) {
-            case Filter_1.DateOperator.InTheLast:
-            case Filter_1.DateOperator.InThePrevious:
-                return [
-                    Filter_1.TimeUnit.Year,
-                    Filter_1.TimeUnit.Month,
-                    Filter_1.TimeUnit.Week,
-                    Filter_1.TimeUnit.Day,
-                    Filter_1.TimeUnit.Hour,
-                ];
-            case Filter_1.DateOperator.InTheCurrent:
-                return [
-                    Filter_1.TimeUnit.Year,
-                    Filter_1.TimeUnit.Quarter,
-                    Filter_1.TimeUnit.Month,
-                    Filter_1.TimeUnit.Week,
-                    Filter_1.TimeUnit.Day,
-                    Filter_1.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;
-        if (typeof newOp === 'string') {
-            setOperator(newOp);
-            onOperatorChange(newOp);
-        }
-    };
-    const handleFieldChange = (event) => {
-        const value = event.target.value;
-        if (typeof value === 'string') {
-            const [_table, _field] = value.split(':');
-            const newField = _field;
-            const newTable = _table !== '' ? _table : undefined;
-            setField(newField);
-            onFieldChange(newField, fieldOptions, newTable);
-        }
-    };
-    // 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(Filter_1.DateOperator.Custom);
-        onOperatorChange(Filter_1.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 Filter_1.FieldType.Date:
-                switch (operator) {
-                    case Filter_1.DateOperator.InTheLast:
-                    case Filter_1.DateOperator.InThePrevious:
-                        if (value === undefined ||
-                            value === '' ||
-                            (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,
-                            filterType: Filter_1.InternalFilterType.DateFilter,
-                            fieldType: Filter_1.FieldType.Date,
-                            operator: operator,
-                            value: { value: value, unit: unit },
-                            table,
-                        });
-                        break;
-                    case Filter_1.DateOperator.InTheCurrent:
-                        if (!getUnits(operator).includes(unit)) {
-                            alert('Please specify a valid unit');
-                            return;
-                        }
-                        onSubmitFilter({
-                            field,
-                            filterType: Filter_1.InternalFilterType.DateFilter,
-                            fieldType: Filter_1.FieldType.Date,
-                            operator: operator,
-                            value: { value: 0, unit: unit },
-                            table,
-                        });
-                        break;
-                    case Filter_1.DateOperator.Custom:
-                        if (!startDate || !endDate) {
-                            alert('Please specify a valid date range');
-                            return;
-                        }
-                        onSubmitFilter({
-                            field,
-                            filterType: Filter_1.InternalFilterType.DateCustomFilter,
-                            fieldType: Filter_1.FieldType.Date,
-                            operator: operator,
-                            value: { startDate, endDate },
-                            table,
-                        });
-                        break;
-                    case Filter_1.DateOperator.EqualTo:
-                    case Filter_1.DateOperator.NotEqualTo:
-                    case Filter_1.DateOperator.GreaterThan:
-                    case Filter_1.DateOperator.LessThan:
-                    case Filter_1.DateOperator.GreaterThanOrEqualTo:
-                    case Filter_1.DateOperator.LessThanOrEqualTo: {
-                        const parsedDate = (0, date_fns_1.parse)(value, 'yyyy-mm-dd', new Date());
-                        if (!(0, date_fns_1.isValid)(parsedDate)) {
-                            alert('Please specify a valid date in yyyy-mm-dd');
-                            return;
-                        }
-                        const normalizedDate = (0, date_fns_1.format)(parsedDate, 'yyyy-mm-dd');
-                        onSubmitFilter({
-                            field,
-                            filterType: Filter_1.InternalFilterType.DateComparisonFilter,
-                            fieldType: Filter_1.FieldType.Date,
-                            operator: operator,
-                            value: normalizedDate,
-                            table,
-                        });
-                        break;
-                    }
-                    case Filter_1.NullOperator.IsNotNull:
-                    case Filter_1.NullOperator.IsNull:
-                        onSubmitFilter({
-                            field,
-                            filterType: Filter_1.InternalFilterType.NullFilter,
-                            fieldType: Filter_1.FieldType.Null,
-                            operator: operator,
-                            value: null,
-                            table,
-                        });
-                        break;
-                }
-                break;
-            case Filter_1.FieldType.String:
-                switch (operator) {
-                    case Filter_1.StringOperator.Is:
-                    case Filter_1.StringOperator.IsNot:
-                        if (!selectedOptions || selectedOptions.length === 0) {
-                            alert('Please specify some values');
-                            return;
-                        }
-                        onSubmitFilter({
-                            field,
-                            filterType: Filter_1.InternalFilterType.StringInFilter,
-                            fieldType: Filter_1.FieldType.String,
-                            operator: operator,
-                            value: selectedOptions.map((val) => val.label),
-                            table,
-                        });
-                        break;
-                    case Filter_1.NullOperator.IsNotNull:
-                    case Filter_1.NullOperator.IsNull:
-                        onSubmitFilter({
-                            field,
-                            filterType: Filter_1.InternalFilterType.NullFilter,
-                            fieldType: Filter_1.FieldType.Null,
-                            operator: operator,
-                            value: null,
-                            table,
-                        });
-                        break;
-                    default:
-                        if (typeof value !== 'string' || value === '') {
-                            alert('Please specify a valid string');
-                            return;
-                        }
-                        onSubmitFilter({
-                            field,
-                            filterType: Filter_1.InternalFilterType.StringFilter,
-                            fieldType: Filter_1.FieldType.String,
-                            operator: operator,
-                            value,
-                            table,
-                        });
-                }
-                break;
-            case Filter_1.FieldType.Number:
-                switch (operator) {
-                    case Filter_1.NullOperator.IsNotNull:
-                    case Filter_1.NullOperator.IsNull:
-                        onSubmitFilter({
-                            field,
-                            filterType: Filter_1.InternalFilterType.NullFilter,
-                            fieldType: Filter_1.FieldType.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,
-                            filterType: Filter_1.InternalFilterType.NumericFilter,
-                            fieldType: Filter_1.FieldType.Number,
-                            operator: operator,
-                            value,
-                            table,
-                        });
-                }
-                break;
-            case Filter_1.FieldType.Boolean:
-                switch (operator) {
-                    case Filter_1.NullOperator.IsNotNull:
-                    case Filter_1.NullOperator.IsNull:
-                        onSubmitFilter({
-                            field,
-                            filterType: Filter_1.InternalFilterType.NullFilter,
-                            fieldType: Filter_1.FieldType.Null,
-                            operator: operator,
-                            value: null,
-                            table,
-                        });
-                        break;
-                    case Filter_1.BoolOperator.EqualTo:
-                    case Filter_1.BoolOperator.NotEqualTo:
-                        onSubmitFilter({
-                            field,
-                            filterType: Filter_1.InternalFilterType.BooleanFilter,
-                            fieldType: Filter_1.FieldType.Boolean,
-                            operator: operator,
-                            value: value,
-                            table,
-                        });
-                        break;
-                }
-                break;
-            case Filter_1.FieldType.Null:
-                switch (operator) {
-                    case Filter_1.NullOperator.IsNotNull:
-                    case Filter_1.NullOperator.IsNull:
-                        onSubmitFilter({
-                            field,
-                            filterType: Filter_1.InternalFilterType.NullFilter,
-                            fieldType: Filter_1.FieldType.Null,
-                            operator: operator,
-                            value: null,
-                            table,
-                        });
-                        break;
-                }
-                break;
-            default:
-                alert('Error parsing filter');
-        }
-    };
-    // Handler filter delete
-    const handleDelete = () => {
-        onDeleteFilter();
-    };
-    const filterColumnLabel = (option) => {
-        if (reportBuilderColumns) {
-            const column = reportBuilderColumns.find((col) => col.field === option.name && (col.table || '') === option.table);
-            if (column && column.alias) {
-                return (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(column.alias);
-            }
-        }
-        return option.table !== '' && !hideTableName
-            ? `${(0, textProcessing_1.snakeAndCamelCaseToTitleCase)(option.name)} (${option.table})`
-            : (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(option.name);
-    };
-    if (filter && !filterInitialized) {
-        return null; // prevent flashing
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 12,
-        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                    display: 'flex',
-                    gap: '12px',
-                    flexDirection: 'column',
-                    width: '100%',
-                    padding: '6px 0px',
-                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                        display: 'flex',
-                        gap: '20px',
-                        flexDirection: 'row',
-                        width: '100%',
-                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 20 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { value: `${table ?? ''}:${field}`, width: 200, onChange: handleFieldChange, options: [
-                                    ...fieldOptions.map((option) => ({
-                                        value: `${option.table}:${option.name}`,
-                                        label: filterColumnLabel(option),
-                                    })),
-                                ] }) }), operatorOptions.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 20 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { value: operator, width: 200, onChange: handleOperatorChange, options: [
-                                    ...operatorOptions.map((operator) => ({
-                                        value: operator,
-                                        label: operator === Filter_1.StringOperator.Is ||
-                                            operator === Filter_1.StringOperator.IsNot
-                                            ? `${operator} one of`
-                                            : operator,
-                                    })),
-                                ] }) })), (() => {
-                            switch (operator) {
-                                case Filter_1.BoolOperator.EqualTo:
-                                case Filter_1.BoolOperator.NotEqualTo:
-                                case Filter_1.StringOperator.IsExactly:
-                                case Filter_1.StringOperator.IsNotExactly:
-                                case Filter_1.StringOperator.Contains:
-                                case Filter_1.NumberOperator.EqualTo:
-                                case Filter_1.NumberOperator.NotEqualTo:
-                                case Filter_1.NumberOperator.GreaterThan:
-                                case Filter_1.NumberOperator.LessThan:
-                                case Filter_1.NumberOperator.GreaterThanOrEqualTo:
-                                case Filter_1.NumberOperator.LessThanOrEqualTo:
-                                    if (type === 'boolean') {
-                                        return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 20 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { value: value, width: 200, onChange: (event) => setValue(event.target.value), options: [
-                                                    { value: true, label: 'true' },
-                                                    { value: false, label: 'false' },
-                                                ] }) }));
-                                    }
-                                    else {
-                                        return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 20 }, children: (0, jsx_runtime_1.jsx)(TextInputComponent, { value: value, width: 120, onChange: (event) => {
-                                                    setValue(event.target.value);
-                                                } }) }));
-                                    }
-                                case Filter_1.StringOperator.Is:
-                                case Filter_1.StringOperator.IsNot:
-                                    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 20 }, children: (0, jsx_runtime_1.jsx)(MultiSelectComponent, { options: fieldValues.length > 0 &&
-                                                fieldValues[0] !== 'EXCEEDS_LIMIT'
-                                                ? fieldValues.map((v) => {
-                                                    return { value: v.toLowerCase(), label: v };
-                                                })
-                                                : fieldValues.length > 0
-                                                    ? [
-                                                        {
-                                                            value: 'EXCEEDS_LIMIT',
-                                                            label: 'Exceeds Limit',
-                                                        },
-                                                    ]
-                                                    : [], isLoading: fieldValuesMapIsLoading, width: 200, value: selectedOptions.map((val) => val.value.toLowerCase()), onChange: (e) => {
-                                                if (e.target.value === '' ||
-                                                    (Array.isArray(e.target.value) &&
-                                                        e.target.value.length === 0)) {
-                                                    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 Filter_1.DateOperator.Custom:
-                                    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 20 }, children: (0, jsx_runtime_1.jsx)(QuillDateRangePicker_1.QuillDateRangePicker, { dateRange: {
-                                                startDate: startDate
-                                                    ? new Date(startDate + 'T00:00:00')
-                                                    : (0, date_fns_1.startOfToday)(),
-                                                endDate: endDate
-                                                    ? new Date(endDate + 'T00:00:00')
-                                                    : (0, date_fns_1.startOfToday)(),
-                                            }, preset: "", presetOptions: [], onChangePreset: () => { }, hidePreset: true, onChangeDateRange: (value) => {
-                                                handleDateRangeSelect({
-                                                    from: value.startDate,
-                                                    to: value.endDate,
-                                                });
-                                            } }) }));
-                                case Filter_1.DateOperator.InTheLast:
-                                case Filter_1.DateOperator.InThePrevious:
-                                    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row' }, children: [(0, jsx_runtime_1.jsx)(TextInputComponent, { value: value, width: 120, onChange: (event) => {
-                                                    setValue(event.target.value);
-                                                } }), unitOptions.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { marginLeft: '10px' }, children: (0, jsx_runtime_1.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 Filter_1.DateOperator.InTheCurrent:
-                                    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 20 }, children: unitOptions.length > 0 && ((0, jsx_runtime_1.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 !== Filter_1.DateOperator.InTheCurrent &&
-                                                        value &&
-                                                        value !== '1' &&
-                                                        value !== 1
-                                                        ? 's'
-                                                        : ''}`,
-                                                })),
-                                            ] })) }));
-                                default:
-                                    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-                            }
-                        })()] }) }), (0, jsx_runtime_1.jsx)("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'row',
-                    justifyContent: 'flex-end',
-                }, children: filter ? ((0, jsx_runtime_1.jsxs)("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        justifyContent: 'end',
-                        gap: 8,
-                        width: '100%',
-                    }, children: [SecondaryButtonComponent ? ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleDelete, label: 'Delete' })) : ((0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleDelete, label: 'Delete' })), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleSubmit, label: 'Save' })] })) : (operator && ((0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleSubmit, label: 'Add Filter' }))) })] }));
-}