@things-factory/organization 8.0.0-beta.9 → 8.0.0

package/client/component/approval-line-selector.ts

@@ -0,0 +1,235 @@
+import '@material/web/icon/icon.js'
+import '@operato/data-grist'
+import './approval-line-view'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import {
+  getRenderer,
+  DataGrist,
+  FetchOption,
+  GristEventHandler,
+  GristData,
+  GristRecord,
+  ZERO_DATA
+} from '@operato/data-grist'
+import { client } from '@operato/graphql'
+import { i18next } from '@operato/i18n'
+import { closePopup } from '@operato/popup'
+import { isMobileDevice } from '@operato/utils'
+import { CommonHeaderStyles } from '@operato/styles'
+
+import { ApprovalLineView } from './approval-line-view'
+
+@customElement('approval-line-selector')
+export class ApprovalLineSelector extends LitElement {
+  static styles = [
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+
+        width: var(--overlay-center-normal-width, 50%);
+        height: var(--overlay-center-normal-height, 50%);
+      }
+
+      approval-line-view {
+        min-height: 100px;
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+    `
+  ]
+
+  @property({ type: String }) value?: string
+  @property({ type: Object }) config: any
+  @property({ type: Object }) data: GristData = ZERO_DATA
+  @property({ type: Object }) confirmCallback?: (record?: GristRecord) => Promise<void>
+  @property({ type: Array }) selectedRecords: GristRecord[] = []
+
+  @query('ox-grist') grist!: DataGrist
+  @query('approval-line-view') view?: ApprovalLineView
+
+  render() {
+    return html`
+      <approval-line-view></approval-line-view>
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.config}
+        .data=${this.data}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        .selectedRecords=${this.selectedRecords}
+        @select-record-change=${e => {
+          this.view!.model = this.selected?.model || []
+        }}
+      >
+      </ox-grist>
+
+      <div class="footer">
+        <button @click=${this.onEmpty.bind(this)}>
+          <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}
+        </button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)} done><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
+      </div>
+    `
+  }
+
+  searchText(value: string) {
+    this.grist!.searchText = value
+  }
+
+  onEmpty() {
+    this.confirmCallback && this.confirmCallback()
+    closePopup(this)
+  }
+
+  onCancel() {
+    closePopup(this)
+  }
+
+  onConfirm() {
+    this.confirmCallback && this.confirmCallback(this.selected)
+    closePopup(this)
+  }
+
+  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {
+    const response = await client.query({
+      query: gql`
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          responses: approvalLineReferences(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              name
+              description
+              ownerType
+              owner {
+                id
+                name
+                description
+                controlNo
+              }
+              model {
+                type
+                approver {
+                  id
+                  name
+                  description
+                  controlNo
+                }
+              }
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        filters,
+        pagination: { page, limit },
+        sortings
+      }
+    })
+
+    return {
+      total: response.data.responses.total || 0,
+      records: response.data.responses.items || []
+    }
+  }
+
+  async firstUpdated() {
+    this.config = {
+      list: {
+        fields: ['name', 'description'],
+        details: ['ownerType', 'owner']
+      },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: false },
+        {
+          type: 'string',
+          name: 'name',
+          header: i18next.t('field.name'),
+          record: {
+            editable: false
+          },
+          filter: 'search',
+          sortable: true,
+          width: 150
+        },
+        {
+          type: 'string',
+          name: 'description',
+          header: i18next.t('field.description'),
+          record: {
+            editable: false
+          },
+          filter: 'search',
+          width: 200
+        },
+        {
+          type: 'string',
+          name: 'ownerType',
+          header: i18next.t('field.owner-type'),
+          record: {
+            editable: false
+          },
+          width: 200
+        },
+        {
+          type: 'resource-object',
+          name: 'owner',
+          header: i18next.t('field.owner'),
+          record: {
+            editable: false,
+            renderer: function (value, column, record, rowIndex, field) {
+              var options = {}
+              switch (record.ownerType) {
+                case 'Employee':
+                  options = {
+                    valueField: 'id',
+                    nameField: 'name',
+                    descriptionField: 'controlNo'
+                  }
+                  break
+                case 'Common':
+                default:
+                  return
+              }
+
+              var dynamicRecord = { ...column.record, options }
+
+              return getRenderer(column.type)(value, { ...column, record: dynamicRecord }, record, rowIndex, field)
+            }
+          },
+          width: 200
+        }
+      ],
+      rows: {
+        selectable: {
+          multiple: false
+        },
+        appendable: false,
+        handlers: {
+          click: 'select-row',
+          dblclick: ((columns, data, column, record, rowIndex, field) => {
+            this.onConfirm()
+          }) as GristEventHandler
+        }
+      }
+    }
+  }
+
+  get selected() {
+    var selected = this.grist.selected
+
+    return selected && selected.length > 0 ? selected[0] : undefined
+  }
+}

package/client/component/approval-line-templates-manager.ts

