@vuu-ui/vuu-filters 2.1.18 → 2.1.19-beta.2

package/src/filter-container/FilterContainer.js

@@ -0,0 +1,121 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { ColumnFilterContext, useFilterContainer, useFilterContext } from "./useFilterContainer.js";
+import { ColumnFilter } from "../column-filter/ColumnFilter.js";
+import { filterDescriptorHasFilter, isNullFilter, useSavedFilters } from "../filter-provider/FilterContext.js";
+import { filtersAreEqual, getColumnValueFromFilter, isBetweenOperator } from "@vuu-ui/vuu-utils";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import FilterContainer from "./FilterContainer.css";
+const classBase = "vuuFilterContainer";
+const notEmpty = (value)=>Array.isArray(value) ? "" !== value[0] && "" !== value[1] : "" !== value;
+const FilterContainerColumnFilter = ({ column, operator = "=", variant, ...props })=>{
+    const { filterProviderKey, onChange: onFilterContextChange, onCommit: onFilterContextCommit, register } = useFilterContext(column, true);
+    const initialValue = useMemo(()=>register(column, operator), [
+        column,
+        operator,
+        register
+    ]);
+    const [value, setValue] = useState(initialValue);
+    const valueRef = useRef(initialValue);
+    const { currentFilter } = useSavedFilters(filterProviderKey);
+    const currentFilterRef = useRef(currentFilter);
+    useMemo(()=>{
+        if (currentFilterRef.current.id !== currentFilter.id || !filtersAreEqual(currentFilterRef.current.filter, currentFilter.filter)) {
+            currentFilterRef.current = currentFilter;
+            if (isNullFilter(currentFilter) && notEmpty(valueRef.current)) {
+                if (Array.isArray(valueRef.current)) if ("time" === column.type) valueRef.current = [
+                    "00:00:00",
+                    "23:59:59"
+                ];
+                else valueRef.current = [
+                    "",
+                    ""
+                ];
+                else valueRef.current = "";
+                setValue(valueRef.current);
+            } else if (filterDescriptorHasFilter(currentFilter)) {
+                const v = getColumnValueFromFilter(column, operator, currentFilter.filter);
+                if (isBetweenOperator(operator) && !Array.isArray(v) && Array.isArray(valueRef.current)) {
+                    const [v1, v2] = valueRef.current;
+                    if (`${v}` === v1 && "" === v2) return;
+                    valueRef.current = [
+                        `${v}`,
+                        ""
+                    ];
+                    setValue(valueRef.current);
+                } else if (v !== valueRef.current) {
+                    valueRef.current = v;
+                    setValue(v);
+                }
+            }
+        }
+    }, [
+        column,
+        currentFilter
+    ]);
+    const handleCommit = useCallback((column, op, value, extendedFilterOptions)=>{
+        valueRef.current = value;
+        setValue(value);
+        onFilterContextCommit(column, op, value, extendedFilterOptions);
+    }, [
+        onFilterContextCommit
+    ]);
+    const handleColumnFilterChange = useCallback((value, column, op)=>{
+        const { current: v } = valueRef;
+        valueRef.current = Array.isArray(v) ? [
+            `${value}`,
+            v[1]
+        ] : value;
+        setValue(valueRef.current);
+        onFilterContextChange(valueRef.current, column, op);
+    }, [
+        onFilterContextChange
+    ]);
+    const handleColumnRangeFilterChange = useCallback((value, column, op)=>{
+        const { current: v } = valueRef;
+        valueRef.current = Array.isArray(v) ? [
+            v[0],
+            `${value}`
+        ] : value;
+        setValue(valueRef.current);
+        onFilterContextChange(valueRef.current, column, op);
+    }, [
+        onFilterContextChange
+    ]);
+    return /*#__PURE__*/ jsx(ColumnFilter, {
+        ...props,
+        column: column,
+        onColumnFilterChange: handleColumnFilterChange,
+        onColumnRangeFilterChange: handleColumnRangeFilterChange,
+        onCommit: handleCommit,
+        operator: operator,
+        value: value,
+        variant: variant
+    });
+};
+const FilterContainer_FilterContainer = ({ children, className, filter, filterProviderKey, onFilterApplied, onFilterCleared, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-filter-container",
+        css: FilterContainer,
+        window: targetWindow
+    });
+    console.log(`[FilterContainer] current filter ${JSON.stringify(filter)}`);
+    const filterContextProps = useFilterContainer({
+        filter,
+        filterProviderKey,
+        onFilterApplied,
+        onFilterCleared
+    });
+    return /*#__PURE__*/ jsx(ColumnFilterContext.Provider, {
+        value: filterContextProps,
+        children: /*#__PURE__*/ jsx("div", {
+            ...htmlAttributes,
+            className: clsx(classBase, className, "vuuScrollable"),
+            children: children
+        })
+    });
+};
+export { FilterContainerColumnFilter, FilterContainer_FilterContainer as FilterContainer };

