npm - @things-factory/worklist - Versions diffs - 6.1.52 → 6.1.54 - Mend

@things-factory/worklist 6.1.52 → 6.1.54

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

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

@@ -15,13 +15,28 @@ let ActivityInstanceContextTemplate = class ActivityInstanceContextTemplate exte
         const { name, description, state, thumbnail, assignees, approvalLine, assignedAt, startedAt, dueAt, threadsMin, threadsMax } = activityInstance || {};
         const editable = state == 'draft';
         return html `
-      <div>
-        <div>name: ${name}</div>
-        <div>description: ${description}</div>
-        <div>state: ${state}</div>
-        <div>assigned at: ${assignedAt && formatter.format(new Date(assignedAt))}</div>
-        <div>due at: ${dueAt && formatter.format(new Date(dueAt))}</div>
-        <div>started at: ${startedAt && formatter.format(new Date(startedAt))}</div>
+      <div flow>
+        ${approvalLine
+            ? html `
+              <approval-line-view
+                .model=${approvalLine}
+                @click=${() => this.onClickApprovalLine(activityInstance)}
+                @change=${e => (activityInstance.approvalLine = e.currentTarget.value)}
+              ></approval-line-view>
+            `
+            : html `<mwc-icon-button
+              icon="group_add"
+              @click=${() => this.onClickApprovalLine(activityInstance)}
+            ></mwc-icon-button>`}
+      </div>
+      <div info>
+        <div><label>name</label> <strong>${name}</strong></div>
+        <div><label>description</label> ${description}</div>
+        <div><label>state</label> <span></span> <strong>${state}</strong></div>
+        <div><label>assigned at</label> ${assignedAt && formatter.format(new Date(assignedAt))}</div>
+        <div><label>due at</label> ${dueAt && formatter.format(new Date(dueAt))}</div>
+        <div><label>started at</label> ${startedAt && formatter.format(new Date(startedAt))}</div>
       </div>
       <div>
@@ -41,21 +56,7 @@ let ActivityInstanceContextTemplate = class ActivityInstanceContextTemplate exte
               ></mwc-icon-button>`}
         </div>
-        <div>
-          <label>Approval Line</label>
-          ${approvalLine
-            ? html `
-                <approval-line-view
-                  .model=${approvalLine}
-                  @click=${() => this.onClickApprovalLine(activityInstance)}
-                  @change=${e => (activityInstance.approvalLine = e.currentTarget.value)}
-                ></approval-line-view>
-              `
-            : html `<mwc-icon-button
-                icon="group_add"
-                @click=${() => this.onClickApprovalLine(activityInstance)}
-              ></mwc-icon-button>`}
-        </div>
         <section>
           <label for="threads-min">Threads Min</label>
