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

package/core/persist/viewmanager/impl/ManageDialogModel.ts

@@ -1,276 +0,0 @@
-import {FormModel} from '@xh/hoist/cmp/form';
-import {GridAutosizeMode, GridModel} from '@xh/hoist/cmp/grid';
-import {fragment, p} from '@xh/hoist/cmp/layout';
-import {HoistModel, lookup, managed, TaskObserver, XH} from '@xh/hoist/core';
-import {lengthIs, required} from '@xh/hoist/data';
-import {Icon} from '@xh/hoist/icon';
-import {makeObservable} from '@xh/hoist/mobx';
-import {pluralize, throwIf} from '@xh/hoist/utils/js';
-import {ViewManagerModel} from '../ViewManagerModel';
-
-export class ManageDialogModel extends HoistModel {
-    @lookup(() => ViewManagerModel)
-    private viewManagerModel: ViewManagerModel;
-
-    @managed gridModel: GridModel;
-    @managed formModel: FormModel;
-
-    readonly saveTask = TaskObserver.trackLast();
-    readonly deleteTask = TaskObserver.trackLast();
-
-    get selectedId(): string {
-        return this.gridModel.selectedId as string;
-    }
-
-    get selectedIds(): string[] {
-        return this.gridModel.selectedIds as string[];
-    }
-
-    get hasMultiSelection(): boolean {
-        return this.selectedIds.length > 1;
-    }
-
-    get selIsShared(): boolean {
-        return this.gridModel.selectedRecords.some(rec => rec.data.isShared);
-    }
-
-    get canDelete(): boolean {
-        const {viewManagerModel, selIsShared, enableSharing, selectedIds} = this,
-            {views, enableDefault} = viewManagerModel;
-
-        // Can't delete shared views without manager role.
-        if (selIsShared && !enableSharing) return false;
-
-        // Can't delete all the views, unless default mode is enabled.
-        return enableDefault || views.length - selectedIds.length > 0;
-    }
-
-    get canEdit(): boolean {
-        return this.enableSharing || !this.selIsShared;
-    }
-
-    get enableSharing(): boolean {
-        return this.viewManagerModel.enableSharing;
-    }
-
-    get showSaveButton(): boolean {
-        const {formModel, viewManagerModel} = this;
-        return formModel.isDirty && !formModel.readonly && !viewManagerModel.loadModel.isPending;
-    }
-
-    get displayName(): string {
-        return this.viewManagerModel.displayName;
-    }
-
-    get enableFavorites(): boolean {
-        return this.viewManagerModel.enableFavorites;
-    }
-
-    constructor() {
-        super();
-        makeObservable(this);
-    }
-
-    override onLinked() {
-        super.onLinked();
-
-        this.gridModel = this.createGridModel();
-        this.formModel = this.createFormModel();
-
-        this.addReaction(
-            {
-                track: () => this.viewManagerModel.views,
-                run: () => this.refreshAsync()
-            },
-            {
-                track: () => this.gridModel.selectedRecord,
-                run: record => {
-                    if (record) {
-                        this.formModel.readonly = !this.canEdit;
-                        this.formModel.init(record.data);
-                    }
-                }
-            }
-        );
-    }
-
-    override async doLoadAsync() {
-        this.gridModel.loadData(this.viewManagerModel.views);
-        await this.ensureGridHasSelection();
-    }
-
-    async saveAsync() {
-        return this.doSaveAsync().linkTo(this.saveTask).catchDefault();
-    }
-
-    async deleteAsync() {
-        return this.doDeleteAsync().linkTo(this.deleteTask).catchDefault();
-    }
-
-    //------------------------
-    // Implementation
-    //------------------------
-    private async doSaveAsync() {
-        const {formModel, viewManagerModel, enableSharing, selectedId, gridModel, displayName} =
-                this,
-            {isDirty} = formModel,
-            {name, description, isShared} = formModel.getData(),
-            isValid = await formModel.validateAsync(),
-            {token, owner} = gridModel.selectedRecord.data,
-            isOwnView = owner === XH.getUsername();
-
-        if (!isValid || !selectedId || !isDirty) return;
-
-        // Additional sanity-check before POSTing an update - non-admins should never be modifying global views.
-        throwIf(
-            isShared && !enableSharing,
-            `Cannot save changes to shared ${displayName} - missing required permission.`
-        );
-
-        if (formModel.getField('isShared').isDirty) {
-            const confirmMsgs = [];
-            if (isShared) {
-                confirmMsgs.push(
-                    `This ${displayName} will become visible to all other ${XH.appName} users.`
-                );
-            } else if (isOwnView) {
-                confirmMsgs.push(
-                    `The selected ${displayName} will revert to being private to you. It will no longer be available to other users.`
-                );
-            } else {
-                confirmMsgs.push(
-                    `The selected ${displayName} will revert to being private to its owner (${owner}).`,
-                    `Note that you will no longer have access to this view, meaning you will not be able to undo this change.`
-                );
-            }
-
-            confirmMsgs.push('Are you sure you want to proceed?');
-
-            const confirmed = await XH.confirm({
-                message: fragment(confirmMsgs.map(msg => p(msg))),
-                confirmProps: {
-                    text: 'Yes, update visibility',
-                    outlined: true,
-                    autoFocus: false,
-                    intent: 'primary'
-                }
-            });
-
-            if (!confirmed) return;
-        }
-
-        await XH.jsonBlobService.updateAsync(token, {
-            name,
-            description,
-            acl: isShared ? '*' : null
-        });
-
-        await viewManagerModel.refreshAsync();
-    }
-
-    private async doDeleteAsync() {
-        const {viewManagerModel, gridModel, displayName, selectedIds, hasMultiSelection} = this,
-            count = selectedIds.length;
-        if (!count) return;
-
-        const confirmStr = hasMultiSelection
-                ? pluralize(displayName, count, true)
-                : `"${gridModel.selectedRecord.data.name}"`,
-            confirmed = await XH.confirm({
-                message: `Are you sure you want to delete ${confirmStr}?`,
-                confirmProps: {
-                    text: `Yes, delete ${pluralize(displayName, count)}`,
-                    outlined: true,
-                    autoFocus: false,
-                    intent: 'danger'
-                }
-            });
-        if (!confirmed) return;
-
-        for (const token of selectedIds) {
-            viewManagerModel.removeFavorite(token);
-            await XH.jsonBlobService.archiveAsync(token);
-        }
-
-        await viewManagerModel.refreshAsync();
-    }
-
-    private async ensureGridHasSelection() {
-        const {gridModel, viewManagerModel} = this,
-            {selectedToken} = viewManagerModel;
-
-        if (!gridModel.hasSelection) {
-            selectedToken
-                ? await gridModel.selectAsync(selectedToken)
-                : await gridModel.preSelectFirstAsync();
-        }
-    }
-
-    private createGridModel(): GridModel {
-        return new GridModel({
-            emptyText: `No saved ${pluralize(this.displayName)} found...`,
-            sortBy: 'name',
-            groupBy: 'group',
-            hideHeaders: true,
-            showGroupRowCounts: false,
-            selModel: 'multiple',
-            contextMenu: null,
-            sizingMode: 'standard',
-            store: {
-                idSpec: 'token',
-                fields: [
-                    {name: 'token', type: 'string'},
-                    {name: 'name', type: 'string'},
-                    {name: 'description', type: 'string'},
-                    {name: 'isShared', type: 'bool'},
-                    {name: 'isFavorite', type: 'bool'},
-                    {name: 'acl', type: 'json'},
-                    {name: 'meta', type: 'json'},
-                    {name: 'dateCreated', type: 'date'},
-                    {name: 'createdBy', type: 'string'},
-                    {name: 'owner', type: 'string'},
-                    {name: 'lastUpdatedBy', type: 'string'},
-                    {name: 'lastUpdated', type: 'date'}
-                ]
-            },
-            autosizeOptions: {mode: GridAutosizeMode.DISABLED},
-            columns: [
-                {field: 'name', flex: true},
-                {
-                    field: 'isFavorite',
-                    omit: !this.enableFavorites,
-                    width: 40,
-                    align: 'center',
-                    headerName: Icon.favorite(),
-                    highlightOnChange: true,
-                    renderer: v => {
-                        return Icon.favorite({
-                            prefix: v ? 'fas' : 'fal',
-                            className: v ? 'xh-yellow' : 'xh-text-color-muted'
-                        });
-                    }
-                },
-                {field: 'group', hidden: true}
-            ],
-            onCellClicked: ({colDef, data: record}) => {
-                if (colDef.colId === 'isFavorite') {
-                    this.viewManagerModel.toggleFavorite(record.id);
-                }
-            }
-        });
-    }
-
-    private createFormModel(): FormModel {
-        return new FormModel({
-            fields: [
-                {name: 'name', rules: [required, lengthIs({max: 255})]},
-                {name: 'description'},
-                {name: 'isShared', displayName: 'Shared'},
-                {name: 'owner', readonly: true},
-                {name: 'dateCreated', displayName: 'Created', readonly: true},
-                {name: 'lastUpdated', displayName: 'Updated', readonly: true},
-                {name: 'lastUpdatedBy', displayName: 'Updated By', readonly: true}
-            ]
-        });
-    }
-}