package/src/filter-container/useFilterContainer.js

@@ -0,0 +1,82 @@
+import { createContext, useCallback, useContext, useMemo, useRef } from "react";
+import { getColumnValueFromFilter, isBetweenOperator, isSingleValueFilter } from "@vuu-ui/vuu-utils";
+import { FilterAggregator } from "../FilterAggregator.js";
+const ColumnFilterContext = createContext({
+    filterContainerInstalled: false
+});
+function useFilterContext(column, throwIfNoContainer = false) {
+    const ctx = useContext(ColumnFilterContext);
+    if (ctx) return {
+        filterProviderKey: ctx.filterProviderKey,
+        register: ctx.register,
+        getValue: ctx.getValue,
+        onChange: ctx.onChange,
+        onCommit: ctx.onCommit
+    };
+    if (!throwIfNoContainer) return {
+        filterContainerInstalled: false
+    };
+    throw Error("[useFilterContainer:useFilterContext] no FilterContainer installed");
+}
+const EmptyTuple = [
+    "",
+    ""
+];
+const useFilterContainer = ({ filter, filterProviderKey = "GLOBAL", onFilterApplied, onFilterCleared })=>{
+    const valueRef = useRef({});
+    const filterRef = useRef(void 0);
+    filterRef.current = filter;
+    const filterAggregator = useMemo(()=>new FilterAggregator(filter), [
+        filter
+    ]);
+    const register = useCallback((column, op)=>valueRef.current[column.name] = getColumnValueFromFilter(column, op, filterRef.current), []);
+    const getValue = useCallback((column, fallbackValue)=>{
+        const value = valueRef.current[column.name];
+        if (void 0 !== value) return value;
+        if (void 0 !== fallbackValue) return fallbackValue;
+        throw Error(`[useFilterContainer] column ${column.name} has not been registered`);
+    }, []);
+    const handleCommit = useCallback((column, op, value = "", extendedFilterOptions)=>{
+        if (Array.isArray(value)) {
+            if (!isBetweenOperator(op)) throw Error(`[useFilterContainer] array value is not valid for operator ${op}`);
+            if ("" === value[0] && "" === value[1]) {
+                if (!filterAggregator.remove(column)) return;
+            } else if ("string" == typeof value[0] && "string" == typeof value[1]) filterAggregator.add(column, value, op, extendedFilterOptions);
+            else throw Error(`[useFilterContainer] handleCommit value  [${typeof value[0]},${typeof value[1]}] for operator ${op} supports [string,string] only`);
+        } else if ("" === value) {
+            if (!filterAggregator.remove(column)) return;
+        } else if ("string" == typeof value || "number" == typeof value) filterAggregator.add(column, value, op, extendedFilterOptions);
+        else throw Error(`[useFilterContainer] handleCommit value ${typeof value} supports string, number only`);
+        const { filter } = filterAggregator;
+        if (filter) {
+            console.log(`filter applied ${JSON.stringify(filter)}`);
+            onFilterApplied?.(filter);
+        } else onFilterCleared?.();
+    }, [
+        filterAggregator,
+        onFilterApplied,
+        onFilterCleared
+    ]);
+    const handleInputChange = useCallback((value, column)=>{
+        if (filterAggregator.has(column)) if (Array.isArray(value)) {
+            const filter = filterAggregator.get(column);
+            isSingleValueFilter(filter) || handleCommit(column, "between", [
+                "",
+                ""
+            ]);
+        } else handleCommit(column, "=", "");
+        valueRef.current[column.name] = value;
+    }, [
+        filterAggregator,
+        handleCommit
+    ]);
+    return {
+        filterContainerInstalled: true,
+        filterProviderKey,
+        onChange: handleInputChange,
+        onCommit: handleCommit,
+        getValue,
+        register
+    };
+};
+export { ColumnFilterContext, EmptyTuple, useFilterContainer, useFilterContext };

