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

package/client/component/recipients-editor.ts

@@ -0,0 +1,212 @@
+import '@material/web/icon/icon.js'
+import './recipients-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 { ButtonContainerStyles, CommonHeaderStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
+
+import { AssigneeItem } from '../types/org-member'
+
+/**
+ * Assignee 리스트를 편집한다.
+ */
+@customElement('recipients-editor')
+export class RecipientsEditor extends localize(i18next)(LitElement) {
+  static styles = [
+    CommonHeaderStyles,
+    ButtonContainerStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      recipients-view {
+        min-height: 100px;
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+    `
+  ]
+
+  @property({ type: Array }) value?: AssigneeItem[]
+
+  @state() gristConfig?: any
+
+  @query('ox-grist') grist?: DataGrist
+
+  render() {
+    return html`
+      <recipients-view .value=${this.value}></recipients-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" class="header">
+          <div id="actions">
+            <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/recipients-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('recipients-view')
+export class RecipientsView 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/grist-editor/grist-editor-approval-line.ts

@@ -0,0 +1,70 @@
+import '@material/web/icon/icon.js'
+import '../component/approval-line-items-editor-popup.js'
+
+import { html, TemplateResult } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { i18next } from '@operato/i18n'
+import { openPopup, PopupHandle } from '@operato/layout'
+
+@customElement('grist-editor-approval-line')
+export class GristEditorApprovalLine extends OxGristEditor {
+  private popup?: PopupHandle
+  private template?: TemplateResult
+
+  get editorTemplate() {
+    const value = this.value
+    return !value || !(value instanceof Array) || value.length == 0
+      ? html``
+      : value.length == 1
+      ? html`<md-icon style="--md-icon-size:1.3em">person</md-icon>`
+      : html`<md-icon style="--md-icon-size:1.3em">group</md-icon>`
+  }
+
+  _onclick(e: Event): void {
+    e.stopPropagation()
+    this.openSelector()
+  }
+
+  _onkeydown(e: KeyboardEvent): void {
+    const key = e.key
+    if (key == 'Enter') {
+      e.stopPropagation()
+      this.openSelector()
+    }
+  }
+
+  openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    const confirmCallback = (selected?: { [field: string]: any }) => {
+      this.dispatchEvent(
+        new CustomEvent('field-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            before: this.value,
+            after: selected || [],
+            record: this.record,
+            column: this.column,
+            row: this.row
+          }
+        })
+      )
+    }
+
+    var value = this.value || []
+
+    var template =
+      this.template || html` <approval-line-items-editor-popup .value=${value} .confirmCallback=${confirmCallback.bind(this)}></approval-line-items-editor-popup> `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: i18next.t('title.approval-line editor')
+    })
+  }
+}

package/client/grist-editor/grist-editor-assignees.ts

@@ -0,0 +1,69 @@
+import '@material/web/icon/icon.js'
+import '../component/assignees-editor-popup.js'
+
+import { html, TemplateResult } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { i18next } from '@operato/i18n'
+import { openPopup, PopupHandle } from '@operato/layout'
+
+@customElement('grist-editor-assignees')
+export class GristEditorAssignees extends OxGristEditor {
+  private popup?: PopupHandle
+  private template?: TemplateResult
+
+  get editorTemplate() {
+    const value = this.value
+    return !value || !(value instanceof Array) || value.length == 0
+      ? html``
+      : value.length == 1
+      ? html`<md-icon style="--md-icon-size:1.3em">person</md-icon>`
+      : html`<md-icon style="--md-icon-size:1.3em">group</md-icon>`
+  }
+
+  _onclick(e: Event): void {
+    e.stopPropagation()
+    this.openSelector()
+  }
+
+  _onkeydown(e: KeyboardEvent): void {
+    const key = e.key
+    if (key == 'Enter') {
+      e.stopPropagation()
+      this.openSelector()
+    }
+  }
+
+  openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    const confirmCallback = (selected?: { [field: string]: any }) => {
+      this.dispatchEvent(
+        new CustomEvent('field-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            before: this.value,
+            after: selected || [],
+            record: this.record,
+            column: this.column,
+            row: this.row
+          }
+        })
+      )
+    }
+
+    var value = this.value || []
+
+    var template = this.template || html` <assignees-editor-popup .value=${value} .confirmCallback=${confirmCallback.bind(this)}></assignees-editor-popup> `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: i18next.t('title.assignees editor')
+    })
+  }
+}

package/client/grist-editor/grist-editor-department-object.ts

