fix bugs persistning table settings

finos · Nov 4, 2023 · 8bab283 · 8bab283
1 parent 3ba64ad
commit 8bab283
Show file tree

Hide file tree

Showing 20 changed files with 260 additions and 128 deletions.
diff --git a/vuu-ui/package-lock.json b/vuu-ui/package-lock.json
diff --git a/vuu-ui/packages/vuu-data/src/json-data-source.ts b/vuu-ui/packages/vuu-data/src/json-data-source.ts
@@ -209,6 +209,19 @@ export class JsonDataSource
     console.log("noop");
     return this;
   }
+  set data(data: JsonData) {
+    console.log(`set JsonDataSource data`);
+    [this.columnDescriptors, this.#data] = jsonToDataSourceRows(data);
+    this.visibleRows = this.#data
+      .filter((row) => row[DEPTH] === 0)
+      .map((row, index) =>
+        ([index, index] as Partial<DataSourceRow>).concat(row.slice(2))
+      ) as DataSourceRow[];
+
+    requestAnimationFrame(() => {
+      this.sendRowsToClient();
+    });
+  }
 
   select(selected: Selection) {
     const updatedRows: DataSourceRow[] = [];
@@ -324,10 +337,6 @@ export class JsonDataSource
     this.#aggregations = aggregations;
   }
 
-  set data(data: JsonData) {
-    console.log(`set JsonDataSource data`);
-  }
-
   get sort() {
     return this.#sort;
   }

diff --git a/vuu-ui/packages/vuu-filters/src/filter-clause/ExpandoCombobox.tsx b/vuu-ui/packages/vuu-filters/src/filter-clause/ExpandoCombobox.tsx
@@ -103,8 +103,8 @@ export const ExpandoCombobox = forwardRef(function ExpandoCombobox<
         displayedItemCount: 10,
         itemHeight: 22,
         maxWidth: 300,
-        minWidth: 100,
-        width: "auto",
+        minWidth: 80,
+        width: "content-width",
       },
     ];
   }, [InputPropsProp, handleInputChange, ListPropsProp]);
