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

package/desktop/cmp/viewmanager/ViewMenu.ts

@@ -0,0 +1,191 @@
+/*
+ * 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 {div, filler, fragment, hbox, span} from '@xh/hoist/cmp/layout';
+import {hoistCmp} from '@xh/hoist/core';
+import {ViewManagerModel, ViewInfo} from '@xh/hoist/cmp/viewmanager';
+import {switchInput} from '@xh/hoist/desktop/cmp/input';
+import {Icon} from '@xh/hoist/icon';
+import {menu, menuDivider, menuItem} from '@xh/hoist/kit/blueprint';
+import {consumeEvent, pluralize} from '@xh/hoist/utils/js';
+import {isEmpty, startCase} from 'lodash';
+import {ReactNode} from 'react';
+import {ViewManagerProps} from './ViewManager';
+
+/**
+ * Default Menu used by ViewManager.
+ */
+export const viewMenu = hoistCmp.factory<ViewManagerProps>({
+    render({model, showPrivateViewsInSubMenu, showGlobalViewsInSubMenu}) {
+        const {
+            enableAutoSave,
+            autoSaveUnavailableReason,
+            autoSave,
+            enableDefault,
+            isViewSavable,
+            view,
+            typeDisplayName,
+            globalDisplayName,
+            favoriteViews,
+            views,
+            isValueDirty,
+            privateViews,
+            globalViews
+        } = model;
+
+        const pluralName = pluralize(startCase(typeDisplayName)),
+            myPluralName = `My  ${pluralName}`,
+            globalPluralName = `${startCase(globalDisplayName)}  ${pluralName}`,
+            items = [];
+        if (!isEmpty(favoriteViews)) {
+            items.push(
+                menuDivider({title: 'Favorites'}),
+                ...favoriteViews.map(info => {
+                    return menuItem({
+                        key: `${info.token}-favorite`,
+                        icon: view.info?.token === info.token ? Icon.check() : Icon.placeholder(),
+                        text: textAndFaveToggle({info}),
+                        onClick: () => model.selectViewAsync(info),
+                        title: info.description
+                    });
+                })
+            );
+        }
+
+        if (!isEmpty(privateViews)) {
+            const privateItems = privateViews.map(it => buildMenuItem(it, model));
+            if (showPrivateViewsInSubMenu) {
+                items.push(
+                    menuDivider({omit: isEmpty(items)}),
+                    menuItem({
+                        text: myPluralName,
+                        shouldDismissPopover: false,
+                        items: privateItems
+                    })
+                );
+            } else {
+                items.push(menuDivider({title: myPluralName}), ...privateItems);
+            }
+        }
+
+        if (!isEmpty(globalViews)) {
+            const globalItems = globalViews.map(it => buildMenuItem(it, model));
+            if (showGlobalViewsInSubMenu) {
+                items.push(
+                    menuDivider({omit: isEmpty(items)}),
+                    menuItem({
+                        text: globalPluralName,
+                        shouldDismissPopover: false,
+                        items: globalItems
+                    })
+                );
+            } else {
+                items.push(menuDivider({title: globalPluralName}), ...globalItems);
+            }
+        }
+
+        return menu({
+            className: 'xh-view-manager__menu',
+            items: [
+                ...items,
+                menuDivider({omit: !enableDefault || isEmpty(items)}),
+                menuItem({
+                    icon: view.isDefault ? Icon.check() : Icon.placeholder(),
+                    text: `Default ${startCase(typeDisplayName)}`,
+                    omit: !enableDefault,
+                    onClick: () => model.selectViewAsync(null)
+                }),
+                menuDivider(),
+                menuItem({
+                    icon: Icon.save(),
+                    text: 'Save',
+                    disabled: !isViewSavable || !isValueDirty,
+                    onClick: () => model.saveAsync()
+                }),
+                menuItem({
+                    icon: Icon.placeholder(),
+                    text: 'Save As...',
+                    onClick: () => model.saveAsAsync()
+                }),
+                menuItem({
+                    icon: Icon.reset(),
+                    text: `Revert`,
+                    disabled: !isValueDirty,
+                    onClick: () => model.resetAsync()
+                }),
+                menuDivider({omit: !enableAutoSave}),
+                menuItem({
+                    omit: !enableAutoSave,
+                    text: switchInput({
+                        label: 'Auto Save',
+                        value: !autoSaveUnavailableReason && autoSave,
+                        disabled: !!autoSaveUnavailableReason,
+                        onChange: v => (model.autoSave = v),
+                        inline: true
+                    }),
+                    title: autoSaveUnavailableReason,
+                    shouldDismissPopover: false
+                }),
+                menuDivider(),
+                menuItem({
+                    icon: Icon.gear(),
+                    disabled: isEmpty(views),
+                    text: `Manage ${pluralName}...`,
+                    onClick: () => model.openManageDialog()
+                }),
+                menuItem({
+                    icon: Icon.refresh(),
+                    text: `Refresh ${pluralName}`,
+                    onClick: e => {
+                        model.refreshAsync();
+                        consumeEvent(e);
+                    }
+                })
+            ]
+        });
+    }
+});
+
+function buildMenuItem(data: ViewInfo, model: ViewManagerModel): ReactNode {
+    const selected = data.token === model.view.token,
+        icon = selected ? Icon.check() : Icon.placeholder();
+
+    return menuItem({
+        className: 'xh-view-manager__menu-item',
+        key: data.token,
+        icon,
+        text: textAndFaveToggle({info: data}),
+        title: data.description,
+        onClick: () => model.selectViewAsync(data)
+    });
+}
+
+const textAndFaveToggle = hoistCmp.factory<ViewManagerModel>({
+    render({model, info}) {
+        const {isFavorite, name} = info;
+        return hbox({
+            alignItems: 'center',
+            items: [
+                span({style: {paddingRight: 5}, item: name}),
+                fragment({
+                    omit: !model.enableFavorites,
+                    items: [
+                        filler(),
+                        div({
+                            className: `xh-view-manager__menu-item__fave-toggle ${isFavorite ? 'xh-view-manager__menu-item__fave-toggle--active' : ''}`,
+                            item: Icon.favorite({prefix: isFavorite ? 'fas' : 'far'}),
+                            onClick: e => {
+                                consumeEvent(e);
+                                model.toggleFavorite(info.token);
+                            }
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+});

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

@@ -0,0 +1,126 @@
+/*
+ * 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 {div, filler, hbox, hspacer, span, vframe} from '@xh/hoist/cmp/layout';
+
+import {hoistCmp, uses, XH} from '@xh/hoist/core';
+import {EditFormModel} from '@xh/hoist/desktop/cmp/viewmanager/dialog/EditFormModel';
+import {button} from '@xh/hoist/desktop/cmp/button';
+import {formField} from '@xh/hoist/desktop/cmp/form';
+import {select, 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 {fmtCompactDate} from '@xh/hoist/format';
+import {Icon} from '@xh/hoist/icon';
+import {startCase} from 'lodash';
+
+/**
+ * Default Edit Form for ViewManager
+ */
+export const editForm = hoistCmp.factory({
+    model: uses(EditFormModel),
+    render({model}) {
+        const {formModel, view, parent} = model;
+        if (!view) return null;
+
+        const {manageGlobal, globalDisplayName} = parent,
+            {lastUpdated, lastUpdatedBy, owner} = view,
+            isOwnView = owner === XH.getUsername();
+
+        return panel({
+            item: form({
+                fieldDefaults: {
+                    commitOnChange: true
+                },
+                item: vframe({
+                    className: 'xh-view-manager__manage-dialog__form',
+                    items: [
+                        formField({
+                            field: 'name',
+                            item: textInput()
+                        }),
+                        formField({
+                            field: 'description',
+                            item: textArea({
+                                selectOnFocus: true,
+                                height: 70
+                            }),
+                            readonlyRenderer: v =>
+                                v
+                                    ? v
+                                    : span({
+                                          item: 'None provided',
+                                          className: 'xh-text-color-muted'
+                                      })
+                        }),
+                        formField({
+                            field: 'isGlobal',
+                            label: 'Visibility',
+                            item: select({
+                                options: [
+                                    {value: true, label: startCase(globalDisplayName)},
+                                    {
+                                        value: false,
+                                        label: `Private to ${isOwnView ? 'me' : owner}`
+                                    }
+                                ],
+                                enableFilter: false
+                            }),
+                            omit: !manageGlobal
+                        }),
+                        hbox({
+                            omit: !model.showSaveButton,
+                            style: {margin: '10px 20px'},
+                            items: [
+                                button({
+                                    text: 'Save Changes',
+                                    icon: Icon.check(),
+                                    intent: 'success',
+                                    minimal: false,
+                                    disabled: !formModel.isValid,
+                                    flex: 1,
+                                    onClick: () => model.saveAsync()
+                                }),
+                                hspacer(),
+                                button({
+                                    icon: Icon.reset(),
+                                    tooltip: 'Revert changes',
+                                    minimal: false,
+                                    onClick: () => formModel.reset()
+                                })
+                            ]
+                        }),
+                        filler(),
+                        div({
+                            className: 'xh-view-manager__manage-dialog__metadata',
+                            item: `Last Updated: ${fmtCompactDate(lastUpdated)} (${lastUpdatedBy === XH.getUsername() ? 'you' : lastUpdatedBy})`
+                        })
+                    ]
+                })
+            }),
+            bbar: bbar()
+        });
+    }
+});
+
+const bbar = hoistCmp.factory<EditFormModel>({
+    render({model}) {
+        const {parent} = model;
+        return toolbar(
+            button({
+                text: 'Delete',
+                icon: Icon.delete(),
+                intent: 'danger',
+                disabled: !parent.canDelete,
+                onClick: () => parent.deleteAsync([model.view])
+            }),
+            filler(),
+            button({text: 'Close', onClick: () => parent.close()})
+        );
+    }
+});

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

@@ -0,0 +1,125 @@
+/*
+ * 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 {FormModel} from '@xh/hoist/cmp/form';
+import {fragment, p, span, strong} from '@xh/hoist/cmp/layout';
+import {HoistModel, managed, TaskObserver, XH} from '@xh/hoist/core';
+import {ManageDialogModel} from './ManageDialogModel';
+import {makeObservable} from '@xh/hoist/mobx';
+import {throwIf} from '@xh/hoist/utils/js';
+import {ViewInfo} from '@xh/hoist/cmp/viewmanager';
+import {action, observable} from 'mobx';
+
+/**
+ * Backing model for EditForm
+ */
+export class EditFormModel extends HoistModel {
+    parent: ManageDialogModel;
+
+    @managed formModel: FormModel;
+    @observable.ref view: ViewInfo;
+
+    @action
+    setView(view: ViewInfo) {
+        const {formModel, parent} = this;
+        this.view = view;
+        if (!view) return null;
+        formModel.init(view);
+        formModel.readonly = view.isGlobal && !parent.manageGlobal;
+    }
+
+    get loadTask(): TaskObserver {
+        return this.parent.loadModel;
+    }
+
+    get showSaveButton(): boolean {
+        const {formModel, parent} = this;
+        return formModel.isDirty && !formModel.readonly && !parent.loadModel.isPending;
+    }
+
+    constructor(parent: ManageDialogModel) {
+        super();
+        makeObservable(this);
+        this.formModel = this.createFormModel();
+        this.parent = parent;
+    }
+
+    async saveAsync() {
+        const {parent, view, formModel} = this,
+            {manageGlobal, typeDisplayName, globalDisplayName} = parent,
+            {name, description, isGlobal} = formModel.getData(),
+            isValid = await formModel.validateAsync(),
+            isDirty = formModel.isDirty;
+
+        if (!isValid || !isDirty) return;
+
+        throwIf(
+            (view.isGlobal || isGlobal) && !manageGlobal,
+            `Cannot save changes to ${globalDisplayName} ${typeDisplayName} - missing required permission.`
+        );
+
+        if (isGlobal != view.isGlobal) {
+            const msgs = [];
+            if (isGlobal) {
+                msgs.push(
+                    `This ${typeDisplayName} will become visible to all other ${XH.appName} users.`
+                );
+            } else {
+                msgs.push(
+                    span(
+                        `The selected ${typeDisplayName} will revert to being private `,
+                        strong('It will no longer be available to ALL users.')
+                    )
+                );
+                if (view.owner != XH.getUsername()) {
+                    msgs.push(
+                        `The selected ${typeDisplayName} will revert to being private to its owner (${view.owner}).`,
+                        `Note that you will no longer have access to this ${typeDisplayName} and will not be able to undo this change.`
+                    );
+                }
+            }
+
+            msgs.push('Are you sure you want to proceed?');
+
+            const confirmed = await XH.confirm({
+                message: fragment(msgs.map(m => p(m))),
+                confirmProps: {
+                    text: 'Yes, update visibility',
+                    outlined: true,
+                    autoFocus: false,
+                    intent: 'primary'
+                }
+            });
+            if (!confirmed) return;
+        }
+
+        await parent.updateAsync(view, name, description, isGlobal);
+    }
+
+    //------------------------
+    // Implementation
+    //------------------------
+    private createFormModel(): FormModel {
+        return new FormModel({
+            fields: [
+                {
+                    name: 'name',
+                    rules: [
+                        async ({value}) => {
+                            return this.parent.viewManagerModel.validateViewNameAsync(
+                                value,
+                                this.view
+                            );
+                        }
+                    ]
+                },
+                {name: 'description'},
+                {name: 'isGlobal', displayName: 'Global'}
+            ]
+        });
+    }
+}

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

@@ -0,0 +1,98 @@
+/*
+ * 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 {tabContainer} from '@xh/hoist/cmp/tab';
+import {filler, hframe, placeholder} 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 {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 {pluralize} from '@xh/hoist/utils/js';
+import {capitalize} from 'lodash';
+
+/**
+ * Default management dialog for ViewManager
+ */
+export const manageDialog = hoistCmp.factory({
+    displayName: 'ManageDialog',
+    className: 'xh-view-manager__manage-dialog',
+    model: creates(ManageDialogModel),
+
+    render({model, className}) {
+        const {typeDisplayName, updateTask, loadTask, selectedViews} = model;
+        const count = selectedViews.length;
+        return dialog({
+            title: `Manage ${capitalize(pluralize(typeDisplayName))}`,
+            icon: Icon.gear(),
+            className,
+            isOpen: true,
+            style: {width: '800px', maxWidth: '90vm', minHeight: '430px'},
+            canOutsideClickClose: false,
+            onClose: () => model.close(),
+            item: panel({
+                item: hframe(
+                    viewPanel(),
+                    count == 0 ? placeholderPanel() : count > 1 ? multiSelectionPanel() : editForm()
+                ),
+                mask: [updateTask, loadTask]
+            })
+        });
+    }
+});
+
+const viewPanel = hoistCmp.factory<ManageDialogModel>({
+    render({model}) {
+        return panel({
+            modelConfig: {defaultSize: 350, side: 'left', collapsible: false},
+            item: tabContainer(),
+            bbar: [
+                storeFilterField({
+                    autoApply: false,
+                    includeFields: ['name'],
+                    onFilterChange: f => (model.filter = f)
+                })
+            ]
+        });
+    }
+});
+
+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()}))
+        });
+    }
+});
+
+const multiSelectionPanel = 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()})
+            )
+        });
+    }
+});