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

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

@@ -1,550 +0,0 @@
-import '@operato/property-editor/ox-properties-dynamic-view.js'
-import '@operato/board/ox-board-viewer.js'
-import '@things-factory/organization'
-import '../../components/activity-instance-ribon.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'
-import { notify } from '@operato/layout'
-
-@customElement('activity-instance-start-page')
-export class ActivityInstanceStartPage extends connect(store)(localize(i18next)(PageView)) {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
-      }
-
-      ox-board-viewer {
-        width: 100%;
-        height: 100%;
-      }
-
-      #custom-content {
-        flex: 1;
-      }
-    `
-  ]
-
-  @state() activity: any = {}
-  @state() activityInstance: any = {}
-  @state() board: any
-  @state() customHtmlElement: 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`
-      <activity-instance-ribon .activityInstance=${this.activityInstance}></activity-instance-ribon>
-
-      ${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() {
-    if (!this.activityInstance) {
-      return html``
-    }
-
-    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,
-          name: item.tag,
-          label: item.tKey || 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,
-          name: item.tag,
-          label: item.tKey || item.name,
-          property: item.options
-        }
-      })
-  }
-
-  generatedContent() {
-    if (!this.activityInstance) {
-      return html``
-    }
-
-    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() {
-    if (!this.activityInstance) {
-      return html``
-    }
-
-    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() {
-    if (!this.activityInstance) {
-      return html``
-    }
-
-    const { uiSource: tagName, input, output } = this.activityInstance
-
-    if (!this.customHtmlElement) {
-      const element = document.createElement(tagName)
-      element.id = 'custom-content'
-      element.activityId = this.activityInstance.activity.id
-      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
-      })
-
-      this.customHtmlElement = element
-    }
-
-    return this.customHtmlElement
-  }
-
-  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 && lifecycle.resourceId) {
-      this.fetchActivityInstance(lifecycle.resourceId)
-    } else {
-      this.customHtmlElement = undefined
-    }
-  }
-
-  async fetchActivityInstance(id) {
-    const response = await client.query({
-      query: gql`
-        query activityInstance($id: String!) {
-          activityInstance(id: $id) {
-            id
-            name
-            description
-            state
-            activity {
-              id
-              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.customHtmlElement = undefined
-    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 {
-              id
-              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.customHtmlElement = undefined
-      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 {
-              id
-              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.customHtmlElement = undefined
-      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')}`
-        })
-      })
-    }
-  }
-}