npm - @things-factory/worklist - Versions diffs - 6.1.53 → 6.1.55 - Mend

@things-factory/worklist 6.1.53 → 6.1.55

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 (18) hide show

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

@@ -14,57 +14,61 @@ export class ActivityInstanceRibon extends localize(i18next)(LitElement) {
     css`
       :host {
         display: flex;
-        flex-direction: row;
-        padding: 0 var(--padding-default);
+        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']) {
-        background-color: #4b8be1;
+        --worklist-status-color: #5f7184;
       }
       :host([state='issued']) {
-        background-color: #599b4d;
+        --worklist-status-color: #56af45;
       }
       :host([state='pending-assignment']) {
-        background-color: #4b8be1;
+        --worklist-status-color: #8654b0;
       }
       :host([state='assigned']) {
-        background-color: #cb3a33;
+        --worklist-status-color: #428df3;
       }
       :host([state='started']) {
-        background-color: #cb3a33;
+        --worklist-status-color: #595de5;
       }
       :host([state='pending']) {
-        background-color: #cb3a33;
+        --worklist-status-color: #f27429;
       }
       :host([state='ended']) {
-        background-color: #cb3a33;
+        --worklist-status-color: #02acae;
       }
       :host([state='aborted']) {
-        background-color: #cb3a33;
+        --worklist-status-color: #cb3a33;
       }
       mwc-icon {
-        padding: var(--padding-default) var(--padding-default) 0 0;
         font-size: 24px;
       }
-      [desc] {
+      [desc],
+      [flow] {
+        flex: 2;
         font-size: var(--fontsize-small);
       }
+      [desc] * {
+        vertical-align: middle;
+      }
       [assignee] {
         text-align: center;
@@ -88,7 +92,7 @@ export class ActivityInstanceRibon extends localize(i18next)(LitElement) {
       [flow] li {
         width: 85px;
         text-align: center;
-        font-size: var(--fontsize-small);
+        color: rgba(255, 255, 255, 0.7);
       }
       [flow] span:before {
@@ -125,6 +129,7 @@ export class ActivityInstanceRibon extends localize(i18next)(LitElement) {
       [flow] [now] {
         font-weight: bold;
+        color: var(--theme-white-color);
       }
       [flow] [past] span:before,
@@ -135,27 +140,43 @@ export class ActivityInstanceRibon extends localize(i18next)(LitElement) {
       [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;
+        }
+      }
     `
   ]