package/src/filter-context-menu/useFilterContextMenu.js

@@ -0,0 +1,106 @@
+import { filtersAreEqual } from "@vuu-ui/vuu-utils";
+import { useCallback, useMemo, useRef } from "react";
+import { useSavedFilters } from "../filter-provider/FilterContext.js";
+import { FilterAggregator } from "../FilterAggregator.js";
+const EmptyAggregator = new FilterAggregator();
+const defaultProps = {
+    filterColumns: "*"
+};
+const useFilterContextMenu = ({ filterColumns = "*", filterProviderKey } = defaultProps)=>{
+    const { currentFilter, clearCurrentFilter, setCurrentFilter } = useSavedFilters(filterProviderKey);
+    const filterAggregatorRef = useRef(EmptyAggregator);
+    useMemo(()=>{
+        if (!filtersAreEqual(currentFilter.filter, filterAggregatorRef.current.filter)) filterAggregatorRef.current = currentFilter.filter ? new FilterAggregator(currentFilter.filter) : new FilterAggregator();
+    }, [
+        currentFilter
+    ]);
+    const menuBuilder = useCallback((_location, options)=>{
+        const { column, dataRow } = options;
+        const { current: fag } = filterAggregatorRef;
+        const { name, label = name } = column;
+        const value = dataRow[column.name];
+        const ClearFilter = {
+            id: "filter-clear",
+            label: "Clear filter",
+            options
+        };
+        if ("*" === filterColumns || filterColumns.includes(column.name)) {
+            const SetFilter = {
+                id: "filter-set",
+                label: `Set filter ${label} '${value}'`,
+                options
+            };
+            if (fag.isEmpty) return [
+                SetFilter
+            ];
+            if (!fag.has(column)) return [
+                SetFilter,
+                {
+                    id: "filter-add",
+                    label: `Add ${label} '${value}' to existing filter`,
+                    options
+                },
+                ClearFilter
+            ];
+            if (1 === fag.count) return [
+                ClearFilter
+            ];
+            else return [
+                {
+                    id: "filter-remove",
+                    label: `Remove ${label} '${value}' from filter`,
+                    options
+                },
+                SetFilter,
+                ClearFilter
+            ];
+        }
+        if (!fag.isEmpty) return [
+            ClearFilter
+        ];
+        return [];
+    }, [
+        filterColumns
+    ]);
+    const menuActionHandler = useCallback((menuItemId, options)=>{
+        if (!options) return false;
+        {
+            const { current: fag } = filterAggregatorRef;
+            const { column, dataRow } = options;
+            switch(menuItemId){
+                case "filter-clear":
+                    clearCurrentFilter();
+                    break;
+                case "filter-add":
+                    {
+                        const value = dataRow[column.name];
+                        fag.add(column, value, "=");
+                        if (fag.filter) setCurrentFilter(fag.filter);
+                    }
+                    break;
+                case "filter-remove":
+                    fag.remove(column);
+                    if (fag.filter) setCurrentFilter(fag.filter);
+                    break;
+                case "filter-set":
+                    {
+                        const value = dataRow[column.name];
+                        fag.clear();
+                        fag.add(column, value, "=");
+                        if (fag.filter) setCurrentFilter(fag.filter);
+                    }
+                    break;
+                default:
+                    return false;
+            }
+        }
+    }, [
+        clearCurrentFilter,
+        setCurrentFilter
+    ]);
+    return {
+        menuActionHandler,
+        menuBuilder
+    };
+};
+export { useFilterContextMenu };

