@things-factory/organization 8.0.0-beta.0 → 8.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/organization",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.2",
   "main": "dist-server/index.js",
   "browser": "dist-client/index.js",
   "things-factory": true,
@@ -33,10 +33,10 @@
     "@operato/graphql": "^8.0.0-beta",
     "@operato/p13n": "^8.0.0-beta",
     "@operato/shell": "^8.0.0-beta",
-    "@things-factory/auth-base": "^8.0.0-beta.0",
-    "@things-factory/code-ui": "^8.0.0-beta.0",
-    "@things-factory/contact": "^8.0.0-beta.0",
-    "@things-factory/shell": "^8.0.0-beta.0"
+    "@things-factory/auth-base": "^8.0.0-beta.2",
+    "@things-factory/code-ui": "^8.0.0-beta.2",
+    "@things-factory/contact": "^8.0.0-beta.2",
+    "@things-factory/shell": "^8.0.0-beta.2"
   },
-  "gitHead": "add6fb8224b2cb19cbea47bed6a5ecb0424c9a28"
+  "gitHead": "f03431a09435511b2595515658f9cb8f78ba4ebb"
 }

package/client/bootstrap.ts

@@ -1,32 +0,0 @@
-import { registerEditor, registerRenderer, registerFilterRenderer } from '@operato/data-grist'
-
-import { FilterResourceCode } from '@operato/app/filters-form/filter-resource-code.js'
-import { FilterResourceObject } from '@operato/app/filters-form/filter-resource-object.js'
-import { FilterDepartmentObject } from './filters-form/filter-department-object.js'
-
-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)
-
-  registerFilterRenderer('code', [FilterResourceCode])
-  registerFilterRenderer('object', [FilterResourceObject])
-  registerFilterRenderer('resource-object', [FilterResourceObject])
-  registerFilterRenderer('department-object', [FilterDepartmentObject])
-}

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

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

@@ -1,91 +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 { 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

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