@xh/hoist 71.0.0-SNAPSHOT.1733198772915 → 71.0.0-SNAPSHOT.1733266596001

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

@@ -0,0 +1,279 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * 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 {TabContainerModel} from '@xh/hoist/cmp/tab';
+import {HoistModel, LoadSpec, lookup, 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 {Icon} from '@xh/hoist/icon';
+import {bindable, makeObservable} 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';
+
+/**
+ * Backing model for ManageDialog
+ */
+export class ManageDialogModel extends HoistModel {
+    @lookup(() => ViewManagerModel)
+    viewManagerModel: ViewManagerModel;
+
+    @managed privateGridModel: GridModel;
+    @managed globalGridModel: GridModel;
+    @managed editFormModel: EditFormModel;
+    @managed tabContainerModel: TabContainerModel;
+
+    @bindable filter: FilterTestFn;
+
+    readonly updateTask = TaskObserver.trackLast();
+
+    get loadTask(): TaskObserver {
+        return this.viewManagerModel.loadModel;
+    }
+
+    get gridModel(): GridModel {
+        return this.tabContainerModel.activeTabId == 'global'
+            ? this.globalGridModel
+            : this.privateGridModel;
+    }
+
+    @computed
+    get selectedView(): ViewInfo {
+        return this.gridModel.selectedRecord?.data.info;
+    }
+
+    @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;
+    }
+
+    get manageGlobal(): boolean {
+        return this.viewManagerModel.manageGlobal;
+    }
+
+    get typeDisplayName(): string {
+        return this.viewManagerModel.typeDisplayName;
+    }
+
+    get globalDisplayName(): string {
+        return this.viewManagerModel.globalDisplayName;
+    }
+
+    get enableFavorites(): boolean {
+        return this.viewManagerModel.enableFavorites;
+    }
+
+    constructor() {
+        super();
+        makeObservable(this);
+    }
+
+    close() {
+        this.viewManagerModel.closeManageDialog();
+    }
+
+    override onLinked() {
+        super.onLinked();
+
+        this.privateGridModel = this.createGridModel('personal');
+        this.globalGridModel = this.createGridModel(this.globalDisplayName);
+        this.tabContainerModel = this.createTabContainerModel();
+        this.editFormModel = new EditFormModel(this);
+
+        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();
+                }
+            }
+        );
+    }
+
+    override async doLoadAsync(loadSpec: LoadSpec) {
+        const {view, globalViews, privateViews} = this.viewManagerModel;
+        this.globalGridModel.loadData(globalViews);
+        this.privateGridModel.loadData(privateViews);
+        if (!loadSpec.isRefresh && !view.isDefault) {
+            await this.selectViewAsync(view.info);
+        }
+    }
+
+    async deleteAsync(views: ViewInfo[]) {
+        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();
+    }
+
+    //------------------------
+    // Implementation
+    //------------------------
+    private async doUpdateAsync(
+        view: ViewInfo,
+        name: string,
+        description: string,
+        isGlobal: boolean
+    ) {
+        const {viewManagerModel} = this;
+
+        await viewManagerModel.updateViewAsync(view, name, description, isGlobal);
+        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')) {
+            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.'));
+        }
+
+        const confirmed = await XH.confirm({
+            message: fragment(msgs.map(m => p(m))),
+            confirmProps: {
+                text: `Yes, delete ${pluralize(typeDisplayName, count)}`,
+                outlined: true,
+                autoFocus: false,
+                intent: 'danger'
+            }
+        });
+        if (!confirmed) return;
+
+        for (const view of views) {
+            await viewManagerModel.deleteViewAsync(view);
+        }
+
+        await viewManagerModel.refreshAsync();
+        await this.refreshAsync();
+    }
+
+    async selectViewAsync(view: ViewInfo) {
+        this.tabContainerModel.activateTab(view.isGlobal ? 'global' : 'private');
+        await this.gridModel.selectAsync(view.token);
+    }
+
+    private createGridModel(name: string): GridModel {
+        return new GridModel({
+            emptyText: `No ${name} ${pluralize(this.typeDisplayName)} found...`,
+            sortBy: 'name',
+            hideHeaders: true,
+            showGroupRowCounts: false,
+            selModel: 'multiple',
+            contextMenu: null,
+            sizingMode: 'standard',
+            store: {
+                idSpec: 'token',
+                processRawData: v => ({name: v.name, isFavorite: v.isFavorite, info: v}),
+                fields: [
+                    {name: 'name', type: 'string'},
+                    {name: 'isFavorite', type: 'bool'},
+                    {name: 'info', type: 'auto'}
+                ]
+            },
+            autosizeOptions: {mode: GridAutosizeMode.DISABLED},
+            columns: [
+                {field: 'name', flex: true},
+                {
+                    colId: 'isFavorite',
+                    field: 'info',
+                    omit: !this.enableFavorites,
+                    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'
+                        });
+                    }
+                }
+            ],
+            onCellClicked: ({colDef, data: record, api}) => {
+                if (colDef.colId === 'isFavorite') {
+                    this.viewManagerModel.toggleFavorite(record.id);
+                    api.redrawRows();
+                }
+            }
+        });
+    }
+
+    private createTabContainerModel(): TabContainerModel {
+        const pluralType = startCase(pluralize(this.typeDisplayName));
+        return new TabContainerModel({
+            tabs: [
+                {
+                    id: 'private',
+                    title: `My ${pluralType}`,
+                    content: grid({model: this.privateGridModel})
+                },
+                {
+                    id: 'global',
+                    title: `${startCase(this.globalDisplayName)} ${pluralType}`,
+                    content: grid({model: this.globalGridModel})
+                }
+            ]
+        });
+    }
+}