@@ -128,7 +128,7 @@ export const ExpandoCombobox = forwardRef(function ExpandoCombobox<
   );
 
   const popupProps = {
-    minWidth: 102,
+    minWidth: "fit-content",
   };
 
   return props.source?.length === 0 ? null : (

diff --git a/vuu-ui/packages/vuu-popups/src/popup/Popup.tsx b/vuu-ui/packages/vuu-popups/src/popup/Popup.tsx
@@ -14,7 +14,7 @@ export type PopupPlacement =
 
 export interface PopupComponentProps extends HTMLAttributes<HTMLDivElement> {
   anchorElement: RefObject<HTMLElement>;
-  minWidth?: number;
+  minWidth?: number | string;
   offsetLeft?: number;
   offsetTop?: number;
   placement: PopupPlacement;

diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx
@@ -72,6 +72,7 @@ export const LayoutManagementProvider = (
 
   const saveApplicationLayout = useCallback(
     (layout: LayoutJSON) => {
+      console.log(`save application layout ${JSON.stringify(layout, null, 2)}`);
       const persistenceManager = getPersistenceManager();
       setApplicationLayout(layout, false);
       persistenceManager.saveApplicationLayout(layout);

diff --git a/vuu-ui/packages/vuu-shell/src/left-nav/LeftNav.css b/vuu-ui/packages/vuu-shell/src/left-nav/LeftNav.css
@@ -14,11 +14,16 @@
     --svg-layouts: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15.3333 10H14V11.3333H15.3333V10ZM15.3333 12.6667H14V14H15.3333V12.6667ZM15.3333 7.33333H14V8.66667H15.3333V7.33333ZM10 2H8.66667V3.33333H10V2ZM15.3333 4.66667H14V6H15.3333V4.66667ZM0.666672 14H7.33334V10H0.666672V14ZM2.00001 4.66667H0.666672V6H2.00001V4.66667ZM10 12.6667H8.66667V14H10V12.6667ZM12.6667 2H11.3333V3.33333H12.6667V2ZM15.3333 2H14V3.33333H15.3333V2ZM12.6667 12.6667H11.3333V14H12.6667V12.6667ZM2.00001 7.33333H0.666672V8.66667H2.00001V7.33333ZM7.33334 2H6.00001V3.33333H7.33334V2ZM4.66667 2H3.33334V3.33333H4.66667V2ZM2.00001 2H0.666672V3.33333H2.00001V2Z"/></svg>');
     --vuu-light-text-primary: #15171b;
 
+    --menu-level-2-width: 0px;
+
     box-shadow: 3px 4px 4px 0px rgba(0, 0, 0, 0.15);
+    display: flex;
     margin-bottom: 4px;
+    overflow: hidden;
     position: relative;
-    transition: width .3s ease-in-out;
+    transition: width .2s ease-out;
     z-index: 0;
+    width: calc(var(--menu-width) + var(--menu-level-2-width));
 
 }
 
@@ -32,10 +37,12 @@
 
 .vuuLeftNav-menu-icons-content {
     --menu-width: var(--nav-menu-collapsed-width);
+    --menu-level-2-width: var(--nav-menu-content-width);
 }
 
 .vuuLeftNav-menu-full-content {
     --menu-width: var(--nav-menu-expanded-width);
+    --menu-level-2-width: var(--nav-menu-content-width);
 }
 
 .vuuLeftNav-menu-icons-content .vuuLeftNav-menu-secondary,
@@ -50,18 +57,22 @@
     flex-direction: column;
     height: 100%;
     padding: 32px 16px;
-    transition: width ease .3s;
-    width: var(--menu-width, 100%);
+    transition: flex-basis ease-out .2s;
+    flex-grow:0;
+    flex-shrink:0;
+    flex-basis: var(--menu-width);
 }
 
 .vuuLeftNav-menu-secondary {
     flex: 1 1 auto;
     height: 100%;
     display: none;
-    position: absolute;
+    /* position: absolute; */
     top:0;
     right: 0;
-    width: var(--nav-menu-content-width, 240px);
+    flex-grow:0;
+    flex-shrink:0;
+    flex-basis: var(--nav-menu-content-width, 240px);
     z-index: -1;
 }
 
@@ -98,9 +109,6 @@
     padding: 0;
 }
 
-/* .vuuLeftNav [data-icon]:after {
-    transition: left ease .3s;
-} */
 
 .vuuLeftNav [data-icon='demo'] {
     --vuu-icon-svg: var(--svg-demo);

diff --git a/vuu-ui/packages/vuu-shell/src/left-nav/LeftNav.tsx b/vuu-ui/packages/vuu-shell/src/left-nav/LeftNav.tsx
@@ -13,30 +13,39 @@ import "./LeftNav.css";
 
 const classBase = "vuuLeftNav";
 
+export type NavDisplayStatus =
+  | "menu-full"
+  | "menu-icons"
+  | "menu-full-content"
+  | "menu-icons-content";
+
+export type NavDisplayStatusHandler = (
+  navDisplayStatus: NavDisplayStatus
+) => void;
 interface LeftNavProps extends HTMLAttributes<HTMLDivElement> {
   "data-path"?: string;
+  defaultActiveTabIndex?: number;
+  defaultDisplayStatus?: NavDisplayStatus;
   features: FeatureProps[];
   tableFeatures: FeatureProps[];
+  onChangeDisplayStatus?: NavDisplayStatusHandler;
   onResize?: (size: number) => void;
   sizeCollapsed?: number;
   sizeContent?: number;
   sizeExpanded?: number;
 }
 
-type NavStatus =
-  | "menu-full"
-  | "menu-icons"
-  | "menu-full-content"
-  | "menu-icons-content";
-
 type NavState = {
   activeTabIndex: number;
-  navStatus: NavStatus;
+  navStatus: NavDisplayStatus;
 };
 
 export const LeftNav = ({
   "data-path": path,
+  defaultDisplayStatus = "menu-full",
+  defaultActiveTabIndex = 0,
   features,
+  onChangeDisplayStatus,
   onResize,
   sizeCollapsed = 80,
   sizeContent = 300,
@@ -47,13 +56,14 @@ export const LeftNav = ({
 }: LeftNavProps) => {
   const dispatch = useLayoutProviderDispatch();
   const [navState, setNavState] = useState<NavState>({
-    activeTabIndex: 0,
-    navStatus: "menu-full",
+    activeTabIndex: defaultActiveTabIndex,
+    navStatus: defaultDisplayStatus,
   });
   const [themeClass] = useThemeAttributes();
+  console.log(`navState ${navState}`);
 
   const toggleNavWidth = useCallback(
-    (navStatus: NavStatus) => {
+    (navStatus: NavDisplayStatus) => {
       switch (navStatus) {
         case "menu-icons":
           return sizeExpanded;
@@ -68,7 +78,7 @@ export const LeftNav = ({
     [sizeCollapsed, sizeContent, sizeExpanded]
   );
 
-  const toggleNavStatus = (navStatus: NavStatus) => {
+  const toggleNavStatus = (navStatus: NavDisplayStatus) => {
     switch (navStatus) {
       case "menu-icons":
         return "menu-full";
@@ -82,7 +92,10 @@ export const LeftNav = ({
   };
 
   const getWidthAndStatus = useCallback(
-    (navState: NavStatus, tabIndex: number): [number, NavStatus] => {
+    (
+      navState: NavDisplayStatus,
+      tabIndex: number
+    ): [number, NavDisplayStatus] => {
       if (tabIndex === 0) {
         const newNavState =
           navState === "menu-full-content"
@@ -127,16 +140,18 @@ export const LeftNav = ({
 
   const toggleSize = useCallback(() => {
     const { activeTabIndex, navStatus: currentNavStatus } = navState;
+    const newNavStatus = toggleNavStatus(currentNavStatus);
     setNavState({
       activeTabIndex,
-      navStatus: toggleNavStatus(currentNavStatus),
+      navStatus: newNavStatus,
     });
     dispatch({
       type: Action.LAYOUT_RESIZE,
       path,
       size: toggleNavWidth(currentNavStatus),
     } as LayoutResizeAction);
-  }, [dispatch, navState, path, toggleNavWidth]);
+    onChangeDisplayStatus?.(newNavStatus);
+  }, [dispatch, navState, onChangeDisplayStatus, path, toggleNavWidth]);
 
   const style = {
     ...styleProp,

diff --git a/vuu-ui/packages/vuu-table/src/table-next/context-menu/index.ts b/vuu-ui/packages/vuu-table/src/table-next/context-menu/index.ts
@@ -1,2 +1,2 @@
 export * from "./buildContextMenuDescriptors";
-export * from "./useTableContextMenu";
+export * from "./useHandleTableContextMenu";
diff --git a/...-next/context-menu/useTableContextMenu.ts → ...context-menu/useHandleTableContextMenu.ts b/...-next/context-menu/useTableContextMenu.ts → ...context-menu/useHandleTableContextMenu.ts
@@ -49,7 +49,7 @@ const removeFilterColumn = (
 
 const { Average, Count, Distinct, High, Low, Sum } = AggregationType;
 
-export const useTableContextMenu = ({
+export const useHandleTableContextMenu = ({
   dataSource,
   onPersistentColumnOperation,
 }: ContextMenuHookProps) => {

diff --git a/vuu-ui/packages/vuu-table/src/table-next/header-cell/HeaderCell.css b/vuu-ui/packages/vuu-table/src/table-next/header-cell/HeaderCell.css
@@ -34,6 +34,7 @@
   line-height: calc(var(--header-height) - 1px);
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .vuuTableNextHeaderCell-right .vuuTableNextHeaderCell-label {

diff --git a/vuu-ui/packages/vuu-table/src/table-next/useTableContextMenu.ts b/vuu-ui/packages/vuu-table/src/table-next/useTableContextMenu.ts
@@ -45,7 +45,7 @@ export const useTableContextMenu = ({
         });
       }
     },
-    [columns, data, dataSource, showContextMenu]
+    [columns, data, dataSource, getSelectedRows, showContextMenu]
   );
 
   return onContextMenu;
-Original file line number
+Diff line change
@@ Expand Up / @@ -45,7 +45,7 @@ export const useTableContextMenu = ({ @@
             });
           }
         },
-        [columns, data, dataSource, showContextMenu]
+        [columns, data, dataSource, getSelectedRows, showContextMenu]
       );
       return onContextMenu;
@@ Expand Down @@