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

package/client/bootstrap.ts

@@ -0,0 +1,23 @@
+import { registerEditor, registerRenderer } from '@operato/data-grist'
+
+import { GristRendererDepartmentObject } from './grist-editor/grist-renderer-department-object'
+import { GristEditorDepartmentObject } from './grist-editor/grist-editor-department-object'
+import { GristEditorAssignees } from './grist-editor/grist-editor-assignees'
+import { GristRendererAssignees } from './grist-editor/grist-renderer-assignees'
+import { GristEditorRecipients } from './grist-editor/grist-editor-recipients'
+import { GristRendererRecipients } from './grist-editor/grist-renderer-recipients'
+import { GristEditorApprovalLine } from './grist-editor/grist-editor-approval-line'
+import { GristRendererApprovalLine } from './grist-editor/grist-renderer-approval-line'
+
+export default function bootstrap() {
+  /* register grist renderer/editor for id */
+  registerEditor('department-object', GristEditorDepartmentObject)
+  registerEditor('approval-line', GristEditorApprovalLine)
+  registerEditor('assignees', GristEditorAssignees)
+  registerEditor('recipients', GristEditorRecipients)
+
+  registerRenderer('department-object', GristRendererDepartmentObject)
+  registerRenderer('approval-line', GristRendererApprovalLine)
+  registerRenderer('assignees', GristRendererAssignees)
+  registerRenderer('recipients', GristRendererRecipients)
+}

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

@@ -0,0 +1,119 @@
+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-brief')
+export class ApprovalLineBrief extends localize(i18next)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+
+      ol {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+      }
+
+      li {
+        position: relative;
+        width: 85px;
+        text-align: center;
+        color: rgba(255, 255, 255, 0.7);
+      }
+
+      li div {
+        text-align: center;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      span:before {
+        content: '';
+        height: 2px;
+        width: 70px;
+        display: block;
+        position: absolute;
+        margin-left: -70px;
+        margin-top: 6px;
+        background-color: rgba(0, 0, 0, 0.4);
+      }
+
+      span {
+        display: block;
+        width: 15px;
+        height: 15px;
+        margin: auto;
+        background-color: rgba(0, 0, 0, 0.4);
+        border-radius: 50%;
+        color: var(--md-sys-color-on-primary);
+        line-height: 1.2;
+      }
+
+      [past] span {
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+      }
+
+      [current] span {
+        background-color: #84d600;
+        color: var(--md-sys-color-on-primary);
+      }
+
+      [current] {
+        font-weight: bold;
+        color: var(--md-sys-color-on-primary);
+      }
+
+      [past] span:before,
+      [current] span:before {
+        background-color: rgba(255, 255, 255, 0.9);
+      }
+
+      li:first-child span:before {
+        display: none;
+      }
+    `
+  ]
+
+  @property({ type: Array }) model: ApprovalLineItem[] = []
+  @property({ type: Number }) current: number = -1
+
+  render() {
+    const items = this.model || []
+    const current = this.current
+
+    return html`
+      <ol>
+        ${this.model
+          ? html` <li approver ?current=${this.current <= 0} ?past=${this.current > 0}><span>1</span>ME</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} ?past=${this.current > order} title=${name || ''}>
+        <span>${order + 1}</span>
+        <div>${name}</div>
+      </li>
+    `
+  }
+}

package/client/component/approval-line-items-editor-popup.ts

@@ -0,0 +1,91 @@
+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 { OxPrompt } from '@operato/popup/ox-prompt.js'
+
+import { ApprovalLineItemsEditor } from './approval-line-items-editor'
+import { ApprovalLineItem } from '../types/approval-line'
+
+/**
+ * 결재선의 각 결재자 리스트를 편집한다.
+ */
+@customElement('approval-line-items-editor-popup')
+export class ApprovalLineItemsEditorPopup extends localize(i18next)(LitElement) {
+  static styles = [
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      approval-line-items-editor {
+        flex: 1;
+      }
+    `
+  ]
+
+  @property({ type: Array }) value?: ApprovalLineItem[]
+
+  @property({ type: Object }) confirmCallback?: (value?: ApprovalLineItem[] | null) => void
+  @query('approval-line-items-editor') editor!: ApprovalLineItemsEditor
+
+  /* this.value는 (원인불명으로) 값이 Reset되므로, 변화값을 유지하도록 별도로 changedValue를 사용함 */
+  private changedValue?: ApprovalLineItem[] = this.value
+
+  render() {
+    return html`
+      <approval-line-items-editor
+        .value=${this.value}
+        @change=${(e: CustomEvent) => {
+          this.changedValue = [...e.detail]
+        }}
+      ></approval-line-items-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
+  }
+
+  async onEmpty() {
+    const reaction = await OxPrompt.open({
+      title: i18next.t('text.are_you_sure'),
+      text: i18next.t('prompt.sure to empty approval line ?'),
+      confirmButton: { text: i18next.t('button.confirm') },
+      cancelButton: { text: i18next.t('button.cancel') }
+    })
+
+    if (reaction) {
+      this.confirmCallback && this.confirmCallback(null)
+      closePopup(this)
+    }
+  }
+
+  onCancel() {
+    closePopup(this)
+  }
+
+  onConfirm() {
+    this.confirmCallback && this.confirmCallback(this.changedValue)
+
+    closePopup(this)
+  }
+}

