@things-factory/worklist 6.2.25 → 6.2.26

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 (22) hide show
  1. package/client/components/activity-approval-ribon.ts +0 -1
  2. package/client/components/activity-instance-ribon.ts +0 -1
  3. package/client/components/activity-thread-ribon.ts +10 -21
  4. package/client/pages/activity-thread/activity-thread-page.ts +5 -0
  5. package/client/pages/activity-thread/activity-thread-view-page.ts +5 -0
  6. package/client/templates/activity-thread-context-template.ts +23 -16
  7. package/dist-client/components/activity-approval-ribon.js +0 -1
  8. package/dist-client/components/activity-approval-ribon.js.map +1 -1
  9. package/dist-client/components/activity-instance-ribon.js +0 -1
  10. package/dist-client/components/activity-instance-ribon.js.map +1 -1
  11. package/dist-client/components/activity-thread-ribon.js +12 -23
  12. package/dist-client/components/activity-thread-ribon.js.map +1 -1
  13. package/dist-client/pages/activity-thread/activity-thread-page.js +5 -0
  14. package/dist-client/pages/activity-thread/activity-thread-page.js.map +1 -1
  15. package/dist-client/pages/activity-thread/activity-thread-view-page.js +5 -0
  16. package/dist-client/pages/activity-thread/activity-thread-view-page.js.map +1 -1
  17. package/dist-client/templates/activity-thread-context-template.js +21 -15
  18. package/dist-client/templates/activity-thread-context-template.js.map +1 -1
  19. package/dist-client/tsconfig.tsbuildinfo +1 -1
  20. package/dist-server/tsconfig.tsbuildinfo +1 -1
  21. package/package.json +2 -2
  22. package/translations/ko.json +2 -2
package/dist-client/templates/activity-thread-context-template.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { __decorate, __metadata } from "tslib";
2
2
  import '@material/mwc-icon';
3
3
  import '@things-factory/organization/dist-client/component/approval-line-view.js';
4
- import { html, css, LitElement } from 'lit';
4
+ import { html, css, LitElement, nothing } from 'lit';
5
5
  import { customElement, property, state } from 'lit/decorators.js';
6
6
  import { connect } from 'pwa-helpers/connect-mixin';
7
7
  import { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js';
@@ -11,7 +11,7 @@ const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full
11
11
  let ActivityThreadContextTemplate = class ActivityThreadContextTemplate extends connect(store)(LitElement) {
12
12
  render() {
13
13
  const activityThread = this.context.activityThread || this.activityThread || {};
14
- const { state, round, dueAt, assignedAt, assignee, activityInstance, activityApprovals } = activityThread || {};
14
+ const { state, round, dueAt, assignedAt, terminatedAt, assignee, activityInstance, activityApprovals } = activityThread || {};
15
15
  const { name, description, thumbnail, approvalLine } = activityInstance || {};
16
16
  return html `
17
17
  <div flow>
@@ -34,16 +34,22 @@ let ActivityThreadContextTemplate = class ActivityThreadContextTemplate extends
34
34
  <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}
35
35
  </div>
36
36
  <div><label>${i18next.t('field.due-at')}</label> ${dueAt && formatter.format(new Date(dueAt))}</div>
37
+ <div>
38
+ <label>${i18next.t('field.terminated-at')}</label> ${terminatedAt && formatter.format(new Date(terminatedAt))}
39
+ </div>
37
40
  </div>
38
41
 
39
- <div timeline>
40
- <span subtitle>${i18next.t('label.review-and-approval')}</span>
41
-
42
- <ol>
43
- ${activityApprovals.map(approval => this.renderActivityApproval(approval))}
44
- </ol>
45
- </div>
42
+ ${activityApprovals && activityApprovals.length > 0
43
+ ? html `
44
+ <div timeline>
45
+ <span subtitle>${i18next.t('label.review-and-approval')}</span>
46
46
 
47
+ <ol>
48
+ ${activityApprovals.map(approval => this.renderActivityApproval(approval))}
49
+ </ol>
50
+ </div>
51
+ `
52
+ : nothing}
47
53
  ${thumbnail
48
54
  ? html ` <div thumbnail>
49
55
  <img src=${thumbnail} />
@@ -169,18 +175,18 @@ ActivityThreadContextTemplate.styles = [
169
175
  }
170
176
  [timeline] li {
171
177
  display: flex;
172
- border:none;
178
+ border: none;
173
179
  }
174
180
  [timeline] [info] {
175
181
  flex: 1;
176
- color:initial;
182
+ color: initial;
177
183
  }
178
184
  [timeline] [date] {
179
185
  opacity: 0.7;
180
- flex:initial;
186
+ flex: initial;
181
187
  width: 110px;
182
188
  font-size: var(--fontsize-small);
183
- color:var(--primary-text-color);
189
+ color: var(--primary-text-color);
184
190
  }
185
191
  [timeline] [info] strong {
186
192
  float: right;
@@ -189,14 +195,14 @@ ActivityThreadContextTemplate.styles = [
189
195
  margin: 0 var(--margin-narrow);
190
196
  display: block;
191
197
  border-radius: 50%;
192
- flex:initial;
198
+ flex: initial;
193
199
  width: 12px;
194
200
  height: 12px;
195
201
  position: relative;
196
202
  top: 3px;
197
203
  border: 2px solid #fff;
198
204
  background-color: var(--worklist-status-color, tomato);
199
- color:var(--primary-text-color);
205
+ color: var(--primary-text-color);
200
206
  }
201
207
  [timeline] [status]::before {
202
208
  content: '';
package/dist-client/templates/activity-thread-context-template.js.map CHANGED
@@ -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 } 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: 110px;\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, 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>&nbsp;<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\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 ${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'\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: 110px;\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>&nbsp;<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"]}