Quick filters (finos#1523)

* fix filters generated by QuickFilters all filters defaulted to contains remove suggestionProvider as prop * inline filters * enhance VuuTypeaheadInput allow input that does not match suggestions allow full function in absence of suggestions remove prop drilling of suggestionPtovider * remove last referenced to suggestionProvider * improve inline filter behaviour and appearence
chuchee · Oct 23, 2024 · 61f108e · 61f108e
1 parent 21af093
commit 61f108e
Show file tree

Hide file tree

Showing 37 changed files with 812 additions and 401 deletions.
diff --git a/vuu-ui/packages/vuu-data-react/src/data-editing/get-data-item-edit-control.tsx b/vuu-ui/packages/vuu-data-react/src/data-editing/get-data-item-edit-control.tsx
@@ -1,36 +1,36 @@
-import {
+import type {
   DataValueDescriptor,
-  SuggestionProvider,
   TableSchemaTable,
 } from "@finos/vuu-data-types";
 import {
   VuuDatePicker,
   VuuInput,
   VuuTypeaheadInput,
+  VuuTypeaheadInputProps,
 } from "@finos/vuu-ui-controls";
 import { CommitHandler, isDateTimeDataValue } from "@finos/vuu-utils";
 import { InputProps } from "@salt-ds/core";
 
 export interface DataItemEditControlProps {
   InputProps?: Partial<InputProps>;
+  TypeaheadProps?: Pick<VuuTypeaheadInputProps, "highlightFirstSuggestion">;
   /**
    * A table column or form field Descriptor.
    */
   dataDescriptor: DataValueDescriptor;
   errorMessage?: string;
   onCommit: CommitHandler<HTMLElement, string | undefined>;
-  suggestionProvider?: SuggestionProvider;
   table?: TableSchemaTable;
 }
 
 export type ValidationStatus = "initial" | true | string;
 
 export const getDataItemEditControl = ({
   InputProps,
+  TypeaheadProps,
   dataDescriptor,
   errorMessage,
   onCommit,
-  suggestionProvider,
   table,
 }: DataItemEditControlProps) => {
   const handleCommitNumber: CommitHandler<HTMLElement, number> = (
@@ -52,16 +52,13 @@ export const getDataItemEditControl = ({
     );
   } else if (isDateTimeDataValue(dataDescriptor)) {
     return <VuuDatePicker onCommit={handleCommitNumber} />;
-  } else if (
-    dataDescriptor.serverDataType === "string" &&
-    suggestionProvider &&
-    table
-  ) {
+  } else if (dataDescriptor.serverDataType === "string" && table) {
     return (
       <VuuTypeaheadInput
+        {...InputProps}
+        {...TypeaheadProps}
         column={dataDescriptor.name}
         onCommit={onCommit}
-        suggestionProvider={suggestionProvider}
         table={table}
       />
     );

diff --git a/vuu-ui/packages/vuu-filters/src/custom-filters/CustomFilters.tsx b/vuu-ui/packages/vuu-filters/src/custom-filters/CustomFilters.tsx
@@ -20,7 +20,6 @@ export interface CustomFilterProps
       | "onFilterDeleted"
       | "onFilterRenamed"
       | "onFilterStateChanged"
-      | "suggestionProvider"
       | "tableSchema"
     > {
   columnDescriptors: ColumnDescriptor[];
@@ -34,7 +33,6 @@ export const CustomFilters = ({
   onFilterDeleted,
   onFilterRenamed,
   onFilterStateChanged,
-  suggestionProvider,
   tableSchema,
 }: CustomFilterProps) => {
   const rootRef = useRef<HTMLDivElement>(null);
@@ -81,7 +79,7 @@ export const CustomFilters = ({
           filter={filter}
           key={`filter-${i}`}
           selected={activeFilterIndex.includes(i)}
-        />
+        />,
       );
     });
     return items;
@@ -119,7 +117,6 @@ export const CustomFilters = ({
           onCancel={onCancelEdit}
           onSave={onSave}
           filter={interactedFilterState?.filter}
-          suggestionProvider={suggestionProvider}
           tableSchema={tableSchema}
         />
       )}

diff --git a/vuu-ui/packages/vuu-filters/src/filter-bar/FilterBar.tsx b/vuu-ui/packages/vuu-filters/src/filter-bar/FilterBar.tsx
@@ -149,15 +149,13 @@ export const FilterBar = ({
           onFilterDeleted={onFilterDeleted}
           onFilterRenamed={onFilterRenamed}
           onFilterStateChanged={onFilterStateChanged}
-          suggestionProvider={suggestionProvider}
           tableSchema={tableSchema}
         />
       ) : (
         <QuickFilters
           {...QuickFilterProps}
           availableColumns={columnDescriptors}
           onApplyFilter={onApplyFilter}
-          suggestionProvider={suggestionProvider}
           tableSchema={tableSchema}
         />
       )}

diff --git a/vuu-ui/packages/vuu-filters/src/filter-clause/FilterClause.tsx b/vuu-ui/packages/vuu-filters/src/filter-clause/FilterClause.tsx
@@ -1,4 +1,4 @@
-import type { SuggestionProvider, TableSchema } from "@finos/vuu-data-types";
+import type { TableSchema } from "@finos/vuu-data-types";
 import {
   ColumnDescriptorsByName,
   MultiValueFilterClause,
@@ -31,7 +31,6 @@ export interface FilterClauseProps
   onDropdownClose?: (closeReason: CloseReason) => void;
   onDropdownOpen?: () => void;
   onFocusSave?: () => void;
-  suggestionProvider?: SuggestionProvider;
   tableSchema: TableSchema;
 }
 
@@ -45,7 +44,6 @@ export const FilterClause = ({
   onDropdownOpen,
   onFocusSave,
   filterClauseModel,
-  suggestionProvider,
   tableSchema,
   ...htmlAttributes
 }: FilterClauseProps) => {
@@ -109,7 +107,6 @@ export const FilterClause = ({
           operator={filterClauseModel.op}
           ref={valueRef}
           selectedColumn={selectedColumn}
-          suggestionProvider={suggestionProvider}
           table={tableSchema.table}
           value={
             (filterClause as MultiValueFilterClause)?.values ??

diff --git a/vuu-ui/packages/vuu-filters/src/filter-clause/value-editors/FilterClauseValueEditor.tsx b/vuu-ui/packages/vuu-filters/src/filter-clause/value-editors/FilterClauseValueEditor.tsx
@@ -10,21 +10,19 @@ import {
 } from "@finos/vuu-filter-types";
 import { isDateTimeDataValue } from "@finos/vuu-utils";
 import { ForwardedRef, forwardRef } from "react";
-import { FilterClauseProps } from "../FilterClause";
 import { FilterClauseValueEditorDate } from "./FilterClauseValueEditorDate";
 
 const classBase = "vuuFilterClause";
 
 type FilterClauseValueEditorProps = Pick<
   ReturnType<typeof useFilterClause>,
   "selectedColumn" | "inputProps" | "onChangeValue" | "onDeselectValue"
-> &
-  Pick<FilterClauseProps, "suggestionProvider"> & {
-    table?: TableSchemaTable;
-  } & {
-    operator?: SingleValueFilterClauseOp | "in";
-    value?: string | string[] | number | number[] | boolean | boolean[];
-  };
+> & {
+  table?: TableSchemaTable;
+} & {
+  operator?: SingleValueFilterClauseOp | "in";
+  value?: string | string[] | number | number[] | boolean | boolean[];
+};
 
 export const FilterClauseValueEditor = forwardRef(
   function FilterClauseValueEditor(
@@ -34,7 +32,6 @@ export const FilterClauseValueEditor = forwardRef(
       inputProps,
       onChangeValue,
       onDeselectValue,
-      suggestionProvider,
       table,
       value,
     }: FilterClauseValueEditorProps,
@@ -69,7 +66,6 @@ export const FilterClauseValueEditor = forwardRef(
             onChangeValue={onChangeValue}
             operator={operator}
             ref={forwardedRef}
-            suggestionProvider={suggestionProvider}
             table={table}
             value={
               value === undefined

diff --git a/vuu-ui/packages/vuu-filters/src/filter-clause/value-editors/FilterClauseValueEditorText.tsx b/vuu-ui/packages/vuu-filters/src/filter-clause/value-editors/FilterClauseValueEditorText.tsx
@@ -1,8 +1,7 @@
 import { useTypeaheadSuggestions } from "@finos/vuu-data-react";
-import type { SuggestionFetcher } from "@finos/vuu-data-types";
 import type { TypeaheadParams } from "@finos/vuu-protocol-types";
 import { ExpandoInput, MultiSelectionHandler } from "@finos/vuu-ui-controls";
-import { CommitHandler, getVuuTable } from "@finos/vuu-utils";
+import { CommitHandler, getVuuTable, NO_DATA_MATCH } from "@finos/vuu-utils";
 import { Option } from "@salt-ds/core";
 import {
   FormEvent,
@@ -25,12 +24,9 @@ export interface FilterClauseTextValueEditorProps
   "data-field"?: string;
   ref: RefObject<HTMLDivElement>;
   operator: string;
-  suggestionProvider?: () => SuggestionFetcher;
   value: string | string[];
 }
 
-const NO_DATA_MATCH = ["No matching data"];
-
 export const FilterClauseValueEditorText = forwardRef(
   function FilterClauseTextValueEditor(
     {
@@ -39,7 +35,6 @@ export const FilterClauseValueEditorText = forwardRef(
       column,
       onChangeValue,
       operator,
-      suggestionProvider = useTypeaheadSuggestions,
       table,
       value,
     }: FilterClauseTextValueEditorProps,
@@ -60,7 +55,7 @@ export const FilterClauseValueEditorText = forwardRef(
       [],
     );
 
-    const getSuggestions = suggestionProvider();
+    const getSuggestions = useTypeaheadSuggestions();
 
     const handleSingleValueSelectionChange = useCallback(
       (_, [value]: string[]) => onChangeValue(value),

diff --git a/vuu-ui/packages/vuu-filters/src/filter-editor/FilterEditor.tsx b/vuu-ui/packages/vuu-filters/src/filter-editor/FilterEditor.tsx
@@ -1,4 +1,4 @@
-import { SuggestionProvider, TableSchema } from "@finos/vuu-data-types";
+import { TableSchema } from "@finos/vuu-data-types";
 import type { Filter } from "@finos/vuu-filter-types";
 import { ColumnDescriptor } from "@finos/vuu-table-types";
 import { SplitButton } from "@finos/vuu-ui-controls";
@@ -23,7 +23,6 @@ export interface FilterEditorProps extends HTMLAttributes<HTMLDivElement> {
   filter?: Filter;
   onCancel: FilterEditCancelHandler;
   onSave: FilterEditSaveHandler;
-  suggestionProvider?: SuggestionProvider;
   tableSchema: TableSchema;
 }
 
@@ -32,7 +31,6 @@ export const FilterEditor = ({
   filter,
   onCancel,
   onSave,
-  suggestionProvider,
   tableSchema,
   ...htmlAttributes
 }: FilterEditorProps) => {
@@ -73,7 +71,7 @@ export const FilterEditor = ({
             onChange={onChangeFilterCombinator}
             onKeyDown={onKeyDownCombinator}
             operator={op}
-          />
+          />,
         );
       }
       content.push(
@@ -84,9 +82,8 @@ export const FilterEditor = ({
           key={`editor-${i}`}
           onCancel={onCancelFilterClause}
           onFocusSave={focusSaveButton}
-          suggestionProvider={suggestionProvider}
           tableSchema={tableSchema}
-        />
+        />,
       );
     });
     return content;

diff --git a/vuu-ui/packages/vuu-filters/src/inline-filter/InlineFilter.css b/vuu-ui/packages/vuu-filters/src/inline-filter/InlineFilter.css
@@ -1,16 +1,31 @@
 .vuuInlineFilter {
-  height: 24px;
+  height: var(--salt-size-base);
 
   .vuuInlineFilter-filter {
+    --saltInput-minHeight: 22px;
     display: inline-block;
-    padding: 1px;
+    height: 100%;
+    padding: 1px 1px 1px 0;
+
+    .vuuTypeaheadInput {
+      border: solid 1px var(--salt-separable-secondary-borderColor);
+      border-radius: 0;
+    }
+
+    .vuuTypeaheadInput {
+      height: 22px;
+      input::placeholder {
+        color: var(--salt-content-primary-foreground-disabled);
+      }
+    }
 
     .saltInput-primary.vuuInput {
-      border-color: var(--salt-separable-secondary-borderColor);
+      border: solid 1px var(--salt-separable-secondary-borderColor);
+      border-radius: 0;
       height: 22px;
       min-height: 22px;
       input::placeholder {
-        color: var(--tar-color-gray-25);
+        color: var(--salt-content-primary-foreground-disabled);
       }
     }
   }

diff --git a/vuu-ui/packages/vuu-filters/src/inline-filter/InlineFilter.tsx b/vuu-ui/packages/vuu-filters/src/inline-filter/InlineFilter.tsx
@@ -1,13 +1,18 @@
 import { getDataItemEditControl } from "@finos/vuu-data-react";
 import { VirtualColSpan, useHeaderProps } from "@finos/vuu-table";
-import { CommitHandler, getFieldName } from "@finos/vuu-utils";
+import {
+  CommitHandler,
+  FilterAggregator,
+  getFieldName,
+} from "@finos/vuu-utils";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
-import { HTMLAttributes, useCallback } from "react";
+import { HTMLAttributes, useCallback, useMemo } from "react";
 import { ColumnDescriptor } from "@finos/vuu-table-types";
 
 import inlineFilteCss from "./InlineFilter.css";
 import { InputProps } from "@salt-ds/core";
+import { TableSchemaTable } from "@finos/vuu-data-types";
 
 const classBase = "vuuInlineFilter";
 
@@ -18,15 +23,23 @@ export type FilterValueChangeHandler = (
 export interface InlineFilterProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
   onChange: FilterValueChangeHandler;
+  table: TableSchemaTable;
 }
 
 const InputProps: Partial<InputProps> = {
-  placeholder: "Enter value",
+  inputProps: {
+    placeholder: "Filter value",
+  },
   variant: "primary",
 };
 
+const TypeaheadProps = {
+  highlightFirstSuggestion: false,
+};
+
 export const InlineFilter = ({
   onChange,
+  table,
   ...htmlAttributes
 }: InlineFilterProps) => {
   const targetWindow = useWindow();
@@ -36,6 +49,7 @@ export const InlineFilter = ({
     window: targetWindow,
   });
 
+  const filterAggregator = useMemo(() => new FilterAggregator(), []);
   const { columns, virtualColSpan = 0 } = useHeaderProps();
 
   const onCommit = useCallback<
@@ -45,25 +59,29 @@ export const InlineFilter = ({
       const fieldName = getFieldName(evt.target);
       const column = columns.find((c) => c.name === fieldName);
       if (column) {
-        onChange(column, value.toString());
+        filterAggregator.addFilter(fieldName, value.toString());
+        // onChange(column, value.toString());
       }
     },
-    [columns, onChange],
+    [columns, filterAggregator],
   );
 
   return (
-    <div {...htmlAttributes} className={classBase}>
+    <div {...htmlAttributes} className={classBase} role="row">
       <VirtualColSpan width={virtualColSpan} />
       {columns.map((column) => (
         <div
           className={`${classBase}-filter`}
+          data-field={column.name}
           key={column.name}
           style={{ width: column.width }}
         >
           {getDataItemEditControl({
             InputProps,
+            TypeaheadProps,
             dataDescriptor: column,
             onCommit,
+            table,
           })}
         </div>
       ))}