@@ -0,0 +1,78 @@
+import '../component/department-selector.js'
+
+import { html, TemplateResult } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { i18next } from '@operato/i18n'
+import { openPopup, PopupHandle } from '@operato/layout'
+
+@customElement('grist-editor-department-object')
+export class GristEditorDepartmentObject extends OxGristEditor {
+  private popup?: PopupHandle
+  private template?: TemplateResult
+
+  get editorTemplate() {
+    var { name, description } = this.value || {}
+
+    return html`
+      ${!this.value
+        ? html``
+        : html` <span tabindex="0" style="flex:1">${name || ''}${(description && `(${description})`) || ''}</span> `}
+    `
+  }
+
+  _onclick(e: Event): void {
+    e.stopPropagation()
+    this.openSelector()
+  }
+
+  _onkeydown(e: KeyboardEvent): void {
+    const key = e.key
+    if (key == 'Enter') {
+      e.stopPropagation()
+      this.openSelector()
+    }
+  }
+
+  openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    const confirmCallback = (selected?: { [field: string]: any }) => {
+      this.dispatchEvent(
+        new CustomEvent('field-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            before: this.value,
+            after: selected
+              ? {
+                  id: selected.id,
+                  controlNo: selected.controlNo,
+                  name: selected.name,
+                  description: selected.description
+                }
+              : null,
+            record: this.record,
+            column: this.column,
+            row: this.row
+          }
+        })
+      )
+    }
+
+    var value = this.value || {}
+
+    var template =
+      this.template ||
+      html` <department-selector .value=${value} .confirmCallback=${confirmCallback.bind(this)}></department-selector> `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: i18next.t('title.select_item')
+    })
+  }
+}

package/client/grist-editor/grist-editor-recipients.ts

@@ -0,0 +1,69 @@
+import '@material/web/icon/icon.js'
+import '../component/recipients-editor-popup.js'
+
+import { html, TemplateResult } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { i18next } from '@operato/i18n'
+import { openPopup, PopupHandle } from '@operato/layout'
+
+@customElement('grist-editor-recipients')
+export class GristEditorRecipients extends OxGristEditor {
+  private popup?: PopupHandle
+  private template?: TemplateResult
+
+  get editorTemplate() {
+    const value = this.value
+    return !value || !(value instanceof Array) || value.length == 0
+      ? html``
+      : value.length == 1
+      ? html`<md-icon style="--md-icon-size:1.3em">person</md-icon>`
+      : html`<md-icon style="--md-icon-size:1.3em">group</md-icon>`
+  }
+
+  _onclick(e: Event): void {
+    e.stopPropagation()
+    this.openSelector()
+  }
+
+  _onkeydown(e: KeyboardEvent): void {
+    const key = e.key
+    if (key == 'Enter') {
+      e.stopPropagation()
+      this.openSelector()
+    }
+  }
+
+  openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    const confirmCallback = (selected?: { [field: string]: any }) => {
+      this.dispatchEvent(
+        new CustomEvent('field-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            before: this.value,
+            after: selected || [],
+            record: this.record,
+            column: this.column,
+            row: this.row
+          }
+        })
+      )
+    }
+
+    var value = this.value || []
+
+    var template = this.template || html` <recipients-editor-popup .value=${value} .confirmCallback=${confirmCallback.bind(this)}></recipients-editor-popup> `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: i18next.t('title.recipients editor')
+    })
+  }
+}

package/client/grist-editor/grist-renderer-approval-line.ts

@@ -0,0 +1,13 @@
+import '@material/web/icon/icon.js'
+
+import { html } from 'lit-html'
+
+import { FieldRenderer } from '@operato/data-grist'
+
+export const GristRendererApprovalLine: FieldRenderer = (value, column, record, rowIndex, field) => {
+  return !value || !(value instanceof Array) || value.length == 0
+    ? html``
+    : value.length == 1
+    ? html`<md-icon style="--md-icon-size:1.3em">person</md-icon>`
+    : html`<md-icon style="--md-icon-size:1.3em">group</md-icon>`
+}

package/client/grist-editor/grist-renderer-assignees.ts

@@ -0,0 +1,13 @@
+import '@material/web/icon/icon.js'
+
+import { html } from 'lit-html'
+
+import { FieldRenderer } from '@operato/data-grist'
+
+export const GristRendererAssignees: FieldRenderer = (value, column, record, rowIndex, field) => {
+  return !value || !(value instanceof Array) || value.length == 0
+    ? html``
+    : value.length == 1
+    ? html`<md-icon style="--md-icon-size:1.3em">person</md-icon>`
+    : html`<md-icon style="--md-icon-size:1.3em">group</md-icon>`
+}

package/client/grist-editor/grist-renderer-department-object.ts

@@ -0,0 +1,13 @@
+import { html } from 'lit-html'
+
+import { FieldRenderer } from '@operato/data-grist'
+
+export const GristRendererDepartmentObject: FieldRenderer = (value, column, record, rowIndex, field) => {
+  if (!value) {
+    return ''
+  }
+
+  const { name, description } = value
+
+  return html`<span>${name || ''}${(description && `(${description})`) || ''}</span> `
+}

package/client/grist-editor/grist-renderer-recipients.ts

@@ -0,0 +1,13 @@
+import '@material/web/icon/icon.js'
+
+import { html } from 'lit-html'
+
+import { FieldRenderer } from '@operato/data-grist'
+
+export const GristRendererRecipients: FieldRenderer = (value, column, record, rowIndex, field) => {
+  return !value || !(value instanceof Array) || value.length == 0
+    ? html``
+    : value.length == 1
+    ? html`<md-icon style="--md-icon-size:1.3em">person</md-icon>`
+    : html`<md-icon style="--md-icon-size:1.3em">group</md-icon>`
+}

package/client/index.ts

@@ -0,0 +1,2 @@
+export * from './types'
+export * from './component'