package/core/persist/viewmanager/impl/SaveDialogModel.ts

@@ -1,112 +0,0 @@
-import {FormModel} from '@xh/hoist/cmp/form';
-import {HoistModel, managed, TaskObserver, XH} from '@xh/hoist/core';
-import {ViewManagerModel} from '@xh/hoist/core/persist/viewmanager';
-import {lengthIs, required} from '@xh/hoist/data';
-import {makeObservable} from '@xh/hoist/mobx';
-import {JsonBlob} from '@xh/hoist/svc';
-import {action, observable} from 'mobx';
-import {View} from '../Types';
-
-export class SaveDialogModel extends HoistModel {
-    private readonly viewManagerModel: ViewManagerModel;
-
-    @managed readonly formModel: FormModel;
-    readonly saveTask = TaskObserver.trackLast();
-
-    @observable viewStub: Partial<View>;
-    @observable isOpen: boolean = false;
-
-    private resolveOpen: (value: JsonBlob) => void;
-    private invalidNames: string[] = [];
-
-    get type(): string {
-        return this.viewManagerModel.viewType;
-    }
-
-    get DisplayName(): string {
-        return this.viewManagerModel.DisplayName;
-    }
-
-    constructor(viewManagerModel: ViewManagerModel) {
-        super();
-        makeObservable(this);
-        this.viewManagerModel = viewManagerModel;
-        this.formModel = this.createFormModel();
-    }
-
-    @action
-    openAsync(viewStub: Partial<View>, invalidNames: string[]): Promise<JsonBlob> {
-        this.viewStub = viewStub;
-        this.invalidNames = invalidNames;
-
-        this.formModel.init({
-            name: viewStub.name ?? '',
-            description: viewStub.description
-        });
-
-        this.isOpen = true;
-
-        return new Promise(resolve => {
-            this.resolveOpen = resolve;
-        });
-    }
-
-    cancel() {
-        this.close();
-        this.resolveOpen(null);
-    }
-
-    async saveAsAsync() {
-        return this.doSaveAsAsync().linkTo(this.saveTask);
-    }
-
-    //------------------------
-    // Implementation
-    //------------------------
-    private createFormModel(): FormModel {
-        return new FormModel({
-            fields: [
-                {
-                    name: 'name',
-                    rules: [
-                        required,
-                        lengthIs({max: 255}),
-                        ({value}) => {
-                            if (this.invalidNames.includes(value)) {
-                                return `An entry with name "${value}" already exists`;
-                            }
-                        }
-                    ]
-                },
-                {name: 'description'}
-            ]
-        });
-    }
-
-    private async doSaveAsAsync() {
-        const {formModel, viewStub, type} = this,
-            {name, description} = formModel.getData(),
-            isValid = await formModel.validateAsync();
-
-        if (!isValid) return;
-
-        try {
-            const newObj = await XH.jsonBlobService.createAsync({
-                type,
-                name,
-                description,
-                value: viewStub.value
-            });
-            this.close();
-            this.resolveOpen(newObj);
-        } catch (e) {
-            XH.handleException(e);
-        }
-    }
-
-    @action
-    private close() {
-        this.isOpen = false;
-        this.formModel.init();
-    }
-}

