@things-factory/organization 6.2.103 → 6.2.111

package/dist-client/pages/department/department-list-page.d.ts

@@ -1,9 +1,9 @@
 import '@operato/data-tree';
 import '@operato/context/ox-context-page-toolbar.js';
 import { PageView } from '@operato/shell';
+import { FetchOption } from '@operato/data-grist';
 import { DepartmentImporter } from './department-importer';
 import { Department } from '../../types/department';
-import { DepartmentView } from '../../component/department-view';
 declare const DepartmentListPage_base: (new (...args: any[]) => {
     _storeUnsubscribe: import("redux").Unsubscribe;
     connectedCallback(): void;
@@ -18,34 +18,26 @@ export declare class DepartmentListPage extends DepartmentListPage_base {
     };
     root?: Department;
     selected?: Department;
-    departmentView: DepartmentView;
+    private grist;
     get context(): {
         title: string;
         help: string;
-        actions: ({
+        actions: {
             icon: string;
             title: string;
-            action: () => void;
-        } | null)[];
-        exportable: {
-            name: string;
-            data: () => Promise<void>;
-        };
-        importable: {
-            handler: (records: any) => Promise<void>;
-        };
+            action: () => Promise<void>;
+        }[];
         toolbar: boolean;
     };
+    gristConfig: any;
     render(): import("lit-html").TemplateResult<1>;
-    onSelect(e: CustomEvent): void;
-    reset(): void;
-    create(): Promise<void>;
-    save(): Promise<void>;
-    delete(): Promise<void>;
+    fetchHandler({ page, limit, sortings, filters }: FetchOption): Promise<{
+        total: any;
+        records: any;
+    }>;
     pageInitialized(lifecycle: any): Promise<void>;
     pageUpdated(changes: any, lifecycle: any): Promise<void>;
-    fetch(): Promise<void>;
-    exportHandler(): Promise<void>;
-    importHandler(records: any): Promise<void>;
+    delete(): Promise<void>;
+    save(): Promise<void>;
 }
 export {};

package/dist-client/pages/department/department-list-page.js

@@ -4,17 +4,20 @@ import '@operato/context/ox-context-page-toolbar.js';
 import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
 import { PageView, store } from '@operato/shell';
 import { css, html } from 'lit';
-import { customElement, query, state } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { client } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
+import { isMobileDevice } from '@operato/utils';
+import { DataGrist } from '@operato/data-grist';
+import { notify } from '@operato/layout';
+import { OxPrompt } from '@operato/popup/ox-prompt.js';
 import { connect } from 'pwa-helpers/connect-mixin';
 import gql from 'graphql-tag';
 import { DepartmentImporter } from './department-importer';
 import { Department } from '../../types/department';
-import { DepartmentView } from '../../component/department-view';
 const departmentFragment = gql `
-  fragment Department_department on Department {
+  fragment departmentFragment on Department {
     id
     controlNo
     name
@@ -28,7 +31,6 @@ const departmentFragment = gql `
       email
     }
     active
