@things-factory/worklist 6.0.26 → 6.0.28

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

@@ -1,11 +1,10 @@
 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 { customElement, property, query, state } from 'lit/decorators.js'
 import { keyed } from 'lit/directives/keyed.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
@@ -57,6 +56,7 @@ const ActivityApprovalFetchResult = `\
       }
       approvalLine {
         type
+        value
         approver {
           id
           name
@@ -92,6 +92,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
       :host {
         display: flex;
         flex-direction: column;
+        position: relative;
 
         width: 100%;
         padding: 5px;
@@ -102,12 +103,36 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
         width: 100%;
         height: 100%;
       }
+
+      #custom-content {
+        flex: 1;
+      }
+
+      div[comment] {
+        display: flex;
+        width: 100%;
+        height: 100px;
+        right: 0;
+        bottom: 0;
+        margin: 0;
+        padding: 0;
+        opacity: 0.8;
+      }
+
+      textarea {
+        flex: 1;
+        padding: 10px;
+        resize: none;
+        background-color: black;
+        color: yellow;
+        outline: none;
+      }
     `
   ]
 
-  @property({ type: Object }) activityApproval: any
-  @property({ type: Object }) activityThread: any
-  @property({ type: Object }) board: any
+  @state() activityApproval: any
+  @state() activityThread: any
+  @state() board: any
 
   get context() {
     const judgment = this.activityApproval?.judgment
@@ -141,7 +166,18 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
   }
 
   render() {
-    return html` ${this.activityContent()}`
+    return html`
+      ${this.activityContent()}
+      <div comment>
+        <textarea
+          placeholder="Jot down your comment here."
+          .value=${this.activityApproval?.comment}
+          @change=${(e: Event) => {
+            this.activityApproval.comment = (e.target as HTMLTextAreaElement).value
+          }}
+        ></textarea>
+      </div>
+    `
   }
 
   activityContent() {
@@ -152,6 +188,8 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
         return this.generatedContent()
       case 'board':
         return this.boardContent()
+      case 'custom-element':
+        return this.customElementContent()
       case 'page':
       case 'external':
       default:
@@ -207,7 +245,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
     }
 
     return keyed(
-      activityInstance.id,
+      this.activityApproval.id,
       html`
         <fieldset>
           <legend>Input</legend>
@@ -242,7 +280,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
     }
 
     return keyed(
-      activityInstance.id,
+      this.activityApproval.id,
       html`
         <ox-board-viewer
           style="background-color: white;"
@@ -256,6 +294,18 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
     )
   }
 
