@things-factory/organization 8.0.5 → 9.0.0-beta.12

package/client/pages/employee/employee-list-page.ts

@@ -1,772 +0,0 @@
-import '@operato/data-grist'
-import '@operato/context/ox-context-page-toolbar.js'
-import '@things-factory/contact/dist-client'
-
-import gql from 'graphql-tag'
-import { css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin'
-
-import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-import { Contact } from '@operato/contact/ox-contact.js'
-import { DataGrist, FetchOption, GristRecord } from '@operato/data-grist'
-import { client } from '@operato/graphql'
-import { i18next, localize } from '@operato/i18n'
-import { notify, openPopup } from '@operato/layout'
-import { PageView, store } from '@operato/shell'
-import { CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
-import { isMobileDevice } from '@operato/utils'
-import { p13n } from '@operato/p13n'
-
-import { EmployeeImporter } from './employee-importer'
-
-@customElement('employee-list-page')
-export class EmployeeListPage extends connect(store)(p13n(localize(i18next)(ScopedElementsMixin(PageView)))) {
-  static styles = [
-    ScrollbarStyles,
-    CommonGristStyles,
-    CommonHeaderStyles,
-    css`
-      :host {
-        display: flex;
-
-        width: 100%;
-
-        --ox-pfp-size: 40px;
-
-        --grid-record-emphasized-background-color: #8b0000;
-        --grid-record-emphasized-color: #ff6b6b;
-      }
-
-      ox-grist {
-        overflow-y: auto;
-        flex: 1;
-      }
-
-      .header {
-        grid-template-areas: 'filters actions';
-      }
-    `
-  ]
-
-  static get scopedElements() {
-    return {
-      'employee-importer': EmployeeImporter
-    }
-  }
-
-  @property({ type: Object }) gristConfig: any
-  @property({ type: String }) mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
-
-  @query('ox-grist') private grist!: DataGrist
-
-  get context() {
-    return {
-      title: i18next.t('title.employee list'),
-      search: {
-        handler: (search: string) => {
-          this.grist.searchText = search
-        },
-        value: this.grist?.searchText || ''
-      },
-      filter: {
-        handler: () => {
-          this.grist.toggleHeadroom()
-        }
-      },
-      help: 'organization/employee',
-      actions: [
-        {
-          icon: 'save',
-          title: i18next.t('button.save'),
-          action: this.onUpdateEmployee.bind(this)
-        },
-        {
-          icon: 'delete',
-          title: i18next.t('button.delete'),
-          action: this.onDeleteEmployee.bind(this),
-          emphasis: {
-            danger: true
-          }
-        }
-      ],
-      exportable: {
-        name: i18next.t('title.employee list'),
-        data: this.exportHandler.bind(this)
-      },
-      importable: {
-        handler: this.importHandler.bind(this)
-      },
-      toolbar: false
-    }
-  }
-
-  render() {
-    const mode = this.mode || (isMobileDevice() ? 'CARD' : 'GRID')
-
-    return html`
-      <ox-grist
-        .mode=${mode}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')!}
-      >
-        <div slot="headroom" class="header">
-          <div class="filters">
-            <ox-filters-form class="filter" autofocus without-search></ox-filters-form>
-          </div>
-
-          <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
-        </div>
-
-        <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
-      </ox-grist>
-    `
-  }
-
-  async pageInitialized(lifecycle: any) {
-    this.gristConfig = {
-      pagination: { pages: [50, 100, 200] },
-      list: {
-        thumbnail: 'profile',
-        fields: ['controlNo', 'name'],
-        details: ['email', 'department', 'hiredOn', 'updatedAt']
-      },
-      columns: [
-        { type: 'gutter', gutterName: 'sequence', fixed: true },
-        { type: 'gutter', gutterName: 'row-selector', multiple: true, fixed: true },
-        {
-          type: 'gutter',
-          gutterName: 'button',
-          header: i18next.t('field.register-account'),
-          icon: record => (record.id && !record.user ? 'badge' : ''),
-          iconOnly: false,
-          title: record => (record.id && !record.user ? i18next.t('button.register-account') : ''),
-          width: 80,
-          handlers: {
-            click: (columns, data, column, record, rowIndex) => {
-              if (!record || !record.id || record.user) {
-                /* TODO record가 새로 추가된 것이면 리턴하도록 한다. */
-                return
-              }
-
-              this.attachSystemUser(record)
-            }
-          }
-        },
-        {
-          type: 'image',
-          name: 'profile',
-          header: i18next.t('button.edit-contact'),
-          width: 80,
-          record: {
-            align: 'center',
-            renderer: function (value, column, record, rowIndex, field) {
-              return html`<ox-pfp-view .profile=${record.profile} .name=${record.name || '+'}></ox-pfp-view>`
-            }
-          },
-          handlers: {
-            click: async (columns, data, column, record, rowIndex) => {
-              if (record && record.contact) {
-                this.openContactPopup(record)
-              } else {
-                this.openContactSelector(record)
-              }
-            }
-          }
-        },
-        {
-          type: 'string',
-          name: 'controlNo',
-          fixed: true,
-          header: i18next.t('field.control-no'),
-          record: {
-            editable: true,
-            mandatory: true
-          },
-          filter: 'search',
-          sortable: true,
-          width: 105
-        },
-        {
-          type: 'string',
-          name: 'name',
-          fixed: true,
-          header: i18next.t('field.name'),
-          record: {
-            editable: true,
-            mandatory: true
-          },
-          filter: 'search',
-          sortable: true,
-          width: 100
-        },
-        {
-          type: 'string',
-          name: 'alias',
-          header: i18next.t('label.alias'),
-          record: {
-            editable: true
-          },
-          filter: 'search',
-          sortable: false,
-          width: 110
-        },
-        {
-          type: 'resource-object',
-          name: 'user',
-          header: i18next.t('field.system-user'),
-          record: {
-            editable: true,
-            options: {
-              title: i18next.t('title.lookup system-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: false,
-          filter: 'search',
-          width: 100
-        },
-        {
-          type: 'code',
-          name: 'type',
-          header: i18next.t('field.type'),
-          width: 115,
-          sortable: true,
-          filter: true,
-          record: {
-            editable: true,
-            codeName: 'EMPLOYEE_TYPE',
-            selectDispOpt: 'name'
-          }
-        },
-        {
-          type: 'department-object',
-          name: 'department',
-          header: i18next.t('field.department'),
-          record: {
-            editable: true
-          },
-          sortable: false,
-          filter: true,
-          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: [50, 100, 200] },
-              basicArgs: {
-                filters: [
-                  {
-                    name: 'active',
-                    operator: 'eq',
-                    value: true
-                  }
-                ]
-              },
-              list: { fields: ['controlNo', 'name', 'alias', 'hiredOn'] },
-              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: 'alias',
-                  width: 150,
-                  header: { renderer: () => i18next.t('label.alias') },
-                  filter: 'search',
-                  sortable: true
-                },
-                {
-                  type: 'code',
-                  name: 'type',
-                  width: 110,
-                  header: { renderer: () => i18next.t('label.type') },
-                  record: {
-                    editable: false,
-                    codeName: 'EMPLOYEE_TYPE',
-                    selectDispOpt: 'name'
-                  }
-                },
-                {
-                  type: 'code',
-                  name: 'jobPosition',
-                  width: 110,
-                  header: { renderer: () => i18next.t('label.job-position') },
-                  record: {
-                    editable: false,
-                    codeName: 'JOB_POSITION',
-                    selectDispOpt: 'name'
-                  }
-                },
-                {
-                  type: 'code',
-                  name: 'jobResponsibility',
-                  width: 200,
-                  header: { renderer: () => i18next.t('label.job-responsibility') },
-                  record: {
-                    editable: false,
-                    codeName: 'JOB_RESPONSIBILITY',
-                    selectDispOpt: 'name'
-                  }
-                },
-                {
-                  type: 'date',
-                  name: 'hiredOn',
-                  header: { renderer: () => i18next.t('field.hired-on') },
-                  width: 120
-                }
-              ],
-              valueField: 'id',
-              nameField: 'name',
-              descriptionField: 'controlNo'
-            }
-          },
-          sortable: false,
-          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: false
-        },
-        {
-          type: 'string',
-          name: 'phone',
-          header: i18next.t('field.phone'),
-          width: 130,
-          record: {
-            editable: false,
-            renderer: function (value, column, record, rowIndex, field) {
-              return record.contact ? record.contact.phone : ''
-            }
-          },
-          sortable: false
-        },
-        {
-          type: 'code',
-          name: 'jobResponsibility',
-          header: i18next.t('label.job-responsibility'),
-          width: 175,
-          record: {
-            editable: true,
-            codeName: 'JOB_RESPONSIBILITY',
-            selectDispOpt: 'name'
-          },
-          filter: true
-        },
-        {
-          type: 'code',
-          name: 'jobPosition',
-          header: i18next.t('label.job-position'),
-          width: 100,
-          record: {
-            editable: true,
-            codeName: 'JOB_POSITION',
-            selectDispOpt: 'name'
-          },
-          filter: true
-        },
-        {
-          type: 'date',
-          name: 'hiredOn',
-          header: i18next.t('field.hired-on'),
-          width: 120,
-          record: {
-            editable: true
-          },
-          sortable: true
-        },
-        {
-          type: 'date',
-          name: 'retiredAt',
-          header: i18next.t('label.retired-at'),
-          width: 120,
-          record: {
-            editable: true
-          }
-        },
-        {
-          type: 'checkbox',
-          name: 'active',
-          label: true,
-          header: i18next.t('field.active'),
-          width: 70,
-          record: {
-            align: 'center',
-            editable: true
-          },
-          filter: true,
-          sortable: false
-        },
-        {
-          type: 'string',
-          name: 'note',
-          header: i18next.t('field.note'),
-          width: 200,
-          record: {
-            editable: true
-          },
-          filter: 'search'
-        },
-        {
-          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: 'resource-object',
-          name: 'contact',
-          hidden: true
-        }
-      ],
-      rows: {
-        selectable: {
-          multiple: true
-        }
-      },
-      sorters: [
-        {
-          name: 'controlNo'
-        }
-      ]
-    }
-  }
-
-  async pageUpdated(changes: any, lifecycle: any) {
-    if (this.active) {
-      // do something here when this page just became as active
-    }
-  }
-
-  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {
-    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
-                controlNo
-                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 onDeleteEmployee() {
-    if (confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
-      const ids = this.grist.selected.map(record => record.id)
-      if (ids && ids.length > 0) {
-        const response = await client.mutate({
-          mutation: gql`
-            mutation ($ids: [String!]!) {
-              deleteEmployees(ids: $ids)
-            }
-          `,
-          variables: {
-            ids
-          }
-        })
-
-        if (!response.errors) {
-          this.grist.fetch()
-          notify({
-            message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
-          })
-        }
-      }
-    }
-  }
-
-  async onUpdateEmployee() {
-    let patches = this.grist.dirtyRecords
-    if (patches && patches.length) {
-      patches = patches.map(patch => {
-        let patchField: any = patch.id ? { id: patch.id } : {}
-        const dirtyFields = patch.__dirtyfields__
-        for (let key in dirtyFields) {
-          patchField[key] = dirtyFields[key].after
-        }
-        patchField.cuFlag = patch.__dirty__
-
-        return patchField
-      })
-
-      const response = await client.mutate({
-        mutation: gql`
-          mutation ($patches: [EmployeePatch!]!) {
-            updateMultipleEmployee(patches: $patches) {
-              name
-            }
-          }
-        `,
-        variables: {
-          patches
-        }
-      })
-
-      if (!response.errors) {
-        this.grist.fetch()
-      }
-    }
-  }
-
-  async exportHandler() {
-    const exportTargets = this.grist.selected.length ? this.grist.selected : this.grist.dirtyData.records
-    const targetFieldSet = new Set([
-      'id',
-      'controlNo',
-      'name',
-      'alias',
-      'type',
-      'hiredOn',
-      'retiredAt',
-      'active',
-      'note'
-    ])
-
-    return exportTargets.map(employee => {
-      let tempObj = {}
-      for (const field of targetFieldSet) {
-        tempObj[field] = employee[field]
-      }
-
-      return tempObj
-    })
-  }
-
-  async importHandler(records) {
-    const popup = openPopup(
-      html`
-        <employee-importer
-          .employees=${records}
-          @imported=${() => {
-            history.back()
-            this.grist.fetch()
-          }}
-        ></employee-importer>
-      `,
-      {
-        backdrop: true,
-        size: 'large',
-        title: i18next.t('title.import employee')
-      }
-    )
-
-    popup.onclosed = () => {
-      this.grist.fetch()
-    }
-  }
-
-  async openContactPopup(record: GristRecord) {
-    if (!record.contact?.id) {
-      return
-    }
-
-    const popup = openPopup(
-      html`
-        <contact-popup
-          .contactId=${record.contact.id}
-          @change=${() => {
-            this.grist.fetch()
-          }}
-          @detach=${() => {
-            this.detachContact(record)
-          }}
-          detachable
-        ></contact-popup>
-      `,
-      {
-        backdrop: true,
-        size: 'large',
-        title: i18next.t('title.contact')
-      }
-    )
-  }
-
-  async openContactSelector(record: GristRecord) {
-    const popup = openPopup(
-      html`
-        <contact-selector .confirmCallback=${selected => this.attachContact(record, selected)}></contact-selector>
-      `,
-      {
-        backdrop: true,
-        size: 'large',
-        title: i18next.t('title.contact')
-      }
-    )
-  }
-
-  async attachContact(record: GristRecord, contact: Contact) {
-    if (record.id) {
-      const response = await client.mutate({
-        mutation: gql`
-          mutation ($id: String!, $contactId: String!) {
-            attachContact(id: $id, contactId: $contactId) {
-              id
-            }
-          }
-        `,
-        variables: {
-          id: record.id,
-          contactId: contact.id
-        }
-      })
-
-      this.grist.fetch()
-    } else if (contact?.id) {
-      this.grist.addRecord({
-        name: contact.name,
-        contact: {
-          id: contact.id,
-          name: contact.name,
-          email: (contact as any).email,
-          phone: (contact as any).phone,
-          address: (contact as any).address
-        }
-      })
-      this.grist.refresh()
-      await this.grist.requestUpdate()
-
-      this.grist.checkDirties()
-    }
-  }
-
-  async detachContact(record) {
-    if (record.id) {
-      const response = await client.mutate({
-        mutation: gql`
-          mutation ($id: String!) {
-            detachContact(id: $id) {
-              id
-            }
-          }
-        `,
-        variables: {
-          id: record.id
-        }
-      })
-
-      this.grist.fetch()
-    } else {
-      record.contact = null
-      this.grist.refresh()
-    }
-  }
-
-  async attachSystemUser(record) {
-    if (!record.user) {
-      await client.mutate({
-        mutation: gql`
-          mutation ($employeeId: String!) {
-            registerEmployeeAsSystemUser(employeeId: $employeeId)
-          }
-        `,
-        variables: {
-          employeeId: record.id
-        }
-      })
-    }
-
-    this.grist.fetch()
-  }
-}