@@ -0,0 +1,229 @@
+import '@material/web/icon/icon.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { FetchOption, getEditor, getRenderer } from '@operato/data-grist'
+import { isMobileDevice } from '@operato/utils'
+import { CommonHeaderStyles } from '@operato/styles'
+
+import { ApprovalLine } from '../types/approval-line'
+
+/**
+ * 결재선 관리를 위해서
+ * 1. 결재선 리스트를 조회한다.
+ * 2. 결재선을 생성, 삭제, 수정한다.
+ */
+@customElement('approval-line-templates-manager')
+export class ApprovalLineTemplatesManager extends localize(i18next)(LitElement) {
+  static styles = [
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+    `
+  ]
+
+  @property({ type: Object }) gristConfig?: any
+  @property({ type: Object }) approvalLine?: ApprovalLine
+
+  @query('ox-grist') grist?: HTMLElement & { fetch: any; commit: any; deleteSelectedRecords: any; data: any }
+
+  render() {
+    return html`
+      <ox-grist
+        .mode=${isMobileDevice() ? 'CARD' : 'GRID'}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+      ></ox-grist>
+
+      <div class="footer">
+        <button danger @click=${this._deleteDataItems.bind(this)}>
+          <md-icon>delete</md-icon>${i18next.t('button.delete')}
+        </button>
+        <button @click=${this._updateDataItems.bind(this)} done>
+          <md-icon>save</md-icon>${i18next.t('button.save')}
+        </button>
+      </div>
+    `
+  }
+
+  async firstUpdated() {
+    this.gristConfig = {
+      list: {
+        fields: ['name', 'description', 'active']
+      },
+      columns: [
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        { type: 'gutter', gutterName: 'sequence' },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'arrow_upward',
+          handlers: {
+            click: 'move-up'
+          }
+        },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'arrow_downward',
+          handlers: {
+            click: 'move-down'
+          }
+        },
+        {
+          type: 'select',
+          name: 'type',
+          header: i18next.t('field.type'),
+          record: {
+            editable: true,
+            options: ['', 'Employee', 'Department', 'Role']
+          },
+          width: 140
+        },
+        {
+          type: 'resource-object',
+          name: 'approver',
+          header: i18next.t('field.approver'),
+          record: {
+            editable: true,
+            editor: function (value, column, record, rowIndex, field) {
+              var options = {}
+              switch (record.type) {
+                case 'Employee':
+                  options = {
+                    title: i18next.t('title.employee list'),
+                    queryName: 'employees',
+                    columns: [
+                      { name: 'id', hidden: true },
+                      {
+                        name: 'controlNo',
+                        header: { renderer: () => i18next.t('field.control-no') },
+                        filter: 'search'
+                      },
+                      { name: 'name', header: { renderer: () => i18next.t('field.name') }, filter: 'search' }
+                    ],
+                    list: { fields: ['name', 'control-no'] },
+                    valueField: 'id',
+                    nameField: 'name',
+                    descriptionField: 'controlNo'
+                  }
+                  break
+                case 'Department':
+                  options = {
+                    title: i18next.t('title.department list'),
+                    queryName: 'departments'
+                  }
+                  break
+                case 'Role':
+                  options = {
+                    title: i18next.t('title.lookup role'),
+                    queryName: 'roles'
+                  }
+                  break
+                default:
+                  options = {}
+              }
+
+              var dynamicRecord = { ...column.record, options }
+
+              return getEditor(column.type)(value, { ...column, record: dynamicRecord }, record, rowIndex, field)
+            },
+            renderer: function (value, column, record, rowIndex, field) {
+              var options = {}
+              switch (record.type) {
+                case 'Employee':
+                  options = {
+                    valueField: 'id',
+                    nameField: 'name',
+                    descriptionField: 'controlNo'
+                  }
+                  break
+                case 'Department':
+                case 'Role':
+                default:
+                  break
+              }
+
+              var dynamicRecord = { ...column.record, options }
+
+              return getRenderer(column.type)(value, { ...column, record: dynamicRecord }, record, rowIndex, field)
+            }
+          },
+          width: 180
+        }
+      ],
+      rows: {
+        selectable: {
+          multiple: true
+        }
+      },
+      pagination: {
+        infinite: true
+      },
+      sorters: []
+    }
+  }
+
+  async fetchHandler({ filters, page, limit, sortings = [] }: FetchOption) {
+    const model = this.approvalLine?.model || []
+
+    return {
+      total: model.length,
+      records: model
+    }
+  }
+
+  async _updateDataItems() {
+    this.grist?.commit()
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($id: String!, $patch: ApprovalLinePatch!) {
+          updateApprovalLine(id: $id, patch: $patch) {
+            name
+          }
+        }
+      `,
+      variables: {
+        id: this.approvalLine!.id,
+        patch: {
+          model: this.grist?.data.records,
+          cuFlag: 'M'
+        }
+      }
+    })
+
+    if (!response.errors) {
+      await document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            message: i18next.t('text.info_x_successfully', {
+              x: i18next.t('button.save')
+            })
+          }
+        })
+      )
+    }
+  }
+
+  async _deleteDataItems() {
+    if (!confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
+      return
+    }
+
+    this.grist?.deleteSelectedRecords(false)
+  }
+}

