@things-factory/worklist 6.1.54 → 6.1.56

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

@@ -0,0 +1,158 @@
+import '@material/mwc-button'
+import '@operato/property-editor/ox-properties-dynamic-view.js'
+import '@things-factory/organization/dist-client/component/approval-line-brief.js'
+import '../templates/activity-approval-context-template.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { toggleOverlay } from '@operato/layout'
+
+@customElement('activity-approval-ribon')
+export class ActivityApprovalRibon extends localize(i18next)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        background-color: var(--worklist-status-color);
+        color: var(--theme-white-color);
+        align-items: center;
+        min-height: 44px;
+        --fontsize-small: 12px;
+      }
+
+      div {
+        border-left: var(--border-dark-color);
+        padding: var(--padding-narrow) var(--padding-default);
+        align-self: center;
+      }
+
+      :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;
+      }
+
+      mwc-icon {
+        font-size: 24px;
+      }
+
+      [desc] {
+        flex: 2;
+        font-size: var(--fontsize-small);
+      }
+
+      [desc] * {
+        vertical-align: middle;
+      }
+
+      [assignee] {
+        text-align: center;
+        font-size: var(--fontsize-small);
+        line-height: 1.3;
+      }
+
+      [assignee] span {
+        display: block;
+        font-size: var(--fontsize-large);
+        font-weight: bold;
+      }
+
+      approval-line-brief {
+        background-color: var(--worklist-status-color);
+        flex: 2;
+        font-size: var(--fontsize-small);
+      }
+
+      @media only screen and (max-width: 460px) {
+        :host {
+          flex-direction: column;
+        }
+        div {
+          border-left: none;
+          border-bottom: var(--border-dark-color);
+        }
+        [assignee] {
+          display: none;
+        }
+        mwc-icon {
+          padding: 0;
+        }
+      }
+    `
+  ]
+
+  @property({ type: Object }) activityApproval: any
+
+  render() {
+    const { activityInstance, state } = this.activityApproval?.activityThread || {}
+    const { description, assignee, approvalLine, activity } = activityInstance || {}
+    const { startingType } = activity || {}
+
+    return html`
+      <div desc>
+        <mwc-icon
+          @click=${() => {
+            toggleOverlay('activity-info-overlay', {
+              template: html`<activity-approval-context-template
+                .activityApproval=${this.activityApproval}
+                state=${state}
+              ></activity-approval-context-template>`
+            })
+          }}
+          >description</mwc-icon
+        >
+        ${description}
+      </div>
+      ${startingType == 'issue' && assignee
+        ? html`
+            <div assignee>
+              ${i18next.t('field.assignee')}
+              <span>${assignee?.name}&nbsp;</span>
+            </div>
+          `
+        : html``}
+      ${approvalLine
+        ? html`<approval-line-brief
+            .model=${approvalLine}
+            .current=${this.activityApproval.order}
+          ></approval-line-brief>`
+        : html``}
+    `
+  }
+
+  updated(changes) {
+    if (changes.has('activityApproval')) {
+      const { state } = this.activityApproval.activityThread
+
+      this.setAttribute('state', state)
+    }
+  }
+}

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

@@ -1,5 +1,6 @@
 import '@material/mwc-button'
 import '@operato/property-editor/ox-properties-dynamic-view.js'
+import '@things-factory/organization/dist-client/component/approval-line-brief.js'
 import '../templates/activity-instance-context-template.js'
 
 import { css, html, LitElement } from 'lit'
@@ -16,6 +17,8 @@ export class ActivityInstanceRibon extends localize(i18next)(LitElement) {
         display: flex;
         background-color: var(--worklist-status-color);
         color: var(--theme-white-color);
+        align-items: center;
+        min-height: 44px;
         --fontsize-small: 12px;
       }
 
@@ -61,11 +64,11 @@ export class ActivityInstanceRibon extends localize(i18next)(LitElement) {
         font-size: 24px;
       }
 
-      [desc],
-      [flow] {
+      [desc] {
         flex: 2;
         font-size: var(--fontsize-small);
       }
+
       [desc] * {
         vertical-align: middle;
       }
@@ -82,63 +85,10 @@ export class ActivityInstanceRibon extends localize(i18next)(LitElement) {
         font-weight: bold;
       }
 
-      [flow] ul {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        display: flex;
-      }
-
-      [flow] li {
-        width: 85px;
-        text-align: center;
-        color: rgba(255, 255, 255, 0.7);
-      }
-
-      [flow] span:before {
-        content: '';
-        height: 2px;
-        width: 70px;
-        display: block;
-        position: absolute;
-        margin-left: -70px;
-        margin-top: 6px;
-        background-color: rgba(0, 0, 0, 0.4);
-      }
-
-      [flow] span {
-        display: block;
-        width: 15px;
-        height: 15px;
-        margin: auto;
-        background-color: rgba(0, 0, 0, 0.4);
-        border-radius: 50%;
-        color: var(--theme-white-color);
-        line-height: 1.2;
-      }
-
-      [flow] [past] span {
-        background-color: rgba(255, 255, 255, 0.9);
-        color: var(--primary-text-color);
-      }
-
-      [flow] [now] span {
-        background-color: #84d600;
-        color: var(--theme-white-color);
-      }
-
-      [flow] [now] {
-        font-weight: bold;
-        color: var(--theme-white-color);
-      }
-
-      [flow] [past] span:before,
-      [flow] [now] span:before {
-        background-color: rgba(255, 255, 255, 0.9);
-      }
-
-      [flow] li:first-child span:before {
-        display: none;
+      approval-line-brief {
+        background-color: var(--worklist-status-color);
+        flex: 2;
+        font-size: var(--fontsize-small);
       }
 
       @media only screen and (max-width: 460px) {
@@ -160,34 +110,10 @@ export class ActivityInstanceRibon extends localize(i18next)(LitElement) {
   ]
 
   @property({ type: Object }) activityInstance: any = {}
-  // @property({ type: Array }) activityThreads: any
-
-  // @state() picked: boolean = false
 
   render() {
-    const {
-      id,
-      name,
-      description,
-      input,
-      state,
-      assignee,
-      threadsMin = 0,
-      threadsMax = 0,
-      activity
-    } = this.activityInstance || {}
-    const { startingType, model, thumbnail } = activity || {}
-
-    // const inputSpec = (model || [])
-    //   .filter(item => item.inout === 'in' || item.inout === 'inout')
-    //   .map(item => {
-    //     return {
-    //       ...item,
-    //       label: item.name
-    //     }
-    //   })
-
-    // const pickable = !this.picked && this.activityThreads?.length < threadsMax
+    const { description, state, assignee, approvalLine, activity } = this.activityInstance || {}
+    const { startingType } = activity || {}
 
     return html`
       <div desc>
