npm - @things-factory/worklist - Versions diffs - 7.0.1-beta.7 → 7.0.1-beta.9 - Mend

@things-factory/worklist 7.0.1-beta.7 → 7.0.1-beta.9

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

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

@@ -64,7 +64,7 @@ ActivityApprovalRibon.styles = [
       }
       div {
-        border-left: var(--border-dark-color);
+        border-left: var(--border-dim-color);
         padding: var(--padding-narrow) var(--padding-default);
         align-self: center;
       }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"activity-approval-ribon.js","sourceRoot":"","sources":["../../client/components/activity-approval-ribon.ts"],"names":[],"mappings":";AAAA,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;IAyGtE,MAAM;;QACJ,MAAM,EAAE,gBAAgB,EAAE,KAAK,EAAE,GAAG,CAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,cAAc,KAAI,EAAE,CAAA;QAC/E,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;QAChF,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;YACZ,CAAC,CAAC,IAAI,CAAA;qBACO,YAAY;uBACV,IAAI,CAAC,gBAAgB,CAAC,KAAK;kCAChB;YAC1B,CAAC,CAAC,IAAI,CAAA,EAAE;;mBAEG,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,KAAK,CAAC;KACxD,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC5D,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAA;YAEtD,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;SAClC;IACH,CAAC;;AArJM,4BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkGF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+DAAsB;AAvGtC,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CAuJjC;SAvJY,qBAAqB","sourcesContent":["import '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization/dist-client/component/approval-line-brief.js'\nimport '../templates/activity-approval-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-approval-ribon')\nexport class ActivityApprovalRibon extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n background-color: var(--worklist-status-color);\n color: var(--md-sys-color-on-primary);\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='assigned']) {\n --worklist-status-color: #5f7184;\n }\n\n :host([state='started']) {\n --worklist-status-color: #56af45;\n }\n\n :host([state='delegated']) {\n --worklist-status-color: #8654b0;\n }\n\n :host([state='submitted']) {\n --worklist-status-color: #428df3;\n }\n\n :host([state='escalated']) {\n --worklist-status-color: #595de5;\n }\n\n :host([state='rejected']) {\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 md-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 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 div {\n border-left: none;\n }\n\n [assignee] {\n display: none;\n }\n md-icon {\n padding: 0;\n }\n approval-line-brief {\n display: none;\n }\n }\n `\n ]\n\n @property({ type: Object }) activityApproval: any\n\n render() {\n const { activityInstance, state } = this.activityApproval?.activityThread \|\| {}\n const { description, assignee, approvalLine, activity } = activityInstance \|\| {}\n const { startingType } = activity \|\| {}\n\n return html`\n <div desc>\n <md-icon\n @click=${() => {\n toggleOverlay('activity-info-overlay', {\n template: html`<activity-approval-context-template\n .activityApproval=${this.activityApproval}\n state=${state}\n ></activity-approval-context-template>`\n })\n }}\n >description</md-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\n ? html`<approval-line-brief\n .model=${approvalLine}\n .current=${this.activityApproval.order}\n ></approval-line-brief>`\n : html``}\n\n <div state>${i18next.t('label.activity-state-' + state)}</div>\n `\n }\n\n updated(changes) {\n if (changes.has('activityApproval') && this.activityApproval) {\n const { state } = this.activityApproval.activityThread\n\n this.setAttribute('state', state)\n }\n }\n}\n"]}
1	+ {"version":3,"file":"activity-approval-ribon.js","sourceRoot":"","sources":["../../client/components/activity-approval-ribon.ts"],"names":[],"mappings":";AAAA,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;IAyGtE,MAAM;;QACJ,MAAM,EAAE,gBAAgB,EAAE,KAAK,EAAE,GAAG,CAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,cAAc,KAAI,EAAE,CAAA;QAC/E,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;QAChF,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;YACZ,CAAC,CAAC,IAAI,CAAA;qBACO,YAAY;uBACV,IAAI,CAAC,gBAAgB,CAAC,KAAK;kCAChB;YAC1B,CAAC,CAAC,IAAI,CAAA,EAAE;;mBAEG,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,KAAK,CAAC;KACxD,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC5D,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAA;YAEtD,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;SAClC;IACH,CAAC;;AArJM,4BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkGF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+DAAsB;AAvGtC,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CAuJjC;SAvJY,qBAAqB","sourcesContent":["import '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization/dist-client/component/approval-line-brief.js'\nimport '../templates/activity-approval-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-approval-ribon')\nexport class ActivityApprovalRibon extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n background-color: var(--worklist-status-color);\n color: var(--md-sys-color-on-primary);\n align-items: center;\n min-height: 44px;\n --fontsize-small: 12px;\n }\n\n div {\n border-left: var(--border-dim-color);\n padding: var(--padding-narrow) var(--padding-default);\n align-self: center;\n }\n\n :host([state='assigned']) {\n --worklist-status-color: #5f7184;\n }\n\n :host([state='started']) {\n --worklist-status-color: #56af45;\n }\n\n :host([state='delegated']) {\n --worklist-status-color: #8654b0;\n }\n\n :host([state='submitted']) {\n --worklist-status-color: #428df3;\n }\n\n :host([state='escalated']) {\n --worklist-status-color: #595de5;\n }\n\n :host([state='rejected']) {\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 md-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 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 div {\n border-left: none;\n }\n\n [assignee] {\n display: none;\n }\n md-icon {\n padding: 0;\n }\n approval-line-brief {\n display: none;\n }\n }\n `\n ]\n\n @property({ type: Object }) activityApproval: any\n\n render() {\n const { activityInstance, state } = this.activityApproval?.activityThread \|\| {}\n const { description, assignee, approvalLine, activity } = activityInstance \|\| {}\n const { startingType } = activity \|\| {}\n\n return html`\n <div desc>\n <md-icon\n @click=${() => {\n toggleOverlay('activity-info-overlay', {\n template: html`<activity-approval-context-template\n .activityApproval=${this.activityApproval}\n state=${state}\n ></activity-approval-context-template>`\n })\n }}\n >description</md-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\n ? html`<approval-line-brief\n .model=${approvalLine}\n .current=${this.activityApproval.order}\n ></approval-line-brief>`\n : html``}\n\n <div state>${i18next.t('label.activity-state-' + state)}</div>\n `\n }\n\n updated(changes) {\n if (changes.has('activityApproval') && this.activityApproval) {\n const { state } = this.activityApproval.activityThread\n\n this.setAttribute('state', state)\n }\n }\n}\n"]}

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

@@ -62,7 +62,7 @@ ActivityInstanceRibon.styles = [
       }
       div {
-        border-left: var(--border-dark-color);
+        border-left: var(--border-dim-color);
         padding: var(--padding-narrow) var(--padding-default);
         align-self: center;
       }

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,yCAAyC,CAAA;AAChD,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;;QAuGuB,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,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC5D,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAA;YAEvC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;SAClC;IACH,CAAC;;AA/IM,4BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkGF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+DAA2B;AAvG3C,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CAiJjC;SAjJY,qBAAqB","sourcesContent":["import '@material/web/button/elevated-button.js'\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(--md-sys-color-on-primary);\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 md-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 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 div {\n border-left: none;\n }\n [assignee] {\n display: none;\n }\n md-icon {\n padding: 0;\n }\n approval-line-brief {\n display: none;\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 <md-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</md-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') && this.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,yCAAyC,CAAA;AAChD,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;;QAuGuB,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,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC5D,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAA;YAEvC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;SAClC;IACH,CAAC;;AA/IM,4BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkGF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+DAA2B;AAvG3C,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CAiJjC;SAjJY,qBAAqB","sourcesContent":["import '@material/web/button/elevated-button.js'\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(--md-sys-color-on-primary);\n align-items: center;\n min-height: 44px;\n --fontsize-small: 12px;\n }\n\n div {\n border-left: var(--border-dim-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 md-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 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 div {\n border-left: none;\n }\n [assignee] {\n display: none;\n }\n md-icon {\n padding: 0;\n }\n approval-line-brief {\n display: none;\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 <md-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</md-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') && this.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

