npm - @things-factory/worklist - Versions diffs - 6.1.64 → 6.1.66 - Mend

@things-factory/worklist 6.1.64 → 6.1.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

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

@@ -231,7 +231,7 @@ export class ActivityInstanceSearchPage extends connect(store)(localize(i18next)
         {
           type: 'json5',
           name: 'output',
-          header: i18next.t('field.output'),
+          header: i18next.t('field.artifact'),
           record: {
             editable: false
           },

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

@@ -219,20 +219,8 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
       return html`<div>no activity instance info.</div>`
     }
-    const {
-      id,
-      name,
-      description,
-      input,
-      output,
-      state,
-      assignedAt,
-      startedAt,
-      approvalLine,
-      activityThreads,
-      terminatedAt,
-      updatedAt
-    } = this.activityInstance
+    const { id, name, description, state, issuer, assignedAt, startedAt, activityThreads, terminatedAt, updatedAt } =
+      this.activityInstance
     return html`
       <div instance-container>
@@ -241,9 +229,6 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
           <strong>${name}</strong>
           ${description}
         </div>
-        <div>
-          ${approvalLine ? html`<approval-line-view .model=${approvalLine}></approval-line-view>` : html``}
-        </div>
         <div>
           <label>${i18next.t('label.status')}</label>
@@ -251,6 +236,10 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
           <strong>${i18next.t('label.activity-state-' + state)}</strong>
         </div>
+        <div issuer>
+          <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>
@@ -260,11 +249,13 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
           <label>${i18next.t('field.terminated-at')}</label>${terminatedAt && formatter.format(new Date(terminatedAt))}
         </div>
       </div>
-      <div thread-container>${activityThreads?.map(activityThread => this.renderActivityThread(activityThread))}</div>
+      <div thread-container>
+        ${activityThreads?.map(activityThread => this.renderActivityThread(this.activityInstance!, activityThread))}
+      </div>
     `
   }
