Manage layout persistence via interface

vuu-ui/packages/vuu-layout/src/index.ts

@@ -6,6 +6,7 @@ export * from "./DraggableLayout";
 export * from "./flexbox";
 export { Action } from "./layout-action";
 export * from "./layout-header";
+export * from "./layout-persistence";
 export * from "./layout-provider";
 export * from "./layout-reducer";
 export * from "./layout-view";

vuu-ui/packages/vuu-layout/src/layout-persistence/LayoutPersistenceManager.ts

@@ -0,0 +1,58 @@
+import { LayoutJSON } from "@finos/vuu-layout";
+import { Layout, LayoutMetadata } from "@finos/vuu-shell";
+
+export interface LayoutPersistenceManager {
+  /**
+   * Saves a new layout
+   *
+   * @param metadata - Metadata about the layout to be saved (excluding ID)
+   * @param layout   - Full JSON representation of the layout to be saved
+   *
+   * @returns ID assigned to the saved layout
+   */
+  saveLayout: (layouts: Layout[]) => string;
+
+  /**
+   * Overwrites an existing layout with a new one
+   *
+   * @param id       - Unique identifier of the existing layout to be updated
+   * @param metadata - Metadata describing the new layout to overwrite with (excluding ID)
+   * @param layout   - Full JSON representation of the new layout to overwrite with
+   */
+  updateLayout: (id: string, metadata: Omit<LayoutMetadata, "id">, layout: LayoutJSON) => void;
+
+  /**
+   * Deletes an existing layout
+   *
+   * @param id - Unique identifier of the existing layout to be deleted
+   */
+  deleteLayout: (id: string) => void;
+
+  /**
+   * Retrieves an existing layout
+   *
+   * @param id - Unique identifier of the existing layout to be deleted
+   *
+   * @returns the layout corresponding to provided metadata
+   */
+  loadLayout: (id: string) => LayoutJSON;
+
+  /**
+   * Retrieves metadata for all existing layouts
+   *
+   * @returns an array of all persisted layout metadata
+   */
+  loadMetadata: () => LayoutMetadata[];
+
+  /**
+   * Retrieves metadata for all existing layouts created by a given user
+   *
+   * @param user - Name of user
+   *
+   * @returns an array of metadata describing all persisted layouts created by {@link user}
+   */
+  loadMetadataByUser: (user: string) => LayoutMetadata[];
+
+  // TODO: should be switched over to load metadata only; remove this
+  loadLayouts: () => Layout[];
+}

vuu-ui/packages/vuu-layout/src/layout-persistence/LocalLayoutPersistenceManager.ts

@@ -0,0 +1,82 @@
+import { Layout, LayoutMetadata } from "@finos/vuu-shell";
+import { LayoutJSON, LayoutPersistenceManager } from "@finos/vuu-layout";
+
+import { getLocalEntity, saveLocalEntity } from "@finos/vuu-filters";
+import { getUniqueId } from "@finos/vuu-utils";
+
+export class LocalLayoutPersistenceManager implements LayoutPersistenceManager {
+  saveLayout(inputLayouts: Layout[]): string {
+    const layouts = Array.from(inputLayouts);
+
+    if (layouts.length === 0) {
+      return "";
+    }
+
+    const layout = this.deepCopy(layouts[layouts.length - 1]);
+    console.log(`Saving layout as ${layout.metadata.name} to group ${layout.metadata.group}...`);
+    const id = getUniqueId();
+    layout.metadata.id = id;
+    layouts[layouts.length - 1] = layout;
+    saveLocalEntity<Layout[]>("layouts", layouts);
+    return id;
+  }
+
+  private deepCopy<T>(object: T): T {
+    return JSON.parse(JSON.stringify(object));
+  };
+
+  updateLayout(id: string, newMetadata: Omit<LayoutMetadata, "id">, newLayoutJson: LayoutJSON): void {
+    const layouts = this.getExistingLayouts();
+    const layoutJson = getLocalEntity<LayoutJSON>("api/vui");
+
+    if (layoutJson) {
+      layouts.filter(layout => layout.metadata.id !== id)
+      const newLayout = {json: newLayoutJson, metadata: newMetadata} as Layout;
+      layouts.push(newLayout);
+    }
+
+    saveLocalEntity<Layout[]>("layouts", layouts);
+  };
+
+  deleteLayout(id: string): void {
+    const layouts = this.getExistingLayouts().filter(layout => layout.metadata.id !== id);
+    saveLocalEntity<Layout[]>("layouts", layouts);
+  };
+
+  loadLayout(id: string): LayoutJSON {
+    const layout = this.getExistingLayouts().filter(layout => layout.metadata.id === id);
+
+    switch (layout.length) {
+      case 1: {
+        return layout[0].json;
+      }
+      case 0: {
+        console.log(`WARNING: no layout exists for ID "${id}"; returning empty layout`);
+        return {} as LayoutJSON;
+      }
+      default: {
+        console.log(`WARNING: multiple layouts exist for ID "${id}"; returning first instance`)
+        return layout[0].json;
+      }
+    }
+  };
+
+  loadMetadata(): LayoutMetadata[] {
+    return this.getExistingLayouts().map(layout => layout.metadata);
+  };
+
+  loadMetadataByUser(user: string): LayoutMetadata[] {
+    return this.getExistingLayouts()
+      .filter(layout => layout.metadata.user === user)
+      .map(layout => layout.metadata);
+  };
+
+  private getExistingLayouts() {
+    return getLocalEntity<Layout[]>("layouts") || [];
+  }
+
+  // TODO: remove
+  loadLayouts(): Layout[] {
+    return this.getExistingLayouts();
+  }
+}

