@things-factory/worklist 6.0.27 → 6.0.32

package/client/bootstrap.ts

@@ -7,11 +7,16 @@ import { store } from '@operato/shell'
 import { openOverlay, TOOL_POSITION } from '@operato/layout'
 import { APPEND_CONTEXT_TOOL } from '@things-factory/context-ui'
 
-import { registerEditor as registerGristEditor, registerRenderer as registerGristRenderer } from '@operato/data-grist'
+import {
+  OxGristRendererJson5,
+  registerEditor as registerGristEditor,
+  registerRenderer as registerGristRenderer
+} from '@operato/data-grist'
 import { OxGristEditorDuration } from '@operato/grist-editor/ox-grist-editor-duration.js'
 import { OxGristEditorQuantifier } from '@operato/grist-editor/ox-grist-editor-quantifier.js'
 import { OxGristRendererDuration } from '@operato/grist-editor/ox-grist-renderer-duration.js'
 import { OxGristRendererQuantifier } from '@operato/grist-editor/ox-grist-renderer-quantifier.js'
+import { GristEditorActivitySearchKeys } from './grist-editor/grist-editor-activity-search-key.js'
 
 export default function bootstrap() {
   ;[
@@ -47,4 +52,7 @@ export default function bootstrap() {
   registerGristRenderer('duration', OxGristRendererDuration)
   registerGristEditor('quantifier', OxGristEditorQuantifier)
   registerGristRenderer('quantifier', OxGristRendererQuantifier)
+
+  registerGristEditor('activity-search-keys', GristEditorActivitySearchKeys)
+  registerGristRenderer('activity-search-keys', OxGristRendererJson5)
 }

package/client/components/activity-starter-form.ts

@@ -5,7 +5,7 @@ import '@things-factory/organization'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
 
 import { client } from '@operato/graphql'
@@ -55,11 +55,12 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
   ]
 
   @property({ type: String }) activityId?: string
-  @property({ type: Object }) activity?: any
-  @property({ type: Object }) activityInstance: any = {}
+
+  @state() activity: any
+  @state() activityInstance: any = {}
 
   render() {
-    const { model, thumbnail } = this.activity || {}
+    var { model, thumbnail } = this.activity || {}
 
     const inputSpec = (model || [])
       .filter(item => item.inout === 'in' || item.inout === 'inout')
@@ -70,17 +71,18 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
         }
       })
 
-    const {
+    var {
       id,
       name,
       description,
       input,
       state,
-      approvalLine,
-      assignees,
+      approvalLine = this.activity?.approvalLine,
+      assignees = this.activity?.assignees,
       threadsMin = 0,
       threadsMax = 0
-    } = this.activityInstance || {}
+    } = this.activityInstance
+
     const draftable = !id
     const postable = id && state === 'draft'
 
@@ -202,6 +204,26 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
             name
             description
             state
+            assignees {
+              type
+              value
+              assignee {
+                id
+                name
+                description
+                controlNo
+              }
+            }
+            approvalLine {
+              type
+              value
+              approver {
+                id
+                name
+                description
+                controlNo
+              }
+            }
             thumbnail
             model {
               name
@@ -228,11 +250,14 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
 
   async draftActivityInstance() {
     const { activityId } = this
+    var { name, description, assignees, approvalLine } = this.activity
 
     const activityInstance = {
       activityId,
-      name: this.activity.name,
-      description: this.activity.description,
+      name,
+      description,
+      assignees,
+      approvalLine,
       ...this.activityInstance
     }
 

package/client/grist-editor/grist-editor-activity-search-key.ts

@@ -0,0 +1,79 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '../grist-editor/popup-activity-search-keys-input.js'
+
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { OxGristEditor } from '@operato/data-grist'
+import { i18next } from '@operato/i18n'
+import { openPopup, PopupHandle } from '@operato/popup'
+
+@customElement('grist-editor-activity-search-keys')
+export class GristEditorActivitySearchKeys extends OxGristEditor {
+  private popup?: PopupHandle
+
+  get editorTemplate() {
+    const value = typeof this.value === 'object' ? JSON.stringify(this.value) : this.value
+    return html` <div tabindex="0">${value || ''}</div> `
+  }
+
+  _onclick(e: Event): void {
+    e.stopPropagation()
+    this.openEditorPopup()
+  }
+
+  _onkeydown(e: KeyboardEvent): void {
+    const key = e.key
+    if (key == 'Enter') {
+      e.stopPropagation()
+      this.openEditorPopup()
+    }
+  }
+
+  async openEditorPopup() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    const { name, help } = this.column.record?.options || {}
+
+    const confirmCallback = (newval: any) => {
+      this.dispatchEvent(
+        new CustomEvent('field-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            before: this.value,
+            after: newval,
+            record: this.record,
+            column: this.column,
+            row: this.row
+          }
+        })
+      )
+    }
+
+    /* 
+      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, 
+      layout의 구성에 변화가 발생하면, 다시 render된다.
+      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
+      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
+      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
+      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
+    */
+    var template = html`
+      <popup-activity-search-keys-input .value=${this.value} .confirmCallback=${confirmCallback}>
+      </popup-activity-search-keys-input>
+    `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: `${name?.toUpperCase() || i18next.t('field.search-keys')} `,
+      help
+    })
+  }
+}

