From e1c204d7dab6749e532be52576379fd8a78dce47 Mon Sep 17 00:00:00 2001 From: heswell Date: Fri, 15 Dec 2023 14:36:18 +0000 Subject: [PATCH] add first cut of filterbarmenu --- .../vuu-filters/src/filter-bar/FilterBar.tsx | 4 +- .../src/filter-bar/FilterBarMenu.css | 0 .../src/filter-bar/FilterBarMenu.tsx | 19 ++++ .../src/filter-bar/useFilterBarMenu.ts | 33 +++++++ .../vuu-filters/src/filter-bar/useFilters.ts | 96 +++++++++---------- .../buildContextMenuDescriptors.ts | 26 ----- 6 files changed, 98 insertions(+), 80 deletions(-) create mode 100644 vuu-ui/packages/vuu-filters/src/filter-bar/FilterBarMenu.css create mode 100644 vuu-ui/packages/vuu-filters/src/filter-bar/FilterBarMenu.tsx create mode 100644 vuu-ui/packages/vuu-filters/src/filter-bar/useFilterBarMenu.ts 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 06edcd0e1a..d4c4a76fff 100644 --- a/vuu-ui/packages/vuu-filters/src/filter-bar/FilterBar.tsx +++ b/vuu-ui/packages/vuu-filters/src/filter-bar/FilterBar.tsx @@ -11,6 +11,7 @@ import { FilterClauseEditor, FilterClauseEditorProps } from "../filter-clause"; import { FilterPill } from "../filter-pill"; import { filterClauses as getFilterClauses } from "../filter-utils"; import { useFilterBar } from "./useFilterBar"; +import { FilterBarMenu } from "./FilterbarMenu"; import "./FilterBar.css"; @@ -133,7 +134,8 @@ export const FilterBar = ({ onKeyDown={onKeyDownFilterbar} ref={rootRef} > - + + {/* */} { + const classBase = "vuuFilterBarMenu"; + + const { menuBuilder, menuActionHandler } = useFilterBarMenu(); + + return ( +
+ +
+ ); +}; diff --git a/vuu-ui/packages/vuu-filters/src/filter-bar/useFilterBarMenu.ts b/vuu-ui/packages/vuu-filters/src/filter-bar/useFilterBarMenu.ts new file mode 100644 index 0000000000..19d3ef33a7 --- /dev/null +++ b/vuu-ui/packages/vuu-filters/src/filter-bar/useFilterBarMenu.ts @@ -0,0 +1,33 @@ +import { useCallback, useMemo } from "react"; +import { + ContextMenuItemDescriptor, + MenuActionHandler, + MenuBuilder, +} from "@finos/vuu-data-types"; +import { MenuActionClosePopup } from "@finos/vuu-popups"; + +export const useFilterBarMenu = () => { + const menuBuilder = useCallback(() => { + return [ + { + label: `You have no saved filters for this table`, + action: `no-action`, + } as ContextMenuItemDescriptor, + ]; + }, []); + + const menuActionHandler = useMemo( + () => (action: MenuActionClosePopup) => { + console.log(`invoke menuId `, { + action, + }); + return false; + }, + [] + ); + + return { + menuBuilder, + menuActionHandler, + }; +}; diff --git a/vuu-ui/packages/vuu-filters/src/filter-bar/useFilters.ts b/vuu-ui/packages/vuu-filters/src/filter-bar/useFilters.ts index 41c887c232..1456b6b9c7 100644 --- a/vuu-ui/packages/vuu-filters/src/filter-bar/useFilters.ts +++ b/vuu-ui/packages/vuu-filters/src/filter-bar/useFilters.ts @@ -26,85 +26,75 @@ export const useFilters = ({ const { getApplicationSettings, saveApplicationSettings } = useLayoutManager(); - const savedFilters = getApplicationSettings("filters") as { + + type SavedFilterMap = { [key: string]: NamedFilter[]; }; - console.log({ savedFilters }); + const hasFilter = (filters: NamedFilter[], name: string) => + filters.findIndex((f) => f.name === name) !== -1; const saveFilterToSettings = useCallback( (filter: Filter, name?: string) => { - console.log(`saveFilterToSettings`); if (tableSchema && name) { + const savedFilters = getApplicationSettings( + "filters" + ) as SavedFilterMap; + let newFilters = savedFilters; const { module, table } = tableSchema.table; const key = `${module}:${table}`; if (savedFilters) { - console.log("add filter to existing store ... ", { - savedFilters, - }); if (savedFilters[key]) { - console.log("add filter to existing filters for this table ... "); - if (savedFilters[key].findIndex((f) => f.name === name) !== -1) { - console.log("We already have a filter by that name, replace it "); - - saveApplicationSettings( - { - ...savedFilters, - [key]: savedFilters[key].map((f) => { - f.name === name ? { ...filter, name } : f; - }), - }, - "filters" - ); + if (hasFilter(savedFilters[key], name)) { + newFilters = { + ...savedFilters, + [key]: savedFilters[key].map((f) => + f.name === name ? { ...filter, name } : f + ), + }; } else if ( - name !== undefined && - filter?.name !== undefined && + filter?.name && filter?.name !== name && - savedFilters[key].findIndex((f) => f.name === filter.name) !== -1 + hasFilter(savedFilters[key], filter.name) ) { - saveApplicationSettings( - { - ...savedFilters, - [key]: savedFilters[key].map((f) => - f.name === filter.name ? { ...filter, name } : f - ), - }, - "filters" - ); + newFilters = { + ...savedFilters, + [key]: savedFilters[key].map((f) => + f.name === filter.name ? { ...filter, name } : f + ), + }; } else { - saveApplicationSettings( - { - ...savedFilters, - [key]: savedFilters[key].concat({ ...filter, name }), - }, - "filters" - ); + newFilters = { + ...savedFilters, + [key]: savedFilters[key].concat({ ...filter, name }), + }; } } else { - saveApplicationSettings( - { - ...savedFilters, - [key]: [{ ...filter, name }], - }, - "filters" - ); + newFilters = { + ...savedFilters, + [key]: [{ ...filter, name }], + }; } } else { - saveApplicationSettings( - { - [key]: [{ ...filter, name }], - }, - "filters" - ); + newFilters = { + [key]: [{ ...filter, name }], + }; + } + if (newFilters !== savedFilters) { + saveApplicationSettings(newFilters, "filters"); } } }, - [saveApplicationSettings, savedFilters, tableSchema] + [getApplicationSettings, saveApplicationSettings, tableSchema] ); const removeFilterFromSettings = useCallback( (filter: Filter | NamedFilter) => { if (tableSchema && filter.name) { + const savedFilters = getApplicationSettings( + "filters" + ) as SavedFilterMap; + const { module, table } = tableSchema.table; const key = `${module}:${table}`; @@ -119,7 +109,7 @@ export const useFilters = ({ } } }, - [saveApplicationSettings, savedFilters, tableSchema] + [getApplicationSettings, saveApplicationSettings, tableSchema] ); const handleAddFilter = useCallback( diff --git a/vuu-ui/packages/vuu-table/src/context-menu/buildContextMenuDescriptors.ts b/vuu-ui/packages/vuu-table/src/context-menu/buildContextMenuDescriptors.ts index 3430c1e31c..72ffffcdfd 100644 --- a/vuu-ui/packages/vuu-table/src/context-menu/buildContextMenuDescriptors.ts +++ b/vuu-ui/packages/vuu-table/src/context-menu/buildContextMenuDescriptors.ts @@ -1,13 +1,11 @@ import { DataSource } from "@finos/vuu-data"; import { ContextMenuItemDescriptor, MenuBuilder } from "@finos/vuu-data-types"; import { RuntimeColumnDescriptor, PinLocation } from "@finos/vuu-table-types"; -import { Filter } from "@finos/vuu-filter-types"; import { isNumericColumn } from "@finos/vuu-utils"; export type ContextMenuLocation = "header" | "filter" | "grid"; type MaybeColumn = { column?: RuntimeColumnDescriptor }; -type MaybeFilter = { filter?: Filter }; export const buildContextMenuDescriptors = (dataSource?: DataSource): MenuBuilder => @@ -40,30 +38,6 @@ export const buildContextMenuDescriptors = label: `DataGrid Settings`, options, }); - } else if (location === "filter") { - const { column, filter } = options as MaybeFilter & MaybeColumn; - const colIsOnlyFilter = filter?.column === column?.name; - descriptors.push({ - label: "Edit filter", - action: "filter-edit", - options, - }); - - descriptors.push({ - label: "Remove filter", - action: "filter-remove-column", - options, - }); - - if (column && !colIsOnlyFilter) { - // TODO col might still be the only column in the filter if it is - // involved in all clauses - descriptors.push({ - label: `Remove all filters`, - action: "remove-filters", - options, - }); - } } // if (options?.selectedRowCount){