date handling improvements in filters

finos · Aug 16, 2024 · 78aa442 · 78aa442
1 parent 74d988b
commit 78aa442
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 165 deletions.
diff --git 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<Partial<FilterClause>>(
-    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<FilterClauseValueChangeHandler>(
     (value, isFinal) => filterClauseModel.setValue(value, isFinal),
-    [filterClauseModel]
+    [filterClauseModel],
   );
 
   const handleDeselectValue = useCallback(
     () => filterClauseModel.setValue(undefined),
-    [filterClauseModel]
+    [filterClauseModel],
   );
 
   const handleKeyDownCaptureNavigation = useCallback(
@@ -158,15 +158,15 @@ export const useFilterClause = ({
       onCancel,
       onFocusSave,
       removeAndNavigateToNextInputIfAtBoundary,
-    ]
+    ],
   );
 
   const inputProps = useMemo(
     () => ({
       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
@@ -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
@@ -42,9 +42,14 @@ export const VuuDatePicker = ({
 }: DatePickerProps<SingleSelectionValueType> & {
   onCommit?: CommitHandler<HTMLElement, number>;
 }) => {
-  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<HTMLElement>, 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
@@ -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";