@things-factory/organization 8.0.0 → 9.0.0-beta.3

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

@@ -1,235 +0,0 @@
-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

@@ -1,229 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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)
-  }
-}