package/client/component/approval-line-view.ts

@@ -0,0 +1,122 @@
+import { css, html, LitElement, TemplateResult } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { ApprovalLineItem } from '../types/approval-line'
+import { OrgMemberTargetType } from '../types/org-member'
+
+@customElement('approval-line-view')
+export class ApprovalLineView extends localize(i18next)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        padding: 10px;
+        justify-content: center;
+        align-items: center;
+
+        --md-icon-size: 3em;
+        color: var(--md-sys-color-on-surface);
+        background-color: var(--md-sys-color-surface-variant);
+      }
+
+      ol {
+        position: relative;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        gap: 25px;
+        list-style-type: none;
+      }
+
+      li {
+        text-align: center;
+        font-size: var(--fontsize-default);
+      }
+
+      li:before {
+        content: '';
+        height: 2px;
+        width: 25px;
+        display: block;
+        position: absolute;
+        margin-left: -25px;
+        margin-top: 10px;
+        background-color: var(--md-sys-color-primary);
+        opacity: 0.4;
+      }
+
+      li:first-child:before {
+        display: none;
+      }
+
+      span {
+        display: block;
+        margin: auto;
+        margin-bottom: var(--spacing-small);
+        color: var(--md-sys-color-primary);
+        background-color: var(--md-sys-color-surface-variant);
+        border-radius: 5px;
+        border: 2px solid var(--md-sys-color-primary);
+        font-size: var(--fontsize-small);
+        line-height: 1;
+        padding: var(--spacing-small) var(--spacing-medium);
+      }
+
+      [approver][current] span {
+        background-color: var(--md-sys-color-primary);
+        border-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
+      }
+
+      [approver][current] {
+        font-weight: bold;
+      }
+
+      [approver][current] ~ li span {
+        background-color: rgba(0, 0, 0, 0.5);
+        border-color: transparent;
+        color: var(--md-sys-color-on-primary);
+      }
+
+      [approver][current] ~ li:before {
+        background-color: rgba(0, 0, 0, 0.4);
+        opacity: 1;
+      }
+    `
+  ]
+
+  @property({ type: Array }) model?: ApprovalLineItem[]
+  @property({ type: Number }) current?: number = -1
+
+  render() {
+    const items = this.model || []
+
+    return html`
+      <ol>
+        ${this.model ? html` <li approver><span>ME</span>${i18next.t('label.myself')}</li> ` : html``}
+        ${items.map((item, order) => this.renderItem(item, order + 1))}
+      </ol>
+    `
+  }
+
+  renderItem(item: ApprovalLineItem, order: number): TemplateResult {
+    const { type, approver } = item
+    const { name } = approver || {
+      name: [OrgMemberTargetType.Myself, OrgMemberTargetType.MySupervisor, OrgMemberTargetType.MyDepartment].includes(
+        type!
+      )
+        ? i18next.t(`label.${type}`)
+        : ''
+    }
+
+    return html`
+      <li approver ?current=${this.current == order}>
+        <span>${i18next.t('label.' + type)}</span>
+        ${name}
+      </li>
+    `
+  }
+}

package/client/component/assignees-editor-popup.ts

@@ -0,0 +1,79 @@
+import '@material/web/icon/icon.js'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { CommonHeaderStyles } from '@operato/styles'
+import { closePopup } from '@operato/popup'
+
+import { AssigneesEditor } from './assignees-editor'
+import { AssigneeItem } from '../types/org-member'
+
+/**
+ * 결재선의 각 결재자 리스트를 편집한다.
+ */
+@customElement('assignees-editor-popup')
+export class AssigneesEditorPopup extends localize(i18next)(LitElement) {
+  static styles = [
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      assignees-editor {
+        flex: 1;
+      }
+    `
+  ]
+
+  @property({ type: Array }) value?: AssigneeItem[]
+
+  @property({ type: Object }) confirmCallback?: (value?: AssigneeItem[] | null) => void
+  @query('assignees-editor') editor!: AssigneesEditor
+
+  /* this.value는 (원인불명으로) 값이 Reset되므로, 변화값을 유지하도록 별도로 changedValue를 사용함 */
+  private changedValue?: AssigneeItem[] = this.value
+
+  render() {
+    return html`
+      <assignees-editor
+        .value=${this.value}
+        @change=${(e: CustomEvent) => {
+          this.changedValue = [...e.detail]
+        }}
+      ></assignees-editor>
+
+      <div class="footer">
+        <button @click=${this.onEmpty.bind(this)}>
+          <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}
+        </button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)} done><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
+      </div>
+    `
+  }
+
+  firstUpdated() {
+    this.changedValue = this.value
+  }
+
+  onEmpty() {
+    this.confirmCallback && this.confirmCallback(null)
+    closePopup(this)
+  }
+
+  onCancel() {
+    closePopup(this)
+  }
+
+  onConfirm() {
+    this.confirmCallback && this.confirmCallback(this.changedValue)
+
+    closePopup(this)
+  }
+}