Session editing improvements (#1330)

* LayoutProvider example * session editing improvements
finos · May 11, 2024 · a28f605 · a28f605
1 parent 129f3cf
commit a28f605
Show file tree

Hide file tree

Showing 13 changed files with 440 additions and 171 deletions.
diff --git a/vuu-ui/.eslintrc.json b/vuu-ui/.eslintrc.json
@@ -33,8 +33,7 @@
         "additionalHooks": "(useLayoutEffectSkipFirst)"
       }
     ],
-
-    "no-unused-vars": 0,
+    "no-prototype-builtins": 0,
     "prefer-const": ["error", { "destructuring": "all" }],
     "@typescript-eslint/no-unused-vars": [
       "error",

diff --git a/vuu-ui/packages/vuu-data-local/src/array-data-source/array-data-source.ts b/vuu-ui/packages/vuu-data-local/src/array-data-source/array-data-source.ts
@@ -74,6 +74,9 @@ const toDataSourceRow =
     return [index, index, true, false, 1, 0, String(data[key]), 0, ...data];
   };
 
+// const isError = (err: unknown): err is { message: string } =>
+//   typeof err === "object" && err !== null && err.hasOwnProperty("message");
+
 const buildTableSchema = (
   columns: ColumnDescriptor[],
   keyColumn?: string
@@ -476,15 +479,47 @@ export class ArrayDataSource
     }
   };
 
