diff --git a/vuu-ui/packages/vuu-filters/src/filter-clause/useFilterClause.ts b/vuu-ui/packages/vuu-filters/src/filter-clause/useFilterClause.ts index 739d25cb7..065b2f64d 100644 --- a/vuu-ui/packages/vuu-filters/src/filter-clause/useFilterClause.ts +++ b/vuu-ui/packages/vuu-filters/src/filter-clause/useFilterClause.ts @@ -1,5 +1,5 @@ import { FilterClause, FilterClauseOp } from "@finos/vuu-filter-types"; -import { hasOpenOptionList } from "@finos/vuu-utils"; +import { hasOpenOptionList, isDateInput } from "@finos/vuu-utils"; import { KeyboardEvent, RefCallback, @@ -25,7 +25,7 @@ export type FilterClauseEditorHookProps = Pick< export type FilterClauseValueChangeHandler = ( value: string | string[] | number | number[], - isFinal?: boolean + isFinal?: boolean, ) => void; export const useFilterClause = ({ @@ -35,7 +35,7 @@ export const useFilterClause = ({ onFocusSave, }: FilterClauseEditorHookProps) => { const [filterClause, setFilterClause] = useState>( - filterClauseModel.isValid ? filterClauseModel.asFilter() : {} + filterClauseModel.isValid ? filterClauseModel.asFilter() : {}, ); useMemo(() => { @@ -55,7 +55,7 @@ export const useFilterClause = ({ el?.querySelector("input")?.focus(); } }, - [filterClauseModel.isValid] + [filterClauseModel.isValid], ); const removeAndNavigateToNextInputIfAtBoundary = useCallback( @@ -86,7 +86,7 @@ export const useFilterClause = ({ } } }, - [filterClauseModel, onCancel] + [filterClauseModel, onCancel], ); const onSelectColumn = (evt: SyntheticEvent, selectedColumn: string) => { @@ -116,17 +116,17 @@ export const useFilterClause = ({ filterClauseModel.setOp(selectedOp); focusNextElement(); }, - [filterClauseModel] + [filterClauseModel], ); const handleChangeValue = useCallback( (value, isFinal) => filterClauseModel.setValue(value, isFinal), - [filterClauseModel] + [filterClauseModel], ); const handleDeselectValue = useCallback( () => filterClauseModel.setValue(undefined), - [filterClauseModel] + [filterClauseModel], ); const handleKeyDownCaptureNavigation = useCallback( @@ -158,7 +158,7 @@ export const useFilterClause = ({ onCancel, onFocusSave, removeAndNavigateToNextInputIfAtBoundary, - ] + ], ); const inputProps = useMemo( @@ -166,7 +166,7 @@ export const useFilterClause = ({ onKeyDownCapture: handleKeyDownCaptureNavigation, tabIndex: -1, }), - [handleKeyDownCaptureNavigation] + [handleKeyDownCaptureNavigation], ); // Do we need this or can we leave it to the filterEditor @@ -178,8 +178,8 @@ export const useFilterClause = ({ filterClauseModel.column === undefined ? columnRef : filterClauseModel.op === undefined - ? operatorRef - : null; + ? operatorRef + : null; requestAnimationFrame(() => { inputRef?.current?.querySelector("input")?.focus(); diff --git a/vuu-ui/packages/vuu-filters/src/filter-clause/value-editors/FilterClauseValueEditorDate.tsx b/vuu-ui/packages/vuu-filters/src/filter-clause/value-editors/FilterClauseValueEditorDate.tsx index 54df57e39..7335b7955 100644 --- a/vuu-ui/packages/vuu-filters/src/filter-clause/value-editors/FilterClauseValueEditorDate.tsx +++ b/vuu-ui/packages/vuu-filters/src/filter-clause/value-editors/FilterClauseValueEditorDate.tsx @@ -47,6 +47,7 @@ export const FilterClauseValueEditorDate = ( className={cx("vuuFilterClause-DatePicker", className)} onBlur={onBlur} onCommit={onSelectedDateChange} + selectedDate={date} /> ); }; diff --git a/vuu-ui/packages/vuu-ui-controls/src/vuu-date-picker/VuuDatePicker.tsx b/vuu-ui/packages/vuu-ui-controls/src/vuu-date-picker/VuuDatePicker.tsx index 919877782..b1a677e8d 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/vuu-date-picker/VuuDatePicker.tsx +++ b/vuu-ui/packages/vuu-ui-controls/src/vuu-date-picker/VuuDatePicker.tsx @@ -42,9 +42,14 @@ export const VuuDatePicker = ({ }: DatePickerProps & { onCommit?: CommitHandler; }) => { - const [open, setOpen] = useState(false); + const [open, _setOpen] = useState(false); const valueRef = useRef(""); + const setOpen = (o: boolean) => { + console.log(`setOpen ${o}`); + _setOpen(o); + }; + const handleSelectionChange = useCallback( (e: SyntheticEvent, date: DateValue) => { if (date && !isSameDate(date, selectedDate)) { diff --git a/vuu-ui/packages/vuu-utils/src/html-utils.ts b/vuu-ui/packages/vuu-utils/src/html-utils.ts index 942b9449e..24accbc51 100644 --- a/vuu-ui/packages/vuu-utils/src/html-utils.ts +++ b/vuu-ui/packages/vuu-utils/src/html-utils.ts @@ -126,6 +126,11 @@ export const isInputElement = ( } }; +export const isDateInput = ( + el: HTMLElement | EventTarget | null, +): el is HTMLInputElement => + isInputElement(el) && el.classList.contains("saltDateInput-input"); + export const hasOpenOptionList = (el: HTMLElement | EventTarget | null) => { if (el !== null) { return (el as HTMLElement).ariaExpanded === "true"; diff --git a/vuu-ui/showcase/src/examples/Filters/FilterEditor/FilterEditor.examples.tsx b/vuu-ui/showcase/src/examples/Filters/FilterEditor/FilterEditor.examples.tsx index ea8d5f173..4cfc2f5d0 100644 --- a/vuu-ui/showcase/src/examples/Filters/FilterEditor/FilterEditor.examples.tsx +++ b/vuu-ui/showcase/src/examples/Filters/FilterEditor/FilterEditor.examples.tsx @@ -7,30 +7,19 @@ import { import { useCallback, useMemo } from "react"; import { getSchema, vuuModule } from "@finos/vuu-data-test"; import { Filter } from "@finos/vuu-filter-types"; +import { SchemaColumn, TableSchema } from "packages/vuu-data-types"; +import { ColumnDescriptor } from "packages/vuu-table-types"; let displaySequence = 1; -const lastUpdatedColumn = { - name: "lastUpdated", - serverDataType: "long", - type: "date/time", -} as const; - -export const NewFilter = ({ +const FilterEditorTemplate = ({ onSave: onSaveProp, + tableSchema = getSchema("instruments"), + columnDescriptors = tableSchema.columns, ...props }: Partial) => { - const tableSchema = useMemo(() => getSchema("instruments"), []); - const { typeaheadHook } = vuuModule("SIMUL"); - const style = useMemo( - () => ({ - background: "#eee", - }), - [] - ); - const onCancel = useCallback(() => { console.log(`cancel filter edit`); }, []); @@ -41,40 +30,73 @@ export const NewFilter = ({ ((filter) => { console.log(`save filter ${JSON.stringify(filter)}`); }), - [onSaveProp] + [onSaveProp], + ); + + const style = useMemo( + () => ({ + background: "#eee", + }), + [], ); return ( - <> - - + ); }; -NewFilter.displaySequence = displaySequence++; -export const EditSimplerFilter = ({ - onSave: onSaveProp, - ...props -}: Partial) => { - const tableSchema = useMemo(() => getSchema("instruments"), []); +export const NewFilter = (props: Partial) => ( + +); - const { typeaheadHook } = vuuModule("SIMUL"); +NewFilter.displaySequence = displaySequence++; - const style = useMemo( - () => ({ - background: "#eee", - }), - [] +export const NewFilterDateColumns = (props: Partial) => { + const [tableSchema, columnDescriptors] = useMemo< + [TableSchema, ColumnDescriptor[]] + >(() => { + const columns: SchemaColumn[] = [ + { + name: "tradeDate", + serverDataType: "long", + }, + { + name: "settlementDate", + serverDataType: "long", + }, + ]; + + return [ + { + columns, + key: "id", + table: { table: "Test", module: "test" }, + }, + + columns.map((col) => ({ ...col, type: "date/time" })), + ]; + }, []); + + return ( + ); +}; + +NewFilter.displaySequence = displaySequence++; +export const EditSimplerFilter = (props: Partial) => { const filter = useMemo(() => { return { column: "currency", @@ -83,51 +105,11 @@ export const EditSimplerFilter = ({ }; }, []); - const onCancel = useCallback(() => { - console.log(`cancel filter edit`); - }, []); - - const onSave = useMemo( - () => - onSaveProp ?? - ((filter) => { - console.log(`save filter ${JSON.stringify(filter)}`); - }), - [onSaveProp] - ); - - return ( - <> - - - ); + return ; }; EditSimplerFilter.displaySequence = displaySequence++; -export const EditMultiClauseAndFilter = ({ - onSave: onSaveProp, - ...props -}: Partial) => { - const tableSchema = useMemo(() => getSchema("instruments"), []); - - const { typeaheadHook } = vuuModule("SIMUL"); - - const style = useMemo( - () => ({ - background: "#eee", - }), - [] - ); - +export const EditMultiClauseAndFilter = (props: Partial) => { const filter = useMemo(() => { return { op: "and", @@ -146,51 +128,11 @@ export const EditMultiClauseAndFilter = ({ }; }, []); - const onCancel = useCallback(() => { - console.log(`cancel filter edit`); - }, []); - - const onSave = useMemo( - () => - onSaveProp ?? - ((filter) => { - console.log(`save filter ${JSON.stringify(filter)}`); - }), - [onSaveProp] - ); - - return ( - <> - - - ); + return ; }; EditMultiClauseAndFilter.displaySequence = displaySequence++; -export const EditMultiClauseOrFilter = ({ - onSave: onSaveProp, - ...props -}: Partial) => { - const tableSchema = useMemo(() => getSchema("instruments"), []); - - const { typeaheadHook } = vuuModule("SIMUL"); - - const style = useMemo( - () => ({ - background: "#eee", - }), - [] - ); - +export const EditMultiClauseOrFilter = (props: Partial) => { const filter = useMemo(() => { return { op: "or", @@ -209,32 +151,6 @@ export const EditMultiClauseOrFilter = ({ }; }, []); - const onCancel = useCallback(() => { - console.log(`cancel filter edit`); - }, []); - - const onSave = useMemo( - () => - onSaveProp ?? - ((filter) => { - console.log(`save filter ${JSON.stringify(filter)}`); - }), - [onSaveProp] - ); - - return ( - <> - - - ); + return ; }; EditMultiClauseOrFilter.displaySequence = displaySequence++; diff --git a/vuu-ui/showcase/src/examples/Filters/FilterEditor/index.ts b/vuu-ui/showcase/src/examples/Filters/FilterEditor/index.ts index d96d5e7bb..13dc9a0c0 100644 --- a/vuu-ui/showcase/src/examples/Filters/FilterEditor/index.ts +++ b/vuu-ui/showcase/src/examples/Filters/FilterEditor/index.ts @@ -1 +1 @@ -export * as FilterEditor from "./FilterEditor.examples"; +export * from "./FilterEditor.examples";