package/client/component/approval-line-items-editor.ts

@@ -0,0 +1,325 @@
+import './approval-line-view'
+import './approval-line-selector'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { DataGrist, FetchOption, getEditor, getRenderer } from '@operato/data-grist'
+import { isMobileDevice } from '@operato/utils'
+import { ButtonContainerStyles, CommonHeaderStyles } from '@operato/styles'
+import { openPopup, PopupHandle } from '@operato/layout'
+
+import { ApprovalLineView } from './approval-line-view'
+import { ApprovalLine, ApprovalLineItem } from '../types/approval-line'
+
+/**
+ * 결재선의 각 결재자 리스트를 편집한다.
+ */
+@customElement('approval-line-items-editor')
+export class ApprovalLineItemsEditor extends localize(i18next)(LitElement) {
+  static styles = [
+    CommonHeaderStyles,
+    ButtonContainerStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      approval-line-view {
+        min-height: 100px;
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+
+      .header {
+        grid-template-areas: 'filters actions';
+      }
+    `
+  ]
+
+  @property({ type: Array }) value?: ApprovalLineItem[]
+
+  @state() gristConfig?: any
+
+  @query('ox-grist') grist?: DataGrist
+  @query('approval-line-view') view?: ApprovalLineView
+
+  private popup?: PopupHandle
+
+  render() {
+    return html`
+      <approval-line-view .model=${this.value}></approval-line-view>
+      <ox-grist
+        .mode=${isMobileDevice() ? 'CARD' : 'GRID'}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        @record-change=${e => {
+          this.value = ((this.grist as any)?._data.records || [])
+            .map(v => {
+              return { type: v.type, approver: v.approver }
+            })
+            .filter(v => v.type)
+
+          this.dispatchEvent(
+            new CustomEvent('change', {
+              bubbles: true,
+              composed: true,
+              detail: this.value
+            })
+          )
+        }}
+      >
+        <div slot="headroom" class="header">
+          <div class="actions">
+            <button @click=${this.openSelector.bind(this)}>
+              <md-icon>content_copy</md-icon>${i18next.t('button.copy from')}
+            </button>
+
+            <button danger @click=${() => this.deleteDataItems()}>
+              <md-icon>delete</md-icon>${i18next.t('button.delete')}
+            </button>
+          </div>
+        </div>
+      </ox-grist>
+    `
+  }
+
+  async firstUpdated() {
+    this.gristConfig = {
+      list: {
+        fields: ['type', 'approver']
+      },
+      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', 'MyDepartment', 'MySupervisor', 'Myself']
+          },
+          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'),
+                    pagination: { pages: [50, 100, 200] },
+                    basicArgs: { filters: [{ name: 'active', operator: 'eq', value: 'true' }] },
+                    queryName: 'employees',
+                    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'
+                        }
+                      },
+                      {
+                        type: 'code',
+                        name: 'jobPosition',
+                        width: 110,
+                        header: { renderer: () => i18next.t('label.job-position') },
+                        record: {
+                          editable: false,
+                          codeName: 'JOB_POSITION'
+                        }
+                      },
+                      {
+                        type: 'code',
+                        name: 'jobResponsibility',
+                        width: 200,
+                        header: { renderer: () => i18next.t('label.job-responsibility') },
+                        record: {
+                          editable: false,
+                          codeName: 'JOB_RESPONSIBILITY'
+                        }
+                      },
+                      {
+                        type: 'date',
+                        name: 'hiredOn',
+                        header: { renderer: () => i18next.t('field.hired-on') },
+                        width: 100
+                      }
+                    ],
+                    list: { fields: ['controlNo', 'name', 'alias', 'hiredOn'] },
+                    valueField: 'id',
+                    nameField: 'name',
+                    descriptionField: 'controlNo'
+                  }
+                  break
+                case 'Department':
+                  options = {
+                    title: i18next.t('title.department list'),
+                    queryName: 'departments',
+                    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 'Role':
+                  options = {
+                    title: i18next.t('title.lookup role'),
+                    queryName: 'roles'
+                  }
+                  break
+                default:
+                  return null
+              }
+
+              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: []
+    }
+  }
+
+  fetchHandler({ filters, page, limit, sortings = [] }: FetchOption) {
+    const value = [...(this.value || [])]
+    this.value = value
+
+    return {
+      total: value.length,
+      records: value
+    }
+  }
+
+  async deleteDataItems() {
+    this.grist?.deleteSelectedRecords(false)
+  }
+
+  openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    const confirmCallback = async (selected?: ApprovalLine) => {
+      this.value = [...(selected?.model || [])]
+
+      this.grist!.fetch()
+
+      this.dispatchEvent(
+        new CustomEvent('change', {
+          bubbles: true,
+          composed: true,
+          detail: this.value
+        })
+      )
+    }
+
+    this.popup = openPopup(
+      html` <approval-line-selector .confirmCallback=${confirmCallback.bind(this)}></approval-line-selector> `,
+      {
+        backdrop: true,
+        size: 'large',
+        search: {
+          placeholder: i18next.t('title.approval-line template list'),
+          handler: (instance: any, value: any) => {
+            /* instance: template instance */
+            instance.searchText(value)
+          }
+        }
+      }
+    )
+  }
+}