-  protected update = (row: VuuRowDataItemType[], columnName: string) => {
+  private validateDataValue(columnName: string, value: VuuRowDataItemType) {
+    console.log(`validate data value ${columnName} ${value}`);
+    const columnDescriptor = this.columnDescriptors.find(
+      (col) => col.name === columnName
+    );
+    if (columnDescriptor) {
+      switch (columnDescriptor.serverDataType) {
+        case "int":
+          {
+            if (typeof value === "number") {
+              if (Math.floor(value) !== value) {
+                throw Error(`${columnName} is int but value = ${value}`);
+              }
+            } else if (typeof value === "string") {
+              const numericValue = parseFloat(value);
+              if (Math.floor(numericValue) !== numericValue) {
+                throw Error(`${columnName} is ${value} is not a valid integer`);
+              }
+            }
+          }
+          break;
+        default:
+      }
+    } else {
+      throw Error(`Unknown column ${columnName}`);
+    }
+  }
+
+  protected updateDataItem = (
+    keyValue: string,
+    columnName: string,
+    value: VuuRowDataItemType
+  ) => {
+    this.validateDataValue(columnName, value);
     // TODO take sorting, filtering. grouping into account
-    const keyValue = row[this.key];
     const colIndex = this.#columnMap[columnName];
     const dataColIndex = this.dataMap?.[columnName];
     const dataIndex = this.#data.findIndex((row) => row[KEY] === keyValue);
     if (dataIndex !== -1 && dataColIndex !== undefined) {
       const dataSourceRow = this.#data[dataIndex];
-      dataSourceRow[colIndex] = row[dataColIndex];
+      dataSourceRow[colIndex] = value;
       const { from, to } = this.#range;
       const [rowIdx] = dataSourceRow;
       if (rowIdx >= from && rowIdx < to) {
@@ -493,6 +528,13 @@ export class ArrayDataSource
     }
   };
 
+  protected update = (row: VuuRowDataItemType[], columnName: string) => {
+    // TODO take sorting, filtering. grouping into account
+    const keyValue = row[this.key] as string;
+    const dataColIndex = this.dataMap?.[columnName] as number;
+    return this.updateDataItem(keyValue, columnName, row[dataColIndex]);
+  };
+
   protected updateRow = (row: VuuRowDataItemType[]) => {
     // TODO take sorting, filtering. grouping into account
     const keyValue = row[this.key];
@@ -704,13 +746,13 @@ export class ArrayDataSource
         case "VP_EDIT_CELL_RPC":
           {
             // TODO
-            // const { rowKey, field, value } = rpcRequest;
-            // try {
-            //   this.update(rowKey, field, value);
-            //   resolve(undefined);
-            // } catch (error) {
-            //   resolve({ error: String(error), type: "VP_EDIT_RPC_REJECT" });
-            // }
+            const { rowKey, field, value } = rpcRequest;
+            try {
+              this.updateDataItem(rowKey, field, value);
+              resolve(undefined);
+            } catch (error) {
+              resolve({ error: String(error), type: "VP_EDIT_RPC_REJECT" });
+            }
           }
 
           break;

diff --git a/vuu-ui/packages/vuu-data-remote/src/message-utils.ts b/vuu-ui/packages/vuu-data-remote/src/message-utils.ts
@@ -12,23 +12,6 @@ import {
   VuuTableMeta,
 } from "@finos/vuu-protocol-types";
 
-const MENU_RPC_TYPES = [
-  "VIEW_PORT_MENUS_SELECT_RPC",
-  "VIEW_PORT_MENU_TABLE_RPC",
-  "VIEW_PORT_MENU_ROW_RPC",
-  "VIEW_PORT_MENU_CELL_RPC",
-  "VP_EDIT_CELL_RPC",
-  "VP_EDIT_ROW_RPC",
-  "VP_EDIT_ADD_ROW_RPC",
-  "VP_EDIT_DELETE_CELL_RPC",
-  "VP_EDIT_DELETE_ROW_RPC",
-  "VP_EDIT_SUBMIT_FORM_RPC",
-];
-
-export const isVuuMenuRpcRequest = (
-  message: VuuUIMessageOut | VuuRpcRequest | ClientToServerMenuRPC
-): message is ClientToServerMenuRPC => MENU_RPC_TYPES.includes(message["type"]);
-
 export const isVuuRpcRequest = (
   message:
     | VuuUIMessageOut

diff --git a/vuu-ui/packages/vuu-data-remote/src/server-proxy/server-proxy.ts b/vuu-ui/packages/vuu-data-remote/src/server-proxy/server-proxy.ts
@@ -37,13 +37,17 @@ import {
   VuuRpcRequest,
   VuuTable,
 } from "@finos/vuu-protocol-types";
-import { isViewporttMessage, logger, partition } from "@finos/vuu-utils";
+import {
+  isVuuMenuRpcRequest,
+  isViewportMessage,
+  logger,
+  partition,
+} from "@finos/vuu-utils";
 import { Connection } from "../connectionTypes";
 import { isSessionTable, isSessionTableActionMessage } from "../data-source";
 import {
   createSchemaFromTableMetadata,
   groupRowsByViewport,
-  isVuuMenuRpcRequest,
   isVuuRpcRequest,
   stripRequestId,
 } from "../message-utils";
@@ -603,7 +607,7 @@ export class ServerProxy {
       | WithRequestId<VuuRpcRequest>
       | WithRequestId<ClientToServerMenuRPC>
   ) {
-    if (isViewporttMessage(message)) {
+    if (isViewportMessage(message)) {
       if (message.type === "disable") {
         // Viewport may already have been unsubscribed
         const viewport = this.getViewportForClient(message.viewport, false);

diff --git a/vuu-ui/packages/vuu-data-types/index.d.ts b/vuu-ui/packages/vuu-data-types/index.d.ts
@@ -485,8 +485,10 @@ export interface DataSource
   visualLink?: LinkDescriptorWithLabel;
 }
 
-export interface MenuRpcResponse {
-  action: MenuRpcAction;
+export interface MenuRpcResponse<
+  TAction extends MenuRpcAction = MenuRpcAction
+> {
+  action: TAction;
   error?: string;
   requestId: string;
   rpcName?: string;

diff --git a/vuu-ui/packages/vuu-shell/src/session-editing-form/SessionEditingForm.css b/vuu-ui/packages/vuu-shell/src/session-editing-form/SessionEditingForm.css
@@ -3,7 +3,6 @@
     flex-direction: column;
     gap: 3px;
     min-width: 400px;
-    padding: 6px;
 }
 
 .vuuSessionEditingForm-content {
@@ -12,21 +11,9 @@
     flex: 1 1 auto;
     gap: 3px;
     overflow: auto;
+    padding: var(--salt-spacing-200);
 }
 
-.vuuSessionEditingForm-field {
-    align-items: center;
-    display: flex;
-    height: 32px;
-}
-
-.vuuSessionEditingForm-fieldLabel {
-    flex: 0 0 50%;
-}
-
-.vuuSessionEditingForm-fieldValue {
-    max-width: 50%;
-}
 
 .vuuSessionEditingForm-fieldValue.vuuReadOnly {
     font-weight: var(--salt-text-label-fontWeight-strong);
@@ -35,11 +22,15 @@
 .vuuSessionEditingForm-buttonbar {
     align-items: center;
     border-top: solid 1px var(--salt-container-primary-borderColor);
+    box-sizing: content-box;
     display: flex;
     justify-content: flex-end;
     flex: 0 0 autox;
     gap: 6px;
-    padding-top: 6px;
+    height: var(--salt-size-base);
+    margin: var(--salt-spacing-200);
+    padding-top: var(--salt-spacing-200);
+
 }
 
 .vuuSessionEditingForm-errorBanner {