-  @property({ type: Object }) activity: any = {}
   @property({ type: Object }) activityInstance: any = {}
   // @property({ type: Array }) activityThreads: any
   // @state() picked: boolean = false
   render() {
-    // const {
-    //   id,
-    //   name,
-    //   description,
-    //   input,
-    //   state,
-    //   threadsMin = 0,
-    //   threadsMax = 0,
-    //   activity
-    // } = this.activityInstance || {}
-    // const { model, thumbnail } = activity || {}
+    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')
@@ -169,23 +190,28 @@ export class ActivityInstanceRibon extends localize(i18next)(LitElement) {
     // const pickable = !this.picked && this.activityThreads?.length < threadsMax
     return html`
-      <mwc-icon
-        @click=${() => {
-          toggleOverlay('activity-info-overlay', {
-            template: html`<activity-instance-context-template
-              .activityInstance=${this.activityInstance}
-            ></activity-instance-context-template>`
-          })
-        }}
-        >description</mwc-icon
-      >
-      <div desc>assigned, submitted, rejected 스타일 작성해놨음</div>
-      <div assignee>
-        assignee
-        <span>홍길동</span>
+      <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?.name}</span>
+            </div>
+          `
+        : html``}
       <div flow>
         <ul>

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

@@ -73,10 +73,7 @@ export class ActivityInstanceStartPage extends connect(store)(localize(i18next)(
   render() {
     return html`
-      <activity-instance-ribon
-        .activity=${this.activity}
-        .activityInstance=${this.activityInstance}
-      ></activity-instance-ribon>
+      <activity-instance-ribon .activityInstance=${this.activityInstance}></activity-instance-ribon>
       ${this.activityContent()}
     `

package/client/templates/activity-instance-context-template.ts CHANGED Viewed

@@ -20,15 +20,120 @@ class ActivityInstanceContextTemplate extends connect(store)(LitElement) {
     ContextToolbarOverlayStyle,
     css`
       :host {
-        background-color: white;
+        background-color: var(--theme-white-color);
         width: 100%;
-        padding: 5px;
+        min-width:450px;
         overflow: auto;
+        --context-ui-padding:0;
+      }
+      :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;
+      }
+      [info], [assignees]{
+        padding:var(--padding-default);
+        border-bottom:var(--border-dark-color);
+        color:var(--secondary-color)
+      }
+      [info] div{
+        padding:var(--padding-narrow);
+        border-radius:var(--border-radius);
+        text-align:right;
+        clear:both;
+        overflow: hidden;
+      }
+      [info] div *{
+        vertical-align:middle;
+      }
+      [info] div:nth-child(odd){
+        background-color:var(--main-section-background-color);
+      }
+      [info] label{
+        display:inline-block;
+        width:25%;
+        float:left;
+        text-align:left;
+      }
+      [info] span{
+        width:15px;
+        height:15px;
+        background-color:var(--worklist-status-color, tomato);
+        display:inline-block;
+        border-radius:50%;
+      }
+      :host:before {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        border: 22px solid transparent;
+        border-left-color: var(--worklist-status-color);
+        border-right: 0;
+      }
+      section{
+        padding:var(--padding-default);
+        color:var(--secondary-color)
+      }
+      section label{
+        display:inline-block;
+        width:25%;
+        margin-top:var(--margin-default);
+      }
+      [assignees]{
+        text-align:right;
+        clear:both;
+        overflow: hidden;
+      }
+      [assignees] label{
+        display:inline-block;
+        padding-left: var(--padding-narrow);
+        width:25%;
+        float:left;
+        text-align:left;
+      }
+      [assignees] mwc-icon-button{
+        float:right
+      }
+      section input{
+        display:inline-block;
+        width:70%;
+        border:var(--border-dark-color);
+        border-width:0 0 1px 0;
+        margin-top:var(--margin-default);
+        font-size:var(--fontsize-large);
       }
       img {
-        max-width: 200px;
+        max-width: 85%;
       }
     `
   ]
@@ -54,13 +159,28 @@ class ActivityInstanceContextTemplate extends connect(store)(LitElement) {
     const editable = state == 'draft'
     return html`
-      <div>
-        <div>name: ${name}</div>
-        <div>description: ${description}</div>
-        <div>state: ${state}</div>
-        <div>assigned at: ${assignedAt && formatter.format(new Date(assignedAt))}</div>
-        <div>due at: ${dueAt && formatter.format(new Date(dueAt))}</div>
-        <div>started at: ${startedAt && formatter.format(new Date(startedAt))}</div>
+      <div flow>
+        ${approvalLine
+          ? html`
+              <approval-line-view
+                .model=${approvalLine}
+                @click=${() => this.onClickApprovalLine(activityInstance)}
+                @change=${e => (activityInstance.approvalLine = e.currentTarget.value)}
+              ></approval-line-view>
+            `
+          : html`<mwc-icon-button
+              icon="group_add"
+              @click=${() => this.onClickApprovalLine(activityInstance)}
+            ></mwc-icon-button>`}
+      </div>
+      <div info>
+        <div><label>name</label> <strong>${name}</strong></div>
+        <div><label>description</label> ${description}</div>
+        <div><label>state</label> <span></span> <strong>${state}</strong></div>
+        <div><label>assigned at</label> ${assignedAt && formatter.format(new Date(assignedAt))}</div>
+        <div><label>due at</label> ${dueAt && formatter.format(new Date(dueAt))}</div>
+        <div><label>started at</label> ${startedAt && formatter.format(new Date(startedAt))}</div>
       </div>
       <div>
@@ -80,21 +200,7 @@ class ActivityInstanceContextTemplate extends connect(store)(LitElement) {
               ></mwc-icon-button>`}
         </div>
-        <div>
-          <label>Approval Line</label>
-          ${approvalLine
-            ? html`
-                <approval-line-view
-                  .model=${approvalLine}
-                  @click=${() => this.onClickApprovalLine(activityInstance)}
-                  @change=${e => (activityInstance.approvalLine = e.currentTarget.value)}
-                ></approval-line-view>
-              `
-            : html`<mwc-icon-button
-                icon="group_add"
-                @click=${() => this.onClickApprovalLine(activityInstance)}
-              ></mwc-icon-button>`}
-        </div>
         <section>
           <label for="threads-min">Threads Min</label>

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

@@ -5,7 +5,6 @@ import { LitElement } from 'lit';
 declare const ActivityInstanceRibon_base: (new (...args: any[]) => LitElement) & typeof LitElement;
 export declare class ActivityInstanceRibon extends ActivityInstanceRibon_base {
     static styles: import("lit").CSSResult[];
-    activity: any;
     activityInstance: any;
     render(): import("lit-html").TemplateResult<1>;
     updated(changes: any): void;

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

@@ -9,23 +9,13 @@ import { toggleOverlay } from '@operato/layout';
 let ActivityInstanceRibon = class ActivityInstanceRibon extends localize(i18next)(LitElement) {
     constructor() {
         super(...arguments);
-        this.activity = {};
         this.activityInstance = {};
     }
     // @property({ type: Array }) activityThreads: any
     // @state() picked: boolean = false
     render() {
-        // const {
-        //   id,
-        //   name,
-        //   description,
-        //   input,
-        //   state,
-        //   threadsMin = 0,
-        //   threadsMax = 0,
-        //   activity
-        // } = this.activityInstance || {}
-        // const { model, thumbnail } = activity || {}
+        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 => {
@@ -36,23 +26,28 @@ let ActivityInstanceRibon = class ActivityInstanceRibon extends localize(i18next
         //   })
         // const pickable = !this.picked && this.activityThreads?.length < threadsMax
         return html `
-      <mwc-icon
-        @click=${() => {
+      <div desc>
+        <mwc-icon
+          @click=${() => {
             toggleOverlay('activity-info-overlay', {
                 template: html `<activity-instance-context-template
-              .activityInstance=${this.activityInstance}
-            ></activity-instance-context-template>`
+                .activityInstance=${this.activityInstance}
+                state=${state}
+              ></activity-instance-context-template>`
             });
         }}
-        >description</mwc-icon
-      >
-      <div desc>assigned, submitted, rejected 스타일 작성해놨음</div>
-      <div assignee>
-        assignee
-        <span>홍길동</span>
+          >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>
@@ -74,57 +69,61 @@ ActivityInstanceRibon.styles = [
     css `
       :host {
         display: flex;
-        flex-direction: row;
-        padding: 0 var(--padding-default);
+        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']) {
-        background-color: #4b8be1;
+        --worklist-status-color: #5f7184;
       }
       :host([state='issued']) {
-        background-color: #599b4d;
+        --worklist-status-color: #56af45;
       }
       :host([state='pending-assignment']) {
-        background-color: #4b8be1;
+        --worklist-status-color: #8654b0;
       }
       :host([state='assigned']) {
-        background-color: #cb3a33;
+        --worklist-status-color: #428df3;
       }
       :host([state='started']) {
-        background-color: #cb3a33;
+        --worklist-status-color: #595de5;
       }
       :host([state='pending']) {
-        background-color: #cb3a33;
+        --worklist-status-color: #f27429;
       }
       :host([state='ended']) {
-        background-color: #cb3a33;
+        --worklist-status-color: #02acae;
       }
       :host([state='aborted']) {
-        background-color: #cb3a33;
+        --worklist-status-color: #cb3a33;
       }
       mwc-icon {
-        padding: var(--padding-default) var(--padding-default) 0 0;
         font-size: 24px;
       }
-      [desc] {
+      [desc],
+      [flow] {
+        flex: 2;
         font-size: var(--fontsize-small);
       }
+      [desc] * {
+        vertical-align: middle;
+      }
       [assignee] {
         text-align: center;
@@ -148,7 +147,7 @@ ActivityInstanceRibon.styles = [
       [flow] li {
         width: 85px;
         text-align: center;
-        font-size: var(--fontsize-small);
+        color: rgba(255, 255, 255, 0.7);
       }
       [flow] span:before {
@@ -185,6 +184,7 @@ ActivityInstanceRibon.styles = [
       [flow] [now] {
         font-weight: bold;
+        color: var(--theme-white-color);
       }
       [flow] [past] span:before,
@@ -195,12 +195,24 @@ ActivityInstanceRibon.styles = [
       [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, "activity", void 0);
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)

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,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;;~~QAiIuB~~,~~aAAQ,GAAQ,EAAE,CAAA;QAClB,~~qBAAgB,GAAQ,EAAE,CAAA;~~IAiExD~~,CAAC;~~IAhEC~~,kDAAkD;IAElD,mCAAmC;IAEnC,MAAM;QACJ,~~UAAU;QACV~~,QAAQ~~;QACR~~,UAAU~~;QACV~~,~~iBAAiB;QACjB~~,~~WAAW;QACX~~,~~WAAW;QACX~~,~~oBAAoB;QACpB~~,~~oBAAoB;QACpB~~,~~aAAa;QACb~~,~~kCAAkC~~;~~QAClC~~,~~8CAA8C~~;~~QAE9C~~,kCAAkC;QAClC,mEAAmE;QACnE,mBAAmB;QACnB,eAAe;QACf,iBAAiB;QACjB,yBAAyB;QACzB,QAAQ;QACR,OAAO;QAEP,6EAA6E;QAE7E,OAAO,IAAI,CAAA~~;;iBAEE~~,GAAG,EAAE;YACZ,aAAa,CAAC,uBAAuB,EAAE;gBACrC,QAAQ,EAAE,IAAI,CAAA;~~kCACQ~~,IAAI,CAAC,gBAAgB;~~mDACJ~~;aACxC,CAAC,CAAA;QACJ,CAAC~~;;;;;;;;;;;;;;;;;;KAkBJ~~,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;;~~AAjMM~~,4BAAM,GAAG;IACd,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4HF~~;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC~~;;uDAAmB;AAC9C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC~~;;+DAA2B;~~AAlI3C~~,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,~~CAmMjC~~;~~SAnMY~~,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 ~~flex~~-~~direction~~: ~~row;\n padding: 0~~ var(--~~padding~~-~~default~~);\n\n color: var(--theme-white-color);\n }\n\n div {\n border-left: var(--border-dark-color);\n padding: var(--padding-narrow) var(--padding-default);\n }\n\n :host([state='draft']) {\n ~~background~~-color: #~~4b8be1~~;\n }\n\n :host([state='issued']) {\n ~~background~~-color: #~~599b4d~~;\n }\n\n :host([state='pending-assignment']) {\n ~~background~~-color: #~~4b8be1~~;\n }\n\n :host([state='assigned']) {\n ~~background~~-color: #~~cb3a33~~;\n }\n\n :host([state='started']) {\n ~~background~~-color: #~~cb3a33~~;\n }\n\n :host([state='pending']) {\n ~~background~~-color: #~~cb3a33~~;\n }\n\n :host([state='ended']) {\n ~~background~~-color: #~~cb3a33~~;\n }\n\n :host([state='aborted']) {\n ~~background~~-color: #cb3a33;\n }\n\n mwc-icon {\n ~~padding: var(--padding-default) var(--padding-default) 0 0;\n~~ font-size: 24px;\n }\n\n [desc] {\n font-size: var(--fontsize-small);\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 ~~font-size~~: ~~var~~(~~--fontsize-small~~);\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 }\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 ]~~\n\n @~~property~~({ ~~type~~: ~~Object~~ }) ~~activity~~: ~~any~~ = {}\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 // threadsMin = 0,\n // threadsMax = 0,\n // activity\n // } = this.activityInstance \|\| {}\n // const { 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 <mwc-icon\n @click=${() => {\n toggleOverlay('activity-info-overlay', {\n template: html`<activity-instance-context-template\n .activityInstance=${this.activityInstance}\n ></activity-instance-context-template>`\n })\n }}\n >description</mwc-icon\n >\n\n <div ~~desc>assigned,~~ ~~submitted,~~ ~~rejected 스타일 작성해놨음</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 `\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,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.js CHANGED Viewed

@@ -38,10 +38,7 @@ let ActivityInstanceStartPage = class ActivityInstanceStartPage extends connect(
     }
     render() {
         return html `
-      <activity-instance-ribon
-        .activity=${this.activity}
-        .activityInstance=${this.activityInstance}
-      ></activity-instance-ribon>
+      <activity-instance-ribon .activityInstance=${this.activityInstance}></activity-instance-ribon>
       ${this.activityContent()}
     `;