package/core/persist/viewmanager/index.ts

@@ -1,2 +0,0 @@
-export * from './ViewManagerModel';
-export * from './Types';

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

@@ -1,197 +0,0 @@
-import {form} from '@xh/hoist/cmp/form';
-import {grid} from '@xh/hoist/cmp/grid';
-import {div, filler, hbox, hframe, hspacer, placeholder, span, vframe} from '@xh/hoist/cmp/layout';
-import {storeFilterField} from '@xh/hoist/cmp/store';
-import {creates, hoistCmp, HoistProps, XH} from '@xh/hoist/core';
-import {ManageDialogModel} from '@xh/hoist/core/persist/viewmanager/impl/ManageDialogModel';
-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 {dialog} from '@xh/hoist/kit/blueprint';
-import {pluralize} from '@xh/hoist/utils/js';
-import {capitalize} from 'lodash';
-
-export interface ManageDialogProps extends HoistProps<ManageDialogModel> {
-    onClose: () => void;
-}
-
-export const manageDialog = hoistCmp.factory<ManageDialogProps>({
-    displayName: 'ManageDialog',
-    className: 'xh-view-manager__manage-dialog',
-    model: creates(ManageDialogModel),
-
-    render({model, className, onClose}) {
-        const {displayName, saveTask, deleteTask} = model;
-        return dialog({
-            title: `Manage ${capitalize(pluralize(displayName))}`,
-            icon: Icon.gear(),
-            className,
-            isOpen: true,
-            style: {width: '800px', maxWidth: '90vm', minHeight: '430px'},
-            canOutsideClickClose: false,
-            onClose,
-            item: panel({
-                item: hframe(gridPanel(), formPanel({onClose})),
-                mask: [saveTask, deleteTask]
-            })
-        });
-    }
-});
-
-const gridPanel = hoistCmp.factory({
-    render() {
-        return panel({
-            modelConfig: {defaultSize: 350, side: 'left', collapsible: false},
-            item: grid(),
-            bbar: [storeFilterField()]
-        });
-    }
-});
-
-const formPanel = hoistCmp.factory<ManageDialogProps>({
-    render({model, onClose}) {
-        const {displayName, formModel} = model,
-            {values} = formModel,
-            isOwnView = values.owner === XH.getUsername();
-
-        if (model.hasMultiSelection) {
-            return multiSelectionPanel({onClose});
-        }
-
-        if (!model.selectedId)
-            return panel({
-                item: placeholder(Icon.gears(), `Select a ${displayName}`),
-                bbar: bbar({onClose})
-            });
-
-        return panel({
-            item: form({
-                fieldDefaults: {
-                    commitOnChange: true
-                },
-                item: vframe({
-                    className: 'xh-view-manager__manage-dialog__form',
-                    items: [
-                        formField({
-                            field: 'name',
-                            item: textInput(),
-                            info: model.canEdit
-                                ? `Organize your ${pluralize(displayName)} into folders by including the "\\" character in their names - e.g. "My folder\\My ${displayName}".`
-                                : null
-                        }),
-                        formField({
-                            field: 'description',
-                            item: textArea({
-                                selectOnFocus: true,
-                                height: 70
-                            }),
-                            readonlyRenderer: v =>
-                                v
-                                    ? v
-                                    : span({
-                                          item: 'None provided',
-                                          className: 'xh-text-color-muted'
-                                      })
-                        }),
-                        formField({
-                            field: 'isShared',
-                            label: 'Visibility',
-                            item: select({
-                                options: [
-                                    {value: true, label: 'Shared with all users'},
-                                    {
-                                        value: false,
-                                        label: `Private to ${isOwnView ? 'me' : values.owner}`
-                                    }
-                                ],
-                                enableFilter: false
-                            }),
-                            omit: !model.enableSharing
-                        }),
-                        hbox({
-                            omit: !model.showSaveButton,
-                            style: {margin: '10px 20px'},
-                            items: [
-                                button({
-                                    text: 'Save Changes',
-                                    icon: Icon.check(),
-                                    intent: 'success',
-                                    minimal: false,
-                                    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',
-                            items: [
-                                `Created ${fmtCompactDate(values.dateCreated)} by ${
-                                    values.owner === XH.getUsername() ? 'you' : values.owner
-                                }. `,
-                                `Updated ${fmtCompactDate(values.lastUpdated)} by ${
-                                    values.lastUpdatedBy === XH.getUsername()
-                                        ? 'you'
-                                        : values.lastUpdatedBy
-                                }.`
-                            ]
-                        })
-                    ]
-                })
-            }),
-            bbar: bbar({onClose})
-        });
-    }
-});
-
-const multiSelectionPanel = hoistCmp.factory<ManageDialogProps>({
-    render({model, onClose}) {
-        const {selectedIds} = model;
-        return panel({
-            item: vframe({
-                alignItems: 'center',
-                justifyContent: 'center',
-                item: button({
-                    text: `Delete ${selectedIds.length} ${pluralize(model.displayName)}`,
-                    icon: Icon.delete(),
-                    intent: 'danger',
-                    outlined: true,
-                    disabled: !model.canDelete,
-                    onClick: () => model.deleteAsync()
-                })
-            }),
-            bbar: bbar({onClose})
-        });
-    }
-});
-
-const bbar = hoistCmp.factory<ManageDialogProps>({
-    render({model, onClose}) {
-        return toolbar(
-            button({
-                text: 'Delete',
-                icon: Icon.delete(),
-                intent: 'danger',
-                disabled: !model.canDelete,
-                omit: model.hasMultiSelection,
-                onClick: () => model.deleteAsync()
-            }),
-            filler(),
-            button({
-                text: 'Close',
-                onClick: onClose
-            })
-        );
-    }
-});