diff --git a/vuu-ui/packages/vuu-layout/src/layout-persistence/LayoutPersistenceManager.ts b/vuu-ui/packages/vuu-layout/src/layout-persistence/LayoutPersistenceManager.ts index 7cf49e609..7eef19ad2 100644 --- a/vuu-ui/packages/vuu-layout/src/layout-persistence/LayoutPersistenceManager.ts +++ b/vuu-ui/packages/vuu-layout/src/layout-persistence/LayoutPersistenceManager.ts @@ -43,4 +43,18 @@ export interface LayoutPersistenceManager { * @returns an array of all persisted layout metadata */ loadMetadata: () => LayoutMetadata[]; + + /** + * Retrieves temporary layout + * + * @returns a json representation of a layout + */ + loadTempLayout: () => LayoutJSON; + + /** + * Retrieves temporary layout + * + * @param layout - json representation of layout to be saved + */ + saveTempLayout: (layout: LayoutJSON) => void } diff --git a/vuu-ui/packages/vuu-layout/src/layout-persistence/LocalLayoutPersistenceManager.ts b/vuu-ui/packages/vuu-layout/src/layout-persistence/LocalLayoutPersistenceManager.ts index 430aa79f7..1d59dc6ba 100644 --- a/vuu-ui/packages/vuu-layout/src/layout-persistence/LocalLayoutPersistenceManager.ts +++ b/vuu-ui/packages/vuu-layout/src/layout-persistence/LocalLayoutPersistenceManager.ts @@ -3,6 +3,7 @@ import { LayoutJSON, LayoutPersistenceManager } from "@finos/vuu-layout"; import { getLocalEntity, saveLocalEntity } from "@finos/vuu-filters"; import { getUniqueId } from "@finos/vuu-utils"; +import { defaultLayout, warningLayout } from "./data"; const metadataSaveLocation = "layouts/metadata"; const layoutsSaveLocation = "layouts/layouts"; @@ -57,6 +58,15 @@ export class LocalLayoutPersistenceManager implements LayoutPersistenceManager { return getLocalEntity(metadataSaveLocation) || []; } + loadTempLayout(): LayoutJSON{ + + return getLocalEntity("api/vui") || defaultLayout + } + + saveTempLayout(layout: LayoutJSON): void{ + saveLocalEntity("api/vui", layout) + } + private loadLayouts(): Layout[] { return getLocalEntity(layoutsSaveLocation) || []; } diff --git a/vuu-ui/packages/vuu-layout/src/layout-persistence/data.ts b/vuu-ui/packages/vuu-layout/src/layout-persistence/data.ts new file mode 100644 index 000000000..200da3c81 --- /dev/null +++ b/vuu-ui/packages/vuu-layout/src/layout-persistence/data.ts @@ -0,0 +1,68 @@ +export const defaultLayout = { + type: "Stack", + props: { + className: "vuuShell-mainTabs", + TabstripProps: { + allowAddTab: true, + allowRenameTab: true, + animateSelectionThumb: false, + location: "main-tab", + }, + preserve: true, + active: 0, + }, + children: [ + { + type: "Stack", + props: { + active: 0, + title: "My Temp Layout", + TabstripProps: { + allowRenameTab: true, + allowCloseTab: true, + }, + }, + children: [ + { + type: "View", + props: { + title: "Temp European Stock", + }, + style: { height: "calc(100% - 6px)" }, + children: [ + { + type: "AutoTableNext", + }, + ], + }, + { + type: "View", + props: { + title: "Temp Other Stock", + }, + style: { height: "calc(100% - 6px)" }, + children: [ + { + type: "AutoTableNext", + }, + ], + }, + ], + }, + ], +}; + +export const warningLayout = { + type: "View", + props: { + style: { height: "calc(100% - 6px)" }, + }, + children: [ + { + props: { + className: "vuuShell-warningPlaceholder", + }, + type: "Placeholder", + }, + ], +}; diff --git a/vuu-ui/packages/vuu-layout/src/layout-persistence/index.ts b/vuu-ui/packages/vuu-layout/src/layout-persistence/index.ts index 602a44308..d471a4357 100644 --- a/vuu-ui/packages/vuu-layout/src/layout-persistence/index.ts +++ b/vuu-ui/packages/vuu-layout/src/layout-persistence/index.ts @@ -1,2 +1,3 @@ export * from './LayoutPersistenceManager'; export * from './LocalLayoutPersistenceManager'; +export * from './data'; diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx index 59bda95df..fa54a7dc3 100644 --- a/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx +++ b/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx @@ -1,25 +1,46 @@ import React, { useState, useCallback, useContext, useEffect } from "react"; import { getLocalEntity } from "@finos/vuu-filters"; -import { LayoutJSON, LocalLayoutPersistenceManager } from "@finos/vuu-layout"; +import { LayoutJSON, LocalLayoutPersistenceManager, defaultLayout } from "@finos/vuu-layout"; import { LayoutMetadata } from "./layoutTypes"; +const saveLocation = process.env.location || "local" +// TODO: pick remote based on save location + const persistenceManager = new LocalLayoutPersistenceManager(); export const LayoutManagementContext = React.createContext<{ layoutMetadata: LayoutMetadata[], - saveLayout: (n: Omit) => void -}>({ layoutMetadata: [], saveLayout: () => { } }) + saveLayout: (n: Omit) => void, + tempLayout: LayoutJSON, + saveTempLayout: (layout: LayoutJSON) => void, + loadLayoutById: (id: string) => LayoutJSON +}>({ + layoutMetadata: [], + saveLayout: () => { }, + tempLayout: defaultLayout, + saveTempLayout: () => { }, + loadLayoutById: () => defaultLayout + +}) export const LayoutManagementProvider = (props: { - children: JSX.Element | JSX.Element[] - }) => { + children: JSX.Element | JSX.Element[] +}) => { const [layoutMetadata, setLayoutMetadata] = useState([]); + const [tempLayout, setTempLayout] = useState(defaultLayout); useEffect(() => { const loadedMetadata = persistenceManager.loadMetadata(); + const temp = persistenceManager.loadTempLayout(); + setLayoutMetadata(loadedMetadata || []) + setTempLayout(temp); }, []) + const saveTempLayout = useCallback((layout: LayoutJSON) => { + persistenceManager.saveTempLayout(layout) + }, []); + const saveLayout = useCallback((metadata: Omit) => { const json = getLocalEntity("api/vui"); @@ -37,10 +58,10 @@ export const LayoutManagementProvider = (props: { } }, []) - // TODO: add loadLayout function + const loadLayoutById = useCallback((id) => persistenceManager.loadLayout(id), []); return ( - + {props.children} ) diff --git a/vuu-ui/packages/vuu-shell/src/shell.tsx b/vuu-ui/packages/vuu-shell/src/shell.tsx index c0875523a..33e94294c 100644 --- a/vuu-ui/packages/vuu-shell/src/shell.tsx +++ b/vuu-ui/packages/vuu-shell/src/shell.tsx @@ -8,7 +8,6 @@ import { useEffect, useRef, } from "react"; -import { useLayoutConfig } from "./layout-config"; import { DraggableLayout, LayoutProvider } from "@finos/vuu-layout"; import { LayoutJSON } from "@finos/vuu-layout/src/layout-reducer"; import { AppHeader } from "./app-header"; @@ -16,6 +15,7 @@ import { ThemeMode, ThemeProvider, useThemeAttributes } from "./theme-provider"; import { logger } from "@finos/vuu-utils"; import { useShellLayout } from "./shell-layouts"; import { SaveLocation } from "./shellTypes"; +import { useLayoutManager } from "./layout-management"; import "./shell.css"; @@ -26,21 +26,6 @@ export type VuuUser = { const { error } = logger("Shell"); -const warningLayout = { - type: "View", - props: { - style: { height: "calc(100% - 6px)" }, - }, - children: [ - { - props: { - className: "vuuShell-warningPlaceholder", - }, - type: "Placeholder", - }, - ], -}; - export interface ShellProps extends HTMLAttributes { children?: ReactNode; defaultLayout?: LayoutJSON; @@ -57,7 +42,6 @@ export interface ShellProps extends HTMLAttributes { export const Shell = ({ children, className: classNameProp, - defaultLayout = warningLayout, leftSidePanel, leftSidePanelLayout, loginUrl, @@ -69,21 +53,17 @@ export const Shell = ({ }: ShellProps) => { const rootRef = useRef(null); const layoutId = useRef("latest"); - const [layout, saveLayoutConfig, loadLayoutById] = useLayoutConfig({ - defaultLayout, - saveLocation, - user, - }); + const { tempLayout, saveTempLayout, loadLayoutById } = useLayoutManager(); const handleLayoutChange = useCallback( (layout) => { try { - saveLayoutConfig(layout); + saveTempLayout(layout); } catch { error?.("Failed to save layout"); } }, - [saveLayoutConfig] + [saveTempLayout] ); const handleSwitchTheme = useCallback((mode: ThemeMode) => { @@ -92,11 +72,10 @@ export const Shell = ({ } }, []); - const handleNavigate = useCallback( - (id) => { - layoutId.current = id; - loadLayoutById(id); - }, + const handleNavigate = useCallback((id: string) => { + layoutId.current = id; + loadLayoutById(id); + }, [loadLayoutById] ); @@ -130,7 +109,7 @@ export const Shell = ({ return ( // ShellContext TBD - + { }, [handleCloseDialog, handleSave]); //TODO what the App actually receives is an array of layouts - const layout = useMemo(() => { - return { - type: "Stack", - props: { - className: "vuuShell-mainTabs", - TabstripProps: { - allowAddTab: true, - allowRenameTab: true, - animateSelectionThumb: false, - location: "main-tab", - }, - preserve: true, - active: 0, - }, - children: [ - { - type: "Stack", - props: { - active: 0, - title: "My Instruments", - TabstripProps: { - allowRenameTab: true, - allowCloseTab: true, - }, - }, - children: [ - { - type: "View", - props: { - title: "European Stock", - }, - style: { height: "calc(100% - 6px)" }, - children: [ - { - type: "AutoTableNext", - }, - ], - }, - { - type: "View", - props: { - title: "Other Stock", - }, - style: { height: "calc(100% - 6px)" }, - children: [ - { - type: "AutoTableNext", - }, - ], - }, - ], - }, - ], - }; - }, []); return ( { menuBuilder={buildMenuOptions} > } loginUrl={window.location.toString()}