@things-factory/organization 6.1.84 → 6.1.87

package/client/pages/employee/employees-by-department.ts

@@ -0,0 +1,468 @@
+import '@operato/data-tree'
+
+import { CommonGristStyles, CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
+import { PageView, store } from '@operato/shell'
+import { css, html } from 'lit'
+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 { notify, openPopup } from '@operato/layout'
+import { OxPopup } from '@operato/popup'
+import { DataGrist, FetchOption, GristRecord } from '@operato/data-grist'
+
+import { connect } from 'pwa-helpers/connect-mixin'
+import gql from 'graphql-tag'
+
+import { DepartmentImporter } from '../department/department-importer'
+import { Department } from '../../types/department'
+
+import { DepartmentView } from '../../component/department-view'
+import { EmployeeListPage } from './employee-list-page'
+
+const departmentFragment = gql`
+  fragment Department_department on Department {
+    id
+    controlNo
+    name
+    description
+
+    manager {
+      id
+      name
+      controlNo
+      photo
+      email
+    }
+    active
+    state
+    picture
+
+    updater {
+      id
+      name
+    }
+    updatedAt
+  }
+`
+
+@customElement('employees-by-department')
+export class EmployeesByDepartment extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: row;
+        overflow: auto;
+      }
+      ox-tree {
+        flex: 1;
+        overflow: auto;
+      }
+      ox-grist {
+        flex: 4;
+      }
+    `
+  ]
+
+  static get scopedElements() {
+    return {
+      'department-importer': DepartmentImporter
+    }
+  }
+
+  @query('ox-grist') private grist!: DataGrist
+  @property({ type: Object }) gristConfig: any
+
+  @state() root?: Department
+  @state() selected?: Department
+
+  @query('employee-list-page') employeeListPage!: EmployeeListPage
+
+  get context() {
+    return {
+      title: i18next.t('title.employees-by-department'),
+      actions: []
+    }
+  }
+
+  render() {
+    return html`
+      <ox-tree
+        .data=${this.root}
+        .selected=${this.selected}
+        @select=${this.onSelect.bind(this)}
+        label-property="name"
+      ></ox-tree>
+
+      <ox-grist .config=${this.gristConfig} .fetchHandler=${this.fetchEmployees.bind(this)}>
+      <div slot="headroom">
+        <div id="filters">
+          <ox-filters-form autofocus></ox-filters-form>
+        </div>
+      </div>
+      </ox-grist>
+    `
+  }
+
+  async pageInitialized(lifecycle: any) {
+    this.gristConfig = {
+      pagination: { pages: [100] },
+      list: {
+        thumbnail: 'profile',
+        fields: ['controlNo', 'name'],
+        details: ['email', 'department', 'hiredOn', 'updatedAt']
+      },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        {
+          type: 'string',
+          name: 'controlNo',
+          header: i18next.t('field.control-no'),
+          record: {
+            editable: true
+          },
+          filter: 'search',
+          sortable: true,
+          width: 105
+        },
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('field.name'),
+          record: {
+            editable: true
+          },
+          filter: 'search',
+          sortable: true,
+          width: 100
+        },
+        {
+          type: 'string',
+          name: 'alias',
+          header: i18next.t('label.alias'),
+          record: {
+            editable: true
+          },
+          filter: 'search',
+          sortable: true,
+          width: 110
+        },
+        {
+          type: 'resource-object',
+          name: 'user',
+          header: i18next.t('field.user'),
+          record: {
+            editable: true,
+            options: {
+              title: i18next.t('title.lookup user'),
+              queryName: 'users',
+              basicArgs: { filters: [{ name: 'userType', operator: 'eq', value: 'user' }] },
+              descriptionField: 'email',
+              columns: [
+                { name: 'id', hidden: true },
+                { name: 'name', header: i18next.t('field.name'), filter: 'search' },
+                { name: 'email', header: i18next.t('field.email'), filter: 'search' }
+              ],
+              list: { fields: ['name', 'email'] }
+            }
+          },
+          sortable: true,
+          filter: false,
+          width: 100
+        },
+        {
+          type: 'code',
+          name: 'type',
+          header: i18next.t('field.type'),
+          width: 115,
+          sortable: false,
+          filter: false,
+          record: {
+            editable: true,
+            codeName: 'EMPLOYEE_TYPE'
+          }
+        },
+        {
+          type: 'department-object',
+          name: 'department',
+          header: i18next.t('field.department'),
+          record: {
+            editable: true
+          },
+          sortable: true,
+          filter: false,
+          width: 130
+        },
+        {
+          type: 'resource-object',
+          name: 'supervisor',
+          header: i18next.t('field.supervisor'),
+          record: {
+            editable: true,
+            options: {
+              title: i18next.t('title.employee list'),
+              queryName: 'employees',
+              pagination: { pages: [100, 200, 500] },
+              basicArgs: {
+                filters: [{
+                  name: 'active', operator: 'eq', value: true
+                }]
+              },
+              list: { fields: ['controlNo', 'name', 'alias', 'hiredOn', 'active'] },
+              select: [
+                { name: 'id', hidden: true },
+                { type: 'string', name: 'controlNo', header: { renderer: () => i18next.t('field.control-no') }, width: 130, filter: 'search', sortable: true },
+                { type: 'string', name: 'name', header: { renderer: () => i18next.t('field.name') }, width: 150, filter: 'search' },
+                { type: 'string', name: 'alias', header: { renderer: () => i18next.t('label.alias') }, width: 150, filter: 'search' },
+                { type: 'string', name: 'hiredOn', header: { renderer: () => i18next.t('field.hired-on'), width: 100 } },
+                {
+                  type: 'checkbox',
+                  name: 'active',
+                  label: true,
+                  header: i18next.t('field.active'),
+                  record: {
+                    align: 'center',
+                    editable: true
+                  },
+                  sortable: true,
+                  width: 85
+                }
+              ],
+              valueField: 'id',
+              nameField: 'name',
+              descriptionField: 'controlNo'
+            }
+          },
+          sortable: true,
+          width: 120
+        },
+        {
+          type: 'string',
+          name: 'email',
+          header: i18next.t('field.email'),
+          width: 200,
+          record: {
+            editable: false,
+            renderer: function (value, column, record, rowIndex, field) {
+              return record.contact ? record.contact.email : '';
+            }
+          },
+          sortable: true
+        },
+        {
+          type: 'string',
+          name: 'phone',
+          header: i18next.t('field.phone'),
+          width: 110,
+          record: {
+            editable: false,
+            renderer: function (value, column, record, rowIndex, field) {
+              return record.contact ? record.contact.phone : '';
+            }
+          },
+          sortable: true
+        },
+        {
+          type: 'code',
+          name: 'jobResponsibility',
+          header: i18next.t('label.job-responsibility'),
+          width: 100,
+          record: {
+            editable: true,
+            codeName: 'JOB_RESPONSIBILITY'
+          }
+        },
+        {
+          type: 'code',
+          name: 'jobPosition',
+          header: i18next.t('label.job-position'),
+          width: 100,
+          record: {
+            editable: true,
+            codeName: 'JOB_POSITION'
+          }
+        },
+        {
+          type: 'date',
+          name: 'hiredOn',
+          header: i18next.t('field.hired-on'),
+          width: 100,
+          record: {
+            editable: true
+          },
+          sortable: true
+        },
+        {
+          type: 'date',
+          name: 'retiredAt',
+          header: i18next.t('label.retired-at'),
+          width: 100,
+          record: {
+            editable: true
+          }
+        },
+        {
+          type: 'checkbox',
+          name: 'active',
+          label: true,
+          header: i18next.t('field.active'),
+          width: 85,
+          record: {
+            align: 'center',
+            editable: true
+          },
+          filter: true,
+          sortable: true
+        },
+        {
+          type: 'string',
+          name: 'note',
+          header: i18next.t('field.note'),
+          width: 200,
+          record: {
+            editable: true
+          },
+          filter: 'search'
+        }
+      ],
+      rows: {
+        selectable: {
+          multiple: false
+        }
+      },
+      sorters: [{
+        name: 'controlNo'
+      }]
+    };
+
+    this.fetchDepartments()
+  }
+
+  async pageUpdated(changes: any, lifecycle: any) {
+    if (this.active) {
+    }
+  }
+
+  async onSelect(e: CustomEvent) {
+    this.selected = e.detail as Department
+    this.grist.fetch()
+    this.updateContext()
+  }
+
+  async fetchEmployees({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {
+    if (this.selected) {
+      filters.push({
+        name: 'departmentId',
+        operator: 'eq',
+        value: this.selected.id
+      })
+    }
+
+    const response = await client.query({
+      query: gql`
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          responses: employees(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              controlNo
+              name
+              alias
+              type
+              jobResponsibility
+              jobPosition
+              active
+              email
+              phone
+              user {
+                id
+                name
+              }
+              department {
+                id
+                name
+                description
+              }
+              supervisor {
+                id
+                name
+                controlNo
+              }
+              note
+              hiredOn
+              retiredAt
+              contact {
+                id
+                email
+                phone
+                address
+              }
+              profile {
+                left
+                top
+                zoom
+                picture
+              }
+              updater {
+                id
+                name
+              }
+              updatedAt
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        filters,
+        pagination: { page, limit },
+        sortings
+      }
+    })
+
+    const records = response.data.responses.items
+    return {
+      total: response.data.responses.total || 0,
+      records
+    }
+  }
+
+  async fetchDepartments() {
+    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
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        ${departmentFragment}
+      `
+    })
+
+    this.root = response.data.responses
+  }
+}

package/client/route.ts

@@ -8,6 +8,10 @@ export default function route(page: string) {
       import('./pages/department/department-list-page')
       return page
 
+    case 'employees-by-department':
+      import('./pages/employee/employees-by-department')
+      return page
+
     case 'common-approval-line-templates-page':
       import('./pages/approval-line/common-approval-line-templates-page')
       return page

package/dist-client/component/department-view.js

@@ -48,14 +48,14 @@ let DepartmentView = class DepartmentView extends localize(i18next)(ScopedElemen
                 name: 'active',
                 label: 'active'
             },
-            {
-                type: 'select',
-                name: 'state',
-                label: 'state',
-                property: {
-                    options: ['', 'STATUS_A', 'STATUS_B']
-                }
-            },
+            /*{
+              type: 'select',
+              name: 'state',
+              label: 'state',
+              property: {
+                options: ['', 'STATUS_A', 'STATUS_B']
+              }
+            },*/
             {
                 type: 'image',
                 name: 'picture',

package/dist-client/component/department-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"department-view.js","sourceRoot":"","sources":["../../client/component/department-view.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,wDAAwD,CAAA;AAE/D,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAoB,MAAM,KAAK,CAAA;AAC7D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAG1C,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAC;IAuB1E,YAAY,CAAC,kBAAqE;QAC1F,IAAI,CAAC,UAAU,GAAG;YAChB;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,WAAW;gBACjB,KAAK,EAAE,YAAY;aACpB;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,MAAM;gBACZ,KAAK,EAAE,MAAM;aACd;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,aAAa;gBACnB,KAAK,EAAE,aAAa;aACrB;YACD;gBACE,IAAI,EAAE,iBAAiB;gBACvB,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,SAAS;gBAChB,QAAQ,EAAE;oBACR,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;oBACvC,SAAS,EAAE,WAAW;oBACtB,OAAO,EAAE;wBACP,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE;wBAC5B,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE;wBAClG,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE;wBACvF,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE,EAAE;qBACxE;oBACD,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;oBAChD,UAAU,EAAE,IAAI;oBAChB,SAAS,EAAE,MAAM;oBACjB,gBAAgB,EAAE,WAAW;iBAC9B;aACF;YACD;gBACE,IAAI,EAAE,SAAS;gBACf,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,QAAQ;aAChB;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,OAAO;gBACd,QAAQ,EAAE;oBACR,OAAO,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,UAAU,CAAC;iBACtC;aACF;YACD;gBACE,IAAI,EAAE,OAAO;gBACb,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,SAAS;aACjB;SACF,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,UAAU;iBACf,IAAI,CAAC,UAAU;2BACL,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;;KAEtD,CAAA;IACH,CAAC;IAED,gBAAgB,CAAC,CAAc;QAC7B,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,MAAM,CAAA;IAC5B,CAAC;;AA3FM,qBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAAgB;AAE3C;IAAC,KAAK,CAAC,4BAA4B,CAAC;;mDAAkB;AAEtD;IAAC,KAAK,EAAE;;kDAAwB;AArBrB,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CA6F1B;SA7FY,cAAc","sourcesContent":["import '@operato/property-editor'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\n\nimport { LitElement, css, html, PropertyValueMap } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('department-view')\nexport class DepartmentView extends localize(i18next)(ScopedElementsMixin(LitElement)) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        overflow: auto;\n      }\n\n      ox-properties-dynamic-view {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Object }) department: any\n\n  @query('ox-properties-dynamic-view') dynamicView!: any\n\n  @state() private properties: any\n\n  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n    this.properties = [\n      {\n        type: 'string',\n        name: 'controlNo',\n        label: 'control-no'\n      },\n      {\n        type: 'string',\n        name: 'name',\n        label: 'name'\n      },\n      {\n        type: 'string',\n        name: 'description',\n        label: 'description'\n      },\n      {\n        type: 'resource-object',\n        name: 'manager',\n        label: 'manager',\n        property: {\n          title: i18next.t('title.employee list'),\n          queryName: 'employees',\n          columns: [\n            { name: 'id', hidden: true },\n            { name: 'controlNo', header: { renderer: () => i18next.t('field.control-no') }, filter: 'search' },\n            { name: 'name', header: { renderer: () => i18next.t('field.name') }, filter: 'search' },\n            { name: 'email', header: { renderer: () => i18next.t('field.email') } }\n          ],\n          list: { fields: ['controlNo', 'name', 'email'] },\n          valueField: 'id',\n          nameField: 'name',\n          descriptionField: 'controlNo'\n        }\n      },\n      {\n        type: 'boolean',\n        name: 'active',\n        label: 'active'\n      },\n      {\n        type: 'select',\n        name: 'state',\n        label: 'state',\n        property: {\n          options: ['', 'STATUS_A', 'STATUS_B']\n        }\n      },\n      {\n        type: 'image',\n        name: 'picture',\n        label: 'picture'\n      }\n    ]\n  }\n\n  render() {\n    return html`\n      <ox-properties-dynamic-view\n        .props=${this.properties}\n        .value=${this.department}\n        @property-change=${this.onPropertyChange.bind(this)}\n      ></ox-properties-dynamic-view>\n    `\n  }\n\n  onPropertyChange(e: CustomEvent) {\n    this.department = e.detail\n  }\n}\n"]}
+{"version":3,"file":"department-view.js","sourceRoot":"","sources":["../../client/component/department-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/property-editor'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\n\nimport { LitElement, css, html, PropertyValueMap } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { getCodeByName } from '@things-factory/code-base'\n\n@customElement('department-view')\nexport class DepartmentView extends localize(i18next)(ScopedElementsMixin(LitElement)) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        overflow: auto;\n      }\n\n      ox-properties-dynamic-view {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Object }) department: any\n\n  @query('ox-properties-dynamic-view') dynamicView!: any\n\n  @state() private properties: any\n\n  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n    this.properties = [\n      {\n        type: 'string',\n        name: 'controlNo',\n        label: 'control-no'\n      },\n      {\n        type: 'string',\n        name: 'name',\n        label: 'name'\n      },\n      {\n        type: 'string',\n        name: 'description',\n        label: 'description'\n      },\n      {\n        type: 'resource-object',\n        name: 'manager',\n        label: 'manager',\n        property: {\n          title: i18next.t('title.employee list'),\n          queryName: 'employees',\n          columns: [\n            { name: 'id', hidden: true },\n            { name: 'controlNo', header: { renderer: () => i18next.t('field.control-no') }, filter: 'search' },\n            { name: 'name', header: { renderer: () => i18next.t('field.name') }, filter: 'search' },\n            { name: 'email', header: { renderer: () => i18next.t('field.email') } }\n          ],\n          list: { fields: ['controlNo', 'name', 'email'] },\n          valueField: 'id',\n          nameField: 'name',\n          descriptionField: 'controlNo'\n        }\n      },\n      {\n        type: 'boolean',\n        name: 'active',\n        label: 'active'\n      },\n      /*{\n        type: 'select',\n        name: 'state',\n        label: 'state',\n        property: {\n          options: ['', 'STATUS_A', 'STATUS_B']   \n        }\n      },*/\n      {\n        type: 'image',\n        name: 'picture',\n        label: 'picture'\n      }\n    ]\n  }\n\n  render() {\n    return html`\n      <ox-properties-dynamic-view\n        .props=${this.properties}\n        .value=${this.department}\n        @property-change=${this.onPropertyChange.bind(this)}\n      ></ox-properties-dynamic-view>\n    `\n  }\n\n  onPropertyChange(e: CustomEvent) {\n    this.department = e.detail\n  }\n}\n"]}