@things-factory/worklist 6.2.95 → 6.2.97

package/client/components/activity-approval-timeline.ts

@@ -0,0 +1,149 @@
+import '@material/mwc-icon'
+import '@things-factory/organization/dist-client/component/approval-line-view.js'
+
+import { html, css, LitElement, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { connect } from 'pwa-helpers/connect-mixin'
+
+import { store } from '@operato/shell'
+import { i18next } from '@operato/i18n'
+
+import { ActivityApproval } from '../types/activity-approval'
+
+const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
+
+@customElement('activity-approval-timeline')
+export class ActivityApprovalTimeline extends connect(store)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        margin-bottom: var(--margin-default);
+        padding: var(--padding-default);
+      }
+
+      [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;
+      }
+
+      ol {
+        list-style: none;
+        margin: var(--margin-default) 0 0 var(--margin-narrow);
+        padding: 0;
+      }
+
+      li {
+        display: flex;
+        border: none;
+      }
+
+      [info] {
+        flex: 1;
+        color: var(--secondary-color);
+
+        strong {
+          float: right;
+        }
+
+        mwc-icon {
+          position: relative;
+          top: 3px;
+          font-size: var(--fontsize-large);
+        }
+
+        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;
+          min-height: 20px;
+        }
+
+        p::before {
+          content: '';
+          float: right;
+          margin-top: -10px;
+          margin-right: 20px;
+          border: 7px solid transparent;
+          border-bottom-color: #f4f4f4;
+          border-top: 0;
+        }
+      }
+
+      [date] {
+        opacity: 0.7;
+        flex: initial;
+        width: 200px;
+        max-width: 30%;
+        font-size: var(--fontsize-small);
+        color: var(--primary-text-color);
+      }
+
+      [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);
+      }
+
+      [status]::before {
+        content: '';
+        height: 60px;
+        width: 2px;
+        display: block;
+        position: relative;
+        margin-left: 5px;
+        background-color: var(--worklist-status-color, tomato);
+        opacity: 0.2;
+      }
+    `
+  ]
+
+  @property({ type: Object }) private activityThread
+
+  render() {
+    const { activityApprovals = [] } = this.activityThread || {}
+
+    return html` ${activityApprovals.length > 0
+      ? html`
+          <span subtitle>${i18next.t('label.review-and-approval')}</span>
+
+          <ol>
+            ${activityApprovals.map(approval => this.renderActivityApproval(approval))}
+          </ol>
+        `
+      : nothing}`
+  }
+
+  renderActivityApproval(activityApproval: ActivityApproval) {
+    const { judgment, approver, comment, createdAt, terminatedAt } = activityApproval
+    const { name } = 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>
+    `
+  }
+}

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

@@ -1,11 +1,12 @@
 import '@operato/property-editor/ox-properties-dynamic-view.js'
 import '@operato/board/ox-board-viewer.js'
 import '../../components/activity-approval-ribon.js'
+import '../../components/activity-approval-timeline.js'
 
 import gql from 'graphql-tag'
-import { css, html } from 'lit'
+import { css, html, nothing } from 'lit'
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'
-import { customElement, property, query, state } from 'lit/decorators.js'
+import { customElement, query, state } from 'lit/decorators.js'
 import { keyed } from 'lit/directives/keyed.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
@@ -14,9 +15,6 @@ import { i18next, localize } from '@operato/i18n'
 import { PageView, store } from '@operato/shell'
 import { CommonButtonStyles, 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 = `\
 {
@@ -30,6 +28,7 @@ const ActivityApprovalFetchResult = `\
   round
   order
   createdAt
+  terminatedAt
   activityThread {
     state
     dueAt
@@ -122,106 +121,30 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
         height: 100%;
       }
 
-      #custom-content {
-        overflow: auto;
-      }
-
       div[comment] {
         display: flex;
-        flex-direction: column;
-        width: 100%;
-        right: 0;
+        position: sticky;
         bottom: 0;
         margin: 0;
         padding: 0;
-        opacity: 0.8;
-        margin-top: auto;
+        width: 100%;
+        background-color: var(--main-section-background-color);
 
-        max-height: 40%;
+        textarea {
+          flex: 1;
+          margin: var(--margin-default);
+          padding: var(--input-padding);
+          font: var(--input-font);
+          outline: none;
+          height: 80px;
+          border-radius: 10px;
+          border: var(--input-field-border);
+          resize: none;
+        }
       }
 
-      div[timeline] {
-        margin-bottom: var(--margin-default);
-        padding: var(--padding-default);
-        border-bottom: var(--border-dark-color);
-        overflow: auto;
-      }
-      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;
-      }
-      [timeline] [date] {
-        opacity: 0.7;
-        width: 130px;
-        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;
-        font: var(--input-font);
-        outline: none;
+      div[empty] {
+        align-self: center;
       }
     `
   ]
@@ -265,49 +188,29 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
 
   render() {
     if (!this.activityThread) {
-      return html`<div>no activity thread info.</div>`
+      return html`<div empty>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)
+    const { terminatedAt } = this.activityApproval
+    const editable = !terminatedAt
 
     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=${String(i18next.t('text.explain the reason for approval/rejection'))}