vuu-ui/packages/vuu-layout/src/layout-persistence/index.ts

@@ -0,0 +1,2 @@
+export * from './LayoutPersistenceManager';
+export * from './LocalLayoutPersistenceManager';

vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx

@@ -1,42 +1,41 @@
 import React, { useState, useCallback, useContext, useEffect } from "react";
-import { getLocalEntity, saveLocalEntity } from "@finos/vuu-filters";
-import { LayoutJSON } from "@finos/vuu-layout";
-import { getUniqueId } from "@finos/vuu-utils";
+import { getLocalEntity } from "@finos/vuu-filters";
+import { LayoutJSON, LayoutPersistenceManager } from "@finos/vuu-layout";
 import { LayoutMetadata, Layout } from "./layoutTypes";
 
 export const LayoutManagementContext = React.createContext<{
   layouts: Layout[],
   saveLayout: (n: Omit<LayoutMetadata, "id">) => void
 }>({ layouts: [], saveLayout: () => { } })
 
-export const LayoutManagementProvider = (props: { children: JSX.Element | JSX.Element[] }) => {
-
-  const [layouts, setLayouts] = useState<Layout[]>([])
+export const LayoutManagementProvider = (props: {
+    persistenceManager: LayoutPersistenceManager,
+    children: JSX.Element | JSX.Element[]
+  }) => {
+  const [layouts, setLayouts] = useState<Layout[]>([]);
+  const [tempLayouts, setTempLayouts] = useState<Layout[]>([]);
 
   useEffect(() => {
-    const layouts = getLocalEntity<Layout[]>("layouts")
-    setLayouts(layouts || [])
+    const loadedLayouts = props.persistenceManager.loadLayouts();
+    setLayouts(loadedLayouts || [])
   }, [])
 
   useEffect(() => {
-    saveLocalEntity<Layout[]>("layouts", layouts)
-  }, [layouts])
+    if (tempLayouts.length !== 0) {
+      // Persist layouts
+      const generatedId = props.persistenceManager.saveLayout([...layouts, ...tempLayouts]);
+
+      // Update state
+      const newLayout = tempLayouts[0];
+      newLayout.metadata.id = generatedId;
+      setLayouts(prev => [...prev, newLayout]);
+    }
+  }, [tempLayouts])
 
   const saveLayout = useCallback((metadata: Omit<LayoutMetadata, "id">) => {
-    const json = getLocalEntity<LayoutJSON>("api/vui")
+    const json = getLocalEntity<LayoutJSON>("api/vui");
     if (json) {
-      setLayouts(prev =>
-        [
-          ...prev,
-          {
-            metadata: {
-              ...metadata,
-              id: getUniqueId()
-            },
-            json
-          }
-        ]
-      )
+      setTempLayouts([...layouts, { metadata: { ...metadata, id: "" }, json }])
     }
   }, [])
 

vuu-ui/packages/vuu-shell/src/left-nav/LeftNav.tsx

@@ -146,7 +146,7 @@ export const LeftNav = ({
           Layout Templates
         </div>
         <div className="vuuLeftNav-drawer">
-          <LayoutsList layouts={[]} />
+          <LayoutsList/>
         </div>
       </Stack>
     </div>

vuu-ui/showcase/src/examples/Apps/NewTheme.examples.tsx

@@ -13,7 +13,10 @@ import {
   LayoutManagementProvider,
   useLayoutManager
 } from "@finos/vuu-shell";
-import { registerComponent } from "@finos/vuu-layout";
+import {
+  LocalLayoutPersistenceManager,
+  registerComponent
+} from "@finos/vuu-layout";
 import { TableSettingsPanel } from "@finos/vuu-table-extras";
 import {
   ContextMenuProvider,
@@ -46,7 +49,6 @@ const ShellWithNewTheme = () => {
   const { saveLayout } = useLayoutManager();
 
   const handleSave = useCallback((layoutMetadata: Omit<LayoutMetadata, "id">) => {
-    console.log(`Save layout as ${layoutMetadata.name} to group ${layoutMetadata.group}`);
     saveLayout(layoutMetadata)
     setDialogContent(undefined)
   }, []);
@@ -176,7 +178,6 @@ const ShellWithNewTheme = () => {
           style={{ maxHeight: 500, borderColor: "#6d188b" }}
           title={"Save Layout"}
           hideCloseButton
-          headerProps={{ className: "dialogHeader" }}
         >
           {dialogContent}
         </Dialog>
@@ -186,8 +187,9 @@ const ShellWithNewTheme = () => {
 };
 
 export const ShellWithNewThemeAndLayoutManagement = () => {
+  const pm = new LocalLayoutPersistenceManager();
   return (
-    <LayoutManagementProvider>
+    <LayoutManagementProvider persistenceManager={pm}>
       <ShellWithNewTheme />
     </LayoutManagementProvider>
   )