@things-factory/worklist 6.0.28 → 6.0.33

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

@@ -5,11 +5,12 @@ 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'
 import { i18next, localize } from '@operato/i18n'
-import { openPopup } from '@operato/layout'
+import { notify, openPopup } from '@operato/layout'
 import { PageView, store } from '@operato/shell'
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
@@ -22,6 +23,8 @@ export const ActivityStatus = [
   { 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)) {
@@ -64,7 +67,7 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
       actions: [
         {
           title: i18next.t('button.save'),
-          action: this._updateActivity.bind(this),
+          action: this.updateActivity.bind(this),
           ...CommonButtonStyles.save
         }
       ]
@@ -117,6 +120,24 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
       columns: [
         { type: 'gutter', gutterName: 'sequence' },
         { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: record => (!record || !record.name ? '' : record.scheduleId ? 'pause' : 'play_arrow'),
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              if (!record || !record.name) {
+                /* TODO record가 새로 추가된 것이면 리턴하도록 한다. */
+                return
+              }
+              if (record.scheduleId) {
+                this.stopActivitySchedule(record)
+              } else {
+                this.startActivitySchedule(record)
+              }
+            }
+          }
+        },
         {
           type: 'gutter',
           gutterName: 'button',
@@ -226,6 +247,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',
@@ -321,6 +358,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',
@@ -491,10 +556,14 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
               }
               uiType
               uiSource
+              viewType
+              viewSource
               reportType
               reportSource
               startable
               schedule
+              timezone
+              scheduleId
               standardTime
               leadTime
               cycleTime
@@ -522,7 +591,7 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
     }
   }
 
