@things-factory/worklist 6.2.96 → 6.2.98

package/client/pages/todo/done-list-page.ts

@@ -125,7 +125,6 @@ export class DoneListPage extends connect(store)(localize(i18next)(PageView)) {
           title: i18next.t('title.view page'),
           handlers: {
             click: (columns, data, column, record, rowIndex) => {
-              const { id } = record
               this.openActivityThreadViewPage(record)
             }
           }
@@ -266,7 +265,13 @@ export class DoneListPage extends connect(store)(localize(i18next)(PageView)) {
         }
       ],
       rows: {
-        appendable: false
+        appendable: false,
+        editable: false,
+        handlers: {
+          click: (columns, data, column, record, rowIndex) => {
+            this.openActivityThreadViewPage(record)
+          }
+        }
       },
       sorters: [
         {

package/client/pages/todo/draft-list-page.ts

@@ -200,7 +200,17 @@ export class DraftListPage extends connect(store)(localize(i18next)(PageView)) {
         }
       ],
       rows: {
-        appendable: false
+        appendable: false,
+        editable: false,
+        handlers: {
+          click: (columns, data, column, record, rowIndex) => {
+            if (!record.id) {
+              return
+            }
+
+            this.openActivityInstanceStart(record)
+          }
+        }
       },
       sorters: [
         {

package/client/pages/todo/pickable-list-page.ts

@@ -124,15 +124,12 @@ export class PickableListPage extends connect(store)(localize(i18next)(PageView)
                 return
               }
 
-              const popup = openPopup(
-                html` <activity-instance-preview .activityInstanceId=${record.id}></activity-instance-preview> `,
-                {
-                  backdrop: true,
-                  help: 'worklist/activity-instance-preview',
-                  size: 'large',
-                  title: i18next.t('title.activity preview')
-                }
-              )
+              const popup = openPopup(html` <activity-instance-preview .activityInstanceId=${record.id}></activity-instance-preview> `, {
+                backdrop: true,
+                help: 'worklist/activity-instance-preview',
+                size: 'large',
+                title: i18next.t('title.activity preview')
+              })
               popup.onclosed = () => {
                 this.grist?.fetch()
               }
@@ -224,7 +221,25 @@ export class PickableListPage extends connect(store)(localize(i18next)(PageView)
         }
       ],
       rows: {
-        appendable: false
+        appendable: false,
+        editable: false,
+        handlers: {
+          click: (columns, data, column, record, rowIndex) => {
+            if (!record.id) {
+              return
+            }
+
+            const popup = openPopup(html` <activity-instance-preview .activityInstanceId=${record.id}></activity-instance-preview> `, {
+              backdrop: true,
+              help: 'worklist/activity-instance-preview',
+              size: 'large',
+              title: i18next.t('title.activity preview')
+            })
+            popup.onclosed = () => {
+              this.grist?.fetch()
+            }
+          }
+        }
       },
       sorters: [
         {

package/client/pages/todo/todo-list-page.ts

@@ -134,7 +134,6 @@ export class TodoListPage extends connect(store)(localize(i18next)(PageView)) {
           title: i18next.t('title.open this activity page'),
           handlers: {
             click: (columns, data, column, record, rowIndex) => {
-              const { id } = record
               this.openActivityThread(record)
             }
           }
@@ -269,7 +268,13 @@ export class TodoListPage extends connect(store)(localize(i18next)(PageView)) {
         }
       ],
       rows: {
-        appendable: false
+        appendable: false,
+        editable: false,
+        handlers: {
+          click: (columns, data, column, record, rowIndex) => {
+            this.openActivityThread(record)
+          }
+        }
       },
       sorters: [
         {
@@ -383,9 +388,9 @@ export class TodoListPage extends connect(store)(localize(i18next)(PageView)) {
       const minutes = Math.floor(secs / MIN)
       const seconds = secs - minutes * MIN
 
-      yield `${positive ? '' : '- '}${days ? `${days}${i18next.t('label.days')} ` : ''}${
-        hours ? `${hours}${i18next.t('label.hours')} ` : ''
-      }${minutes ? `${minutes}${i18next.t('label.minutes')} ` : ''}`
+      yield `${positive ? '' : '- '}${days ? `${days}${i18next.t('label.days')} ` : ''}${hours ? `${hours}${i18next.t('label.hours')} ` : ''}${
+        minutes ? `${minutes}${i18next.t('label.minutes')} ` : ''
+      }`
 
       await sleep(60 * 1000)
     }

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} />

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

@@ -23,6 +23,7 @@ class ActivityInstanceContextTemplate extends connect(store)(LitElement) {
         background-color: var(--theme-white-color);
         width: 100%;
         min-width: 450px;
+        max-height: 100%;
         overflow: auto;
         --context-ui-padding: 0;
       }
@@ -59,6 +60,16 @@ class ActivityInstanceContextTemplate extends connect(store)(LitElement) {
         --worklist-status-color: #cb3a33;
       }
 
+      :host:before {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        border: 22px solid transparent;
+        border-left-color: var(--worklist-status-color);
+        border-right: 0;
+      }
+
       [info],
       [assignees] {
         padding: var(--padding-default);
@@ -162,8 +173,7 @@ class ActivityInstanceContextTemplate extends connect(store)(LitElement) {
 
   render() {
     const activityInstance = this.context.activityInstance || this.activityInstance || {}
-    const { activity, name, description, state, assignees, approvalLine, assignedAt, startedAt, dueAt, thumbnail } =
-      activityInstance || {}
+    const { activity, name, description, state, assignees, approvalLine, assignedAt, startedAt, dueAt, thumbnail } = activityInstance || {}
     const { startingType } = activity || {}
 
     // const editable = state == 'draft'
@@ -178,23 +188,14 @@ class ActivityInstanceContextTemplate extends connect(store)(LitElement) {
                 @change=${e => (activityInstance.approvalLine = e.currentTarget.value)}
               ></approval-line-view>
             `
-          : html`<mwc-icon-button
-              icon="group_add"
-              @click=${() => this.onClickApprovalLine(activityInstance)}
-            ></mwc-icon-button>`}
+          : html`<mwc-icon-button icon="group_add" @click=${() => this.onClickApprovalLine(activityInstance)}></mwc-icon-button>`}
       </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.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}
-        </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.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>${i18next.t('field.started-at')}</label> ${startedAt && formatter.format(new Date(startedAt))}</div>
       </div>
@@ -211,10 +212,7 @@ class ActivityInstanceContextTemplate extends connect(store)(LitElement) {
                       @change=${e => (activityInstance.assignees = e.currentTarget.value)}
                     ></assignees-view>
                   `
-                : html`<mwc-icon-button
-                    icon="group_add"
-                    @click=${() => this.onClickAssignees(activityInstance)}
-                  ></mwc-icon-button>`}
+                : html`<mwc-icon-button icon="group_add" @click=${() => this.onClickAssignees(activityInstance)}></mwc-icon-button>`}
             </div>
           </div>`
         : html``}

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

@@ -1,5 +1,6 @@
 import '@material/mwc-icon'
 import '@things-factory/organization/dist-client/component/approval-line-view.js'
+import '../components/activity-approval-timeline'
 
 import { html, css, LitElement, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
@@ -10,8 +11,6 @@ import { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-
 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-thread-context-template')
@@ -23,6 +22,7 @@ class ActivityThreadContextTemplate extends connect(store)(LitElement) {
         background-color: var(--theme-white-color);
         width: 100%;
         min-width: 450px;
+        max-height: 100%;
         overflow: auto;
         --context-ui-padding: 0;
       }
@@ -59,121 +59,49 @@ class ActivityThreadContextTemplate extends connect(store)(LitElement) {
         --worklist-status-color: #cb3a33;
       }
 
-      div[info],
-      [assignees] {
+      :host:before {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        border: 22px solid transparent;
+        border-left-color: var(--worklist-status-color);
+        border-right: 0;
+      }
+
+      div[info] {
         padding: var(--padding-default);
         border-bottom: var(--border-dark-color);
         color: var(--secondary-color);
-      }
 
-      div[info] div {
-        display: flex;
-        align-items: center;
-        padding: var(--padding-narrow);
-        border-radius: var(--border-radius);
-        text-align: right;
-        clear: both;
-        overflow: hidden;
-      }
-
-      div[info] div:nth-child(odd) {
-        background-color: var(--main-section-background-color);
-      }
-
-      div[info] label {
-        display: inline-block;
-        width: 25%;
-        text-align: right;
-        margin-right: 20px;
-      }
-
-      div[info] span {
-        width: 15px;
-        height: 15px;
-        background-color: var(--worklist-status-color, tomato);
-        display: inline-block;
-        border-radius: 50%;
-      }
-
-      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: 130px;
-        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: '';
-        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;
+        div {
+          display: flex;
+          align-items: center;
+          padding: var(--padding-narrow);
+          border-radius: var(--border-radius);
+          text-align: right;
+          clear: both;
+          overflow: hidden;
+        }
+
+        div:nth-child(odd) {
+          background-color: var(--main-section-background-color);
+        }
+
+        label {
+          display: inline-block;
+          width: 25%;
+          text-align: right;
+          margin-right: 20px;
+        }
+
+        span {
+          width: 15px;
+          height: 15px;
+          background-color: var(--worklist-status-color, tomato);
+          display: inline-block;
+          border-radius: 50%;
+        }
       }
 
       [thumbnail] {
@@ -197,47 +125,26 @@ class ActivityThreadContextTemplate extends connect(store)(LitElement) {
   render() {
     const activityThread = this.context.activityThread || this.activityThread || {}
 
-    const { state, round, dueAt, assignedAt, terminatedAt, assignee, activityInstance, activityApprovals } =
-      activityThread || {}
+    const { state, round, dueAt, assignedAt, terminatedAt, 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.assignee')}</label> <strong>${assignee?.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>${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>
 
-      ${activityApprovals && activityApprovals.length > 0
-        ? html`
-            <div timeline>
-              <span subtitle>${i18next.t('label.review-and-approval')}</span>
-
-              <ol>
-                ${activityApprovals.map(approval => this.renderActivityApproval(approval))}
-              </ol>
-            </div>
-          `
-        : nothing}
+      ${activityApprovals && activityApprovals.length > 0 ? html` <activity-approval-timeline .activityThread=${activityThread}></activity-approval-timeline> ` : nothing}
       ${thumbnail
         ? html` <div thumbnail>
             <img src=${thumbnail} />
@@ -246,23 +153,6 @@ 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/dist-client/components/activity-approval-timeline.d.ts

@@ -0,0 +1,18 @@
+import '@material/mwc-icon';
+import '@things-factory/organization/dist-client/component/approval-line-view.js';
+import { LitElement } from 'lit';
+import { ActivityApproval } from '../types/activity-approval';
+declare const ActivityApprovalTimeline_base: (new (...args: any[]) => {
+    _storeUnsubscribe: import("redux").Unsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    stateChanged(_state: unknown): void;
+    readonly isConnected: boolean;
+}) & typeof LitElement;
+export declare class ActivityApprovalTimeline extends ActivityApprovalTimeline_base {
+    static styles: import("lit").CSSResult[];
+    private activityThread;
+    render(): import("lit-html").TemplateResult<1>;
+    renderActivityApproval(activityApproval: ActivityApproval): import("lit-html").TemplateResult<1>;
+}
+export {};