package/client/grist-editor/popup-activity-search-keys-input.ts

@@ -0,0 +1,167 @@
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+import { closePopup } from '@operato/popup'
+import { ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
+import { getEditor, getRenderer, ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
+import { ActivitySearchKeyItem } from '../types/activity-search-key-item-type'
+
+@customElement('popup-activity-search-keys-input')
+export class PopupActivitySearchKeysInput extends LitElement {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+
+        width: var(--overlay-center-normal-width, 50%);
+        height: var(--overlay-center-normal-height, 50%);
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+
+      .button-container {
+        display: flex;
+        margin-left: auto;
+        padding: var(--padding-default);
+      }
+    `
+  ]
+
+  @property({ type: Array }) value: ActivitySearchKeyItem[] = []
+  @property({ type: Object }) confirmCallback!: (newval: any) => void
+
+  @state() gristConfig: any = {
+    list: { fields: ['name', 'description', 'active'] },
+    columns: [
+      { type: 'gutter', gutterName: 'sequence' },
+      {
+        type: 'gutter',
+        gutterName: 'button',
+        icon: 'add',
+        handlers: {
+          click: 'record-copy'
+        }
+      },
+      {
+        type: 'gutter',
+        gutterName: 'button',
+        icon: 'delete',
+        handlers: {
+          click: 'record-delete'
+        }
+      },
+      {
+        type: 'gutter',
+        gutterName: 'button',
+        icon: 'arrow_upward',
+        handlers: {
+          click: 'move-up'
+        }
+      },
+      {
+        type: 'gutter',
+        gutterName: 'button',
+        icon: 'arrow_downward',
+        handlers: {
+          click: 'move-down'
+        }
+      },
+      {
+        type: 'string',
+        name: 'name',
+        header: i18next.t('field.name'),
+        record: {
+          editable: true
+        },
+        width: 140
+      },
+      {
+        type: 'string',
+        name: 'description',
+        header: i18next.t('field.description'),
+        record: {
+          editable: true
+        },
+        width: 180
+      },
+      {
+        type: 'string',
+        name: 'inputKey',
+        header: i18next.t('field.input-key'),
+        record: {
+          editable: true
+        },
+        width: 180
+      },
+      {
+        type: 'string',
+        name: 'tKey',
+        header: i18next.t('field.t-key'),
+        record: {
+          editable: true
+        },
+        width: 180
+      }
+    ],
+    rows: {
+      selectable: false
+    },
+    pagination: {
+      infinite: true
+    },
+    sorters: []
+  }
+
+  @query('ox-grist') private grist!: DataGrist
+
+  render() {
+    return html`
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+      ></ox-grist>
+
+      <div class="button-container">
+        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
+        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      </div>
+    `
+  }
+
+  async fetchHandler({ filters, page, limit, sortings = [] }: FetchOption) {
+    const records = this.value || []
+    return {
+      total: records.length,
+      records
+    }
+  }
+
+  private onCancel(e: Event) {
+    closePopup(this)
+  }
+
+  private onConfirm(e: Event) {
+    this.grist.commit()
+
+    this.value = this.grist.data.records.map(({ name, description, inputKey, tKey }) => {
+      return {
+        name,
+        description,
+        inputKey,
+        tKey
+      }
+    })
+
+    this.confirmCallback && this.confirmCallback(this.value)
+    closePopup(this)
+  }
+}

package/client/pages/activity/activity-list-page.ts

@@ -5,6 +5,7 @@ import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
+import moment from 'moment-timezone'
 
 import { DataGrist, getEditor, getRenderer } from '@operato/data-grist'
 import { client } from '@operato/graphql'
@@ -14,7 +15,16 @@ import { PageView, store } from '@operato/shell'
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 
-import { ActivityTypes, ActivityUITypes } from '../../types.js'
+import { ActivityTypes, ActivityUITypes } from '../../types/types.js'
+
+export const ActivityStatus = [
+  { display: '', value: '' },
+  { display: 'Draft', value: 'draft' },
+  { display: 'Released', value: 'released' },
+  { display: 'Deprecated', value: 'deprecated' }
+]
+const DEFAULT_TZ = Intl.DateTimeFormat().resolvedOptions().timeZone
+const TIMEZONE_OPTIONS = ['', DEFAULT_TZ, ...moment.tz.names().filter(tz => tz !== DEFAULT_TZ)]
 
 @customElement('activity-list-page')
 export class ActivityListPage extends connect(store)(localize(i18next)(PageView)) {
@@ -153,6 +163,17 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
           filter: 'search',
           width: 200
         },
+        {
+          type: 'select',
+          name: 'state',
+          header: i18next.t('field.status'),
+          record: {
+            editable: true,
+            options: ActivityStatus
+          },
+          filter: true,
+          width: 60
+        },
         {
           type: 'select',
           name: 'activityType',
@@ -166,16 +187,16 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
           // filter: true,
           width: 60
         },
-        // {
-        //   type: 'json5',
-        //   name: 'model',
-        //   label: true,
-        //   header: i18next.t('field.model'),
-        //   record: {
-        //     editable: true
-        //   },
-        //   width: 120
-        // },
+        {
+          type: 'activity-search-keys',
+          name: 'searchKeys',
+          label: true,
+          header: i18next.t('field.search-keys'),
+          record: {
+            editable: true
+          },
+          width: 120
+        },
         {
           type: 'number',
           name: 'priority',
@@ -208,6 +229,22 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
           },
           width: 80
         },
+        {
+          type: 'select',
+          name: 'timezone',
+          header: i18next.t('field.timezone'),
+          record: {
+            editable: true,
+            options: TIMEZONE_OPTIONS
+          },
+          width: 120,
+          imex: {
+            width: 13,
+            header: i18next.t('field.timezone'),
+            type: 'select',
+            key: 'timezone'
+          }
+        },
         {
           type: 'image',
           name: 'thumbnail',
@@ -257,6 +294,24 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
           filter: 'search',
           width: 120
         },
+        {
+          type: 'assignees',
+          name: 'assignees',
+          header: i18next.t('field.assignees'),
+          record: {
+            editable: true
+          },
+          width: 120
+        },
+        {
+          type: 'approval-line',
+          name: 'approvalLine',
+          header: i18next.t('field.approval-line'),
+          record: {
+            editable: true
+          },
+          width: 120
+        },
         {
           type: 'select',
           name: 'uiType',
@@ -285,6 +340,34 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
           },
           width: 140
         },
+        {
+          type: 'select',
+          name: 'viewType',
+          label: true,
+          header: i18next.t('field.view-type'),
+          record: {
+            editable: true,
+            options: ActivityUITypes
+          },
+          width: 80
+        },
+        {
+          type: 'string',
+          name: 'viewSource',
+          header: i18next.t('field.view-source'),
+          record: {
+            editable: true,
+            editor: function (value, column, record, rowIndex, field) {
+              var type = record.viewType !== 'board' ? 'script' : 'board'
+              return getEditor(type)(value, column, record, rowIndex, field)
+            },
+            renderer: function (value, column, record, rowIndex, field) {
+              var type = record.viewType !== 'board' ? 'script' : 'board'
+              return getRenderer(type)(value, column, record, rowIndex, field)
+            }
+          },
+          width: 140
+        },
         {
           type: 'select',
           name: 'reportType',
@@ -400,6 +483,13 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
               name
               description
               activityType
+              searchKeys {
+                name
+                description
+                inputKey
+                tKey
+              }
+              state
               model {
                 name
                 description
@@ -426,12 +516,33 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
                 id
                 name
               }
+              assignees {
+                type
+                value
+                assignee {
+                  id
+                  name
+                  description
+                  controlNo
+                }
+              }
+              approvalLine {
+                type
+                value
+                approver {
+                  id
+                  name
+                  description
+                  controlNo
+                }
+              }
               uiType
               uiSource
               reportType
               reportSource
               startable
               schedule
+              timezone
               standardTime
               leadTime
               cycleTime

package/client/pages/activity/activity-partial-view.ts

@@ -0,0 +1,85 @@
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+import { Activity } from '../../types/activity'
+import { ActivitySearchKeyItem } from '../../types/activity-search-key-item-type'
+import { ActivityModelItem } from '../../types/activity-model-type'
+
+@customElement('activity-partial-view')
+export class ActivityView extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
+
+      div[content] {
+        flex: 1;
+
+        display: flex;
+        overflow: auto;
+      }
+    `
+  ]
+
+  @property({ type: Object }) activity?: Activity
+
+  render() {
+    if (!this.activity) {
+      return html`<div>no activity info.</div>`
+    }
+
+    const {
+      id,
+      name,
+      description,
+      activityType,
+      state,
+      searchKeys,
+      model,
+      priority,
+      startable,
+      schedule,
+      timzeone,
+      standardTime,
+      cycleTime,
+      tactTime,
+      leadTime,
+      issuerRole,
+      assigneeRole,
+      supervisoryRole,
+      assignees,
+      approvalLine,
+      uiType,
+      uiSource,
+      viewType,
+      viewSource,
+      reportType,
+      reportSource
+    } = this.activity
+
+    return html`
+      <div>name: ${name}</div>
+      <div>description: ${description}</div>
+      <div>activityType: ${activityType}</div>
+      <div>state: ${state}</div>
+      ${this.renderSearchKeys(searchKeys!)} ${this.renderModel(model!)}
+      <div>priority: ${priority}</div>
+      <div>startable: ${startable}</div>
+    `
+  }
+
+  renderSearchKeys(searchKeys: ActivitySearchKeyItem[]) {
+    return html``
+  }
+
+  renderModel(model: ActivityModelItem[]) {
+    return html``
+  }
+}

package/client/pages/activity/starter-list-page.ts

@@ -29,6 +29,7 @@ const FILTERS = [
     value: 'Warehouse'
   }
 ]
