@things-factory/worklist 6.1.52 → 6.1.54

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

@@ -0,0 +1,224 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/mwc-button';
+import '@operato/property-editor/ox-properties-dynamic-view.js';
+import '../templates/activity-instance-context-template.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { toggleOverlay } from '@operato/layout';
+let ActivityInstanceRibon = class ActivityInstanceRibon extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.activityInstance = {};
+    }
+    // @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
+        return html `
+      <div desc>
+        <mwc-icon
+          @click=${() => {
+            toggleOverlay('activity-info-overlay', {
+                template: html `<activity-instance-context-template
+                .activityInstance=${this.activityInstance}
+                state=${state}
+              ></activity-instance-context-template>`
+            });
+        }}
+          >description</mwc-icon
+        >
+        ${description}
+      </div>
+      ${startingType == 'issue'
+            ? html `
+            <div assignee>
+              ${i18next.t('label.assignee')}
+              <span>${assignee === null || assignee === void 0 ? void 0 : assignee.name}</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>
+    `;
+    }
+    updated(changes) {
+        if (changes.has('activityInstance')) {
+            const { state } = this.activityInstance;
+            this.setAttribute('state', state);
+        }
+    }
+};
+ActivityInstanceRibon.styles = [
+    css `
+      :host {
+        display: flex;
+        background-color: var(--worklist-status-color);
+        color: var(--theme-white-color);
+        --fontsize-small: 12px;
+      }
+
+      div {
+        border-left: var(--border-dark-color);
+        padding: var(--padding-narrow) var(--padding-default);
+        align-self: center;
+      }
+
+      :host([state='draft']) {
+        --worklist-status-color: #5f7184;
+      }
+
+      :host([state='issued']) {
+        --worklist-status-color: #56af45;
+      }
+
+      :host([state='pending-assignment']) {
+        --worklist-status-color: #8654b0;
+      }
+
+      :host([state='assigned']) {
+        --worklist-status-color: #428df3;
+      }
+
+      :host([state='started']) {
+        --worklist-status-color: #595de5;
+      }
+
+      :host([state='pending']) {
+        --worklist-status-color: #f27429;
+      }
+
+      :host([state='ended']) {
+        --worklist-status-color: #02acae;
+      }
+
+      :host([state='aborted']) {
+        --worklist-status-color: #cb3a33;
+      }
+
+      mwc-icon {
+        font-size: 24px;
+      }
+
+      [desc],
+      [flow] {
+        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;
+      }
+
+      [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;
+      }
+
+      @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;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], ActivityInstanceRibon.prototype, "activityInstance", void 0);
+ActivityInstanceRibon = __decorate([
+    customElement('activity-instance-ribon')
+], ActivityInstanceRibon);
+export { ActivityInstanceRibon };
+//# sourceMappingURL=activity-instance-ribon.js.map

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