package/src/filter-display/FilterDisplay.css.js

@@ -0,0 +1,31 @@
+const css = `
+.vuuFilterDisplay {
+  gap: var(--salt-spacing-50);
+  padding: var(--vuuFilterDisplay-padding, var(--salt-spacing-200));
+  flex-direction: column;
+  width: fit-content;
+  display: flex;
+
+  & .vuuFilterDisplay-filter-clause {
+    align-items: center;
+    gap: var(--salt-spacing-200);
+    white-space: no;
+    justify-content: space-between;
+    display: flex;
+  }
+
+  & .vuuFilterDisplay-column {
+    white-space: no;
+    flex: auto;
+  }
+
+  & .vuuFilterDisplay-value {
+    text-align: right;
+    white-space: nowrap;
+    flex: 0 0 120px;
+  }
+}
+
+
+`;
+export default css;

package/src/filter-display/FilterDisplay.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { forwardRef, useCallback } from "react";
+import { getFilterClausesForDisplay } from "../filter-utils.js";
+import FilterDisplay_0 from "./FilterDisplay.css";
+import { IconButton } from "@vuu-ui/vuu-ui-controls";
+import { queryClosest } from "@vuu-ui/vuu-utils";
+const classBase = "vuuFilterDisplay";
+const getColumnLabel = (columnName, columns)=>{
+    if (columns) {
+        const column = columns.find((c)=>c.name === columnName);
+        if (column) return column.label ?? columnName;
+    }
+    return columnName;
+};
+const FilterDisplay_FilterDisplay = /*#__PURE__*/ forwardRef(function({ allowDelete = false, className, columns, filter, onDeleteFilterClause, ...htmlAttributes }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-filter-display",
+        css: FilterDisplay_0,
+        window: targetWindow
+    });
+    const handleDelete = useCallback((e)=>{
+        const { dataset: { columnName } } = queryClosest(e.target, "[data-column-name]", true);
+        if (columnName) onDeleteFilterClause?.(columnName);
+    }, [
+        onDeleteFilterClause
+    ]);
+    const filterClauseList = getFilterClausesForDisplay(filter, columns);
+    return /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        ref: forwardedRef,
+        children: filterClauseList.map(([columnName, value])=>/*#__PURE__*/ jsxs("div", {
+                className: `${classBase}-filter-clause`,
+                "data-column-name": columnName,
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: `${classBase}-column`,
+                        children: getColumnLabel(columnName)
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: `${classBase}-value`,
+                        children: value
+                    }),
+                    allowDelete ? /*#__PURE__*/ jsx(IconButton, {
+                        "data-embedded": true,
+                        icon: "close",
+                        appearance: "transparent",
+                        sentiment: "neutral",
+                        onClick: handleDelete
+                    }) : null
+                ]
+            }, columnName), [])
+    });
+});
+export { FilterDisplay_FilterDisplay as FilterDisplay };

package/src/filter-editor/FilterClauseCombinator.css.js

@@ -0,0 +1,15 @@
+const css = `
+.vuuFilterClauseCombinator {
+  --saltButton-height: calc(var(--salt-spacing-400));
+  padding: 0 4px;
+  font-size: 9px;
+}
+
+.vuuFilterClauseCombinator:focus {
+  background-color: var(--vuu-color-gray-50);
+  color: #fff;
+}
+
+
+`;
+export default css;

