@things-factory/worklist 6.1.83 → 6.1.87

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

@@ -14,6 +14,9 @@ import { i18next, localize } from '@operato/i18n'
 import { PageView, store } from '@operato/shell'
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { provider } from '@things-factory/board-ui'
+import { ActivityApproval } from '../../types/activity-approval.js'
+
+const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'short', timeStyle: 'short' })
 
 const ActivityApprovalFetchResult = `\
 {
@@ -36,6 +39,18 @@ const ActivityApprovalFetchResult = `\
       name
     }
     output
+    activityApprovals {
+      round
+      order
+      approver {
+        name
+        email
+      }
+      judgment
+      comment
+      createdAt
+      terminatedAt
+    }
     activityInstance {
       id
       name
@@ -98,6 +113,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
 
         width: 100%;
         overflow: auto;
+        background-color: var(--main-section-background-color);
       }
 
       ox-board-viewer {
@@ -106,13 +122,13 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
       }
 
       #custom-content {
-        flex: 1;
+        overflow: auto;
       }
 
       div[comment] {
         display: flex;
+        flex-direction: column;
         width: 100%;
-        height: 100px;
         right: 0;
         bottom: 0;
         margin: 0;
@@ -121,12 +137,86 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
         margin-top: auto;
       }
 
-      div[comment] textarea {
+      div[timeline] {
+        margin-bottom: var(--margin-default);
+        padding: var(--padding-default);
+        border-bottom: var(--border-dark-color);
+      }
+      div[timeline] [subtitle] {
+        padding: var(--padding-narrow) var(--padding-default);
+        background-color: var(--theme-white-color);
+        border: 2px solid var(--secondary-text-color);
+        border-radius: 15px;
+        box-shadow: var(--box-shadow);
+        color: var(--secondary-text-color);
+        font-weight: bold;
+      }
+      div[timeline] ol {
+        list-style: none;
+        margin: var(--margin-default) 0 0 var(--margin-narrow);
+        padding: 0;
+      }
+      [timeline] li {
+        display: flex;
+      }
+      [timeline] [info] {
         flex: 1;
-        padding: 10px;
+      }
+      [timeline] [date] {
+        opacity: 0.7;
+        width: 110px;
+        font-size: var(--fontsize-small);
+      }
+      [timeline] [info] strong {
+        float: right;
+      }
+      [timeline] [status] {
+        margin: 0 var(--margin-narrow);
+        display: block;
+        border-radius: 50%;
+        width: 12px;
+        height: 12px;
+        position: relative;
+        top: 3px;
+        border: 2px solid #fff;
+        background-color: var(--worklist-status-color, tomato);
+      }
+      [timeline] [status]::before {
+        content: '';
+        height: 60px;
+        width: 2px;
+        display: block;
+        position: relative;
+        margin-left: 5px;
+        background-color: var(--worklist-status-color, tomato);
+        opacity: 0.2;
+      }
+      [timeline] [info] mwc-icon {
+        position: relative;
+        top: 3px;
+        font-size: var(--fontsize-large);
+      }
+      [timeline] [info] p {
+        background-color: var(--theme-white-color);
+        margin: var(--margin-narrow) 0 var(--margin-default) 0;
+        padding: var(--padding-narrow) var(--padding-default);
+        font-size: var(--fontsize-small);
+        text-align: justify;
+      }
+      [timeline] [info] p::before {
+        content: '';
+        float: right;
+        margin-top: -10px;
+        margin-right: 20px;
+        border: 7px solid transparent;
+        border-bottom-color: #f4f4f4;
+        border-top: 0;
+      }
+      div[comment] textarea {
+        margin: 0 var(--margin-default) var(--margin-default) var(--margin-default);
+        padding: var(--input-padding);
         resize: none;
-        background-color: black;
-        color: yellow;
+        font: var(--input-font);
         outline: none;
       }
     `
@@ -170,10 +260,27 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
   }
 
   render() {
+    if (!this.activityThread) {
+      return html`<div>no activity thread info.</div>`
+    }
+
+    const { activityApprovals = [] } = this.activityThread
+    const approvals = activityApprovals
+      .sort((a, b) => (a.round > b.round ? 1 : a.round < b.round ? -1 : a.order! > b.order! ? 1 : -1))
+      .slice(0, -1)
+
     return html`
       <activity-approval-ribon .activityApproval=${this.activityApproval}></activity-approval-ribon>
       ${this.activityContent()}
       <div comment>
+        <div timeline>
+          <span subtitle>${i18next.t('label.review-and-approval')}</span>
+
+          <ol>
+            ${approvals.map(approval => this.renderActivityApproval(approval))}
+          </ol>
+        </div>
+
         <textarea
           placeholder="Jot down your comment here."
           .value=${this.activityApproval?.comment}
@@ -185,6 +292,23 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
     `
   }
 
+  renderActivityApproval(activityApproval: ActivityApproval) {
+    const { judgment, approver, comment, round, order, createdAt, terminatedAt } = activityApproval
+    const { name, email } = approver || {}
+
+    return html`
+      <li>
+        <span date>${formatter.format(new Date(terminatedAt || createdAt!))}</span>
+        <span status></span>
+        <span info>
+          ${i18next.t('label.activity-state-' + (judgment || 'started'))}
+          <strong><mwc-icon>account_circle</mwc-icon>${name}</strong>
+          <p>${comment}</p>
+        </span>
+      </li>
+    `
+  }
+
   activityContent() {
     switch (this.activityThread?.activityInstance?.viewType) {
       case 'template':

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

@@ -163,9 +163,10 @@ export class ActivityInstanceSearchPage extends connect(store)(localize(i18next)
 
   refreshGristConfig() {
     this.gristConfig = {
+      pagination: { pages : [50, 100, 200] },
       list: {
         fields: ['name', 'description'],
-        details: ['updatedAt', 'updater', 'createdAt', 'creator']
+        details: ['updatedAt', 'updater']
       },
       columns: [
         { type: 'gutter', gutterName: 'sequence' },
@@ -202,7 +203,7 @@ export class ActivityInstanceSearchPage extends connect(store)(localize(i18next)
           },
           filter: 'search',
           sortable: true,
-          width: 235,
+          width: 250,
           imex: true
         },
         {
@@ -213,7 +214,17 @@ export class ActivityInstanceSearchPage extends connect(store)(localize(i18next)
             editable: false
           },
           filter: 'search',
-          width: 250,
+          width: 300,
+          imex: true
+        },
+        {
+          type: 'string',
+          name: 'state',
+          header: i18next.t('label.status'),
+          record: {
+            editable: false
+          },
+          width: 80,
           imex: true
         },
         ...this.getSearchKeyColumns(),
@@ -237,31 +248,13 @@ export class ActivityInstanceSearchPage extends connect(store)(localize(i18next)
           hidden: true,
           imex: true
         },
-        {
-          type: 'resource-object',
-          name: 'creator',
-          header: i18next.t('field.creator'),
-          sortable: true,
-          label: true,
-          width: 100,
-          imex: true
-        },
-        {
-          type: 'datetime',
-          name: 'createdAt',
-          header: i18next.t('field.created_at'),
-          sortable: true,
-          label: true,
-          width: 180,
-          imex: true
-        },
         {
           type: 'resource-object',
           name: 'updater',
           header: i18next.t('field.updater'),
           sortable: true,
           label: true,
-          width: 100,
+          width: 90,
           imex: true
         },
         {
@@ -282,7 +275,7 @@ export class ActivityInstanceSearchPage extends connect(store)(localize(i18next)
       },
       sorters: [
         {
-          name: 'updatedAt',
+          name: 'createdAt',
           desc: true
         }
       ]
@@ -307,6 +300,7 @@ export class ActivityInstanceSearchPage extends connect(store)(localize(i18next)
               id
               name
               description
+              state
               key01
               key02
               key03
@@ -319,11 +313,6 @@ export class ActivityInstanceSearchPage extends connect(store)(localize(i18next)
                 name
               }
               updatedAt
-              creator {
-                id
-                name
-              }
-              createdAt
             }
             total
           }

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

@@ -94,6 +94,7 @@ export class ReporterListPage extends connect(store)(localize(i18next)(PageView)
 
   async pageInitialized(lifecycle) {
     this.gristConfig = {
+      pagination: { pages : [50, 100, 200] },
       list: {
         thumbnail: 'thumbnail',
         fields: ['name', 'description'],
@@ -133,33 +134,37 @@ export class ReporterListPage extends connect(store)(localize(i18next)(PageView)
           header: i18next.t('field.name'),
           filter: 'search',
           sortable: true,
-          width: 250
+          width: 385
         },
         {
           type: 'string',
           name: 'description',
           header: i18next.t('field.description'),
           filter: 'search',
-          width: 300
+          width: 400
         },
         {
           type: 'string',
           name: 'activityType',
           label: true,
           header: i18next.t('field.activity-type'),
-          sortable: true,
-          // filter: {
-          //   type: 'select',
-          //   options: ActivityTypes
-          // },
-          width: 100
+          sortable: false,
+          width: 85
+        },
+        {
+          type: 'string',
+          name: 'state',
+          label: true,
+          header: i18next.t('label.status'),
+          sortable: false,
+          width: 85
         },
         {
           type: 'resource-object',
           name: 'updater',
           header: i18next.t('field.updater'),
           sortable: true,
-          width: 100
+          width: 90
         },
         {
           type: 'datetime',
@@ -202,6 +207,7 @@ export class ReporterListPage extends connect(store)(localize(i18next)(PageView)
               id
               name
               description
+              state
               activityType
               priority
               thumbnail

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

@@ -27,6 +27,18 @@ const ActivityThreadFetchResult = `\
   }
   output
   round
