npm - @things-factory/worklist - Versions diffs - 6.1.61 → 6.1.63 - Mend

@things-factory/worklist 6.1.61 → 6.1.63

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

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

@@ -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 CHANGED Viewed

@@ -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-instance/activity-instance-view.ts CHANGED Viewed

@@ -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;
+      }
+      [etc] div {
+        border-bottom: var(--border-dark-color);
+        padding: var(--padding-narrow);
+        text-align: right;
+        overflow: hidden;
+      }
+      [etc] div label {
+        float: left;
+        width: 25%;
+        text-align: left;
       }
     `
   ]
@@ -37,22 +218,48 @@ 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 {
+      id,
+      name,
+      description,
+      input,
+      output,
+      state,
+      assignedAt,
+      startedAt,
+      approvalLine,
+      activityThreads,
+      terminatedAt,
+      updatedAt
+    } = this.activityInstance
     const instance = 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>
+        ${approvalLine ? html`<approval-line-view .model=${approvalLine}></approval-line-view>` : html``}
+        <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 +277,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 etc>
+        <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 +319,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 +355,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 +392,7 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
             id
             name
             description
+            state
             key01
             key02
             key03
@@ -189,6 +423,16 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
                 spec
               }
             }
+            approvalLine {
+              type
+              value
+              approver {
+                id
+                name
+                description
+                controlNo
+              }
+            }
             activityThreads {
               state
               transaction
@@ -208,6 +452,8 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
                 }
                 judgment
                 comment
+                createdAt
+                terminatedAt
               }
               assignedAt
               startedAt
@@ -230,5 +476,6 @@ export class ActivityInstanceView extends localize(i18next)(LitElement) {
     })
     this.activityInstance = response.data.activityInstance
+    this.setAttribute('state', this.activityInstance?.state || '')
   }
 }

package/client/pages/todo/done-list-calendar-page.ts CHANGED Viewed

@@ -80,7 +80,7 @@ export class DoneListCalendarPage extends connect(store)(PageView) {
             const color = ['black', 'darkgray', 'orange', 'red'][priority || 0]
             const href =
               type == 'activity-thread'
-                ? `activity-thread-view/${id}?title=${name}`
+                ? `activity-thread/${id}?title=${name}`
                 : `activity-approval/${id}?title=${name}`
             const at = new Date(date).toLocaleTimeString([], {
               hourCycle: 'h23',

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

@@ -354,6 +354,6 @@ export class DoneListPage extends connect(store)(localize(i18next)(PageView)) {
   }
   openActivityThreadViewPage(activityThread) {
-    navigate(`activity-thread-view/${activityThread.id}?title=${activityThread.name}`)
+    navigate(`activity-thread/${activityThread.id}?title=${activityThread.name}`)
   }
 }

package/dist-client/components/activity-instance-ribon.js CHANGED Viewed

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

package/dist-client/components/activity-instance-ribon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"activity-instance-ribon.js","sourceRoot":"","sources":["../../client/components/activity-instance-ribon.ts"],"names":[],"mappings":";AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,wDAAwD,CAAA;AAC/D,OAAO,2EAA2E,CAAA;AAClF,OAAO,oDAAoD,CAAA;AAE3D,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAGxC,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAjE;;~~QAwGuB~~,qBAAgB,GAAQ,EAAE,CAAA;~~IA0CxD~~,CAAC;~~IAxCC~~,MAAM;QACJ,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAA;QAC5F,MAAM,EAAE,YAAY,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;QAEvC,OAAO,IAAI,CAAA;;;mBAGI,GAAG,EAAE;YACZ,aAAa,CAAC,uBAAuB,EAAE;gBACrC,QAAQ,EAAE,IAAI,CAAA;oCACQ,IAAI,CAAC,gBAAgB;wBACjC,KAAK;qDACwB;aACxC,CAAC,CAAA;QACJ,CAAC~~;;;UAGD~~,WAAW;;QAEb,YAAY,IAAI,OAAO,IAAI,QAAQ;YACnC,CAAC,CAAC,IAAI,CAAA;;gBAEE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;sBACrB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI;;WAEzB;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA,+BAA+B,YAAY,yBAAyB,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;;mBAErF,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,KAAK,CAAC;KACxD,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE;YACnC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAA;YAEvC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;SAClC;IACH,CAAC;;AAhJM,4BAAM,GAAG;IACd,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmGF~~;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+DAA2B;~~AAxG3C~~,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CAkJjC;SAlJY,qBAAqB","sourcesContent":["import '@material/mwc-button'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization/dist-client/component/approval-line-brief.js'\nimport '../templates/activity-instance-context-template.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { toggleOverlay } from '@operato/layout'\n\n@customElement('activity-instance-ribon')\nexport class ActivityInstanceRibon extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n background-color: var(--worklist-status-color);\n color: var(--theme-white-color);\n align-items: center;\n min-height: 44px;\n --fontsize-small: 12px;\n }\n\n div {\n border-left: var(--border-dark-color);\n padding: var(--padding-narrow) var(--padding-default);\n align-self: center;\n }\n\n :host([state='draft']) {\n --worklist-status-color: #5f7184;\n }\n\n :host([state='issued']) {\n --worklist-status-color: #56af45;\n }\n\n :host([state='pending-assignment']) {\n --worklist-status-color: #8654b0;\n }\n\n :host([state='assigned']) {\n --worklist-status-color: #428df3;\n }\n\n :host([state='started']) {\n --worklist-status-color: #595de5;\n }\n\n :host([state='pending']) {\n --worklist-status-color: #f27429;\n }\n\n :host([state='ended']) {\n --worklist-status-color: #02acae;\n }\n\n :host([state='aborted']) {\n --worklist-status-color: #cb3a33;\n }\n\n mwc-icon {\n font-size: 24px;\n }\n\n [desc] {\n flex: 2;\n font-size: var(--fontsize-small);\n }\n\n [desc] * {\n vertical-align: middle;\n }\n\n [assignee] {\n text-align: center;\n font-size: var(--fontsize-small);\n line-height: 1.3;\n }\n\n [assignee] span {\n display: block;\n font-size: var(--fontsize-large);\n font-weight: bold;\n }\n\n approval-line-brief {\n background-color: var(--worklist-status-color);\n flex: 2;\n font-size: var(--fontsize-small);\n }\n\n [state] {\n text-align: right;\n font-size: var(--fontsize-small);\n }\n\n @media only screen and (max-width: 460px) {\n :host {\n flex-direction: column;\n }\n div {\n border-left: none;\n border-bottom: var(--border-dark-color);\n }\n [assignee] {\n display: none;\n }\n mwc-icon {\n padding: 0;\n }\n }\n `\n ]\n\n @property({ type: Object }) activityInstance: any = {}\n\n render() {\n const { description, state, assignee, approvalLine, activity } = this.activityInstance \|\| {}\n const { startingType } = activity \|\| {}\n\n return html`\n <div desc>\n <mwc-icon\n @click=${() => {\n toggleOverlay('activity-info-overlay', {\n template: html`<activity-instance-context-template\n .activityInstance=${this.activityInstance}\n state=${state}\n ></activity-instance-context-template>`\n })\n }}\n >description</mwc-icon\n >\n ${description}\n </div>\n ${startingType == 'issue' && assignee\n ? html`\n <div assignee>\n ${i18next.t('field.assignee')}\n <span>${assignee?.name} </span>\n </div>\n `\n : html``}\n ${approvalLine ? html`<approval-line-brief .model=${approvalLine}></approval-line-brief>` : html``}\n\n <div state>${i18next.t('label.activity-state-' + state)}</div>\n `\n }\n\n updated(changes) {\n if (changes.has('activityInstance')) {\n const { state } = this.activityInstance\n\n this.setAttribute('state', state)\n }\n }\n}\n"]}
1	+ {"version":3,"file":"activity-instance-ribon.js","sourceRoot":"","sources":["../../client/components/activity-instance-ribon.ts"],"names":[],"mappings":";AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,wDAAwD,CAAA;AAC/D,OAAO,2EAA2E,CAAA;AAClF,OAAO,oDAAoD,CAAA;AAE3D,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAGxC,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAjE;;QAyGuB,qBAAgB,GAAQ,EAAE,CAAA;IAyCxD,CAAC;IAvCC,MAAM;QACJ,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAA;QAC5F,MAAM,EAAE,YAAY,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;QAEvC,OAAO,IAAI,CAAA;;;mBAGI,GAAG,EAAE;YACZ,aAAa,CAAC,uBAAuB,EAAE;gBACrC,QAAQ,EAAE,IAAI,CAAA;oCACQ,IAAI,CAAC,gBAAgB;wBACjC,KAAK;qDACwB;aACxC,CAAC,CAAA;QACJ,CAAC;;UAED,WAAW;;QAEb,YAAY,IAAI,OAAO,IAAI,QAAQ;YACnC,CAAC,CAAC,IAAI,CAAA;;gBAEE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;sBACrB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI;;WAEzB;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA,+BAA+B,YAAY,yBAAyB,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;;mBAErF,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,KAAK,CAAC;KACxD,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE;YACnC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAA;YAEvC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;SAClC;IACH,CAAC;;AAhJM,4BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoGF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+DAA2B;AAzG3C,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CAkJjC;SAlJY,qBAAqB","sourcesContent":["import '@material/mwc-button'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization/dist-client/component/approval-line-brief.js'\nimport '../templates/activity-instance-context-template.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { toggleOverlay } from '@operato/layout'\n\n@customElement('activity-instance-ribon')\nexport class ActivityInstanceRibon extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n background-color: var(--worklist-status-color);\n color: var(--theme-white-color);\n align-items: center;\n min-height: 44px;\n --fontsize-small: 12px;\n }\n\n div {\n border-left: var(--border-dark-color);\n padding: var(--padding-narrow) var(--padding-default);\n align-self: center;\n }\n\n :host([state='draft']) {\n --worklist-status-color: #5f7184;\n }\n\n :host([state='issued']) {\n --worklist-status-color: #56af45;\n }\n\n :host([state='pending-assignment']) {\n --worklist-status-color: #8654b0;\n }\n\n :host([state='assigned']) {\n --worklist-status-color: #428df3;\n }\n\n :host([state='started']) {\n --worklist-status-color: #595de5;\n }\n\n :host([state='pending']) {\n --worklist-status-color: #f27429;\n }\n\n :host([state='ended']) {\n --worklist-status-color: #02acae;\n }\n\n :host([state='aborted']) {\n --worklist-status-color: #cb3a33;\n }\n\n mwc-icon {\n font-size: 24px;\n }\n\n [desc] {\n flex: 2;\n font-size: var(--fontsize-small);\n }\n\n [desc] * {\n vertical-align: middle;\n }\n\n [assignee] {\n text-align: center;\n font-size: var(--fontsize-small);\n line-height: 1.3;\n }\n\n [assignee] span {\n display: block;\n font-size: var(--fontsize-large);\n font-weight: bold;\n }\n\n approval-line-brief {\n background-color: var(--worklist-status-color);\n flex: 2;\n font-size: var(--fontsize-small);\n }\n\n [state] {\n text-align: right;\n font-size: var(--fontsize-small);\n font-weight:bold;\n }\n\n @media only screen and (max-width: 460px) {\n :host {\n flex-direction: column;\n }\n div {\n border-left: none;\n border-bottom: var(--border-dark-color);\n }\n [assignee] {\n display: none;\n }\n mwc-icon {\n padding: 0;\n }\n }\n `\n ]\n\n @property({ type: Object }) activityInstance: any = {}\n\n render() {\n const { description, state, assignee, approvalLine, activity } = this.activityInstance \|\| {}\n const { startingType } = activity \|\| {}\n\n return html`\n <div desc>\n <mwc-icon\n @click=${() => {\n toggleOverlay('activity-info-overlay', {\n template: html`<activity-instance-context-template\n .activityInstance=${this.activityInstance}\n state=${state}\n ></activity-instance-context-template>`\n })\n }}\n >description</mwc-icon>\n ${description}\n </div>\n ${startingType == 'issue' && assignee\n ? html`\n <div assignee>\n ${i18next.t('field.assignee')}\n <span>${assignee?.name} </span>\n </div>\n `\n : html``}\n ${approvalLine ? html`<approval-line-brief .model=${approvalLine}></approval-line-brief>` : html``}\n\n <div state>${i18next.t('label.activity-state-' + state)}</div>\n `\n }\n\n updated(changes) {\n if (changes.has('activityInstance')) {\n const { state } = this.activityInstance\n\n this.setAttribute('state', state)\n }\n }\n}\n"]}