@@ -0,0 +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,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;;QAsJuB,qBAAgB,GAAQ,EAAE,CAAA;IAuExD,CAAC;IAtEC,kDAAkD;IAElD,mCAAmC;IAEnC,MAAM;QACJ,MAAM,EACJ,EAAE,EACF,IAAI,EACJ,WAAW,EACX,KAAK,EACL,KAAK,EACL,QAAQ,EACR,UAAU,GAAG,CAAC,EACd,UAAU,GAAG,CAAC,EACd,QAAQ,EACT,GAAG,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAA;QAC/B,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;QAEzD,kCAAkC;QAClC,mEAAmE;QACnE,mBAAmB;QACnB,eAAe;QACf,iBAAiB;QACjB,yBAAyB;QACzB,QAAQ;QACR,OAAO;QAEP,6EAA6E;QAE7E,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;YACvB,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;;;;;;;;;KASX,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;;AA3NM,4BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiJF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+DAA2B;AAtJ3C,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CA6NjC;SA7NY,qBAAqB","sourcesContent":["import '@material/mwc-button'\nimport '@operato/property-editor/ox-properties-dynamic-view.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        --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      [flow] {\n        flex: 2;\n        font-size: var(--fontsize-small);\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      [flow] ul {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        display: flex;\n      }\n\n      [flow] li {\n        width: 85px;\n        text-align: center;\n        color: rgba(255, 255, 255, 0.7);\n      }\n\n      [flow] span:before {\n        content: '';\n        height: 2px;\n        width: 70px;\n        display: block;\n        position: absolute;\n        margin-left: -70px;\n        margin-top: 6px;\n        background-color: rgba(0, 0, 0, 0.4);\n      }\n\n      [flow] span {\n        display: block;\n        width: 15px;\n        height: 15px;\n        margin: auto;\n        background-color: rgba(0, 0, 0, 0.4);\n        border-radius: 50%;\n        color: var(--theme-white-color);\n        line-height: 1.2;\n      }\n\n      [flow] [past] span {\n        background-color: rgba(255, 255, 255, 0.9);\n        color: var(--primary-text-color);\n      }\n\n      [flow] [now] span {\n        background-color: #84d600;\n        color: var(--theme-white-color);\n      }\n\n      [flow] [now] {\n        font-weight: bold;\n        color: var(--theme-white-color);\n      }\n\n      [flow] [past] span:before,\n      [flow] [now] span:before {\n        background-color: rgba(255, 255, 255, 0.9);\n      }\n\n      [flow] li:first-child span:before {\n        display: none;\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  // @property({ type: Array }) activityThreads: any\n\n  // @state() picked: boolean = false\n\n  render() {\n    const {\n      id,\n      name,\n      description,\n      input,\n      state,\n      assignee,\n      threadsMin = 0,\n      threadsMax = 0,\n      activity\n    } = this.activityInstance || {}\n    const { startingType, model, thumbnail } = activity || {}\n\n    // const inputSpec = (model || [])\n    //   .filter(item => item.inout === 'in' || item.inout === 'inout')\n    //   .map(item => {\n    //     return {\n    //       ...item,\n    //       label: item.name\n    //     }\n    //   })\n\n    // const pickable = !this.picked && this.activityThreads?.length < threadsMax\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'\n        ? html`\n            <div assignee>\n              ${i18next.t('label.assignee')}\n              <span>${assignee?.name}</span>\n            </div>\n          `\n        : html``}\n\n      <div flow>\n        <ul>\n          <li past><span>1</span>myself</li>\n          <li now><span>2</span>경리실장</li>\n          <li><span>3</span>사장님</li>\n        </ul>\n      </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/pages/activity-instance/activity-instance-start-page.d.ts

@@ -1,6 +1,7 @@
 import '@operato/property-editor/ox-properties-dynamic-view.js';
 import '@operato/board/ox-board-viewer.js';
 import '@things-factory/organization';
