@things-factory/worklist 7.0.0-alpha.3 → 7.0.0-alpha.30

package/client/components/activity-starter-form.ts

@@ -40,20 +40,21 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
         color: var(--secondary-color);
       }
 
-      content label{
-        font:var(--label-font)
+      content label {
+        font: var(--label-font);
       }
-      content input, content textarea{
-        border-radius:var(--border-radius);
-        border:var(--border-dark-color);
-        padding:var(--input-padding);
-        margin:var(--input-margin);
-        font:var(--input-font);
+      content input,
+      content textarea {
+        border-radius: var(--border-radius);
+        border: var(--border-dark-color);
+        padding: var(--input-padding);
+        margin: var(--input-margin);
+        font: var(--input-font);
       }
 
-      content [desc]{
+      content [desc] {
         color: var(--secondary-text-color);
-        font-size:0.9em
+        font-size: 0.9em;
       }
 
       #description {
@@ -84,23 +85,16 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
     return html`
       <content>
         <div desc>
-          <span
-            >업무의 타이틀과 설명을 작성해서 초안저장을 클릭하시면, 업무 초안이 생성되고 편집할 수 있는 페이지로
-            이동합니다.</span
-          >
+          <span>업무의 타이틀과 설명을 작성해서 초안저장을 클릭하시면, 업무 초안이 생성되고 편집할 수 있는 페이지로 이동합니다.</span>
 
           <span
-            >이렇게 생성된 업무 초안은 '작성중인 업무' 리스트에서 찾아볼 수 있으며,
-            '${startingType == 'issue' ? '이슈' : '게시'}' 전까지 언제든지 수정할 수 있습니다.</span
+            >이렇게 생성된 업무 초안은 '작성중인 업무' 리스트에서 찾아볼 수 있으며, '${startingType == 'issue' ? '이슈' : '게시'}' 전까지 언제든지 수정할 수
+            있습니다.</span
           >
         </div>
         <div>
           <label for="name">${i18next.t('label.title')}</label>
-          <input
-            id="name"
-            .value=${name || this.activity?.name}
-            @change=${e => (this.activityInstance.name = e.currentTarget.value)}
-          />
+          <input id="name" .value=${name || this.activity?.name} @change=${e => (this.activityInstance.name = e.currentTarget.value)} />
         </div>
 
         <div>
@@ -185,8 +179,7 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
 
   async draftActivityInstance() {
     var { id: activityId } = this.activity
-    var { id, name, description, priority, threadsMin, threadsMax, dueAt, input, assignees, approvalLine } =
-      this.activityInstance
+    var { id, name, description, priority, threadsMin, threadsMax, dueAt, input, assignees, approvalLine } = this.activityInstance
 
     name ||= this.activity.name
     description ||= this.activity.description

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

@@ -0,0 +1,210 @@
+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 { ActivityThread } from '../types/activity-thread'
+import { ActivityThreadHistory } from '../types/activity-thread-history'
+import { ActivityApproval } from '../types/activity-approval'
+
+const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
+
+@customElement('activity-thread-timeline')
+export class ActivityThreadTimeline extends connect(store)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+
+      [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);
+
+        div {
+          float: right;
+          opacity: 0.7;
+        }
+
+        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;
+      }
+
+      table,
+      th,
+      td {
+        border: 1px solid lightgray;
+        border-collapse: collapse;
+      }
+
+      th,
+      td {
+        padding: 10px;
+      }
+    `
+  ]
+
+  @property({ type: Object }) activityThread?: ActivityThread
+  @property({ type: String }) subtitle?: string
+  @property({ type: Boolean, attribute: 'short-form' }) shortForm?: boolean
+
+  render() {
+    const { activityApprovals = [], activityThreadHistories = [] } = this.activityThread || {}
+
+    const timeline = [
+      ...activityThreadHistories.filter(item => item.transaction && (!this.shortForm || !/^.*(reject|approve|save|restart).*$/.test(item.transaction))),
+      ...activityApprovals.filter(item => item.judgment)
+    ].sort((a, b) => ((a.updatedAt || 0) > (b.updatedAt || 0) ? 1 : -1))
+
+    return html` ${timeline.length > 0
+      ? html`
+          <span subtitle>${this.subtitle || i18next.t('label.timeline')}</span>
+
+          <ol>
+            ${timeline.map(item =>
+              'reason' in item ? this.renderActivityThreadHistory(item as ActivityThreadHistory) : this.renderActivityApproval(item as ActivityApproval)
+            )}
+          </ol>
+        `
+      : nothing}`
+  }
+
+  renderActivityThreadHistory(activityThreadHistory: ActivityThreadHistory) {
+    const { updater, updatedAt, state, reason, output, transaction } = activityThreadHistory
+    const { name } = updater || {}
+
+    return html`
+      <li>
+        <span date>${formatter.format(new Date(updatedAt!))}</span>
+        <span status></span>
+
+        <span info>
+          ${i18next.t('label.activity-transaction-' + transaction)}
+          <div><mwc-icon>account_circle</mwc-icon>${name}</div>
+          <p>${reason ? reason : output ? this.renderOutput(output) : nothing}</p>
+        </span>
+      </li>
+    `
+  }
+
+  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)}
+          <div><mwc-icon>account_circle</mwc-icon>${name}</div>
+          <p>${comment}</p>
+        </span>
+      </li>
+    `
+  }
+
+  renderOutput(output: any) {
+    const rows = [] as [key: string, value: string][]
+
+    for (let key in output) {
+      rows.push([key, output[key]])
+    }
+
+    return html`
+      <table>
+        ${rows.map(
+          ([key, value]) => html`
+            <tr>
+              <td>${key}</td>
+              <td>${value}</td>
+            </tr>
+          `
+        )}
+      </table>
+    `
+  }
+}

package/client/index.ts

@@ -1,2 +1,3 @@
 export * from './pages/activity/activity-page.js'
-export * from './activity-summary-generator'
+export * from './activity-summary-generator.js'
+export * from './components/activity-thread-timeline.js'

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-thread-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,19 +37,31 @@ const ActivityApprovalFetchResult = `\
       id
       name
     }
