@things-factory/worklist 6.0.32 → 6.0.33

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

@@ -10,7 +10,7 @@ import moment from 'moment-timezone'
 import { DataGrist, getEditor, getRenderer } from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
-import { openPopup } from '@operato/layout'
+import { notify, openPopup } from '@operato/layout'
 import { PageView, store } from '@operato/shell'
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
@@ -67,7 +67,7 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
       actions: [
         {
           title: i18next.t('button.save'),
-          action: this._updateActivity.bind(this),
+          action: this.updateActivity.bind(this),
           ...CommonButtonStyles.save
         }
       ]
@@ -120,6 +120,24 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
       columns: [
         { type: 'gutter', gutterName: 'sequence' },
         { type: 'gutter', gutterName: 'row-selector', multiple: true },
+        {
+          type: 'gutter',
+          gutterName: 'button',
+          icon: record => (!record || !record.name ? '' : record.scheduleId ? 'pause' : 'play_arrow'),
+          handlers: {
+            click: (columns, data, column, record, rowIndex) => {
+              if (!record || !record.name) {
+                /* TODO record가 새로 추가된 것이면 리턴하도록 한다. */
+                return
+              }
+              if (record.scheduleId) {
+                this.stopActivitySchedule(record)
+              } else {
+                this.startActivitySchedule(record)
+              }
+            }
+          }
+        },
         {
           type: 'gutter',
           gutterName: 'button',
@@ -538,11 +556,14 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
               }
               uiType
               uiSource
+              viewType
+              viewSource
               reportType
               reportSource
               startable
               schedule
               timezone
+              scheduleId
               standardTime
               leadTime
               cycleTime
@@ -570,7 +591,7 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
     }
   }
 
