Quickfilters issue #1457

vuu-ui/packages/vuu-filters/src/filter-bar/FilterBar.tsx

@@ -12,7 +12,7 @@ import { useWindow } from "@salt-ds/window";
 import cx from "clsx";
 import { HTMLAttributes, useMemo } from "react";
 import { CustomFilters } from "../custom-filters";
-import { QuickFilters } from "../quick-filters";
+import { QuickFilterProps, QuickFilters } from "../quick-filters";
 import { FilterMode, useFilterBar } from "./useFilterBar";
 
 import filterBarCss from "./FilterBar.css";
@@ -23,6 +23,10 @@ export type FilterBarVariant =
   | "full-filters";
 
 export interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {
+  QuickFilterProps?: Pick<
+    QuickFilterProps,
+    "quickFilterColumns" | "onChangeQuickFilterColumns"
+  >;
   /**
    * This is used to apply tailored filters based on column types and other attributes.
    * NOTE: Always make sure that these are passed with proper re-render optimization, otherwise,
@@ -38,7 +42,6 @@ export interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {
   onFilterDeleted?: (filter: Filter) => void;
   onFilterRenamed?: (filter: Filter, name: string) => void;
   onFilterStateChanged?: (state: FilterState) => void;
-  quickFilterColumns?: string[];
   suggestionProvider?: SuggestionProvider;
   tableSchema?: TableSchema;
   variant?: FilterBarVariant;
@@ -47,6 +50,7 @@ export interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {
 const classBase = "vuuFilterBar";
 
 export const FilterBar = ({
+  QuickFilterProps,
   className: classNameProp,
   columnDescriptors,
   defaultFilterMode,
@@ -58,7 +62,6 @@ export const FilterBar = ({
   onFilterDeleted,
   onFilterRenamed,
   onFilterStateChanged,
-  quickFilterColumns,
   suggestionProvider,
   tableSchema,
   variant = "custom-filters",
@@ -77,8 +80,8 @@ export const FilterBar = ({
   const controlledFilterMode: FilterMode | undefined = !allowCustomFilters
     ? "quick-filter"
     : !allowQuickFilters
-    ? "custom-filter"
-    : filterModeProp;
+      ? "custom-filter"
+      : filterModeProp;
 
   const { filterMode, onChangeFilterMode } = useFilterBar({
     defaultFilterMode,
@@ -143,9 +146,9 @@ export const FilterBar = ({
         />
       ) : (
         <QuickFilters
+          {...QuickFilterProps}
           availableColumns={columnDescriptors}
           onApplyFilter={onApplyFilter}
-          quickFilterColumns={quickFilterColumns}
           suggestionProvider={suggestionProvider}
           tableSchema={tableSchema}
         />

vuu-ui/packages/vuu-filters/src/quick-filters/QuickFilters.tsx

@@ -19,12 +19,20 @@ export interface QuickFilterProps
       "onApplyFilter" | "suggestionProvider" | "tableSchema"
     > {
   availableColumns: ColumnDescriptor[];
+  onChangeQuickFilterColumns?: (columns: string[]) => void;
   quickFilterColumns?: string[];
+  /**
+   * Render a general 'search' control.
+   * if true, all columns of type 'string' will be included in the search. Otherwise
+   * a list of the columns to include in search can be provided.
+   */
+  showFind?: boolean | string[];
 }
 
 export const QuickFilters = ({
   availableColumns,
   onApplyFilter,
+  onChangeQuickFilterColumns,
   quickFilterColumns,
   suggestionProvider,
   tableSchema,
@@ -48,11 +56,12 @@ export const QuickFilters = ({
   } = useQuickFilters({
     availableColumns,
     onApplyFilter,
+    onChangeQuickFilterColumns,
     quickFilterColumns,
   });
 
   const filterColumns = availableColumns.filter(({ name }) =>
-    quickFilters?.includes(name)
+    quickFilters?.includes(name),
   );
 
   return (

vuu-ui/packages/vuu-filters/src/quick-filters/useQuickFilters.ts

@@ -18,18 +18,18 @@ type QuickFilterValues = Record<string, VuuRowDataItemType>;
 
 const createFilterClause = (
   [identifier, value]: [string, VuuRowDataItemType],
-  availableColumns?: ColumnDescriptor[]
+  availableColumns?: ColumnDescriptor[],
 ): Filter => {
   if (identifier === "find") {
     if (availableColumns) {
       const targetColumns = availableColumns.filter(
-        ({ serverDataType }) => serverDataType === "string"
+        ({ serverDataType }) => serverDataType === "string",
       );
       if (targetColumns.length) {
         return {
           op: "or",
           filters: targetColumns.map((column) =>
-            createFilterClause([column.name, value])
+            createFilterClause([column.name, value]),
           ),
         };
       } else {
@@ -49,7 +49,7 @@ const createFilterClause = (
 
 const buildFilterStruct = (
   quickFilters: QuickFilterValues,
-  availableColumns: ColumnDescriptor[]
+  availableColumns: ColumnDescriptor[],
 ): Filter => {
   const entries = Object.entries(quickFilters);
   if (entries.length === 1) {
@@ -59,7 +59,7 @@ const buildFilterStruct = (
       op: "and",
       filters: entries.map(
         (entry) => createFilterClause(entry, availableColumns),
-        availableColumns
+        availableColumns,
       ),
     };
   } else {
@@ -69,7 +69,7 @@ const buildFilterStruct = (
 
 const buildFilter = (
   quickFilters: QuickFilterValues,
-  availableColumns: ColumnDescriptor[]
+  availableColumns: ColumnDescriptor[],
 ): DataSourceFilter => {
   const filterStruct = buildFilterStruct(quickFilters, availableColumns);
   return {
@@ -80,14 +80,19 @@ const buildFilter = (
 
 export type QuickFilterHookProps = Pick<
   QuickFilterProps,
-  "availableColumns" | "onApplyFilter" | "quickFilterColumns"
+  | "availableColumns"
+  | "onApplyFilter"
+  | "onChangeQuickFilterColumns"
+  | "quickFilterColumns"
 >;
 
 export const useQuickFilters = ({
   availableColumns,
   onApplyFilter,
+  onChangeQuickFilterColumns,
   quickFilterColumns = [],
 }: QuickFilterProps) => {
+  //TODO make controlled
   const [quickFilters, setQuickFilters] = useState(quickFilterColumns);
   const filters = useRef<QuickFilterValues>({});
   const rootRef = useCallback<RefCallback<HTMLDivElement>>((el) => {
@@ -101,7 +106,7 @@ export const useQuickFilters = ({
     (e) => {
       console.log(`onChange ${e.target.value}`);
     },
-    []
+    [],
   );
 
   const handleCommit = useCallback<Commithandler>(
@@ -115,19 +120,20 @@ export const useQuickFilters = ({
         }
       }
     },
-    [availableColumns, onApplyFilter]
+    [availableColumns, onApplyFilter],
   );
 
   const handleColumnsSelectionChange = useCallback<MultiSelectionHandler>(
     (evt, newSelected) => {
+      onChangeQuickFilterColumns?.(newSelected);
       setQuickFilters(newSelected);
     },
-    []
+    [onChangeQuickFilterColumns],
   );
 
   const availableColumnNames = useMemo(
     () => availableColumns.map((col) => col.name),
-    [availableColumns]
+    [availableColumns],
   );
 
   return {

vuu-ui/showcase/src/examples/Filters/QuickFilters/QuickFilters.examples.tsx

@@ -1,18 +1,35 @@
 import { QuickFilterProps, QuickFilters } from "@finos/vuu-filters";
 import type { DataSourceFilter } from "@finos/vuu-data-types";
 import type { ColumnDescriptor } from "@finos/vuu-table-types";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { getSchema, vuuModule } from "@finos/vuu-data-test";
+import { IPersistenceManager, LocalPersistenceManager } from "@finos/vuu-shell";
+import { basketSchemas } from "@finos/vuu-data-test";
 
 let displaySequence = 1;
 
 const QuickFiltersTemplate = ({
   availableColumns = [],
   onApplyFilter,
-  quickFilterColumns,
+  persistenceKey,
+  quickFilterColumns: quickFilterColumnsProp,
   suggestionProvider,
   tableSchema,
-}: Partial<QuickFilterProps>) => {
+}: Partial<QuickFilterProps> & {
+    persistenceKey?: string
+}) => {
+
+  const initialColumns = useMemo(() => {
+    return quickFilterColumnsProp;
+  },[quickFilterColumnsProp])
+
+  const [quickFilterColumns, setQuickFilterColumns] = useState(initialColumns)
+
+  const persistenceManager = useMemo<IPersistenceManager | undefined>(() => 
+    persistenceKey ? new LocalPersistenceManager(persistenceKey) : undefined
+  ,[persistenceKey])
+
+
   const handleApplyFilter = useCallback(
     (filter: DataSourceFilter) => {
       onApplyFilter?.(filter);
@@ -23,10 +40,15 @@ const QuickFiltersTemplate = ({
     [onApplyFilter]
   );
 
+  const handleChangeQuickFilterColumns = useCallback((columns: string[]) => {
+    console.log('change columns',{columns})
+  },[])
+
   return (
     <QuickFilters
       availableColumns={availableColumns}
       onApplyFilter={handleApplyFilter}
+      onChangeQuickFilterColumns={handleChangeQuickFilterColumns}
       quickFilterColumns={quickFilterColumns}
       suggestionProvider={suggestionProvider}
       tableSchema={tableSchema}
@@ -84,3 +106,18 @@ export const ThreeColumns = () => {
   );
 };
 ThreeColumns.displaySequence = displaySequence++;
+
+export const WithPersistence = () => {
+
+  const columns = useMemo(() => 
+    basketSchemas.basketTradingConstituentJoin.columns
+  ,[])
+
+  return (
+    <QuickFiltersTemplate
+      availableColumns={columns}
+      persistenceKey="quick-filters-with-persistence"
+    />
+  );
+};
+SearchOnly.displaySequence = displaySequence++;