+
 @customElement('starter-list-page')
 export class StarterListPage extends connect(store)(localize(i18next)(PageView)) {
   static styles = [

package/client/pages/activity-approval/activity-approval-page.ts

@@ -67,8 +67,8 @@ const ActivityApprovalFetchResult = `\
       thumbnail
       input
       output
-      uiType
-      uiSource
+      viewType
+      viewSource
       dueAt
       createdAt
     }  
@@ -181,7 +181,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
   }
 
   activityContent() {
-    switch (this.activityThread?.activityInstance?.uiType) {
+    switch (this.activityThread?.activityInstance?.viewType) {
       case 'template':
         return this.templateContent()
       case 'generated':
@@ -198,7 +198,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
   }
 
   templateContent() {
-    const { uiSource: template } = this.activityThread?.activityInstance
+    const { viewSource: template } = this.activityThread?.activityInstance
     return unsafeHTML(template)
   }
 
@@ -271,7 +271,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
 
   boardContent() {
     const { output, activityInstance } = this.activityThread
-    const { uiSource: boardId, input } = activityInstance || {}
+    const { viewSource: boardId, input } = activityInstance || {}
 
     if (!this.board || this.board.id !== boardId) {
       this.board = {
@@ -296,7 +296,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
 
   customElementContent() {
     const { output, activityInstance } = this.activityThread
-    const { uiSource: tagName, input } = activityInstance || {}
+    const { viewSource: tagName, input } = activityInstance || {}
 
     const element = document.createElement(tagName)
     element.id = 'custom-content'