-  async _updateActivity() {
+  async updateActivity() {
     let patches = this.grist?.dirtyRecords
     if (patches && patches.length) {
       patches = patches.map(patch => {
@@ -605,4 +626,58 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
       }
     }
   }
+
+  async startActivitySchedule(record) {
+    var response = await client.mutate({
+      mutation: gql`
+        mutation ($activityId: String!) {
+          startActivitySchedule(activityId: $activityId) {
+            scheduleId
+          }
+        }
+      `,
+      variables: {
+        activityId: record.id
+      }
+    })
+
+    const scheduleId = response.data.startActivitySchedule.scheduleId
+    record.scheduleId = scheduleId
+
+    notify({
+      level: 'info',
+      message: `${record.scheduleId ? 'success' : 'fail'} to start activity schedule : ${record.name}`
+    })
+
+    this.grist.fetch()
+  }
+
+  async stopActivitySchedule(record) {
+    var response = await client.mutate({
+      mutation: gql`
+        mutation ($activityId: String!) {
+          stopActivitySchedule(activityId: $activityId) {
+            scheduleId
+          }
+        }
+      `,
+      variables: {
+        activityId: record.id
+      }
+    })
+
+    if (!response.errors) {
+      notify({
+        level: 'info',
+        message: `success to stop activity schedule : ${record.name}`
+      })
+    } else {
+      notify({
+        level: 'error',
+        message: `${response.errors.map(error => error.message).join('\n')}`
+      })
+    }
+
+    this.grist.fetch()
+  }
 }

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

@@ -348,6 +348,8 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
               active
               uiType
               uiSource
+              viewType
+              viewSource
               reportType
               reportSource
               updater {

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

@@ -0,0 +1,293 @@
+import '@operato/property-editor/ox-properties-dynamic-view.js'
+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, 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 { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { provider } from '@things-factory/board-ui'
+
+const ActivityThreadFetchResult = `\
+{
+  id
+  state
+  dueAt
+  assignedAt
+  assignee {
+    id
+    name
+  }
+  output
+  round
+  activityInstance {
+    id
+    name
+    description
+    state
+    activity {
+      model {
+        name
+        description
+        active
+        tag
+        inout
+        type
+        unit
+        options
+        quantifier
+        spec
+      }
+    }
+    approvalLine {
+      type
+      value
+      approver {
+        id
+        name
+        description
+        controlNo
+      }
+    }
+    thumbnail
+    input
+    output
+    viewType
+    viewSource
+    dueAt
+    createdAt
+  }
+}`
+
+export const ActivityThreadStatus = {
+  Assigned: 'assigned',
+  Started: 'started',
+  Delegated: 'delegated',
+  Rejected: 'rejected',
+  Ended: 'ended',
+  Aborted: 'aborted'
+}
+
+@customElement('activity-thread-view-page')
+export class ActivityThreadViewPage extends connect(store)(localize(i18next)(PageView)) {
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        width: 100%;
+        padding: 5px;
+        overflow: auto;
+      }
+
+      ox-board-viewer {
+        width: 100%;
+        height: 100%;
+      }
+
+      #custom-content {
+        flex: 1;
+      }
+    `
+  ]
+
+  @state() activityThread: any
+  @state() board: any
+
+  get context() {
+    return {
+      title: this.lifecycle?.params?.['title'] || i18next.t('title.activity'),
+      help: 'worklist/activity',
+      actions: [],
+      activityThread: this.activityThread
+    }
+  }
+
+  render() {
+    return html` ${this.activityContent()}`
+  }
+
+  activityContent() {
+    switch (this.activityThread?.activityInstance?.viewType) {
+      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() {
+    const { viewSource: 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(
+      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() {
+    const { output, activityInstance } = this.activityThread
+    const { viewSource: 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() {
+    const { output, activityInstance } = this.activityThread
+    const { viewSource: tagName, input } = activityInstance || {}
+
+    const element = document.createElement(tagName)
+    element.id = 'custom-content'
+    element.input = input
+    element.output = output
+    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) {
+      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()
+  }
+}

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

@@ -362,6 +362,8 @@ export class ActivityTemplateListPage extends connect(store)(localize(i18next)(P
               thumbnail
               uiType
               uiSource
+              viewType
+              viewSource
               reportType
               reportSource
             }

package/client/pages/todo/done-list-page.ts

@@ -121,7 +121,7 @@ export class DoneListPage extends connect(store)(localize(i18next)(PageView)) {
           handlers: {
             click: (columns, data, column, record, rowIndex) => {
               const { id } = record
-              this.openActivityThread(record)
+              this.openActivityThreadViewPage(record)
             }
           }
         },
@@ -338,7 +338,7 @@ export class DoneListPage extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 
-  openActivityThread(activityThread) {
-    navigate(`activity-thread/${activityThread.id}?title=${activityThread.name}`)
+  openActivityThreadViewPage(activityThread) {
+    navigate(`activity-thread-view/${activityThread.id}?title=${activityThread.name}`)
   }
 }

package/client/pages/todo/todo-list-page.ts

@@ -185,13 +185,12 @@ export class TodoListPage extends connect(store)(localize(i18next)(PageView)) {
           record: {
             editable: false,
             options: [
-              { display: 'Draft', value: 'draft' },
-              { display: 'Posted', value: 'posted' },
-              { display: 'WaitingAssignment', value: 'waiting-assignment' },
               { display: 'Assigned', value: 'assigned' },
               { display: 'Started', value: 'started' },
-              { display: 'Pending', value: 'pending' },
+              { display: 'Delegated', value: 'delegated' },
+              { display: 'Submitted', value: 'submitted' },
               { display: 'Escalated', value: 'escalated' },
+              { display: 'Rejected', value: 'rejected' },
               { display: 'Ended', value: 'ended' },
               { display: 'Aborted', value: 'aborted' }
             ]

package/client/route.ts

@@ -56,6 +56,10 @@ export default function route(page: string) {
       import('./pages/activity-thread/activity-thread-page.js')
       return page
 
+    case 'activity-thread-view':
+      import('./pages/activity-thread/activity-thread-view-page.js')
+      return page
+
     case 'activity-approval':
       import('./pages/activity-approval/activity-approval-page.js')
       return page

package/dist-client/components/activity-search-keys-input.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+import { FetchOption } from '@operato/data-grist';
+import { ActivitySearchKeyItem } from '../types';
+declare const ActivitySearchKeysInput_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class ActivitySearchKeysInput extends ActivitySearchKeysInput_base {
+    static styles: import("lit").CSSResult[];
+    value: ActivitySearchKeyItem[];
+    gristConfig: any;
+    private grist;
+    render(): import("lit-html").TemplateResult<1>;
+    fetchHandler({ filters, page, limit, sortings }: FetchOption): Promise<{
+        total: number;
+        records: ActivitySearchKeyItem[];
+    }>;
+    private updateSearchKeyItems;
+}
+export {};

package/dist-client/components/activity-search-keys-input.js

@@ -0,0 +1,173 @@
+import { __decorate, __metadata } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { isMobileDevice } from '@operato/utils';
+import { DataGrist } from '@operato/data-grist';
+let ActivitySearchKeysInput = class ActivitySearchKeysInput extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.value = [];
+        this.gristConfig = {
+            list: { fields: ['name', 'description', 'active'] },
+            columns: [
+                { type: 'gutter', gutterName: 'row-selector', multiple: true },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'add',
+                    handlers: {
+                        click: 'record-copy'
+                    }
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'delete',
+                    handlers: {
+                        click: 'record-delete'
+                    }
+                },
+                { type: 'gutter', gutterName: 'sequence' },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'arrow_upward',
+                    handlers: {
+                        click: 'move-up'
+                    }
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'arrow_downward',
+                    handlers: {
+                        click: 'move-down'
+                    }
+                },
+                {
+                    type: 'string',
+                    name: 'name',
+                    header: i18next.t('field.name'),
+                    record: {
+                        editable: true
+                    },
+                    width: 140
+                },
+                {
+                    type: 'string',
+                    name: 'description',
+                    header: i18next.t('field.description'),
+                    record: {
+                        editable: true
+                    },
+                    width: 180
+                },
+                {
+                    type: 'string',
+                    name: 'inputKey',
+                    header: i18next.t('field.input-key'),
+                    record: {
+                        editable: true
+                    },
+                    width: 180
+                },
+                {
+                    type: 'string',
+                    name: 'tKey',
+                    header: i18next.t('field.t-key'),
+                    record: {
+                        editable: true
+                    },
+                    width: 180
+                }
+            ],
+            rows: {
+                selectable: {
+                    multiple: true
+                }
+            },
+            pagination: {
+                infinite: true
+            },
+            sorters: []
+        };
+    }
+    render() {
+        return html `
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.gristConfig}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+      ></ox-grist>
+      <div class="button-container">
+        <mwc-button raised @click=${this.updateSearchKeyItems.bind(this)}>${i18next.t('button.save')}</mwc-button>
+      </div>
+    `;
+    }
+    async fetchHandler({ filters, page, limit, sortings = [] }) {
+        const records = this.value || [];
+        return {
+            total: records.length,
+            records
+        };
+    }
+    async updateSearchKeyItems() {
+        this.grist.commit();
+        this.value = this.grist.data.records.map(({ name, description, inputKey, tKey }) => {
+            return {
+                name,
+                description,
+                inputKey,
+                tKey
+            };
+        });
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: this.value
+        }));
+    }
+};
+ActivitySearchKeysInput.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+
+      .button-container {
+        display: flex;
+        margin-left: auto;
+        padding: var(--padding-default);
+      }
+
+      [danger] {
+        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
+      }
+      mwc-button {
+        margin-left: var(--margin-default);
+      }
+    `
+];
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], ActivitySearchKeysInput.prototype, "value", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ActivitySearchKeysInput.prototype, "gristConfig", void 0);
+__decorate([
+    query('ox-grist'),
+    __metadata("design:type", DataGrist)
+], ActivitySearchKeysInput.prototype, "grist", void 0);
+ActivitySearchKeysInput = __decorate([
+    customElement('activity-search-keys-input')
+], ActivitySearchKeysInput);
+export { ActivitySearchKeysInput };
+//# sourceMappingURL=activity-search-keys-input.js.map