@@ -227,7 +227,7 @@ ActivityStarterForm.styles = [
       content input,
       content textarea {
         border-radius: var(--border-radius);
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         padding: var(--input-padding);
         margin: var(--input-margin);
         font: var(--input-font);

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/web/button/elevated-button.js'\nimport '@material/web/textfield/outlined-text-field.js'\nimport '@material/web/textfield/filled-text-field.js'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\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 { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'\n\n@customElement('activity-starter-form')\nexport class ActivityStarterForm extends localize(i18next)(LitElement) {\n static styles = [\n ButtonContainerStyles,\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: var(--md-sys-color-background);\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(--md-sys-color-secondary);\n }\n\n content label {\n font: var(--label-font);\n }\n content input,\n 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 flex: 1;\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\n <md-outlined-text-field\n id=\"name\"\n type=\"text\"\n label=${String(i18next.t('label.title'))}\n .value=${name \|\| this.activity?.name}\n @change=${e => (this.activityInstance.name = e.currentTarget.value)}\n >\n </md-outlined-text-field>\n\n <md-filled-text-field\n id=\"description\"\n type=\"textarea\"\n label=${String(i18next.t('label.description'))}\n resize=\"none\"\n .value=${description \|\| this.activity?.description}\n @change=${e => {\n this.activityInstance.description = e.currentTarget.value\n }}\n >\n </md-filled-text-field>\n </content>\n\n <div class=\"button-container\">\n <md-elevated-button raised @click=${this.draftActivityInstance.bind(this)}\n >${i18next.t('button.draft')}</md-elevated-button\n >\n <md-elevated-button raised @click=${e => history.back()}>${i18next.t('button.close')}</md-elevated-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/web/button/elevated-button.js'\nimport '@material/web/textfield/outlined-text-field.js'\nimport '@material/web/textfield/filled-text-field.js'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\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 { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'\n\n@customElement('activity-starter-form')\nexport class ActivityStarterForm extends localize(i18next)(LitElement) {\n static styles = [\n ButtonContainerStyles,\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: var(--md-sys-color-background);\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(--md-sys-color-secondary);\n }\n\n content label {\n font: var(--label-font);\n }\n content input,\n content textarea {\n border-radius: var(--border-radius);\n border: var(--border-dim-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 flex: 1;\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\n <md-outlined-text-field\n id=\"name\"\n type=\"text\"\n label=${String(i18next.t('label.title'))}\n .value=${name \|\| this.activity?.name}\n @change=${e => (this.activityInstance.name = e.currentTarget.value)}\n >\n </md-outlined-text-field>\n\n <md-filled-text-field\n id=\"description\"\n type=\"textarea\"\n label=${String(i18next.t('label.description'))}\n resize=\"none\"\n .value=${description \|\| this.activity?.description}\n @change=${e => {\n this.activityInstance.description = e.currentTarget.value\n }}\n >\n </md-filled-text-field>\n </content>\n\n <div class=\"button-container\">\n <md-elevated-button raised @click=${this.draftActivityInstance.bind(this)}\n >${i18next.t('button.draft')}</md-elevated-button\n >\n <md-elevated-button raised @click=${e => history.back()}>${i18next.t('button.close')}</md-elevated-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/components/activity-thread-ribon.js CHANGED Viewed

@@ -55,7 +55,7 @@ ActivityThreadRibon.styles = [
       }
       div {
-        border-left: var(--border-dark-color);
+        border-left: var(--border-dim-color);
         padding: var(--padding-narrow) var(--padding-default);
         align-self: center;
       }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"activity-thread-ribon.js","sourceRoot":"","sources":["../../client/components/activity-thread-ribon.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,wDAAwD,CAAA;AAC/D,OAAO,2EAA2E,CAAA;AAClF,OAAO,kDAAkD,CAAA;AAEzD,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,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAkGpE,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,cAAc,CAAA;QACjE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;QACtE,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;kCACM,IAAI,CAAC,cAAc;wBAC7B,KAAK;mDACsB;aACtC,CAAC,CAAA;QACJ,CAAC;;;UAGD,WAAW;;QAEb,YAAY;YACZ,CAAC,CAAC,IAAI,CAAA,+BAA+B,YAAY,yBAAyB;YAC1E,CAAC,CAAC,QAAQ;gBACR,CAAC,CAAC,IAAI,CAAA,wBAAwB,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,IAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,eAAe;gBAClG,CAAC,CAAC,IAAI,CAAA,EAAE;;yBAEO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,KAAK,CAAC;KACnG,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,cAAc,EAAE;YACxD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,cAAc,CAAA;YAErC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;SAClC;IACH,CAAC;;AArIM,0BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2FF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2DAAoB;AAhGpC,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CAuI/B;SAvIY,mBAAmB","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization/dist-client/component/approval-line-brief.js'\nimport '../templates/activity-thread-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-thread-ribon')\nexport class ActivityThreadRibon extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n background-color: var(--worklist-status-color);\n color: var(--md-sys-color-on-primary);\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='assigned']) {\n --worklist-status-color: #5f7184;\n }\n\n :host([state='started']) {\n --worklist-status-color: #56af45;\n }\n\n :host([state='delegated']) {\n --worklist-status-color: #8654b0;\n }\n\n :host([state='submitted']) {\n --worklist-status-color: #428df3;\n }\n\n :host([state='escalated']) {\n --worklist-status-color: #595de5;\n }\n\n :host([state='rejected']) {\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 md-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 div[assignee] {\n display: flex;\n align-items: center;\n text-align: center;\n }\n\n approval-line-brief {\n background-color: var(--worklist-status-color);\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 div {\n border-left: none;\n }\n [assignee] {\n display: none;\n }\n md-icon {\n padding: 0;\n }\n approval-line-brief {\n display: none;\n }\n }\n `\n ]\n\n @property({ type: Object }) activityThread: any\n\n render() {\n const { state, assignee, activityInstance } = this.activityThread\n const { description, approvalLine, activity } = activityInstance \|\| {}\n const { startingType } = activity \|\| {}\n\n return html`\n <div desc>\n <md-icon\n @click=${() => {\n toggleOverlay('activity-info-overlay', {\n template: html`<activity-thread-context-template\n .activityThread=${this.activityThread}\n state=${state}\n ></activity-thread-context-template>`\n })\n }}\n >description</md-icon\n >\n ${description}\n </div>\n ${approvalLine\n ? html`<approval-line-brief .model=${approvalLine}></approval-line-brief>`\n : assignee\n ? html` <div assignee title=${String(i18next.t('field.assignee'))}>${assignee?.name} </div> `\n : html``}\n\n <div state title=${String(i18next.t('field.status'))}>${i18next.t('label.activity-state-' + state)}</div>\n `\n }\n\n updated(changes) {\n if (changes.has('activityThread') && this.activityThread) {\n const { state } = this.activityThread\n\n this.setAttribute('state', state)\n }\n }\n}\n"]}
1	+ {"version":3,"file":"activity-thread-ribon.js","sourceRoot":"","sources":["../../client/components/activity-thread-ribon.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,wDAAwD,CAAA;AAC/D,OAAO,2EAA2E,CAAA;AAClF,OAAO,kDAAkD,CAAA;AAEzD,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,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAkGpE,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,cAAc,CAAA;QACjE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;QACtE,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;kCACM,IAAI,CAAC,cAAc;wBAC7B,KAAK;mDACsB;aACtC,CAAC,CAAA;QACJ,CAAC;;;UAGD,WAAW;;QAEb,YAAY;YACZ,CAAC,CAAC,IAAI,CAAA,+BAA+B,YAAY,yBAAyB;YAC1E,CAAC,CAAC,QAAQ;gBACR,CAAC,CAAC,IAAI,CAAA,wBAAwB,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,IAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,eAAe;gBAClG,CAAC,CAAC,IAAI,CAAA,EAAE;;yBAEO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,KAAK,CAAC;KACnG,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,cAAc,EAAE;YACxD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,cAAc,CAAA;YAErC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;SAClC;IACH,CAAC;;AArIM,0BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2FF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2DAAoB;AAhGpC,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CAuI/B;SAvIY,mBAAmB","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization/dist-client/component/approval-line-brief.js'\nimport '../templates/activity-thread-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-thread-ribon')\nexport class ActivityThreadRibon extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n background-color: var(--worklist-status-color);\n color: var(--md-sys-color-on-primary);\n align-items: center;\n min-height: 44px;\n --fontsize-small: 12px;\n }\n\n div {\n border-left: var(--border-dim-color);\n padding: var(--padding-narrow) var(--padding-default);\n align-self: center;\n }\n\n :host([state='assigned']) {\n --worklist-status-color: #5f7184;\n }\n\n :host([state='started']) {\n --worklist-status-color: #56af45;\n }\n\n :host([state='delegated']) {\n --worklist-status-color: #8654b0;\n }\n\n :host([state='submitted']) {\n --worklist-status-color: #428df3;\n }\n\n :host([state='escalated']) {\n --worklist-status-color: #595de5;\n }\n\n :host([state='rejected']) {\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 md-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 div[assignee] {\n display: flex;\n align-items: center;\n text-align: center;\n }\n\n approval-line-brief {\n background-color: var(--worklist-status-color);\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 div {\n border-left: none;\n }\n [assignee] {\n display: none;\n }\n md-icon {\n padding: 0;\n }\n approval-line-brief {\n display: none;\n }\n }\n `\n ]\n\n @property({ type: Object }) activityThread: any\n\n render() {\n const { state, assignee, activityInstance } = this.activityThread\n const { description, approvalLine, activity } = activityInstance \|\| {}\n const { startingType } = activity \|\| {}\n\n return html`\n <div desc>\n <md-icon\n @click=${() => {\n toggleOverlay('activity-info-overlay', {\n template: html`<activity-thread-context-template\n .activityThread=${this.activityThread}\n state=${state}\n ></activity-thread-context-template>`\n })\n }}\n >description</md-icon\n >\n ${description}\n </div>\n ${approvalLine\n ? html`<approval-line-brief .model=${approvalLine}></approval-line-brief>`\n : assignee\n ? html` <div assignee title=${String(i18next.t('field.assignee'))}>${assignee?.name} </div> `\n : html``}\n\n <div state title=${String(i18next.t('field.status'))}>${i18next.t('label.activity-state-' + state)}</div>\n `\n }\n\n updated(changes) {\n if (changes.has('activityThread') && this.activityThread) {\n const { state } = this.activityThread\n\n this.setAttribute('state', state)\n }\n }\n}\n"]}

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

@@ -299,7 +299,7 @@ ActivityInstanceView.styles = [
       [instance-container] {
         flex: 1;
         background-color: var(--md-sys-color-background);
-        border-right: var(--border-dark-color);
+        border-right: var(--border-dim-color);
         padding: var(--padding-wide);
         color: var(--primary-text-color);
       }
@@ -310,7 +310,7 @@ ActivityInstanceView.styles = [
       [instance-container] div {
         margin-bottom: var(--margin-default);
         padding-bottom: var(--padding-default);
-        border-bottom: var(--border-dark-color);
+        border-bottom: var(--border-dim-color);
       }
       [header] md-icon {
         background-color: var(--worklist-status-color, tomato);
@@ -443,7 +443,7 @@ ActivityInstanceView.styles = [
         border-top: 0;
       }
       [thread] div {
-        border-bottom: var(--border-dark-color);
+        border-bottom: var(--border-dim-color);
         padding: var(--padding-narrow);
         text-align: right;
         overflow: hidden;

package/dist-client/pages/activity-instance/activity-instance-view.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"activity-instance-view.js","sourceRoot":"","sources":["../../../client/pages/activity-instance/activity-instance-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { ActivityInstance } from '../../types/activity-instance'\nimport { ActivityThread } from '../../types/activity-thread'\nimport { ActivityApproval } from '../../types/activity-approval'\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'short', timeStyle: 'short' })\n\n@customElement('activity-instance-view')\nexport class ActivityInstanceView extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n overflow: auto;\n font-size: var(--fontsize-default);\n }\n :host([state='assigned']) {\n --worklist-status-color: #5f7184;\n }\n\n :host([state='started']) {\n --worklist-status-color: #56af45;\n }\n\n :host([state='delegated']) {\n --worklist-status-color: #8654b0;\n }\n\n :host([state='submitted']) {\n --worklist-status-color: #428df3;\n }\n\n :host([state='escalated']) {\n --worklist-status-color: #595de5;\n }\n\n :host([state='rejected']) {\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 [instance-container] {\n flex: 1;\n background-color: var(--md-sys-color-background);\n border-right: var(--border-dark-color);\n padding: var(--padding-wide);\n color: var(--primary-text-color);\n }\n [thread-container] {\n flex: 2;\n padding: var(--padding-wide);\n }\n [instance-container] div {\n margin-bottom: var(--margin-default);\n padding-bottom: var(--padding-default);\n border-bottom: var(--border-dark-color);\n }\n [header] md-icon {\n background-color: var(--worklist-status-color, tomato);\n float: left;\n margin-right: var(--margin-default);\n padding: var(--padding-default);\n border-radius: 50%;\n float: left;\n font-size: 1.8em;\n color: var(--md-sys-color-on-primary);\n }\n [header] strong {\n display: block;\n font: bold 22px / 1.1 var(--theme-font);\n }\n [header] {\n overflow: hidden;\n font-size: var(--fontsize-small);\n }\n [instance-container] div label {\n display: inline-block;\n margin-right: var(--margin-default);\n min-width: 50px;\n }\n [issuer] md-icon {\n opacity: 0.5;\n position: relative;\n top: 4px;\n font-size: 20px;\n }\n span[status] {\n width: 15px;\n height: 15px;\n position: relative;\n top: 2px;\n background-color: var(--worklist-status-color, tomato);\n display: inline-block;\n margin-right: var(--margin-narrow);\n border-radius: 50%;\n }\n [thread-container] table {\n width: 100%;\n border-collapse: collapse;\n }\n [thread-container] th {\n background-color: rgba(var(--primary-color-rgb), 0.05);\n border-top: var(--grid-header-top-border);\n border-bottom: var(--grid-header-bottom-border);\n padding: var(--grid-header-padding);\n text-overflow: ellipsis;\n font: var(--grid-header-font);\n color: var(--grid-header-color);\n }\n [thread-container] td {\n padding: var(--padding-narrow);\n border-bottom: var(--grid-record-border-bottom);\n }\n [assignee] * {\n vertical-align: middle;\n }\n [assignee] md-icon {\n opacity: 0.5;\n }\n [subtitle] {\n display: block;\n margin: var(--margin-wide) 0 var(--margin-narrow) 0;\n font: bold 16px var(--theme-font);\n color: var(--secondary-text-color);\n }\n [timeline] ol {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n [timeline] li {\n display: flex;\n }\n [timeline] [info] {\n flex: 1;\n }\n [timeline] [date] {\n opacity: 0.7;\n width: 130px;\n font-size: var(--fontsize-small);\n }\n [timeline] [info] strong {\n float: right;\n }\n [timeline] [status] {\n margin: 0 var(--margin-narrow);\n display: block;\n border-radius: 50%;\n width: 12px;\n height: 12px;\n position: relative;\n top: 3px;\n border: 2px solid #fff;\n background-color: var(--worklist-status-color, tomato);\n }\n [timeline] [status]::before {\n content: '';\n height: 60px;\n width: 2px;\n display: block;\n position: relative;\n margin-left: 5px;\n background-color: var(--worklist-status-color, tomato);\n opacity: 0.2;\n }\n [timeline] [info] md-icon {\n position: relative;\n top: 3px;\n font-size: var(--fontsize-large);\n }\n [timeline] [info] p {\n background-color: #f4f4f4;\n margin: var(--margin-narrow) 0 var(--margin-default) 0;\n padding: var(--padding-narrow) var(--padding-default);\n border-radius: var(--border-radius);\n font-size: var(--fontsize-small);\n text-align: justify;\n }\n [timeline] [info] p::before {\n content: '';\n float: right;\n margin-top: -10px;\n margin-right: 20px;\n border: 7px solid transparent;\n border-bottom-color: #f4f4f4;\n border-top: 0;\n }\n [thread] div {\n border-bottom: var(--border-dark-color);\n padding: var(--padding-narrow);\n text-align: right;\n overflow: hidden;\n }\n [thread] div label {\n float: left;\n width: 25%;\n text-align: left;\n }\n `\n ]\n\n @property({\n type: String,\n attribute: 'activity-instance-id'\n })\n activityInstanceId?: string\n\n @state() activityInstance?: ActivityInstance\n\n render() {\n if (!this.activityInstance) {\n return html`<div>no activity instance info.</div>`\n }\n\n const { id, name, description, state, issuer, assignedAt, startedAt, activityThreads, terminatedAt, updatedAt } =\n this.activityInstance\n\n return html`\n <div instance-container>\n <div header>\n <md-icon>description</md-icon>\n <strong>${name}</strong>\n ${description}\n </div>\n\n <div>\n <label>${i18next.t('label.status')}</label>\n <span status></span>\n <strong>${i18next.t('label.activity-state-' + state)}</strong>\n </div>\n\n <div issuer>\n <label>${i18next.t('field.issuer')}</label>\n <md-icon>account_circle</md-icon>\n <strong>${issuer?.name \|\| ''}</strong>\n </div>\n <div>\n <label>${i18next.t('field.assigned-at')}</label>${assignedAt && formatter.format(new Date(assignedAt))}\n </div>\n <div><label>${i18next.t('field.started-at')}</label>${startedAt && formatter.format(new Date(startedAt))}</div>\n <div><label>${i18next.t('field.updated-at')}</label>${updatedAt && formatter.format(new Date(updatedAt))}</div>\n <div>\n <label>${i18next.t('field.terminated-at')}</label>${terminatedAt && formatter.format(new Date(terminatedAt))}\n </div>\n </div>\n <div thread-container>\n ${activityThreads?.map(activityThread => this.renderActivityThread(this.activityInstance!, activityThread))}\n </div>\n `\n }\n\n renderActivityThread(activityInstance: ActivityInstance, activityThread: ActivityThread) {\n const {\n state,\n assignee,\n output,\n round,\n activityApprovals = [],\n assignedAt,\n startedAt,\n terminatedAt\n } = activityThread\n const { approvalLine } = activityInstance!\n const { name, email } = assignee \|\| {}\n const approvals = activityApprovals.sort((a, b) =>\n a.round < b.round ? 1 : a.round > b.round ? -1 : a.order! < b.order! ? 1 : -1\n )\n const current = approvals[0]?.round == round ? approvals[0].order : -1\n\n return html`\n <div assignee>\n <md-icon>account_circle</md-icon>\n <strong>${name}</strong>\n </div>\n\n <div thread>\n <span subtitle>${i18next.t('label.information')}</span>\n <div>\n <label>${i18next.t('label.status')}</label>\n <span status></span>\n <strong>${i18next.t('label.activity-state-' + state)}</strong>\n </div>\n <div>\n <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}\n </div>\n <div><label>${i18next.t('field.started-at')}</label> ${startedAt && formatter.format(new Date(startedAt))}</div>\n <div>\n <label>${i18next.t('field.terminated-at')}</label> ${terminatedAt && formatter.format(new Date(terminatedAt))}\n </div>\n <div><label>${i18next.t('field.round')}</label> ${round}</div>\n </div>\n\n <div>\n <span subtitle>${i18next.t('field.artifact')}</span>\n ${this.renderInOut(output \|\| {})}\n </div>\n <div timeline>\n <span subtitle>${i18next.t('label.timeline')}</span>\n\n <div>\n ${approvalLine\n ? html`<approval-line-view .model=${approvalLine} .current=${current}></approval-line-view>`\n : html``}\n </div>\n\n <ol>\n ${approvals.map(approval => this.renderActivityApproval(approval))}\n </ol>\n </div>\n `\n }\n\n renderActivityApproval(activityApproval: ActivityApproval) {\n const { judgment, approver, comment, round, order, createdAt, terminatedAt } = activityApproval\n const { name, email } = approver \|\| {}\n\n return html`\n <li>\n <span date>${formatter.format(new Date(terminatedAt \|\| createdAt!))}</span>\n <span status></span>\n <span info>\n ${i18next.t('label.activity-state-' + (judgment \|\| 'started'))}\n <strong><md-icon>account_circle</md-icon>${name}</strong>\n <p>${comment}</p>\n </span>\n </li>\n `\n }\n\n renderSearchKeys() {\n const { activity } = this.activityInstance!\n const { searchKeys = [] } = activity! \|\| {}\n\n return html`\n <table>\n <tr>\n <th>${i18next.t('label.name')}</th>\n <th>${i18next.t('label.value')}</th>\n </tr>\n\n ${searchKeys?.map(\n (item, index) => html`\n <tr>\n <td>${item.tKey ? i18next.t(item.tKey) : item.name}</td>\n <td>${this.activityInstance![`key0${index + 1}`]}</td>\n </tr>\n `\n )}\n </table>\n `\n }\n\n renderInOut(data) {\n const { activity } = this.activityInstance!\n const { model } = activity \|\| {}\n\n return html`\n <table>\n <tr>\n <th>${i18next.t('label.name')}</th>\n <th>${i18next.t('label.value')}</th>\n </tr>\n ${model?.map(\n item => html`\n <tr>\n <td>${item.name}</td>\n <td>${item.tag ? data[item.tag] : ''}</td>\n </tr>\n `\n )}\n </table>\n `\n }\n\n updated(changes) {\n if (changes.has('activityInstanceId')) {\n this.fetchActivityInstance()\n }\n }\n\n async fetchActivityInstance() {\n const id = this.activityInstanceId\n\n const response = await client.query({\n query: gql`\n query ($id: String!) {\n activityInstance(id: $id) {\n id\n name\n description\n state\n key01\n key02\n key03\n key04\n key05\n input\n output\n issuer {\n name\n email\n }\n starter {\n name\n email\n }\n activity {\n id\n name\n description\n searchKeys {\n name\n description\n inputKey\n tKey\n }\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 approvalLine {\n type\n value\n approver {\n id\n name\n description\n controlNo\n }\n }\n activityThreads {\n state\n transaction\n output\n assignee {\n id\n name\n email\n }\n round\n activityApprovals {\n round\n order\n approver {\n name\n email\n }\n judgment\n comment\n createdAt\n terminatedAt\n }\n assignedAt\n startedAt\n terminatedAt\n }\n updater {\n id\n name\n }\n assignedAt\n startedAt\n terminatedAt\n updatedAt\n }\n }\n `,\n variables: {\n id\n }\n })\n\n this.activityInstance = response.data.activityInstance\n this.setAttribute('state', this.activityInstance?.state \|\| '')\n }\n}\n"]}
1	+ {"version":3,"file":"activity-instance-view.js","sourceRoot":"","sources":["../../../client/pages/activity-instance/activity-instance-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { ActivityInstance } from '../../types/activity-instance'\nimport { ActivityThread } from '../../types/activity-thread'\nimport { ActivityApproval } from '../../types/activity-approval'\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'short', timeStyle: 'short' })\n\n@customElement('activity-instance-view')\nexport class ActivityInstanceView extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n overflow: auto;\n font-size: var(--fontsize-default);\n }\n :host([state='assigned']) {\n --worklist-status-color: #5f7184;\n }\n\n :host([state='started']) {\n --worklist-status-color: #56af45;\n }\n\n :host([state='delegated']) {\n --worklist-status-color: #8654b0;\n }\n\n :host([state='submitted']) {\n --worklist-status-color: #428df3;\n }\n\n :host([state='escalated']) {\n --worklist-status-color: #595de5;\n }\n\n :host([state='rejected']) {\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 [instance-container] {\n flex: 1;\n background-color: var(--md-sys-color-background);\n border-right: var(--border-dim-color);\n padding: var(--padding-wide);\n color: var(--primary-text-color);\n }\n [thread-container] {\n flex: 2;\n padding: var(--padding-wide);\n }\n [instance-container] div {\n margin-bottom: var(--margin-default);\n padding-bottom: var(--padding-default);\n border-bottom: var(--border-dim-color);\n }\n [header] md-icon {\n background-color: var(--worklist-status-color, tomato);\n float: left;\n margin-right: var(--margin-default);\n padding: var(--padding-default);\n border-radius: 50%;\n float: left;\n font-size: 1.8em;\n color: var(--md-sys-color-on-primary);\n }\n [header] strong {\n display: block;\n font: bold 22px / 1.1 var(--theme-font);\n }\n [header] {\n overflow: hidden;\n font-size: var(--fontsize-small);\n }\n [instance-container] div label {\n display: inline-block;\n margin-right: var(--margin-default);\n min-width: 50px;\n }\n [issuer] md-icon {\n opacity: 0.5;\n position: relative;\n top: 4px;\n font-size: 20px;\n }\n span[status] {\n width: 15px;\n height: 15px;\n position: relative;\n top: 2px;\n background-color: var(--worklist-status-color, tomato);\n display: inline-block;\n margin-right: var(--margin-narrow);\n border-radius: 50%;\n }\n [thread-container] table {\n width: 100%;\n border-collapse: collapse;\n }\n [thread-container] th {\n background-color: rgba(var(--primary-color-rgb), 0.05);\n border-top: var(--grid-header-top-border);\n border-bottom: var(--grid-header-bottom-border);\n padding: var(--grid-header-padding);\n text-overflow: ellipsis;\n font: var(--grid-header-font);\n color: var(--grid-header-color);\n }\n [thread-container] td {\n padding: var(--padding-narrow);\n border-bottom: var(--grid-record-border-bottom);\n }\n [assignee] * {\n vertical-align: middle;\n }\n [assignee] md-icon {\n opacity: 0.5;\n }\n [subtitle] {\n display: block;\n margin: var(--margin-wide) 0 var(--margin-narrow) 0;\n font: bold 16px var(--theme-font);\n color: var(--secondary-text-color);\n }\n [timeline] ol {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n [timeline] li {\n display: flex;\n }\n [timeline] [info] {\n flex: 1;\n }\n [timeline] [date] {\n opacity: 0.7;\n width: 130px;\n font-size: var(--fontsize-small);\n }\n [timeline] [info] strong {\n float: right;\n }\n [timeline] [status] {\n margin: 0 var(--margin-narrow);\n display: block;\n border-radius: 50%;\n width: 12px;\n height: 12px;\n position: relative;\n top: 3px;\n border: 2px solid #fff;\n background-color: var(--worklist-status-color, tomato);\n }\n [timeline] [status]::before {\n content: '';\n height: 60px;\n width: 2px;\n display: block;\n position: relative;\n margin-left: 5px;\n background-color: var(--worklist-status-color, tomato);\n opacity: 0.2;\n }\n [timeline] [info] md-icon {\n position: relative;\n top: 3px;\n font-size: var(--fontsize-large);\n }\n [timeline] [info] p {\n background-color: #f4f4f4;\n margin: var(--margin-narrow) 0 var(--margin-default) 0;\n padding: var(--padding-narrow) var(--padding-default);\n border-radius: var(--border-radius);\n font-size: var(--fontsize-small);\n text-align: justify;\n }\n [timeline] [info] p::before {\n content: '';\n float: right;\n margin-top: -10px;\n margin-right: 20px;\n border: 7px solid transparent;\n border-bottom-color: #f4f4f4;\n border-top: 0;\n }\n [thread] div {\n border-bottom: var(--border-dim-color);\n padding: var(--padding-narrow);\n text-align: right;\n overflow: hidden;\n }\n [thread] div label {\n float: left;\n width: 25%;\n text-align: left;\n }\n `\n ]\n\n @property({\n type: String,\n attribute: 'activity-instance-id'\n })\n activityInstanceId?: string\n\n @state() activityInstance?: ActivityInstance\n\n render() {\n if (!this.activityInstance) {\n return html`<div>no activity instance info.</div>`\n }\n\n const { id, name, description, state, issuer, assignedAt, startedAt, activityThreads, terminatedAt, updatedAt } =\n this.activityInstance\n\n return html`\n <div instance-container>\n <div header>\n <md-icon>description</md-icon>\n <strong>${name}</strong>\n ${description}\n </div>\n\n <div>\n <label>${i18next.t('label.status')}</label>\n <span status></span>\n <strong>${i18next.t('label.activity-state-' + state)}</strong>\n </div>\n\n <div issuer>\n <label>${i18next.t('field.issuer')}</label>\n <md-icon>account_circle</md-icon>\n <strong>${issuer?.name \|\| ''}</strong>\n </div>\n <div>\n <label>${i18next.t('field.assigned-at')}</label>${assignedAt && formatter.format(new Date(assignedAt))}\n </div>\n <div><label>${i18next.t('field.started-at')}</label>${startedAt && formatter.format(new Date(startedAt))}</div>\n <div><label>${i18next.t('field.updated-at')}</label>${updatedAt && formatter.format(new Date(updatedAt))}</div>\n <div>\n <label>${i18next.t('field.terminated-at')}</label>${terminatedAt && formatter.format(new Date(terminatedAt))}\n </div>\n </div>\n <div thread-container>\n ${activityThreads?.map(activityThread => this.renderActivityThread(this.activityInstance!, activityThread))}\n </div>\n `\n }\n\n renderActivityThread(activityInstance: ActivityInstance, activityThread: ActivityThread) {\n const {\n state,\n assignee,\n output,\n round,\n activityApprovals = [],\n assignedAt,\n startedAt,\n terminatedAt\n } = activityThread\n const { approvalLine } = activityInstance!\n const { name, email } = assignee \|\| {}\n const approvals = activityApprovals.sort((a, b) =>\n a.round < b.round ? 1 : a.round > b.round ? -1 : a.order! < b.order! ? 1 : -1\n )\n const current = approvals[0]?.round == round ? approvals[0].order : -1\n\n return html`\n <div assignee>\n <md-icon>account_circle</md-icon>\n <strong>${name}</strong>\n </div>\n\n <div thread>\n <span subtitle>${i18next.t('label.information')}</span>\n <div>\n <label>${i18next.t('label.status')}</label>\n <span status></span>\n <strong>${i18next.t('label.activity-state-' + state)}</strong>\n </div>\n <div>\n <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}\n </div>\n <div><label>${i18next.t('field.started-at')}</label> ${startedAt && formatter.format(new Date(startedAt))}</div>\n <div>\n <label>${i18next.t('field.terminated-at')}</label> ${terminatedAt && formatter.format(new Date(terminatedAt))}\n </div>\n <div><label>${i18next.t('field.round')}</label> ${round}</div>\n </div>\n\n <div>\n <span subtitle>${i18next.t('field.artifact')}</span>\n ${this.renderInOut(output \|\| {})}\n </div>\n <div timeline>\n <span subtitle>${i18next.t('label.timeline')}</span>\n\n <div>\n ${approvalLine\n ? html`<approval-line-view .model=${approvalLine} .current=${current}></approval-line-view>`\n : html``}\n </div>\n\n <ol>\n ${approvals.map(approval => this.renderActivityApproval(approval))}\n </ol>\n </div>\n `\n }\n\n renderActivityApproval(activityApproval: ActivityApproval) {\n const { judgment, approver, comment, round, order, createdAt, terminatedAt } = activityApproval\n const { name, email } = approver \|\| {}\n\n return html`\n <li>\n <span date>${formatter.format(new Date(terminatedAt \|\| createdAt!))}</span>\n <span status></span>\n <span info>\n ${i18next.t('label.activity-state-' + (judgment \|\| 'started'))}\n <strong><md-icon>account_circle</md-icon>${name}</strong>\n <p>${comment}</p>\n </span>\n </li>\n `\n }\n\n renderSearchKeys() {\n const { activity } = this.activityInstance!\n const { searchKeys = [] } = activity! \|\| {}\n\n return html`\n <table>\n <tr>\n <th>${i18next.t('label.name')}</th>\n <th>${i18next.t('label.value')}</th>\n </tr>\n\n ${searchKeys?.map(\n (item, index) => html`\n <tr>\n <td>${item.tKey ? i18next.t(item.tKey) : item.name}</td>\n <td>${this.activityInstance![`key0${index + 1}`]}</td>\n </tr>\n `\n )}\n </table>\n `\n }\n\n renderInOut(data) {\n const { activity } = this.activityInstance!\n const { model } = activity \|\| {}\n\n return html`\n <table>\n <tr>\n <th>${i18next.t('label.name')}</th>\n <th>${i18next.t('label.value')}</th>\n </tr>\n ${model?.map(\n item => html`\n <tr>\n <td>${item.name}</td>\n <td>${item.tag ? data[item.tag] : ''}</td>\n </tr>\n `\n )}\n </table>\n `\n }\n\n updated(changes) {\n if (changes.has('activityInstanceId')) {\n this.fetchActivityInstance()\n }\n }\n\n async fetchActivityInstance() {\n const id = this.activityInstanceId\n\n const response = await client.query({\n query: gql`\n query ($id: String!) {\n activityInstance(id: $id) {\n id\n name\n description\n state\n key01\n key02\n key03\n key04\n key05\n input\n output\n issuer {\n name\n email\n }\n starter {\n name\n email\n }\n activity {\n id\n name\n description\n searchKeys {\n name\n description\n inputKey\n tKey\n }\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 approvalLine {\n type\n value\n approver {\n id\n name\n description\n controlNo\n }\n }\n activityThreads {\n state\n transaction\n output\n assignee {\n id\n name\n email\n }\n round\n activityApprovals {\n round\n order\n approver {\n name\n email\n }\n judgment\n comment\n createdAt\n terminatedAt\n }\n assignedAt\n startedAt\n terminatedAt\n }\n updater {\n id\n name\n }\n assignedAt\n startedAt\n terminatedAt\n updatedAt\n }\n }\n `,\n variables: {\n id\n }\n })\n\n this.activityInstance = response.data.activityInstance\n this.setAttribute('state', this.activityInstance?.state \|\| '')\n }\n}\n"]}

package/dist-client/pages/activity-thread/activity-thread-view.js CHANGED Viewed

@@ -209,14 +209,14 @@ ActivityThreadView.styles = [
       [instance-container] {
         flex: 1;
         background-color: var(--md-sys-color-background);
-        border-right: var(--border-dark-color);
+        border-right: var(--border-dim-color);
         padding: var(--padding-wide);
         color: var(--primary-text-color);
         div {
           margin-bottom: var(--margin-default);
           padding-bottom: var(--padding-default);
-          border-bottom: var(--border-dark-color);
+          border-bottom: var(--border-dim-color);
         }
         div label {
@@ -276,7 +276,7 @@ ActivityThreadView.styles = [
       }
       [thread] div {
-        border-bottom: var(--border-dark-color);
+        border-bottom: var(--border-dim-color);
         padding: var(--padding-narrow);
         text-align: right;
         overflow: hidden;

package/dist-client/pages/activity-thread/activity-thread-view.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"activity-thread-view.js","sourceRoot":"","sources":["../../../client/pages/activity-thread/activity-thread-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { ActivityThread } from '../../types/activity-thread'\nimport { ActivityApproval } from '../../types/activity-approval'\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'short', timeStyle: 'short' })\n\n@customElement('activity-thread-view')\nexport class ActivityThreadView extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow: auto;\n font-size: var(--fontsize-default);\n }\n\n :host([state='assigned']) {\n --worklist-status-color: #5f7184;\n }\n\n :host([state='started']) {\n --worklist-status-color: #56af45;\n }\n\n :host([state='delegated']) {\n --worklist-status-color: #8654b0;\n }\n\n :host([state='submitted']) {\n --worklist-status-color: #428df3;\n }\n\n :host([state='escalated']) {\n --worklist-status-color: #595de5;\n }\n\n :host([state='rejected']) {\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 [instance-container] {\n flex: 1;\n background-color: var(--md-sys-color-background);\n border-right: var(--border-dark-color);\n padding: var(--padding-wide);\n color: var(--primary-text-color);\n\n div {\n margin-bottom: var(--margin-default);\n padding-bottom: var(--padding-default);\n border-bottom: var(--border-dark-color);\n }\n\n div label {\n display: inline-block;\n margin-right: var(--margin-default);\n }\n }\n\n [thread-container] {\n flex: 2;\n padding: var(--padding-wide);\n }\n\n span[status] {\n width: 15px;\n height: 15px;\n background-color: var(--worklist-status-color, tomato);\n display: inline-block;\n margin-right: var(--margin-narrow);\n border-radius: 50%;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n }\n\n th {\n background-color: rgba(var(--primary-color-rgb), 0.05);\n border-top: var(--grid-header-top-border);\n border-bottom: var(--grid-header-bottom-border);\n padding: var(--grid-header-padding);\n text-overflow: ellipsis;\n font: var(--grid-header-font);\n color: var(--grid-header-color);\n }\n\n td {\n padding: var(--padding-narrow);\n border-bottom: var(--grid-record-border-bottom);\n }\n\n [assignee] {\n * {\n vertical-align: middle;\n }\n md-icon {\n opacity: 0.5;\n }\n }\n\n [subtitle] {\n display: block;\n margin: var(--margin-wide) 0 var(--margin-narrow) 0;\n font: bold 16px var(--theme-font);\n color: var(--secondary-text-color);\n }\n\n [thread] div {\n border-bottom: var(--border-dark-color);\n padding: var(--padding-narrow);\n text-align: right;\n overflow: hidden;\n\n div label {\n float: left;\n width: 25%;\n text-align: left;\n }\n }\n\n [empty] {\n flex: 1;\n display: flex;\n align-items: center;\n align-self: center;\n }\n\n @media print {\n :host {\n display: block;\n overflow: visible;\n }\n }\n `\n ]\n\n @property({\n type: String,\n attribute: 'activity-thread-id'\n })\n activityThreadId?: string\n\n @state() activityThread?: ActivityThread\n\n render() {\n if (!this.activityThread) {\n return html`<div empty>${i18next.t('text.no activity thread info')}</div>`\n }\n\n const { state, assignee, output, round, assignedAt, startedAt, terminatedAt, activityInstance } =\n this.activityThread\n const { input } = activityInstance!\n const { name, email } = assignee \|\| {}\n\n return html`\n <div assignee>\n <md-icon>account_circle</md-icon>\n <strong>${name}</strong>\n </div>\n\n <div thread>\n <span subtitle>${i18next.t('label.information')}</span>\n <div>\n <label>${i18next.t('label.status')}</label>\n <span status></span>\n <strong>${i18next.t('label.activity-state-' + state)}</strong>\n </div>\n <div>\n <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}\n </div>\n <div><label>${i18next.t('field.started-at')}</label> ${startedAt && formatter.format(new Date(startedAt))}</div>\n <div>\n <label>${i18next.t('field.terminated-at')}</label> ${terminatedAt && formatter.format(new Date(terminatedAt))}\n </div>\n <div><label>${i18next.t('field.round')}</label> ${round}</div>\n </div>\n\n <div>\n <span subtitle>${i18next.t('field.artifact')}</span>\n ${this.renderInOut({ ...input, ...output })}\n </div>\n `\n }\n\n renderInOut(data) {\n const { activity } = this.activityThread!.activityInstance!\n const { model } = activity \|\| {}\n\n return html`\n <table>\n <tr>\n <th>${i18next.t('label.name')}</th>\n <th>${i18next.t('label.value')}</th>\n </tr>\n ${model?.map(\n item => html`\n <tr>\n <td>${item.name}</td>\n <td>${item.tag ? data[item.tag] : ''}</td>\n </tr>\n `\n )}\n </table>\n `\n }\n\n updated(changes) {\n if (changes.has('activityThreadId')) {\n this.fetchActivityThread()\n }\n }\n\n async fetchActivityThread() {\n const id = this.activityThreadId\n\n const response = await client.query({\n query: gql`\n query ($id: String!) {\n activityThread(id: $id) {\n state\n transaction\n output\n assignee {\n id\n name\n email\n }\n round\n activityApprovals {\n round\n order\n approver {\n name\n email\n }\n judgment\n comment\n createdAt\n terminatedAt\n }\n assignedAt\n startedAt\n terminatedAt\n updater {\n id\n name\n }\n activityInstance {\n id\n name\n description\n state\n key01\n key02\n key03\n key04\n key05\n input\n output\n activity {\n id\n name\n description\n searchKeys {\n name\n description\n inputKey\n tKey\n }\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 approvalLine {\n type\n value\n approver {\n id\n name\n description\n controlNo\n }\n }\n assignedAt\n startedAt\n terminatedAt\n updatedAt\n }\n }\n }\n `,\n variables: {\n id\n }\n })\n\n this.activityThread = response.data.activityThread\n this.setAttribute('state', this.activityThread?.state \|\| '')\n }\n}\n"]}
1	+ {"version":3,"file":"activity-thread-view.js","sourceRoot":"","sources":["../../../client/pages/activity-thread/activity-thread-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { ActivityThread } from '../../types/activity-thread'\nimport { ActivityApproval } from '../../types/activity-approval'\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'short', timeStyle: 'short' })\n\n@customElement('activity-thread-view')\nexport class ActivityThreadView extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow: auto;\n font-size: var(--fontsize-default);\n }\n\n :host([state='assigned']) {\n --worklist-status-color: #5f7184;\n }\n\n :host([state='started']) {\n --worklist-status-color: #56af45;\n }\n\n :host([state='delegated']) {\n --worklist-status-color: #8654b0;\n }\n\n :host([state='submitted']) {\n --worklist-status-color: #428df3;\n }\n\n :host([state='escalated']) {\n --worklist-status-color: #595de5;\n }\n\n :host([state='rejected']) {\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 [instance-container] {\n flex: 1;\n background-color: var(--md-sys-color-background);\n border-right: var(--border-dim-color);\n padding: var(--padding-wide);\n color: var(--primary-text-color);\n\n div {\n margin-bottom: var(--margin-default);\n padding-bottom: var(--padding-default);\n border-bottom: var(--border-dim-color);\n }\n\n div label {\n display: inline-block;\n margin-right: var(--margin-default);\n }\n }\n\n [thread-container] {\n flex: 2;\n padding: var(--padding-wide);\n }\n\n span[status] {\n width: 15px;\n height: 15px;\n background-color: var(--worklist-status-color, tomato);\n display: inline-block;\n margin-right: var(--margin-narrow);\n border-radius: 50%;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n }\n\n th {\n background-color: rgba(var(--primary-color-rgb), 0.05);\n border-top: var(--grid-header-top-border);\n border-bottom: var(--grid-header-bottom-border);\n padding: var(--grid-header-padding);\n text-overflow: ellipsis;\n font: var(--grid-header-font);\n color: var(--grid-header-color);\n }\n\n td {\n padding: var(--padding-narrow);\n border-bottom: var(--grid-record-border-bottom);\n }\n\n [assignee] {\n * {\n vertical-align: middle;\n }\n md-icon {\n opacity: 0.5;\n }\n }\n\n [subtitle] {\n display: block;\n margin: var(--margin-wide) 0 var(--margin-narrow) 0;\n font: bold 16px var(--theme-font);\n color: var(--secondary-text-color);\n }\n\n [thread] div {\n border-bottom: var(--border-dim-color);\n padding: var(--padding-narrow);\n text-align: right;\n overflow: hidden;\n\n div label {\n float: left;\n width: 25%;\n text-align: left;\n }\n }\n\n [empty] {\n flex: 1;\n display: flex;\n align-items: center;\n align-self: center;\n }\n\n @media print {\n :host {\n display: block;\n overflow: visible;\n }\n }\n `\n ]\n\n @property({\n type: String,\n attribute: 'activity-thread-id'\n })\n activityThreadId?: string\n\n @state() activityThread?: ActivityThread\n\n render() {\n if (!this.activityThread) {\n return html`<div empty>${i18next.t('text.no activity thread info')}</div>`\n }\n\n const { state, assignee, output, round, assignedAt, startedAt, terminatedAt, activityInstance } =\n this.activityThread\n const { input } = activityInstance!\n const { name, email } = assignee \|\| {}\n\n return html`\n <div assignee>\n <md-icon>account_circle</md-icon>\n <strong>${name}</strong>\n </div>\n\n <div thread>\n <span subtitle>${i18next.t('label.information')}</span>\n <div>\n <label>${i18next.t('label.status')}</label>\n <span status></span>\n <strong>${i18next.t('label.activity-state-' + state)}</strong>\n </div>\n <div>\n <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}\n </div>\n <div><label>${i18next.t('field.started-at')}</label> ${startedAt && formatter.format(new Date(startedAt))}</div>\n <div>\n <label>${i18next.t('field.terminated-at')}</label> ${terminatedAt && formatter.format(new Date(terminatedAt))}\n </div>\n <div><label>${i18next.t('field.round')}</label> ${round}</div>\n </div>\n\n <div>\n <span subtitle>${i18next.t('field.artifact')}</span>\n ${this.renderInOut({ ...input, ...output })}\n </div>\n `\n }\n\n renderInOut(data) {\n const { activity } = this.activityThread!.activityInstance!\n const { model } = activity \|\| {}\n\n return html`\n <table>\n <tr>\n <th>${i18next.t('label.name')}</th>\n <th>${i18next.t('label.value')}</th>\n </tr>\n ${model?.map(\n item => html`\n <tr>\n <td>${item.name}</td>\n <td>${item.tag ? data[item.tag] : ''}</td>\n </tr>\n `\n )}\n </table>\n `\n }\n\n updated(changes) {\n if (changes.has('activityThreadId')) {\n this.fetchActivityThread()\n }\n }\n\n async fetchActivityThread() {\n const id = this.activityThreadId\n\n const response = await client.query({\n query: gql`\n query ($id: String!) {\n activityThread(id: $id) {\n state\n transaction\n output\n assignee {\n id\n name\n email\n }\n round\n activityApprovals {\n round\n order\n approver {\n name\n email\n }\n judgment\n comment\n createdAt\n terminatedAt\n }\n assignedAt\n startedAt\n terminatedAt\n updater {\n id\n name\n }\n activityInstance {\n id\n name\n description\n state\n key01\n key02\n key03\n key04\n key05\n input\n output\n activity {\n id\n name\n description\n searchKeys {\n name\n description\n inputKey\n tKey\n }\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 approvalLine {\n type\n value\n approver {\n id\n name\n description\n controlNo\n }\n }\n assignedAt\n startedAt\n terminatedAt\n updatedAt\n }\n }\n }\n `,\n variables: {\n id\n }\n })\n\n this.activityThread = response.data.activityThread\n this.setAttribute('state', this.activityThread?.state \|\| '')\n }\n}\n"]}

package/dist-client/templates/activity-approval-context-template.js CHANGED Viewed

@@ -102,7 +102,7 @@ ActivityApprovalContextTemplate.styles = [
       [info],
       [assignees] {
         padding: var(--padding-default);
-        border-bottom: var(--border-dark-color);
+        border-bottom: var(--border-dim-color);
         color: var(--md-sys-color-secondary);
       }

package/dist-client/templates/activity-approval-context-template.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"activity-approval-context-template.js","sourceRoot":"","sources":["../../client/templates/activity-approval-context-template.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../components/activity-thread-timeline'\n\nimport { html, css, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js'\nimport { store } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\n\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n@customElement('activity-approval-context-template')\nclass ActivityApprovalContextTemplate extends connect(store)(LitElement) {\n static styles = [\n ContextToolbarOverlayStyle,\n css`\n :host {\n background-color: var(--md-sys-color-surface);\n width: 100%;\n min-width: 450px;\n max-height: 100%;\n overflow: auto;\n --context-ui-padding: 0;\n }\n\n :host([state='assigned']) {\n --worklist-status-color: #5f7184;\n }\n\n :host([state='started']) {\n --worklist-status-color: #56af45;\n }\n\n :host([state='delegated']) {\n --worklist-status-color: #8654b0;\n }\n\n :host([state='submitted']) {\n --worklist-status-color: #428df3;\n }\n\n :host([state='escalated']) {\n --worklist-status-color: #595de5;\n }\n\n :host([state='rejected']) {\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 [info],\n [assignees] {\n padding: var(--padding-default);\n border-bottom: var(--border-~~dark~~-color);\n color: var(--md-sys-color-secondary);\n }\n\n [info] div {\n display: flex;\n align-items: center;\n padding: var(--padding-narrow);\n border-radius: var(--border-radius);\n text-align: right;\n clear: both;\n overflow: hidden;\n }\n\n [info] div:nth-child(odd) {\n background-color: var(--md-sys-color-background);\n }\n\n [info] label {\n display: inline-block;\n width: 25%;\n text-align: right;\n margin-right: 20px;\n }\n\n [info] span {\n width: 15px;\n height: 15px;\n background-color: var(--worklist-status-color, tomato);\n display: inline-block;\n border-radius: 50%;\n }\n\n :host:before {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border: 22px solid transparent;\n border-left-color: var(--worklist-status-color);\n border-right: 0;\n }\n\n activity-thread-timeline {\n margin: var(--margin-default);\n }\n\n [thumbnail] {\n display: flex;\n justify-content: center;\n align-items: center;\n margin: var(--margin-default);\n }\n\n img {\n max-width: 85%;\n height: auto;\n }\n `\n ]\n\n @property({ type: Object }) private activityApproval\n\n @state() private context\n\n render() {\n const activityApproval = this.context.activityApproval \|\| this.activityApproval \|\| {}\n\n const { round, order, approver, createdAt, activityThread } = activityApproval \|\| {}\n const { state, dueAt, assignedAt, assignee, activityInstance, activityApprovals } = activityThread \|\| {}\n const { name, description, thumbnail, approvalLine } = activityInstance \|\| {}\n\n return html`\n <div flow>\n <div approval-line>\n ${approvalLine ? html` <approval-line-view .model=${approvalLine}></approval-line-view> ` : html``}\n </div>\n </div>\n\n <div info>\n <div><label>${i18next.t('field.name')}</label> <strong>${name}</strong></div>\n <div><label>${i18next.t('field.description')}</label> ${description}</div>\n <div>\n <label>${i18next.t('field.status')}</label> <span></span> <strong\n >${i18next.t('label.activity-state-' + state)}</strong\n >\n </div>\n <div><label>${i18next.t('field.round')}</label> <strong>${round}</strong></div>\n <div><label>${i18next.t('field.approval-order')}</label> <strong>${order}</strong></div>\n <div><label>${i18next.t('field.assignee')}</label> <strong>${assignee?.name}</strong></div>\n <div><label>${i18next.t('field.approver')}</label> <strong>${approver?.name}</strong></div>\n <div>\n <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}\n </div>\n <div><label>${i18next.t('field.due-at')}</label> ${dueAt && formatter.format(new Date(dueAt))}</div>\n <div><label>since</label> ${createdAt && formatter.format(new Date(createdAt))}</div>\n </div>\n\n ${activityApprovals && activityApprovals.length > 0\n ? html` <activity-thread-timeline .activityThread=${activityThread} short-form></activity-thread-timeline> `\n : nothing}\n ${thumbnail\n ? html` <div thumbnail>\n <img src=${thumbnail} />\n </div>`\n : html``}\n `\n }\n\n stateChanged(state) {\n this.context = state.route.context\n }\n}\n"]}
1	+ {"version":3,"file":"activity-approval-context-template.js","sourceRoot":"","sources":["../../client/templates/activity-approval-context-template.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../components/activity-thread-timeline'\n\nimport { html, css, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js'\nimport { store } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\n\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n@customElement('activity-approval-context-template')\nclass ActivityApprovalContextTemplate extends connect(store)(LitElement) {\n static styles = [\n ContextToolbarOverlayStyle,\n css`\n :host {\n background-color: var(--md-sys-color-surface);\n width: 100%;\n min-width: 450px;\n max-height: 100%;\n overflow: auto;\n --context-ui-padding: 0;\n }\n\n :host([state='assigned']) {\n --worklist-status-color: #5f7184;\n }\n\n :host([state='started']) {\n --worklist-status-color: #56af45;\n }\n\n :host([state='delegated']) {\n --worklist-status-color: #8654b0;\n }\n\n :host([state='submitted']) {\n --worklist-status-color: #428df3;\n }\n\n :host([state='escalated']) {\n --worklist-status-color: #595de5;\n }\n\n :host([state='rejected']) {\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 [info],\n [assignees] {\n padding: var(--padding-default);\n border-bottom: var(--border-dim-color);\n color: var(--md-sys-color-secondary);\n }\n\n [info] div {\n display: flex;\n align-items: center;\n padding: var(--padding-narrow);\n border-radius: var(--border-radius);\n text-align: right;\n clear: both;\n overflow: hidden;\n }\n\n [info] div:nth-child(odd) {\n background-color: var(--md-sys-color-background);\n }\n\n [info] label {\n display: inline-block;\n width: 25%;\n text-align: right;\n margin-right: 20px;\n }\n\n [info] span {\n width: 15px;\n height: 15px;\n background-color: var(--worklist-status-color, tomato);\n display: inline-block;\n border-radius: 50%;\n }\n\n :host:before {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border: 22px solid transparent;\n border-left-color: var(--worklist-status-color);\n border-right: 0;\n }\n\n activity-thread-timeline {\n margin: var(--margin-default);\n }\n\n [thumbnail] {\n display: flex;\n justify-content: center;\n align-items: center;\n margin: var(--margin-default);\n }\n\n img {\n max-width: 85%;\n height: auto;\n }\n `\n ]\n\n @property({ type: Object }) private activityApproval\n\n @state() private context\n\n render() {\n const activityApproval = this.context.activityApproval \|\| this.activityApproval \|\| {}\n\n const { round, order, approver, createdAt, activityThread } = activityApproval \|\| {}\n const { state, dueAt, assignedAt, assignee, activityInstance, activityApprovals } = activityThread \|\| {}\n const { name, description, thumbnail, approvalLine } = activityInstance \|\| {}\n\n return html`\n <div flow>\n <div approval-line>\n ${approvalLine ? html` <approval-line-view .model=${approvalLine}></approval-line-view> ` : html``}\n </div>\n </div>\n\n <div info>\n <div><label>${i18next.t('field.name')}</label> <strong>${name}</strong></div>\n <div><label>${i18next.t('field.description')}</label> ${description}</div>\n <div>\n <label>${i18next.t('field.status')}</label> <span></span> <strong\n >${i18next.t('label.activity-state-' + state)}</strong\n >\n </div>\n <div><label>${i18next.t('field.round')}</label> <strong>${round}</strong></div>\n <div><label>${i18next.t('field.approval-order')}</label> <strong>${order}</strong></div>\n <div><label>${i18next.t('field.assignee')}</label> <strong>${assignee?.name}</strong></div>\n <div><label>${i18next.t('field.approver')}</label> <strong>${approver?.name}</strong></div>\n <div>\n <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}\n </div>\n <div><label>${i18next.t('field.due-at')}</label> ${dueAt && formatter.format(new Date(dueAt))}</div>\n <div><label>since</label> ${createdAt && formatter.format(new Date(createdAt))}</div>\n </div>\n\n ${activityApprovals && activityApprovals.length > 0\n ? html` <activity-thread-timeline .activityThread=${activityThread} short-form></activity-thread-timeline> `\n : nothing}\n ${thumbnail\n ? html` <div thumbnail>\n <img src=${thumbnail} />\n </div>`\n : html``}\n `\n }\n\n stateChanged(state) {\n this.context = state.route.context\n }\n}\n"]}

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

@@ -168,7 +168,7 @@ ActivityInstanceContextTemplate.styles = [
       [info],
       [assignees] {
         padding: var(--padding-default);
-        border-bottom: var(--border-dark-color);
+        border-bottom: var(--border-dim-color);
         color: var(--md-sys-color-secondary);
       }
@@ -242,7 +242,7 @@ ActivityInstanceContextTemplate.styles = [
       section input {
         display: inline-block;
         width: 70%;
-        border: var(--border-dark-color);
+        border: var(--border-dim-color);
         border-width: 0 0 1px 0;
         margin-top: var(--margin-default);
         font-size: var(--fontsize-large);

package/dist-client/templates/activity-instance-context-template.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"activity-instance-context-template.js","sourceRoot":"","sources":["../../client/templates/activity-instance-context-template.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js'\nimport { store } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n@customElement('activity-instance-context-template')\nclass ActivityInstanceContextTemplate extends connect(store)(LitElement) {\n static styles = [\n ContextToolbarOverlayStyle,\n css`\n :host {\n background-color: var(--md-sys-color-surface);\n width: 100%;\n min-width: 450px;\n max-height: 100%;\n overflow: auto;\n --context-ui-padding: 0;\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 :host:before {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border: 22px solid transparent;\n border-left-color: var(--worklist-status-color);\n border-right: 0;\n }\n\n [info],\n [assignees] {\n padding: var(--padding-default);\n border-bottom: var(--border-dark-color);\n color: var(--md-sys-color-secondary);\n }\n\n [info] div {\n display: flex;\n align-items: center;\n padding: var(--padding-narrow);\n border-radius: var(--border-radius);\n text-align: right;\n clear: both;\n overflow: hidden;\n }\n\n [info] div:nth-child(odd) {\n background-color: var(--md-sys-color-background);\n }\n\n [info] label {\n display: inline-block;\n width: 25%;\n text-align: right;\n margin-right: 20px;\n }\n\n [info] span {\n width: 15px;\n height: 15px;\n background-color: var(--worklist-status-color, tomato);\n display: inline-block;\n border-radius: 50%;\n }\n\n :host:before {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border: 22px solid transparent;\n border-left-color: var(--worklist-status-color);\n border-right: 0;\n }\n\n section {\n padding: var(--padding-default);\n color: var(--md-sys-color-secondary);\n }\n\n section label {\n display: inline-block;\n width: 25%;\n margin-top: var(--margin-default);\n }\n\n [assignees] {\n text-align: right;\n clear: both;\n overflow: hidden;\n }\n\n [assignees] label {\n display: inline-block;\n padding-left: var(--padding-narrow);\n width: 25%;\n text-align: left;\n }\n\n [assignees] md-elevated-button {\n float: right;\n }\n\n section input {\n display: inline-block;\n width: 70%;\n border: var(--border-dark-color);\n border-width: 0 0 1px 0;\n margin-top: var(--margin-default);\n font-size: var(--fontsize-large);\n }\n\n [thumbnail] {\n display: flex;\n justify-content: center;\n align-items: center;\n margin: var(--margin-default);\n }\n\n img {\n max-width: 85%;\n height: auto;\n }\n `\n ]\n\n @property({ type: Object }) private activityInstance\n\n @state() private context\n\n render() {\n const activityInstance = this.context.activityInstance \|\| this.activityInstance \|\| {}\n const { activity, name, description, state, assignees, approvalLine, assignedAt, startedAt, dueAt, thumbnail } =\n activityInstance \|\| {}\n const { startingType } = activity \|\| {}\n\n // const editable = state == 'draft'\n\n return html`\n <div flow>\n ${approvalLine\n ? html`\n <approval-line-view\n .model=${approvalLine}\n @click=${() => this.onClickApprovalLine(activityInstance)}\n @change=${e => (activityInstance.approvalLine = e.currentTarget.value)}\n ></approval-line-view>\n `\n : html`<md-elevated-button @click=${() => this.onClickApprovalLine(activityInstance)}>\n <md-icon slot=\"icon\">group_add</md-icon>\n </md-elevated-button>`}\n </div>\n\n <div info>\n <div><label>${i18next.t('field.name')}</label> <strong>${name}</strong></div>\n <div><label>${i18next.t('field.description')}</label> ${description}</div>\n <div>\n <label>${i18next.t('field.status')}</label> <span></span> <strong\n >${i18next.t('label.activity-state-' + state)}</strong\n >\n </div>\n <div>\n <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}\n </div>\n <div><label>${i18next.t('field.due-at')}</label> ${dueAt && formatter.format(new Date(dueAt))}</div>\n <div><label>${i18next.t('field.started-at')}</label> ${startedAt && formatter.format(new Date(startedAt))}</div>\n </div>\n\n ${startingType == 'issue'\n ? html`<div assignees>\n <div>\n <label>${i18next.t('field.assignees')}</label>\n ${assignees\n ? html`\n <assignees-view\n .value=${assignees}\n @click=${() => this.onClickAssignees(activityInstance)}\n @change=${e => (activityInstance.assignees = e.currentTarget.value)}\n ></assignees-view>\n `\n : html`<md-elevated-button @click=${() => this.onClickAssignees(activityInstance)}>\n <md-icon slot=\"icon\">group_add</md-icon>\n </md-elevated-button>`}\n </div>\n </div>`\n : html``}\n ${thumbnail\n ? html` <div thumbnail>\n <img src=${thumbnail} />\n </div>`\n : html``}\n `\n }\n\n stateChanged(state) {\n this.context = state.route.context\n }\n\n onClickAssignees(activityInstance) {\n const { assignees } = activityInstance \|\| {}\n\n const popup = openPopup(\n html`\n <assignees-editor-popup\n .value=${assignees}\n .confirmCallback=${value => {\n activityInstance.assignees = value\n this.requestUpdate()\n }}\n ></assignees-editor-popup>\n `,\n {\n backdrop: true,\n help: 'organization/assignees-editor',\n size: 'large',\n title: i18next.t('title.assignee list')\n }\n )\n popup.onclosed = () => {}\n }\n\n onClickApprovalLine(activityInstance) {\n const { approvalLine } = activityInstance \|\| {}\n\n const popup = openPopup(\n html`\n <approval-line-items-editor-popup\n .value=${approvalLine}\n .confirmCallback=${value => {\n activityInstance.approvalLine = value\n this.requestUpdate()\n }}\n ></approval-line-items-editor-popup>\n `,\n {\n backdrop: true,\n help: 'organization/approval-line-items-editor',\n size: 'large',\n title: i18next.t('title.approval-line item list')\n }\n )\n popup.onclosed = () => {}\n }\n}\n"]}
1	+ {"version":3,"file":"activity-instance-context-template.js","sourceRoot":"","sources":["../../client/templates/activity-instance-context-template.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js'\nimport { store } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n@customElement('activity-instance-context-template')\nclass ActivityInstanceContextTemplate extends connect(store)(LitElement) {\n static styles = [\n ContextToolbarOverlayStyle,\n css`\n :host {\n background-color: var(--md-sys-color-surface);\n width: 100%;\n min-width: 450px;\n max-height: 100%;\n overflow: auto;\n --context-ui-padding: 0;\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 :host:before {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border: 22px solid transparent;\n border-left-color: var(--worklist-status-color);\n border-right: 0;\n }\n\n [info],\n [assignees] {\n padding: var(--padding-default);\n border-bottom: var(--border-dim-color);\n color: var(--md-sys-color-secondary);\n }\n\n [info] div {\n display: flex;\n align-items: center;\n padding: var(--padding-narrow);\n border-radius: var(--border-radius);\n text-align: right;\n clear: both;\n overflow: hidden;\n }\n\n [info] div:nth-child(odd) {\n background-color: var(--md-sys-color-background);\n }\n\n [info] label {\n display: inline-block;\n width: 25%;\n text-align: right;\n margin-right: 20px;\n }\n\n [info] span {\n width: 15px;\n height: 15px;\n background-color: var(--worklist-status-color, tomato);\n display: inline-block;\n border-radius: 50%;\n }\n\n :host:before {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border: 22px solid transparent;\n border-left-color: var(--worklist-status-color);\n border-right: 0;\n }\n\n section {\n padding: var(--padding-default);\n color: var(--md-sys-color-secondary);\n }\n\n section label {\n display: inline-block;\n width: 25%;\n margin-top: var(--margin-default);\n }\n\n [assignees] {\n text-align: right;\n clear: both;\n overflow: hidden;\n }\n\n [assignees] label {\n display: inline-block;\n padding-left: var(--padding-narrow);\n width: 25%;\n text-align: left;\n }\n\n [assignees] md-elevated-button {\n float: right;\n }\n\n section input {\n display: inline-block;\n width: 70%;\n border: var(--border-dim-color);\n border-width: 0 0 1px 0;\n margin-top: var(--margin-default);\n font-size: var(--fontsize-large);\n }\n\n [thumbnail] {\n display: flex;\n justify-content: center;\n align-items: center;\n margin: var(--margin-default);\n }\n\n img {\n max-width: 85%;\n height: auto;\n }\n `\n ]\n\n @property({ type: Object }) private activityInstance\n\n @state() private context\n\n render() {\n const activityInstance = this.context.activityInstance \|\| this.activityInstance \|\| {}\n const { activity, name, description, state, assignees, approvalLine, assignedAt, startedAt, dueAt, thumbnail } =\n activityInstance \|\| {}\n const { startingType } = activity \|\| {}\n\n // const editable = state == 'draft'\n\n return html`\n <div flow>\n ${approvalLine\n ? html`\n <approval-line-view\n .model=${approvalLine}\n @click=${() => this.onClickApprovalLine(activityInstance)}\n @change=${e => (activityInstance.approvalLine = e.currentTarget.value)}\n ></approval-line-view>\n `\n : html`<md-elevated-button @click=${() => this.onClickApprovalLine(activityInstance)}>\n <md-icon slot=\"icon\">group_add</md-icon>\n </md-elevated-button>`}\n </div>\n\n <div info>\n <div><label>${i18next.t('field.name')}</label> <strong>${name}</strong></div>\n <div><label>${i18next.t('field.description')}</label> ${description}</div>\n <div>\n <label>${i18next.t('field.status')}</label> <span></span> <strong\n >${i18next.t('label.activity-state-' + state)}</strong\n >\n </div>\n <div>\n <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}\n </div>\n <div><label>${i18next.t('field.due-at')}</label> ${dueAt && formatter.format(new Date(dueAt))}</div>\n <div><label>${i18next.t('field.started-at')}</label> ${startedAt && formatter.format(new Date(startedAt))}</div>\n </div>\n\n ${startingType == 'issue'\n ? html`<div assignees>\n <div>\n <label>${i18next.t('field.assignees')}</label>\n ${assignees\n ? html`\n <assignees-view\n .value=${assignees}\n @click=${() => this.onClickAssignees(activityInstance)}\n @change=${e => (activityInstance.assignees = e.currentTarget.value)}\n ></assignees-view>\n `\n : html`<md-elevated-button @click=${() => this.onClickAssignees(activityInstance)}>\n <md-icon slot=\"icon\">group_add</md-icon>\n </md-elevated-button>`}\n </div>\n </div>`\n : html``}\n ${thumbnail\n ? html` <div thumbnail>\n <img src=${thumbnail} />\n </div>`\n : html``}\n `\n }\n\n stateChanged(state) {\n this.context = state.route.context\n }\n\n onClickAssignees(activityInstance) {\n const { assignees } = activityInstance \|\| {}\n\n const popup = openPopup(\n html`\n <assignees-editor-popup\n .value=${assignees}\n .confirmCallback=${value => {\n activityInstance.assignees = value\n this.requestUpdate()\n }}\n ></assignees-editor-popup>\n `,\n {\n backdrop: true,\n help: 'organization/assignees-editor',\n size: 'large',\n title: i18next.t('title.assignee list')\n }\n )\n popup.onclosed = () => {}\n }\n\n onClickApprovalLine(activityInstance) {\n const { approvalLine } = activityInstance \|\| {}\n\n const popup = openPopup(\n html`\n <approval-line-items-editor-popup\n .value=${approvalLine}\n .confirmCallback=${value => {\n activityInstance.approvalLine = value\n this.requestUpdate()\n }}\n ></approval-line-items-editor-popup>\n `,\n {\n backdrop: true,\n help: 'organization/approval-line-items-editor',\n size: 'large',\n title: i18next.t('title.approval-line item list')\n }\n )\n popup.onclosed = () => {}\n }\n}\n"]}

package/dist-client/templates/activity-thread-context-template.js CHANGED Viewed

@@ -103,7 +103,7 @@ ActivityThreadContextTemplate.styles = [
       div[info] {
         padding: var(--padding-default);
-        border-bottom: var(--border-dark-color);
+        border-bottom: var(--border-dim-color);
         color: var(--md-sys-color-secondary);
         div {

package/dist-client/templates/activity-thread-context-template.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"activity-thread-context-template.js","sourceRoot":"","sources":["../../client/templates/activity-thread-context-template.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\nimport '../components/activity-thread-timeline'\n\nimport { html, css, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js'\nimport { store } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n@customElement('activity-thread-context-template')\nclass ActivityThreadContextTemplate extends connect(store)(LitElement) {\n static styles = [\n ContextToolbarOverlayStyle,\n css`\n :host {\n background-color: var(--md-sys-color-surface);\n width: 100%;\n min-width: 450px;\n max-height: 100%;\n overflow: auto;\n --context-ui-padding: 0;\n }\n\n :host([state='assigned']) {\n --worklist-status-color: #5f7184;\n }\n\n :host([state='started']) {\n --worklist-status-color: #56af45;\n }\n\n :host([state='delegated']) {\n --worklist-status-color: #8654b0;\n }\n\n :host([state='submitted']) {\n --worklist-status-color: #428df3;\n }\n\n :host([state='escalated']) {\n --worklist-status-color: #595de5;\n }\n\n :host([state='rejected']) {\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 :host:before {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border: 22px solid transparent;\n border-left-color: var(--worklist-status-color);\n border-right: 0;\n }\n\n div[info] {\n padding: var(--padding-default);\n border-bottom: var(--border-~~dark~~-color);\n color: var(--md-sys-color-secondary);\n\n div {\n display: flex;\n align-items: center;\n padding: var(--padding-narrow);\n border-radius: var(--border-radius);\n text-align: right;\n clear: both;\n overflow: hidden;\n }\n\n div:nth-child(odd) {\n background-color: var(--md-sys-color-background);\n }\n\n label {\n display: inline-block;\n width: 25%;\n text-align: right;\n margin-right: 20px;\n }\n\n span {\n width: 15px;\n height: 15px;\n background-color: var(--worklist-status-color, tomato);\n display: inline-block;\n border-radius: 50%;\n }\n }\n\n activity-thread-timeline {\n margin: var(--margin-default);\n }\n `\n ]\n\n @property({ type: Object }) private activityThread\n\n @state() private context\n\n render() {\n const activityThread = this.context.activityThread \|\| this.activityThread \|\| {}\n\n const { state, round, dueAt, assignedAt, terminatedAt, assignee, activityInstance, activityApprovals } =\n activityThread \|\| {}\n const { name, description, approvalLine } = activityInstance \|\| {}\n\n return html`\n <div flow>\n <div approval-line>\n ${approvalLine ? html` <approval-line-view .model=${approvalLine}></approval-line-view> ` : html``}\n </div>\n </div>\n\n <div info>\n <div><label>${i18next.t('field.name')}</label> <strong>${name}</strong></div>\n <div><label>${i18next.t('field.description')}</label> ${description}</div>\n <div>\n <label>${i18next.t('field.status')}</label> <span></span> <strong\n >${i18next.t('label.activity-state-' + state)}</strong\n >\n </div>\n <div><label>${i18next.t('field.round')}</label> <strong>${round}</strong></div>\n <div><label>${i18next.t('field.assignee')}</label> <strong>${assignee?.name}</strong></div>\n <div>\n <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}\n </div>\n <div><label>${i18next.t('field.due-at')}</label> ${dueAt && formatter.format(new Date(dueAt))}</div>\n <div>\n <label>${i18next.t('field.terminated-at')}</label> ${terminatedAt && formatter.format(new Date(terminatedAt))}\n </div>\n </div>\n\n <activity-thread-timeline .activityThread=${activityThread} short-form></activity-thread-timeline>\n `\n }\n\n stateChanged(state) {\n this.context = state.route.context\n }\n}\n"]}
1	+ {"version":3,"file":"activity-thread-context-template.js","sourceRoot":"","sources":["../../client/templates/activity-thread-context-template.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\nimport '../components/activity-thread-timeline'\n\nimport { html, css, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js'\nimport { store } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n@customElement('activity-thread-context-template')\nclass ActivityThreadContextTemplate extends connect(store)(LitElement) {\n static styles = [\n ContextToolbarOverlayStyle,\n css`\n :host {\n background-color: var(--md-sys-color-surface);\n width: 100%;\n min-width: 450px;\n max-height: 100%;\n overflow: auto;\n --context-ui-padding: 0;\n }\n\n :host([state='assigned']) {\n --worklist-status-color: #5f7184;\n }\n\n :host([state='started']) {\n --worklist-status-color: #56af45;\n }\n\n :host([state='delegated']) {\n --worklist-status-color: #8654b0;\n }\n\n :host([state='submitted']) {\n --worklist-status-color: #428df3;\n }\n\n :host([state='escalated']) {\n --worklist-status-color: #595de5;\n }\n\n :host([state='rejected']) {\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 :host:before {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border: 22px solid transparent;\n border-left-color: var(--worklist-status-color);\n border-right: 0;\n }\n\n div[info] {\n padding: var(--padding-default);\n border-bottom: var(--border-dim-color);\n color: var(--md-sys-color-secondary);\n\n div {\n display: flex;\n align-items: center;\n padding: var(--padding-narrow);\n border-radius: var(--border-radius);\n text-align: right;\n clear: both;\n overflow: hidden;\n }\n\n div:nth-child(odd) {\n background-color: var(--md-sys-color-background);\n }\n\n label {\n display: inline-block;\n width: 25%;\n text-align: right;\n margin-right: 20px;\n }\n\n span {\n width: 15px;\n height: 15px;\n background-color: var(--worklist-status-color, tomato);\n display: inline-block;\n border-radius: 50%;\n }\n }\n\n activity-thread-timeline {\n margin: var(--margin-default);\n }\n `\n ]\n\n @property({ type: Object }) private activityThread\n\n @state() private context\n\n render() {\n const activityThread = this.context.activityThread \|\| this.activityThread \|\| {}\n\n const { state, round, dueAt, assignedAt, terminatedAt, assignee, activityInstance, activityApprovals } =\n activityThread \|\| {}\n const { name, description, approvalLine } = activityInstance \|\| {}\n\n return html`\n <div flow>\n <div approval-line>\n ${approvalLine ? html` <approval-line-view .model=${approvalLine}></approval-line-view> ` : html``}\n </div>\n </div>\n\n <div info>\n <div><label>${i18next.t('field.name')}</label> <strong>${name}</strong></div>\n <div><label>${i18next.t('field.description')}</label> ${description}</div>\n <div>\n <label>${i18next.t('field.status')}</label> <span></span> <strong\n >${i18next.t('label.activity-state-' + state)}</strong\n >\n </div>\n <div><label>${i18next.t('field.round')}</label> <strong>${round}</strong></div>\n <div><label>${i18next.t('field.assignee')}</label> <strong>${assignee?.name}</strong></div>\n <div>\n <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}\n </div>\n <div><label>${i18next.t('field.due-at')}</label> ${dueAt && formatter.format(new Date(dueAt))}</div>\n <div>\n <label>${i18next.t('field.terminated-at')}</label> ${terminatedAt && formatter.format(new Date(terminatedAt))}\n </div>\n </div>\n\n <activity-thread-timeline .activityThread=${activityThread} short-form></activity-thread-timeline>\n `\n }\n\n stateChanged(state) {\n this.context = state.route.context\n }\n}\n"]}