@things-factory/worklist 6.1.61 → 6.1.64

package/client/components/activity-instance-ribon.ts

@@ -94,6 +94,7 @@ export class ActivityInstanceRibon extends localize(i18next)(LitElement) {
       [state] {
         text-align: right;
         font-size: var(--fontsize-small);
+        font-weight:bold;
       }
 
       @media only screen and (max-width: 460px) {
@@ -131,8 +132,7 @@ export class ActivityInstanceRibon extends localize(i18next)(LitElement) {
               ></activity-instance-context-template>`
             })
           }}
-          >description</mwc-icon
-        >
+          >description</mwc-icon>
         ${description}
       </div>
       ${startingType == 'issue' && assignee

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

@@ -22,7 +22,7 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--main-section-background-color);
       }
 
       content {
@@ -37,10 +37,23 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
       content > div {
         display: flex;
         flex-direction: column;
+        color: var(--secondary-color);
       }
 
-      content span {
-        color: navy;
+      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 [desc]{
+        color: var(--secondary-text-color);
+        font-size:0.9em
       }
 
       #description {
@@ -70,7 +83,7 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
 
     return html`
       <content>
-        <div>
+        <div desc>
           <span
             >업무의 타이틀과 설명을 작성해서 초안저장을 클릭하시면, 업무 초안이 생성되고 편집할 수 있는 페이지로
             이동합니다.</span

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

@@ -197,8 +197,9 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
         return this.customElementContent()
       case 'page':
       case 'external':
-      default:
         return html``
+      default:
+        return this.generatedContent()
     }
   }
 

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

@@ -1,3 +1,5 @@
+import '@things-factory/organization/dist-client/component/approval-line-view.js'
+
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
@@ -10,7 +12,7 @@ import { ActivityInstance } from '../../types/activity-instance'
 import { ActivityThread } from '../../types/activity-thread'
 import { ActivityApproval } from '../../types/activity-approval'
 
-const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
+const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'short', timeStyle: 'short' })
 
 @customElement('activity-instance-view')
 export class ActivityInstanceView extends localize(i18next)(LitElement) {
@@ -18,9 +20,188 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
     ScrollbarStyles,
     css`
       :host {
-        display: block;
-        background-color: #fff;
+        display: flex;
         overflow: auto;
+        font-size: var(--fontsize-default);
+      }
+      :host([state='assigned']) {
+        --worklist-status-color: #5f7184;
+      }
+
+      :host([state='started']) {
+        --worklist-status-color: #56af45;
+      }
+
+      :host([state='delegated']) {
+        --worklist-status-color: #8654b0;
+      }
+
+      :host([state='submitted']) {
+        --worklist-status-color: #428df3;
+      }
+
+      :host([state='escalated']) {
+        --worklist-status-color: #595de5;
+      }
+
+      :host([state='rejected']) {
+        --worklist-status-color: #f27429;
+      }
+
+      :host([state='ended']) {
+        --worklist-status-color: #02acae;
+      }
+
+      :host([state='aborted']) {
+        --worklist-status-color: #cb3a33;
+      }
+      [instance-container] {
+        flex: 1;
+        background-color: var(--main-section-background-color);
+        border-right: var(--border-dark-color);
+        padding: var(--padding-wide);
+        color: var(--primary-text-color);
+      }
+      [thread-container] {
+        flex: 2;
+        padding: var(--padding-wide);
+      }
+      [instance-container] div {
+        margin-bottom: var(--margin-default);
+        padding-bottom: var(--padding-default);
+        border-bottom: var(--border-dark-color);
+      }
+      [header] mwc-icon {
+        background-color: var(--worklist-status-color, tomato);
+        float: left;
+        margin-right: var(--margin-default);
+        padding: var(--padding-default);
+        border-radius: 50%;
+        float: left;
+        font-size: 1.8em;
+        color: var(--theme-white-color);
+      }
+      [header] strong {
+        display: block;
+        font: bold 22px / 1.1 var(--theme-font);
+      }
+      [header] {
+        overflow: hidden;
+        font-size: var(--fontsize-small);
+      }
+      [instance-container] div label {
+        display: inline-block;
+        margin-right: var(--margin-default);
+      }
+      span[status] {
+        width: 15px;
+        height: 15px;
+        background-color: var(--worklist-status-color, tomato);
+        display: inline-block;
+        margin-right: var(--margin-narrow);
+        border-radius: 50%;
+      }
+      [thread-container] table {
+        width: 100%;
+        border-collapse: collapse;
+      }
+      [thread-container] th {
+        background-color: rgba(var(--primary-color-rgb), 0.05);
+        border-top: var(--grid-header-top-border);
+        border-bottom: var(--grid-header-bottom-border);
+        padding: var(--grid-header-padding);
+        text-overflow: ellipsis;
+        font: var(--grid-header-font);
+        color: var(--grid-header-color);
+      }
+      [thread-container] td {
+        padding: var(--padding-narrow);
+        border-bottom: var(--grid-record-border-bottom);
+      }
+      [assignee] * {
+        vertical-align: middle;
+      }
+      [assignee] mwc-icon {
+        opacity: 0.5;
+      }
+      [subtitle] {
+        display: block;
+        margin: var(--margin-wide) 0 var(--margin-narrow) 0;
+        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: 120px;
+        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%;
+        text-align: left;
       }
     `
   ]