-  async _updateActivity() {
+  async updateActivity() {
     let patches = this.grist?.dirtyRecords
     if (patches && patches.length) {
       patches = patches.map(patch => {
@@ -557,4 +626,58 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
       }
     }
   }
+
+  async startActivitySchedule(record) {
+    var response = await client.mutate({
+      mutation: gql`
+        mutation ($activityId: String!) {
+          startActivitySchedule(activityId: $activityId) {
+            scheduleId
+          }
+        }
+      `,
+      variables: {
+        activityId: record.id
+      }
+    })
+
+    const scheduleId = response.data.startActivitySchedule.scheduleId
+    record.scheduleId = scheduleId
+
+    notify({
+      level: 'info',
+      message: `${record.scheduleId ? 'success' : 'fail'} to start activity schedule : ${record.name}`
+    })
+
+    this.grist.fetch()
+  }
+
+  async stopActivitySchedule(record) {
+    var response = await client.mutate({
+      mutation: gql`
+        mutation ($activityId: String!) {
+          stopActivitySchedule(activityId: $activityId) {
+            scheduleId
+          }
+        }
+      `,
+      variables: {
+        activityId: record.id
+      }
+    })
+
+    if (!response.errors) {
+      notify({
+        level: 'info',
+        message: `success to stop activity schedule : ${record.name}`
+      })
+    } else {
+      notify({
+        level: 'error',
+        message: `${response.errors.map(error => error.message).join('\n')}`
+      })
+    }
+
+    this.grist.fetch()
+  }
 }

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

@@ -46,6 +46,7 @@ export class ActivityView extends localize(i18next)(LitElement) {
       priority,
       startable,
       schedule,
+      timzeone,
       standardTime,
       cycleTime,
       tactTime,
@@ -57,6 +58,8 @@ export class ActivityView extends localize(i18next)(LitElement) {
       approvalLine,
       uiType,
       uiSource,
+      viewType,
+      viewSource,
       reportType,
       reportSource
     } = this.activity

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'

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

@@ -215,6 +215,34 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
           },
           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',
@@ -320,6 +348,8 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
               active
               uiType
               uiSource
+              viewType
+              viewSource
               reportType
               reportSource
               updater {

package/client/pages/activity-thread/activity-thread-view-page.ts

@@ -0,0 +1,293 @@
+import '@operato/property-editor/ox-properties-dynamic-view.js'
+import '@operato/board/ox-board-viewer.js'
+
+import gql from 'graphql-tag'
+import { css, html } from 'lit'
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { keyed } from 'lit/directives/keyed.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { PageView, store } from '@operato/shell'
+import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { provider } from '@things-factory/board-ui'
+
+const ActivityThreadFetchResult = `\
+{
+  id
+  state
+  dueAt
+  assignedAt
+  assignee {
+    id
+    name
+  }
+  output
+  round
+  activityInstance {
+    id
+    name
+    description
+    state
+    activity {
+      model {
+        name
+        description
+        active
+        tag
+        inout
+        type
+        unit
+        options
+        quantifier
+        spec
+      }
+    }
+    approvalLine {
+      type
+      value
+      approver {
+        id
+        name
+        description
+        controlNo
+      }
+    }
+    thumbnail
+    input
+    output
+    viewType
+    viewSource
+    dueAt
+    createdAt
+  }
+}`
+
+export const ActivityThreadStatus = {
+  Assigned: 'assigned',
+  Started: 'started',
+  Delegated: 'delegated',
+  Rejected: 'rejected',
+  Ended: 'ended',
+  Aborted: 'aborted'
+}
+
+@customElement('activity-thread-view-page')
+export class ActivityThreadViewPage extends connect(store)(localize(i18next)(PageView)) {
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        width: 100%;
+        padding: 5px;
+        overflow: auto;
+      }
+
+      ox-board-viewer {
+        width: 100%;
+        height: 100%;
+      }
+
+      #custom-content {
+        flex: 1;
+      }
+    `
+  ]
+
+  @state() activityThread: any
+  @state() board: any
+
+  get context() {
+    return {
+      title: this.lifecycle?.params?.['title'] || i18next.t('title.activity'),
+      help: 'worklist/activity',
+      actions: [],
+      activityThread: this.activityThread
+    }
+  }
+
+  render() {
+    return html` ${this.activityContent()}`
+  }
+
+  activityContent() {
+    switch (this.activityThread?.activityInstance?.viewType) {
+      case 'template':
+        return this.templateContent()
+      case 'generated':
+        return this.generatedContent()
+      case 'board':
+        return this.boardContent()
+      case 'custom-element':
+        return this.customElementContent()
+      case 'page':
+      case 'external':
+      default:
+        return html``
+    }
+  }
+
+  templateContent() {
+    const { viewSource: template } = this.activityThread?.activityInstance
+    return unsafeHTML(template)
+  }
+
+  getInputSpec() {
+    const model = this.activityThread?.activityInstance?.activity?.model
+
+    return (model || [])
+      .filter(item => item.inout === 'in' || item.inout === 'inout')
+      .map(item => {
+        return {
+          ...item,
+          label: item.name
+        }
+      })
+  }
+
+  getOutputSpec() {
+    const model = this.activityThread?.activityInstance?.activity?.model
+
+    return (model || [])
+      .filter(item => item.inout === 'inout' || item.inout === 'out')
+      .map(item => {
+        return {
+          ...item,
+          label: item.name
+        }
+      })
+  }
+
+  generatedContent() {
+    var { output, activityInstance } = this.activityThread || {}
+    var { input } = activityInstance || {}
+
+    const inputSpec = this.getInputSpec()
+    const outputSpec = this.getOutputSpec()
+
+    if (!output) {
+      output = inputSpec
+        .filter(item => item.inout === 'inout')
+        .reduce((inout, item) => {
+          inout[item.name] = input[item.name]
+          return inout
+        }, {})
+    }
+
+    return keyed(
+      this.activityThread.id,
+      html`
+        <fieldset>
+          <legend>Input</legend>
+          <ox-properties-dynamic-view
+            data-name="input"
+            .props=${inputSpec}
+            .value=${input}
+          ></ox-properties-dynamic-view>
+        </fieldset>
+
+        <fieldset>
+          <legend>Output</legend>
+          <ox-properties-dynamic-view
+            data-name="output"
+            .props=${outputSpec}
+            .value=${output}
+            @property-change=${e => (this.activityThread.output = e.currentTarget.value)}
+          ></ox-properties-dynamic-view>
+        </fieldset>
+      `
+    )
+  }
+
+  boardContent() {
+    const { output, activityInstance } = this.activityThread
+    const { viewSource: boardId, input } = activityInstance || {}
+
+    if (!this.board || this.board.id !== boardId) {
+      this.board = {
+        id: boardId
+      }
+    }
+
+    /* 
+      ox-board-viewer에서 provider에 의해 공급되는 board가 각 id별로 instance를 하나씩 밖에 가지지 않으므로,
+      동일한 id의 보드를 다른 page에 뺏기는 경우가 있다.
+      따라서, Page가 active될 때마다 타임스탬프를 refresh key로 설정하였다.
+      */
+    return keyed(
+      this.activityThread.id,
+      html`
+        <ox-board-viewer
+          style="background-color: white;"
+          .board=${this.board}
+          .provider=${provider}
+          .values=${{ ...input, ...output }}
+          hide-fullscreen
+          hide-navigation
+        ></ox-board-viewer>
+      `
+    )
+  }
+
+  customElementContent() {
+    const { output, activityInstance } = this.activityThread
+    const { viewSource: tagName, input } = activityInstance || {}
+
+    const element = document.createElement(tagName)
+    element.id = 'custom-content'
+    element.input = input
+    element.output = output
+    element.addEventListener('change', (e: CustomEvent) => {
+      this.activityThread.output = e.detail
+    })
+
+    return element
+  }
+
+  @query('ox-board-viewer') oxBoardViewer: any
+
+  getOutputFromBoard() {
+    const outputSpec = this.getOutputSpec()
+    const data = this.oxBoardViewer.getSceneValues()
+
+    return outputSpec.reduce((output, spec) => {
+      output[spec.name] = data[spec.name]
+      return output
+    }, {})
+  }
+
+  updated(changes) {
+    if (changes.has('activityThread')) {
+      this.updateContext()
+    }
+  }
+
+  async pageUpdated(changes, lifecycle, changedBefore) {
+    if (this.active) {
+      this.fetchActivityThread(lifecycle.resourceId)
+    }
+  }
+
+  async fetchActivityThread(id) {
+    const response = await client.query({
+      query: gql`
+        query activityThread($id: String!) {
+          activityThread(id: $id) ${ActivityThreadFetchResult}
+        }
+      `,
+      variables: {
+        id
+      }
+    })
+
+    this.activityThread = response.data.activityThread
+
+    this.updateContext()
+  }
+}

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

@@ -229,6 +229,34 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
           },
           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',
@@ -334,6 +362,8 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
               thumbnail
               uiType
               uiSource
+              viewType
+              viewSource
               reportType
               reportSource
             }

package/client/pages/todo/approval-waiting-list-page.ts

@@ -153,14 +153,14 @@ export class ApprovalWaitingListPage extends connect(store)(localize(i18next)(Pa
         },
         {
           type: 'string',
-          name: 'uiSource',
-          header: i18next.t('field.ui-source'),
+          name: 'viewSource',
+          header: i18next.t('field.view-source'),
           record: {
             editable: false,
             renderer: function (value, column, record, rowIndex, field) {
-              const { uiType, uiSource } = record.activity || {}
-              var type = uiType !== 'board' ? 'string' : 'board'
-              return getRenderer(type)(uiSource, column, record, rowIndex, field)
+              const { viewType, viewSource } = record.activity || {}
+              var type = viewType !== 'board' ? 'string' : 'board'
+              return getRenderer(type)(viewSource, column, record, rowIndex, field)
             }
           },
           width: 140,
@@ -314,8 +314,8 @@ export class ApprovalWaitingListPage extends connect(store)(localize(i18next)(Pa
                   input
                   refBy
                   activityType
-                  uiType
-                  uiSource
+                  viewType
+                  viewSource
                   thumbnail
                   updatedAt
                   createdAt