@things-factory/worklist 6.2.105 → 6.2.110

package/client/components/activity-starter-form.ts

@@ -40,20 +40,21 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
         color: var(--secondary-color);
       }
 
-      content label{
-        font:var(--label-font)
+      content label {
+        font: var(--label-font);
       }
-      content input, content textarea{
-        border-radius:var(--border-radius);
-        border:var(--border-dark-color);
-        padding:var(--input-padding);
-        margin:var(--input-margin);
-        font:var(--input-font);
+      content input,
+      content textarea {
+        border-radius: var(--border-radius);
+        border: var(--border-dark-color);
+        padding: var(--input-padding);
+        margin: var(--input-margin);
+        font: var(--input-font);
       }
 
-      content [desc]{
+      content [desc] {
         color: var(--secondary-text-color);
-        font-size:0.9em
+        font-size: 0.9em;
       }
 
       #description {
@@ -84,23 +85,16 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
     return html`
       <content>
         <div desc>
-          <span
-            >업무의 타이틀과 설명을 작성해서 초안저장을 클릭하시면, 업무 초안이 생성되고 편집할 수 있는 페이지로
-            이동합니다.</span
-          >
+          <span>업무의 타이틀과 설명을 작성해서 초안저장을 클릭하시면, 업무 초안이 생성되고 편집할 수 있는 페이지로 이동합니다.</span>
 
           <span
-            >이렇게 생성된 업무 초안은 '작성중인 업무' 리스트에서 찾아볼 수 있으며,
-            '${startingType == 'issue' ? '이슈' : '게시'}' 전까지 언제든지 수정할 수 있습니다.</span
+            >이렇게 생성된 업무 초안은 '작성중인 업무' 리스트에서 찾아볼 수 있으며, '${startingType == 'issue' ? '이슈' : '게시'}' 전까지 언제든지 수정할 수
+            있습니다.</span
           >
         </div>
         <div>
           <label for="name">${i18next.t('label.title')}</label>
-          <input
-            id="name"
-            .value=${name || this.activity?.name}
-            @change=${e => (this.activityInstance.name = e.currentTarget.value)}
-          />
+          <input id="name" .value=${name || this.activity?.name} @change=${e => (this.activityInstance.name = e.currentTarget.value)} />
         </div>
 
         <div>
@@ -185,8 +179,7 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
 
   async draftActivityInstance() {
     var { id: activityId } = this.activity
-    var { id, name, description, priority, threadsMin, threadsMax, dueAt, input, assignees, approvalLine } =
-      this.activityInstance
+    var { id, name, description, priority, threadsMin, threadsMax, dueAt, input, assignees, approvalLine } = this.activityInstance
 
     name ||= this.activity.name
     description ||= this.activity.description

package/client/components/{activity-approval-timeline.ts → activity-thread-timeline.ts}

@@ -9,12 +9,14 @@ import { connect } from 'pwa-helpers/connect-mixin'
 import { store } from '@operato/shell'
 import { i18next } from '@operato/i18n'
 
+import { ActivityThread } from '../types/activity-thread'
+import { ActivityThreadHistory } from '../types/activity-thread-history'
 import { ActivityApproval } from '../types/activity-approval'
 
 const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
 
-@customElement('activity-approval-timeline')
-export class ActivityApprovalTimeline extends connect(store)(LitElement) {
+@customElement('activity-thread-timeline')
+export class ActivityThreadTimeline extends connect(store)(LitElement) {
   static styles = [
     css`
       :host {
@@ -46,8 +48,9 @@ export class ActivityApprovalTimeline extends connect(store)(LitElement) {
         flex: 1;
         color: var(--secondary-color);
 
-        strong {
+        div {
           float: right;
+          opacity: 0.7;
         }
 
         mwc-icon {
@@ -109,25 +112,64 @@ export class ActivityApprovalTimeline extends connect(store)(LitElement) {
         background-color: var(--worklist-status-color, tomato);
         opacity: 0.2;
       }
+
+      table,
+      th,
+      td {
+        border: 1px solid lightgray;
+        border-collapse: collapse;
+      }
+
+      th,
+      td {
+        padding: 10px;
+      }
     `
   ]
 
-  @property({ type: Object }) private activityThread
+  @property({ type: Object }) activityThread?: ActivityThread
+  @property({ type: String }) subtitle?: string
+  @property({ type: Boolean, attribute: 'short-form' }) shortForm?: boolean
 
   render() {
-    const { activityApprovals = [] } = this.activityThread || {}
+    const { activityApprovals = [], activityThreadHistories = [] } = this.activityThread || {}
+
+    const timeline = [
+      ...activityThreadHistories.filter(item => item.transaction && (!this.shortForm || !/^.*(reject|approve|save|restart).*$/.test(item.transaction))),
+      ...activityApprovals.filter(item => item.judgment)
+    ].sort((a, b) => ((a.updatedAt || 0) > (b.updatedAt || 0) ? 1 : -1))
 
-    return html` ${activityApprovals.length > 0
+    return html` ${timeline.length > 0
       ? html`
-          <span subtitle>${i18next.t('label.review-and-approval')}</span>
+          <span subtitle>${this.subtitle || i18next.t('label.timeline')}</span>
 
           <ol>
-            ${activityApprovals.map(approval => this.renderActivityApproval(approval))}
+            ${timeline.map(item =>
+              'reason' in item ? this.renderActivityThreadHistory(item as ActivityThreadHistory) : this.renderActivityApproval(item as ActivityApproval)
+            )}
           </ol>
         `
       : nothing}`
   }
 
+  renderActivityThreadHistory(activityThreadHistory: ActivityThreadHistory) {
+    const { updater, updatedAt, state, reason, output, transaction } = activityThreadHistory
+    const { name } = updater || {}
+
+    return html`
+      <li>
+        <span date>${formatter.format(new Date(updatedAt!))}</span>
+        <span status></span>
+
+        <span info>
+          ${i18next.t('label.activity-transaction-' + transaction)}
+          <div><mwc-icon>account_circle</mwc-icon>${name}</div>
+          <p>${reason ? reason : output ? this.renderOutput(output) : nothing}</p>
+        </span>
+      </li>
+    `
+  }
+
   renderActivityApproval(activityApproval: ActivityApproval) {
     const { judgment, approver, comment, createdAt, terminatedAt } = activityApproval
     const { name } = approver || {}
@@ -137,11 +179,32 @@ export class ActivityApprovalTimeline extends connect(store)(LitElement) {
         <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>
+          ${i18next.t('label.activity-state-' + judgment)}
+          <div><mwc-icon>account_circle</mwc-icon>${name}</div>
           <p>${comment}</p>
         </span>
       </li>
     `
   }
+
+  renderOutput(output: any) {
+    const rows = [] as [key: string, value: string][]
+
+    for (let key in output) {
+      rows.push([key, output[key]])
+    }
+
+    return html`
+      <table>
+        ${rows.map(
+          ([key, value]) => html`
+            <tr>
+              <td>${key}</td>
+              <td>${value}</td>
+            </tr>
+          `
+        )}
+      </table>
+    `
+  }
 }

package/client/index.ts

@@ -1,2 +1,3 @@
 export * from './pages/activity/activity-page.js'
-export * from './activity-summary-generator'
+export * from './activity-summary-generator.js'
+export * from './components/activity-thread-timeline.js'

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

@@ -1,7 +1,7 @@
 import '@operato/property-editor/ox-properties-dynamic-view.js'
 import '@operato/board/ox-board-viewer.js'
 import '../../components/activity-approval-ribon.js'
-import '../../components/activity-approval-timeline.js'
+import '../../components/activity-thread-timeline.js'
 
 import gql from 'graphql-tag'
 import { css, html, nothing } from 'lit'
@@ -45,13 +45,23 @@ const ActivityApprovalFetchResult = `\
       order
       approver {
         name
-        email
       }
       judgment
       comment
       createdAt
+      updatedAt
       terminatedAt
     }
+    activityThreadHistories {
+      transaction
+      reason
+      updater {
+        name
+      }
+      updatedAt
+      state
+      output
+    }
     activityInstance {
       id
       name
@@ -121,9 +131,8 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
         height: 100%;
       }
 
-      activity-approval-timeline {
+      activity-thread-timeline {
         margin: var(--margin-default);
-        padding: var(--padding-default);
       }
 
       div[comment] {
@@ -148,7 +157,10 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
         }
       }
 
-      div[empty] {
+      [empty] {
+        flex: 1;
+        display: flex;
+        align-items: center;
         align-self: center;
       }
     `
@@ -193,7 +205,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
 
   render() {
     if (!this.activityThread) {
-      return html`<div empty>no activity thread info.</div>`
+      return html`<div empty>${i18next.t('text.no activity thread info')}</div>`
     }
 
     const { terminatedAt } = this.activityApproval
@@ -202,7 +214,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
     return html`
       <activity-approval-ribon .activityApproval=${this.activityApproval}></activity-approval-ribon>
       ${this.activityContent()}
-      <activity-approval-timeline .activityThread=${this.activityThread}></activity-approval-timeline>
+      <activity-thread-timeline .activityThread=${this.activityThread} short-form></activity-thread-timeline>
       ${editable
         ? html`
             <div comment>

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

@@ -228,8 +228,7 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
       return html`<div>no activity instance info.</div>`
     }
 
-    const { id, name, description, state, issuer, assignedAt, startedAt, activityThreads, terminatedAt, updatedAt } =
-      this.activityInstance
+    const { id, name, description, state, issuer, assignedAt, startedAt, activityThreads, terminatedAt, updatedAt } = this.activityInstance
 
     return html`
       <div instance-container>
@@ -250,37 +249,20 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
           <mwc-icon>account_circle</mwc-icon>
           <strong>${issuer?.name || ''}</strong>
         </div>
-        <div>
-          <label>${i18next.t('field.assigned-at')}</label>${assignedAt && formatter.format(new Date(assignedAt))}
-        </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.updated-at')}</label>${updatedAt && formatter.format(new Date(updatedAt))}</div>
-        <div>
-          <label>${i18next.t('field.terminated-at')}</label>${terminatedAt && formatter.format(new Date(terminatedAt))}
-        </div>
-      </div>
-      <div thread-container>
-        ${activityThreads?.map(activityThread => this.renderActivityThread(this.activityInstance!, activityThread))}
+        <div><label>${i18next.t('field.terminated-at')}</label>${terminatedAt && formatter.format(new Date(terminatedAt))}</div>
       </div>
+      <div thread-container>${activityThreads?.map(activityThread => this.renderActivityThread(this.activityInstance!, activityThread))}</div>
     `
   }
 
   renderActivityThread(activityInstance: ActivityInstance, activityThread: ActivityThread) {
-    const {
-      state,
-      assignee,
-      output,
-      round,
-      activityApprovals = [],
-      assignedAt,
-      startedAt,
-      terminatedAt
-    } = activityThread
+    const { state, assignee, output, round, activityApprovals = [], assignedAt, startedAt, terminatedAt } = activityThread
     const { approvalLine } = activityInstance!
     const { name, email } = assignee || {}
-    const approvals = activityApprovals.sort((a, b) =>
-      a.round < b.round ? 1 : a.round > b.round ? -1 : a.order! < b.order! ? 1 : -1
-    )
+    const approvals = activityApprovals.sort((a, b) => (a.round < b.round ? 1 : a.round > b.round ? -1 : a.order! < b.order! ? 1 : -1))
     const current = approvals[0]?.round == round ? approvals[0].order : -1
 
     return html`
@@ -296,13 +278,9 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
           <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.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.terminated-at')}</label> ${terminatedAt && formatter.format(new Date(terminatedAt))}</div>
         <div><label>${i18next.t('field.round')}</label> ${round}</div>
       </div>
 
@@ -311,13 +289,9 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
         ${this.renderInOut(output || {})}
       </div>
       <div timeline>
-        <span subtitle>${i18next.t('label.review-and-approval')}</span>
+        <span subtitle>${i18next.t('label.timeline')}</span>
 
-        <div>
-          ${approvalLine
-            ? html`<approval-line-view .model=${approvalLine} .current=${current}></approval-line-view>`
-            : html``}
-        </div>
+        <div>${approvalLine ? html`<approval-line-view .model=${approvalLine} .current=${current}></approval-line-view>` : html``}</div>
 
         <ol>
           ${approvals.map(approval => this.renderActivityApproval(approval))}

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

@@ -1,6 +1,7 @@
 import '@operato/property-editor/ox-properties-dynamic-view.js'
 import '@operato/board/ox-board-viewer.js'
 import '../../components/activity-thread-ribon.js'
+import '../../components/activity-thread-timeline.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -33,13 +34,23 @@ const ActivityThreadFetchResult = `\
     order
     approver {
       name
-      email
     }
     judgment
     comment
     createdAt
+    updatedAt
     terminatedAt
   }
+  activityThreadHistories {
+    transaction
+    reason
+    updater {
+      name
+    }
+    updatedAt
+    state
+    output
+  }
   activityInstance {
     id
     name
@@ -112,12 +123,14 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
         height: 100%;
       }
 
-      activity-approval-timeline {
+      activity-thread-timeline {
         margin: var(--margin-default);
-        padding: var(--padding-default);
       }
 
-      div[empty] {
+      [empty] {
+        flex: 1;
+        display: flex;
+        align-items: center;
         align-self: center;
       }
     `
@@ -177,13 +190,13 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
     const activityThread = this.activityThread
 
     if (!activityThread) {
-      return html`<div empty>no activity thread info.</div> `
+      return html`<div empty>${i18next.t('text.no activity thread info')}</div> `
     }
 
     return html`
       <activity-thread-ribon .activityThread=${activityThread}></activity-thread-ribon>
       ${this.activityContent()}
-      <activity-approval-timeline .activityThread=${activityThread}></activity-approval-timeline>
+      <activity-thread-timeline .activityThread=${activityThread} short-form></activity-thread-timeline>
     `
   }
 

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

@@ -1,6 +1,6 @@
 import '@operato/board/ox-board-viewer.js'
 import '../../components/activity-thread-ribon.js'
-import '../../components/activity-approval-timeline.js'
+import '../../components/activity-thread-timeline.js'
 import './activity-thread-view.js'
 
 import gql from 'graphql-tag'
@@ -33,13 +33,23 @@ const ActivityThreadFetchResult = `\
     order
     approver {
       name
-      email
     }
     judgment
     comment
     createdAt
+    updatedAt
     terminatedAt
   }
+  activityThreadHistories {
+    transaction
+    reason
+    updater {
+      name
+    }
+    updatedAt
+    state
+    output
+  }
   activityInstance {
     id
     name
@@ -116,18 +126,27 @@ export class ActivityThreadViewPage extends connect(store)(localize(i18next)(Pag
         padding: var(--padding-default);
       }
 
-      activity-approval-timeline {
+      activity-thread-timeline {
         margin: var(--margin-default);
-        padding: var(--padding-default);
       }
 
       #custom-content {
         flex: 1;
       }
 
-      div[empty] {
+      [empty] {
+        flex: 1;
+        display: flex;
+        align-items: center;
         align-self: center;
       }
+
+      @media print {
+        :host {
+          display: block;
+          overflow: visible;
+        }
+      }
     `
   ]
 
@@ -147,13 +166,13 @@ export class ActivityThreadViewPage extends connect(store)(localize(i18next)(Pag
     const activityThread = this.activityThread
 
     if (!activityThread) {
-      return html`<div empty>no activity thread info.</div> `
+      return html`<div empty>${i18next.t('text.no activity thread info')}</div> `
     }
 
     return html`
       <activity-thread-ribon .activityThread=${activityThread}></activity-thread-ribon>
       ${this.activityContent()}
-      <activity-approval-timeline .activityThread=${activityThread}></activity-approval-timeline>
+      <activity-thread-timeline .activityThread=${activityThread} short-form></activity-thread-timeline>
     `
   }
 

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

@@ -63,20 +63,24 @@ export class ActivityThreadView extends localize(i18next)(LitElement) {
         border-right: var(--border-dark-color);
         padding: var(--padding-wide);
         color: var(--primary-text-color);
+
+        div {
+          margin-bottom: var(--margin-default);
+          padding-bottom: var(--padding-default);
+          border-bottom: var(--border-dark-color);
+        }
+
+        div label {
+          display: inline-block;
+          margin-right: var(--margin-default);
+        }
       }
+
       [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;
@@ -85,10 +89,12 @@ export class ActivityThreadView extends localize(i18next)(LitElement) {
         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);
@@ -98,16 +104,21 @@ export class ActivityThreadView extends localize(i18next)(LitElement) {
         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;
+
+      [assignee] {
+        * {
+          vertical-align: middle;
+        }
+        mwc-icon {
+          opacity: 0.5;
+        }
       }
+
       [subtitle] {
         display: block;
         margin: var(--margin-wide) 0 var(--margin-narrow) 0;
@@ -120,12 +131,26 @@ export class ActivityThreadView extends localize(i18next)(LitElement) {
         padding: var(--padding-narrow);
         text-align: right;
         overflow: hidden;
+
+        div label {
+          float: left;
+          width: 25%;
+          text-align: left;
+        }
+      }
+
+      [empty] {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        align-self: center;
       }
 
-      [thread] div label {
-        float: left;
-        width: 25%;
-        text-align: left;
+      @media print {
+        :host {
+          display: block;
+          overflow: visible;
+        }
       }
     `
   ]
@@ -140,7 +165,7 @@ export class ActivityThreadView extends localize(i18next)(LitElement) {
 
   render() {
     if (!this.activityThread) {
-      return html`<div>no activity thread info.</div>`
+      return html`<div empty>${i18next.t('text.no activity thread info')}</div>`
     }
 
     const { state, assignee, output, round, assignedAt, startedAt, terminatedAt, activityInstance } = this.activityThread

package/client/templates/activity-approval-context-template.ts

@@ -1,5 +1,5 @@
 import '@material/mwc-icon'
-import '../components/activity-approval-timeline'
+import '../components/activity-thread-timeline'
 
 import { html, css, LitElement, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
@@ -106,6 +106,10 @@ class ActivityApprovalContextTemplate extends connect(store)(LitElement) {
         border-right: 0;
       }
 
+      activity-thread-timeline {
+        margin: var(--margin-default);
+      }
+
       [thumbnail] {
         display: flex;
         justify-content: center;
@@ -149,7 +153,9 @@ class ActivityApprovalContextTemplate extends connect(store)(LitElement) {
         <div><label>since</label> ${createdAt && formatter.format(new Date(createdAt))}</div>
       </div>
 
-      ${activityApprovals && activityApprovals.length > 0 ? html` <activity-approval-timeline .activityThread=${activityThread}></activity-approval-timeline> ` : nothing}
+      ${activityApprovals && activityApprovals.length > 0
+        ? html` <activity-thread-timeline .activityThread=${activityThread} short-form></activity-thread-timeline> `
+        : nothing}
       ${thumbnail
         ? html` <div thumbnail>
             <img src=${thumbnail} />