-  renderActivityThread(activityThread: ActivityThread) {
+  renderActivityThread(activityInstance: ActivityInstance, activityThread: ActivityThread) {
     const {
       state,
       assignee,
@@ -275,7 +266,12 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
       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 current = approvals[0]?.round == round ? approvals[0].order : -1
     return html`
       <div assignee>
@@ -301,15 +297,20 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
       </div>
       <div>
-        <span subtitle>${i18next.t('field.output')}</span>
+        <span subtitle>${i18next.t('field.artifact')}</span>
         ${this.renderInOut(output || {})}
       </div>
       <div timeline>
-        <span subtitle>승인 검토 이력</span>
+        <span subtitle>${i18next.t('label.review-and-approval')}</span>
+        <div>
+          ${approvalLine
+            ? html`<approval-line-view .model=${approvalLine} .current=${current}></approval-line-view>`
+            : html``}
+        </div>
         <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))}
+          ${approvals.map(approval => this.renderActivityApproval(approval))}
         </ol>
       </div>
     `
@@ -401,6 +402,14 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
             key05
             input
             output
+            issuer {
+              name
+              email
+            }
+            starter {
+              name
+              email
+            }
             activity {
               id
               name

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

@@ -214,8 +214,12 @@ export class ActivityThreadView extends localize(i18next)(LitElement) {
       terminatedAt,
       activityInstance
     } = this.activityThread
-    const { input } = activityInstance!
+    const { input, 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 current = approvals[0]?.round == round ? approvals[0].order : -1
     return html`
       <div assignee>
@@ -241,22 +245,25 @@ export class ActivityThreadView extends localize(i18next)(LitElement) {
       </div>
       <div>
-        <span subtitle>${i18next.t('field.output')}</span>
+        <span subtitle>${i18next.t('field.artifact')}</span>
         ${this.renderInOut({ ...input, ...output })}
       </div>
       <div timeline>
-        <span subtitle>승인 검토 이력</span>
+        <span subtitle>${i18next.t('label.review-and-approval')}</span>
+        <div>
+          ${approvalLine
+            ? html`<approval-line-view .model=${approvalLine} .current=${current}></approval-line-view>`
+            : html``}
+        </div>
         <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))}
+          ${approvals.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 || {}

package/client/types/activity-instance.ts CHANGED Viewed

@@ -102,6 +102,10 @@ export class ActivityInstance {
   updaterId?: string
+  issuer?: User
+  issuerId?: string
   starter?: User
   starterId?: string

package/dist-client/pages/activity-instance/activity-instance-search-page.js CHANGED Viewed

@@ -194,7 +194,7 @@ let ActivityInstanceSearchPage = class ActivityInstanceSearchPage extends connec
                 {
                     type: 'json5',
                     name: 'output',
-                    header: i18next.t('field.output'),
+                    header: i18next.t('field.artifact'),
                     record: {
                         editable: false
                     },

package/dist-client/pages/activity-instance/activity-instance-search-page.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"activity-instance-search-page.js","sourceRoot":"","sources":["../../../client/pages/activity-instance/activity-instance-search-page.ts"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAA;AAC5B,OAAO,6BAA6B,CAAA;AAEpC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAY,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAEnD,OAAO,EAAE,SAAS,EAA4B,MAAM,qBAAqB,CAAA;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAIjC,IAAM,0BAA0B,GAAhC,MAAM,0BAA2B,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC;IAApF;;QAqBI,eAAU,GAA4B,EAAE,CAAA;QAGxC,SAAI,GAA6B,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAA;IA4T9E,CAAC;IAvTC,IAAI,OAAO;QACT,OAAO;YACL,MAAM,EAAE;gBACN,OAAO,EAAE,CAAC,MAAc,EAAE,EAAE;oBAC1B,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAA;gBAChC,CAAC;gBACD,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,gCAAgC,CAAC;gBACxD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU;aAC7B;YACD,MAAM,EAAE;gBACN,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAA;gBAC7B,CAAC;aACF;YACD,IAAI,EAAE,kCAAkC;YACxC,OAAO,EAAE,EAAE;YACX,UAAU,EAAE;gBACV,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,gCAAgC,CAAC;gBACjD,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;aACtC;SACF,CAAA;IACH,CAAC;IAED,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;QAE9D,OAAO,IAAI,CAAA;wBACS,IAAI,YAAY,IAAI,CAAC,WAAW,kBAAkB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;;;;;;;;;uBAS/E,CAAC,CAAC,EAAE;YACX,MAAM,MAAM,GAAG,CAAC,CAAC,aAAa,CAAA;YAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;gBACvB,KAAK,EAAE,CAAC;gBACR,GAAG,EAAE,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,YAAY;aAC5C,CAAC,CAAA;QACJ,CAAC;;;;;;;;;+BASgB,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,YAAY,IAAI,IAAI,MAAM;+BACpD,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,YAAY,IAAI,IAAI,MAAM;+BACpD,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,YAAY,IAAI,IAAI,MAAM;;;;KAI9E,CAAA;IACH,CAAC;IAED,WAAW,CAAC,OAAO,EAAE,SAAS;QAC5B,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC,UAAU,CAAA;YACtC,OAAM;SACP;IACH,CAAC;IAED,KAAK,CAAC,OAAO,CAAC,OAAO;;QACnB,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;YAC7B,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;gBAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;SAcT;gBACD,SAAS,EAAE;oBACT,EAAE,EAAE,IAAI,CAAC,UAAU;iBACpB;aACF,CAAC,CAAA;YAEF,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAA;YACtC,IAAI,CAAC,UAAU,GAAG,MAAA,IAAI,CAAC,QAAQ,0CAAE,UAAU,CAAA;YAC3C,IAAI,CAAC,kBAAkB,EAAE,CAAA;SAC1B;IACH,CAAC;IAED,mBAAmB;;QACjB,OAAO,CACL,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACnC,OAAO;gBACL,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,OAAO,KAAK,GAAG,CAAC,EAAE;gBACxB,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,GAAG,CAAC,EAAE;gBAC7D,MAAM,EAAE;oBACN,QAAQ,EAAE,KAAK;iBAChB;gBACD,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,QAAQ;gBAChB,KAAK,EAAE,GAAG;gBACV,IAAI,EAAE,IAAI;aACX,CAAA;QACH,CAAC,CAAC,KAAI,EAAE,CACT,CAAA;IACH,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,WAAW,GAAG;YACjB,IAAI,EAAE;gBACJ,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC;gBAC/B,OAAO,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC;aAChC;YACD,OAAO,EAAE;gBACP,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE;gBAC1C,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,cAAc,EAAE,QAAQ,EAAE,IAAI,EAAE;gBAC9D;oBACE,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,QAAQ;oBACpB,IAAI,EAAE,YAAY;oBAClB,QAAQ,EAAE;wBACR,KAAK,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE;4BACjD,SAAS,CACP,IAAI,CAAA;;2CAEuB,MAAM,CAAC,EAAE;;;iBAGnC,EACD;gCACE,QAAQ,EAAE,IAAI;gCACd,IAAI,EAAE,OAAO;gCACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC;6BACjD,CACF,CAAA;wBACH,CAAC;qBACF;iBACF;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,MAAM;oBACZ,KAAK,EAAE,IAAI;oBACX,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;oBAC/B,MAAM,EAAE;wBACN,QAAQ,EAAE,KAAK;qBAChB;oBACD,MAAM,EAAE,QAAQ;oBAChB,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;oBACV,IAAI,EAAE,IAAI;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,aAAa;oBACnB,KAAK,EAAE,IAAI;oBACX,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACtC,MAAM,EAAE;wBACN,QAAQ,EAAE,KAAK;qBAChB;oBACD,MAAM,EAAE,QAAQ;oBAChB,KAAK,EAAE,GAAG;oBACV,IAAI,EAAE,IAAI;iBACX;gBACD,GAAG,IAAI,CAAC,mBAAmB,EAAE;gBAC7B;oBACE,IAAI,EAAE,OAAO;oBACb,IAAI,EAAE,OAAO;oBACb,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;oBAChC,MAAM,EAAE;wBACN,QAAQ,EAAE,KAAK;qBAChB;oBACD,MAAM,EAAE,IAAI;oBACZ,IAAI,EAAE,IAAI;iBACX;gBACD;oBACE,IAAI,EAAE,OAAO;oBACb,IAAI,EAAE,QAAQ;oBACd,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;oBACjC,MAAM,EAAE;wBACN,QAAQ,EAAE,KAAK;qBAChB;oBACD,MAAM,EAAE,IAAI;oBACZ,IAAI,EAAE,IAAI;iBACX;gBACD;oBACE,IAAI,EAAE,iBAAiB;oBACvB,IAAI,EAAE,SAAS;oBACf,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;oBAClC,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;oBACV,IAAI,EAAE,IAAI;iBACX;gBACD;oBACE,IAAI,EAAE,UAAU;oBAChB,IAAI,EAAE,WAAW;oBACjB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC;oBACrC,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;oBACV,IAAI,EAAE,IAAI;iBACX;aACF;YACD,IAAI,EAAE;gBACJ,UAAU,EAAE,KAAK;gBACjB,UAAU,EAAE;oBACV,QAAQ,EAAE,IAAI;iBACf;aACF;YACD,OAAO,EAAE;gBACP;oBACE,IAAI,EAAE,WAAW;oBACjB,IAAI,EAAE,IAAI;iBACX;aACF;SACF,CAAA;IACH,CAAC;IAED,KAAK,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAe;QAC1E,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAA;SACjC;QAED,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BT;YACD,SAAS,EAAE;gBACT,UAAU,EAAE,IAAI,CAAC,UAAU;gBAC3B,OAAO;gBACP,UAAU,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;gBAC3B,QAAQ;aACT;SACF,CAAC,CAAA;QAEF,OAAO;YACL,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;YACzC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,EAAE;SAC7C,CAAA;IACH,CAAC;IAED,eAAe;QACb,IAAI,OAAO,GAAG,EAAmB,CAAA;QACjC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;YACzD,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;SAC9B;aAAM;YACL,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAA;SAClC;QAED,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO;aAClD,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,QAAQ,IAAI,MAAM,CAAC,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC,IAAI,KAAK,SAAS,CAAC;aACtG,GAAG,CAAC,MAAM,CAAC,EAAE;YACZ,OAAO,MAAM,CAAC,IAAI,KAAK,IAAI;gBACzB,CAAC,CAAC;oBACE,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC;oBACtC,GAAG,EAAE,MAAM,CAAC,IAAI;oBAChB,KAAK,EAAE,MAAM,CAAC,KAAK;oBACnB,IAAI,EAAE,MAAM,CAAC,IAAI;iBAClB;gBACH,CAAC,CAAC,MAAM,CAAC,IAAI,CAAA;QACjB,CAAC,CAAC,CAAA;QAEJ,IAAI,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC5B,uBACE,EAAE,EAAE,IAAI,CAAC,EAAE,IACR,IAAI,CAAC,WAAW,CAAC,OAAO;iBACxB,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,QAAQ,IAAI,MAAM,CAAC,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC,IAAI,KAAK,SAAS,CAAC;iBACtG,MAAM,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE;gBACzB,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAA;gBAChE,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG;qBACd,KAAK,CAAC,GAAG,CAAC;qBACV,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,CAAA;gBACvF,OAAO,MAAM,CAAA;YACf,CAAC,EAAE,EAAE,CAAC,EACT;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA;IAC9C,CAAC;;AAlVM,iCAAM,GAAG;IACd,eAAe;IACf,iBAAiB;IACjB,GAAG,CAAA;;;;;;;;;;;;KAYF;CACF,CAAA;AAED;IAAC,KAAK,EAAE;;8DAAoB;AAC5B;IAAC,KAAK,EAAE;;4DAAc;AACtB;IAAC,KAAK,EAAE;;8DAAyC;AAEjD;IAAC,KAAK,EAAE;;+DAAiB;AACzB;IAAC,KAAK,EAAE;;wDAAoE;AAE5E;IAAC,KAAK,CAAC,UAAU,CAAC;8BAAiB,SAAS;yDAAA;AAC5C;IAAC,KAAK,CAAC,iBAAiB,CAAC;8BAA0B,OAAO;kEAAA;AA3B/C,0BAA0B;IADtC,aAAa,CAAC,+BAA+B,CAAC;GAClC,0BAA0B,CAoVtC;SApVY,0BAA0B","sourcesContent":["import '@operato/data-grist'\nimport './activity-instance-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { DataGrist, FetchOption, GristRecord } from '@operato/data-grist'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\nimport { PageView, store } from '@operato/shell'\nimport { CommonGristStyles, ScrollbarStyles } from '@operato/styles'\nimport { isMobileDevice } from '@operato/utils'\nimport { OxPopup } from '@operato/popup'\nimport { ActivitySearchKeyItem } from '../../types/activity-search-key-item-type'\n\n@customElement('activity-instance-search-page')\nexport class ActivityInstanceSearchPage extends connect(store)(localize(i18next)(PageView)) {\n static styles = [\n ScrollbarStyles,\n CommonGristStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n overflow: hidden;\n }\n\n ox-grist {\n overflow-y: auto;\n flex: 1;\n }\n `\n ]\n\n @state() activityId?: string\n @state() activity: any\n @state() searchKeys: ActivitySearchKeyItem[] = []\n\n @state() gristConfig: any\n @state() mode: 'CARD' \| 'GRID' \| 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'\n\n @query('ox-grist') private grist!: DataGrist\n @query('#sorter-control') private sortersControl!: OxPopup\n\n get context() {\n return {\n search: {\n handler: (search: string) => {\n this.grist.searchText = search\n },\n placeholder: i18next.t('title.activity instance search'),\n value: this.grist.searchText\n },\n filter: {\n handler: () => {\n this.grist.toggleHeadroom()\n }\n },\n help: 'dataset/activity-instance-search',\n actions: [],\n exportable: {\n name: i18next.t('title.activity instance search'),\n data: this._exportableData.bind(this)\n }\n }\n }\n\n render() {\n const mode = this.mode \|\| (isMobileDevice() ? 'LIST' : 'GRID')\n\n return html`\n <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>\n <div slot=\"headroom\">\n <div id=\"filters\">\n <ox-filters-form autofocus without-search></ox-filters-form>\n </div>\n\n <div id=\"sorters\">\n Sort\n <mwc-icon\n @click=${e => {\n const target = e.currentTarget\n this.sortersControl.open({\n right: 0,\n top: target.offsetTop + target.offsetHeight\n })\n }}\n >expand_more</mwc-icon\n >\n <ox-popup id=\"sorter-control\">\n <ox-sorters-control> </ox-sorters-control>\n </ox-popup>\n </div>\n\n <div id=\"modes\">\n <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>\n <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>\n <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>\n </div>\n </div>\n </ox-grist>\n `\n }\n\n pageUpdated(changes, lifecycle) {\n if (this.active) {\n this.activityId = lifecycle.resourceId\n return\n }\n }\n\n async updated(changes) {\n if (changes.has('activityId')) {\n const response = await client.query({\n query: gql`\n query ($id: String!) {\n activity(id: $id) {\n id\n name\n description\n searchKeys {\n name\n description\n inputKey\n tKey\n }\n }\n }\n `,\n variables: {\n id: this.activityId\n }\n })\n\n this.activity = response.data.activity\n this.searchKeys = this.activity?.searchKeys\n this.refreshGristConfig()\n }\n }\n\n getSearchKeyColumns() {\n return (\n this.searchKeys?.map((item, index) => {\n return {\n type: 'string',\n name: `key0${index + 1}`,\n header: item.tKey ? i18next.t(item.tKey) : `key0${index + 1}`,\n record: {\n editable: false\n },\n sortable: true,\n filter: 'i_like',\n width: 120,\n imex: true\n }\n }) \|\| []\n )\n }\n\n refreshGristConfig() {\n this.gristConfig = {\n list: {\n fields: ['name', 'description'],\n details: ['input', 'updatedAt']\n },\n columns: [\n { type: 'gutter', gutterName: 'sequence' },\n { type: 'gutter', gutterName: 'row-selector', multiple: true },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'assignment',\n handlers: {\n click: (columns, data, column, record, rowIndex) => {\n openPopup(\n html`\n <activity-instance-view\n activity-instance-id=${record.id}\n style=\"background-color: white;\"\n ></activity-instance-view>\n `,\n {\n backdrop: true,\n size: 'large',\n title: i18next.t('title.activity instance view')\n }\n )\n }\n }\n },\n {\n type: 'string',\n name: 'name',\n label: true,\n header: i18next.t('field.name'),\n record: {\n editable: false\n },\n filter: 'search',\n sortable: true,\n width: 235,\n imex: true\n },\n {\n type: 'string',\n name: 'description',\n label: true,\n header: i18next.t('field.description'),\n record: {\n editable: false\n },\n filter: 'search',\n width: 250,\n imex: true\n },\n ...this.getSearchKeyColumns(),\n {\n type: 'json5',\n name: 'input',\n header: i18next.t('field.input'),\n record: {\n editable: false\n },\n hidden: true,\n imex: true\n },\n {\n type: 'json5',\n name: 'output',\n header: i18next.t('field.output'),\n record: {\n editable: false\n },\n hidden: true,\n imex: true\n },\n {\n type: 'resource-object',\n name: 'updater',\n header: i18next.t('field.updater'),\n sortable: true,\n width: 100,\n imex: true\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: i18next.t('field.updated_at'),\n sortable: true,\n width: 180,\n imex: true\n }\n ],\n rows: {\n appendable: false,\n selectable: {\n multiple: true\n }\n },\n sorters: [\n {\n name: 'updatedAt',\n desc: true\n }\n ]\n }\n }\n\n async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {\n if (!this.activity) {\n return { records: [], total: 0 }\n }\n\n const response = await client.query({\n query: gql`\n query ($activityId: String!, $filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n responses: activityInstancesByActivity(\n activityId: $activityId\n filters: $filters\n pagination: $pagination\n sortings: $sortings\n ) {\n items {\n id\n name\n description\n key01\n key02\n key03\n key04\n key05\n input\n output\n updater {\n id\n name\n }\n updatedAt\n }\n total\n }\n }\n `,\n variables: {\n activityId: this.activityId,\n filters,\n pagination: { page, limit },\n sortings\n }\n })\n\n return {\n total: response.data.responses.total \|\| 0,\n records: response.data.responses.items \|\| []\n }\n }\n\n _exportableData() {\n let records = [] as GristRecord[]\n if (this.grist.selected && this.grist.selected.length > 0) {\n records = this.grist.selected\n } else {\n records = this.grist.data.records\n }\n\n var headerSetting = this.grist.compiledConfig.columns\n .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)\n .map(column => {\n return column.imex === true\n ? {\n header: column.header.renderer(column),\n key: column.name,\n width: column.width,\n type: column.type\n }\n : column.imex\n })\n\n var data = records.map(item => {\n return {\n id: item.id,\n ...this.gristConfig.columns\n .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)\n .reduce((record, column) => {\n const key = column.imex === true ? column.name : column.imex.key\n record[key] = key\n .split('.')\n .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)\n return record\n }, {})\n }\n })\n\n return { header: headerSetting, data: data }\n }\n}\n"]}
1	+ {"version":3,"file":"activity-instance-search-page.js","sourceRoot":"","sources":["../../../client/pages/activity-instance/activity-instance-search-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport './activity-instance-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { DataGrist, FetchOption, GristRecord } from '@operato/data-grist'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\nimport { PageView, store } from '@operato/shell'\nimport { CommonGristStyles, ScrollbarStyles } from '@operato/styles'\nimport { isMobileDevice } from '@operato/utils'\nimport { OxPopup } from '@operato/popup'\nimport { ActivitySearchKeyItem } from '../../types/activity-search-key-item-type'\n\n@customElement('activity-instance-search-page')\nexport class ActivityInstanceSearchPage extends connect(store)(localize(i18next)(PageView)) {\n static styles = [\n ScrollbarStyles,\n CommonGristStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n overflow: hidden;\n }\n\n ox-grist {\n overflow-y: auto;\n flex: 1;\n }\n `\n ]\n\n @state() activityId?: string\n @state() activity: any\n @state() searchKeys: ActivitySearchKeyItem[] = []\n\n @state() gristConfig: any\n @state() mode: 'CARD' \| 'GRID' \| 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'\n\n @query('ox-grist') private grist!: DataGrist\n @query('#sorter-control') private sortersControl!: OxPopup\n\n get context() {\n return {\n search: {\n handler: (search: string) => {\n this.grist.searchText = search\n },\n placeholder: i18next.t('title.activity instance search'),\n value: this.grist.searchText\n },\n filter: {\n handler: () => {\n this.grist.toggleHeadroom()\n }\n },\n help: 'dataset/activity-instance-search',\n actions: [],\n exportable: {\n name: i18next.t('title.activity instance search'),\n data: this._exportableData.bind(this)\n }\n }\n }\n\n render() {\n const mode = this.mode \|\| (isMobileDevice() ? 'LIST' : 'GRID')\n\n return html`\n <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>\n <div slot=\"headroom\">\n <div id=\"filters\">\n <ox-filters-form autofocus without-search></ox-filters-form>\n </div>\n\n <div id=\"sorters\">\n Sort\n <mwc-icon\n @click=${e => {\n const target = e.currentTarget\n this.sortersControl.open({\n right: 0,\n top: target.offsetTop + target.offsetHeight\n })\n }}\n >expand_more</mwc-icon\n >\n <ox-popup id=\"sorter-control\">\n <ox-sorters-control> </ox-sorters-control>\n </ox-popup>\n </div>\n\n <div id=\"modes\">\n <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>\n <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>\n <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>\n </div>\n </div>\n </ox-grist>\n `\n }\n\n pageUpdated(changes, lifecycle) {\n if (this.active) {\n this.activityId = lifecycle.resourceId\n return\n }\n }\n\n async updated(changes) {\n if (changes.has('activityId')) {\n const response = await client.query({\n query: gql`\n query ($id: String!) {\n activity(id: $id) {\n id\n name\n description\n searchKeys {\n name\n description\n inputKey\n tKey\n }\n }\n }\n `,\n variables: {\n id: this.activityId\n }\n })\n\n this.activity = response.data.activity\n this.searchKeys = this.activity?.searchKeys\n this.refreshGristConfig()\n }\n }\n\n getSearchKeyColumns() {\n return (\n this.searchKeys?.map((item, index) => {\n return {\n type: 'string',\n name: `key0${index + 1}`,\n header: item.tKey ? i18next.t(item.tKey) : `key0${index + 1}`,\n record: {\n editable: false\n },\n sortable: true,\n filter: 'i_like',\n width: 120,\n imex: true\n }\n }) \|\| []\n )\n }\n\n refreshGristConfig() {\n this.gristConfig = {\n list: {\n fields: ['name', 'description'],\n details: ['input', 'updatedAt']\n },\n columns: [\n { type: 'gutter', gutterName: 'sequence' },\n { type: 'gutter', gutterName: 'row-selector', multiple: true },\n {\n type: 'gutter',\n gutterName: 'button',\n icon: 'assignment',\n handlers: {\n click: (columns, data, column, record, rowIndex) => {\n openPopup(\n html`\n <activity-instance-view\n activity-instance-id=${record.id}\n style=\"background-color: white;\"\n ></activity-instance-view>\n `,\n {\n backdrop: true,\n size: 'large',\n title: i18next.t('title.activity instance view')\n }\n )\n }\n }\n },\n {\n type: 'string',\n name: 'name',\n label: true,\n header: i18next.t('field.name'),\n record: {\n editable: false\n },\n filter: 'search',\n sortable: true,\n width: 235,\n imex: true\n },\n {\n type: 'string',\n name: 'description',\n label: true,\n header: i18next.t('field.description'),\n record: {\n editable: false\n },\n filter: 'search',\n width: 250,\n imex: true\n },\n ...this.getSearchKeyColumns(),\n {\n type: 'json5',\n name: 'input',\n header: i18next.t('field.input'),\n record: {\n editable: false\n },\n hidden: true,\n imex: true\n },\n {\n type: 'json5',\n name: 'output',\n header: i18next.t('field.artifact'),\n record: {\n editable: false\n },\n hidden: true,\n imex: true\n },\n {\n type: 'resource-object',\n name: 'updater',\n header: i18next.t('field.updater'),\n sortable: true,\n width: 100,\n imex: true\n },\n {\n type: 'datetime',\n name: 'updatedAt',\n header: i18next.t('field.updated_at'),\n sortable: true,\n width: 180,\n imex: true\n }\n ],\n rows: {\n appendable: false,\n selectable: {\n multiple: true\n }\n },\n sorters: [\n {\n name: 'updatedAt',\n desc: true\n }\n ]\n }\n }\n\n async fetchHandler({ page, limit, sortings = [], filters = [] }: FetchOption) {\n if (!this.activity) {\n return { records: [], total: 0 }\n }\n\n const response = await client.query({\n query: gql`\n query ($activityId: String!, $filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n responses: activityInstancesByActivity(\n activityId: $activityId\n filters: $filters\n pagination: $pagination\n sortings: $sortings\n ) {\n items {\n id\n name\n description\n key01\n key02\n key03\n key04\n key05\n input\n output\n updater {\n id\n name\n }\n updatedAt\n }\n total\n }\n }\n `,\n variables: {\n activityId: this.activityId,\n filters,\n pagination: { page, limit },\n sortings\n }\n })\n\n return {\n total: response.data.responses.total \|\| 0,\n records: response.data.responses.items \|\| []\n }\n }\n\n _exportableData() {\n let records = [] as GristRecord[]\n if (this.grist.selected && this.grist.selected.length > 0) {\n records = this.grist.selected\n } else {\n records = this.grist.data.records\n }\n\n var headerSetting = this.grist.compiledConfig.columns\n .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)\n .map(column => {\n return column.imex === true\n ? {\n header: column.header.renderer(column),\n key: column.name,\n width: column.width,\n type: column.type\n }\n : column.imex\n })\n\n var data = records.map(item => {\n return {\n id: item.id,\n ...this.gristConfig.columns\n .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)\n .reduce((record, column) => {\n const key = column.imex === true ? column.name : column.imex.key\n record[key] = key\n .split('.')\n .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)\n return record\n }, {})\n }\n })\n\n return { header: headerSetting, data: data }\n }\n}\n"]}

package/dist-client/pages/activity-instance/activity-instance-view.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@ export declare class ActivityInstanceView extends ActivityInstanceView_base {
     activityInstanceId?: string;
     activityInstance?: ActivityInstance;
     render(): import("lit-html").TemplateResult<1>;
-    renderActivityThread(activityThread: ActivityThread): import("lit-html").TemplateResult<1>;
+    renderActivityThread(activityInstance: ActivityInstance, activityThread: ActivityThread): import("lit-html").TemplateResult<1>;
     renderActivityApproval(activityApproval: ActivityApproval): import("lit-html").TemplateResult<1>;
     renderSearchKeys(): import("lit-html").TemplateResult<1>;
     renderInOut(data: any): import("lit-html").TemplateResult<1>;

package/dist-client/pages/activity-instance/activity-instance-view.js CHANGED Viewed

@@ -13,7 +13,7 @@ let ActivityInstanceView = class ActivityInstanceView extends localize(i18next)(
         if (!this.activityInstance) {
             return html `<div>no activity instance info.</div>`;
         }
-        const { id, name, description, input, output, state, assignedAt, startedAt, approvalLine, activityThreads, terminatedAt, updatedAt } = this.activityInstance;
+        const { id, name, description, state, issuer, assignedAt, startedAt, activityThreads, terminatedAt, updatedAt } = this.activityInstance;
         return html `
       <div instance-container>
         <div header>
@@ -21,9 +21,6 @@ let ActivityInstanceView = class ActivityInstanceView extends localize(i18next)(
           <strong>${name}</strong>
           ${description}
         </div>
-        <div>
-          ${approvalLine ? html `<approval-line-view .model=${approvalLine}></approval-line-view>` : html ``}
-        </div>
         <div>
           <label>${i18next.t('label.status')}</label>
@@ -31,6 +28,10 @@ let ActivityInstanceView = class ActivityInstanceView extends localize(i18next)(
           <strong>${i18next.t('label.activity-state-' + state)}</strong>
         </div>
+        <div issuer>
+          <mwc-icon>account_circle</mwc-icon>
+          <strong>${(issuer === null || issuer === void 0 ? void 0 : issuer.name) || ''}</strong>
+        </div>
         <div>
           <label>${i18next.t('field.assigned-at')}</label>${assignedAt && formatter.format(new Date(assignedAt))}
         </div>
@@ -40,12 +41,18 @@ let ActivityInstanceView = class ActivityInstanceView extends localize(i18next)(
           <label>${i18next.t('field.terminated-at')}</label>${terminatedAt && formatter.format(new Date(terminatedAt))}
         </div>
       </div>
-      <div thread-container>${activityThreads === null || activityThreads === void 0 ? void 0 : activityThreads.map(activityThread => this.renderActivityThread(activityThread))}</div>
+      <div thread-container>
+        ${activityThreads === null || activityThreads === void 0 ? void 0 : activityThreads.map(activityThread => this.renderActivityThread(this.activityInstance, activityThread))}
+      </div>
     `;
     }
-    renderActivityThread(activityThread) {
+    renderActivityThread(activityInstance, activityThread) {
+        var _a;
         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 current = ((_a = approvals[0]) === null || _a === void 0 ? void 0 : _a.round) == round ? approvals[0].order : -1;
         return html `
       <div assignee>
         <mwc-icon>account_circle</mwc-icon>
@@ -70,15 +77,20 @@ let ActivityInstanceView = class ActivityInstanceView extends localize(i18next)(
       </div>
       <div>
-        <span subtitle>${i18next.t('field.output')}</span>
+        <span subtitle>${i18next.t('field.artifact')}</span>
         ${this.renderInOut(output || {})}
       </div>
       <div timeline>
-        <span subtitle>승인 검토 이력</span>
+        <span subtitle>${i18next.t('label.review-and-approval')}</span>
+        <div>
+          ${approvalLine
+            ? html `<approval-line-view .model=${approvalLine} .current=${current}></approval-line-view>`
+            : html ``}
+        </div>
         <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))}
+          ${approvals.map(approval => this.renderActivityApproval(approval))}
         </ol>
       </div>
     `;
@@ -158,6 +170,14 @@ let ActivityInstanceView = class ActivityInstanceView extends localize(i18next)(
             key05
             input
             output
+            issuer {
+              name
+              email
+            }
+            starter {
+              name
+              email
+            }
             activity {
               id
               name

package/dist-client/pages/activity-instance/activity-instance-view.js.map CHANGED Viewed

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

package/dist-client/pages/activity-thread/activity-thread-view.d.ts CHANGED Viewed

@@ -8,7 +8,6 @@ export declare class ActivityThreadView extends ActivityThreadView_base {
     activityThreadId?: string;
     activityThread?: ActivityThread;
     render(): import("lit-html").TemplateResult<1>;
-    renderActivityThread(activityThread: ActivityThread): void;
     renderActivityApproval(activityApproval: ActivityApproval): import("lit-html").TemplateResult<1>;
     renderInOut(data: any): import("lit-html").TemplateResult<1>;
     updated(changes: any): void;

package/dist-client/pages/activity-thread/activity-thread-view.js CHANGED Viewed

@@ -10,12 +10,15 @@ import { ActivityThread } from '../../types/activity-thread';
 const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'short', timeStyle: 'short' });
 let ActivityThreadView = class ActivityThreadView extends localize(i18next)(LitElement) {
     render() {
+        var _a;
         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 { input, 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 current = ((_a = approvals[0]) === null || _a === void 0 ? void 0 : _a.round) == round ? approvals[0].order : -1;
         return html `
       <div assignee>
         <mwc-icon>account_circle</mwc-icon>
@@ -40,20 +43,24 @@ let ActivityThreadView = class ActivityThreadView extends localize(i18next)(LitE
       </div>
       <div>
-        <span subtitle>${i18next.t('field.output')}</span>
+        <span subtitle>${i18next.t('field.artifact')}</span>
         ${this.renderInOut(Object.assign(Object.assign({}, input), output))}
       </div>
       <div timeline>
-        <span subtitle>승인 검토 이력</span>
+        <span subtitle>${i18next.t('label.review-and-approval')}</span>
+        <div>
+          ${approvalLine
+            ? html `<approval-line-view .model=${approvalLine} .current=${current}></approval-line-view>`
+            : html ``}
+        </div>
         <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))}
+          ${approvals.map(approval => this.renderActivityApproval(approval))}
         </ol>
       </div>
     `;
     }
-    renderActivityThread(activityThread) { }
     renderActivityApproval(activityApproval) {
         const { judgment, approver, comment, round, order, createdAt, terminatedAt } = activityApproval;
         const { name, email } = approver || {};

package/dist-client/pages/activity-thread/activity-thread-view.js.map CHANGED Viewed

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

package/dist-client/route.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export default function route(page: string): "activity~~-thread-view~~" \| "~~activity~~" \| "worklist-~~home~~" \| "~~worklist~~-~~dashboard~~" \| "done-list-calendar" \| "todo-list" \| "done-list" \| "approval-pending-list" \| "approval-done-list" \| "draft-list" \| "pickable-list" \| "starter-list" \| "reporter-list" \| "activity-list" \| "activity-instance-start" \| "activity-~~thread" \| "activity-~~approval" \| "activity-instance-list" \| "activity-instance-search" \| "activity-template-list" \| "activity-store" \| "activity-thread-list" \| "activity-approval-list" \| "installable-activity-list" \| "activity-stats-list" \| undefined;
1	+ export default function route(page: string): "activity" \| "worklist-home" \| "worklist-dashboard" \| "activity-thread" \| "activity-thread-view" \| "done-list-calendar" \| "todo-list" \| "done-list" \| "approval-pending-list" \| "approval-done-list" \| "draft-list" \| "pickable-list" \| "starter-list" \| "reporter-list" \| "activity-list" \| "activity-instance-start" \| "activity-approval" \| "activity-instance-list" \| "activity-instance-search" \| "activity-template-list" \| "activity-store" \| "activity-thread-list" \| "activity-approval-list" \| "installable-activity-list" \| "activity-stats-list" \| undefined;