package/src/filter-editor/FilterClauseCombinator.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { CycleStateButton } from "@vuu-ui/vuu-ui-controls";
+import { useCallback } from "react";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import FilterClauseCombinator from "./FilterClauseCombinator.css";
+const classBase = "vuuFilterClauseCombinator";
+const FilterClauseCombinator_FilterClauseCombinator = ({ onChange, onKeyDown, operator })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-filterclause-combinator",
+        css: FilterClauseCombinator,
+        window: targetWindow
+    });
+    const handleChange = useCallback((value)=>{
+        onChange(value);
+    }, [
+        onChange
+    ]);
+    return /*#__PURE__*/ jsx(CycleStateButton, {
+        className: classBase,
+        onChange: handleChange,
+        onKeyDown: onKeyDown,
+        value: operator,
+        values: [
+            "and",
+            "or"
+        ],
+        variant: "primary"
+    });
+};
+export { FilterClauseCombinator_FilterClauseCombinator as FilterClauseCombinator };

package/src/filter-editor/FilterEditor.css.js

@@ -0,0 +1,13 @@
+const css = `
+.vuuFilterEditor {
+  align-items: center;
+  gap: var(--salt-spacing-200);
+  height: var(--vuuFilterEditor-height, calc(var(--salt-size-base) + var(--salt-size-unit)));
+  grid-area: 2 / 1 / 3 / 4;
+  width: 100%;
+  display: flex;
+}
+
+
+`;
+export default css;

package/src/filter-editor/FilterEditor.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import { SplitButton } from "@vuu-ui/vuu-ui-controls";
+import { Button } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { FilterClause } from "../filter-clause/index.js";
+import { FilterClauseCombinator } from "./FilterClauseCombinator.js";
+import { useFilterEditor } from "./useFilterEditor.js";
+import FilterEditor from "./FilterEditor.css";
+const classBase = "vuuFilterEditor";
+const FilterEditor_FilterEditor = ({ columnDescriptors, filter, onCancel, onSave, vuuTable, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-filter-editor",
+        css: FilterEditor,
+        window: targetWindow
+    });
+    const { columnsByName, filterModel, focusSaveButton, setContainer, onCancelFilterClause, onCancelFilterEdit, onChangeFilterCombinator, onKeyDownCombinator, saveButtonRef, saveButtonProps } = useFilterEditor({
+        columnDescriptors,
+        filter,
+        onCancel,
+        onSave
+    });
+    const getContents = ()=>{
+        const { op } = filterModel;
+        const content = [];
+        filterModel.filterClauses.forEach((filterClauseModel, i)=>{
+            if (i > 0 && op) content.push(/*#__PURE__*/ jsx(FilterClauseCombinator, {
+                onChange: onChangeFilterCombinator,
+                onKeyDown: onKeyDownCombinator,
+                operator: op
+            }, `filter-operator-${i}`));
+            content.push(/*#__PURE__*/ jsx(FilterClause, {
+                columnsByName: columnsByName,
+                "data-index": i,
+                filterClauseModel: filterClauseModel,
+                onCancel: onCancelFilterClause,
+                onFocusSave: focusSaveButton,
+                vuuTable: vuuTable
+            }, `editor-${i}`));
+        });
+        return content;
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: classBase,
+        ref: setContainer,
+        children: [
+            getContents(),
+            /*#__PURE__*/ createElement(SplitButton, {
+                ...saveButtonProps,
+                disabled: !filterModel.isValid,
+                key: "save-button",
+                ref: saveButtonRef
+            }, "Save"),
+            /*#__PURE__*/ jsx(Button, {
+                onClick: onCancelFilterEdit,
+                variant: "secondary",
+                children: "Cancel"
+            })
+        ]
+    });
+};
+export { FilterEditor_FilterEditor as FilterEditor };

package/src/filter-editor/index.js

@@ -0,0 +1 @@
+export * from "./FilterEditor.js";