@things-factory/worklist 6.0.45 → 6.0.47

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

@@ -0,0 +1,517 @@
+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,
+          property: item.options
+        }
+      })
+  }
+
+  getOutputSpec() {
+    const model = this.activity?.model
+
+    return (model || [])
+      .filter(item => item.inout === 'inout' || item.inout === 'out')
+      .map(item => {
+        return {
+          ...item,
+          label: item.name,
+          property: item.options
+        }
+      })
+  }
+
+  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
+            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.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 && {
@@ -184,7 +184,8 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
       .map(item => {
         return {
           ...item,
-          label: item.name
+          label: item.name,
+          property: item.options
         }
       })
   }
@@ -197,7 +198,8 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
       .map(item => {
         return {
           ...item,
-          label: item.name
+          label: item.name,
+          property: item.options
         }
       })
   }

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

@@ -146,7 +146,8 @@ export class ActivityThreadViewPage extends connect(store)(localize(i18next)(Pag
       .map(item => {
         return {
           ...item,
-          label: item.name
+          label: item.name,
+          property: item.options
         }
       })
   }
@@ -159,7 +160,8 @@ export class ActivityThreadViewPage extends connect(store)(localize(i18next)(Pag
       .map(item => {
         return {
           ...item,
-          label: item.name
+          label: item.name,
+          property: item.options
         }
       })
   }

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-done-list-page.ts

@@ -240,13 +240,13 @@ export class ApprovalDoneListPage extends connect(store)(localize(i18next)(PageV
       ],
       rows: {
         appendable: false
-      }
-      // sorters: [
-      //   {
-      //     name: 'dueAt',
-      //     desc: false
-      //   }
-      // ]
+      },
+      sorters: [
+        {
+          name: 'terminatedAt',
+          desc: true
+        }
+      ]
     }
   }