+    updatedAt
+    terminatedAt
     output
     activityApprovals {
       round
       order
       approver {
         name
-        email
       }
       judgment
       comment
       createdAt
+      updatedAt
       terminatedAt
     }
+    activityThreadHistories {
+      transaction
+      reason
+      updater {
+        name
+      }
+      updatedAt
+      state
+      output
+    }
     activityInstance {
       id
       name
@@ -120,106 +131,37 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
         height: 100%;
       }
 
-      #custom-content {
-        overflow: auto;
+      activity-thread-timeline {
+        margin: var(--margin-default);
       }
 
       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] {
+      [empty] {
         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;
+        display: flex;
+        align-items: center;
+        align-self: center;
       }
     `
   ]
@@ -237,7 +179,15 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
       title: this.lifecycle?.params?.['title'] || i18next.t('title.activity approval'),
       help: 'worklist/activity-approval',
       actions: judgment
-        ? []
+        ? [
+            {
+              title: i18next.t('button.close'),
+              action: () => {
+                history.back()
+              },
+              ...CommonButtonStyles.back
+            }
+          ]
         : [
             {
               title: i18next.t('button.reject'),
@@ -255,6 +205,13 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
               title: i18next.t('button.save'),
               action: this.saveActivityApproval.bind(this),
               ...CommonButtonStyles.save
+            },
+            {
+              title: i18next.t('button.close'),
+              action: () => {
+                history.back()
+              },
+              ...CommonButtonStyles.back
             }
           ]
       // activityApproval: this.activityApproval
@@ -263,51 +220,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>${i18next.t('text.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-thread-timeline .activityThread=${this.activityThread} short-form></activity-thread-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 +328,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 +386,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
   }
@@ -547,21 +479,9 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
   async approveActivityApproval() {
     var { id, comment } = this.activityApproval
 
-    if (!comment) {
-      document.dispatchEvent(
-        new CustomEvent('notify', {
-          detail: {
-            message: i18next.t('text.enter a comment')
-          }
-        })
-      )
-      this.commentInput.focus()
-      return
-    }
-
     const response = await client.mutate({
       mutation: gql`
-        mutation ($id: String!, $comment: String!) {
+        mutation ($id: String!, $comment: String) {
           approveActivityApproval(id: $id,  comment: $comment) ${ActivityApprovalFetchResult}
         }
       `,