fix type issues

finos · Aug 8, 2023 · cf028e1 · cf028e1
1 parent cbf2cae
commit cf028e1
Show file tree

Hide file tree

Showing 19 changed files with 79 additions and 60 deletions.
diff --git a/vuu-ui/packages/vuu-filter-types/index.d.ts b/vuu-ui/packages/vuu-filter-types/index.d.ts
@@ -1,3 +1,11 @@
+export declare type NumericFilterClauseOp =
+  | "="
+  | "!="
+  | ">"
+  | ">="
+  | "<="
+  | "<";
+
 export declare type SingleValueFilterClauseOp =
   | "="
   | "!="

diff --git a/vuu-ui/packages/vuu-filters/src/filter-clause/FilterClauseEditor.tsx b/vuu-ui/packages/vuu-filters/src/filter-clause/FilterClauseEditor.tsx
@@ -99,7 +99,7 @@ export const FilterClauseEditor = ({
   );
 
   const handleValueChange = useCallback(
-    (value: string) => {
+    (value: string | number) => {
       console.log(`handleValueChange ${value}`);
       setValue(value);
       onChange({
@@ -159,6 +159,7 @@ export const FilterClauseEditor = ({
             className={classBase}
             column={selectedColumn}
             filterClause={filterClause}
+            onValueChange={handleValueChange}
             operator={operator}
             ref={valueRef}
           />

diff --git a/vuu-ui/packages/vuu-filters/src/filter-clause/NumericInput.tsx b/vuu-ui/packages/vuu-filters/src/filter-clause/NumericInput.tsx
@@ -6,38 +6,30 @@ import {
   useRef,
   useState,
 } from "react";
-import { Filter } from "@finos/vuu-filter-types";
 import { Input } from "@salt-ds/core";
-import { getNumericFilter } from "../filter-utils";
 import { isValidNumber } from "@finos/vuu-utils";
 import { FilterClauseValueEditor } from "./filterClauseTypes";
 
 export interface NumericInputProps
   extends FilterClauseValueEditor,
     HTMLAttributes<HTMLDivElement> {
   operatorInputRef?: RefObject<HTMLInputElement>;
-  onFilterChange?: (filter?: Filter) => void;
+  onValueChange: (value: number) => void;
   operator: string;
   ref: RefObject<HTMLDivElement>;
+  value?: number;
 }
 
 export const NumericInput = ({
   className,
   column,
-  filterClause,
-  onFilterChange,
-  operator,
+  // filterClause,
+  onValueChange,
+  // operator,
+  value,
 }: NumericInputProps) => {
-  const defaultValue =
-    filterClause?.op !== "in" && isValidNumber(filterClause?.value)
-      ? filterClause?.value
-      : undefined;
-  // const defaultOp = isNumericOperator(defaultFilter?.op)
-  //   ? defaultFilter?.op
-  //   : undefined;
-
   const [valueInputValue, setValueInputValue] = useState<string>(
-    defaultValue?.toString() || ""
+    isValidNumber(value) ? value.toString() : ""
   );
   const valueInputRef = useRef<HTMLInputElement>(null);
 
@@ -54,12 +46,7 @@ export const NumericInput = ({
       // type="text"
       onChange={(event: ChangeEvent<HTMLInputElement>) => {
         setValueInputValue(event.target.value);
-        const filter = getNumericFilter(
-          column,
-          operator,
-          Number.parseFloat(event.target.value)
-        );
-        onFilterChange(filter);
+        onValueChange(Number.parseFloat(event.target.value));
       }}
     />
   );

diff --git a/vuu-ui/packages/vuu-filters/src/filter-pill/FilterPill.tsx b/vuu-ui/packages/vuu-filters/src/filter-pill/FilterPill.tsx
@@ -1,20 +1,23 @@
 import { NamedFilter } from "packages/vuu-filter-types";
-import { HTMLAttributes } from "react";
+import { HTMLAttributes, useCallback } from "react";
 import cx from "classnames";
 import { EditableLabel, EditableLabelProps } from "@finos/vuu-ui-controls";
 import { FilterPillMenu } from "../filter-pill-menu";
 
 import "./FilterPill.css";
+import { MenuActionHandler } from "packages/vuu-data-types";
 
 const classBase = "vuuFilterPill";
 
 export interface FilterPillProps extends HTMLAttributes<HTMLDivElement> {
   filter: NamedFilter;
+  index?: number;
 }
 
 export const FilterPill = ({
   filter,
   className: classNameProp,
+  index = 0,
   ...htmlAttributes
 }: FilterPillProps) => {
   //   const handleExitEditMode: EditableLabelProps["onExitEditMode"] = (
@@ -39,14 +42,19 @@ export const FilterPill = ({
     });
   };
 
+  const handleMenuAction = useCallback<MenuActionHandler>((action) => {
+    console.log(`handle action ${action.menuId}`);
+    return true;
+  }, []);
+
   return (
     <div {...htmlAttributes} className={cx(classBase, classNameProp)}>
       <EditableLabel
         defaultValue={filter.name}
         onEnterEditMode={handleEnterEditMode}
         onExitEditMode={handleExitEditMode}
       />
-      <FilterPillMenu />
+      <FilterPillMenu index={index} onMenuAction={handleMenuAction} />
     </div>
   );
 };
diff --git a/vuu-ui/packages/vuu-filters/src/filter-utils.ts b/vuu-ui/packages/vuu-filters/src/filter-utils.ts
@@ -4,6 +4,7 @@ import {
   Filter,
   FilterClause,
   FilterCombinatorOp,
+  NumericFilterClauseOp,
 } from "@finos/vuu-filter-types";
 import {
   extractFilterForColumn,
@@ -15,7 +16,6 @@ import {
   isSingleValueFilter,
   partition,
 } from "@finos/vuu-utils";
-import { NumericOperator } from "./filter-clause/operator-utils";
 
 export const AND = "and";
 export const EQUALS = "=";
@@ -399,10 +399,10 @@ export const getTypeaheadFilter = (
 
 export const getNumericFilter = (
   column: string,
-  operator?: NumericOperator,
+  op?: NumericFilterClauseOp,
   value?: number
-): Filter | undefined => {
-  if (operator === undefined) return undefined;
+): FilterClause | undefined => {
+  if (op === undefined) return undefined;
   if (value === undefined || isNaN(value)) return undefined;
-  return { column, op: operator, value };
+  return { column, op, value };
 };
diff --git a/vuu-ui/packages/vuu-popups/src/menu/useContextMenu.tsx b/vuu-ui/packages/vuu-popups/src/menu/useContextMenu.tsx
@@ -134,7 +134,7 @@ const NO_OPTIONS = {};
 
 const showContextMenuComponent = (
   e: MouseEvent<HTMLElement>,
-  contextMenu: JSX.Elementfinos
+  contextMenu: JSX.Element
 ) => {
   const position = {
     x: e.clientX,

diff --git a/...-table-extras/src/datagrid-configuration-ui/column-settings-panel/ColumnSettingsPanel.tsx b/...-table-extras/src/datagrid-configuration-ui/column-settings-panel/ColumnSettingsPanel.tsx
@@ -98,7 +98,6 @@ export const ColumnSettingsPanel = ({
       <Text as="h4">Column Settings</Text>
       <Stack
         active={activeTab}
-        showTabs
         className={cx(`${classBase}-columnTabs`)}
         onTabSelectionChanged={setActiveTab}
         TabstripProps={tabstripProps}

diff --git a/...s/vuu-table-extras/src/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.tsx b/...s/vuu-table-extras/src/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.tsx
@@ -112,7 +112,6 @@ export const DatagridSettingsPanel = ({
         getTabLabel={getTabLabel}
         active={selectedTabIndex === 2 ? 1 : selectedTabIndex}
         onTabSelectionChanged={handleTabSelectionChanged}
-        showTabs
       >
         <GridSettingsPanel
           config={gridSettings}

diff --git a/...ackages/vuu-table-extras/src/table-settings/column-settings-panel/ColumnSettingsPanel.tsx b/...ackages/vuu-table-extras/src/table-settings/column-settings-panel/ColumnSettingsPanel.tsx
@@ -98,7 +98,6 @@ export const ColumnSettingsPanel = ({
       <Text as="h4">Column Settings</Text>
       <Stack
         active={activeTab}
-        showTabs
         className={cx(`${classBase}-columnTabs`)}
         onTabSelectionChanged={setActiveTab}
         TabstripProps={tabstripProps}

diff --git a/vuu-ui/packages/vuu-table-extras/src/table-settings/settings-panel/DatagridSettingsPanel.tsx b/vuu-ui/packages/vuu-table-extras/src/table-settings/settings-panel/DatagridSettingsPanel.tsx
@@ -112,7 +112,6 @@ export const DatagridSettingsPanel = ({
         getTabLabel={getTabLabel}
         active={selectedTabIndex === 2 ? 1 : selectedTabIndex}
         onTabSelectionChanged={handleTabSelectionChanged}
-        showTabs
       >
         <GridSettingsPanel
           config={gridSettings}

diff --git a/vuu-ui/packages/vuu-table/src/table-next/useTableNext.ts b/vuu-ui/packages/vuu-table/src/table-next/useTableNext.ts
@@ -26,7 +26,11 @@ import {
   useTableContextMenu,
   useTableViewport,
 } from "../table";
-import { isShowSettings, PersistentColumnAction } from "../table/useTableModel";
+import {
+  isShowColumnSettings,
+  isShowTableSettings,
+  PersistentColumnAction,
+} from "../table/useTableModel";
 import { useDataSource } from "./useDataSource";
 import { useInitialValue } from "./useInitialValue";
 import { useTableModel } from "./useTableModel";
@@ -138,18 +142,25 @@ export const useTable = ({
 
   const onPersistentColumnOperation = useCallback(
     (action: PersistentColumnAction) => {
-      if (isShowSettings(action)) {
+      if (isShowColumnSettings(action)) {
         dispatchLayoutAction({
           type: "set-props",
           path: "#context-panel",
           props: {
             expanded: true,
             context: "column-settings",
             column: action.column,
-            title:
-              action.type === "columnSettings"
-                ? "Column Settings"
-                : "DataGrid Settings",
+            title: "Column Settings",
+          },
+        } as SetPropsAction);
+      } else if (isShowTableSettings(action)) {
+        dispatchLayoutAction({
+          type: "set-props",
+          path: "#context-panel",
+          props: {
+            expanded: true,
+            context: "table-settings",
+            title: "DataGrid Settings",
           },
         } as SetPropsAction);
       } else {

diff --git a/vuu-ui/packages/vuu-table/src/table/context-menu/useTableContextMenu.ts b/vuu-ui/packages/vuu-table/src/table/context-menu/useTableContextMenu.ts
@@ -76,7 +76,7 @@ export const useTableContextMenu = ({
         case "column-pin-right": return onPersistentColumnOperation({type: "pinColumn", column, pin: "right"}), true;
         case "column-unpin": return onPersistentColumnOperation({type: "pinColumn", column, pin: undefined}), true
         case "column-settings": return onPersistentColumnOperation({type: "columnSettings", column}), true
-        case "table-settings": return onPersistentColumnOperation({type: "tableSettings", column}), true
+        case "table-settings": return onPersistentColumnOperation({type: "tableSettings"}), true
         default:
       }
     }

diff --git a/vuu-ui/packages/vuu-table/src/table/useTable.ts b/vuu-ui/packages/vuu-table/src/table/useTable.ts
@@ -158,7 +158,7 @@ export const useTable = ({
       console.log(`onPersistentColumnOperation, dispatchColumnAction`, {
         action,
       });
-      dispatchColumnAction(action);
+      dispatchColumnAction(action as any);
     },
     [dispatchColumnAction]
   );

diff --git a/vuu-ui/packages/vuu-table/src/table/useTableModel.ts b/vuu-ui/packages/vuu-table/src/table/useTableModel.ts
@@ -147,10 +147,13 @@ export type PersistentColumnAction =
   | ColumnActionColumnSettings
   | ColumnActionTableSettings;
 
-export const isShowSettings = (
+export const isShowColumnSettings = (
   action: PersistentColumnAction
-): action is ColumnActionColumnSettings =>
-  action.type === "columnSettings" || action.type === "tableSettings";
+): action is ColumnActionColumnSettings => action.type === "columnSettings";
+
+export const isShowTableSettings = (
+  action: PersistentColumnAction
+): action is ColumnActionTableSettings => action.type === "tableSettings";
 
 export type GridModelAction =
   | ColumnActionColumnSettings

diff --git a/vuu-ui/showcase/src/examples/ColumnConfiguration/ComputedColumn.examples.tsx b/vuu-ui/showcase/src/examples/ColumnConfiguration/ComputedColumn.examples.tsx
@@ -37,8 +37,8 @@ const columns = [
 
 export const DefaultColumnExpressionInput = () => {
   const [expression, setExpression] = useState<Expression>();
-  const [source, setSource] = useState<string>("");
-  const [isValid, setIsValid] = useState(false);
+  const [, setSource] = useState<string>("");
+  const [isValid] = useState(false);
   const suggestionProvider = useColumnExpressionSuggestionProvider({
     columns,
     table,
@@ -55,6 +55,7 @@ export const DefaultColumnExpressionInput = () => {
 
   const handleChange: ColumnExpressionInputProps["onChange"] = useCallback(
     (source: string, expression: Expression | undefined) => {
+      console.log(`source ${source}, expression ${expression}`);
       // const isValidExpression = isCompleteExpression(source);
       // console.log(`is valid ${isValidExpression}`);
       // setIsValid(isCompleteExpression(source));
@@ -73,7 +74,7 @@ export const DefaultColumnExpressionInput = () => {
       <br />
       <br />
       {/* <div>{source}</div> */}
-      <JsonTable source={expression} height={400} />
+      <JsonTable source={expression as any} height={400} />
     </>
   );
 };

diff --git a/vuu-ui/showcase/src/examples/Filters/FilterBar/FilterClause.examples.tsx b/vuu-ui/showcase/src/examples/Filters/FilterBar/FilterClause.examples.tsx
@@ -7,7 +7,7 @@ import {
 } from "../../utils";
 
 import "./FilterClause.examples.css";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { SelectionChangeHandler } from "@salt-ds/lab";
 import { ColumnDescriptor } from "packages/vuu-datagrid-types";
 
@@ -86,10 +86,11 @@ NewFilterClause.displaySequence = displaySequence++;
 export const PartialFilterClauseColumnOnly = () => {
   useAutoLoginToVuuServer();
   const tableSchema = useSchema("instruments");
-  const [filterClause, setFilterClause] = useState<Partial<FilterClause>>({
+  const [filterClause] = useState<Partial<FilterClause>>({
     column: "currency",
   });
-  const onChange = (filter?: Filter) => console.log("Filter Change", filter);
+  const onChange = (filterClause?: Partial<FilterClause>) =>
+    console.log("Filter Change", filterClause);
 
   const onClose = () => console.log("Closing filter component");
 
@@ -109,12 +110,13 @@ PartialFilterClauseColumnOnly.displaySequence = displaySequence++;
 export const PartialFilterClauseColumnAndOperator = () => {
   useAutoLoginToVuuServer();
   const tableSchema = useSchema("instruments");
-  const [filterClause, setFilterClause] = useState<Partial<FilterClause>>({
+  const [filterClause] = useState<Partial<FilterClause>>({
     column: "currency",
     op: "=",
   });
 
-  const onChange = (filter?: Filter) => console.log("Filter Change", filter);
+  const onChange = (filterClause?: Partial<FilterClause>) =>
+    console.log("Filter Change", filterClause);
 
   const onClose = () => console.log("Closing filter component");
 
@@ -135,14 +137,14 @@ export const CompleteFilterClauseTextEquals = () => {
   useAutoLoginToVuuServer();
   const tableSchema = useSchema("instruments");
 
-  const [filterClause, setFilterClause] = useState<Partial<FilterClause>>({
+  const [filterClause] = useState<Partial<FilterClause>>({
     column: "currency",
     op: "=",
     value: "EUR",
   });
 
-  const onChange = (filterClause?: FilterClause) =>
-    console.log("Filter Clause Change", filterClause);
+  const onChange = (filterClause?: Partial<FilterClause>) =>
+    console.log("Filter Change", filterClause);
 
   const onClose = () => console.log("Closing filter component");
 

diff --git a/vuu-ui/showcase/src/examples/Layout/DockLayout.examples.tsx b/vuu-ui/showcase/src/examples/Layout/DockLayout.examples.tsx
@@ -149,7 +149,7 @@ export const LeftInlineDrawerStack = () => {
           title="Rebecca"
           defaultOpen={false}
         ></Drawer>
-        <Stack showTabs style={{ width: "100%", height: "100%" }}>
+        <Stack style={{ width: "100%", height: "100%" }}>
           <Component
             title="Cornflower"
             resizeable

diff --git a/vuu-ui/showcase/src/examples/Layout/DraggableLayout.examples.tsx b/vuu-ui/showcase/src/examples/Layout/DraggableLayout.examples.tsx
@@ -494,7 +494,6 @@ export const ComplexNestedLayout = () => {
                     TabstripProps={{
                       allowAddTab: true,
                     }}
-                    showTabs
                     style={{ flex: 1 }}
                     keyBoardActivation="manual"
                   >