@things-factory/worklist 7.0.0-alpha.9 → 7.0.0

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

@@ -1,571 +0,0 @@
-import '@operato/property-editor/ox-properties-dynamic-view.js'
-import '@operato/board/ox-board-viewer.js'
-import '../../components/activity-thread-ribon.js'
-import '../../components/activity-thread-timeline.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 { CommonButtonStyles, ScrollbarStyles } from '@operato/styles'
-import { provider } from '@things-factory/board-ui'
-
-const ActivityThreadFetchResult = `\
-{
-  id
-  state
-  dueAt
-  assignedAt
-  assignee {
-    id
-    name
-  }
-  updatedAt
-  output
-  round
-  activityApprovals {
-    round
-    order
-    approver {
-      name
-    }
-    judgment
-    comment
-    createdAt
-    updatedAt
-    terminatedAt
-  }
-  activityThreadHistories {
-    transaction
-    reason
-    updater {
-      name
-    }
-    updatedAt
-    state
-    output
-  }
-  activityInstance {
-    id
-    name
-    description
-    state
-    activity {
-      id
-      model {
-        name
-        description
-        active
-        tag
-        inout
-        type
-        unit
-        options
-        quantifier
-        spec
-      }
-    }
-    approvalLine {
-      type
-      value
-      approver {
-        id
-        name
-        description
-        controlNo
-      }
-    }
-    thumbnail
-    input
-    output
-    uiType
-    uiSource
-    dueAt
-    terminatedAt
-    terminator {
-      name
-      email
-    }
-    createdAt
-  }
-}`
-
-export const ActivityThreadStatus = {
-  Assigned: 'assigned',
-  Started: 'started',
-  Delegated: 'delegated',
-  Rejected: 'rejected',
-  Ended: 'ended',
-  Aborted: 'aborted'
-}
-
-@customElement('activity-thread-page')
-export class ActivityThreadPage extends connect(store)(localize(i18next)(PageView)) {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        width: 100%;
-        overflow: auto;
-      }
-
-      ox-board-viewer {
-        width: 100%;
-        height: 100%;
-      }
-
-      activity-thread-timeline {
-        margin: var(--margin-default);
-      }
-
-      [empty] {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        align-self: center;
-      }
-    `
-  ]
-
-  @state() activityThread: any
-  @state() board: any
-
-  get context() {
-    const state = this.activityThread?.state
-
-    const restartable = [ActivityThreadStatus.Rejected].includes(state)
-    const savable = [ActivityThreadStatus.Assigned, ActivityThreadStatus.Started].includes(state)
-    const submittable = savable
-    // const delegatable = savable
-    // const abortable = savable
-
-    return {
-      title: this.lifecycle?.params?.['title'] || i18next.t('title.activity'),
-      help: 'worklist/activity',
-      actions: [
-        savable && {
-          title: i18next.t('button.save'),
-          action: this._saveActivityThread.bind(this),
-          ...CommonButtonStyles.save
-        },
-
-        submittable && {
-          title: i18next.t('button.submit'),
-          action: this._submitActivityThread.bind(this),
-          ...CommonButtonStyles.submit
-        },
-
-        // delegatable && {
-        //   title: i18next.t('button.delegate'),
-        //   action: this._delegateActivityThread.bind(this),
-        //   ...CommonButtonStyles.save
-        // },
-
-        // abortable && {
-        //   title: i18next.t('button.abort'),
-        //   action: this._abortActivityThread.bind(this),
-        //   ...CommonButtonStyles.cancel
-        // },
-
-        restartable && {
-          title: i18next.t('button.restart'),
-          action: this._restartActivityThread.bind(this),
-          ...CommonButtonStyles.save
-        },
-        {
-          title: i18next.t('button.close'),
-          action: () => {
-            history.back()
-          },
-          ...CommonButtonStyles.back
-        }
-      ].filter(Boolean /* truthy only */)
-      // activityThread: this.activityThread
-    }
-  }
-
-  render() {
-    const activityThread = this.activityThread
-
-    if (!activityThread) {
-      return html`<div empty>${i18next.t('text.no activity thread info')}</div> `
-    }
-
-    return html`
-      <activity-thread-ribon .activityThread=${activityThread}></activity-thread-ribon>
-      ${this.activityContent()}
-      <activity-thread-timeline .activityThread=${activityThread} short-form></activity-thread-timeline>
-    `
-  }
-
-  activityContent() {
-    switch (this.activityThread?.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':
-        return html``
-      default:
-        return this.generatedContent()
-    }
-  }
-
-  templateContent() {
-    if (!this.activityThread) {
-      return html``
-    }
-
-    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,
-          name: item.tag,
-          label: item.tKey || item.name,
-          property: item.options
-        }
-      })
-  }
-
-  getOutputSpec() {
-    const model = this.activityThread?.activityInstance?.activity?.model
-
-    return (model || [])
-      .filter(item => item.inout === 'inout' || item.inout === 'out')
-      .map(item => {
-        return {
-          ...item,
-          name: item.tag,
-          label: item.tKey || item.name,
-          property: item.options
-        }
-      })
-  }
-
-  generatedContent() {
-    if (!this.activityThread) {
-      return html``
-    }
-
-    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((output, item) => {
-          output[item.tag] = input[item.tag]
-          return output
-        }, {})
-    }
-
-    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() {
-    if (!this.activityThread) {
-      return html``
-    }
-
-    const { output, activityInstance } = this.activityThread
-    const { uiSource: 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() {
-    if (!this.activityThread) {
-      return html``
-    }
-
-    const { output, activityInstance } = this.activityThread
-    const { uiSource: tagName, input } = activityInstance || {}
-
-    const element = document.createElement(tagName)
-    element.id = 'custom-content'
-    element.activityId = activityInstance.activity.id
-    element.input = input
-    element.output = output
-    element.activityThread = this.activityThread
-
-    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 && lifecycle.resourceId) {
-      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()
-  }
-
-  async _startActivityThread() {
-    var { id, output, reason, activityInstance } = this.activityThread
-    var { uiType } = activityInstance
-
-    if (uiType === 'board') {
-      output = this.getOutputFromBoard()
-    }
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation ($id: String!, $output: Object) {
-          startActivityThread(id: $id, output: $output) ${ActivityThreadFetchResult}
-        }
-      `,
-      variables: {
-        id,
-        output
-      }
-    })
-
-    if (!response.errors) {
-      this.activityThread = response.data.startActivityThread
-
-      document.dispatchEvent(
-        new CustomEvent('notify', {
-          detail: {
-            message: i18next.t('text.task_is_started_successfully')
-          }
-        })
-      )
-    }
-  }
-
-  async _restartActivityThread() {
-    var { id, output, activityInstance } = this.activityThread
-    var { uiType } = activityInstance
-
-    if (uiType === 'board') {
-      output = this.getOutputFromBoard()
-    }
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation ($id: String!, $output: Object) {
-          restartActivityThread(id: $id, output: $output) ${ActivityThreadFetchResult}
-        }
-      `,
-      variables: {
-        id,
-        output
-      }
-    })
-
-    if (!response.errors) {
-      this.activityThread = response.data.restartActivityThread
-
-      document.dispatchEvent(
-        new CustomEvent('notify', {
-          detail: {
-            message: i18next.t('text.task_is_restarted_successfully')
-          }
-        })
-      )
-    }
-  }
-
-  async _delegateActivityThread() {
-    throw 'not implemented yet'
-  }
-
-  async _saveActivityThread() {
-    var { id, output, reason, activityInstance } = this.activityThread
-    var { uiType } = activityInstance || {}
-
-    if (uiType === 'board') {
-      output = this.getOutputFromBoard()
-    }
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation ($id: String!, $save: ActivityThreadSave!) {
-          saveActivityThread(id: $id, save: $save) ${ActivityThreadFetchResult}
-        }
-      `,
-      variables: {
-        id,
-        save: {
-          output
-        }
-      }
-    })
-
-    if (!response.errors) {
-      this.activityThread = response.data.saveActivityThread
-
-      document.dispatchEvent(
-        new CustomEvent('notify', {
-          detail: {
-            message: i18next.t('text.task_is_saved_successfully')
-          }
-        })
-      )
-    }
-  }
-
-  async _submitActivityThread() {
-    var { id, output, reason, activityInstance } = this.activityThread
-    var { uiType } = activityInstance || {}
-
-    if (uiType === 'board') {
-      output = this.getOutputFromBoard()
-    }
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation ($id: String!, $output: Object, $reason: String) {
-          submitActivityThread(id: $id, output: $output, reason: $reason) ${ActivityThreadFetchResult}
-        }
-      `,
-      variables: {
-        id,
-        output,
-        reason
-      }
-    })
-
-    if (!response.errors) {
-      this.activityThread = response.data.submitActivityThread
-
-      document.dispatchEvent(
-        new CustomEvent('notify', {
-          detail: {
-            message: i18next.t('text.task_is_finished_successfully')
-          }
-        })
-      )
-    }
-  }
-
-  async _abortActivityThread() {
-    var { id, reason } = this.activityThread
-
-    const response = await client.mutate({
-      mutation: gql`
-        mutation ($id: String!, $reason: String) {
-          abortActivityThread(id: $id, reason: $reason) ${ActivityThreadFetchResult}
-        }
-      `,
-      variables: {
-        id,
-        reason
-      }
-    })
-
-    if (!response.errors) {
-      this.activityThread = response.data.abortActivityThread
-
-      document.dispatchEvent(
-        new CustomEvent('notify', {
-          detail: {
-            message: i18next.t('text.task_is_aborted_successfully')
-          }
-        })
-      )
-    }
-  }
-}