@things-factory/worklist 6.1.63 → 6.1.64

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

@@ -197,8 +197,9 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
         return this.customElementContent()
       case 'page':
       case 'external':
-      default:
         return html``
+      default:
+        return this.generatedContent()
     }
   }
 

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

@@ -192,13 +192,13 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
         border-bottom-color: #f4f4f4;
         border-top: 0;
       }
-      [etc] div {
+      [thread] div {
         border-bottom: var(--border-dark-color);
         padding: var(--padding-narrow);
         text-align: right;
         overflow: hidden;
       }
-      [etc] div label {
+      [thread] div label {
         float: left;
         width: 25%;
         text-align: left;
@@ -233,7 +233,6 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
       terminatedAt,
       updatedAt
     } = this.activityInstance
-    const instance = this.activityInstance
 
     return html`
       <div instance-container>
@@ -242,7 +241,9 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
           <strong>${name}</strong>
           ${description}
         </div>
-        ${approvalLine ? html`<approval-line-view .model=${approvalLine}></approval-line-view>` : html``}
+        <div>
+          ${approvalLine ? html`<approval-line-view .model=${approvalLine}></approval-line-view>` : html``}
+        </div>  
 
         <div>
           <label>${i18next.t('label.status')}</label>
@@ -282,7 +283,7 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
         <strong>${name}</strong>
       </div>
 
-      <div etc>
+      <div thread>
         <span subtitle>${i18next.t('label.information')}</span>
         <div>
           <label>${i18next.t('label.status')}</label>

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

@@ -172,8 +172,9 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
         return this.customElementContent()
       case 'page':
       case 'external':
-      default:
         return html``
+      default:
+        return this.generatedContent()
     }
   }
 

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

@@ -1,5 +1,6 @@
-import '@operato/property-editor/ox-properties-dynamic-view.js'
 import '@operato/board/ox-board-viewer.js'
+import '../../components/activity-thread-ribon.js'
+import './activity-thread-view.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -32,6 +33,7 @@ const ActivityThreadFetchResult = `\
     description
     state
     activity {
+      id
       model {
         name
         description
@@ -85,7 +87,6 @@ export class ActivityThreadViewPage extends connect(store)(localize(i18next)(Pag
         flex-direction: column;
 
         width: 100%;
-        padding: 5px;
         overflow: auto;
       }
 
@@ -94,6 +95,10 @@ export class ActivityThreadViewPage extends connect(store)(localize(i18next)(Pag
         height: 100%;
       }
 
+      activity-thread-view {
+        padding: var(--padding-default);
+      }
+
       #custom-content {
         flex: 1;
       }
@@ -107,13 +112,18 @@ export class ActivityThreadViewPage extends connect(store)(localize(i18next)(Pag
     return {
       title: this.lifecycle?.params?.['title'] || i18next.t('title.activity'),
       help: 'worklist/activity',
-      actions: [],
-      activityThread: this.activityThread
+      actions: []
+      // activityThread: this.activityThread
     }
   }
 
   render() {
-    return html` ${this.activityContent()}`
+    const activityThread = this.activityThread
+
+    return html` ${activityThread
+      ? html`<activity-thread-ribon .activityThread=${activityThread}></activity-thread-ribon>`
+      : html``}
+    ${this.activityContent()}`
   }
 
   activityContent() {
@@ -128,8 +138,9 @@ export class ActivityThreadViewPage extends connect(store)(localize(i18next)(Pag
         return this.customElementContent()
       case 'page':
       case 'external':
-      default:
         return html``
+      default:
+        return this.generatedContent()
     }
   }
 
@@ -169,43 +180,9 @@ export class ActivityThreadViewPage extends connect(store)(localize(i18next)(Pag
   }
 
   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>
-      `
+      html` <activity-thread-view .activityThreadId=${this.activityThread.id}></activity-thread-view> `
     )
   }
 

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

@@ -0,0 +1,401 @@
+import '@things-factory/organization/dist-client/component/approval-line-view.js'
+
+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 { ActivityThread } from '../../types/activity-thread'
+import { ActivityApproval } from '../../types/activity-approval'
+
+const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'short', timeStyle: 'short' })
+
+@customElement('activity-thread-view')
+export class ActivityThreadView extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+        font-size: var(--fontsize-default);
+      }
+
+      :host([state='assigned']) {
+        --worklist-status-color: #5f7184;
+      }
+
+      :host([state='started']) {
+        --worklist-status-color: #56af45;
+      }
+
+      :host([state='delegated']) {
+        --worklist-status-color: #8654b0;
+      }
+
+      :host([state='submitted']) {
+        --worklist-status-color: #428df3;
+      }
+
+      :host([state='escalated']) {
+        --worklist-status-color: #595de5;
+      }
+
+      :host([state='rejected']) {
+        --worklist-status-color: #f27429;
+      }
+
+      :host([state='ended']) {
+        --worklist-status-color: #02acae;
+      }
+
+      :host([state='aborted']) {
+        --worklist-status-color: #cb3a33;
+      }
+
+      [instance-container] {
+        flex: 1;
+        background-color: var(--main-section-background-color);
+        border-right: var(--border-dark-color);
+        padding: var(--padding-wide);
+        color: var(--primary-text-color);
+      }
+      [thread-container] {
+        flex: 2;
+        padding: var(--padding-wide);
+      }
+      [instance-container] div {
+        margin-bottom: var(--margin-default);
+        padding-bottom: var(--padding-default);
+        border-bottom: var(--border-dark-color);
+      }
+      [instance-container] div label {
+        display: inline-block;
+        margin-right: var(--margin-default);
+      }
+      span[status] {
+        width: 15px;
+        height: 15px;
+        background-color: var(--worklist-status-color, tomato);
+        display: inline-block;
+        margin-right: var(--margin-narrow);
+        border-radius: 50%;
+      }
+      table {
+        width: 100%;
+        border-collapse: collapse;
+      }
+      th {
+        background-color: rgba(var(--primary-color-rgb), 0.05);
+        border-top: var(--grid-header-top-border);
+        border-bottom: var(--grid-header-bottom-border);
+        padding: var(--grid-header-padding);
+        text-overflow: ellipsis;
+        font: var(--grid-header-font);
+        color: var(--grid-header-color);
+      }
+      td {
+        padding: var(--padding-narrow);
+        border-bottom: var(--grid-record-border-bottom);
+      }
+      [assignee] * {
+        vertical-align: middle;
+      }
+      [assignee] mwc-icon {
+        opacity: 0.5;
+      }
+      [subtitle] {
+        display: block;
+        margin: var(--margin-wide) 0 var(--margin-narrow) 0;
+        font: bold 16px var(--theme-font);
+        color: var(--secondary-text-color);
+      }
+      [timeline] ol {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      [timeline] li {
+        display: flex;
+      }
+      [timeline] [info] {
+        flex: 1;
+      }
+      [timeline] [date] {
+        opacity: 0.7;
+        width: 120px;
+        font-size: var(--fontsize-small);
+      }
+      [timeline] [info] strong {
+        float: right;
+      }
+      [timeline] [status] {
+        margin: 0 var(--margin-narrow);
+        display: block;
+        border-radius: 50%;
+        width: 12px;
+        height: 12px;
+        position: relative;
+        top: 3px;
+        border: 2px solid #fff;
+        background-color: var(--worklist-status-color, tomato);
+      }
+      [timeline] [status]::before {
+        content: '';
+        height: 60px;
+        width: 2px;
+        display: block;
+        position: relative;
+        margin-left: 5px;
+        background-color: var(--worklist-status-color, tomato);
+        opacity: 0.2;
+      }
+      [timeline] [info] mwc-icon {
+        position: relative;
+        top: 3px;
+        font-size: var(--fontsize-large);
+      }
+      [timeline] [info] p {
+        background-color: #f4f4f4;
+        margin: var(--margin-narrow) 0 var(--margin-default) 0;
+        padding: var(--padding-narrow) var(--padding-default);
+        border-radius: var(--border-radius);
+        font-size: var(--fontsize-small);
+        text-align: justify;
+      }
+      [timeline] [info] p::before {
+        content: '';
+        float: right;
+        margin-top: -10px;
+        margin-right: 20px;
+        border: 7px solid transparent;
+        border-bottom-color: #f4f4f4;
+        border-top: 0;
+      }
+      [thread] div {
+        border-bottom: var(--border-dark-color);
+        padding: var(--padding-narrow);
+        text-align: right;
+        overflow: hidden;
+      }
+      [thread] div label {
+        float: left;
+        width: 25%;
+        text-align: left;
+      }
+    `
+  ]
+
+  @property({
+    type: String,
+    attribute: 'activity-thread-id'
+  })
+  activityThreadId?: string
+
+  @state() activityThread?: ActivityThread
+
+  render() {
+    if (!this.activityThread) {
+      return html`<div>no activity thread info.</div>`
+    }
+
+    const {
+      state,
+      assignee,
+      output,
+      round,
+      activityApprovals = [],
+      assignedAt,
+      startedAt,
+      terminatedAt,
+      activityInstance
+    } = this.activityThread
+    const { input } = activityInstance!
+    const { name, email } = assignee || {}
+
+    return html`
+      <div assignee>
+        <mwc-icon>account_circle</mwc-icon>
+        <strong>${name}</strong>
+      </div>
+
+      <div thread>
+        <span subtitle>${i18next.t('label.information')}</span>
+        <div>
+          <label>${i18next.t('label.status')}</label>
+          <span status></span>
+          <strong>${i18next.t('label.activity-state-' + state)}</strong>
+        </div>
+        <div>
+          <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}
+        </div>
+        <div><label>${i18next.t('field.started-at')}</label> ${startedAt && formatter.format(new Date(startedAt))}</div>
+        <div>
+          <label>${i18next.t('field.terminated-at')}</label> ${terminatedAt && formatter.format(new Date(terminatedAt))}
+        </div>
+        <div><label>${i18next.t('field.round')}</label> ${round}</div>
+      </div>
+
+      <div>
+        <span subtitle>${i18next.t('field.output')}</span>
+        ${this.renderInOut({ ...input, ...output })}
+      </div>
+      <div timeline>
+        <span subtitle>승인 검토 이력</span>
+        <ol>
+          ${activityApprovals
+            .sort((a, b) => (a.round < b.round ? 1 : a.round > b.round ? -1 : a.order! < b.order! ? 1 : -1))
+            .map(approval => this.renderActivityApproval(approval))}
+        </ol>
+      </div>
+    `
+  }
+
+  renderActivityThread(activityThread: ActivityThread) {}
+
+  renderActivityApproval(activityApproval: ActivityApproval) {
+    const { judgment, approver, comment, round, order, createdAt, terminatedAt } = activityApproval
+    const { name, email } = approver || {}
+
+    return html`
+      <li>
+        <span date>${formatter.format(new Date(terminatedAt || createdAt!))}</span>
+        <span status></span>
+        <span info>
+          ${i18next.t('label.activity-state-' + (judgment || 'started'))}
+          <strong><mwc-icon>account_circle</mwc-icon>${name}</strong>
+          <p>${comment}</p>
+        </span>
+      </li>
+    `
+  }
+
+  renderInOut(data) {
+    const { activity } = this.activityThread!.activityInstance!
+    const { model } = activity || {}
+
+    return html`
+      <table>
+        <tr>
+          <th>${i18next.t('label.name')}</th>
+          <th>${i18next.t('label.value')}</th>
+        </tr>
+        ${model?.map(
+          item => html`
+            <tr>
+              <td>${item.name}</td>
+              <td>${item.tag ? data[item.tag] : ''}</td>
+            </tr>
+          `
+        )}
+      </table>
+    `
+  }
+
+  updated(changes) {
+    if (changes.has('activityThreadId')) {
+      this.fetchActivityThread()
+    }
+  }
+
+  async fetchActivityThread() {
+    const id = this.activityThreadId
+
+    const response = await client.query({
+      query: gql`
+        query ($id: String!) {
+          activityThread(id: $id) {
+            state
+            transaction
+            output
+            assignee {
+              id
+              name
+              email
+            }
+            round
+            activityApprovals {
+              round
+              order
+              approver {
+                name
+                email
+              }
+              judgment
+              comment
+              createdAt
+              terminatedAt
+            }
+            assignedAt
+            startedAt
+            terminatedAt
+            updater {
+              id
+              name
+            }
+            activityInstance {
+              id
+              name
+              description
+              state
+              key01
+              key02
+              key03
+              key04
+              key05
+              input
+              output
+              activity {
+                id
+                name
+                description
+                searchKeys {
+                  name
+                  description
+                  inputKey
+                  tKey
+                }
+                model {
+                  name
+                  description
+                  active
+                  tag
+                  inout
+                  type
+                  unit
+                  options
+                  quantifier
+                  spec
+                }
+              }
+              approvalLine {
+                type
+                value
+                approver {
+                  id
+                  name
+                  description
+                  controlNo
+                }
+              }
+              assignedAt
+              startedAt
+              terminatedAt
+              updatedAt
+            }
+          }
+        }
+      `,
+      variables: {
+        id
+      }
+    })
+
+    this.activityThread = response.data.activityThread
+    this.setAttribute('state', this.activityThread?.state || '')
+  }
+}

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

@@ -80,7 +80,7 @@ export class DoneListCalendarPage extends connect(store)(PageView) {
             const color = ['black', 'darkgray', 'orange', 'red'][priority || 0]
             const href =
               type == 'activity-thread'
-                ? `activity-thread/${id}?title=${name}`
+                ? `activity-thread-view/${id}?title=${name}`
                 : `activity-approval/${id}?title=${name}`
             const at = new Date(date).toLocaleTimeString([], {
               hourCycle: 'h23',

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

@@ -354,6 +354,6 @@ export class DoneListPage extends connect(store)(localize(i18next)(PageView)) {
   }
 
   openActivityThreadViewPage(activityThread) {
-    navigate(`activity-thread/${activityThread.id}?title=${activityThread.name}`)
+    navigate(`activity-thread-view/${activityThread.id}?title=${activityThread.name}`)
   }
 }

package/dist-client/pages/activity-approval/activity-approval-page.js

@@ -127,8 +127,9 @@ let ActivityApprovalPage = class ActivityApprovalPage extends connect(store)(loc
                 return this.customElementContent();
             case 'page':
             case 'external':
-            default:
                 return html ``;
+            default:
+                return this.generatedContent();
         }
     }
     templateContent() {