Persistable + ViewManager

CHANGELOG.md

@@ -2,9 +2,13 @@
 
 ## v6.0-SNAPSHOT - unreleased
 
+### New Features
+* Added the new Hoist `ViewManager` component to the Portfolio example, as well as an in-depth test page hosted within the Admin Console.
+* Refactored and updated the Portfolio example for clarity and to better demonstrate potential usages of saved layouts via `ViewManager`.
+
 ## v5.3.0 - 2024-10-17
 
-### 📚 Libraries
+### Libraries
 * hoist-core 24.0.0
 * @xh/hoist 69.0.0
 
@@ -16,32 +20,32 @@
 ### Bug Fixes
 * Fixed `InputsPanel` "Set Focus" popover.
 
-### 📚 Libraries
+### Libraries
 * hoist-core 23.0.0
 * @xh/hoist 68.1.0
 
 ## v5.1.0 - 2024-06-21
 
-### 📚 Libraries
+### Libraries
 * hoist-core 20.1.0
 
 ## v5.0.2 - 2024-06-20
 
-### 📚 Libraries
+### Libraries
 * hoist-core 20.0.2
 * @xh/hoist 64.0.5
 
 ## v5.0.1 - 2024-05-19
 
-### 📚 Libraries
+### Libraries
 * @xh/hoist 64.0.1
 
 ## v5.0.0 - 2024-05-17
 
 ### New Features
 * Support for new `mockDirectoryGroups` config - see `RoleService` for details.
 
-### 📚 Libraries
+### Libraries
 * hoist-core 20.0 (multi-instance)
 * @xh/hoist 64.0
 * @ag-grid 31.2

client-app/src/admin/AppModel.ts

@@ -1,10 +1,9 @@
-import {XH} from '@xh/hoist/core';
 import {AppModel as HoistAdminAppModel} from '@xh/hoist/admin/AppModel';
+import {XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {PortfolioService} from '../core/svc/PortfolioService';
 import {roadmapTab} from './roadmap/RoadmapTab';
 import {testsTab} from './tests/TestsTab';
-import {wipTab} from './wip/WipTab';
 
 export class AppModel extends HoistAdminAppModel {
     static override instance: AppModel;
@@ -42,14 +41,11 @@ export class AppModel extends HoistAdminAppModel {
                     {name: 'localDate', path: '/localDate'},
                     {name: 'panelResizing', path: '/panelResizing'},
                     {name: 'select', path: '/select'},
-                    {name: 'webSockets', path: '/webSockets'},
+                    {name: 'storeColumnFilters', path: '/storeColumnFilters'},
                     {name: 'viewColumnFilters', path: '/viewColumnFilters'},
-                    {name: 'storeColumnFilters', path: '/storeColumnFilters'}
+                    {name: 'viewManager', path: '/viewManager'},
+                    {name: 'webSockets', path: '/webSockets'}
                 ]
-            },
-            {
-                name: 'wip',
-                path: '/wip'
             }
         ];
     }
@@ -58,8 +54,7 @@ export class AppModel extends HoistAdminAppModel {
         return [
             ...super.createTabs(),
             {id: 'roadmap', title: 'Roadmap', icon: Icon.mapSigns(), content: roadmapTab},
-            {id: 'tests', icon: Icon.stopwatch(), content: testsTab},
-            {id: 'wip', title: 'WIP', icon: Icon.experiment(), content: wipTab}
+            {id: 'tests', icon: Icon.stopwatch(), content: testsTab}
         ];
     }
 }

client-app/src/admin/tests/TestsTab.ts

@@ -1,18 +1,18 @@
-import {hoistCmp} from '@xh/hoist/core';
 import {tabContainer} from '@xh/hoist/cmp/tab';
-// eslint-disable-next-line
+import {hoistCmp} from '@xh/hoist/core';
 import {asyncLoopPanel} from './asyncLoops/AsyncLoopPanel';
-import {GridTestPanel} from './grids/GridTestPanel';
+import {storeColumnFilterPanel} from './columnFilters/store/StoreColumnFilterPanel';
+import {viewColumnFilterPanel} from './columnFilters/view/ViewColumnFilterPanel';
 import {CubeTestPanel} from './cube/CubeTestPanel';
-import {WebSocketTestPanel} from './websocket/WebSocketTestPanel';
+import {dataViewTestPanel} from './dataview/DataViewTestPanel';
+import {FetchApiTestPanel} from './fetch/FetchApiTestPanel';
+import {GridTestPanel} from './grids/GridTestPanel';
+import {gridScrolling} from './gridScrolling/GridScrolling';
 import {LocalDateTestPanel} from './localDate/LocalDateTestPanel';
 import {PanelResizingTestPanel} from './panels/PanelResizingTestPanel';
-import {FetchApiTestPanel} from './fetch/FetchApiTestPanel';
 import {SelectTestPanel} from './select/SelectTestPanel';