@@ -37,22 +218,49 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
     if (!this.activityInstance) {
       return html`<div>no activity instance info.</div>`
     }
-    const { id, name, description, input, output, assignedAt, startedAt, activityThreads, terminatedAt, updatedAt } =
-      this.activityInstance
-    const instance = this.activityInstance
+
+    const {
+      id,
+      name,
+      description,
+      input,
+      output,
+      state,
+      assignedAt,
+      startedAt,
+      approvalLine,
+      activityThreads,
+      terminatedAt,
+      updatedAt
+    } = this.activityInstance
 
     return html`
-      <div>${i18next.t('field.name')}: ${name}</div>
-      <div>${i18next.t('field.description')}: ${description}</div>
-      <div>${i18next.t('field.search-keys')}: ${this.renderSearchKeys()}</div>
-      <div>${i18next.t('field.assigned-at')}: ${assignedAt && formatter.format(new Date(assignedAt))}</div>
-      <div>${i18next.t('field.started-at')}: ${startedAt && formatter.format(new Date(startedAt))}</div>
-      <div>${i18next.t('field.terminated-at')}: ${terminatedAt && formatter.format(new Date(terminatedAt))}</div>
-      <div>${i18next.t('field.updated-at')}: ${updatedAt && formatter.format(new Date(updatedAt))}</div>
-
-      ${this.renderInOut({ ...input, ...output })}
-      <div>실행 이력</div>
-      ${activityThreads?.map(activityThread => this.renderActivityThread(activityThread))}
+      <div instance-container>
+        <div header>
+          <mwc-icon>description</mwc-icon>
+          <strong>${name}</strong>
+          ${description}
+        </div>
+        <div>
+          ${approvalLine ? html`<approval-line-view .model=${approvalLine}></approval-line-view>` : html``}
+        </div>  
+
+        <div>
+          <label>${i18next.t('label.status')}</label>
+          <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.started-at')}</label>${startedAt && formatter.format(new Date(startedAt))}</div>
+        <div><label>${i18next.t('field.updated-at')}</label>${updatedAt && formatter.format(new Date(updatedAt))}</div>
+        <div>
+          <label>${i18next.t('field.terminated-at')}</label>${terminatedAt && formatter.format(new Date(terminatedAt))}
+        </div>
+      </div>
+      <div thread-container>${activityThreads?.map(activityThread => this.renderActivityThread(activityThread))}</div>
     `
   }
 
@@ -70,16 +278,40 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
     const { name, email } = assignee || {}
 
     return html`
-      <div>${i18next.t('field.assignee')}: ${name}</div>
-      <div>${i18next.t('field.round')}: ${round}</div>
-      <div>${i18next.t('field.output')}: ${this.renderInOut(output)}</div>
-      <div>${i18next.t('field.assigned-at')}: ${assignedAt && formatter.format(new Date(assignedAt))}</div>
-      <div>${i18next.t('field.started-at')}: ${startedAt && formatter.format(new Date(startedAt))}</div>
-      <div>${i18next.t('field.terminated-at')}: ${terminatedAt && formatter.format(new Date(terminatedAt))}</div>
-
-      ${activityApprovals
-        .sort((a, b) => (a.round > b.round ? 1 : a.round < b.round ? -1 : a.order! > b.order! ? 1 : -1))
-        .map(approval => this.renderActivityApproval(approval))}
+      <div assignee>
+        <mwc-icon>account_circle</mwc-icon>
+        <strong>${name}</strong>
+      </div>
+
+      <div thread>
+        <span subtitle>${i18next.t('label.information')}</span>
+        <div>
+          <label>${i18next.t('label.status')}</label>
+          <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.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.round')}</label> ${round}</div>
+      </div>
+
+      <div>
+        <span subtitle>${i18next.t('field.output')}</span>
+        ${this.renderInOut(output || {})}
+      </div>
+      <div timeline>
+        <span subtitle>승인 검토 이력</span>
+        <ol>
+          ${activityApprovals
+            .sort((a, b) => (a.round < b.round ? 1 : a.round > b.round ? -1 : a.order! < b.order! ? 1 : -1))
+            .map(approval => this.renderActivityApproval(approval))}
+        </ol>
+      </div>
     `
   }
 