@@ -123,15 +124,120 @@ ActivityInstanceContextTemplate.styles = [
     ContextToolbarOverlayStyle,
     css `
       :host {
-        background-color: white;
+        background-color: var(--theme-white-color);
         width: 100%;
-        padding: 5px;
+        min-width:450px;
         overflow: auto;
+        --context-ui-padding:0;
+      }
+      :host([state='draft']) {
+        --worklist-status-color: #5f7184;
+      }
+      :host([state='issued']) {
+        --worklist-status-color: #56af45;
+      }
+      :host([state='pending-assignment']) {
+        --worklist-status-color: #8654b0;
+      }
+      :host([state='assigned']) {
+        --worklist-status-color: #428df3;
+      }
+      :host([state='started']) {
+        --worklist-status-color: #595de5;
+      }
+      :host([state='pending']) {
+        --worklist-status-color: #f27429;
+      }
+      :host([state='ended']) {
+        --worklist-status-color: #02acae;
+      }
+      :host([state='aborted']) {
+        --worklist-status-color: #cb3a33;
+      }
+      [info], [assignees]{
+        padding:var(--padding-default);
+        border-bottom:var(--border-dark-color);
+        color:var(--secondary-color)
+      }
+      [info] div{
+        padding:var(--padding-narrow);
+        border-radius:var(--border-radius);
+        text-align:right;
+        clear:both;
+        overflow: hidden;
+      }
+      [info] div *{
+        vertical-align:middle;
+      }
+      [info] div:nth-child(odd){
+        background-color:var(--main-section-background-color);
+      }
+      [info] label{
+        display:inline-block;
+        width:25%;
+        float:left;
+        text-align:left;
+      }
+      [info] span{
+        width:15px;
+        height:15px;
+        background-color:var(--worklist-status-color, tomato);
+        display:inline-block;
+        border-radius:50%;
+      }
+      :host:before {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        border: 22px solid transparent;
+        border-left-color: var(--worklist-status-color);
+        border-right: 0;
+      }
+      section{
+        padding:var(--padding-default);
+        color:var(--secondary-color)
+      }
+      section label{
+        display:inline-block;
+        width:25%;
+        margin-top:var(--margin-default);
+      }
+      [assignees]{
+        text-align:right;
+        clear:both;
+        overflow: hidden;
+      }
+      [assignees] label{
+        display:inline-block;
+        padding-left: var(--padding-narrow);
+        width:25%;
+        float:left;
+        text-align:left;
+      }
+      [assignees] mwc-icon-button{
+        float:right
+      }
+      section input{
+        display:inline-block;
+        width:70%;
+        border:var(--border-dark-color);
+        border-width:0 0 1px 0;
+        margin-top:var(--margin-default);
+        font-size:var(--fontsize-large);
       }
       img {
-        max-width: 200px;
+        max-width: 85%;
       }
     `
 ];

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/mwc-icon'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, 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: white;\n\n width: 100%;\n padding: 5px;\n overflow: auto;\n }\n\n img {\n max-width: 200px;\n }\n `\n ]\n\n @state() private context\n\n render() {\n const activityInstance = this.context.activityInstance \|\| {}\n const {\n name,\n description,\n state,\n thumbnail,\n assignees,\n approvalLine,\n assignedAt,\n startedAt,\n dueAt,\n threadsMin,\n threadsMax\n } = activityInstance \|\| {}\n\n const editable = state == 'draft'\n\n return html`\n <div>\n <div>name: ${name}</div>\n <div>description: ${description}</div>\n <div>state: ${state}</div>\n <div>assigned at: ${assignedAt && formatter.format(new Date(assignedAt))}</div>\n <div>due at: ${dueAt && formatter.format(new Date(dueAt))}</div>\n <div>started at: ${startedAt && formatter.format(new Date(startedAt))}</div>\n </div>\n\n <div>\n <div assignees>\n <label>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`<mwc-icon-button\n icon=\"group_add\"\n @click=${() => this.onClickAssignees(activityInstance)}\n ></mwc-icon-button>`}\n </div>\n\n <div>\n <label>Approval Line</label>\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`<mwc-icon-button\n icon=\"group_add\"\n @click=${() => this.onClickApprovalLine(activityInstance)}\n ></mwc-icon-button>`}\n </div>\n\n <section>\n <label for=\"threads-min\">Threads Min</label>\n <input\n id=\"threadsMin\"\n type=\"number\"\n .value=${threadsMin \|\| 0}\n @change=${e => (activityInstance.threadsMin = e.currentTarget.valueAsNumber)}\n />\n\n <label for=\"threads-max\">Threads Max</label>\n <input\n id=\"threads-max\"\n type=\"number\"\n .value=${threadsMax \|\| 0}\n @change=${e => (activityInstance.threadsMax = e.currentTarget.valueAsNumber)}\n />\n </section>\n\n <img src=${thumbnail} />\n </div>\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/mwc-icon'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, 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(--theme-white-color);\n width: 100%;\n min-width:450px;\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 [info], [assignees]{\n padding:var(--padding-default);\n border-bottom:var(--border-dark-color);\n color:var(--secondary-color)\n }\n [info] div{\n padding:var(--padding-narrow);\n border-radius:var(--border-radius);\n text-align:right;\n clear:both;\n overflow: hidden;\n }\n [info] div *{\n vertical-align:middle;\n }\n [info] div:nth-child(odd){\n background-color:var(--main-section-background-color);\n }\n [info] label{\n display:inline-block;\n width:25%;\n float:left;\n text-align:left;\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 section{\n padding:var(--padding-default);\n color:var(--secondary-color)\n }\n section label{\n display:inline-block;\n width:25%;\n margin-top:var(--margin-default);\n }\n [assignees]{\n text-align:right;\n clear:both;\n overflow: hidden;\n }\n [assignees] label{\n display:inline-block;\n padding-left: var(--padding-narrow);\n width:25%;\n float:left;\n text-align:left;\n }\n [assignees] mwc-icon-button{\n float:right\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 img {\n max-width: 85%;\n }\n `\n ]\n\n @state() private context\n\n render() {\n const activityInstance = this.context.activityInstance \|\| {}\n const {\n name,\n description,\n state,\n thumbnail,\n assignees,\n approvalLine,\n assignedAt,\n startedAt,\n dueAt,\n threadsMin,\n threadsMax\n } = activityInstance \|\| {}\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`<mwc-icon-button\n icon=\"group_add\"\n @click=${() => this.onClickApprovalLine(activityInstance)}\n ></mwc-icon-button>`}\n </div>\n \n <div info>\n <div><label>name</label> <strong>${name}</strong></div>\n <div><label>description</label> ${description}</div>\n <div><label>state</label> <span></span> <strong>${state}</strong></div>\n <div><label>assigned at</label> ${assignedAt && formatter.format(new Date(assignedAt))}</div>\n <div><label>due at</label> ${dueAt && formatter.format(new Date(dueAt))}</div>\n <div><label>started at</label> ${startedAt && formatter.format(new Date(startedAt))}</div>\n </div>\n\n <div>\n <div assignees>\n <label>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`<mwc-icon-button\n icon=\"group_add\"\n @click=${() => this.onClickAssignees(activityInstance)}\n ></mwc-icon-button>`}\n </div>\n\n \n\n <section>\n <label for=\"threads-min\">Threads Min</label>\n <input\n id=\"threadsMin\"\n type=\"number\"\n .value=${threadsMin \|\| 0}\n @change=${e => (activityInstance.threadsMin = e.currentTarget.valueAsNumber)}\n />\n\n <label for=\"threads-max\">Threads Max</label>\n <input\n id=\"threads-max\"\n type=\"number\"\n .value=${threadsMax \|\| 0}\n @change=${e => (activityInstance.threadsMax = e.currentTarget.valueAsNumber)}\n />\n </section>\n\n <img src=${thumbnail} />\n </div>\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"]}