-import {dataViewTestPanel} from './dataview/DataViewTestPanel';
-import {storeColumnFilterPanel} from './columnFilters/store/StoreColumnFilterPanel';
-import {viewColumnFilterPanel} from './columnFilters/view/ViewColumnFilterPanel';
-import {gridScrolling} from './gridScrolling/GridScrolling';
+import {viewManagerTestPanel} from './viewmanager/ViewManagerTestPanel';
+import {WebSocketTestPanel} from './websocket/WebSocketTestPanel';
 
 export const testsTab = hoistCmp.factory(() => {
     return tabContainer({
@@ -22,24 +22,17 @@ export const testsTab = hoistCmp.factory(() => {
             tabs: [
                 {id: 'asyncLoop', title: 'Async Loops', content: asyncLoopPanel},
                 {id: 'cube', title: 'Cube Data', content: CubeTestPanel},
-                {id: 'dataView', title: 'Data View', content: dataViewTestPanel},
+                {id: 'dataView', content: dataViewTestPanel},
                 {id: 'fetchAPI', title: 'Fetch API', content: FetchApiTestPanel},
                 {id: 'grid', title: 'Grid', content: GridTestPanel},
-                {id: 'gridScrolling', title: 'Grid Scrolling', content: gridScrolling},
+                {id: 'gridScrolling', content: gridScrolling},
                 {id: 'localDate', title: 'LocalDate API', content: LocalDateTestPanel},
-                {id: 'panelResizing', title: 'Panel Resizing', content: PanelResizingTestPanel},
-                {id: 'select', title: 'Select', content: SelectTestPanel},
-                {id: 'webSockets', title: 'WebSockets', content: WebSocketTestPanel},
-                {
-                    id: 'storeColumnFilters',
-                    title: 'Store Column Filters',
-                    content: storeColumnFilterPanel
-                },
-                {
-                    id: 'viewColumnFilters',
-                    title: 'View Column Filters',
-                    content: viewColumnFilterPanel
-                }
+                {id: 'panelResizing', content: PanelResizingTestPanel},
+                {id: 'select', content: SelectTestPanel},
+                {id: 'storeColumnFilters', content: storeColumnFilterPanel},
+                {id: 'viewColumnFilters', content: viewColumnFilterPanel},
+                {id: 'viewManager', content: viewManagerTestPanel},
+                {id: 'webSockets', title: 'WebSockets', content: WebSocketTestPanel}
             ]
         }
     });

client-app/src/admin/tests/grids/GridTestModel.ts

@@ -11,7 +11,6 @@ import {GridTestMetrics} from './GridTestMetrics';
 const pnlColumn: ColumnSpec = {
     absSort: true,
     align: 'right',
-    width: 120,
     renderer: numberRenderer({
         precision: 0,
         ledger: true,
@@ -20,8 +19,9 @@ const pnlColumn: ColumnSpec = {
     })
 };
 
+const PERSIST_KEY = 'adminGridTest';
 export class GridTestModel extends HoistModel {
-    override persistWith = {localStorageKey: 'persistTest'};
+    override persistWith = {localStorageKey: PERSIST_KEY};
 
     // Total count (approx) of all nodes generated (parents + children).
     @bindable recordCount = 200000;
@@ -188,7 +188,7 @@ export class GridTestModel extends HoistModel {
         }
 
         return new GridModel({
-            persistWith: persistType ? {[persistType]: 'persistTest'} : null,
+            persistWith: persistType ? {[persistType]: PERSIST_KEY} : null,
             selModel: {mode: 'multiple'},
             sortBy: 'id',
             emptyText: 'No records found...',
@@ -211,20 +211,17 @@ export class GridTestModel extends HoistModel {
             columns: [
                 {
                     field: 'id',
-                    width: 140,
                     isTreeColumn: this.tree
                 },
                 {
                     field: 'symbol',
                     agOptions: {
                         filter: 'agTextColumnFilter',
                         suppressHeaderMenuButton: false
-                    },
-                    width: 200
+                    }
                 },
                 {
-                    field: 'trader',
-                    width: 200
+                    field: 'trader'
                 },
                 {
                     groupId: 'pnl',
@@ -238,7 +235,6 @@ export class GridTestModel extends HoistModel {
                 {
                     field: 'volume',
                     align: 'right',
-                    width: 130,
                     highlightOnChange: true,
                     renderer: millionsRenderer({
                         precision: 2,
@@ -249,7 +245,6 @@ export class GridTestModel extends HoistModel {
                 {
                     field: 'complex',
                     align: 'right',
-                    width: 130,
                     renderer: (v, {record}) => {
                         return fragment(
                             fmtMillions(record.data.volume, {precision: 2, label: true}),

client-app/src/admin/tests/viewmanager/ViewManagerTest.scss

@@ -0,0 +1,39 @@
+.tb-vm-test {
+  &__model-conf {
+    h3 {
+      border-bottom: var(--xh-border-solid);
+      font-weight: normal;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    .xh-form-field-switch-input {
+      margin-left: 4px;
+      .xh-form-field-label {
+        font-size: 0.8em;
+      }
+    }
+  }
+
+  &__output {
+    > .xh-panel__content > .xh-vframe {
+      overflow-y: auto !important;
+    }
+  }
+
+  &__comp {
+    > .xh-panel__content > .xh-vframe {
+      padding: var(--xh-pad-px);
+    }
+
+    border: var(--xh-border-solid);
+    flex: none !important;
+    margin: var(--xh-pad-double-px) var(--xh-pad-double-px) 0 var(--xh-pad-double-px);
+
+    &:last-child {
+      margin-bottom: var(--xh-pad-double-px);
+    }
+  }
+}