extend-column-filters (#1700)

ColumnFilter will be the default filter implementation for a standalone vuu column filter
It will offer operator selection (optionally) and value selection, with appropriate filter value editor for the column type

Author: anandBalachandar

vuu-ui/packages/vuu-data-react/src/data-editing/get-data-item-edit-control.tsx

@@ -27,6 +27,7 @@ export interface DataItemEditControlProps {
    */
   dataDescriptor: DataValueDescriptor;
   defaultValue?: string | number | readonly string[];
+  value?: string | number | readonly string[]; //TODO - will be used in VuuTimePicker
   errorMessage?: string;
   onCommit: CommitHandler<HTMLElement>;
   table?: TableSchemaTable;

vuu-ui/packages/vuu-filters/src/__tests__/__component__/ColumnFilter.cy.tsx

@@ -0,0 +1,36 @@
+import { LocalDataSourceProvider } from "@vuu-ui/vuu-data-test";
+import { TextColumnFilterValueSetViaBtn } from "../../../../../showcase/src/examples/Filters/ColumnFilter.examples";
+
+describe("ColumnFilter", () => {
+  describe("WHEN text columnfilter is rendered", () => {
+    beforeEach(() => {
+      cy.mount(
+        <LocalDataSourceProvider>
+          <TextColumnFilterValueSetViaBtn />
+        </LocalDataSourceProvider>,
+      );
+    });
+
+    it("THEN the component is rendered with an initial value", () => {
+      const container = cy.findByTestId("columnfilter");
+      container.should("have.class", "vuuColumnFilter");
+      container.find("input").should("have.value", "AAOP.N");
+    });
+
+    it("THEN the component shows suggestions on input", () => {
+      const container = cy.findByTestId("columnfilter");
+      container.find("input").clear().type("A");
+      cy.findAllByRole("option", { name: "AAOO.L" }).should("be.visible");
+    });
+
+    it("THEN component renders a new value provided via state set from outside the container", () => {
+      const container = cy.findByTestId("columnfilter");
+      const input = container.find("input");
+      input.should("have.value", "AAOP.N");
+      cy.contains("button", "AAOQ.OQ").realClick();
+      input.should("have.value", "AAOQ.OQ");
+      cy.contains("button", "AAOU.MI").realClick();
+      input.should("have.value", "AAOU.MI");
+    });
+  });
+});

vuu-ui/packages/vuu-filters/src/column-filter/ColumnFilter.tsx

@@ -13,62 +13,92 @@ import cx from "clsx";
 
 import columnFilterCss from "./ColumnFilter.css";
 import { getDataItemEditControl } from "@vuu-ui/vuu-data-react";
-import { useCallback, useMemo } from "react";
-import { CommitHandler } from "@vuu-ui/vuu-utils";
+import { ForwardedRef, forwardRef, ReactElement, useMemo } from "react";
 import { VuuTable } from "@vuu-ui/vuu-protocol-types";
-import {
-  assertValidValue,
-  ColumnFilterHookProps,
-  FilterValue,
-} from "./useColumnFilter";
+import { assertValidOperator, assertValidValue, Operator, useColumnFilter } from "./useColumnFilter";
+import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
 
 const classBase = "vuuColumnFilter";
+export type FilterValue = string | readonly string[] | number;
+export type ColumnFilterValue = FilterValue | [FilterValue, FilterValue];
 
-export interface ColumnFilterProps
-  extends ColumnFilterHookProps,
-    SegmentedButtonGroupProps {
+export interface ColumnFilterProps extends SegmentedButtonGroupProps {
+  column: ColumnDescriptor;
+  operator?: Operator;
+  /**
+   * Display operator picker.
+   */
   showOperatorPicker?: boolean;
   /**
    * VuuTable is required if typeahead support is expected.
    */
   table?: VuuTable;
-
   /**
-   * Initial filter value. Pair of values expewcted when operator is
+   * Filter value. Pair of values expected when operator is
    * 'between'
    */
-  value?: FilterValue | [FilterValue, FilterValue];
+  value?: ColumnFilterValue;
+  /**
+   * Filter change events.
+   */
+  onFilterChange?: (
+    value: ColumnFilterValue | undefined,
+    columnName: string,
+    op: Operator,
+  ) => void;
 }
 
-export const ColumnFilter = ({
-  column,
-  className,
-  operator = "=",
-  showOperatorPicker = false,
-  table,
-  value,
-  ...buttonGroupProps
-}: ColumnFilterProps) => {
+export const ColumnFilter = forwardRef(function ColumnFilter(
+  {
+    column,
+    className,
+    operator = "=",
+    showOperatorPicker = false,
+    table,
+    value,
+    onFilterChange,
+    ...buttonGroupProps
+  }: ColumnFilterProps,
+  forwardRef: ForwardedRef<HTMLDivElement>,
+) {
   const targetWindow = useWindow();
   useComponentCssInjection({
-    testId: "vuu-filter-bar",
+    testId: "vuu-column-filter",
     css: columnFilterCss,
     window: targetWindow,
   });
 
+  const {
+    op,
+    allowedOperators,
+    filterValue,
+    inputProps,
+    rangeInputProps,
+    onOperatorChange,
+    handleCommit,
+    handleRangeCommit,
+  } = useColumnFilter({
+    operator,
+    column,
+    value,
+    onFilterChange,
+  });
+
   useMemo(
-    () => assertValidValue(column, operator, value),
-    [column, operator, value],
+    () => assertValidOperator(allowedOperators, column, operator),
+    [column, operator, allowedOperators],
   );
 
-  const onCommit = useCallback<CommitHandler<HTMLElement>>((e, value) => {
-    console.log(`onCommit ${value}`);
-  }, []);
+  useMemo(
+    () => assertValidValue(column, op, filterValue),
+    [column, op, filterValue],
+  );
 
   return (
     <SegmentedButtonGroup
       {...buttonGroupProps}
       className={cx(classBase, className)}
+      ref={forwardRef}
     >
       {showOperatorPicker ? (
         <Menu placement="bottom-start">
@@ -80,37 +110,44 @@ export const ColumnFilter = ({
               data-embedded
               sentiment="neutral"
             >
-              {operator}
+              {op}
             </Button>
           </MenuTrigger>
           <MenuPanel>
-            <MenuItem>=</MenuItem>
-            <MenuItem>!=</MenuItem>
-            <MenuItem>starts</MenuItem>
-            <MenuItem>ends</MenuItem>
-            <MenuItem>contains</MenuItem>
+            {allowedOperators.map((operator) => (
+              <MenuItem
+                key={operator}
+                onClick={() => onOperatorChange(operator)}
+              >
+                {operator}
+              </MenuItem>
+            ))}
           </MenuPanel>
         </Menu>
       ) : null}
       {getDataItemEditControl({
+        InputProps: { inputProps },        
         dataDescriptor: column,
-        defaultValue: Array.isArray(value)
-          ? (value[0] as string)
-          : (value as string),
-        onCommit,
+        onCommit: handleCommit,
+        defaultValue: Array.isArray(filterValue) ? filterValue[0] : filterValue,
         table,
       })}
-      {operator === "between"
+      {op === "between"
         ? getDataItemEditControl({
             className: `${classBase}-rangeHigh`,
+            InputProps: { inputProps: rangeInputProps },
             dataDescriptor: column,
-            defaultValue: Array.isArray(value)
-              ? (value[1] as string)
-              : undefined,
-            onCommit,
+            onCommit: handleRangeCommit,
+            defaultValue: Array.isArray(filterValue)
+              ? filterValue[1]
+              : filterValue,
             table,
           })
         : null}
     </SegmentedButtonGroup>
   );
-};
+}) as (
+  props: ColumnFilterProps & {
+    ref?: ForwardedRef<HTMLDivElement>;
+  },
+) => ReactElement<ColumnFilterProps>;