@@ -88,13 +320,15 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
     const { name, email } = approver || {}
 
     return html`
-      <div>${i18next.t('field.approver')}: ${name}</div>
-      <div>${i18next.t('field.judgment')}: ${judgment}</div>
-      <div>${i18next.t('field.comment')}: ${comment}</div>
-      <div>${i18next.t('field.round')}: ${round}</div>
-      <div>${i18next.t('field.order')}: ${order}</div>
-      <div>${i18next.t('field.started-at')}: ${createdAt && formatter.format(new Date(createdAt))}</div>
-      <div>${i18next.t('field.terminated-at')}: ${terminatedAt && formatter.format(new Date(terminatedAt))}</div>
+      <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>
     `
   }
 
@@ -122,7 +356,7 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
   }
 
   renderInOut(data) {
-    const { input, output, activity } = this.activityInstance!
+    const { activity } = this.activityInstance!
     const { model } = activity || {}
 
     return html`
@@ -159,6 +393,7 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
             id
             name
             description
+            state
             key01
             key02
             key03
@@ -189,6 +424,16 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
                 spec
               }
             }
+            approvalLine {
+              type
+              value
+              approver {
+                id
+                name
+                description
+                controlNo
+              }
+            }
             activityThreads {
               state
               transaction
@@ -208,6 +453,8 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
                 }
                 judgment
                 comment
+                createdAt
+                terminatedAt
               }
               assignedAt
               startedAt
@@ -230,5 +477,6 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
     })
 
     this.activityInstance = response.data.activityInstance
+    this.setAttribute('state', this.activityInstance?.state || '')
   }
 }

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

@@ -172,8 +172,9 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
         return this.customElementContent()
       case 'page':
       case 'external':
-      default:
         return html``
+      default:
+        return this.generatedContent()
     }
   }
 

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

@@ -1,5 +1,6 @@
-import '@operato/property-editor/ox-properties-dynamic-view.js'
 import '@operato/board/ox-board-viewer.js'
+import '../../components/activity-thread-ribon.js'
+import './activity-thread-view.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -32,6 +33,7 @@ const ActivityThreadFetchResult = `\
     description
     state
     activity {
+      id
       model {
         name
         description
@@ -85,7 +87,6 @@ export class ActivityThreadViewPage extends connect(store)(localize(i18next)(Pag
         flex-direction: column;
 
         width: 100%;
-        padding: 5px;
         overflow: auto;
       }
 
@@ -94,6 +95,10 @@ export class ActivityThreadViewPage extends connect(store)(localize(i18next)(Pag
         height: 100%;
       }
 
+      activity-thread-view {
+        padding: var(--padding-default);
+      }
+
       #custom-content {
         flex: 1;
       }
@@ -107,13 +112,18 @@ export class ActivityThreadViewPage extends connect(store)(localize(i18next)(Pag
     return {
       title: this.lifecycle?.params?.['title'] || i18next.t('title.activity'),
       help: 'worklist/activity',
-      actions: [],
-      activityThread: this.activityThread
+      actions: []
+      // activityThread: this.activityThread
     }
   }
 
   render() {
-    return html` ${this.activityContent()}`
+    const activityThread = this.activityThread
+
+    return html` ${activityThread
+      ? html`<activity-thread-ribon .activityThread=${activityThread}></activity-thread-ribon>`
+      : html``}
+    ${this.activityContent()}`
   }
 
   activityContent() {
@@ -128,8 +138,9 @@ export class ActivityThreadViewPage extends connect(store)(localize(i18next)(Pag
         return this.customElementContent()
       case 'page':
       case 'external':
-      default:
         return html``
+      default:
+        return this.generatedContent()
     }
   }
 
@@ -169,43 +180,9 @@ export class ActivityThreadViewPage extends connect(store)(localize(i18next)(Pag
   }
 
   generatedContent() {
-    var { output, activityInstance } = this.activityThread || {}
-    var { input } = activityInstance || {}
-
-    const inputSpec = this.getInputSpec()
-    const outputSpec = this.getOutputSpec()
-
-    if (!output) {
-      output = inputSpec
-        .filter(item => item.inout === 'inout')
-        .reduce((inout, item) => {
-          inout[item.name] = input[item.name]
-          return inout
-        }, {})
-    }
-
     return keyed(
       this.activityThread.id,
-      html`
-        <fieldset>
-          <legend>Input</legend>
-          <ox-properties-dynamic-view
-            data-name="input"
-            .props=${inputSpec}
-            .value=${input}
-          ></ox-properties-dynamic-view>
-        </fieldset>
-
-        <fieldset>
-          <legend>Output</legend>
-          <ox-properties-dynamic-view
-            data-name="output"
-            .props=${outputSpec}
-            .value=${output}
-            @property-change=${e => (this.activityThread.output = e.currentTarget.value)}
-          ></ox-properties-dynamic-view>
-        </fieldset>
-      `
+      html` <activity-thread-view .activityThreadId=${this.activityThread.id}></activity-thread-view> `
     )
   }