-    state
     picture
 
     updater {
@@ -49,22 +51,20 @@ let DepartmentListPage = class DepartmentListPage extends connect(store)(localiz
             title: i18next.t('title.department list'),
             help: 'organization/department',
             actions: [
+                // {
+                //   icon: 'add',
+                //   title: i18next.t('button.add-child-dept'),
+                //   action: () => this.grist.addChildNodes()
+                // },
+                // {
+                //   icon: 'add',
+                //   title: i18next.t('button.add-sibling-dept'),
+                //   action: () => this.grist.addSiblingNodes()
+                // },
                 {
-                    icon: 'add',
-                    title: i18next.t('button.add'),
-                    action: this.create.bind(this)
-                },
-                this.selected
-                    ? {
-                        icon: 'save',
-                        title: i18next.t('button.save'),
-                        action: this.save.bind(this)
-                    }
-                    : null,
-                {
-                    icon: 'refresh',
-                    title: i18next.t('button.reset'),
-                    action: this.reset.bind(this)
+                    icon: 'save',
+                    title: i18next.t('button.save'),
+                    action: this.save.bind(this)
                 },
                 {
                     icon: 'delete',
@@ -72,212 +72,334 @@ let DepartmentListPage = class DepartmentListPage extends connect(store)(localiz
                     action: this.delete.bind(this)
                 }
             ].filter(Boolean),
-            exportable: {
-                name: i18next.t('title.department list'),
-                data: this.exportHandler.bind(this)
-            },
-            importable: {
-                handler: this.importHandler.bind(this)
-            },
             toolbar: false
         };
     }
     render() {
+        const mode = isMobileDevice() ? 'CARD' : 'GRID';
         return html `
-      <div class="header">
-        <div class="title">
-          <mwc-icon>summarize</mwc-icon>
-          ${i18next.t('title.department list')}
-        </div>
-
-        <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
-      </div>
+      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
+        <div slot="headroom" class="header">
+          <div class="title">
+            <mwc-icon>summarize</mwc-icon>
+            ${i18next.t('title.department list')}
+          </div>
 
-      <ox-tree-vertical
-        .data=${this.root}
-        .selected=${this.selected}
-        @select=${this.onSelect.bind(this)}
-        label-property="name"
-      ></ox-tree-vertical>
+          <div class="filters">
+            <ox-filters-form class="filter" autofocus without-search></ox-filters-form>
+          </div>
 
-      <department-view .department=${this.selected}></department-view>
+          <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
+        </div>
+      </ox-grist>
     `;
     }
-    onSelect(e) {
-        this.selected = e.detail;
-        this.updateContext();
-    }
-    reset() {
-        this.departmentView.department = {};
-    }
-    async create() {
-        const { id: parentId } = this.selected || {};
-        const { controlNo, name, description, state, picture, active, manager } = this.departmentView.department;
-        var department = {
-            controlNo,
-            name,
-            description,
-            state,
-            manager,
-            active
-        };
-        if (picture instanceof File) {
-            department.picture = picture;
-        }
-        if (parentId) {
-            department.parent = { id: parentId };
-        }
-        const response = await client.mutate({
-            mutation: gql `
-        mutation ($department: NewDepartment!) {
-          createDepartment(department: $department) {
-            ...Department_department
+    async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }) {
+        const response = await client.query({
+            query: gql `
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          responses: departmentRoots(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            total
+            items {
+              ...departmentFragment
+              children(filters: $filters, sortings: $sortings) {
+                ...departmentFragment
+                children(filters: $filters, sortings: $sortings) {
+                  ...departmentFragment
+                  children(filters: $filters, sortings: $sortings) {
+                    ...departmentFragment
+                    children(filters: $filters, sortings: $sortings) {
+                      ...departmentFragment
+                      children(filters: $filters, sortings: $sortings) {
+                        ...departmentFragment
+                        children(filters: $filters, sortings: $sortings) {
+                          ...departmentFragment
+                          children(filters: $filters, sortings: $sortings) {
+                            ...departmentFragment
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
           }
         }
 
         ${departmentFragment}
       `,
             variables: {
-                department
-            },
-            context: {
-                hasUpload: true
+                filters,
+                pagination: { page, limit },
+                sortings
             }
         });
-        this.selected = response.data.createDepartment;
-        this.updateContext();
-        await this.fetch();
-    }
-    async save() {
-        const { id, controlNo, name, description, state, picture, active, manager } = this.departmentView.department;
-        if (!id) {
-            alert('Please select department first.');
-        }
-        var patch = {
-            controlNo,
-            name,
-            description,
-            state,
-            active,
-            manager
+        const { items: records, total } = response.data.responses;
+        return {
+            total,
+            records
         };
-        if (picture instanceof File) {
-            patch.picture = picture;
-        }
-        const response = await client.mutate({
-            mutation: gql `
-        mutation ($id: String!, $patch: DepartmentPatch!) {
-          updateDepartment(id: $id, patch: $patch) {
-            ...Department_department
-          }
-        }
-
-        ${departmentFragment}
-      `,
-            variables: {
-                id,
-                patch
+    }
+    async pageInitialized(lifecycle) {
+        this.gristConfig = {
+            pagination: { pages: [50, 100, 200] },
+            list: {
+                thumbnail: 'profile',
+                fields: ['controlNo', 'name'],
+                details: ['email', 'manager', 'updatedAt']
             },
-            context: {
-                hasUpload: true
+            columns: [
+                {
+                    type: 'gutter',
+                    gutterName: 'dirty',
+                    fixed: true
+                },
+                {
+                    type: 'tree',
+                    name: 'name',
+                    label: true,
+                    header: i18next.t('label.name'),
+                    record: {
+                        editable: true,
+                        options: {
+                            selectable: true
+                        }
+                    },
+                    filter: 'search',
+                    sortable: true,
+                    width: 200,
+                    fixed: true,
+                    handlers: {
+                        contextmenu: 'contextmenu-tree-mutation'
+                    }
+                },
+                { name: 'id', hidden: true },
+                {
+                    type: 'string',
+                    name: 'controlNo',
+                    header: i18next.t('label.control-no'),
+                    record: {
+                        editable: true
+                    },
+                    filter: 'search',
+                    sortable: true,
+                    width: 110
+                },
+                {
+                    type: 'string',
+                    name: 'description',
+                    header: i18next.t('label.description'),
+                    record: {
+                        editable: true
+                    },
+                    filter: 'search',
+                    sortable: true,
+                    width: 110
+                },
+                {
+                    type: 'resource-object',
+                    name: 'manager',
+                    header: i18next.t('label.manager'),
+                    record: {
+                        editable: true,
+                        options: {
+                            title: i18next.t('title.employee list'),
+                            queryName: 'employees',
+                            pagination: { pages: [50, 100, 200] },
+                            basicArgs: {
+                                filters: [
+                                    {
+                                        name: 'active',
+                                        operator: 'eq',
+                                        value: true
+                                    }
+                                ]
+                            },
+                            list: { fields: ['controlNo', 'name', 'email'] },
+                            columns: [
+                                { name: 'id', hidden: true },
+                                {
+                                    name: 'controlNo',
+                                    width: 120,
+                                    header: { renderer: () => i18next.t('field.control-no') },
+                                    filter: 'search',
+                                    sortable: true
+                                },
+                                {
+                                    name: 'name',
+                                    width: 120,
+                                    header: { renderer: () => i18next.t('field.name') },
+                                    filter: 'search',
+                                    sortable: true
+                                },
+                                {
+                                    name: 'email',
+                                    width: 150,
+                                    header: { renderer: () => i18next.t('label.email') },
+                                    filter: 'search',
+                                    sortable: true
+                                }
+                            ],
+                            valueField: 'id',
+                            nameField: 'name',
+                            descriptionField: 'controlNo'
+                        }
+                    },
+                    sortable: true,
+                    width: 120
+                },
+                {
+                    type: 'checkbox',
+                    name: 'active',
+                    label: true,
+                    header: i18next.t('field.active'),
+                    width: 70,
+                    record: {
+                        align: 'center',
+                        editable: true
+                    },
+                    filter: true,
+                    sortable: true
+                },
+                {
+                    type: 'resource-object',
+                    name: 'updater',
+                    header: i18next.t('field.updater'),
+                    width: 90,
+                    sortable: false
+                },
+                {
+                    type: 'datetime',
+                    name: 'updatedAt',
+                    header: i18next.t('field.updated_at'),
+                    width: 180,
+                    sortable: true
+                },
+                {
+                    type: 'image',
+                    name: 'picture',
+                    record: {
+                        renderer: function (value, column, record, rowIndex, field) {
+                            return html `<ox-pfp-view style="height:90%; width: unset; aspect-ratio: 1 / 1;" .profile=${record.picture} .name=${record.name}></ox-pfp-view>`;
+                        }
+                    },
+                    hidden: true
+                }
+            ],
+            rows: {
+                appendable: false,
+                selectable: {
+                    multiple: true
+                }
+            },
+            sorters: [
+                {
+                    name: 'controlNo'
+                }
+            ],
+            tree: {
+                childrenProperty: 'children',
+                expanded: () => true
             }
-        });
-        this.selected = response.data.updateDepartment;
-        this.fetch();
+        };
+    }
+    async pageUpdated(changes, lifecycle) {
+        if (this.active) {
+            // do something here when this page just became as active
+        }
     }
     async delete() {
-        var _a;
-        if (!this.selected) {
-            alert('select department first.');
+        if (!this.grist.selected || this.grist.selected.length == 0) {
+            await OxPrompt.open({
+                title: 'select department first.',
+                confirmButton: { text: i18next.t('button.confirm') }
+            });
+            return;
+        }
+        if (this.grist.selected.find(selected => selected.children && selected.children.length > 0)) {
+            await OxPrompt.open({
+                title: 'Department having children cannot be deleted.',
+                confirmButton: { text: i18next.t('button.confirm') }
+            });
+            return;
         }
-        const children = (_a = this.selected) === null || _a === void 0 ? void 0 : _a.children;
-        if (children && children.length > 0) {
-            alert('Department having children cannot be deleted.');
+        if (await OxPrompt.open({
+            title: i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }),
+            confirmButton: { text: i18next.t('button.confirm') },
+            cancelButton: { text: i18next.t('button.cancel') }
+        })) {
+            const ids = this.grist.selected.map(record => record.id);
+            if (ids && ids.length > 0) {
+                const response = await client.mutate({
+                    mutation: gql `
+            mutation ($ids: [String!]!) {
+              deleteDepartments(ids: $ids)
+            }
+          `,
+                    variables: {
+                        ids
+                    }
+                });
+                if (!response.errors) {
+                    this.grist.fetch();
+                    notify({
+                        message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
+                    });
+                }
+            }
         }
-        if (confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
-            const { id } = this.selected || {};
+    }
+    async save() {
+        let patches = this.grist.dirtyRecords;
+        if (patches && patches.length) {
+            patches = patches.map(patch => {
+                let patchField = patch.id ? { id: patch.id } : {};
+                const dirtyFields = patch.__dirtyfields__;
+                for (let key in dirtyFields) {
+                    patchField[key] = dirtyFields[key].after;
+                }
+                patchField.parent = patch.parent;
+                patchField.cuFlag = patch.__dirty__;
+                return patchField;
+            });
             const response = await client.mutate({
                 mutation: gql `
-          mutation ($id: String!) {
-            deleteDepartment(id: $id)
+          mutation ($patches: [DepartmentPatch!]!) {
+            updateMultipleDepartment(patches: $patches) {
+              name
+            }
           }
         `,
                 variables: {
-                    id
+                    patches
+                },
+                context: {
+                    hasUpload: true
                 }
             });
-            this.selected = {};
-            this.updateContext();
-            await this.fetch();
-        }
-    }
-    async pageInitialized(lifecycle) {
-        this.fetch();
-    }
-    async pageUpdated(changes, lifecycle) {
-        if (this.active) {
-            // do something here when this page just became as active
-        }
-    }
-    async fetch() {
-        const response = await client.query({
-            query: gql `
-        query {
-          responses: departmentRoot {
-            ...Department_department
-            children {
-              ...Department_department
-              children {
-                ...Department_department
-                children {
-                  ...Department_department
-                  children {
-                    ...Department_department
-                    children {
-                      ...Department_department
-                      children {
-                        ...Department_department
-                        children {
-                          ...Department_department
-                        }
-                      }
-                    }
-                  }
-                }
-              }
+            if (!response.errors) {
+                this.grist.fetch();
             }
-          }
         }
-
-        ${departmentFragment}
-      `
-        });
-        this.root = response.data.responses;
     }
-    async exportHandler() { }
-    async importHandler(records) { }
 };
 DepartmentListPage.styles = [
-    CommonHeaderStyles,
     ScrollbarStyles,
+    CommonHeaderStyles,
     css `
       :host {
         display: flex;
-        flex-direction: column;
 
         width: 100%;
-        overflow: auto;
-      }
 
-      ox-tree-vertical {
-        flex: 1;
+        --grid-record-emphasized-background-color: #8b0000;
+        --grid-record-emphasized-color: #ff6b6b;
       }
 
-      department-view {
+      ox-grist {
+        overflow-y: auto;
         flex: 1;
-
-        max-width: 500px;
-        align-self: center;
       }
     `
 ];
@@ -290,9 +412,13 @@ __decorate([
     __metadata("design:type", Department)
 ], DepartmentListPage.prototype, "selected", void 0);
 __decorate([
-    query('department-view'),
-    __metadata("design:type", DepartmentView)
-], DepartmentListPage.prototype, "departmentView", void 0);
+    query('ox-grist'),
+    __metadata("design:type", DataGrist)
+], DepartmentListPage.prototype, "grist", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], DepartmentListPage.prototype, "gristConfig", void 0);
 DepartmentListPage = __decorate([
     customElement('department-list-page')
 ], DepartmentListPage);