Filter bar

vuu-ui/packages/vuu-filter-types/index.d.ts

@@ -1,3 +1,11 @@
+export declare type NumericFilterClauseOp =
+  | "="
+  | "!="
+  | ">"
+  | ">="
+  | "<="
+  | "<";
+
 export declare type SingleValueFilterClauseOp =
   | "="
   | "!="

vuu-ui/packages/vuu-filters/src/filter-clause/FilterClauseEditor.tsx

@@ -1,6 +1,11 @@
 import { getColumnByName, TableSchema } from "@finos/vuu-data";
 import { ColumnDescriptor } from "@finos/vuu-datagrid-types";
-import { FilterClause } from "@finos/vuu-filter-types";
+import { FilterClause, FilterClauseOp } from "@finos/vuu-filter-types";
+import {
+  isMultiValueFilter,
+  isSingleValueFilter,
+  isValidFilterClauseOp,
+} from "@finos/vuu-utils";
 import cx from "classnames";
 import {
   HTMLAttributes,
@@ -17,21 +22,45 @@ import { textOperators } from "./operator-utils";
 import { TextInput } from "./TextInput";
 
 import "./FilterClauseEditor.css";
+import { SuggestionFetcher } from "packages/vuu-data-react/src";
 
 export interface FilterClauseEditorProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
   filterClause: Partial<FilterClause>;
   onChange: (filterClause: Partial<FilterClause>) => void;
   onClose: () => void;
+  suggestionProvider?: () => SuggestionFetcher;
   tableSchema: TableSchema;
 }
 
 const classBase = "vuuFilterClause";
 
