@things-factory/worklist 6.0.8 → 6.0.12

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

@@ -0,0 +1,418 @@
+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 } 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'
+
+const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
+
+const ActivityApprovalFetchResult = `\
+{
+  id
+  judgment
+  comment
+  activityThread {
+    state
+    dueAt
+    assignedAt
+    assignee {
+      id
+      name
+    }
+    output
+    activityInstance {
+      id
+      name
+      description
+      state
+      activity {
+        model {
+          name
+          description
+          active
+          tag
+          inout
+          type
+          unit
+          options
+          quantifier
+          spec
+        }
+      }
+      approvalLine {
+        type
+        approver {
+          id
+          name
+          description
+          controlNo
+        }
+      }
+      thumbnail
+      input
+      output
+      uiType
+      uiSource
+      dueAt
+      createdAt
+    }  
+  }
+}`
+
+export const ActivityThreadStatus = {
+  Assigned: 'assigned',
+  Started: 'started',
+  Delegated: 'delegated',
+  Ended: 'ended',
+  Aborted: 'aborted'
+}
+
+@customElement('activity-approval-page')
+export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageView)) {
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        width: 100%;
+        padding: 5px;
+        overflow: auto;
+      }
+
+      [header] {
+        display: flex;
+        padding: 5px;
+      }
+
+      [header] > div {
+        flex: 1;
+      }
+
+      [content] {
+        clear: left;
+
+        flex: 1;
+        display: block;
+        padding: 5px;
+      }
+
+      ox-board-viewer {
+        width: 100%;
+        height: 100%;
+      }
+    `
+  ]
+
+  @property({ type: Object }) activityApproval: any
+  @property({ type: Object }) activityThread: any
+  @property({ type: Object }) board: any
+
+  get context() {
+    const judgment = this.activityApproval.judgment
+
+    return {
+      title: this.lifecycle?.params?.['title'] || i18next.t('title.activity-approval'),
+      help: 'worklist/activity-approval',
+      actions: judgment
+        ? []
+        : [
+            {
+              title: i18next.t('button.reject'),
+              action: this._rejectActivityApproval.bind(this),
+              ...CommonButtonStyles.play
+            },
+
+            {
+              title: i18next.t('button.approve'),
+              action: this._approveActivityApproval.bind(this),
+              ...CommonButtonStyles.save
+            },
+
+            {
+              title: i18next.t('button.save'),
+              action: this._saveActivityApproval.bind(this),
+              ...CommonButtonStyles.save
+            }
+          ]
+    }
+  }
+
+  render() {
+    const { state, dueAt, assignedAt, assignee, activityInstance } = this.activityThread || {}
+    const { name, description, thumbnail, approvalLine } = activityInstance || {}
+
+    return html`
+      <div header>
+        <div>
+          <div>name: ${name}</div>
+          <div>description: ${description}</div>
+          <div>state: ${state}</div>
+          <div>assigned at: ${assignedAt && formatter.format(new Date(assignedAt))}</div>
+          <div>due at: ${dueAt && formatter.format(new Date(dueAt))}</div>
+          <div>assignee: ${assignee?.name}</div>
+        </div>
+        <div>
+          <div approval-line>
+            ${approvalLine ? html` <approval-line-view .model=${approvalLine}></approval-line-view> ` : html``}
+          </div>
+          <img src=${thumbnail} />
+        </div>
+      </div>
+
+      <div content>${this.activityContent()}</div>
+    `
+  }
+
+  activityContent() {
+    switch (this.activityThread?.activityInstance?.uiType) {
+      case 'template':
+        return this.templateContent()
+      case 'generated':
+        return this.generatedContent()
+      case 'board':
+        return this.boardContent()
+      case 'page':
+      case 'external':
+      default:
+        return html``
+    }
+  }
+
+  templateContent() {
+    const { uiSource: 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(
+      activityInstance.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.activityApproval.output = e.currentTarget.value)}
+          ></ox-properties-dynamic-view>
+        </fieldset>
+      `
+    )
+  }
+
+  boardContent() {
+    const { output, activityInstance } = this.activityThread
+    const { uiSource: boardId, input } = activityInstance || {}
+
+    if (!this.board || this.board.id !== boardId) {
+      this.board = {
+        id: boardId
+      }
+    }
+
+    return keyed(
+      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>
+      `
+    )
+  }
+
+  @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('activityApproval')) {
+      this.updateContext()
+    }
+  }
+
+  async pageUpdated(changes, lifecycle, changedBefore) {
+    if (this.active) {
+      this.fetchActivityApproval(lifecycle.resourceId)
+    }
+  }
+
+  async fetchActivityApproval(id) {
+    const response = await client.query({
+      query: gql`
+        query activityApproval($id: String!) {
+          activityApproval(id: $id) ${ActivityApprovalFetchResult}
+        }
+      `,
+      variables: {
+        id
+      }
+    })
+
+    this.activityApproval = response.data.activityApproval
+    this.activityThread = this.activityApproval.activityThread
+  }
+
+  async _rejectActivityApproval() {
+    var { id } = this.activityApproval
+    var comment = 'xxxxxxxxxxxxxxxxxxx'
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($id: String!, $comment: String!) {
+          rejectActivityApproval(id: $id,  comment: $comment) ${ActivityApprovalFetchResult}
+        }
+      `,
+      variables: {
+        id,
+        comment
+      }
+    })
+
+    if (!response.errors) {
+      this.activityApproval = response.data.startActivityApproval
+
+      document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            message: i18next.t('text.task_is_rejected_successfully')
+          }
+        })
+      )
+    }
+  }
+
+  async _approveActivityApproval() {
+    var { id } = this.activityApproval
+    var comment = 'xxxxxxxxxxxxxxxxxxx'
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($id: String!, $comment: String!) {
+          approveActivityApproval(id: $id,  comment: $comment) ${ActivityApprovalFetchResult}
+        }
+      `,
+      variables: {
+        id,
+        comment
+      }
+    })
+
+    if (!response.errors) {
+      this.activityApproval = response.data.approveActivityApproval
+
+      document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            message: i18next.t('text.task_is_approved_successfully')
+          }
+        })
+      )
+    }
+  }
+
+  async _saveActivityApproval() {
+    var { id } = this.activityApproval
+    var comment = 'yyyyyyyyyyyyyyyyyyy'
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($id: String!, $comment: String) {
+          saveActivityApproval(id: $id, comment: $comment) ${ActivityApprovalFetchResult}
+        }
+      `,
+      variables: {
+        id,
+        comment
+      }
+    })
+
+    if (!response.errors) {
+      this.activityApproval = response.data.saveActivityApproval
+
+      document.dispatchEvent(
+        new CustomEvent('notify', {
+          detail: {
+            message: i18next.t('text.task_is_saved_successfully')
+          }
+        })
+      )
+    }
+  }
+}

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

@@ -139,8 +139,8 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
         },
 
         endable && {
-          title: i18next.t('button.finish'),
-          action: this._endActivityThread.bind(this),
+          title: i18next.t('button.submit'),
+          action: this._submitActivityThread.bind(this),
           ...CommonButtonStyles.save
         }
       ].filter(Boolean /* truthy only */)
@@ -392,7 +392,7 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
     }
   }
 
-  async _endActivityThread() {
+  async _submitActivityThread() {
     var { id, output, reason, activityInstance } = this.activityThread
     var { uiType } = activityInstance || {}
 
@@ -403,7 +403,7 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
     const response = await client.mutate({
       mutation: gql`
         mutation ($id: String!, $output: Object, $reason: String) {
-          endActivityThread(id: $id, output: $output, reason: $reason) ${ActivityThreadFetchResult}
+          submitActivityThread(id: $id, output: $output, reason: $reason) ${ActivityThreadFetchResult}
         }
       `,
       variables: {
@@ -414,7 +414,7 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
     })
 
     if (!response.errors) {
-      this.activityThread = response.data.endActivityThread
+      this.activityThread = response.data.submitActivityThread
 
       document.dispatchEvent(
         new CustomEvent('notify', {