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

package/client/component/assignees-editor.ts

@@ -0,0 +1,217 @@
+import '@material/web/icon/icon.js'
+import './assignees-view'
+
+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 } from '@operato/styles'
+
+import { AssigneeItem } from '../types/org-member'
+
+/**
+ * Assignee 리스트를 편집한다.
+ */
+@customElement('assignees-editor')
+export class AssigneesEditor extends localize(i18next)(LitElement) {
+  static styles = [
+    ButtonContainerStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      assignees-view {
+        min-height: 100px;
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+
+      #select {
+        display: flex;
+        justify-content: end;
+        padding: 10px;
+      }
+    `
+  ]
+
+  @property({ type: Array }) value?: AssigneeItem[]
+
+  @state() gristConfig?: any
+
+  @query('ox-grist') grist?: DataGrist
+
+  render() {
+    return html`
+      <assignees-view .value=${this.value}></assignees-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, assignee: v.assignee }
+            })
+            .filter(v => v.type)
+
+          this.dispatchEvent(
+            new CustomEvent('change', {
+              bubbles: true,
+              composed: true,
+              detail: this.value
+            })
+          )
+        }}
+      >
+        <div slot="headroom">
+          <div id="select">
+            <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', 'assignee']
+      },
+      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: 'assignee',
+          header: i18next.t('field.assignee'),
+          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 value = [...(this.value || [])]
+    this.value = value
+
+    return {
+      total: value.length,
+      records: value
+    }
+  }
+
+  async deleteDataItems() {
+    this.grist?.deleteSelectedRecords(false)
+  }
+}

package/client/component/assignees-view.ts

@@ -0,0 +1,55 @@
+import { css, html, LitElement, TemplateResult } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { AssigneeItem } from '../types/org-member'
+
+@customElement('assignees-view')
+export class AssigneesView extends localize(i18next)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        gap: 10px;
+        padding: 10px;
+
+        align-items: center;
+
+        background-color: var(--md-sys-color-surface);
+
+        --md-icon-size: 3em;
+        color: var(--secondary-color, black);
+      }
+
+      div[assignee] {
+        padding: 5px;
+        border-radius: 5px;
+        border: 2px solid var(--primary-color, black);
+      }
+    `
+  ]
+
+  @property({ type: Object }) value?: AssigneeItem[]
+
+  render() {
+    const items = this.value || []
+
+    return html` ${items.map((item, order) => this.renderItem(item, order + 1))} `
+  }
+
+  renderItem(item: AssigneeItem, order: number): TemplateResult {
+    const { type, assignee } = item
+    const { name, description, controlNo } = assignee || {}
+    const subname = (description || controlNo) && `(${description || controlNo})`
+
+    return html`
+      <div assignee>
+        <div>${type}</div>
+        <div><span name>${name}</span>${subname}</div>
+      </div>
+    `
+  }
+}

package/client/component/department-selector.ts

@@ -0,0 +1,151 @@
+import '@material/web/icon/icon.js'
+import '@operato/data-tree'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { client } from '@operato/graphql'
+import { i18next } from '@operato/i18n'
+import { closePopup } from '@operato/popup'
+import { CommonHeaderStyles } from '@operato/styles'
+
+import { Department } from '../types/department'
+
+const departmentFragment = gql`
+  fragment SubDepartment on Department {
+    id
+    controlNo
+    name
+    description
+
+    manager {
+      id
+      name
+      controlNo
+      photo
+      email
+    }
+    active
+    picture
+
+    updater {
+      id
+      name
+    }
+    updatedAt
+  }
+`
+
+@customElement('department-selector')
+export class DepartmentSelector 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%);
+
+        overflow: auto;
+      }
+
+      ox-tree-vertical {
+        flex: 1;
+      }
+    `
+  ]
+
+  @property({ type: Object }) confirmCallback?: (selected?: any) => void
+  @property({ type: Object }) value?: Department
+
+  @state() root?: Department
+
+  render() {
+    return html`
+      <ox-tree-vertical
+        .data=${this.root}
+        .selected=${this.value}
+        @select=${e => this.onSelect(e, false)}
+        @select-confirm=${e => this.onSelect(e, true)}
+        id-property="controlNo"
+        label-property="name"
+        description-property="description"
+      ></ox-tree-vertical>
+
+      <div class="footer" style="margin-left:unset;">
+        <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>
+    `
+  }
+
+  onSelect(e: CustomEvent, confirm?: boolean) {
+    this.value = e.detail as Department
+
+    if (confirm) {
+      this.onConfirm()
+    }
+  }
+
+  onEmpty() {
+    this.confirmCallback && this.confirmCallback(null)
+    closePopup(this)
+  }
+
+  onCancel() {
+    closePopup(this)
+  }
+
+  onConfirm() {
+    this.confirmCallback && this.confirmCallback(this.value)
+    closePopup(this)
+  }
+
+  async firstUpdated() {
+    const response = await client.query({
+      query: gql`
+        query {
+          responses: departmentRoots {
+            total
+            items {
+              ...SubDepartment
+              children {
+                ...SubDepartment
+                children {
+                  ...SubDepartment
+                  children {
+                    ...SubDepartment
+                    children {
+                      ...SubDepartment
+                      children {
+                        ...SubDepartment
+                        children {
+                          ...SubDepartment
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        ${departmentFragment}
+      `
+    })
+
+    const { items: records, total } = response.data.responses
+
+    this.root = records[0]
+  }
+}