+// TODO boolean[] makes no sense
+type FilterClauseValue =
+  | boolean
+  | boolean[]
+  | string
+  | string[]
+  | number
+  | number[];
+
+const getFilterClauseValue = (
+  filterClause: Partial<FilterClause>
+): FilterClauseValue | undefined => {
+  if (isMultiValueFilter(filterClause)) {
+    return filterClause.values;
+  } else if (isSingleValueFilter(filterClause)) {
+    return filterClause.value;
+  } else {
+    return undefined;
+  }
+};
+
 export const FilterClauseEditor = ({
   onChange,
   onClose,
   filterClause,
+  suggestionProvider,
   tableSchema,
   ...htmlAttributes
 }: FilterClauseEditorProps) => {
@@ -42,8 +71,12 @@ export const FilterClauseEditor = ({
   const [selectedColumn, setSelectedColumn] = useState<
     ColumnDescriptor | undefined
   >(getColumnByName(tableSchema, filterClause.column));
-  const [operator, setOperator] = useState<string | undefined>(filterClause.op);
-  const [value, setValue] = useState<unknown | undefined>(filterClause.value);
+  const [operator, setOperator] = useState<FilterClauseOp | undefined>(
+    filterClause.op
+  );
+  const [value, setValue] = useState<FilterClauseValue | undefined>(
+    getFilterClauseValue(filterClause)
+  );
 
   const handleColumnSelectionChange = useCallback(
     (evt: SyntheticEvent, column: ColumnDescriptor | null) => {
@@ -53,13 +86,20 @@ export const FilterClauseEditor = ({
   );
   const handleOperatorSelectionChange = useCallback(
     (evt: SyntheticEvent, operator: string | null) => {
-      setOperator(operator ?? undefined);
+      const op = operator ?? undefined;
+      if (op === undefined || isValidFilterClauseOp(op)) {
+        setOperator(op);
+      } else {
+        throw Error(
+          `FilterClauseEditor, invalid value ${op} for filter clause`
+        );
+      }
     },
     []
   );
 
   const handleValueChange = useCallback(
-    (value: string) => {
+    (value: string | number) => {
       console.log(`handleValueChange ${value}`);
       setValue(value);
       onChange({
@@ -105,6 +145,7 @@ export const FilterClauseEditor = ({
             onValueChange={handleValueChange}
             operator={operator}
             ref={valueRef}
+            suggestionProvider={suggestionProvider}
             table={table}
             value={value as string}
           />
@@ -118,6 +159,7 @@ export const FilterClauseEditor = ({
             className={classBase}
             column={selectedColumn}
             filterClause={filterClause}
+            onValueChange={handleValueChange}
             operator={operator}
             ref={valueRef}
           />
@@ -129,7 +171,15 @@ export const FilterClauseEditor = ({
         console.log("returning unsupported");
         return null;
     }
-  }, [selectedColumn, operator, filterClause, handleValueChange, table, value]);
+  }, [
+    selectedColumn,
+    operator,
+    filterClause,
+    handleValueChange,
+    suggestionProvider,
+    table,
+    value,
+  ]);
 
   return (
     <div className={classBase} {...htmlAttributes} tabIndex={0}>

vuu-ui/packages/vuu-filters/src/filter-clause/NumericInput.tsx

@@ -6,38 +6,30 @@ import {
   useRef,
   useState,
 } from "react";
-import { Filter } from "@finos/vuu-filter-types";
 import { Input } from "@salt-ds/core";
-import { getNumericFilter } from "../filter-utils";
 import { isValidNumber } from "@finos/vuu-utils";
 import { FilterClauseValueEditor } from "./filterClauseTypes";
 
 export interface NumericInputProps
   extends FilterClauseValueEditor,
     HTMLAttributes<HTMLDivElement> {
   operatorInputRef?: RefObject<HTMLInputElement>;
-  onFilterChange?: (filter?: Filter) => void;
+  onValueChange: (value: number) => void;
   operator: string;
   ref: RefObject<HTMLDivElement>;
+  value?: number;
 }
 
 export const NumericInput = ({
   className,
   column,
-  filterClause,
-  onFilterChange,
-  operator,
+  // filterClause,
+  onValueChange,
+  // operator,
+  value,
 }: NumericInputProps) => {
-  const defaultValue =
-    filterClause?.op !== "in" && isValidNumber(filterClause?.value)
-      ? filterClause?.value
-      : undefined;
-  // const defaultOp = isNumericOperator(defaultFilter?.op)
-  //   ? defaultFilter?.op
-  //   : undefined;
-
   const [valueInputValue, setValueInputValue] = useState<string>(
-    defaultValue?.toString() || ""
+    isValidNumber(value) ? value.toString() : ""
   );
   const valueInputRef = useRef<HTMLInputElement>(null);
 
@@ -54,12 +46,7 @@ export const NumericInput = ({
       // type="text"
       onChange={(event: ChangeEvent<HTMLInputElement>) => {
         setValueInputValue(event.target.value);
-        const filter = getNumericFilter(
-          column,
-          operator,
-          Number.parseFloat(event.target.value)
-        );
-        onFilterChange(filter);
+        onValueChange(Number.parseFloat(event.target.value));
       }}
     />
   );

vuu-ui/packages/vuu-filters/src/filter-clause/TextInput.tsx

@@ -14,7 +14,10 @@ import { TypeaheadParams } from "@finos/vuu-protocol-types";
 import { ComboBoxDeprecated } from "@salt-ds/lab";
 import { ListChangeHandler } from "@salt-ds/lab/dist-types/list-deprecated";
 import { getTypeaheadFilter } from "../column-filter/utils";
-import { useTypeaheadSuggestions } from "@finos/vuu-data-react";
+import {
+  SuggestionFetcher,
+  useTypeaheadSuggestions,
+} from "@finos/vuu-data-react";
 import { ExpandoCombobox } from "./ExpandoCombobox";
 import { FilterClauseValueEditor } from "./filterClauseTypes";
 
@@ -24,6 +27,7 @@ export interface TextInputProps
   ref: RefObject<HTMLDivElement>;
   operator: string;
   onValueChange: (value: string) => void;
+  suggestionProvider?: () => SuggestionFetcher;
   value: string;
 }
 
@@ -34,6 +38,7 @@ export const TextInput = forwardRef(function TextInput(
     filterClause,
     onValueChange,
     operator,
+    suggestionProvider = useTypeaheadSuggestions,
     table,
     value,
   }: TextInputProps,
@@ -45,7 +50,7 @@ export const TextInput = forwardRef(function TextInput(
   // const [typeaheadValues, setTypeaheadValues] =
   //   useState<string[]>([defaultValues]);
   const [typeaheadValues, setTypeaheadValues] = useState<string[]>([]);
-  const getSuggestions = useTypeaheadSuggestions();
+  const getSuggestions = suggestionProvider();
   const valueInputRef = useRef<HTMLInputElement>(null);
 
   const handleValueSelectionChange = useCallback(

vuu-ui/packages/vuu-filters/src/filter-pill/FilterPill.tsx

@@ -1,20 +1,23 @@
 import { NamedFilter } from "packages/vuu-filter-types";
-import { HTMLAttributes } from "react";
+import { HTMLAttributes, useCallback } from "react";
 import cx from "classnames";
 import { EditableLabel, EditableLabelProps } from "@finos/vuu-ui-controls";
 import { FilterPillMenu } from "../filter-pill-menu";
 
 import "./FilterPill.css";
+import { MenuActionHandler } from "packages/vuu-data-types";
 
 const classBase = "vuuFilterPill";
 
 export interface FilterPillProps extends HTMLAttributes<HTMLDivElement> {
   filter: NamedFilter;
+  index?: number;
 }
 
 export const FilterPill = ({
   filter,
   className: classNameProp,
+  index = 0,
   ...htmlAttributes
 }: FilterPillProps) => {
   //   const handleExitEditMode: EditableLabelProps["onExitEditMode"] = (
@@ -39,14 +42,19 @@ export const FilterPill = ({
     });
   };
 
+  const handleMenuAction = useCallback<MenuActionHandler>((action) => {
+    console.log(`handle action ${action.menuId}`);
+    return true;
+  }, []);
+
   return (
     <div {...htmlAttributes} className={cx(classBase, classNameProp)}>
       <EditableLabel
         defaultValue={filter.name}
         onEnterEditMode={handleEnterEditMode}
         onExitEditMode={handleExitEditMode}
       />
-      <FilterPillMenu />
+      <FilterPillMenu index={index} onMenuAction={handleMenuAction} />
     </div>
   );
 };

vuu-ui/packages/vuu-filters/src/filter-utils.ts

@@ -4,6 +4,7 @@ import {
   Filter,
   FilterClause,
   FilterCombinatorOp,
+  NumericFilterClauseOp,
 } from "@finos/vuu-filter-types";
 import {
   extractFilterForColumn,
@@ -15,7 +16,6 @@ import {
   isSingleValueFilter,
   partition,
 } from "@finos/vuu-utils";
-import { NumericOperator } from "./filter-clause/operator-utils";
 
 export const AND = "and";
 export const EQUALS = "=";
@@ -399,10 +399,10 @@ export const getTypeaheadFilter = (
 
 export const getNumericFilter = (
   column: string,
-  operator?: NumericOperator,
+  op?: NumericFilterClauseOp,
   value?: number
-): Filter | undefined => {
-  if (operator === undefined) return undefined;
+): FilterClause | undefined => {
+  if (op === undefined) return undefined;
   if (value === undefined || isNaN(value)) return undefined;
-  return { column, op: operator, value };
+  return { column, op, value };
 };

vuu-ui/packages/vuu-popups/src/menu/useContextMenu.tsx

@@ -134,7 +134,7 @@ const NO_OPTIONS = {};
 
 const showContextMenuComponent = (
   e: MouseEvent<HTMLElement>,
-  contextMenu: JSX.Elementfinos
+  contextMenu: JSX.Element
 ) => {
   const position = {
     x: e.clientX,

vuu-ui/packages/vuu-table-extras/src/datagrid-configuration-ui/column-settings-panel/ColumnSettingsPanel.tsx

@@ -98,7 +98,6 @@ export const ColumnSettingsPanel = ({
       <Text as="h4">Column Settings</Text>
       <Stack
         active={activeTab}
-        showTabs
         className={cx(`${classBase}-columnTabs`)}
         onTabSelectionChanged={setActiveTab}
         TabstripProps={tabstripProps}

vuu-ui/packages/vuu-table-extras/src/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.tsx

@@ -112,7 +112,6 @@ export const DatagridSettingsPanel = ({
         getTabLabel={getTabLabel}
         active={selectedTabIndex === 2 ? 1 : selectedTabIndex}
         onTabSelectionChanged={handleTabSelectionChanged}
-        showTabs
       >
         <GridSettingsPanel
           config={gridSettings}

vuu-ui/packages/vuu-table-extras/src/table-settings/column-settings-panel/ColumnSettingsPanel.tsx

@@ -98,7 +98,6 @@ export const ColumnSettingsPanel = ({
       <Text as="h4">Column Settings</Text>
       <Stack
         active={activeTab}
-        showTabs
         className={cx(`${classBase}-columnTabs`)}
         onTabSelectionChanged={setActiveTab}
         TabstripProps={tabstripProps}

vuu-ui/packages/vuu-table-extras/src/table-settings/settings-panel/DatagridSettingsPanel.tsx

@@ -112,7 +112,6 @@ export const DatagridSettingsPanel = ({
         getTabLabel={getTabLabel}
         active={selectedTabIndex === 2 ? 1 : selectedTabIndex}
         onTabSelectionChanged={handleTabSelectionChanged}
-        showTabs
       >
         <GridSettingsPanel
           config={gridSettings}