@things-factory/worklist 6.0.45 → 6.0.46

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

@@ -14,6 +14,7 @@ import { openPopup } from '@operato/layout'
 import { PageView, store } from '@operato/shell'
 import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
+import { ActivityStartingTypes, ActivityTypes } from '../../types/types.js'
 
 const FILTERS = [
   {
@@ -67,7 +68,8 @@ export class StarterListPage extends connect(store)(localize(i18next)(PageView))
         handler: () => {
           this.grist.toggleHeadroom()
         }
-      }
+      },
+      help: 'worklist/starter-list'
     }
   }
 
@@ -115,7 +117,7 @@ export class StarterListPage extends connect(store)(localize(i18next)(PageView))
           type: 'gutter',
           gutterName: 'button',
           name: 'start',
-          icon: 'add_task',
+          icon: 'rocket_launch',
           handlers: {
             click: (columns, data, column, record, rowIndex) => {
               if (!record.id) {
@@ -128,7 +130,9 @@ export class StarterListPage extends connect(store)(localize(i18next)(PageView))
                   backdrop: true,
                   help: 'worklist/activity-starter-form',
                   size: 'large',
-                  title: i18next.t('title.activity starter')
+                  title: i18next.t(
+                    record.startingType == 'issue' ? 'title.activity starter' : 'title.activity application'
+                  )
                 }
               )
               popup.onclosed = () => {
@@ -153,16 +157,16 @@ export class StarterListPage extends connect(store)(localize(i18next)(PageView))
           width: 240
         },
         {
-          type: 'string',
-          name: 'activityType',
+          type: 'select',
+          name: 'startingType',
           label: true,
-          header: i18next.t('field.activity-type'),
+          header: i18next.t('field.starting-type'),
+          record: {
+            editable: false,
+            options: ActivityStartingTypes
+          },
           sortable: true,
-          // filter: {
-          //   type: 'select',
-          //   options: ActivityTypes
-          // },
-          width: 100
+          width: 80
         },
         {
           type: 'resource-object',
@@ -215,6 +219,7 @@ export class StarterListPage extends connect(store)(localize(i18next)(PageView))
               activityType
               priority
               thumbnail
+              startingType
               updater {
                 id
                 name

package/client/pages/activity-instance/activity-instance-search-page.ts

@@ -6,15 +6,7 @@ import { css, html } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin'
 
-import {
-  getEditor,
-  getRenderer,
-  ColumnConfig,
-  DataGrist,
-  FetchOption,
-  SortersControl,
-  GristRecord
-} from '@operato/data-grist'
+import { DataGrist, FetchOption, GristRecord } from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
@@ -81,12 +73,7 @@ export class ActivityInstanceSearchPage extends connect(store)(localize(i18next)
     const mode = this.mode || (isMobileDevice() ? 'LIST' : 'GRID')
 
     return html`
-      <ox-grist
-        .mode=${mode}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-        ?url-params-sensitive=${this.active}
-      >
+      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom">
           <div id="filters">
             <ox-filters-form autofocus without-search></ox-filters-form>
@@ -152,8 +139,6 @@ export class ActivityInstanceSearchPage extends connect(store)(localize(i18next)
       this.activity = response.data.activity
       this.searchKeys = this.activity?.searchKeys
       this.refreshGristConfig()
-
-      this.grist.fetch()
     }
   }
 
@@ -177,8 +162,6 @@ export class ActivityInstanceSearchPage extends connect(store)(localize(i18next)
   }
 
   refreshGristConfig() {
-    const today = new Date().toISOString().split('T')[0]
-
     this.gristConfig = {
       list: {
         fields: ['name', 'description'],

package/client/pages/activity-instance/activity-instance-start-page.ts

@@ -0,0 +1,514 @@
+import '@operato/property-editor/ox-properties-dynamic-view.js'
+import '@operato/board/ox-board-viewer.js'
+import '@things-factory/organization'
+
+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 { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { provider } from '@things-factory/board-ui'
+import { notify } from '@operato/layout'
+
+@customElement('activity-instance-start-page')
+export class ActivityInstanceStartPage 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() activity: any = {}
+  @state() activityInstance: any = {}
+  @state() board: any
+
+  @query('ox-board-viewer') viewer: any
+
+  get context() {
+    const { startingType } = this.activity
+    const { state } = this.activityInstance
+
+    const issuable = state === 'draft'
+
+    return {
+      title: this.lifecycle?.params?.['title'] || i18next.t('title.activity'),
+      help: 'worklist/activity-instance-single-post',
+      actions: [
+        issuable && {
+          title: i18next.t('button.draft'),
+          action: this.draftActivityInstance.bind(this),
+          ...CommonButtonStyles.save
+        },
+        issuable && {
+          title: i18next.t(startingType == 'issue' ? 'button.issue' : 'button.post'),
+          action: this.issueActivityInstance.bind(this),
+          ...CommonButtonStyles.submit
+        }
+      ].filter(Boolean /* truthy only */),
+      activityInstance: this.activityInstance
+    }
+  }
+
+  render() {
+    return html` ${this.activityContent()}`
+  }
+
+  activityContent() {
+    switch (this.activityInstance?.uiType) {
+      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 { uiSource: template } = this.activityInstance
+    return unsafeHTML(template)
+  }
+
+  getInputSpec() {
+    const model = this.activity?.model
+
+    return (model || [])
+      .filter(item => item.inout === 'in' || item.inout === 'inout')
+      .map(item => {
+        return {
+          ...item,
+          label: item.name
+        }
+      })
+  }
+
+  getOutputSpec() {
+    const model = this.activity?.model
+
+    return (model || [])
+      .filter(item => item.inout === 'inout' || item.inout === 'out')
+      .map(item => {
+        return {
+          ...item,
+          label: item.name
+        }
+      })
+  }
+
+  generatedContent() {
+    var { input, output } = this.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.activityInstance.id,
+      html`
+        <fieldset>
+          <legend>Input</legend>
+          <ox-properties-dynamic-view
+            data-name="input"
+            .props=${inputSpec}
+            .value=${input}
+            @property-change=${e => (this.activityInstance.input = e.currentTarget.value)}
+          ></ox-properties-dynamic-view>
+        </fieldset>
+
+        <fieldset>
+          <legend>Output</legend>
+          <ox-properties-dynamic-view
+            data-name="output"
+            .props=${outputSpec}
+            .value=${output}
+            @property-change=${e => (this.activityInstance.output = e.currentTarget.value)}
+          ></ox-properties-dynamic-view>
+        </fieldset>
+      `
+    )
+  }
+
+  boardContent() {
+    const { uiSource: boardId, input, output } = this.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.activityInstance.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 { uiSource: tagName, input, output } = this.activityInstance
+
+    const element = document.createElement(tagName)
+    element.id = 'custom-content'
+    element.input = input
+    element.output = output
+
+    element.addEventListener('change-input', (e: CustomEvent) => {
+      this.activityInstance.input = e.detail
+    })
+    element.addEventListener('change-output', (e: CustomEvent) => {
+      this.activityInstance.output = e.detail
+    })
+
+    /* DEPRECATED 일반적으로 output만 수정될 가능성이 높기때문에, change 이벤트는 output을 수정하는 것으로 한다. */
+    element.addEventListener('change', (e: CustomEvent) => {
+      this.activityInstance.output = e.detail
+    })
+
+    return element
+  }
+
+  getInOutFromBoard() {
+    const inputSpec = this.getInputSpec()
+    const outputSpec = this.getOutputSpec()
+    const data = this.viewer?.getSceneValues() || {}
+
+    const input = inputSpec.reduce((input, spec) => {
+      input[spec.name] = data[spec.name]
+      return input
+    }, {})
+
+    const output = outputSpec.reduce((output, spec) => {
+      output[spec.name] = data[spec.name]
+      return output
+    }, {})
+
+    return [input, output]
+  }
+
+  updated(changes) {
+    if (changes.has('activityInstance')) {
+      this.updateContext()
+    }
+  }
+
+  async pageUpdated(changes, lifecycle, changedBefore) {
+    if (this.active) {
+      this.fetchActivityInstance(lifecycle.resourceId)
+    }
+  }
+
+  async fetchActivityInstance(id) {
+    const response = await client.query({
+      query: gql`
+        query activityInstance($id: String!) {
+          activityInstance(id: $id) {
+            id
+            name
+            description
+            state
+            activity {
+              startingType
+              model {
+                name
+                description
+                active
+                tag
+                inout
+                type
+                unit
+                options
+                quantifier
+                spec
+              }
+            }
+            thumbnail
+            input
+            output
+            uiType
+            uiSource
+            approvalLine {
+              type
+              value
+              approver {
+                id
+                name
+                description
+                controlNo
+              }
+            }
+            dueAt
+            createdAt
+          }
+        }
+      `,
+      variables: {
+        id
+      }
+    })
+
+    this.activityInstance = response.data.activityInstance
+    this.activity = this.activityInstance.activity
+  }
+
+  async draftActivityInstance() {
+    var { id: activityId } = this.activity
+    var {
+      id,
+      name,
+      description,
+      priority,
+      threadsMin,
+      threadsMax,
+      dueAt,
+      input,
+      output,
+      reason,
+      uiType,
+      assignees,
+      approvalLine
+    } = this.activityInstance
+
+    if (uiType === 'board') {
+      ;[input, output] = this.getInOutFromBoard()
+    }
+
+    name ||= this.activity.name
+    description ||= this.activity.description
+    assignees ||= this.activity.assignees
+    approvalLine ||= this.activity.approvalLine
+
+    var activityInstance = {
+      id,
+      activityId,
+      name,
+      description,
+      priority,
+      threadsMax,
+      threadsMin,
+      dueAt,
+      input,
+      output,
+      reason,
+      assignees,
+      approvalLine
+    }
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($activityInstance: ActivityInstanceDraft!) {
+          draftActivityInstance(activityInstance: $activityInstance) {
+            id
+            name
+            description
+            input
+            state
+            activity {
+              startingType
+              model {
+                name
+                description
+                active
+                tag
+                inout
+                type
+                unit
+                options
+                quantifier
+                spec
+              }
+            }
+            assignees {
+              type
+              value
+              assignee {
+                id
+                name
+                description
+                controlNo
+              }
+            }
+            approvalLine {
+              type
+              value
+              approver {
+                id
+                name
+                description
+                controlNo
+              }
+            }
+            uiType
+            uiSource
+            threadsMin
+            threadsMax
+          }
+        }
+      `,
+      variables: {
+        activityInstance
+      }
+    })
+
+    if (!response.errors) {
+      this.activityInstance = response.data.draftActivityInstance
+      this.activity = this.activityInstance.activity
+
+      notify({
+        message: i18next.t('text.info_x_successfully', {
+          x: `${i18next.t('label.activity-instance')} ${i18next.t('text.draft')}`
+        })
+      })
+    }
+  }
+
+  async issueActivityInstance() {
+    var {
+      id,
+      name,
+      description,
+      input,
+      output,
+      reason,
+      uiType,
+      threadsMin = 0,
+      threadsMax = 0,
+      assignees,
+      approvalLine
+    } = this.activityInstance
+
+    if (uiType === 'board') {
+      ;[input, output] = this.getInOutFromBoard()
+    }
+
+    const activityInstance = {
+      id,
+      name: name || this.activity.name,
+      description: description || this.activity.description,
+      threadsMin,
+      threadsMax,
+      input,
+      output,
+      reason,
+      assignees,
+      approvalLine
+    }
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($activityInstance: ActivityInstanceIssue!) {
+          issueActivityInstance(activityInstance: $activityInstance) {
+            id
+            name
+            description
+            input
+            output
+            state
+            activity {
+              startingType
+              model {
+                name
+                description
+                active
+                tag
+                inout
+                type
+                unit
+                options
+                quantifier
+                spec
+              }
+            }
+            assignees {
+              type
+              value
+              assignee {
+                id
+                name
+                description
+                controlNo
+              }
+            }
+            approvalLine {
+              type
+              value
+              approver {
+                id
+                name
+                description
+                controlNo
+              }
+            }
+            uiType
+            uiSource
+            threadsMin
+            threadsMax
+          }
+        }
+      `,
+      variables: {
+        activityInstance
+      }
+    })
+
+    if (!response.errors) {
+      this.activityInstance = response.data.issueActivityInstance
+      this.activity = this.activityInstance.activity
+
+      notify({
+        message: i18next.t('text.info_x_successfully', {
+          x: `${i18next.t('label.activity-instance')} ${i18next.t('text.assign')}`
+        })
+      })
+    }
+  }
+}

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

@@ -125,7 +125,7 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
         submittable && {
           title: i18next.t('button.submit'),
           action: this._submitActivityThread.bind(this),
-          ...CommonButtonStyles.save
+          ...CommonButtonStyles.submit
         },
 
         delegatable && {

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

@@ -14,7 +14,7 @@ import { PageView, store } from '@operato/shell'
 import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 
-import { ActivityTypes, ActivityUITypes } from '../../types/types.js'
+import { ActivityStartingTypes, ActivityTypes, ActivityUITypes } from '../../types/types.js'
 
 @customElement('installable-activity-list-page')
 export class ActivityTemplateListPage extends connect(store)(localize(i18next)(PageView)) {
@@ -300,12 +300,13 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
           width: 140
         },
         {
-          type: 'checkbox',
-          name: 'startable',
+          type: 'select',
+          name: 'startingType',
           label: true,
-          header: i18next.t('field.startable'),
+          header: i18next.t('field.starting-type'),
           record: {
-            editable: false
+            editable: false,
+            options: ActivityStartingTypes
           },
           sortable: true,
           width: 60
@@ -340,6 +341,7 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
               activityType
               priority
               startable
+              startingType
               model {
                 name
                 description

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

@@ -229,7 +229,7 @@ export class ApprovalPendingListPage extends connect(store)(localize(i18next)(Pa
         {
           type: 'datetime',
           name: 'createdAt',
-          header: i18next.t('field.posted-at'),
+          header: i18next.t('field.issued-at'),
           record: {
             editable: false
           },

package/client/pages/todo/done-list-page.ts

@@ -241,7 +241,7 @@ export class DoneListPage extends connect(store)(localize(i18next)(PageView)) {
         {
           type: 'datetime',
           name: 'createdAt',
-          header: i18next.t('field.posted-at'),
+          header: i18next.t('field.issued-at'),
           record: {
             editable: false
           },