fix issues affecting demo (#1615)

Author: heswell

vuu-ui/package-lock.json

@@ -199,8 +199,8 @@ export class ViewportCache {
   }
 
   // TODO do we really need it
-  setRowCount(rowCount: number) {
-    console.log(`[ViewportCache] setRowCount ${rowCount}`);
+  setRowCount(_: number) {
+    // console.log(`[ViewportCache] setRowCount ${rowCount}`);
   }
 
   private buildKeyMap() {
@@ -213,12 +213,12 @@ export class ViewportCache {
   private identifyNewRows(keySetPreviousRows: Record<string, number>) {
     // we should avaoid the copy that happens here, just iterate the (client) rows directly
     const clientRows = this.getRows(this.#clientRange);
-    for (const { rowIndex, rowKey, ts } of clientRows) {
+    for (const { rowIndex, rowKey } of clientRows) {
       const prevIndex = keySetPreviousRows[rowKey];
       if (prevIndex === undefined) {
-        console.log(`${rowKey} at [${rowIndex}] created at ${ts} is new`);
+        // console.log(`${rowKey} at [${rowIndex}] created at ${ts} is new`);
       } else if (prevIndex !== rowIndex) {
-        console.log(`${rowKey} at [${rowIndex}] has moved from [${prevIndex}]`);
+        // console.log(`${rowKey} at [${rowIndex}] has moved from [${prevIndex}]`);
       }
     }
   }

vuu-ui/packages/vuu-data-remote/next/ViewportCache.ts

@@ -950,8 +950,10 @@ export class Viewport {
   }
 }
 
+const isNew = false;
+
 const toClientRow = (
-  { rowIndex, rowKey, sel: isSelected, data }: VuuRow,
+  { rowIndex, rowKey, sel: isSelected, data, ts }: VuuRow,
   keys: KeySet,
   selectedRows: Selection,
 ) => {
@@ -964,11 +966,13 @@ const toClientRow = (
     0,
     rowKey,
     isSelected ? getSelectionStatus(selectedRows, rowIndex) : 0,
+    ts,
+    isNew,
   ].concat(data) as DataSourceRow;
 };
 
 const toClientRowTree = (
-  { rowIndex, rowKey, sel: isSelected, data }: VuuRow,
+  { rowIndex, rowKey, sel: isSelected, data, ts }: VuuRow,
   keys: KeySet,
   selectedRows: Selection,
 ) => {
@@ -984,5 +988,7 @@ const toClientRowTree = (
     count,
     rowKey,
     isSelected ? getSelectionStatus(selectedRows, rowIndex) : 0,
+    ts,
+    isNew,
   ].concat(rest) as DataSourceRow;
 };

vuu-ui/packages/vuu-data-remote/src/server-proxy/viewport.ts

@@ -244,14 +244,28 @@ export function buildGroupMenu(
 
     switch (columnGroupStatus) {
       case "no-groupby":
-      case "single-groupby-other-column":
         return (
           <MenuItem
             data-menu-action-id="group-column"
             key="group-column"
             onClick={menuActionClickHandler}
           >{`Group by ${label}`}</MenuItem>
         );
+
+      case "single-groupby-other-column":
+        menuItems.push(
+          <MenuItem
+            data-menu-action-id="group-column"
+            key="group-column"
+            onClick={menuActionClickHandler}
+          >{`Group by ${label}`}</MenuItem>,
+          <MenuItem
+            data-menu-action-id="add-to-group"
+            key="add-to-group"
+            onClick={menuActionClickHandler}
+          >{`Add ${label} to groupby`}</MenuItem>,
+        );
+        break;
       case "single-groupby":
         menuItems.push(
           <MenuItem

vuu-ui/packages/vuu-data-remote/test/server-proxy.test.ts

@@ -69,8 +69,6 @@ export const DataSourceStats = ({
   const to = numberFormatter.format(range.lastRowInViewport);
   const value = numberFormatter.format(size);
 
-  console.log(`range = ${JSON.stringify(range)}`);
-
   if (size === 0) {
     return (
       <div className={className}>

vuu-ui/packages/vuu-table-extras/src/column-menu/column-menu-utils.tsx

@@ -72,7 +72,7 @@ export const TableSettingsPanel = ({
     allowColumnLabelCase = true,
     allowColumnDefaultWidth = true,
     allowGridSeparators = true,
-    allowCalculatedColumns,
+    allowCalculatedColumns = true,
     ...columnListPermissions
   } = permissions;
 

vuu-ui/packages/vuu-table-extras/src/datasource-stats/DatasourceStats.tsx

@@ -59,8 +59,9 @@ export const useEditableText = <T extends string | number | boolean = string>({
           }));
         } else {
           setEditState((state) => ({ ...state, message: undefined }));
+          const typedValue = getTypedValue(value, type, true);
           const response = await onEdit?.(
-            { editType: "commit", value, isValid: true },
+            { editType: "commit", value: typedValue, isValid: true },
             "commit",
           );
           if (response === true) {
@@ -76,7 +77,7 @@ export const useEditableText = <T extends string | number | boolean = string>({
         dispatchCustomEvent(target, "vuu-commit");
       }
     },
-    [clientSideEditValidationCheck, editState, onEdit],
+    [clientSideEditValidationCheck, editState, onEdit, type],
   );
 
   const handleKeyDown = useCallback(
@@ -123,7 +124,7 @@ export const useEditableText = <T extends string | number | boolean = string>({
   const handleChange = useCallback<FormEventHandler>(
     (evt) => {
       const { value } = evt.target as HTMLInputElement;
-      const typedValue = getTypedValue(value, type);
+      const typedValue = getTypedValue(value, type, true);
       console.log(
         `[useEditableText] handleChange '${value}' typedValue ${typedValue}
           initial value ${initialValueRef.current}
@@ -134,7 +135,11 @@ export const useEditableText = <T extends string | number | boolean = string>({
       setEditState({ value });
 
       onEdit?.(
-        { editType: "change", isValid: result?.ok !== false, value },
+        {
+          editType: "change",
+          isValid: result?.ok !== false,
+          value: typedValue,
+        },
         "change",
       );
       if (result?.ok === false) {

vuu-ui/packages/vuu-table-extras/src/table-column-settings/TableSettingsPanel.tsx

@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+import { getGroupStatus } from "../src/group-utils";
+
+describe("group-utils", () => {
+  describe("getGroupStatus", () => {
+    it("when no groupby, it correctly identifies no-groupby", () => {
+      expect(getGroupStatus("ccy", [])).toEqual("no-groupby");
+    });
+    it("it correctly identifies 'single-groupby-other-column'", () => {
+      expect(getGroupStatus("ccy", ["exchange"])).toEqual(
+        "single-groupby-other-column",
+      );
+    });
+    it("it correctly identifies 'multi-groupby-other-columns'", () => {
+      expect(getGroupStatus("ccy", ["exchange", "created"])).toEqual(
+        "multi-groupby-other-columns",
+      );
+    });
+    it("it correctly identifies 'single-groupby'", () => {
+      expect(getGroupStatus("ccy", ["ccy"])).toEqual("single-groupby");
+    });
+  });
+});