@things-factory/worklist 6.0.27 → 6.0.32

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
+  }
+}

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

@@ -13,7 +13,7 @@ import { openPopup } from '@operato/layout'
 import { PageView, store } from '@operato/shell'
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 
-import { ActivityTypes } from '../../types.js'
+import { ActivityTypes } from '../../types/types.js'
 
 @customElement('activity-store-page')
 export class ActivityStorePage extends connect(store)(localize(i18next)(PageView)) {

package/client/pages/activity-template/activity-template-list-page.ts

@@ -15,7 +15,7 @@ import { PageView, store } from '@operato/shell'
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 
-import { ActivityTypes, ActivityUITypes } from '../../types.js'
+import { ActivityTypes, ActivityUITypes } from '../../types/types.js'
 
 @customElement('activity-template-list-page')
 export class ActivityTemplateListPage extends connect(store)(localize(i18next)(PageView)) {
@@ -215,6 +215,34 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
           },
           width: 140
         },
+        {
+          type: 'select',
+          name: 'viewType',
+          label: true,
+          header: i18next.t('field.view-type'),
+          record: {
+            editable: true,
+            options: ActivityUITypes
+          },
+          width: 80
+        },
+        {
+          type: 'string',
+          name: 'viewSource',
+          header: i18next.t('field.view-source'),
+          record: {
+            editable: true,
+            editor: function (value, column, record, rowIndex, field) {
+              var type = record.viewType !== 'board' ? 'script' : 'board'
+              return getEditor(type)(value, column, record, rowIndex, field)
+            },
+            renderer: function (value, column, record, rowIndex, field) {
+              var type = record.viewType !== 'board' ? 'script' : 'board'
+              return getRenderer(type)(value, column, record, rowIndex, field)
+            }
+          },
+          width: 140
+        },
         {
           type: 'select',
           name: 'reportType',

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

@@ -4,7 +4,7 @@ import '@operato/board/ox-board-viewer.js'
 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'
 
@@ -100,8 +100,8 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
     `
   ]
 
-  @property({ type: Object }) activityThread: any
-  @property({ type: Object }) board: any
+  @state() activityThread: any
+  @state() board: any
 
   get context() {
     const state = this.activityThread?.state
@@ -260,6 +260,11 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
       }
     }
 
+    /* 
+      ox-board-viewer에서 provider에 의해 공급되는 board가 각 id별로 instance를 하나씩 밖에 가지지 않으므로,
+      동일한 id의 보드를 다른 page에 뺏기는 경우가 있다.
+      따라서, Page가 active될 때마다 타임스탬프를 refresh key로 설정하였다.
+      */
     return keyed(
       this.activityThread.id,
       html`

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

@@ -0,0 +1,102 @@
+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'
+
+@customElement('activity-thread-view')
+export class ActivityThreadView 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?: any //ActivityInstance
+
+  render() {
+    const { id, name, description, activity } = this.activityInstance
+    const instance = this.activityInstance
+
+    return html`<div content>XXX</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
+            }
+            updatedAt
+            collectedAt
+          }
+        }
+      `,
+      variables: {
+        id
+      }
+    })
+
+    this.activityInstance = response.data.activityInstance
+  }
+}