@@ -204,22 +130,15 @@ export class ActivityInstanceRibon extends localize(i18next)(LitElement) {
         >
         ${description}
       </div>
-      ${startingType == 'issue'
+      ${startingType == 'issue' && assignee
         ? html`
             <div assignee>
-              ${i18next.t('label.assignee')}
-              <span>${assignee?.name}</span>
+              ${i18next.t('field.assignee')}
+              <span>${assignee?.name}&nbsp;</span>
             </div>
           `
         : html``}
-
-      <div flow>
-        <ul>
-          <li past><span>1</span>myself</li>
-          <li now><span>2</span>경리실장</li>
-          <li><span>3</span>사장님</li>
-        </ul>
-      </div>
+      ${approvalLine ? html`<approval-line-brief .model=${approvalLine}></approval-line-brief>` : html``}
     `
   }
 

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

@@ -0,0 +1,153 @@
+import '@material/mwc-button'
+import '@operato/property-editor/ox-properties-dynamic-view.js'
+import '@things-factory/organization/dist-client/component/approval-line-brief.js'
+import '../templates/activity-thread-context-template.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { toggleOverlay } from '@operato/layout'
+
+@customElement('activity-thread-ribon')
+export class ActivityThreadRibon extends localize(i18next)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        background-color: var(--worklist-status-color);
+        color: var(--theme-white-color);
+        align-items: center;
+        min-height: 44px;
+        --fontsize-small: 12px;
+      }
+
+      div {
+        border-left: var(--border-dark-color);
+        padding: var(--padding-narrow) var(--padding-default);
+        align-self: center;
+      }
+
+      :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;
+      }
+
+      mwc-icon {
+        font-size: 24px;
+      }
+
+      [desc] {
+        flex: 2;
+        font-size: var(--fontsize-small);
+      }
+
+      [desc] * {
+        vertical-align: middle;
+      }
+
+      [assignee] {
+        text-align: center;
+        font-size: var(--fontsize-small);
+        line-height: 1.3;
+      }
+
+      [assignee] span {
+        display: block;
+        font-size: var(--fontsize-large);
+        font-weight: bold;
+      }
+
+      approval-line-brief {
+        background-color: var(--worklist-status-color);
+        flex: 2;
+        font-size: var(--fontsize-small);
+      }
+
+      @media only screen and (max-width: 460px) {
+        :host {
+          flex-direction: column;
+        }
+        div {
+          border-left: none;
+          border-bottom: var(--border-dark-color);
+        }
+        [assignee] {
+          display: none;
+        }
+        mwc-icon {
+          padding: 0;
+        }
+      }
+    `
+  ]
+
+  @property({ type: Object }) activityThread: any
+
+  render() {
+    const { state, activityInstance } = this.activityThread
+    const { description, assignee, approvalLine, activity } = activityInstance || {}
+    const { startingType } = activity || {}
+
+    return html`
+      <div desc>
+        <mwc-icon
+          @click=${() => {
+            toggleOverlay('activity-info-overlay', {
+              template: html`<activity-thread-context-template
+                .activityThread=${this.activityThread}
+                state=${state}
+              ></activity-thread-context-template>`
+            })
+          }}
+          >description</mwc-icon
+        >
+        ${description}
+      </div>
+      ${startingType == 'issue' && assignee
+        ? html`
+            <div assignee>
+              ${i18next.t('field.assignee')}
+              <span>${assignee?.name}&nbsp;</span>
+            </div>
+          `
+        : html``}
+      ${approvalLine ? html`<approval-line-brief .model=${approvalLine}></approval-line-brief>` : html``}
+    `
+  }
+
+  updated(changes) {
+    if (changes.has('activityThread')) {
+      const { state } = this.activityThread
+
+      this.setAttribute('state', state)
+    }
+  }
+}