+import '../../components/activity-instance-ribon.js';
 import { PageView } from '@operato/shell';
 declare const ActivityInstanceStartPage_base: (new (...args: any[]) => {
     _storeUnsubscribe: import("redux").Unsubscribe;
@@ -34,11 +35,11 @@ export declare class ActivityInstanceStartPage extends ActivityInstanceStartPage
     };
     render(): import("lit-html").TemplateResult<1>;
     activityContent(): any;
-    templateContent(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/unsafe-html.js").UnsafeHTMLDirective>;
+    templateContent(): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/unsafe-html.js").UnsafeHTMLDirective>;
     getInputSpec(): any;
     getOutputSpec(): any;
-    generatedContent(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/keyed").Keyed>;
-    boardContent(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/keyed").Keyed>;
+    generatedContent(): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/keyed.js").Keyed>;
+    boardContent(): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/keyed.js").Keyed>;
     customElementContent(): any;
     getInOutFromBoard(): any[];
     updated(changes: any): void;

package/dist-client/pages/activity-instance/activity-instance-start-page.js

@@ -2,6 +2,7 @@ import { __decorate, __metadata } from "tslib";
 import '@operato/property-editor/ox-properties-dynamic-view.js';
 import '@operato/board/ox-board-viewer.js';
 import '@things-factory/organization';
+import '../../components/activity-instance-ribon.js';
 import gql from 'graphql-tag';
 import { css, html } from 'lit';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
@@ -36,28 +37,11 @@ let ActivityInstanceStartPage = class ActivityInstanceStartPage extends connect(
         };
     }
     render() {
-        return html ` 
-    <div worklist-summary submitted> 
-      <mwc-icon>description</mwc-icon>
+        return html `
+      <activity-instance-ribon .activityInstance=${this.activityInstance}></activity-instance-ribon>
 
-      <div desc>
-      assigned, submitted, rejected 스타일 작성해놨음
-      </div>
-
-      <div assignee>
-        assignee
-        <span>홍길동</span>
-      </div>
-
-      <div flow>
-        <ul>
-          <li past><span>1</span>myself</li>
-          <li now><span>2</span>경리실장</li>
-          <li><span>3</span>사장님</li>
-        </ul>
-      </div>
-    </div>
-    ${this.activityContent()}`;
+      ${this.activityContent()}
+    `;
     }
     activityContent() {
         var _a;
@@ -457,88 +441,6 @@ ActivityInstanceStartPage.styles = [
       #custom-content {
         flex: 1;
       }
-      [worklist-summary]{
-        display:flex;
-        padding:0 var(--padding-default);
-        color:var(--theme-white-color)
-      }
-      [worklist-summary] div{
-        border-left:var(--border-dark-color);
-        padding:var(--padding-narrow) var(--padding-default)
-      }
-      [assigned]{
-        background-color:#599B4D;
-      }
-      [submitted]{
-        background-color:#4B8BE1;
-      }
-      [rejected]{
-        background-color:#CB3A33;
-      }
-      [worklist-summary] mwc-icon{
-        padding:var(--padding-default) var(--padding-default) 0 0;
-        font-size: 24px;
-      }
-      [worklist-summary] [desc]{
-        font-size:var(--fontsize-small)
-      }
-      [worklist-summary] [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
-      }
-      [flow] ul{
-        list-style:none;
-        margin:0;padding:0;
-        display:flex;
-      }
-      [flow] li{
-        width:85px;
-        text-align:center;
-        font-size:var(--fontsize-small);
-      }
-      [flow] span:before{
-        content: "";
-        height: 2px;
-        width: 70px;
-        display: block;
-        position: absolute;
-        margin-left: -70px;
-        margin-top: 6px;
-        background-color: rgba(0, 0, 0,.4);
-      }
-      [flow] span{
-        display:block;
-        width: 15px;
-        height: 15px;
-        margin:auto;
-        background-color: rgba(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,.9);
-        color:var(--primary-text-color)
-      }
-      [flow] [now] span{
-        background-color: #84D600;
-        color:var(--theme-white-color);
-      }
-      [flow] [now]{
-        font-weight:bold
-      }
-      [flow] [past] span:before,[flow] [now] span:before{
-        background-color: rgba(255, 255, 255,.9);
-      }
-      [flow] li:first-child span:before{
-        display:none
-      }
     `
 ];
 __decorate([

package/dist-client/pages/activity-instance/activity-instance-start-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"activity-instance-start-page.js","sourceRoot":"","sources":["../../../client/pages/activity-instance/activity-instance-start-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@operato/board/ox-board-viewer.js'\nimport '@things-factory/organization'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { PageView, store } from '@operato/shell'\nimport { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'\nimport { provider } from '@things-factory/board-ui'\nimport { notify } from '@operato/layout'\n\n@customElement('activity-instance-start-page')\nexport class ActivityInstanceStartPage extends connect(store)(localize(i18next)(PageView)) {\n  static styles = [\n    ScrollbarStyles,\n    CommonGristStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: auto;\n      }\n\n      ox-board-viewer {\n        width: 100%;\n        height: 100%;\n      }\n\n      #custom-content {\n        flex: 1;\n      }\n      [worklist-summary]{\n        display:flex;\n        padding:0 var(--padding-default);\n        color:var(--theme-white-color)\n      }\n      [worklist-summary] div{\n        border-left:var(--border-dark-color);\n        padding:var(--padding-narrow) var(--padding-default)\n      }\n      [assigned]{\n        background-color:#599B4D;\n      }\n      [submitted]{\n        background-color:#4B8BE1;\n      }\n      [rejected]{\n        background-color:#CB3A33;\n      }\n      [worklist-summary] mwc-icon{\n        padding:var(--padding-default) var(--padding-default) 0 0;\n        font-size: 24px;\n      }\n      [worklist-summary] [desc]{\n        font-size:var(--fontsize-small)\n      }\n      [worklist-summary] [assignee]{\n        text-align:center;\n        font-size:var(--fontsize-small);\n        line-height:1.3;\n      }\n      [assignee] span{\n        display:block;\n        font-size:var(--fontsize-large);\n        font-weight:bold\n      }\n      [flow] ul{\n        list-style:none;\n        margin:0;padding:0;\n        display:flex;\n      }\n      [flow] li{\n        width:85px;\n        text-align:center;\n        font-size:var(--fontsize-small);\n      }\n      [flow] span:before{\n        content: \"\";\n        height: 2px;\n        width: 70px;\n        display: block;\n        position: absolute;\n        margin-left: -70px;\n        margin-top: 6px;\n        background-color: rgba(0, 0, 0,.4);\n      }\n      [flow] span{\n        display:block;\n        width: 15px;\n        height: 15px;\n        margin:auto;\n        background-color: rgba(0, 0, 0,.4);\n        border-radius: 50%;\n        color:var(--theme-white-color);\n        line-height:1.2\n      }\n      [flow] [past] span{\n        background-color: rgba(255, 255, 255,.9);\n        color:var(--primary-text-color)\n      }\n      [flow] [now] span{\n        background-color: #84D600;\n        color:var(--theme-white-color);\n      }\n      [flow] [now]{\n        font-weight:bold\n      }\n      [flow] [past] span:before,[flow] [now] span:before{\n        background-color: rgba(255, 255, 255,.9);\n      }\n      [flow] li:first-child span:before{\n        display:none\n      }\n    `\n  ]\n\n  @state() activity: any = {}\n  @state() activityInstance: any = {}\n  @state() board: any\n  @state() customHtmlElement: any\n\n  @query('ox-board-viewer') viewer: any\n\n  get context() {\n    const { startingType } = this.activity\n    const { state } = this.activityInstance\n\n    const issuable = state === 'draft'\n\n    return {\n      title: this.lifecycle?.params?.['title'] || i18next.t('title.activity'),\n      help: 'worklist/activity-instance-single-post',\n      actions: [\n        issuable && {\n          title: i18next.t('button.draft'),\n          action: this.draftActivityInstance.bind(this),\n          ...CommonButtonStyles.save\n        },\n        issuable && {\n          title: i18next.t(startingType == 'issue' ? 'button.issue' : 'button.post'),\n          action: this.issueActivityInstance.bind(this),\n          ...CommonButtonStyles.submit\n        }\n      ].filter(Boolean /* truthy only */),\n      activityInstance: this.activityInstance\n    }\n  }\n\n  render() {\n    return html` \n    <div worklist-summary submitted> \n      <mwc-icon>description</mwc-icon>\n\n      <div desc>\n      assigned, submitted, rejected 스타일 작성해놨음\n      </div>\n\n      <div assignee>\n        assignee\n        <span>홍길동</span>\n      </div>\n\n      <div flow>\n        <ul>\n          <li past><span>1</span>myself</li>\n          <li now><span>2</span>경리실장</li>\n          <li><span>3</span>사장님</li>\n        </ul>\n      </div>\n    </div>\n    ${this.activityContent()}`\n  }\n\n  activityContent() {\n    switch (this.activityInstance?.uiType) {\n      case 'template':\n        return this.templateContent()\n      case 'generated':\n        return this.generatedContent()\n      case 'board':\n        return this.boardContent()\n      case 'custom-element':\n        return this.customElementContent()\n      case 'page':\n      case 'external':\n      default:\n        return html``\n    }\n  }\n\n  templateContent() {\n    const { uiSource: template } = this.activityInstance\n    return unsafeHTML(template)\n  }\n\n  getInputSpec() {\n    const model = this.activity?.model\n\n    return (model || [])\n      .filter(item => item.inout === 'in' || item.inout === 'inout')\n      .map(item => {\n        return {\n          ...item,\n          label: item.name,\n          property: item.options\n        }\n      })\n  }\n\n  getOutputSpec() {\n    const model = this.activity?.model\n\n    return (model || [])\n      .filter(item => item.inout === 'inout' || item.inout === 'out')\n      .map(item => {\n        return {\n          ...item,\n          label: item.name,\n          property: item.options\n        }\n      })\n  }\n\n  generatedContent() {\n    var { input, output } = this.activityInstance || {}\n\n    const inputSpec = this.getInputSpec()\n    const outputSpec = this.getOutputSpec()\n\n    if (!output) {\n      output = inputSpec\n        .filter(item => item.inout === 'inout')\n        .reduce((inout, item) => {\n          inout[item.name] = input?.[item.name]\n          return inout\n        }, {})\n    }\n\n    return keyed(\n      this.activityInstance.id,\n      html`\n        <fieldset>\n          <legend>Input</legend>\n          <ox-properties-dynamic-view\n            data-name=\"input\"\n            .props=${inputSpec}\n            .value=${input}\n            @property-change=${e => (this.activityInstance.input = e.currentTarget.value)}\n          ></ox-properties-dynamic-view>\n        </fieldset>\n\n        <fieldset>\n          <legend>Output</legend>\n          <ox-properties-dynamic-view\n            data-name=\"output\"\n            .props=${outputSpec}\n            .value=${output}\n            @property-change=${e => (this.activityInstance.output = e.currentTarget.value)}\n          ></ox-properties-dynamic-view>\n        </fieldset>\n      `\n    )\n  }\n\n  boardContent() {\n    const { uiSource: boardId, input, output } = this.activityInstance\n\n    if (!this.board || this.board.id !== boardId) {\n      this.board = {\n        id: boardId\n      }\n    }\n\n    /* \n      ox-board-viewer에서 provider에 의해 공급되는 board가 각 id별로 instance를 하나씩 밖에 가지지 않으므로,\n      동일한 id의 보드를 다른 page에 뺏기는 경우가 있다.\n      따라서, Page가 active될 때마다 타임스탬프를 refresh key로 설정하였다.\n      */\n    return keyed(\n      this.activityInstance.id,\n      html`\n        <ox-board-viewer\n          style=\"background-color: white;\"\n          .board=${this.board}\n          .provider=${provider}\n          .values=${{ ...input, ...output }}\n          hide-fullscreen\n          hide-navigation\n        ></ox-board-viewer>\n      `\n    )\n  }\n\n  customElementContent() {\n    const { uiSource: tagName, input, output } = this.activityInstance\n\n    if(!this.customHtmlElement){\n      const element = document.createElement(tagName)\n      element.id = 'custom-content'\n      element.activityId = this.activityInstance.activity.id\n      element.input = input\n      element.output = output\n\n      element.addEventListener('change-input', (e: CustomEvent) => {\n        this.activityInstance.input = e.detail\n      })\n      element.addEventListener('change-output', (e: CustomEvent) => {\n        this.activityInstance.output = e.detail\n      })\n  \n      /* DEPRECATED 일반적으로 output만 수정될 가능성이 높기때문에, change 이벤트는 output을 수정하는 것으로 한다. */\n      element.addEventListener('change', (e: CustomEvent) => {\n        this.activityInstance.output = e.detail\n      })\n\n      this.customHtmlElement = element\n    }\n\n\n    return this.customHtmlElement\n  }\n\n  getInOutFromBoard() {\n    const inputSpec = this.getInputSpec()\n    const outputSpec = this.getOutputSpec()\n    const data = this.viewer?.getSceneValues() || {}\n\n    const input = inputSpec.reduce((input, spec) => {\n      input[spec.name] = data[spec.name]\n      return input\n    }, {})\n\n    const output = outputSpec.reduce((output, spec) => {\n      output[spec.name] = data[spec.name]\n      return output\n    }, {})\n\n    return [input, output]\n  }\n\n  updated(changes) {\n    if (changes.has('activityInstance')) {\n      this.updateContext()\n    }\n  }\n\n  async pageUpdated(changes, lifecycle, changedBefore) {\n    if (this.active) {\n      this.fetchActivityInstance(lifecycle.resourceId)\n    } else {\n      this.customHtmlElement = undefined;\n    }\n  }\n\n  async fetchActivityInstance(id) {\n    const response = await client.query({\n      query: gql`\n        query activityInstance($id: String!) {\n          activityInstance(id: $id) {\n            id\n            name\n            description\n            state\n            activity {\n              id\n              startingType\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            thumbnail\n            input\n            output\n            uiType\n            uiSource\n            approvalLine {\n              type\n              value\n              approver {\n                id\n                name\n                description\n                controlNo\n              }\n            }\n            dueAt\n            createdAt\n          }\n        }\n      `,\n      variables: {\n        id\n      }\n    })\n\n    this.customHtmlElement = undefined\n    this.activityInstance = response.data.activityInstance\n    this.activity = this.activityInstance.activity\n  }\n\n  async draftActivityInstance() {\n    var { id: activityId } = this.activity\n    var {\n      id,\n      name,\n      description,\n      priority,\n      threadsMin,\n      threadsMax,\n      dueAt,\n      input,\n      output,\n      reason,\n      uiType,\n      assignees,\n      approvalLine\n    } = this.activityInstance\n\n    if (uiType === 'board') {\n      ;[input, output] = this.getInOutFromBoard()\n    }\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      output,\n      reason,\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            activity {\n              id\n              startingType\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            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            uiType\n            uiSource\n            threadsMin\n            threadsMax\n          }\n        }\n      `,\n      variables: {\n        activityInstance\n      }\n    })\n\n    if (!response.errors) {\n      this.customHtmlElement = undefined\n      this.activityInstance = response.data.draftActivityInstance\n      this.activity = this.activityInstance.activity\n\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  }\n\n  async issueActivityInstance() {\n    var {\n      id,\n      name,\n      description,\n      input,\n      output,\n      reason,\n      uiType,\n      threadsMin = 0,\n      threadsMax = 0,\n      assignees,\n      approvalLine\n    } = this.activityInstance\n\n    if (uiType === 'board') {\n      ;[input, output] = this.getInOutFromBoard()\n    }\n\n    const activityInstance = {\n      id,\n      name: name || this.activity.name,\n      description: description || this.activity.description,\n      threadsMin,\n      threadsMax,\n      input,\n      output,\n      reason,\n      assignees,\n      approvalLine\n    }\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($activityInstance: ActivityInstanceIssue!) {\n          issueActivityInstance(activityInstance: $activityInstance) {\n            id\n            name\n            description\n            input\n            output\n            state\n            activity {\n              id\n              startingType\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            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            uiType\n            uiSource\n            threadsMin\n            threadsMax\n          }\n        }\n      `,\n      variables: {\n        activityInstance\n      }\n    })\n\n    if (!response.errors) {\n      this.customHtmlElement = undefined\n      this.activityInstance = response.data.issueActivityInstance\n      this.activity = this.activityInstance.activity\n\n      notify({\n        message: i18next.t('text.info_x_successfully', {\n          x: `${i18next.t('label.activity-instance')} ${i18next.t('text.assign')}`\n        })\n      })\n    }\n  }\n}\n"]}
+{"version":3,"file":"activity-instance-start-page.js","sourceRoot":"","sources":["../../../client/pages/activity-instance/activity-instance-start-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@operato/board/ox-board-viewer.js'\nimport '@things-factory/organization'\nimport '../../components/activity-instance-ribon.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { PageView, store } from '@operato/shell'\nimport { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'\nimport { provider } from '@things-factory/board-ui'\nimport { notify } from '@operato/layout'\n\n@customElement('activity-instance-start-page')\nexport class ActivityInstanceStartPage extends connect(store)(localize(i18next)(PageView)) {\n  static styles = [\n    ScrollbarStyles,\n    CommonGristStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: auto;\n      }\n\n      ox-board-viewer {\n        width: 100%;\n        height: 100%;\n      }\n\n      #custom-content {\n        flex: 1;\n      }\n    `\n  ]\n\n  @state() activity: any = {}\n  @state() activityInstance: any = {}\n  @state() board: any\n  @state() customHtmlElement: any\n\n  @query('ox-board-viewer') viewer: any\n\n  get context() {\n    const { startingType } = this.activity\n    const { state } = this.activityInstance\n\n    const issuable = state === 'draft'\n\n    return {\n      title: this.lifecycle?.params?.['title'] || i18next.t('title.activity'),\n      help: 'worklist/activity-instance-single-post',\n      actions: [\n        issuable && {\n          title: i18next.t('button.draft'),\n          action: this.draftActivityInstance.bind(this),\n          ...CommonButtonStyles.save\n        },\n        issuable && {\n          title: i18next.t(startingType == 'issue' ? 'button.issue' : 'button.post'),\n          action: this.issueActivityInstance.bind(this),\n          ...CommonButtonStyles.submit\n        }\n      ].filter(Boolean /* truthy only */),\n      activityInstance: this.activityInstance\n    }\n  }\n\n  render() {\n    return html`\n      <activity-instance-ribon .activityInstance=${this.activityInstance}></activity-instance-ribon>\n\n      ${this.activityContent()}\n    `\n  }\n\n  activityContent() {\n    switch (this.activityInstance?.uiType) {\n      case 'template':\n        return this.templateContent()\n      case 'generated':\n        return this.generatedContent()\n      case 'board':\n        return this.boardContent()\n      case 'custom-element':\n        return this.customElementContent()\n      case 'page':\n      case 'external':\n      default:\n        return html``\n    }\n  }\n\n  templateContent() {\n    const { uiSource: template } = this.activityInstance\n    return unsafeHTML(template)\n  }\n\n  getInputSpec() {\n    const model = this.activity?.model\n\n    return (model || [])\n      .filter(item => item.inout === 'in' || item.inout === 'inout')\n      .map(item => {\n        return {\n          ...item,\n          label: item.name,\n          property: item.options\n        }\n      })\n  }\n\n  getOutputSpec() {\n    const model = this.activity?.model\n\n    return (model || [])\n      .filter(item => item.inout === 'inout' || item.inout === 'out')\n      .map(item => {\n        return {\n          ...item,\n          label: item.name,\n          property: item.options\n        }\n      })\n  }\n\n  generatedContent() {\n    var { input, output } = this.activityInstance || {}\n\n    const inputSpec = this.getInputSpec()\n    const outputSpec = this.getOutputSpec()\n\n    if (!output) {\n      output = inputSpec\n        .filter(item => item.inout === 'inout')\n        .reduce((inout, item) => {\n          inout[item.name] = input?.[item.name]\n          return inout\n        }, {})\n    }\n\n    return keyed(\n      this.activityInstance.id,\n      html`\n        <fieldset>\n          <legend>Input</legend>\n          <ox-properties-dynamic-view\n            data-name=\"input\"\n            .props=${inputSpec}\n            .value=${input}\n            @property-change=${e => (this.activityInstance.input = e.currentTarget.value)}\n          ></ox-properties-dynamic-view>\n        </fieldset>\n\n        <fieldset>\n          <legend>Output</legend>\n          <ox-properties-dynamic-view\n            data-name=\"output\"\n            .props=${outputSpec}\n            .value=${output}\n            @property-change=${e => (this.activityInstance.output = e.currentTarget.value)}\n          ></ox-properties-dynamic-view>\n        </fieldset>\n      `\n    )\n  }\n\n  boardContent() {\n    const { uiSource: boardId, input, output } = this.activityInstance\n\n    if (!this.board || this.board.id !== boardId) {\n      this.board = {\n        id: boardId\n      }\n    }\n\n    /* \n      ox-board-viewer에서 provider에 의해 공급되는 board가 각 id별로 instance를 하나씩 밖에 가지지 않으므로,\n      동일한 id의 보드를 다른 page에 뺏기는 경우가 있다.\n      따라서, Page가 active될 때마다 타임스탬프를 refresh key로 설정하였다.\n      */\n    return keyed(\n      this.activityInstance.id,\n      html`\n        <ox-board-viewer\n          style=\"background-color: white;\"\n          .board=${this.board}\n          .provider=${provider}\n          .values=${{ ...input, ...output }}\n          hide-fullscreen\n          hide-navigation\n        ></ox-board-viewer>\n      `\n    )\n  }\n\n  customElementContent() {\n    const { uiSource: tagName, input, output } = this.activityInstance\n\n    if (!this.customHtmlElement) {\n      const element = document.createElement(tagName)\n      element.id = 'custom-content'\n      element.activityId = this.activityInstance.activity.id\n      element.input = input\n      element.output = output\n\n      element.addEventListener('change-input', (e: CustomEvent) => {\n        this.activityInstance.input = e.detail\n      })\n      element.addEventListener('change-output', (e: CustomEvent) => {\n        this.activityInstance.output = e.detail\n      })\n\n      /* DEPRECATED 일반적으로 output만 수정될 가능성이 높기때문에, change 이벤트는 output을 수정하는 것으로 한다. */\n      element.addEventListener('change', (e: CustomEvent) => {\n        this.activityInstance.output = e.detail\n      })\n\n      this.customHtmlElement = element\n    }\n\n    return this.customHtmlElement\n  }\n\n  getInOutFromBoard() {\n    const inputSpec = this.getInputSpec()\n    const outputSpec = this.getOutputSpec()\n    const data = this.viewer?.getSceneValues() || {}\n\n    const input = inputSpec.reduce((input, spec) => {\n      input[spec.name] = data[spec.name]\n      return input\n    }, {})\n\n    const output = outputSpec.reduce((output, spec) => {\n      output[spec.name] = data[spec.name]\n      return output\n    }, {})\n\n    return [input, output]\n  }\n\n  updated(changes) {\n    if (changes.has('activityInstance')) {\n      this.updateContext()\n    }\n  }\n\n  async pageUpdated(changes, lifecycle, changedBefore) {\n    if (this.active) {\n      this.fetchActivityInstance(lifecycle.resourceId)\n    } else {\n      this.customHtmlElement = undefined\n    }\n  }\n\n  async fetchActivityInstance(id) {\n    const response = await client.query({\n      query: gql`\n        query activityInstance($id: String!) {\n          activityInstance(id: $id) {\n            id\n            name\n            description\n            state\n            activity {\n              id\n              startingType\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            thumbnail\n            input\n            output\n            uiType\n            uiSource\n            approvalLine {\n              type\n              value\n              approver {\n                id\n                name\n                description\n                controlNo\n              }\n            }\n            dueAt\n            createdAt\n          }\n        }\n      `,\n      variables: {\n        id\n      }\n    })\n\n    this.customHtmlElement = undefined\n    this.activityInstance = response.data.activityInstance\n    this.activity = this.activityInstance.activity\n  }\n\n  async draftActivityInstance() {\n    var { id: activityId } = this.activity\n    var {\n      id,\n      name,\n      description,\n      priority,\n      threadsMin,\n      threadsMax,\n      dueAt,\n      input,\n      output,\n      reason,\n      uiType,\n      assignees,\n      approvalLine\n    } = this.activityInstance\n\n    if (uiType === 'board') {\n      ;[input, output] = this.getInOutFromBoard()\n    }\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      output,\n      reason,\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            activity {\n              id\n              startingType\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            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            uiType\n            uiSource\n            threadsMin\n            threadsMax\n          }\n        }\n      `,\n      variables: {\n        activityInstance\n      }\n    })\n\n    if (!response.errors) {\n      this.customHtmlElement = undefined\n      this.activityInstance = response.data.draftActivityInstance\n      this.activity = this.activityInstance.activity\n\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  }\n\n  async issueActivityInstance() {\n    var {\n      id,\n      name,\n      description,\n      input,\n      output,\n      reason,\n      uiType,\n      threadsMin = 0,\n      threadsMax = 0,\n      assignees,\n      approvalLine\n    } = this.activityInstance\n\n    if (uiType === 'board') {\n      ;[input, output] = this.getInOutFromBoard()\n    }\n\n    const activityInstance = {\n      id,\n      name: name || this.activity.name,\n      description: description || this.activity.description,\n      threadsMin,\n      threadsMax,\n      input,\n      output,\n      reason,\n      assignees,\n      approvalLine\n    }\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation ($activityInstance: ActivityInstanceIssue!) {\n          issueActivityInstance(activityInstance: $activityInstance) {\n            id\n            name\n            description\n            input\n            output\n            state\n            activity {\n              id\n              startingType\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            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            uiType\n            uiSource\n            threadsMin\n            threadsMax\n          }\n        }\n      `,\n      variables: {\n        activityInstance\n      }\n    })\n\n    if (!response.errors) {\n      this.customHtmlElement = undefined\n      this.activityInstance = response.data.issueActivityInstance\n      this.activity = this.activityInstance.activity\n\n      notify({\n        message: i18next.t('text.info_x_successfully', {\n          x: `${i18next.t('label.activity-instance')} ${i18next.t('text.assign')}`\n        })\n      })\n    }\n  }\n}\n"]}