@things-factory/worklist 7.0.0-alpha.4 → 7.0.0-alpha.5

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
@@ -38,6 +37,8 @@ const ActivityApprovalFetchResult = `\
       id
       name
     }
+    updatedAt
+    terminatedAt
     output
     activityApprovals {
       round
@@ -120,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;
       }
     `
   ]
@@ -263,51 +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="Jot down your comment here."
-          .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}
     `
   }
 
@@ -393,11 +296,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
       html`
         <fieldset>
           <legend>Input</legend>
-          <ox-properties-dynamic-view
-            data-name="input"
-            .props=${inputSpec}
-            .value=${input}
-          ></ox-properties-dynamic-view>
+          <ox-properties-dynamic-view data-name="input" .props=${inputSpec} .value=${input}></ox-properties-dynamic-view>
         </fieldset>
 
         <fieldset>
@@ -455,6 +354,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
     element.activityId = activityInstance.activity.id
     element.input = input
     element.output = output
+    element.activityApproval = this.activityApproval
 
     return element
   }

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

@@ -25,6 +25,7 @@ const ActivityThreadFetchResult = `\
     id
     name
   }
+  updatedAt
   output
   round
   activityApprovals {
@@ -111,8 +112,8 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
         height: 100%;
       }
 
-      #custom-content {
-        flex: 1;
+      div[empty] {
+        align-self: center;
       }
     `
   ]
@@ -126,8 +127,8 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
     const restartable = [ActivityThreadStatus.Rejected].includes(state)
     const savable = [ActivityThreadStatus.Assigned, ActivityThreadStatus.Started].includes(state)
     const submittable = savable
-    const delegatable = savable
-    const abortable = savable
+    // const delegatable = savable
+    // const abortable = savable
 
     return {
       title: this.lifecycle?.params?.['title'] || i18next.t('title.activity'),
@@ -145,22 +146,22 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
           ...CommonButtonStyles.submit
         },
 
-        delegatable && {
-          title: i18next.t('button.delegate'),
-          action: this._delegateActivityThread.bind(this),
-          ...CommonButtonStyles.save
-        },
+        // delegatable && {
+        //   title: i18next.t('button.delegate'),
+        //   action: this._delegateActivityThread.bind(this),
+        //   ...CommonButtonStyles.save
+        // },
+
+        // abortable && {
+        //   title: i18next.t('button.abort'),
+        //   action: this._abortActivityThread.bind(this),
+        //   ...CommonButtonStyles.cancel
+        // },
 
         restartable && {
           title: i18next.t('button.restart'),
           action: this._restartActivityThread.bind(this),
           ...CommonButtonStyles.save
-        },
-
-        abortable && {
-          title: i18next.t('button.abort'),
-          action: this._abortActivityThread.bind(this),
-          ...CommonButtonStyles.cancel
         }
       ].filter(Boolean /* truthy only */)
       // activityThread: this.activityThread
@@ -170,10 +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() {
@@ -258,11 +264,7 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
       html`
         <fieldset>
           <legend>Input</legend>
-          <ox-properties-dynamic-view
-            data-name="input"
-            .props=${inputSpec}
-            .value=${input}
-          ></ox-properties-dynamic-view>
+          <ox-properties-dynamic-view data-name="input" .props=${inputSpec} .value=${input}></ox-properties-dynamic-view>
         </fieldset>
 
         <fieldset>
@@ -325,6 +327,8 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
     element.activityId = activityInstance.activity.id
     element.input = input
     element.output = output
+    element.activityThread = this.activityThread
+
     element.addEventListener('change', (e: CustomEvent) => {
       this.activityThread.output = e.detail
     })

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() {