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

package/client/component/recipients-editor.ts

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

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

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

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

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

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

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

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

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

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

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