+  activityApprovals {
+    round
+    order
+    approver {
+      name
+      email
+    }
+    judgment
+    comment
+    createdAt
+    terminatedAt
+  }
   activityInstance {
     id
     name

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

@@ -27,6 +27,18 @@ const ActivityThreadFetchResult = `\
   }
   output
   round
+  activityApprovals {
+    round
+    order
+    approver {
+      name
+      email
+    }
+    judgment
+    comment
+    createdAt
+    terminatedAt
+  }
   activityInstance {
     id
     name

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

@@ -1,4 +1,5 @@
 import '@material/mwc-icon'
+import '@things-factory/organization/dist-client/component/approval-line-view.js'
 
 import { html, css, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
@@ -9,7 +10,7 @@ import { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-
 import { store } from '@operato/shell'
 import { i18next } from '@operato/i18n'
 
-import '@things-factory/organization/dist-client/component/approval-line-view.js'
+import { ActivityApproval } from '../types/activity-approval'
 
 const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
 
@@ -58,14 +59,14 @@ class ActivityThreadContextTemplate extends connect(store)(LitElement) {
         --worklist-status-color: #cb3a33;
       }
 
-      [info],
+      div[info],
       [assignees] {
         padding: var(--padding-default);
         border-bottom: var(--border-dark-color);
         color: var(--secondary-color);
       }
 
-      [info] div {
+      div[info] div {
         display: flex;
         align-items: center;
         padding: var(--padding-narrow);
@@ -75,18 +76,18 @@ class ActivityThreadContextTemplate extends connect(store)(LitElement) {
         overflow: hidden;
       }
 
-      [info] div:nth-child(odd) {
+      div[info] div:nth-child(odd) {
         background-color: var(--main-section-background-color);
       }
 
-      [info] label {
+      div[info] label {
         display: inline-block;
         width: 25%;
         text-align: right;
         margin-right: 20px;
       }
 
-      [info] span {
+      div[info] span {
         width: 15px;
         height: 15px;
         background-color: var(--worklist-status-color, tomato);
@@ -94,14 +95,85 @@ class ActivityThreadContextTemplate extends connect(store)(LitElement) {
         border-radius: 50%;
       }
 
-      :host:before {
+      div[timeline] {
+        margin-bottom: var(--margin-default);
+        padding: var(--padding-default);
+      }
+      div[timeline] [subtitle] {
+        padding: var(--padding-narrow) var(--padding-default);
+        background-color: var(--theme-white-color);
+        border: 2px solid var(--secondary-text-color);
+        border-radius: 15px;
+        box-shadow: var(--box-shadow);
+        color: var(--secondary-text-color);
+        font-weight: bold;
+      }
+      div[timeline] ol {
+        list-style: none;
+        margin: var(--margin-default) 0 0 var(--margin-narrow);
+        padding: 0;
+      }
+      [timeline] li {
+        display: flex;
+        border:none;
+      }
+      [timeline] [info] {
+        flex: 1;
+        color:initial;
+      }
+      [timeline] [date] {
+        opacity: 0.7;
+        flex:initial;
+        width: 110px;
+        font-size: var(--fontsize-small);
+        color:var(--primary-text-color);
+      }
+      [timeline] [info] strong {
+        float: right;
+      }
+      [timeline] [status] {
+        margin: 0 var(--margin-narrow);
+        display: block;
+        border-radius: 50%;
+        flex:initial;
+        width: 12px;
+        height: 12px;
+        position: relative;
+        top: 3px;
+        border: 2px solid #fff;
+        background-color: var(--worklist-status-color, tomato);
+        color:var(--primary-text-color);
+      }
+      [timeline] [status]::before {
         content: '';
-        position: absolute;
-        width: 0;
-        height: 0;
-        border: 22px solid transparent;
-        border-left-color: var(--worklist-status-color);
-        border-right: 0;
+        height: 60px;
+        width: 2px;
+        display: block;
+        position: relative;
+        margin-left: 5px;
+        background-color: var(--worklist-status-color, tomato);
+        opacity: 0.2;
+      }
+      [timeline] [info] mwc-icon {
+        position: relative;
+        top: 3px;
+        font-size: var(--fontsize-large);
+      }
+      [timeline] [info] p {
+        background-color: #f4f4f4;
+        margin: var(--margin-narrow) 0 var(--margin-default) 0;
+        padding: var(--padding-narrow) var(--padding-default);
+        font-size: var(--fontsize-small);
+        text-align: justify;
+      }
+      [timeline] [info] p::before {
+        content: '';
+        float: right;
+        margin-top: -10px;
+        margin-right: 20px;
+        border: 7px solid transparent;
+        border-bottom-color: #f4f4f4;
+        border-top: 0;
       }
 
       [thumbnail] {
@@ -125,7 +197,7 @@ class ActivityThreadContextTemplate extends connect(store)(LitElement) {
   render() {
     const activityThread = this.context.activityThread || this.activityThread || {}
 
-    const { state, round, dueAt, assignedAt, assignee, activityInstance } = activityThread || {}
+    const { state, round, dueAt, assignedAt, assignee, activityInstance, activityApprovals } = activityThread || {}
     const { name, description, thumbnail, approvalLine } = activityInstance || {}
 
     return html`
@@ -151,6 +223,14 @@ class ActivityThreadContextTemplate extends connect(store)(LitElement) {
         <div><label>${i18next.t('field.due-at')}</label> ${dueAt && formatter.format(new Date(dueAt))}</div>
       </div>
 
+      <div timeline>
+        <span subtitle>${i18next.t('label.review-and-approval')}</span>
+
+        <ol>
+          ${activityApprovals.map(approval => this.renderActivityApproval(approval))}
+        </ol>
+      </div>
+
       ${thumbnail
         ? html` <div thumbnail>
             <img src=${thumbnail} />
@@ -159,6 +239,23 @@ class ActivityThreadContextTemplate extends connect(store)(LitElement) {
     `
   }
 
+  renderActivityApproval(activityApproval: ActivityApproval) {
+    const { judgment, approver, comment, round, order, createdAt, terminatedAt } = activityApproval
+    const { name, email } = approver || {}
+
+    return html`
+      <li>
+        <span date>${formatter.format(new Date(terminatedAt || createdAt!))}</span>
+        <span status></span>
+        <span info>
+          ${i18next.t('label.activity-state-' + (judgment || 'started'))}
+          <strong><mwc-icon>account_circle</mwc-icon>${name}</strong>
+          <p>${comment}</p>
+        </span>
+      </li>
+    `
+  }
+
   stateChanged(state) {
     this.context = state.route.context
   }

package/client/types/types.ts

@@ -37,3 +37,10 @@ export const ActivityStartingTypes = [
   { display: i18next.t('label.activity-starting-type-post'), value: 'post' },
   { display: i18next.t('label.activity-starting-type-issue'), value: 'issue' }
 ]
+
+export const ActivityStatus = [
+  { display: '', value: '' },
+  { display: i18next.t('label.activity-state-draft'), value: 'draft' },
+  { display: i18next.t('label.activity-state-released'), value: 'released' },
+  { display: i18next.t('label.activity-state-deprecated'), value: 'deprecated' }
+]

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

@@ -2,6 +2,7 @@ import '@operato/property-editor/ox-properties-dynamic-view.js';
 import '@operato/board/ox-board-viewer.js';
 import '../../components/activity-approval-ribon.js';
 import { PageView } from '@operato/shell';
+import { ActivityApproval } from '../../types/activity-approval.js';
 export declare const ActivityThreadStatus: {
     Assigned: string;
     Started: string;
@@ -38,6 +39,7 @@ export declare class ActivityApprovalPage extends ActivityApprovalPage_base {
         }[];
     };
     render(): import("lit-html").TemplateResult<1>;
+    renderActivityApproval(activityApproval: ActivityApproval): import("lit-html").TemplateResult<1>;
     activityContent(): any;
     templateContent(): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/unsafe-html.js").UnsafeHTMLDirective>;
     getInputSpec(): any;