finos#1073 enable date/time pattern selection through ColumnSettings

- converges date and time column types to one unified date/time type, consistent with how some major programming languages handles datetime. - date/time pattern selection is only available for columns with "date/time" type. - changes DateTimePattern to be an object instead of strings to enable simultaneous selection of both date and time patterns. - also moves DateTimeColumnDescriptor to vuu-table-types package for consistency.
junaidzm13 · Jan 2, 2024 · d47e1bc · d47e1bc
1 parent 733068a
commit d47e1bc
Show file tree

Hide file tree

Showing 23 changed files with 338 additions and 107 deletions.
diff --git a/vuu-ui/cypress/pages/ShellWithNewTheme.ts b/vuu-ui/cypress/pages/ShellWithNewTheme.ts
@@ -4,23 +4,23 @@ import { SHELL_WITH_NEW_THEME_URL } from "../support/e2e/constants";
 export class ShellWithNewTheme {
   visit: () => void = () => {
     cy.visit(SHELL_WITH_NEW_THEME_URL);
-  }
+  };
 
   getContextMenuButton: () => Cypress.Chainable<JQuery<HTMLElement>> = () => {
     return cy
       .findByRole("tablist", { name: "data tabs" })
       .findAllByRole("tab")
       .first()
       .findByRole("button", { name: "context menu" });
-  }
+  };
 
   getSaveLayoutButton: () => Cypress.Chainable<JQuery<HTMLElement>> = () => {
     return cy.findByRole("menuitem", { name: "Save Layout" });
-  }
+  };
 
   getMyLayoutsButton: () => Cypress.Chainable<JQuery<HTMLElement>> = () => {
     return cy.findByRole("tab", { name: "MY LAYOUTS" });
-  }
+  };
 
   getLayoutTile: (
     layoutName: string,
@@ -33,12 +33,13 @@ export class ShellWithNewTheme {
     creator: string,
     date: Date
   ) => {
-    const layoutTileName = `${layoutName} ${creator}, ${formatDate(date)}`;
+    const formattedDate = formatDate({ date: "dd.mm.yyyy" })(date);
+    const layoutTileName = `${layoutName} ${creator}, ${formattedDate}`;
 
     return cy
       .findByRole("listbox", { name: "my layouts" })
       .findByRole("list", { name: group })
       .findByRole("listitem", { name: layoutTileName })
       .findByRole("button");
-  }
+  };
 }
