npm - @things-factory/worklist - Versions diffs - 6.2.95 → 6.2.97 - Mend

@things-factory/worklist 6.2.95 → 6.2.97

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

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

@@ -1,6 +1,7 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/mwc-icon';
 import '@things-factory/organization/dist-client/component/approval-line-view.js';
+import '../components/activity-approval-timeline';
 import { html, css, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { connect } from 'pwa-helpers/connect-mixin';
@@ -15,41 +16,21 @@ let ActivityThreadContextTemplate = class ActivityThreadContextTemplate extends
         const { name, description, thumbnail, approvalLine } = activityInstance || {};
         return html `
       <div flow>
-        <div approval-line>
-          ${approvalLine ? html ` <approval-line-view .model=${approvalLine}></approval-line-view> ` : html ``}
-        </div>
+        <div approval-line>${approvalLine ? html ` <approval-line-view .model=${approvalLine}></approval-line-view> ` : html ``}</div>
       </div>
       <div info>
         <div><label>${i18next.t('field.name')}</label> <strong>${name}</strong></div>
         <div><label>${i18next.t('field.description')}</label> ${description}</div>
-        <div>
-          <label>${i18next.t('field.status')}</label> <span></span>&nbsp;<strong
-            >${i18next.t('label.activity-state-' + state)}</strong
-          >
-        </div>
+        <div><label>${i18next.t('field.status')}</label> <span></span>&nbsp;<strong>${i18next.t('label.activity-state-' + state)}</strong></div>
         <div><label>${i18next.t('field.round')}</label> <strong>${round}</strong></div>
         <div><label>${i18next.t('field.assignee')}</label> <strong>${assignee === null || assignee === void 0 ? void 0 : assignee.name}</strong></div>
-        <div>
-          <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}
-        </div>
+        <div><label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}</div>
         <div><label>${i18next.t('field.due-at')}</label> ${dueAt && formatter.format(new Date(dueAt))}</div>
-        <div>
-          <label>${i18next.t('field.terminated-at')}</label> ${terminatedAt && formatter.format(new Date(terminatedAt))}
-        </div>
+        <div><label>${i18next.t('field.terminated-at')}</label> ${terminatedAt && formatter.format(new Date(terminatedAt))}</div>
       </div>
-      ${activityApprovals && activityApprovals.length > 0
-            ? html `
-            <div timeline>
-              <span subtitle>${i18next.t('label.review-and-approval')}</span>
-              <ol>
-                ${activityApprovals.map(approval => this.renderActivityApproval(approval))}
-              </ol>
-            </div>
-          `
-            : nothing}
+      ${activityApprovals && activityApprovals.length > 0 ? html ` <activity-approval-timeline .activityThread=${activityThread}></activity-approval-timeline> ` : nothing}
       ${thumbnail
             ? html ` <div thumbnail>
             <img src=${thumbnail} />
@@ -57,21 +38,6 @@ let ActivityThreadContextTemplate = class ActivityThreadContextTemplate extends
             : html ``}
     `;
     }
-    renderActivityApproval(activityApproval) {
-        const { judgment, approver, comment, round, order, createdAt, terminatedAt } = activityApproval;
-        const { name, email } = approver || {};
-        return html `
-      <li>
-        <span date>${formatter.format(new Date(terminatedAt || createdAt))}</span>
-        <span status></span>
-        <span info>
-          ${i18next.t('label.activity-state-' + (judgment || 'started'))}
-          <strong><mwc-icon>account_circle</mwc-icon>${name}</strong>
-          <p>${comment}</p>
-        </span>
-      </li>
-    `;
-    }
     stateChanged(state) {
         this.context = state.route.context;
     }
@@ -83,6 +49,7 @@ ActivityThreadContextTemplate.styles = [
         background-color: var(--theme-white-color);
         width: 100%;
         min-width: 450px;
+        max-height: 100%;
         overflow: auto;
         --context-ui-padding: 0;
       }
@@ -119,121 +86,49 @@ ActivityThreadContextTemplate.styles = [
         --worklist-status-color: #cb3a33;
       }
-      div[info],
-      [assignees] {
+      :host:before {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        border: 22px solid transparent;
+        border-left-color: var(--worklist-status-color);
+        border-right: 0;
+      }
+      div[info] {
         padding: var(--padding-default);
         border-bottom: var(--border-dark-color);
         color: var(--secondary-color);
-      }
-      div[info] div {
-        display: flex;
-        align-items: center;
-        padding: var(--padding-narrow);
-        border-radius: var(--border-radius);
-        text-align: right;
-        clear: both;
-        overflow: hidden;
-      }
-      div[info] div:nth-child(odd) {
-        background-color: var(--main-section-background-color);
-      }
-      div[info] label {
-        display: inline-block;
-        width: 25%;
-        text-align: right;
-        margin-right: 20px;
-      }
-      div[info] span {
-        width: 15px;
-        height: 15px;
-        background-color: var(--worklist-status-color, tomato);
-        display: inline-block;
-        border-radius: 50%;
-      }
-      div[timeline] {
-        margin-bottom: var(--margin-default);
-        padding: var(--padding-default);
-      }
-      div[timeline] [subtitle] {
-        padding: var(--padding-narrow) var(--padding-default);
-        background-color: var(--theme-white-color);
-        border: 2px solid var(--secondary-text-color);
-        border-radius: 15px;
-        box-shadow: var(--box-shadow);
-        color: var(--secondary-text-color);
-        font-weight: bold;
-      }
-      div[timeline] ol {
-        list-style: none;
-        margin: var(--margin-default) 0 0 var(--margin-narrow);
-        padding: 0;
-      }
-      [timeline] li {
-        display: flex;
-        border: none;
-      }
-      [timeline] [info] {
-        flex: 1;
-        color: initial;
-      }
-      [timeline] [date] {
-        opacity: 0.7;
-        flex: initial;
-        width: 130px;
-        font-size: var(--fontsize-small);
-        color: var(--primary-text-color);
-      }
-      [timeline] [info] strong {
-        float: right;
-      }
-      [timeline] [status] {
-        margin: 0 var(--margin-narrow);
-        display: block;
-        border-radius: 50%;
-        flex: initial;
-        width: 12px;
-        height: 12px;
-        position: relative;
-        top: 3px;
-        border: 2px solid #fff;
-        background-color: var(--worklist-status-color, tomato);
-        color: var(--primary-text-color);
-      }
-      [timeline] [status]::before {
-        content: '';
-        height: 60px;
-        width: 2px;
-        display: block;
-        position: relative;
-        margin-left: 5px;
-        background-color: var(--worklist-status-color, tomato);
-        opacity: 0.2;
-      }
-      [timeline] [info] mwc-icon {
-        position: relative;
-        top: 3px;
-        font-size: var(--fontsize-large);
-      }
-      [timeline] [info] p {
-        background-color: #f4f4f4;
-        margin: var(--margin-narrow) 0 var(--margin-default) 0;
-        padding: var(--padding-narrow) var(--padding-default);
-        font-size: var(--fontsize-small);
-        text-align: justify;
-      }
-      [timeline] [info] p::before {
-        content: '';
-        float: right;
-        margin-top: -10px;
-        margin-right: 20px;
-        border: 7px solid transparent;
-        border-bottom-color: #f4f4f4;
-        border-top: 0;
+        div {
+          display: flex;
+          align-items: center;
+          padding: var(--padding-narrow);
+          border-radius: var(--border-radius);
+          text-align: right;
+          clear: both;
+          overflow: hidden;
+        }
+        div:nth-child(odd) {
+          background-color: var(--main-section-background-color);
+        }
+        label {
+          display: inline-block;
+          width: 25%;
+          text-align: right;
+          margin-right: 20px;
+        }
+        span {
+          width: 15px;
+          height: 15px;
+          background-color: var(--worklist-status-color, tomato);
+          display: inline-block;
+          border-radius: 50%;
+        }
       }
       [thumbnail] {

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/mwc-icon'\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\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 { ActivityApproval } from '../types/activity-approval'\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(--theme-white-color);\n width: 100%;\n min-width: 450px;\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 div[info],\n [assignees] {\n padding: var(--padding-default);\n border-bottom: var(--border-dark-color);\n color: var(--secondary-color);\n }\n\n div[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 div[info] div:nth-child(odd) {\n background-color: var(--main-section-background-color);\n }\n\n div[info] label {\n display: inline-block;\n width: 25%;\n text-align: right;\n margin-right: 20px;\n }\n\n div[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 div[timeline] {\n margin-bottom: var(--margin-default);\n padding: var(--padding-default);\n }\n div[timeline] [subtitle] {\n padding: var(--padding-narrow) var(--padding-default);\n background-color: var(--theme-white-color);\n border: 2px solid var(--secondary-text-color);\n border-radius: 15px;\n box-shadow: var(--box-shadow);\n color: var(--secondary-text-color);\n font-weight: bold;\n }\n div[timeline] ol {\n list-style: none;\n margin: var(--margin-default) 0 0 var(--margin-narrow);\n padding: 0;\n }\n [timeline] li {\n display: flex;\n border: none;\n }\n [timeline] [info] {\n flex: 1;\n color: initial;\n }\n [timeline] [date] {\n opacity: 0.7;\n flex: initial;\n width: 130px;\n font-size: var(--fontsize-small);\n color: var(--primary-text-color);\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 flex: initial;\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 color: var(--primary-text-color);\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] mwc-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 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\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 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, 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.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 ${activityApprovals && activityApprovals.length > 0\n ? html`\n <div timeline>\n <span subtitle>${i18next.t('label.review-and-approval')}</span>\n\n <ol>\n ${activityApprovals.map(approval => this.renderActivityApproval(approval))}\n </ol>\n </div>\n `\n : nothing}\n ${thumbnail\n ? html` <div thumbnail>\n <img src=${thumbnail} />\n </div>`\n : html``}\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><mwc-icon>account_circle</mwc-icon>${name}</strong>\n <p>${comment}</p>\n </span>\n </li>\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/mwc-icon'\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\nimport '../components/activity-approval-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(--theme-white-color);\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(--secondary-color);\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(--main-section-background-color);\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 [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 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 } = activityThread \|\| {}\n const { name, description, thumbnail, approvalLine } = activityInstance \|\| {}\n\n return html`\n <div flow>\n <div approval-line>${approvalLine ? html` <approval-line-view .model=${approvalLine}></approval-line-view> ` : html``}</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><label>${i18next.t('field.status')}</label> <span></span> <strong>${i18next.t('label.activity-state-' + state)}</strong></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><label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}</div>\n <div><label>${i18next.t('field.due-at')}</label> ${dueAt && formatter.format(new Date(dueAt))}</div>\n <div><label>${i18next.t('field.terminated-at')}</label> ${terminatedAt && formatter.format(new Date(terminatedAt))}</div>\n </div>\n\n ${activityApprovals && activityApprovals.length > 0 ? html` <activity-approval-timeline .activityThread=${activityThread}></activity-approval-timeline> ` : 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"]}