-          .value=${this.activityApproval?.comment}
-          @change=${(e: Event) => {
-            this.activityApproval.comment = (e.target as HTMLTextAreaElement).value
-          }}
-        ></textarea>
-      </div>
-    `
-  }
-
-  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>
+      <activity-approval-timeline .activityThread=${this.activityThread}></activity-approval-timeline>
+      ${editable
+        ? html`
+            <div comment>
+              <textarea
+                placeholder=${String(i18next.t('text.explain the reason for approval/rejection'))}
+                .value=${this.activityApproval?.comment}
+                @change=${(e: Event) => {
+                  this.activityApproval.comment = (e.target as HTMLTextAreaElement).value
+                }}
+              ></textarea>
+            </div>
+          `
+        : nothing}
     `
   }
 

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

@@ -112,8 +112,8 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
         height: 100%;
       }
 
-      #custom-content {
-        flex: 1;
+      div[empty] {
+        align-self: center;
       }
     `
   ]
@@ -171,7 +171,15 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
   render() {
     const activityThread = this.activityThread
 
-    return html` ${activityThread ? html`<activity-thread-ribon .activityThread=${activityThread}></activity-thread-ribon>` : html``} ${this.activityContent()}`
+    if (!activityThread) {
+      return html`<div empty>no activity thread info.</div> `
+    }
+
+    return html`
+      <activity-thread-ribon .activityThread=${activityThread}></activity-thread-ribon>
+      ${this.activityContent()}
+      <activity-approval-timeline .activityThread=${activityThread}></activity-approval-timeline>
+    `
   }
 
   activityContent() {

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

@@ -1,5 +1,6 @@
 import '@operato/board/ox-board-viewer.js'
 import '../../components/activity-thread-ribon.js'
+import '../../components/activity-approval-timeline.js'
 import './activity-thread-view.js'
 
 import gql from 'graphql-tag'
@@ -118,6 +119,10 @@ export class ActivityThreadViewPage extends connect(store)(localize(i18next)(Pag
       #custom-content {
         flex: 1;
       }
+
+      div[empty] {
+        align-self: center;
+      }
     `
   ]
 