diff --git a/vuu-ui/packages/vuu-shell/src/persistence-management/LocalPersistenceManager.ts b/vuu-ui/packages/vuu-shell/src/persistence-management/LocalPersistenceManager.ts
@@ -32,7 +32,7 @@ export class LocalPersistenceManager implements PersistenceManager {
           const newMetadata: LayoutMetadata = {
             ...metadata,
             id,
-            created: formatDate("dd.mm.yyyy")(new Date()),
+            created: formatDate({ date: "dd.mm.yyyy" })(new Date()),
           };
 
           this.saveLayoutsWithMetadata(

diff --git a/vuu-ui/packages/vuu-shell/test/layout-persistence/LocalLayoutPersistenceManager.test.ts b/vuu-ui/packages/vuu-shell/test/layout-persistence/LocalLayoutPersistenceManager.test.ts
@@ -31,7 +31,7 @@ const persistenceManager = new LocalPersistenceManager();
 
 const existingId = "existing_id";
 
-const newDate = formatDate("dd.mm.yyyy")(new Date());
+const newDate = formatDate({ date: "dd.mm.yyyy" })(new Date());
 
 const existingMetadata: LayoutMetadata = {
   id: existingId,

diff --git a/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/ColumnFormattingPanel.tsx b/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/ColumnFormattingPanel.tsx
@@ -11,12 +11,15 @@ import {
   getCellRendererOptions,
   getConfigurationEditor,
   isColumnTypeRenderer,
+  isDateTimeColumn,
   isTypeDescriptor,
 } from "@finos/vuu-utils";
 import { FormField, FormFieldLabel } from "@salt-ds/core";
 import cx from "clsx";
 import { HTMLAttributes, useCallback, useMemo } from "react";
 import { NumericFormattingSettings } from "./NumericFormattingSettings";
+import { DateTimeFormattingSettings } from "./DateTimeFormattingSettings";
+import { FormattingSettingsProps } from "./types";
 
 const classBase = "vuuColumnFormattingPanel";
 
@@ -38,21 +41,10 @@ export const ColumnFormattingPanel = ({
   onChangeRendering,
   ...htmlAttributes
 }: ColumnFormattingPanelProps) => {
-  const contentForType = useMemo(() => {
-    switch (column.serverDataType) {
-      case "double":
-      case "int":
-      case "long":
-        return (
-          <NumericFormattingSettings
-            column={column}
-            onChange={onChangeFormatting}
-          />
-        );
-      default:
-        return null;
-    }
-  }, [column, onChangeFormatting]);
+  const formattingSettingsForType = useMemo(
+    () => formattingSettingsByColType({ column, onChange: onChangeFormatting }),
+    [column, onChangeFormatting]
+  );
 
   const ConfigEditor = useMemo<
     React.FC<ConfigurationEditorProps> | undefined
@@ -81,7 +73,7 @@ export const ColumnFormattingPanel = ({
   const handleChangeRenderer = useCallback<
     SingleSelectionHandler<CellRendererDescriptor>
   >(
-    (evt, cellRendererDescriptor) => {
+    (_, cellRendererDescriptor) => {
       const renderProps: ColumnTypeRendering = {
         name: cellRendererDescriptor.name,
       };
@@ -112,7 +104,7 @@ export const ColumnFormattingPanel = ({
       <div
         className={cx(classBase, className, `${classBase}-${serverDataType}`)}
       >
-        {contentForType}
+        {formattingSettingsForType}
         {ConfigEditor ? (
           <ConfigEditor
             column={column as ColumnDescriptorCustomRenderer}
@@ -123,3 +115,20 @@ export const ColumnFormattingPanel = ({
     </div>
   );
 };
+
+function formattingSettingsByColType(props: FormattingSettingsProps) {
+  const { column } = props;
+
+  if (isDateTimeColumn(column)) {
+    return <DateTimeFormattingSettings {...props} column={column} />;
+  }
+
+  switch (column.serverDataType) {
+    case "double":
+    case "int":
+    case "long":
+      return <NumericFormattingSettings {...props} />;
+    default:
+      return null;
+  }
+}
diff --git a/...i/packages/vuu-table-extras/src/column-formatting-settings/DateTimeFormattingSettings.css b/...i/packages/vuu-table-extras/src/column-formatting-settings/DateTimeFormattingSettings.css
@@ -0,0 +1,6 @@
+.vuuDateTimeFormattingSettings {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-top: 6px;
+}
diff --git a/...i/packages/vuu-table-extras/src/column-formatting-settings/DateTimeFormattingSettings.tsx b/...i/packages/vuu-table-extras/src/column-formatting-settings/DateTimeFormattingSettings.tsx
@@ -0,0 +1,123 @@
+import React, { SyntheticEvent, useCallback, useMemo, useState } from "react";
+import { Dropdown, SingleSelectionHandler } from "@finos/vuu-ui-controls";
+import {
+  DateTimePattern,
+  defaultPatternsByType,
+  fallbackDateTimePattern,
+  getTypeFormattingFromColumn,
+  supportedDateTimePatterns,
+} from "@finos/vuu-utils";
+import {
+  FormField,
+  FormFieldLabel,
+  ToggleButton,
+  ToggleButtonGroup,
+} from "@salt-ds/core";
+import { DateTimeColumnDescriptor } from "@finos/vuu-table-types";
+import { FormattingSettingsProps } from "./types";
+
+import "./DateTimeFormattingSettings.css";
+
+const classBase = "vuuDateTimeFormattingSettings";
+
+export const DateTimeFormattingSettings: React.FC<
+  FormattingSettingsProps<DateTimeColumnDescriptor>
+> = (props) => {
+  const { column, onChange } = props;
+  const formatting = getTypeFormattingFromColumn(column);
+  const { pattern = fallbackDateTimePattern } = formatting;
+  const toggleValue = useMemo(() => getToggleValue(pattern), [pattern]);
+
+  const [fallbackState, setFallbackState] = useState<Required<DateTimePattern>>(
+    {
+      time: pattern.time ?? defaultPatternsByType.time,
+      date: pattern.date ?? defaultPatternsByType.date,
+    }
+  );
+
+  const onPatternChange = useCallback(
+    (pattern: DateTimePattern) => onChange({ ...formatting, pattern }),
+    [onChange, formatting]
+  );
+
+  const onDropdownChange = useCallback<
+    <T extends keyof DateTimePattern>(
+      key: T
+    ) => SingleSelectionHandler<Required<DateTimePattern>[T]>
+  >(
+    (key) => (_, p) => {
+      const updatedPattern = { ...(pattern ?? {}), [key]: p };
+      setFallbackState((s) => ({
+        time: updatedPattern.time ?? s.time,
+        date: updatedPattern.date ?? s.date,
+      }));
+      onPatternChange(updatedPattern);
+    },
+    [onPatternChange, pattern]
+  );
+
+  const onToggleChange = useCallback(
+    (evnt: SyntheticEvent<HTMLButtonElement, Event>) => {
+      const value = evnt.currentTarget.value as ToggleValue;
+      switch (value) {
+        case "time":
+          return onPatternChange({
+            [value]: pattern[value] ?? fallbackState[value],
+          });
+        case "date":
+          return onPatternChange({
+            [value]: pattern[value] ?? fallbackState[value],
+          });
+        case "both":
+          return onPatternChange({
+            time: pattern.time ?? fallbackState.time,
+            date: pattern.date ?? fallbackState.date,
+          });
+      }
+    },
+    [onPatternChange, pattern, fallbackState]
+  );
+
+  return (
+    <div className={classBase}>
+      <FormField>
+        <FormFieldLabel>{"Date/Time pattern"}</FormFieldLabel>
+        <ToggleButtonGroup
+          className="vuuToggleButtonGroup"
+          onChange={onToggleChange}
+          value={toggleValue}
+        >
+          {toggleValues.map((v) => (
+            <ToggleButton key={v} value={v}>
+              {v.toUpperCase()}
+            </ToggleButton>
+          ))}
+        </ToggleButtonGroup>
+      </FormField>
+
+      {(["date", "time"] as const)
+        .filter((v) => !!pattern[v])
+        .map((v) => (
+          <FormField labelPlacement="left" key={v}>
+            <FormFieldLabel>{`${labelByType[v]}`}</FormFieldLabel>
+            <Dropdown<Required<DateTimePattern>[typeof v]>
+              onSelectionChange={onDropdownChange(v)}
+              selected={pattern[v]}
+              source={supportedDateTimePatterns[v]}
+              width="100%"
+            />
+          </FormField>
+        ))}
+    </div>
+  );
+};
+
+const labelByType = { date: "Date", time: "Time" } as const;
+
+const toggleValues = ["date", "time", "both"] as const;
+
+type ToggleValue = (typeof toggleValues)[number];
+
+function getToggleValue(pattern: DateTimePattern): ToggleValue {
+  return !pattern.time ? "date" : !pattern.date ? "time" : "both";
+}
diff --git a/...ui/packages/vuu-table-extras/src/column-formatting-settings/NumericFormattingSettings.tsx b/...ui/packages/vuu-table-extras/src/column-formatting-settings/NumericFormattingSettings.tsx
@@ -8,18 +8,11 @@ import {
   useCallback,
   useState,
 } from "react";
+import { FormattingSettingsProps } from "./types";
 
 const classBase = "vuuFormattingSettings";
 
-export interface NumericFormattingSettingsProps {
-  column: ColumnDescriptor;
-  onChange: (formatting: ColumnTypeFormatting) => void;
-}
-
-export const NumericFormattingSettings = ({
-  column,
-  onChange,
-}: NumericFormattingSettingsProps) => {
+export const NumericFormattingSettings = ({column, onChange}: FormattingSettingsProps) => {
   const [formattingSettings, setFormattingSettings] =
     useState<ColumnTypeFormatting>(getTypeFormattingFromColumn(column));
 

diff --git a/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/index.ts b/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/index.ts
@@ -1,2 +1,3 @@
 export * from "./ColumnFormattingPanel";
 export * from "./NumericFormattingSettings";
+export * from "./DateTimeFormattingSettings";
diff --git a/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/types.ts b/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/types.ts
@@ -0,0 +1,6 @@
+import { ColumnDescriptor, ColumnTypeFormatting } from "@finos/vuu-table-types";
+
+export interface FormattingSettingsProps<T extends ColumnDescriptor = ColumnDescriptor> {
+  column: T;
+  onChange: (formatting: ColumnTypeFormatting) => void;
+}
diff --git a/vuu-ui/packages/vuu-table-types/index.d.ts b/vuu-ui/packages/vuu-table-types/index.d.ts
@@ -9,6 +9,7 @@ import type {
 import type { VuuDataRow } from "@finos/vuu-protocol-types";
 import type { ValueFormatter } from "@finos/vuu-table";
 import type { ClientSideValidationChecker } from "@finos/vuu-ui-controls";
+import type { DateTimePattern } from "@finos/vuu-utils";
 import type { FunctionComponent, MouseEvent } from "react";
 import type { HTMLAttributes } from "react";
 
@@ -77,7 +78,7 @@ export interface GridConfig extends TableConfig {
 export declare type ColumnTypeFormatting = {
   alignOnDecimals?: boolean;
   decimals?: number;
-  pattern?: string;
+  pattern?: DateTimePattern;
   zeroPad?: boolean;
 };
 
@@ -128,7 +129,19 @@ export interface ValueListRenderer {
   values: string[];
 }
 
-export declare type DateTimeColumnTypeSimple = "date" | "time";
+export declare type DateTimeColumnTypeSimple = "date/time";
+
+type DateTimeColumnType =
+  | DateTimeColumnTypeSimple
+  | (Omit<ColumnTypeDescriptor, "name"> & { name: DateTimeColumnTypeSimple });
+
+export declare type DateTimeColumnDescriptor = Omit<
+  ColumnDescriptor,
+  "type"
+> & {
+  type: DateTimeColumnType;
+};
+
 export declare type ColumnTypeSimple =
   | "string"
   | "number"
@@ -180,9 +193,9 @@ export interface ColumnDescriptor {
   colHeaderLabelRenderer?: string;
   editable?: boolean;
   flex?: number;
-  /** 
+  /**
    Optional additional level(s) of heading to display above label.
-   May span multiple columns, if multiple adjacent columns declare 
+   May span multiple columns, if multiple adjacent columns declare
    same heading at same level.
   */
   heading?: string[];

diff --git a/vuu-ui/packages/vuu-utils/src/column-utils.ts b/vuu-ui/packages/vuu-utils/src/column-utils.ts
@@ -22,7 +22,6 @@ import type {
   ColumnTypeFormatting,
   ColumnTypeRendering,
   ColumnTypeWithValidationRules,
-  DateTimeColumnTypeSimple,
   DefaultColumnConfiguration,
   GroupColumnDescriptor,
   LookupRenderer,
@@ -32,6 +31,7 @@ import type {
   TableHeading,
   TableHeadings,
   ValueListRenderer,
+  DateTimeColumnDescriptor,
 } from "@finos/vuu-table-types";
 import type { CSSProperties } from "react";
 import { moveItem } from "./array-utils";
@@ -131,22 +131,11 @@ export const isNumericColumn = ({ serverDataType, type }: ColumnDescriptor) => {
   return false;
 };
 
-type DateTimeColumnType =
-  | DateTimeColumnTypeSimple
-  | (Omit<ColumnTypeDescriptor, "name"> & { name: DateTimeColumnTypeSimple });
-
-export type DateTimeColumnDescriptor = Omit<ColumnDescriptor, "type"> & {
-  type: DateTimeColumnType;
-};
-
-export const isDateColumn = ({ type }: ColumnDescriptor) =>
-  (isTypeDescriptor(type) ? type.name : type) === "date";
-export const isTimeColumn = ({ type }: ColumnDescriptor) =>
-  (isTypeDescriptor(type) ? type.name : type) === "time";
 export const isDateTimeColumn = (
   column: ColumnDescriptor
 ): column is DateTimeColumnDescriptor =>
-  isDateColumn(column) || isTimeColumn(column);
+  (isTypeDescriptor(column.type) ? column.type.name : column.type) ===
+  "date/time";
 
 export const isPinned = (column: ColumnDescriptor) =>
   typeof column.pin === "string";