package/client/pages/activity-approval/activity-approval-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-approval-ribon.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -96,7 +97,6 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
         position: relative;
 
         width: 100%;
-        padding: 5px;
         overflow: auto;
       }
 
@@ -136,6 +136,8 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
   @state() activityThread: any
   @state() board: any
 
+  @query('textarea') commentInput!: HTMLTextAreaElement
+
   get context() {
     const judgment = this.activityApproval?.judgment
 
@@ -162,13 +164,14 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
               action: this.saveActivityApproval.bind(this),
               ...CommonButtonStyles.save
             }
-          ],
-      activityApproval: this.activityApproval
+          ]
+      // activityApproval: this.activityApproval
     }
   }
 
   render() {
     return html`
+      <activity-approval-ribon .activityApproval=${this.activityApproval}></activity-approval-ribon>
       ${this.activityContent()}
       <div comment>
         <textarea
@@ -356,6 +359,18 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
   async rejectActivityApproval() {
     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!) {
@@ -387,6 +402,18 @@ 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!) {

package/client/pages/activity-instance/activity-instance-start-page.ts

@@ -66,8 +66,8 @@ export class ActivityInstanceStartPage extends connect(store)(localize(i18next)(
           action: this.issueActivityInstance.bind(this),
           ...CommonButtonStyles.submit
         }
-      ].filter(Boolean /* truthy only */),
-      activityInstance: this.activityInstance
+      ].filter(Boolean /* truthy only */)
+      // activityInstance: this.activityInstance
     }
   }
 

package/client/pages/activity-thread/activity-thread-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 gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -86,7 +87,6 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
         flex-direction: column;
 
         width: 100%;
-        padding: 5px;
         overflow: auto;
       }
 
@@ -146,13 +146,18 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
           action: this._abortActivityThread.bind(this),
           ...CommonButtonStyles.cancel
         }
-      ].filter(Boolean /* truthy only */),
-      activityThread: this.activityThread
+      ].filter(Boolean /* truthy only */)
+      // 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() {