@xh/hoist 71.0.0-SNAPSHOT.1733791818708 → 71.0.0-SNAPSHOT.1734118787755

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({
     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 {typeDisplayName, updateTask, loadTask, selectedViews} = model,
+            count = selectedViews.length;
+
         return dialog({
             title: `Manage ${capitalize(pluralize(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.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()})
+        );
     }
 });

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

@@ -5,33 +5,39 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 
-import {grid, GridAutosizeMode, GridModel} from '@xh/hoist/cmp/grid';
-import {fragment, p, strong} from '@xh/hoist/cmp/layout';
+import {badge} from '@xh/hoist/cmp/badge';
+import {dateTimeCol, GridAutosizeMode, GridModel} from '@xh/hoist/cmp/grid';
+import {fragment, hbox, p, strong} from '@xh/hoist/cmp/layout';
 import {TabContainerModel} from '@xh/hoist/cmp/tab';
-import {HoistModel, LoadSpec, lookup, managed, TaskObserver, XH} from '@xh/hoist/core';
+import {ViewInfo, ViewManagerModel, ViewUpdateSpec} from '@xh/hoist/cmp/viewmanager';
+import {HoistModel, LoadSpec, managed, TaskObserver, XH} from '@xh/hoist/core';
 import {FilterTestFn} from '@xh/hoist/data';
-import {computed} from 'mobx';
-import {ReactNode} from 'react';
-import {EditFormModel} from './EditFormModel';
+import {button} from '@xh/hoist/desktop/cmp/button';
+import {viewsGrid} from '@xh/hoist/desktop/cmp/viewmanager/dialog/ManageDialog';
 import {Icon} from '@xh/hoist/icon';
-import {bindable, makeObservable} from '@xh/hoist/mobx';
+import {action, bindable, computed, makeObservable, observable, runInAction} from '@xh/hoist/mobx';
 import {pluralize} from '@xh/hoist/utils/js';
-import {ViewInfo, ViewManagerModel} from '@xh/hoist/cmp/viewmanager';
-import {find, some, startCase} from 'lodash';
+import {capitalize, isEmpty, some, startCase} from 'lodash';
+import {ReactNode} from 'react';
+import {ViewPanelModel} from './ViewPanelModel';
 
 /**
  * Backing model for ManageDialog
  */
 export class ManageDialogModel extends HoistModel {
-    @lookup(() => ViewManagerModel)
     viewManagerModel: ViewManagerModel;
 
-    @managed privateGridModel: GridModel;
+    @observable isOpen: boolean = false;
+
+    @managed ownedGridModel: GridModel;
     @managed globalGridModel: GridModel;
-    @managed editFormModel: EditFormModel;
+    @managed sharedGridModel: GridModel;
+
+    @managed viewPanelModel: ViewPanelModel;
+
     @managed tabContainerModel: TabContainerModel;
 
-    @bindable filter: FilterTestFn;
+    @bindable.ref filter: FilterTestFn;
 
     readonly updateTask = TaskObserver.trackLast();
 
@@ -40,30 +46,25 @@ export class ManageDialogModel extends HoistModel {
     }
 
     get gridModel(): GridModel {
-        return this.tabContainerModel.activeTabId == 'global'
-            ? this.globalGridModel
-            : this.privateGridModel;
+        switch (this.tabContainerModel.activeTabId) {
+            case 'global':
+                return this.globalGridModel;
+            case 'shared':
+                return this.sharedGridModel;
+            case 'owned':
+            default:
+                return this.ownedGridModel;
+        }
     }
 
     @computed
     get selectedView(): ViewInfo {
-        return this.gridModel.selectedRecord?.data.info;
+        return this.gridModel.selectedRecord?.data.view;
     }
 
     @computed
     get selectedViews(): ViewInfo[] {
-        return this.gridModel.selectedRecords.map(it => it.data.info) as ViewInfo[];
-    }
-
-    get canDelete(): boolean {
-        const {viewManagerModel, manageGlobal, selectedViews} = this,
-            {views, enableDefault} = viewManagerModel;
-
-        // Can't delete global views without role.
-        if (!manageGlobal && selectedViews.some(v => v.isGlobal)) return false;
-
-        // Can't delete all the views, unless default mode is enabled.
-        return enableDefault || views.length - selectedViews.length > 0;
+        return this.gridModel.selectedRecords.map(it => it.data.view) as ViewInfo[];
     }
 
     get manageGlobal(): boolean {
@@ -78,60 +79,45 @@ export class ManageDialogModel extends HoistModel {
         return this.viewManagerModel.globalDisplayName;
     }
 
-    get enableFavorites(): boolean {
-        return this.viewManagerModel.enableFavorites;
+    get enableSharing(): boolean {
+        return this.viewManagerModel.enableSharing;
     }
 
-    constructor() {
+    constructor(viewManagerModel: ViewManagerModel) {
         super();
         makeObservable(this);
+        this.viewManagerModel = viewManagerModel;
     }
 
-    close() {
-        this.viewManagerModel.closeManageDialog();
+    @action
+    open() {
+        if (!this.tabContainerModel) this.init();
+        this.loadAsync();
+        this.isOpen = true;
     }
 
-    override onLinked() {
-        super.onLinked();
-
-        this.privateGridModel = this.createGridModel('personal');
-        this.globalGridModel = this.createGridModel(this.globalDisplayName);
-        this.tabContainerModel = this.createTabContainerModel();
-        this.editFormModel = new EditFormModel(this);
+    @action
+    close() {
+        this.isOpen = false;
+    }
 
-        const {privateGridModel, globalGridModel, editFormModel} = this;
-        this.addReaction(
-            {
-                track: () => this.selectedView,
-                run: r => editFormModel.setView(r)
-            },
-            {
-                track: () => this.filter,
-                run: f => {
-                    privateGridModel.store.setFilter(f);
-                    globalGridModel.store.setFilter(f);
-                },
-                fireImmediately: true
-            },
-            {
-                track: () => privateGridModel.selectedRecords,
-                run: recs => {
-                    if (recs.length) globalGridModel.clearSelection();
-                }
-            },
-            {
-                track: () => globalGridModel.selectedRecords,
-                run: recs => {
-                    if (recs.length) privateGridModel.clearSelection();
-                }
-            }
-        );
+    activateSelectedViewAndClose() {
+        this.viewManagerModel.selectViewAsync(this.selectedView);
+        this.close();
     }
 
     override async doLoadAsync(loadSpec: LoadSpec) {
-        const {view, globalViews, privateViews} = this.viewManagerModel;
-        this.globalGridModel.loadData(globalViews);
-        this.privateGridModel.loadData(privateViews);
+        const {tabContainerModel} = this,
+            {view, ownedViews, globalViews, sharedViews} = this.viewManagerModel;
+
+        runInAction(() => {
+            this.ownedGridModel.loadData(ownedViews);
+            this.globalGridModel.loadData(globalViews);
+            this.sharedGridModel.loadData(sharedViews);
+            tabContainerModel.setTabTitle('owned', this.ownedTabTitle);
+            tabContainerModel.setTabTitle('global', this.globalTabTitle);
+            tabContainerModel.setTabTitle('shared', this.sharedTabTitle);
+        });
         if (!loadSpec.isRefresh && !view.isDefault) {
             await this.selectViewAsync(view.info);
         }
@@ -141,51 +127,74 @@ export class ManageDialogModel extends HoistModel {
         return this.doDeleteAsync(views).linkTo(this.updateTask).catchDefault();
     }
 
-    async updateAsync(view: ViewInfo, name: string, description: string, isGlobal: boolean) {
-        return this.doUpdateAsync(view, name, description, isGlobal)
-            .linkTo(this.updateTask)
-            .catchDefault();
+    async updateAsync(view: ViewInfo, update: ViewUpdateSpec) {
+        return this.doUpdateAsync(view, update).linkTo(this.updateTask).catchDefault();
+    }
+
+    async makeGlobalAsync(view: ViewInfo) {
+        return this.doMakeGlobalAsync(view).linkTo(this.updateTask).catchDefault();
+    }
+
+    @action
+    togglePinned(views: ViewInfo[]) {
+        views.forEach(v => this.viewManagerModel.togglePinned(v));
+        this.refreshAsync();
     }
 
     //------------------------
     // Implementation
     //------------------------
-    private async doUpdateAsync(
-        view: ViewInfo,
-        name: string,
-        description: string,
-        isGlobal: boolean
-    ) {
-        const {viewManagerModel} = this;
+    private init() {
+        this.ownedGridModel = this.createGridModel('owned');
+        this.globalGridModel = this.createGridModel('global');
+        this.sharedGridModel = this.createGridModel('shared');
+        this.tabContainerModel = this.createTabContainerModel();
+        this.viewPanelModel = new ViewPanelModel(this);
+        const gridModels = [this.ownedGridModel, this.globalGridModel, this.sharedGridModel];
+        this.addReaction({
+            track: () => this.filter,
+            run: f => gridModels.forEach(m => m.store.setFilter(f)),
+            fireImmediately: true
+        });
+        gridModels.forEach(gm => {
+            this.addReaction({
+                track: () => gm.hasSelection,
+                run: hasSelection => {
+                    gridModels.forEach(it => {
+                        if (it != gm && hasSelection) it.clearSelection();
+                    });
+                }
+            });
+        });
+    }
 
-        await viewManagerModel.api.updateViewInfoAsync(view, name, description, isGlobal);
+    private async doUpdateAsync(view: ViewInfo, update: ViewUpdateSpec) {
+        const {viewManagerModel} = this;
+        await viewManagerModel.api.updateViewInfoAsync(view, update);
         await viewManagerModel.refreshAsync();
         await this.refreshAsync();
-
-        // reselect the updated copy of this view -- it may have moved.
-        await this.selectViewAsync(find(viewManagerModel.views, {token: view.token}));
     }
 
     private async doDeleteAsync(views: ViewInfo[]) {
         const {viewManagerModel, typeDisplayName} = this,
-            {enableDefault} = viewManagerModel,
             count = views.length;
 
         if (!count) return;
 
-        if (viewManagerModel.views.length === count && !enableDefault) {
-            throw XH.exception({
-                message: `You cannot delete all ${pluralize(typeDisplayName)}.`,
-                isRoutine: true
-            });
-        }
-
         const confirmStr = count > 1 ? pluralize(typeDisplayName, count, true) : views[0].typedName;
         const msgs: ReactNode[] = [`Are you sure you want to delete ${confirmStr}?`];
-        if (some(views, 'isGlobal')) {
+        if (some(views, v => v.isGlobal || v.isShared)) {
             count > 1
-                ? msgs.push(strong('These global views will no longer be available to ALL users.'))
-                : msgs.push(strong('This global view will no longer be available to ALL users.'));
+                ? msgs.push(
+                      strong(
+                          `This includes at least one public ${typeDisplayName}, to be deleted for all users.`
+                      )
+                  )
+                : msgs.push(
+                      strong(
+                          `This is a public ${typeDisplayName} and will be deleted for all users.`
+                      )
+                  );
         }
 
         const confirmed = await XH.confirm({
@@ -207,73 +216,175 @@ export class ManageDialogModel extends HoistModel {
         await this.refreshAsync();
     }
 
-    async selectViewAsync(view: ViewInfo) {
-        this.tabContainerModel.activateTab(view.isGlobal ? 'global' : 'private');
+    private async doMakeGlobalAsync(view: ViewInfo) {
+        const {globalDisplayName, typeDisplayName} = this.viewManagerModel,
+            {typedName} = view,
+            msgs = [
+                `The ${typedName} will become a ${globalDisplayName} ${typeDisplayName} visible to all other ${XH.appName} users.`,
+                strong('Are you sure you want to proceed?')
+            ];
+
+        const confirmed = await XH.confirm({
+            message: fragment(msgs.map(m => p(m))),
+            confirmProps: {
+                text: `Yes, change visibility`,
+                outlined: true,
+                autoFocus: false,
+                intent: 'primary'
+            }
+        });
+        if (!confirmed) return;
+
+        const {viewManagerModel} = this;
+        const updated = await viewManagerModel.api.makeViewGlobalAsync(view);
+        await viewManagerModel.refreshAsync();
+        await this.refreshAsync();
+        await this.selectViewAsync(updated.info); // reselect -- will have moved tabs!
+    }
+
+    private async selectViewAsync(view: ViewInfo) {
+        this.tabContainerModel.activateTab(
+            view.isOwned ? 'owned' : view.isGlobal ? 'global' : 'shared'
+        );
         await this.gridModel.selectAsync(view.token);
     }
 
-    private createGridModel(name: string): GridModel {
+    private createGridModel(type: 'owned' | 'global' | 'shared'): GridModel {
+        const {typeDisplayName, globalDisplayName} = this;
+
+        const modifier =
+            type == 'owned' ? `personal` : type == 'global' ? globalDisplayName : 'shared';
+
         return new GridModel({
-            emptyText: `No ${name} ${pluralize(this.typeDisplayName)} found...`,
+            emptyText: `No ${modifier} ${pluralize(typeDisplayName)} found...`,
             sortBy: 'name',
-            hideHeaders: true,
             showGroupRowCounts: false,
+            groupBy: ['group'],
+            groupSortFn: (a, b) => {
+                // Place ungrouped items at bottom.
+                if (a == '') return 1;
+                if (b == '') return -1;
+                return a.localeCompare(b);
+            },
             selModel: 'multiple',
             contextMenu: null,
             sizingMode: 'standard',
+            hideHeaders: true,
             store: {
                 idSpec: 'token',
-                processRawData: v => ({name: v.name, isFavorite: v.isFavorite, info: v}),
+                processRawData: v => ({
+                    name: v.name,
+                    group: v.isGlobal || v.isOwned ? v.group : v.owner,
+                    owner: v.owner,
+                    lastUpdated: v.lastUpdated,
+                    isPinned: v.isPinned,
+                    view: v
+                }),
                 fields: [
                     {name: 'name', type: 'string'},
-                    {name: 'isFavorite', type: 'bool'},
-                    {name: 'info', type: 'auto'}
+                    {name: 'group', type: 'string'},
+                    {name: 'owner', type: 'string'},
+                    {name: 'lastUpdated', type: 'date'},
+                    {name: 'isPinned', type: 'bool'},
+                    {name: 'view', type: 'auto'}
                 ]
             },
             autosizeOptions: {mode: GridAutosizeMode.DISABLED},
             columns: [
                 {field: 'name', flex: true},
+                {field: 'group', hidden: true},
+                {field: 'owner', hidden: true},
+                {field: 'lastUpdated', ...dateTimeCol},
                 {
-                    colId: 'isFavorite',
-                    field: 'info',
-                    omit: !this.enableFavorites,
+                    field: 'isPinned',
                     width: 40,
                     align: 'center',
-                    headerName: Icon.favorite(),
-                    highlightOnChange: true,
-                    renderer: v => {
-                        const {isFavorite} = v;
-                        return Icon.favorite({
-                            prefix: isFavorite ? 'fas' : 'fal',
-                            className: isFavorite ? 'xh-yellow' : 'xh-text-color-muted'
+                    headerName: Icon.pin(),
+                    headerTooltip: 'Pin to menu',
+                    renderer: (isPinned, {record}) => {
+                        return button({
+                            icon: Icon.pin({
+                                prefix: isPinned ? 'fas' : 'fal',
+                                className: isPinned ? 'xh-yellow' : 'xh-text-color-muted'
+                            }),
+                            tooltip: isPinned ? 'Unpin from menu' : 'Pin to menu',
+                            onClick: () => {
+                                this.togglePinned([record.data.view]);
+                            }
                         });
                     }
                 }
             ],
-            onCellClicked: ({colDef, data: record, api}) => {
-                if (colDef.colId === 'isFavorite') {
-                    this.viewManagerModel.toggleFavorite(record.id);
-                    api.redrawRows();
-                }
-            }
+            groupRowRenderer: ({value}) => (isEmpty(value) ? 'Ungrouped' : value)
         });
     }
 
     private createTabContainerModel(): TabContainerModel {
-        const pluralType = startCase(pluralize(this.typeDisplayName));
+        const view = this.typeDisplayName,
+            views = pluralize(view),
+            globalViews = `${this.globalDisplayName} ${views}`,
+            {enableSharing} = this.viewManagerModel;
+
         return new TabContainerModel({
             tabs: [
                 {
-                    id: 'private',
-                    title: `My ${pluralType}`,
-                    content: grid({model: this.privateGridModel})
+                    id: 'owned',
+                    title: this.ownedTabTitle,
+                    content: viewsGrid({
+                        model: this.ownedGridModel,
+                        helpText: fragment(
+                            Icon.user(),
+                            `This tab shows ${views} you have created. Pinned ${views} are shown in your menu for quick access. Set a group on ${views} to show them together in a sub-menu. `,
+                            enableSharing
+                                ? `Opt-in to sharing any of your ${views} to make them discoverable by other users.`
+                                : ''
+                        )
+                    })
                 },
                 {
                     id: 'global',
-                    title: `${startCase(this.globalDisplayName)} ${pluralType}`,
-                    content: grid({model: this.globalGridModel})
+                    title: this.globalTabTitle,
+                    content: viewsGrid({
+                        model: this.globalGridModel,
+                        helpText: fragment(
+                            Icon.globe(),
+                            `This tab shows ${globalViews} available to everyone. ${capitalize(globalViews)} can be pinned by default so they appear automatically in everyone's menu, but you can choose which ${views} you would like to see by pinning/unpinning them at any time.`
+                        )
+                    })
+                },
+                {
+                    id: 'shared',
+                    title: this.sharedTabTitle,
+                    content: viewsGrid({
+                        model: this.sharedGridModel,
+                        helpText: fragment(
+                            Icon.users(),
+                            `This tab shows ${views} shared by other ${XH.appName} users. You can pin these ${views} to add them to your menu and access them directly. Only the owner will be able to save changes to a shared ${view}, but you can save as a copy to make it your own.`
+                        )
+                    })
                 }
             ]
         });
     }
+
+    private get ownedTabTitle(): ReactNode {
+        return hbox(
+            `My ${startCase(pluralize(this.typeDisplayName))}`,
+            badge(this.ownedGridModel.store.allCount)
+        );
+    }
+
+    private get globalTabTitle(): ReactNode {
+        return hbox(
+            `${startCase(this.globalDisplayName)} ${startCase(pluralize(this.typeDisplayName))}`,
+            badge(this.globalGridModel.store.allCount)
+        );
+    }
+
+    private get sharedTabTitle(): ReactNode {
+        return hbox(
+            `Shared ${startCase(pluralize(this.typeDisplayName))}`,
+            badge(this.sharedGridModel.store.allCount)
+        );
+    }
 }