From 58ad971369d40415369664343df006225ba71f32 Mon Sep 17 00:00:00 2001 From: heswell Date: Fri, 9 Aug 2024 08:05:31 +0100 Subject: [PATCH] Quickfilters issue #1457 --- .../vuu-filters/src/filter-bar/FilterBar.tsx | 15 ++++--- .../src/quick-filters/QuickFilters.tsx | 11 ++++- .../src/quick-filters/useQuickFilters.ts | 28 +++++++----- .../QuickFilters/QuickFilters.examples.tsx | 43 +++++++++++++++++-- 4 files changed, 76 insertions(+), 21 deletions(-) diff --git a/vuu-ui/packages/vuu-filters/src/filter-bar/FilterBar.tsx b/vuu-ui/packages/vuu-filters/src/filter-bar/FilterBar.tsx index f8cb1514f..9a2d225f7 100644 --- a/vuu-ui/packages/vuu-filters/src/filter-bar/FilterBar.tsx +++ b/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 { + 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 { 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 { 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 = ({ /> ) : ( diff --git a/vuu-ui/packages/vuu-filters/src/quick-filters/QuickFilters.tsx b/vuu-ui/packages/vuu-filters/src/quick-filters/QuickFilters.tsx index e01716503..cc2168a3a 100644 --- a/vuu-ui/packages/vuu-filters/src/quick-filters/QuickFilters.tsx +++ b/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 ( diff --git a/vuu-ui/packages/vuu-filters/src/quick-filters/useQuickFilters.ts b/vuu-ui/packages/vuu-filters/src/quick-filters/useQuickFilters.ts index 3410dad59..f6f049313 100644 --- a/vuu-ui/packages/vuu-filters/src/quick-filters/useQuickFilters.ts +++ b/vuu-ui/packages/vuu-filters/src/quick-filters/useQuickFilters.ts @@ -18,18 +18,18 @@ type QuickFilterValues = Record; 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({}); const rootRef = useCallback>((el) => { @@ -101,7 +106,7 @@ export const useQuickFilters = ({ (e) => { console.log(`onChange ${e.target.value}`); }, - [] + [], ); const handleCommit = useCallback( @@ -115,19 +120,20 @@ export const useQuickFilters = ({ } } }, - [availableColumns, onApplyFilter] + [availableColumns, onApplyFilter], ); const handleColumnsSelectionChange = useCallback( (evt, newSelected) => { + onChangeQuickFilterColumns?.(newSelected); setQuickFilters(newSelected); }, - [] + [onChangeQuickFilterColumns], ); const availableColumnNames = useMemo( () => availableColumns.map((col) => col.name), - [availableColumns] + [availableColumns], ); return { diff --git a/vuu-ui/showcase/src/examples/Filters/QuickFilters/QuickFilters.examples.tsx b/vuu-ui/showcase/src/examples/Filters/QuickFilters/QuickFilters.examples.tsx index 1bfd9f50b..95ac100ef 100644 --- a/vuu-ui/showcase/src/examples/Filters/QuickFilters/QuickFilters.examples.tsx +++ b/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) => { +}: Partial & { + persistenceKey?: string +}) => { + + const initialColumns = useMemo(() => { + return quickFilterColumnsProp; + },[quickFilterColumnsProp]) + + const [quickFilterColumns, setQuickFilterColumns] = useState(initialColumns) + + const persistenceManager = useMemo(() => + 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 ( { ); }; ThreeColumns.displaySequence = displaySequence++; + +export const WithPersistence = () => { + + const columns = useMemo(() => + basketSchemas.basketTradingConstituentJoin.columns + ,[]) + + return ( + + ); +}; +SearchOnly.displaySequence = displaySequence++;