+  customElementContent() {
+    const { output, activityInstance } = this.activityThread
+    const { uiSource: tagName, input } = activityInstance || {}
+
+    const element = document.createElement(tagName)
+    element.id = 'custom-content'
+    element.input = input
+    element.output = output
+
+    return element
+  }
+
   @query('ox-board-viewer') oxBoardViewer: any
 
   getOutputFromBoard() {
@@ -299,8 +349,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
   }
 
   async _rejectActivityApproval() {
-    var { id } = this.activityApproval
-    var comment = 'xxxxxxxxxxxxxxxxxxx'
+    var { id, comment } = this.activityApproval
 
     const response = await client.mutate({
       mutation: gql`
@@ -328,8 +377,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
   }
 
   async _approveActivityApproval() {
-    var { id } = this.activityApproval
-    var comment = 'xxxxxxxxxxxxxxxxxxx'
+    var { id, comment } = this.activityApproval
 
     const response = await client.mutate({
       mutation: gql`
@@ -357,8 +405,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
   }
 
   async _saveActivityApproval() {
-    var { id } = this.activityApproval
-    var comment = 'yyyyyyyyyyyyyyyyyyy'
+    var { id, comment } = this.activityApproval
 
     const response = await client.mutate({
       mutation: gql`

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

@@ -57,6 +57,10 @@ export class ActivityInstancePage extends connect(store)(localize(i18next)(PageV
         width: 100%;
         height: 100%;
       }
+
+      #custom-content {
+        flex: 1;
+      }
     `
   ]
 
@@ -111,6 +115,8 @@ export class ActivityInstancePage extends connect(store)(localize(i18next)(PageV
         return this.generatedContent()
       case 'board':
         return this.boardContent()
+      case 'custom-element':
+        return this.customElementContent()
       case 'page':
       case 'external':
       default:
@@ -203,6 +209,17 @@ export class ActivityInstancePage extends connect(store)(localize(i18next)(PageV
     `
   }
 
+  customElementContent() {
+    const { uiSource: tagName, input, output } = this.activityInstance
+
+    const element = document.createElement(tagName)
+    element.id = 'custom-content'
+    element.input = input
+    element.output = output
+
+    return element
+  }
+
   getOutputFromBoard() {
     const outputSpec = this.getOutputSpec()
     const data = this.viewer?.getSceneValues() || {}
@@ -255,6 +272,7 @@ export class ActivityInstancePage extends connect(store)(localize(i18next)(PageV
             uiSource
             approvalLine {
               type
+              value
               approver {
                 id
                 name

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

@@ -0,0 +1,377 @@
+import '@operato/data-grist'
+import './activity-instance-view.js'
+
+import gql from 'graphql-tag'
+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 { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { openPopup } from '@operato/layout'
+import { PageView, store } from '@operato/shell'
+import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
+import { OxPopup } from '@operato/popup'
+import { ActivitySearchKeyItem } from '../../types/activity-search-key-item-type'
+
+@customElement('activity-instance-search-page')
+export class ActivityInstanceSearchPage extends connect(store)(localize(i18next)(PageView)) {
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        overflow: hidden;
+      }
+
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+    `
+  ]
+
+  @state() activityId?: string
+  @state() activity: any
+  @state() searchKeys: ActivitySearchKeyItem[] = []
+
+  @state() gristConfig: any
+  @state() mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
+
+  @query('ox-grist') private grist!: DataGrist
+  @query('#sorter-control') private sortersControl!: OxPopup
+
+  get context() {
+    return {
+      search: {
+        handler: (search: string) => {
+          this.grist.searchText = search
+        },
+        placeholder: i18next.t('title.activity instance search'),
+        value: this.grist.searchText
+      },
+      filter: {
+        handler: () => {
+          this.grist.toggleHeadroom()
+        }
+      },
+      help: 'dataset/activity-instance-search',
+      actions: [],
+      exportable: {
+        name: i18next.t('title.activity instance search'),
+        data: this._exportableData.bind(this)
+      }
+    }
+  }
+
+  render() {
+    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}
+      >
+        <div slot="headroom">
+          <div id="filters">
+            <ox-filters-form autofocus without-search></ox-filters-form>
+          </div>
+
+          <div id="sorters">
+            Sort
+            <mwc-icon
+              @click=${e => {
+                const target = e.currentTarget
+                this.sortersControl.open({
+                  right: 0,
+                  top: target.offsetTop + target.offsetHeight
+                })
+              }}
+              >expand_more</mwc-icon
+            >
+            <ox-popup id="sorter-control">
+              <ox-sorters-control> </ox-sorters-control>
+            </ox-popup>
+          </div>
+
+          <div id="modes">
+            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
+            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+          </div>
+        </div>
+      </ox-grist>
+    `
+  }
+
+  pageUpdated(changes, lifecycle) {
+    if (this.active) {
+      this.activityId = lifecycle.resourceId
+      return
+    }
+  }
+
+  async updated(changes) {
+    if (changes.has('activityId')) {
+      const response = await client.query({
+        query: gql`
+          query ($id: String!) {
+            activity(id: $id) {
+              id
+              name
+              description
+              searchKeys {
+                name
+                description
+                inputKey
+                tKey
+              }
+            }
+          }
+        `,
+        variables: {
+          id: this.activityId
+        }
+      })
+
+      this.activity = response.data.activity
+      this.searchKeys = this.activity?.searchKeys
+      this.refreshGristConfig()
+
+      this.grist.fetch()
+    }
+  }
+
+  getSearchKeyColumns() {
+    return (
+      this.searchKeys?.map((item, index) => {
+        return {
+          type: 'string',
+          name: `key0${index + 1}`,
+          header: item.tKey ? i18next.t(item.tKey) : `key0${index + 1}`,
+          record: {
+            editable: false
+          },
+          sortable: true,
+          filter: 'i_like',
+          width: 120,
+          imex: true
+        }
+      }) || []
+    )
+  }
+
+  refreshGristConfig() {
+    const today = new Date().toISOString().split('T')[0]
+
+    this.gristConfig = {
+      list: {
+        fields: ['name', 'description'],
+        details: ['input', 'updatedAt']
+      },
+      columns: [
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: 'assignment',
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              openPopup(
+                html`
+                  <activity-instance-view
+                    activity-instance-id=${record.id}
+                    style="background-color: white;"
+                  ></activity-instance-view>
+                `,
+                {
+                  backdrop: true,
+                  size: 'large',
+                  title: i18next.t('title.activity instance view')
+                }
+              )
+            }
+          }
+        },
+        {
+          type: 'string',
+          name: 'name',
+          label: true,
+          header: i18next.t('field.name'),
+          record: {
+            editable: false
+          },
+          filter: 'search',
+          sortable: true,
+          width: 120,
+          imex: true
+        },
+        {
+          type: 'string',
+          name: 'description',
+          label: true,
+          header: i18next.t('field.description'),
+          record: {
+            editable: false
+          },
+          filter: 'search',
+          width: 150,
+          imex: true
+        },
+        ...this.getSearchKeyColumns(),
+        {
+          type: 'json5',
+          name: 'input',
+          header: i18next.t('field.input'),
+          record: {
+            editable: false
+          },
+          hidden: true,
+          imex: true
+        },
+        {
+          type: 'json5',
+          name: 'output',
+          header: i18next.t('field.output'),
+          record: {
+            editable: false
+          },
+          hidden: true,
+          imex: true
+        },
+        {
+          type: 'resource-object',
+          name: 'updater',
+          header: i18next.t('field.updater'),
+          sortable: true,
+          width: 120,
+          imex: true
+        },
+        {
+          type: 'datetime',
+          name: 'updatedAt',
+          header: i18next.t('field.updated_at'),
+          sortable: true,
+          width: 180,
+          imex: true
+        }
+      ],
+      rows: {
+        appendable: false,
+        selectable: {
+          multiple: true
+        }
+      },
+      sorters: [
+        {
+          name: 'updatedAt',
+          desc: true
+        }
+      ]
+    }
+  }
+
+  async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {
+    if (!this.activity) {
+      return { records: [], total: 0 }
+    }
+
+    const response = await client.query({
+      query: gql`
+        query ($activityId: String!, $filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          responses: activityInstancesByActivity(
+            activityId: $activityId
+            filters: $filters
+            pagination: $pagination
+            sortings: $sortings
+          ) {
+            items {
+              id
+              name
+              description
+              key01
+              key02
+              key03
+              key04
+              key05
+              input
+              output
+              updater {
+                id
+                name
+              }
+              updatedAt
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        activityId: this.activityId,
+        filters,
+        pagination: { page, limit },
+        sortings
+      }
+    })
+
+    return {
+      total: response.data.responses.total || 0,
+      records: response.data.responses.items || []
+    }
+  }
+
+  _exportableData() {
+    let records = [] as GristRecord[]
+    if (this.grist.selected && this.grist.selected.length > 0) {
+      records = this.grist.selected
+    } else {
+      records = this.grist.data.records
+    }
+
+    var headerSetting = this.grist.compiledConfig.columns
+      .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
+      .map(column => {
+        return column.imex === true
+          ? {
+              header: column.header.renderer(column),
+              key: column.name,
+              width: column.width,
+              type: column.type
+            }
+          : column.imex
+      })
+
+    var data = records.map(item => {
+      return {
+        id: item.id,
+        ...this.gristConfig.columns
+          .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
+          .reduce((record, column) => {
+            const key = column.imex === true ? column.name : column.imex.key
+            record[key] = key
+              .split('.')
+              .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
+            return record
+          }, {})
+      }
+    })
+
+    return { header: headerSetting, data: data }
+  }
+}

package/client/pages/activity-instance/activity-instance-view.ts

@@ -0,0 +1,135 @@
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+import { client } from '@operato/graphql'
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+
+import { ActivityInstance } from '../../types/activity-instance'
+
+@customElement('activity-instance-view')
+export class ActivityInstanceView extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
+
+      div[content] {
+        flex: 1;
+
+        display: flex;
+        overflow: auto;
+      }
+    `
+  ]
+
+  @property({
+    type: String,
+    attribute: 'activity-instance-id'
+  })
+  activityInstanceId?: string
+
+  @state() activityInstance?: ActivityInstance
+
+  render() {
+    if (!this.activityInstance) {
+      return html`<div>no activity instance info.</div>`
+    }
+    const { id, name, description, activity } = this.activityInstance
+    const instance = this.activityInstance
+
+    return html`
+      <div>name: ${name}</div>
+      <div>description: ${description}</div>
+      ${this.renderSearchKeys()} ${this.renderInOut()}
+    `
+  }
+
+  renderSearchKeys() {
+    const { key01, key02, key03, key04, key05 } = this.activityInstance!
+
+    return html`
+      <div>key01: ${key01}</div>
+      <div>key02: ${key02}</div>
+      <div>key03: ${key03}</div>
+      <div>key04: ${key04}</div>
+      <div>key05: ${key05}</div>
+    `
+  }
+
+  renderInOut() {
+    const { input, output } = this.activityInstance!
+
+    return html`
+      <div>input: ${input}</div>
+      <div>output: ${output}</div>
+    `
+  }
+
+  updated(changes) {
+    if (changes.has('activityInstanceId')) {
+      this.fetchActivityInstance()
+    }
+  }
+
+  async fetchActivityInstance() {
+    const id = this.activityInstanceId
+
+    const response = await client.query({
+      query: gql`
+        query ($id: String!) {
+          activityInstance(id: $id) {
+            id
+            name
+            description
+            key01
+            key02
+            key03
+            key04
+            key05
+            input
+            output
+            activity {
+              id
+              name
+              description
+            }
+            activityThreads {
+              state
+              transaction
+              output
+              assignee {
+                id
+                name
+                email
+              }
+              round
+              assignedAt
+              startedAt
+              terminatedAt
+            }
+            updater {
+              id
+              name
+            }
+            assignedAt
+            startedAt
+            terminatedAt
+            updatedAt
+          }
+        }
+      `,
+      variables: {
+        id
+      }
+    })
+
+    this.activityInstance = response.data.activityInstance
+  }
+}