Bulk role category update (#3730)

Ryanseanlee · web-flow · commit c420f0854693 · 2024-07-26T16:17:20.000-04:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@
   Use this prop to customize markdown rendering.
 * New `mergeDeep` method provided in `@xh/hoist/utils/js` as an alternative to `lodash.merge`,
   without lodash's surprising deep-merging of array-based properties.
+* Enhanced Roles Admin UI to support bulk category reassignment.
 
 ### 🐞 Bug Fixes
 
diff --git a/admin/regroup/RegroupDialog.ts b/admin/regroup/RegroupDialog.ts
@@ -7,10 +7,10 @@
 import {filler} from '@xh/hoist/cmp/layout';
 import {hoistCmp, uses} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
+import {select} from '@xh/hoist/desktop/cmp/input';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
 import {dialog, dialogBody} from '@xh/hoist/kit/blueprint';
-import {select} from '@xh/hoist/desktop/cmp/input';
 
 import {RegroupDialogModel} from './RegroupDialogModel';
 
@@ -23,7 +23,7 @@ export const regroupDialog = hoistCmp.factory({
 
         return dialog({
             title: 'Change Group',
-            icon: Icon.grip(),
+            icon: Icon.folder(),
             style: {width: 300},
             isOpen: true,
             isCloseButtonShown: false,
diff --git a/admin/regroup/RegroupDialogModel.ts b/admin/regroup/RegroupDialogModel.ts
@@ -4,38 +4,38 @@
  *
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
-import {uniq} from 'lodash';
 import {HoistModel, XH} from '@xh/hoist/core';
-import {action, bindable, observable, makeObservable} from '@xh/hoist/mobx';
 import {Icon} from '@xh/hoist/icon/Icon';
+import {action, bindable, makeObservable, observable} from '@xh/hoist/mobx';
+import {uniq} from 'lodash';
 
 export class RegroupDialogModel extends HoistModel {
-    _parent;
+    private parent;
 
     @bindable groupName = null;
     @observable isOpen = false;
 
     regroupAction = {
         text: 'Change Group',
-        icon: Icon.grip(),
+        icon: Icon.folder(),
         recordsRequired: true,
         actionFn: () => this.open(),
-        displayFn: () => ({hidden: this._parent.gridModel.readonly})
+        displayFn: () => ({hidden: this.parent.gridModel.readonly})
     };
 
     get options() {
-        return uniq(this._parent.gridModel.store.allRecords.map(it => it.data.groupName)).sort();
+        return uniq(this.parent.gridModel.store.allRecords.map(it => it.data.groupName)).sort();
     }
 
     constructor(parent) {
         super();
         makeObservable(this);
-        this._parent = parent;
+        this.parent = parent;
     }
 
     async saveAsync() {
-        const {_parent, groupName} = this,
-            {selectedRecords, store} = _parent.gridModel,
+        const {parent, groupName} = this,
+            {selectedRecords, store} = parent.gridModel,
             ids = selectedRecords.map(it => it.id),
             resp = await store.bulkUpdateRecordsAsync(ids, {groupName}),
             failuresPresent = resp.fail > 0,
diff --git a/admin/tabs/userData/roles/RoleModel.ts b/admin/tabs/userData/roles/RoleModel.ts
@@ -4,6 +4,7 @@
  *
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
+import {RecategorizeDialogModel} from '@xh/hoist/admin/tabs/userData/roles/recategorize/RecategorizeDialogModel';
 import {FilterChooserModel} from '@xh/hoist/cmp/filter';
 import {GridModel, tagsRenderer, TreeStyle} from '@xh/hoist/cmp/grid';
 import * as Col from '@xh/hoist/cmp/grid/columns';
@@ -34,6 +35,7 @@ export class RoleModel extends HoistModel {
     @managed gridModel: GridModel;
     @managed filterChooserModel: FilterChooserModel;
     @managed readonly roleEditorModel = new RoleEditorModel(this);
+    @managed recategorizeDialogModel = new RecategorizeDialogModel(this);
 
     @observable.ref allRoles: HoistRole[] = [];
     @observable.ref moduleConfig: RoleModuleConfig;
@@ -75,7 +77,9 @@ export class RoleModel extends HoistModel {
             const {data} = await XH.fetchJson({url: 'roleAdmin/list', loadSpec});
             if (loadSpec.isStale) return;
 
-            runInAction(() => (this.allRoles = this.processRolesFromServer(data)));
+            runInAction(() => {
+                this.allRoles = this.processRolesFromServer(data);
+            });
             this.displayRoles();
             await this.gridModel.preSelectFirstAsync();
         } catch (e) {
@@ -158,7 +162,7 @@ export class RoleModel extends HoistModel {
                 disabled: !record || record.data.isGroupRow
             }),
             actionFn: ({record}) => this.editAsync(record.data as HoistRole),
-            recordsRequired: true
+            recordsRequired: 1
         };
     }
 
@@ -170,7 +174,7 @@ export class RoleModel extends HoistModel {
                 disabled: !record || record.data.isGroupRow
             }),
             actionFn: ({record}) => this.createAsync(record.data as HoistRole),
-            recordsRequired: true
+            recordsRequired: 1
         };
     }
 
@@ -186,7 +190,7 @@ export class RoleModel extends HoistModel {
                 this.deleteAsync(record.data as HoistRole)
                     .catchDefault()
                     .linkTo(this.loadModel),
-            recordsRequired: true
+            recordsRequired: 1
         };
     }
 
@@ -269,6 +273,7 @@ export class RoleModel extends HoistModel {
             treeMode: true,
             treeStyle: TreeStyle.HIGHLIGHTS_AND_BORDERS,
             autosizeOptions: {mode: 'managed'},
+            selModel: 'multiple',
             emptyText: 'No roles found.',
             colChooserModel: true,
             sortBy: 'name',
@@ -334,17 +339,7 @@ export class RoleModel extends HoistModel {
                 {field: {name: 'lastUpdatedBy', type: 'string'}, hidden: true},
                 {field: {name: 'notes', type: 'string'}, filterable: false, flex: 1}
             ],
-            contextMenu: this.readonly
-                ? [this.groupByAction(), ...GridModel.defaultContextMenu]
-                : [
-                      this.addAction(),
-                      this.editAction(),
-                      this.cloneAction(),
-                      this.deleteAction(),
-                      '-',
-                      this.groupByAction(),
-                      ...GridModel.defaultContextMenu
-                  ],
+            contextMenu: () => this.getContextMenuItems(),
             onRowDoubleClicked: ({data: record}) => {
                 if (record && !record.data.isGroupRow) {
                     this.editAsync(record.data as HoistRole);
@@ -353,6 +348,21 @@ export class RoleModel extends HoistModel {
         });
     }
 
+    private getContextMenuItems() {
+        return this.readonly
+            ? [this.groupByAction(), ...GridModel.defaultContextMenu]
+            : [
+                  this.addAction(),
+                  this.editAction(),
+                  this.cloneAction(),
+                  this.deleteAction(),
+                  this.recategorizeDialogModel.recategorizeAction(),
+                  '-',
+                  this.groupByAction(),
+                  ...GridModel.defaultContextMenu
+              ];
+    }
+
     private createFilterChooserModel(): FilterChooserModel {
         const config = this.moduleConfig;
         return new FilterChooserModel({
diff --git a/admin/tabs/userData/roles/RolePanel.ts b/admin/tabs/userData/roles/RolePanel.ts
@@ -4,6 +4,7 @@
  *
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
+import {recategorizeDialog} from '@xh/hoist/admin/tabs/userData/roles/recategorize/RecategorizeDialog';
 import {grid} from '@xh/hoist/cmp/grid';
 import {fragment, hframe, vframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
@@ -48,7 +49,8 @@ export const rolePanel = hoistCmp.factory({
                 ],
                 item: hframe(vframe(grid(), roleGraph()), detailsPanel())
             }),
-            roleEditor()
+            roleEditor(),
+            recategorizeDialog()
         );
     }
 });
diff --git a/admin/tabs/userData/roles/recategorize/RecategorizeDialog.ts b/admin/tabs/userData/roles/recategorize/RecategorizeDialog.ts
@@ -0,0 +1,59 @@
+/*
+ * 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 {RecategorizeDialogModel} from '@xh/hoist/admin/tabs/userData/roles/recategorize/RecategorizeDialogModel';
+import {filler} from '@xh/hoist/cmp/layout';
+import {hoistCmp, uses} from '@xh/hoist/core';
+import {button} from '@xh/hoist/desktop/cmp/button';
+import {select} from '@xh/hoist/desktop/cmp/input';
+import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
+import {Icon} from '@xh/hoist/icon';
+import {dialog, dialogBody} from '@xh/hoist/kit/blueprint';
+
+export const recategorizeDialog = hoistCmp.factory({
+    model: uses(RecategorizeDialogModel),
+
+    render({model}) {
+        const {isOpen} = model;
+        if (!isOpen) return null;
+
+        return dialog({
+            title: `Change Category (${model.selectedRecords.length} roles)`,
+            icon: Icon.folder(),
+            style: {width: 300},
+            isOpen: true,
+            isCloseButtonShown: false,
+            items: [
+                dialogBody(
+                    select({
+                        bind: 'categoryName',
+                        enableCreate: true,
+                        options: model.options,
+                        width: 260
+                    })
+                ),
+                tbar()
+            ]
+        });
+    }
+});
+
+const tbar = hoistCmp.factory<RecategorizeDialogModel>(({model}) => {
+    return toolbar(
+        filler(),
+        button({
+            text: 'Cancel',
+            onClick: () => model.close()
+        }),
+        button({
+            text: 'Save',
+            icon: Icon.check(),
+            intent: 'success',
+            disabled: model.categoryName == null,
+            onClick: () => model.saveAsync()
+        })
+    );
+});
diff --git a/admin/tabs/userData/roles/recategorize/RecategorizeDialogModel.ts b/admin/tabs/userData/roles/recategorize/RecategorizeDialogModel.ts
@@ -0,0 +1,83 @@
+/*
+ * 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 {RoleModel} from '@xh/hoist/admin/tabs/userData/roles/RoleModel';
+import {HoistModel, XH} from '@xh/hoist/core';
+import {StoreRecord} from '@xh/hoist/data';
+import {Icon} from '@xh/hoist/icon/Icon';
+import {action, bindable, makeObservable, observable} from '@xh/hoist/mobx';
+import {compact, every, filter, map, uniq} from 'lodash';
+
+export class RecategorizeDialogModel extends HoistModel {
+    private parent: RoleModel;
+    selectedRecords: StoreRecord[];
+
+    @bindable categoryName = null;
+    @observable isOpen = false;
+
+    recategorizeAction() {
+        return {
+            text: 'Change Category',
+            icon: Icon.folder(),
+            recordsRequired: true,
+            actionFn: ({selectedRecords}) => this.open(selectedRecords),
+            displayFn: ({selectedRecords}) => {
+                return {
+                    hidden: this.parent.readonly,
+                    disabled: every(selectedRecords, it => it.data?.isGroupRow)
+                };
+            }
+        };
+    }
+
+    get options() {
+        return [
+            ...compact(uniq(this.parent.allRoles.map(it => it.category))).sort(),
+            {value: '_CLEAR_ROLES_', label: '[Clear Existing Category]'}
+        ];
+    }
+
+    constructor(parent) {
+        super();
+        makeObservable(this);
+        this.parent = parent;
+    }
+
+    async saveAsync() {
+        if (this.parent.readonly) return;
+        const roleSpec = filter(
+            this.selectedRecords.map(it => it.data),
+            it => !it.isGroupRow
+        );
+        const roles: string[] = map(roleSpec, it => it.name);
+        await XH.fetchService
+            .postJson({
+                url: 'roleAdmin/bulkCategoryUpdate',
+                body: {
+                    roles,
+                    category: this.categoryName === '_CLEAR_ROLES_' ? null : this.categoryName
+                }
+            })
+            .catchDefault();
+        await this.parent.refreshAsync();
+        this.close();
+    }
+
+    //-----------------
+    // Actions
+    //-----------------
+    @action
+    close() {
+        this.categoryName = null;
+        this.isOpen = false;
+    }
+
+    @action
+    open(selectedRecords) {
+        this.selectedRecords = selectedRecords;
+        this.isOpen = true;
+    }
+}
