@xh/hoist 71.0.0-SNAPSHOT.1733854822950 → 71.0.0-SNAPSHOT.1734551243081

package/desktop/cmp/viewmanager/dialog/ManageDialog.ts

@@ -5,43 +5,56 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 
-import {tabContainer} from '@xh/hoist/cmp/tab';
-import {filler, hframe, placeholder} from '@xh/hoist/cmp/layout';
+import {grid, GridModel} from '@xh/hoist/cmp/grid';
+import {div, filler, hframe, placeholder, vframe} from '@xh/hoist/cmp/layout';
 import {storeFilterField} from '@xh/hoist/cmp/store';
-import {creates, hoistCmp} from '@xh/hoist/core';
-import {editForm} from './EditForm';
-import {ManageDialogModel} from './ManageDialogModel';
-import {button} from '@xh/hoist/desktop/cmp/button';
+import {tabContainer} from '@xh/hoist/cmp/tab';
+import {hoistCmp, uses} from '@xh/hoist/core';
+import {button, refreshButton} from '@xh/hoist/desktop/cmp/button';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
-import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
+import {toolbar, toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
 import {dialog} from '@xh/hoist/kit/blueprint';
 import {pluralize} from '@xh/hoist/utils/js';
 import {capitalize} from 'lodash';
+import {ManageDialogModel} from './ManageDialogModel';
+import {viewMultiPanel} from './ViewMultiPanel';
+import {viewPanel} from './ViewPanel';
 
 /**
- * Default management dialog for ViewManager
+ * Default management dialog for ViewManager.
  */
-export const manageDialog = hoistCmp.factory({
+export const manageDialog = hoistCmp.factory<ManageDialogModel>({
     displayName: 'ManageDialog',
     className: 'xh-view-manager__manage-dialog',
-    model: creates(ManageDialogModel),
+    model: uses(() => ManageDialogModel),
 
     render({model, className}) {
-        const {typeDisplayName, updateTask, loadTask, selectedViews} = model;
-        const count = selectedViews.length;
+        if (!model.isOpen) return null;
+
+        const {updateTask, loadTask, selectedViews, viewManagerModel} = model,
+            count = selectedViews.length;
+
         return dialog({
-            title: `Manage ${capitalize(pluralize(typeDisplayName))}`,
+            title: `Manage ${capitalize(pluralize(viewManagerModel.typeDisplayName))}`,
             icon: Icon.gear(),
             className,
             isOpen: true,
-            style: {width: '800px', maxWidth: '90vm', minHeight: '430px'},
+            style: {width: '1000px', maxWidth: '90vw', minHeight: '550px'},
             canOutsideClickClose: false,
             onClose: () => model.close(),
             item: panel({
                 item: hframe(
-                    viewPanel(),
-                    count == 0 ? placeholderPanel() : count > 1 ? multiSelectionPanel() : editForm()
+                    selectorPanel(),
+                    panel({
+                        item:
+                            count == 0
+                                ? placeholderPanel()
+                                : count > 1
+                                  ? viewMultiPanel()
+                                  : viewPanel(),
+                        bbar: bbar()
+                    })
                 ),
                 mask: [updateTask, loadTask]
             })
@@ -49,16 +62,39 @@ export const manageDialog = hoistCmp.factory({
     }
 });
 
-const viewPanel = hoistCmp.factory<ManageDialogModel>({
+const selectorPanel = hoistCmp.factory<ManageDialogModel>({
     render({model}) {
         return panel({
-            modelConfig: {defaultSize: 350, side: 'left', collapsible: false},
+            modelConfig: {defaultSize: 650, side: 'left', collapsible: false},
             item: tabContainer(),
             bbar: [
                 storeFilterField({
                     autoApply: false,
-                    includeFields: ['name'],
+                    includeFields: ['name', 'group'],
                     onFilterChange: f => (model.filter = f)
+                }),
+                filler(),
+                refreshButton({model})
+            ]
+        });
+    }
+});
+
+export const viewsGrid = hoistCmp.factory<GridModel>({
+    render({model, helpText}) {
+        return vframe({
+            paddingTop: 5,
+            items: [
+                grid({
+                    model,
+                    agOptions: {
+                        suppressMakeColumnVisibleAfterUnGroup: true
+                    }
+                }),
+                div({
+                    item: helpText,
+                    omit: !helpText,
+                    className: 'xh-view-manager__manage-dialog__help-text'
                 })
             ]
         });
@@ -67,32 +103,23 @@ const viewPanel = hoistCmp.factory<ManageDialogModel>({
 
 const placeholderPanel = hoistCmp.factory<ManageDialogModel>({
     render({model}) {
-        return panel({
-            item: placeholder(Icon.gears(), `Select a ${model.typeDisplayName}`),
-            bbar: toolbar(filler(), button({text: 'Close', onClick: () => model.close()}))
-        });
+        return placeholder(Icon.gears(), `Select a ${model.viewManagerModel.typeDisplayName}`);
     }
 });
 
-const multiSelectionPanel = hoistCmp.factory<ManageDialogModel>({
+const bbar = hoistCmp.factory<ManageDialogModel>({
     render({model}) {
-        const {selectedViews} = model;
-        return panel({
-            item: placeholder(
-                Icon.gears(),
-                `${selectedViews.length} selected ${pluralize(model.typeDisplayName)}`
-            ),
-            bbar: toolbar(
-                button({
-                    text: 'Delete',
-                    icon: Icon.delete(),
-                    intent: 'danger',
-                    disabled: !model.canDelete,
-                    onClick: () => model.deleteAsync(selectedViews)
-                }),
-                filler(),
-                button({text: 'Close', onClick: () => model.close()})
-            )
-        });
+        const {selectedView} = model;
+        return toolbar(
+            filler(),
+            button({
+                text: selectedView?.isCurrentView ? 'Currently Active' : 'Activate + Close',
+                onClick: () => model.activateSelectedViewAndClose(),
+                disabled: selectedView?.isCurrentView,
+                omit: !selectedView
+            }),
+            toolbarSep({omit: !selectedView}),
+            button({text: 'Close', onClick: () => model.close()})
+        );
     }
 });