package/desktop/cmp/viewmanager/{impl/SaveDialog.ts → dialog/SaveAsDialog.ts}

@@ -1,26 +1,35 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2024 Extremely Heavy Industries Inc.
+ */
+
 import {form} from '@xh/hoist/cmp/form';
 import {filler, vframe} from '@xh/hoist/cmp/layout';
 import {hoistCmp, uses} from '@xh/hoist/core';
-import {SaveDialogModel} from '@xh/hoist/core/persist/viewmanager/impl/SaveDialogModel';
+import {SaveAsDialogModel} from '@xh/hoist/cmp/viewmanager/';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {formField} from '@xh/hoist/desktop/cmp/form';
 import {textArea, textInput} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
-import {Icon} from '@xh/hoist/icon';
 import {dialog} from '@xh/hoist/kit/blueprint';
+import {startCase} from 'lodash';
 
-export const saveDialog = hoistCmp.factory<SaveDialogModel>({
+/**
+ * Default Save As dialog used by ViewManager.
+ */
+export const saveAsDialog = hoistCmp.factory<SaveAsDialogModel>({
     displayName: 'SaveDialog',
     className: 'xh-view-manager__save-dialog',
-    model: uses(SaveDialogModel),
+    model: uses(SaveAsDialogModel),
 
     render({model, className}) {
         if (!model.isOpen) return null;
 
         return dialog({
             title: `Save as...`,
-            icon: Icon.copy(),
             className,
             isOpen: true,
             style: {width: 500},
@@ -31,7 +40,7 @@ export const saveDialog = hoistCmp.factory<SaveDialogModel>({
     }
 });
 
-const formPanel = hoistCmp.factory<SaveDialogModel>({
+const formPanel = hoistCmp.factory<SaveAsDialogModel>({
     render({model}) {
         return panel({
             item: form({
@@ -62,14 +71,14 @@ const formPanel = hoistCmp.factory<SaveDialogModel>({
                 })
             }),
             bbar: bbar(),
-            mask: model.saveTask
+            mask: model.parent.saveTask
         });
     }
 });
 
-const bbar = hoistCmp.factory<SaveDialogModel>({
+const bbar = hoistCmp.factory<SaveAsDialogModel>({
     render({model}) {
-        const {formModel, DisplayName} = model;
+        const {typeDisplayName} = model;
         return toolbar(
             filler(),
             button({
@@ -77,11 +86,10 @@ const bbar = hoistCmp.factory<SaveDialogModel>({
                 onClick: () => model.cancel()
             }),
             button({
-                text: `Save as new ${DisplayName}`,
-                icon: Icon.copy(),
+                text: `Save as new ${startCase(typeDisplayName)}`,
                 outlined: true,
                 intent: 'success',
-                disabled: !formModel.isValid,
+                disabled: !model.formModel.isValid,
                 onClick: () => model.saveAsAsync()
             })
         );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "71.0.0-SNAPSHOT.1733198772915",
+  "version": "71.0.0-SNAPSHOT.1733266596001",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",

package/svc/JsonBlobService.ts

@@ -9,7 +9,7 @@ import {pickBy} from 'lodash';
 
 export interface JsonBlob {
     /** Either null for private blobs or special token "*" for globally shared blobs. */
-    acl: string;
+    acl: '*';
     /** True if this blob has been archived (soft-deleted). */
     archived: boolean;
     /** Timestamp indicating when this blob was archived, or special value `0` if not archived. */

package/svc/index.ts

@@ -16,7 +16,8 @@ export * from './IdentityService';
 export * from './IdleService';
 export * from './InspectorService';
 export * from './JsonBlobService';
-export * from './LocalStorageService';
 export * from './PrefService';
 export * from './TrackService';
 export * from './WebSocketService';
+export * from './storage/LocalStorageService';
+export * from './storage/SessionStorageService';

package/svc/{LocalStorageService.ts → storage/BaseStorageService.ts}

@@ -6,26 +6,22 @@
  */
 import {HoistService, XH} from '@xh/hoist/core';
 import {throwIf} from '@xh/hoist/utils/js';
-import store from 'store2';
+import {StoreType} from 'store2';
 
 /**
- * Service to provide simple key/value access to browser local storage, appropriately namespaced
- * by application code and username.
+ * Service to provide simple key/value access to browser local/session storage, appropriately
+ * namespaced by application code and username.
  *
- * In the unexpected case that local storage is not available, will provide a transient in-memory
+ * In the unexpected case that the core apis are not available, will provide a transient in-memory
  * storage to support its operations and API.
- *
- * Relied upon by Hoist features such as local preference values and grid state.
  */
-export class LocalStorageService extends HoistService {
-    static instance: LocalStorageService;
-
+export abstract class BaseStorageService extends HoistService {
     constructor() {
         super();
         if (this.isFake) {
             XH.handleException(
                 XH.exception(
-                    'Local Storage is not supported in this browser. Transient in-memory storage ' +
+                    'Requested Storage is not supported in this browser. Transient in-memory storage ' +
                         'will be used as a fallback.  All data stored will be lost when page is closed.'
                 ),
                 {showAlert: false}
@@ -34,7 +30,7 @@ export class LocalStorageService extends HoistService {
     }
 
     get(key: string, defaultValue?: any): any {
-        const storage = this.getInstance(),
+        const storage = this.storeInstance,
             val = storage.get(key, defaultValue);
 
         throwIf(val === undefined, `Key '${key}' not found`);
@@ -42,7 +38,7 @@ export class LocalStorageService extends HoistService {
     }
 
     set(key: string, value: any) {
-        this.getInstance().set(key, value, true);
+        this.storeInstance.set(key, value, true);
     }
 
     apply(key: string, newProps: object) {
@@ -53,7 +49,7 @@ export class LocalStorageService extends HoistService {
     }
 
     remove(key: string) {
-        this.getInstance().remove(key);
+        this.storeInstance.remove(key);
     }
 
     removeIf(predicateFn: (s: string) => boolean) {
@@ -63,25 +59,19 @@ export class LocalStorageService extends HoistService {
     }
 
     clear() {
-        this.getInstance().clear();
+        this.storeInstance().clear();
     }
 
     keys(): string[] {
-        return this.getInstance().keys();
+        return this.storeInstance.keys();
     }
 
     get isFake(): boolean {
-        return store.isFake();
+        return this.storeInstance.isFake();
     }
 
     //------------------
     //  Implementation
     //------------------
-    private getInstance() {
-        return store.namespace(this.getNamespace());
-    }
-
-    private getNamespace() {
-        return `${XH.appCode}.${XH.getUsername()}`;
-    }
+    protected abstract get storeInstance(): StoreType;
 }

package/svc/storage/LocalStorageService.ts

@@ -0,0 +1,23 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2024 Extremely Heavy Industries Inc.
+ */
+import {XH} from '@xh/hoist/core';
+import {BaseStorageService} from '@xh/hoist/svc/storage/BaseStorageService';
+import store, {StoreType} from 'store2';
+
+/**
+ * Service to provide simple key/value access to browser local storage, appropriately namespaced
+ * by application code and username.
+ *
+ * Relied upon by Hoist persistence mechanisms when using key 'localStorageKey`
+ */
+export class LocalStorageService extends BaseStorageService {
+    static instance: LocalStorageService;
+
+    protected get storeInstance(): StoreType {
+        return store.local.namespace(`${XH.appCode}.${XH.getUsername()}`);
+    }
+}

package/svc/storage/SessionStorageService.ts

@@ -0,0 +1,23 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2024 Extremely Heavy Industries Inc.
+ */
+import {XH} from '@xh/hoist/core';
+import {BaseStorageService} from '@xh/hoist/svc/storage/BaseStorageService';
+import store, {StoreType} from 'store2';
+
+/**
+ * Service to provide simple key/value access to browser session storage, appropriately namespaced
+ * by application code and username.
+ *
+ * Relied upon by Hoist persistence mechanisms when using key 'sessionStorageKey`
+ */
+export class SessionStorageService extends BaseStorageService {
+    static instance: SessionStorageService;
+
+    protected get storeInstance(): StoreType {
+        return store.session.namespace(`${XH.appCode}.${XH.getUsername()}`);
+    }
+}