handle new server response VP_CREATE_SUCCESS (finos#1104)

ScottLogic · Jan 5, 2024 · da8109e · da8109e
1 parent 8f1d873
commit da8109e
Show file tree

Hide file tree

Showing 11 changed files with 2,553 additions and 61 deletions.
diff --git a/vuu-ui/packages/vuu-data-remote/src/inlined-worker.js b/vuu-ui/packages/vuu-data-remote/src/inlined-worker.js
diff --git a/vuu-ui/packages/vuu-protocol-types/index.d.ts b/vuu-ui/packages/vuu-protocol-types/index.d.ts
@@ -215,8 +215,9 @@ export interface ServerToClientRPC {
 // TODO flesh out as we know more
 export interface ServerToClientViewportRpcResponse {
   action: {
+    key?: string;
     msg?: string;
-    type: "VP_RPC_FAILURE" | "VP_RPC_SUCCESS";
+    type: "VP_RPC_FAILURE" | "VP_RPC_SUCCESS" | "VP_CREATE_SUCCESS";
   };
   type: "VIEW_PORT_RPC_REPONSE";
   method: string;

diff --git a/vuu-ui/packages/vuu-table/src/useTable.ts b/vuu-ui/packages/vuu-table/src/useTable.ts
@@ -22,6 +22,7 @@ import {
 import {
   applySort,
   buildColumnMap,
+  getIndexFromRowElement,
   isGroupColumn,
   isJsonGroup,
   isValidNumber,
@@ -637,15 +638,12 @@ export const useTable = ({
   const handleDragStartRow = useCallback<DragStartHandler>(
     (dragDropState) => {
       const { initialDragElement } = dragDropState;
-      const rowIndex = initialDragElement.ariaRowIndex;
-      if (rowIndex) {
-        const index = parseInt(rowIndex);
-        const row = dataRef.current.find((row) => row[0] === index);
-        if (row) {
-          dragDropState.setPayload(row);
-        } else {
-          // should we abort the operation ?
-        }
+      const rowIndex = getIndexFromRowElement(initialDragElement);
+      const row = dataRef.current.find((row) => row[0] === rowIndex);
+      if (row) {
+        dragDropState.setPayload(row);
+      } else {
+        // should we abort the operation ?
       }
       onDragStart?.(dragDropState);
     },
@@ -672,6 +670,7 @@ export const useTable = ({
 
   return {
     ...containerProps,
+    "aria-rowcount": dataSource.size,
     draggableRow,
     onBlur: editingBlur,
     onDoubleClick: editingDoubleClick,

diff --git a/vuu-ui/packages/vuu-table/src/useTableContextMenu.ts b/vuu-ui/packages/vuu-table/src/useTableContextMenu.ts
@@ -1,7 +1,7 @@
 import { DataSource, DataSourceRow } from "@finos/vuu-data-types";
 import { RuntimeColumnDescriptor } from "@finos/vuu-table-types";
 import { useContextMenu as usePopupContextMenu } from "@finos/vuu-popups";
-import { buildColumnMap } from "@finos/vuu-utils";
+import { buildColumnMap, getIndexFromRowElement } from "@finos/vuu-utils";
 import { MouseEvent, useCallback } from "react";
 
 export interface TableContextMenuHookProps {
@@ -23,15 +23,13 @@ export const useTableContextMenu = ({
 
   const onContextMenu = useCallback(
     (evt: MouseEvent<HTMLElement>) => {
-      // const { current: currentData } = dataRef;
-      // const { current: currentDataSource } = dataSourceRef;
       const target = evt.target as HTMLElement;
       const cellEl = target?.closest("div[role='cell']");
-      const rowEl = target?.closest("div[role='row']");
-      if (cellEl && rowEl /*&& currentData && currentDataSource*/) {
+      const rowEl = target?.closest("div[role='row']") as HTMLElement;
+      if (cellEl && rowEl) {
         const { selectedRowsCount } = dataSource;
         const columnMap = buildColumnMap(columns);
-        const rowIndex = parseInt(rowEl.ariaRowIndex ?? "-1");
+        const rowIndex = getIndexFromRowElement(rowEl);
         const cellIndex = Array.from(rowEl.childNodes).indexOf(cellEl);
         const row = data.find(([idx]) => idx === rowIndex);
         const columnName = columns[cellIndex];

diff --git a/vuu-ui/packages/vuu-utils/src/row-utils.ts b/vuu-ui/packages/vuu-utils/src/row-utils.ts
@@ -32,3 +32,21 @@ export const virtualRowPositioning = (
     return result;
   },
 ];
+
+export const getIndexFromRowElement = (rowElement: HTMLElement) => {
+  const rowIndex = rowElement.ariaRowIndex;
+  if (rowIndex != null) {
+    const index = parseInt(rowIndex) - 1;
+    if (!isNaN(index)) {
+      return index;
+    } else {
+      throw Error(
+        `getIndexFromRowElement row element aria rowindex invalid ${rowIndex}`
+      );
+    }
+  } else {
+    throw Error(
+      "getIndexFromRowElement row element does not have aria rowindex"
+    );
+  }
+};
diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/basket-selector/BasketSelector.tsx b/vuu-ui/sample-apps/feature-basket-trading/src/basket-selector/BasketSelector.tsx
@@ -103,7 +103,7 @@ export const BasketSelector = ({
           className={`${classBase}-instrumentSearch`}
           dataSource={dataSourceBasketTradingSearch}
           placeHolder="Enter Basket Name"
-          searchColumns={["basketId"]}
+          searchColumns={["basketName"]}
         />
         <div className={`${classBase}-buttonBar`}>
           <Button onClick={onClickAddBasket} variant="secondary">

diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/new-basket-panel/NewBasketPanel.tsx b/vuu-ui/sample-apps/feature-basket-trading/src/new-basket-panel/NewBasketPanel.tsx
@@ -1,4 +1,4 @@
-import { DataSource, TableSchema } from "@finos/vuu-data-types";
+import { DataSource, DataSourceRow, TableSchema } from "@finos/vuu-data-types";
 import {
   DialogHeader,
   PopupComponent as Popup,
@@ -11,21 +11,26 @@ import {
 } from "@finos/vuu-ui-controls";
 import { Button, FormField, FormFieldLabel } from "@salt-ds/core";
 import cx from "clsx";
-import { DataSourceRow } from "@finos/vuu-data-types";
 import { HTMLAttributes, RefCallback, useCallback, useMemo } from "react";
+import { useNewBasketPanel } from "./useNewBasketPanel";
 
 import "./NewBasketPanel.css";
-import { useNewBasketPanel } from "./useNewBasketPanel";
 
 const classBase = "vuuBasketNewBasketPanel";
 
 const displayName = (key: number) => (row: DataSourceRow) => String(row[key]);
 
+export type BasketCreatedHandler = (
+  basketName: string,
+  basketId: string,
+  instanceId: string
+) => void;
+
 export interface NewBasketPanelProps extends HTMLAttributes<HTMLDivElement> {
   basketDataSource: DataSource;
   basketSchema: TableSchema;
   onClose: () => void;
-  onSaveBasket: (basketName: string, basketId: string) => void;
+  onBasketCreated: BasketCreatedHandler;
 }
 
 const searchColumns = ["name"];
@@ -35,7 +40,7 @@ export const NewBasketPanel = ({
   basketDataSource,
   basketSchema,
   onClose,
-  onSaveBasket,
+  onBasketCreated,
   ...htmlAttributes
 }: NewBasketPanelProps) => {
   const {
@@ -49,7 +54,7 @@ export const NewBasketPanel = ({
   } = useNewBasketPanel({
     basketDataSource,
     basketSchema,
-    onSaveBasket,
+    onBasketCreated,
   });
 
   const tableProps = useMemo<InstrumentPickerProps["TableProps"]>(

diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/new-basket-panel/useNewBasketPanel.ts b/vuu-ui/sample-apps/feature-basket-trading/src/new-basket-panel/useNewBasketPanel.ts
@@ -1,3 +1,4 @@
+import { ViewportRpcResponse } from "@finos/vuu-data-types";
 import { TableRowSelectHandler } from "@finos/vuu-table";
 import { Commithandler, OpenChangeHandler } from "@finos/vuu-ui-controls";
 import { buildColumnMap, metadataKeys } from "@finos/vuu-utils";
@@ -8,33 +9,42 @@ const { KEY } = metadataKeys;
 
 export type NewBasketHookProps = Pick<
   NewBasketPanelProps,
-  "basketDataSource" | "basketSchema" | "onSaveBasket"
+  "basketDataSource" | "basketSchema" | "onBasketCreated"
 >;
 
 export const useNewBasketPanel = ({
   basketDataSource,
   basketSchema,
-  onSaveBasket,
+  onBasketCreated,
 }: NewBasketHookProps) => {
   const columnMap = buildColumnMap(basketSchema.columns);
   const [basketName, setBasketName] = useState("");
   const [basketId, setBasketId] = useState<string>();
   const saveButtonRef = useRef<HTMLButtonElement>(null);
   const saveBasket = useCallback(() => {
     if (basketName && basketId) {
-      onSaveBasket(basketName, basketId);
       basketDataSource
-        .rpcCall?.({
+        .rpcCall?.<ViewportRpcResponse>({
           namedParams: {},
           params: [basketId, basketName],
           rpcName: "createBasket",
           type: "VIEW_PORT_RPC_CALL",
         })
         .then((response) => {
-          console.log(`rpcResponse`, { response });
+          if (response?.action.type === "VP_CREATE_SUCCESS") {
+            if (response?.action.key) {
+              onBasketCreated(basketName, basketId, response.action.key);
+            }
+          } else if (response?.action.type === "VP_RPC_FAILURE") {
+            // notify?.({
+            //   type: NotificationLevel.Error,
+            //   header: "Add Constituent to Basket",
+            //   body: response?.action.msg ?? `Failed to create basket`,
+            // });
+          }
         });
     }
-  }, [basketDataSource, basketId, basketName, onSaveBasket]);
+  }, [basketDataSource, basketId, basketName, onBasketCreated]);
 
   const handleSelectBasket = useCallback<TableRowSelectHandler>((row) => {
     const basketId = row[KEY] as string;

diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/useBasketTrading.tsx b/vuu-ui/sample-apps/feature-basket-trading/src/useBasketTrading.tsx
@@ -15,7 +15,7 @@ import { TableConfig, TableConfigChangeHandler } from "@finos/vuu-table-types";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { BasketSelectorProps } from "./basket-selector";
 import { BasketChangeHandler } from "./basket-toolbar";
-import { NewBasketPanel } from "./new-basket-panel";
+import { BasketCreatedHandler, NewBasketPanel } from "./new-basket-panel";
 import { useBasketTradingDataSources } from "./useBasketTradingDatasources";
 import { BasketTradingFeatureProps } from "./VuuBasketTradingFeature";
 import defaultEditColumns from "./basket-table-edit/basketConstituentEditColumns";
@@ -167,16 +167,6 @@ export const useBasketTrading = ({
     }));
   }, []);
 
-  const handleSaveNewBasket = useCallback(
-    (/*basketName, basketId*/) => {
-      setBasketState((state) => ({
-        ...state,
-        dialog: undefined,
-      }));
-    },
-    []
-  );
-
   const handleSelectBasket = useCallback(
     (basketInstanceId: string) => {
       save?.({ basketInstanceId }, "basket-state");
@@ -191,6 +181,17 @@ export const useBasketTrading = ({
     ]
   );
 
+  const handleBasketCreated = useCallback<BasketCreatedHandler>(
+    (basketName, basketId, instanceId) => {
+      handleSelectBasket(instanceId);
+      setBasketState((state) => ({
+        ...state,
+        dialog: undefined,
+      }));
+    },
+    [handleSelectBasket]
+  );
+
   const handleAddBasket = useCallback(() => {
     setBasketState((state) => ({
       ...state,
@@ -199,15 +200,15 @@ export const useBasketTrading = ({
           basketDataSource={dataSourceBasket}
           basketSchema={basketSchema}
           onClose={handleCloseNewBasketPanel}
-          onSaveBasket={handleSaveNewBasket}
+          onBasketCreated={handleBasketCreated}
         />
       ),
     }));
   }, [
     basketSchema,
     dataSourceBasket,
+    handleBasketCreated,
     handleCloseNewBasketPanel,
-    handleSaveNewBasket,
   ]);
 
   const basketSelectorProps = useMemo<Omit<BasketSelectorProps, "basket">>(
@@ -261,9 +262,6 @@ export const useBasketTrading = ({
     (dragDropState) => {
       const constituentRow = dragDropState.payload;
       if (constituentRow) {
-        console.log(
-          `useBasketTrading handleDropInstrument ${constituentRow.join(",")}`
-        );
         const ric = constituentRow[basketConstituentMap.ric];
         dataSourceBasketTradingConstituentJoin
           .rpcCall?.<ViewportRpcResponse>({
@@ -273,7 +271,7 @@ export const useBasketTrading = ({
             params: [ric],
           })
           .then((response) => {
-            if (response?.action.type === "VP_RPC_SUCCESS") {
+            if (response?.action.type === "VP_CREATE_SUCCESS") {
               notify?.({
                 type: NotificationLevel.Success,
                 header: "Add Constituent to Basket",
@@ -292,13 +290,6 @@ export const useBasketTrading = ({
     [basketConstituentMap.ric, dataSourceBasketTradingConstituentJoin, notify]
   );
 
-  // const handleTableConfigChange = useCallback<TableConfigChangeHandler>(
-  //   (config) => {
-  //     save?.(config, "table-config");
-  //   },
-  //   [save]
-  // );
-
   const handleConfigChangeEdit = useCallback<TableConfigChangeHandler>(
     (config) => {
       save?.(config, "basket-edit-table-config");

diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/useBasketTradingDatasources.ts b/vuu-ui/sample-apps/feature-basket-trading/src/useBasketTradingDatasources.ts
@@ -45,6 +45,10 @@ export const useBasketTradingDataSources = ({
         }
       : NO_CONFIG;
 
+    const constituentSort: DataSourceConfig = {
+      sort: { sortDefs: [{ column: "description", sortType: "D" }] },
+    };
+
     const dataSourceConfig: [
       basketDataSourceKey,
       TableSchema,
@@ -65,7 +69,12 @@ export const useBasketTradingDataSources = ({
         100,
         basketFilter,
       ],
-      ["data-source-basket-constituent", basketConstituentSchema, 100],
+      [
+        "data-source-basket-constituent",
+        basketConstituentSchema,
+        100,
+        constituentSort,
+      ],
     ];
 
     const dataSources: DataSource[] = [];

diff --git a/vuu-ui/showcase/src/examples/VuuFeatures/NewBasketPanel.examples.tsx b/vuu-ui/showcase/src/examples/VuuFeatures/NewBasketPanel.examples.tsx
@@ -1,6 +1,7 @@
 import { BasketsTableName, getSchema, vuuModule } from "@finos/vuu-data-test";
 import { NewBasketPanel } from "feature-basket-trading";
 import { useCallback, useMemo } from "react";
+import { BasketCreatedHandler } from "sample-apps/feature-basket-trading/src/new-basket-panel";
 
 let displaySequence = 1;
 
@@ -12,16 +13,19 @@ export const DefaultNewBasketPanel = () => {
     []
   );
 
-  const saveBasket = useCallback((basketName: string, basketId: string) => {
-    console.log(`save basket #${basketId} as ${basketName}`);
-  }, []);
+  const handleBasketCreated = useCallback<BasketCreatedHandler>(
+    (basketName, basketId, instanceId) => {
+      console.log(`save basket #${basketId} as ${basketName} ${instanceId}`);
+    },
+    []
+  );
 
   return (
     <NewBasketPanel
       basketDataSource={dataSource}
       basketSchema={schema}
       onClose={() => console.log("close")}
-      onSaveBasket={saveBasket}
+      onBasketCreated={handleBasketCreated}
     />
   );
 };