@@ -136,10 +141,15 @@ export class ActivityThreadViewPage extends connect(store)(localize(i18next)(Pag
   render() {
     const activityThread = this.activityThread
 
-    return html` ${activityThread
-      ? html`<activity-thread-ribon .activityThread=${activityThread}></activity-thread-ribon>`
-      : html``}
-    ${this.activityContent()}`
+    if (!activityThread) {
+      return html`<div empty>no activity thread info.</div> `
+    }
+
+    return html`
+      <activity-thread-ribon .activityThread=${activityThread}></activity-thread-ribon>
+      ${this.activityContent()}
+      <activity-approval-timeline .activityThread=${activityThread}></activity-approval-timeline>
+    `
   }
 
   activityContent() {
@@ -204,10 +214,7 @@ export class ActivityThreadViewPage extends connect(store)(localize(i18next)(Pag
       return html``
     }
 
-    return keyed(
-      this.activityThread.id,
-      html` <activity-thread-view .activityThreadId=${this.activityThread.id}></activity-thread-view> `
-    )
+    return keyed(this.activityThread.id, html` <activity-thread-view .activityThreadId=${this.activityThread.id}></activity-thread-view> `)
   }
 
   boardContent() {

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

@@ -114,74 +114,14 @@ export class ActivityThreadView extends localize(i18next)(LitElement) {
         font: bold 16px var(--theme-font);
         color: var(--secondary-text-color);
       }
-      [timeline] ol {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-      }
-      [timeline] li {
-        display: flex;
-      }
-      [timeline] [info] {
-        flex: 1;
-      }
-      [timeline] [date] {
-        opacity: 0.7;
-        width: 130px;
-        font-size: var(--fontsize-small);
-      }
-      [timeline] [info] strong {
-        float: right;
-      }
-      [timeline] [status] {
-        margin: 0 var(--margin-narrow);
-        display: block;
-        border-radius: 50%;
-        width: 12px;
-        height: 12px;
-        position: relative;
-        top: 3px;
-        border: 2px solid #fff;
-        background-color: var(--worklist-status-color, tomato);
-      }
-      [timeline] [status]::before {
-        content: '';
-        height: 60px;
-        width: 2px;
-        display: block;
-        position: relative;
-        margin-left: 5px;
-        background-color: var(--worklist-status-color, tomato);
-        opacity: 0.2;
-      }
-      [timeline] [info] mwc-icon {
-        position: relative;
-        top: 3px;
-        font-size: var(--fontsize-large);
-      }
-      [timeline] [info] p {
-        background-color: #f4f4f4;
-        margin: var(--margin-narrow) 0 var(--margin-default) 0;
-        padding: var(--padding-narrow) var(--padding-default);
-        border-radius: var(--border-radius);
-        font-size: var(--fontsize-small);
-        text-align: justify;
-      }
-      [timeline] [info] p::before {
-        content: '';
-        float: right;
-        margin-top: -10px;
-        margin-right: 20px;
-        border: 7px solid transparent;
-        border-bottom-color: #f4f4f4;
-        border-top: 0;
-      }
+
       [thread] div {
         border-bottom: var(--border-dark-color);
         padding: var(--padding-narrow);
         text-align: right;
         overflow: hidden;
       }
+
       [thread] div label {
         float: left;
         width: 25%;
@@ -203,23 +143,9 @@ export class ActivityThreadView extends localize(i18next)(LitElement) {
       return html`<div>no activity thread info.</div>`
     }
 
-    const {
-      state,
-      assignee,
-      output,
-      round,
-      activityApprovals = [],
-      assignedAt,
-      startedAt,
-      terminatedAt,
-      activityInstance
-    } = this.activityThread
-    const { input, approvalLine } = activityInstance!
+    const { state, assignee, output, round, assignedAt, startedAt, terminatedAt, activityInstance } = this.activityThread
+    const { input } = 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>
@@ -234,13 +160,9 @@ export class ActivityThreadView extends localize(i18next)(LitElement) {
           <span status></span>
           <strong>${i18next.t('label.activity-state-' + state)}</strong>
         </div>
-        <div>
-          <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}
-        </div>
+        <div><label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}</div>
         <div><label>${i18next.t('field.started-at')}</label> ${startedAt && formatter.format(new Date(startedAt))}</div>
-        <div>
-          <label>${i18next.t('field.terminated-at')}</label> ${terminatedAt && formatter.format(new Date(terminatedAt))}
-        </div>
+        <div><label>${i18next.t('field.terminated-at')}</label> ${terminatedAt && formatter.format(new Date(terminatedAt))}</div>
         <div><label>${i18next.t('field.round')}</label> ${round}</div>
       </div>
 
@@ -248,36 +170,6 @@ export class ActivityThreadView extends localize(i18next)(LitElement) {
         <span subtitle>${i18next.t('field.artifact')}</span>
         ${this.renderInOut({ ...input, ...output })}
       </div>
-      <div timeline>
-        <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>
-          ${approvals.map(approval => this.renderActivityApproval(approval))}
-        </ol>
-      </div>
-    `
-  }
-
-  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>
     `
   }
 

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

@@ -1,6 +1,7 @@
 import '@material/mwc-icon'
+import '../components/activity-approval-timeline'
 
-import { html, css, LitElement } from 'lit'
+import { html, css, LitElement, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { connect } from 'pwa-helpers/connect-mixin'
@@ -22,6 +23,7 @@ class ActivityApprovalContextTemplate extends connect(store)(LitElement) {
         background-color: var(--theme-white-color);
         width: 100%;
         min-width: 450px;
+        max-height: 100%;
         overflow: auto;
         --context-ui-padding: 0;
       }
@@ -126,35 +128,28 @@ class ActivityApprovalContextTemplate extends connect(store)(LitElement) {
     const activityApproval = this.context.activityApproval || this.activityApproval || {}
 
     const { round, order, approver, createdAt, activityThread } = activityApproval || {}
-    const { state, dueAt, assignedAt, assignee, activityInstance } = activityThread || {}
+    const { state, dueAt, assignedAt, assignee, activityInstance, activityApprovals } = activityThread || {}
     const { name, description, thumbnail, approvalLine } = activityInstance || {}
 
     return html`
       <div flow>
-        <div approval-line>
-          ${approvalLine ? html` <approval-line-view .model=${approvalLine}></approval-line-view> ` : html``}
-        </div>
+        <div approval-line>${approvalLine ? html` <approval-line-view .model=${approvalLine}></approval-line-view> ` : html``}</div>
       </div>
 
       <div info>
         <div><label>${i18next.t('field.name')}</label> <strong>${name}</strong></div>
         <div><label>${i18next.t('field.description')}</label> ${description}</div>
-        <div>
-          <label>${i18next.t('field.status')}</label> <span></span>&nbsp;<strong
-            >${i18next.t('label.activity-state-' + state)}</strong
-          >
-        </div>
+        <div><label>${i18next.t('field.status')}</label> <span></span>&nbsp;<strong>${i18next.t('label.activity-state-' + state)}</strong></div>
         <div><label>${i18next.t('field.round')}</label> <strong>${round}</strong></div>
         <div><label>${i18next.t('field.approval-order')}</label> <strong>${order}</strong></div>
         <div><label>${i18next.t('field.assignee')}</label> <strong>${assignee?.name}</strong></div>
         <div><label>${i18next.t('field.approver')}</label> <strong>${approver?.name}</strong></div>
-        <div>
-          <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}
-        </div>
+        <div><label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}</div>
         <div><label>${i18next.t('field.due-at')}</label> ${dueAt && formatter.format(new Date(dueAt))}</div>
         <div><label>since</label> ${createdAt && formatter.format(new Date(createdAt))}</div>
       </div>
 
+      ${activityApprovals && activityApprovals.length > 0 ? html` <activity-approval-timeline .activityThread=${activityThread}></activity-approval-timeline> ` : nothing}
       ${thumbnail
         ? html` <div thumbnail>
             <img src=${thumbnail} />