package/dist-client/components/activity-starter-form.js CHANGED Viewed

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

package/dist-client/components/activity-starter-form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"activity-starter-form.js","sourceRoot":"","sources":["../../client/components/activity-starter-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon-button'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@material/mwc-button'\nimport '@things-factory/organization'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { navigate } from '@operato/shell'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify } from '@operato/layout'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('activity-starter-form')\nexport class ActivityStarterForm extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: #fff;\n }\n\n content {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: var(--padding-default);\n gap: 10px;\n overflow: auto;\n }\n\n content > div {\n display: flex;\n flex-direction: column;\n }\n\n content span {\n color: navy;\n }\n\n #description {\n height: 60px;\n }\n\n .button-container {\n display: flex;\n margin-left: auto;\n padding: var(--padding-default);\n }\n\n mwc-button {\n margin-left: var(--margin-default);\n }\n `\n ]\n\n @property({ type: String }) activityId?: string\n\n @state() activity: any = {}\n @state() activityInstance: any = {}\n\n render() {\n var { thumbnail, startingType } = this.activity \|\| {}\n var { name, description } = this.activityInstance\n\n return html`\n <content>\n <div>\n <span\n >업무의 타이틀과 설명을 작성해서 초안저장을 클릭하시면, 업무 초안이 생성되고 편집할 수 있는 페이지로\n 이동합니다.</span\n >\n\n <span\n >이렇게 생성된 업무 초안은 '작성중인 업무' 리스트에서 찾아볼 수 있으며,\n '${startingType == 'issue' ? '이슈' : '게시'}' 전까지 언제든지 수정할 수 있습니다.</span\n >\n </div>\n <div>\n <label for=\"name\">${i18next.t('label.title')}</label>\n <input\n id=\"name\"\n .value=${name \|\| this.activity?.name}\n @change=${e => (this.activityInstance.name = e.currentTarget.value)}\n />\n </div>\n\n <div>\n <label for=\"description\">${i18next.t('label.description')}</label>\n <textarea\n id=\"description\"\n .value=${description \|\| this.activity?.description}\n @change=${e => {\n this.activityInstance.description = e.currentTarget.value\n }}\n ></textarea>\n </div>\n\n <img src=${thumbnail} />\n </content>\n\n <div class=\"button-container\">\n <mwc-button raised @click=${this.draftActivityInstance.bind(this)}>${i18next.t('button.draft')}</mwc-button>\n <mwc-button raised @click=${e => history.back()}>${i18next.t('button.close')}</mwc-button>\n </div>\n `\n }\n\n firstUpdated() {\n this.fetchActivity(this.activityId)\n }\n\n async fetchActivity(id) {\n const response = await client.query({\n query: gql`\n query activity($id: String!) {\n activity(id: $id) {\n id\n name\n description\n state\n multiple\n startingType\n assignees {\n type\n value\n assignee {\n id\n name\n description\n controlNo\n }\n }\n approvalLine {\n type\n value\n approver {\n id\n name\n description\n controlNo\n }\n }\n thumbnail\n model {\n name\n description\n active\n tag\n inout\n type\n unit\n options\n quantifier\n spec\n }\n }\n }\n `,\n variables: {\n id\n }\n })\n\n this.activity = response.data.activity\n }\n\n async draftActivityInstance() {\n var { id: activityId } = this.activity\n var { id, name, description, priority, threadsMin, threadsMax, dueAt, input, assignees, approvalLine } =\n this.activityInstance\n\n name \|\|= this.activity.name\n description \|\|= this.activity.description\n assignees \|\|= this.activity.assignees\n approvalLine \|\|= this.activity.approvalLine\n\n var activityInstance = {\n id,\n activityId,\n name,\n description,\n priority,\n threadsMax,\n threadsMin,\n dueAt,\n input,\n assignees,\n approvalLine\n }\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($activityInstance: ActivityInstanceDraft!) {\n draftActivityInstance(activityInstance: $activityInstance) {\n id\n name\n description\n input\n output\n state\n assignees {\n type\n value\n assignee {\n id\n name\n description\n controlNo\n }\n }\n approvalLine {\n type\n value\n approver {\n id\n name\n description\n controlNo\n }\n }\n threadsMin\n threadsMax\n }\n }\n `,\n variables: {\n activityInstance\n }\n })\n\n if (!response.errors) {\n this.activityInstance = response.data.draftActivityInstance\n notify({\n message: i18next.t('text.info_x_successfully', {\n x: `${i18next.t('label.activity-instance')} ${i18next.t('text.draft')}`\n })\n })\n\n this.openActivityInstanceStart(this.activityInstance)\n }\n }\n\n openActivityInstanceStart(activityInstance) {\n navigate(`activity-instance-start/${activityInstance.id}?title=${activityInstance.name}`)\n }\n}\n"]}
1	+ {"version":3,"file":"activity-starter-form.js","sourceRoot":"","sources":["../../client/components/activity-starter-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon-button'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@material/mwc-button'\nimport '@things-factory/organization'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { navigate } from '@operato/shell'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify } from '@operato/layout'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('activity-starter-form')\nexport class ActivityStarterForm extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: var(--main-section-background-color);\n }\n\n content {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: var(--padding-default);\n gap: 10px;\n overflow: auto;\n }\n\n content > div {\n display: flex;\n flex-direction: column;\n color: var(--secondary-color);\n }\n\n content label{\n font:var(--label-font)\n }\n content input, content textarea{\n border-radius:var(--border-radius);\n border:var(--border-dark-color);\n padding:var(--input-padding);\n margin:var(--input-margin);\n font:var(--input-font);\n }\n\n content [desc]{\n color: var(--secondary-text-color);\n font-size:0.9em\n }\n\n #description {\n height: 60px;\n }\n\n .button-container {\n display: flex;\n margin-left: auto;\n padding: var(--padding-default);\n }\n\n mwc-button {\n margin-left: var(--margin-default);\n }\n `\n ]\n\n @property({ type: String }) activityId?: string\n\n @state() activity: any = {}\n @state() activityInstance: any = {}\n\n render() {\n var { thumbnail, startingType } = this.activity \|\| {}\n var { name, description } = this.activityInstance\n\n return html`\n <content>\n <div desc>\n <span\n >업무의 타이틀과 설명을 작성해서 초안저장을 클릭하시면, 업무 초안이 생성되고 편집할 수 있는 페이지로\n 이동합니다.</span\n >\n\n <span\n >이렇게 생성된 업무 초안은 '작성중인 업무' 리스트에서 찾아볼 수 있으며,\n '${startingType == 'issue' ? '이슈' : '게시'}' 전까지 언제든지 수정할 수 있습니다.</span\n >\n </div>\n <div>\n <label for=\"name\">${i18next.t('label.title')}</label>\n <input\n id=\"name\"\n .value=${name \|\| this.activity?.name}\n @change=${e => (this.activityInstance.name = e.currentTarget.value)}\n />\n </div>\n\n <div>\n <label for=\"description\">${i18next.t('label.description')}</label>\n <textarea\n id=\"description\"\n .value=${description \|\| this.activity?.description}\n @change=${e => {\n this.activityInstance.description = e.currentTarget.value\n }}\n ></textarea>\n </div>\n\n <img src=${thumbnail} />\n </content>\n\n <div class=\"button-container\">\n <mwc-button raised @click=${this.draftActivityInstance.bind(this)}>${i18next.t('button.draft')}</mwc-button>\n <mwc-button raised @click=${e => history.back()}>${i18next.t('button.close')}</mwc-button>\n </div>\n `\n }\n\n firstUpdated() {\n this.fetchActivity(this.activityId)\n }\n\n async fetchActivity(id) {\n const response = await client.query({\n query: gql`\n query activity($id: String!) {\n activity(id: $id) {\n id\n name\n description\n state\n multiple\n startingType\n assignees {\n type\n value\n assignee {\n id\n name\n description\n controlNo\n }\n }\n approvalLine {\n type\n value\n approver {\n id\n name\n description\n controlNo\n }\n }\n thumbnail\n model {\n name\n description\n active\n tag\n inout\n type\n unit\n options\n quantifier\n spec\n }\n }\n }\n `,\n variables: {\n id\n }\n })\n\n this.activity = response.data.activity\n }\n\n async draftActivityInstance() {\n var { id: activityId } = this.activity\n var { id, name, description, priority, threadsMin, threadsMax, dueAt, input, assignees, approvalLine } =\n this.activityInstance\n\n name \|\|= this.activity.name\n description \|\|= this.activity.description\n assignees \|\|= this.activity.assignees\n approvalLine \|\|= this.activity.approvalLine\n\n var activityInstance = {\n id,\n activityId,\n name,\n description,\n priority,\n threadsMax,\n threadsMin,\n dueAt,\n input,\n assignees,\n approvalLine\n }\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($activityInstance: ActivityInstanceDraft!) {\n draftActivityInstance(activityInstance: $activityInstance) {\n id\n name\n description\n input\n output\n state\n assignees {\n type\n value\n assignee {\n id\n name\n description\n controlNo\n }\n }\n approvalLine {\n type\n value\n approver {\n id\n name\n description\n controlNo\n }\n }\n threadsMin\n threadsMax\n }\n }\n `,\n variables: {\n activityInstance\n }\n })\n\n if (!response.errors) {\n this.activityInstance = response.data.draftActivityInstance\n notify({\n message: i18next.t('text.info_x_successfully', {\n x: `${i18next.t('label.activity-instance')} ${i18next.t('text.draft')}`\n })\n })\n\n this.openActivityInstanceStart(this.activityInstance)\n }\n }\n\n openActivityInstanceStart(activityInstance) {\n navigate(`activity-instance-start/${activityInstance.id}?title=${activityInstance.name}`)\n }\n}\n"]}

package/dist-client/pages/activity-instance/activity-instance-view.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import '@things-factory/organization/dist-client/component/approval-line-view.js';
 import { LitElement } from 'lit';
 import { ActivityInstance } from '../../types/activity-instance';
 import { ActivityThread } from '../../types/activity-thread';