package/client/component/department-view.ts

@@ -0,0 +1,107 @@
+import '@operato/property-editor'
+import '@operato/property-editor/ox-properties-dynamic-view.js'
+
+import { LitElement, css, html, PropertyValueMap } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+
+@customElement('department-view')
+export class DepartmentView extends localize(i18next)(ScopedElementsMixin(LitElement)) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        overflow: auto;
+      }
+
+      ox-properties-dynamic-view {
+        flex: 1;
+
+        display: flex;
+        flex-direction: column;
+      }
+    `
+  ]
+
+  @property({ type: Object }) department: any
+
+  @query('ox-properties-dynamic-view') dynamicView!: any
+
+  @state() private properties: any
+
+  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+    this.properties = [
+      {
+        type: 'string',
+        name: 'controlNo',
+        label: 'control-no'
+      },
+      {
+        type: 'string',
+        name: 'name',
+        label: 'name'
+      },
+      {
+        type: 'string',
+        name: 'description',
+        label: 'description'
+      },
+      {
+        type: 'resource-object',
+        name: 'manager',
+        label: 'manager',
+        property: {
+          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' },
+            { name: 'email', header: { renderer: () => i18next.t('field.email') } }
+          ],
+          list: { fields: ['controlNo', 'name', 'email'] },
+          valueField: 'id',
+          nameField: 'name',
+          descriptionField: 'controlNo'
+        }
+      },
+      {
+        type: 'boolean',
+        name: 'active',
+        label: 'active'
+      },
+      /*{
+        type: 'select',
+        name: 'state',
+        label: 'state',
+        property: {
+          options: ['', 'STATUS_A', 'STATUS_B']   
+        }
+      },*/
+      {
+        type: 'image',
+        name: 'picture',
+        label: 'picture'
+      }
+    ]
+  }
+
+  render() {
+    return html`
+      <ox-properties-dynamic-view
+        .props=${this.properties}
+        .value=${this.department}
+        @property-change=${this.onPropertyChange.bind(this)}
+      ></ox-properties-dynamic-view>
+    `
+  }
+
+  onPropertyChange(e: CustomEvent) {
+    this.department = e.detail
+  }
+}

package/client/component/index.ts

@@ -0,0 +1,16 @@
+export * from './department-selector'
+export * from './approval-line-selector'
+
+export * from './department-view'
+
+export * from './approval-line-view'
+export * from './approval-line-items-editor'
+export * from './approval-line-items-editor-popup'
+
+export * from './assignees-view'
+export * from './assignees-editor'
+export * from './assignees-editor-popup'
+
+export * from './recipients-view'
+export * from './recipients-editor'
+export * from './recipients-editor-popup'

package/client/component/recipients-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 { RecipientsEditor } from './recipients-editor'
+import { AssigneeItem } from '../types/org-member'
+
+/**
+ * 결재선의 각 결재자 리스트를 편집한다.
+ */
+@customElement('recipients-editor-popup')
+export class RecipientsEditorPopup extends localize(i18next)(LitElement) {
+  static styles = [
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      recipients-editor {
+        flex: 1;
+      }
+    `
+  ]
+
+  @property({ type: Array }) value?: AssigneeItem[]
+
+  @property({ type: Object }) confirmCallback?: (value?: AssigneeItem[] | null) => void
+  @query('recipients-editor') editor!: RecipientsEditor
+
+  /* this.value는 (원인불명으로) 값이 Reset되므로, 변화값을 유지하도록 별도로 changedValue를 사용함 */
+  private changedValue?: AssigneeItem[] = this.value
+
+  render() {
+    return html`
+      <recipients-editor
+        .value=${this.value}
+        @change=${(e: CustomEvent) => {
+          this.changedValue = [...e.detail]
+        }}
+      ></recipients-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)
+  }
+}