package/dist-client/components/activity-search-keys-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-search-keys-input.js","sourceRoot":"","sources":["../../client/components/activity-search-keys-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { isMobileDevice } from '@operato/utils'\nimport { getEditor, getRenderer, ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'\nimport { ActivitySearchKeyItem } from '../types'\n\n@customElement('activity-search-keys-input')\nexport class ActivitySearchKeysInput extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: #fff;\n      }\n\n      ox-grist {\n        flex: 1;\n      }\n\n      .button-container {\n        display: flex;\n        margin-left: auto;\n        padding: var(--padding-default);\n      }\n\n      [danger] {\n        --mdc-theme-primary: var(--mdc-danger-button-primary-color);\n      }\n      mwc-button {\n        margin-left: var(--margin-default);\n      }\n    `\n  ]\n\n  @property({ type: Array }) value: ActivitySearchKeyItem[] = []\n\n  @state() gristConfig: any = {\n    list: { fields: ['name', 'description', 'active'] },\n    columns: [\n      { type: 'gutter', gutterName: 'row-selector', multiple: true },\n      {\n        type: 'gutter',\n        gutterName: 'button',\n        icon: 'add',\n        handlers: {\n          click: 'record-copy'\n        }\n      },\n      {\n        type: 'gutter',\n        gutterName: 'button',\n        icon: 'delete',\n        handlers: {\n          click: 'record-delete'\n        }\n      },\n      { type: 'gutter', gutterName: 'sequence' },\n      {\n        type: 'gutter',\n        gutterName: 'button',\n        icon: 'arrow_upward',\n        handlers: {\n          click: 'move-up'\n        }\n      },\n      {\n        type: 'gutter',\n        gutterName: 'button',\n        icon: 'arrow_downward',\n        handlers: {\n          click: 'move-down'\n        }\n      },\n      {\n        type: 'string',\n        name: 'name',\n        header: i18next.t('field.name'),\n        record: {\n          editable: true\n        },\n        width: 140\n      },\n      {\n        type: 'string',\n        name: 'description',\n        header: i18next.t('field.description'),\n        record: {\n          editable: true\n        },\n        width: 180\n      },\n      {\n        type: 'string',\n        name: 'inputKey',\n        header: i18next.t('field.input-key'),\n        record: {\n          editable: true\n        },\n        width: 180\n      },\n      {\n        type: 'string',\n        name: 'tKey',\n        header: i18next.t('field.t-key'),\n        record: {\n          editable: true\n        },\n        width: 180\n      }\n    ],\n    rows: {\n      selectable: {\n        multiple: true\n      }\n    },\n    pagination: {\n      infinite: true\n    },\n    sorters: []\n  }\n\n  @query('ox-grist') private grist!: DataGrist\n\n  render() {\n    return html`\n      <ox-grist\n        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n        .config=${this.gristConfig}\n        .fetchHandler=${this.fetchHandler.bind(this)}\n      ></ox-grist>\n      <div class=\"button-container\">\n        <mwc-button raised @click=${this.updateSearchKeyItems.bind(this)}>${i18next.t('button.save')}</mwc-button>\n      </div>\n    `\n  }\n\n  async fetchHandler({ filters, page, limit, sortings = [] }: FetchOption) {\n    const records = this.value || []\n    return {\n      total: records.length,\n      records\n    }\n  }\n\n  private async updateSearchKeyItems() {\n    this.grist.commit()\n\n    this.value = this.grist.data.records.map(({ name, description, inputKey, tKey }) => {\n      return {\n        name,\n        description,\n        inputKey,\n        tKey\n      }\n    })\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value\n      })\n    )\n  }\n}\n"]}