@things-factory/worklist 9.0.0-beta.27 → 9.0.0-beta.29

package/dist-client/route.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"route.js","sourceRoot":"","sources":["../client/route.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,IAAY;IACxC,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,eAAe;YAClB,MAAM,CAAC,0BAA0B,CAAC,CAAA;YAClC,OAAO,IAAI,CAAA;QAEb,KAAK,oBAAoB;YACvB,MAAM,CAAC,qCAAqC,CAAC,CAAA;YAC7C,OAAO,IAAI,CAAA;QAEb,KAAK,oBAAoB;YACvB,MAAM,CAAC,yCAAyC,CAAC,CAAA;YACjD,OAAO,IAAI,CAAA;QAEb,KAAK,WAAW;YACd,MAAM,CAAC,gCAAgC,CAAC,CAAA;YACxC,OAAO,IAAI,CAAA;QAEb,KAAK,WAAW;YACd,MAAM,CAAC,gCAAgC,CAAC,CAAA;YACxC,OAAO,IAAI,CAAA;QAEb,KAAK,uBAAuB;YAC1B,MAAM,CAAC,4CAA4C,CAAC,CAAA;YACpD,OAAO,IAAI,CAAA;QAEb,KAAK,oBAAoB;YACvB,MAAM,CAAC,yCAAyC,CAAC,CAAA;YACjD,OAAO,IAAI,CAAA;QAEb,KAAK,YAAY;YACf,MAAM,CAAC,iCAAiC,CAAC,CAAA;YACzC,OAAO,IAAI,CAAA;QAEb,KAAK,eAAe;YAClB,MAAM,CAAC,oCAAoC,CAAC,CAAA;YAC5C,OAAO,IAAI,CAAA;QAEb,KAAK,cAAc;YACjB,MAAM,CAAC,uCAAuC,CAAC,CAAA;YAC/C,OAAO,IAAI,CAAA;QAEb,KAAK,eAAe;YAClB,MAAM,CAAC,mDAAmD,CAAC,CAAA;YAC3D,OAAO,IAAI,CAAA;QAEb,KAAK,eAAe;YAClB,MAAM,CAAC,wCAAwC,CAAC,CAAA;YAChD,OAAO,IAAI,CAAA;QAEb,KAAK,UAAU;YACb,MAAM,CAAC,mCAAmC,CAAC,CAAA;YAC3C,OAAO,IAAI,CAAA;QAEb,KAAK,yBAAyB;YAC5B,MAAM,CAAC,2DAA2D,CAAC,CAAA;YACnE,OAAO,IAAI,CAAA;QAEb,KAAK,iBAAiB;YACpB,MAAM,CAAC,iDAAiD,CAAC,CAAA;YACzD,OAAO,IAAI,CAAA;QAEb,KAAK,sBAAsB;YACzB,MAAM,CAAC,sDAAsD,CAAC,CAAA;YAC9D,OAAO,IAAI,CAAA;QAEb,KAAK,mBAAmB;YACtB,MAAM,CAAC,qDAAqD,CAAC,CAAA;YAC7D,OAAO,IAAI,CAAA;QAEb,KAAK,wBAAwB;YAC3B,MAAM,CAAC,0DAA0D,CAAC,CAAA;YAClE,OAAO,IAAI,CAAA;QAEb,KAAK,0BAA0B;YAC7B,MAAM,CAAC,4DAA4D,CAAC,CAAA;YACpE,OAAO,IAAI,CAAA;QAEb,KAAK,wBAAwB;YAC3B,MAAM,CAAC,0DAA0D,CAAC,CAAA;YAClE,OAAO,IAAI,CAAA;QAEb,KAAK,gBAAgB;YACnB,MAAM,CAAC,+CAA+C,CAAC,CAAA;YACvD,OAAO,IAAI,CAAA;QAEb,KAAK,sBAAsB;YACzB,MAAM,CAAC,sDAAsD,CAAC,CAAA;YAC9D,OAAO,IAAI,CAAA;QAEb,KAAK,wBAAwB;YAC3B,MAAM,CAAC,uDAAuD,CAAC,CAAA;YAC/D,OAAO,IAAI,CAAA;QAEb,KAAK,2BAA2B;YAC9B,MAAM,CAAC,6DAA6D,CAAC,CAAA;YACrE,OAAO,IAAI,CAAA;QAEb,KAAK,qBAAqB;YACxB,MAAM,CAAC,iDAAiD,CAAC,CAAA;YACzD,OAAO,IAAI,CAAA;IACf,CAAC;AACH,CAAC","sourcesContent":["export default function route(page: string) {\n  switch (page) {\n    case 'worklist-home':\n      import('./pages/worklist-home.js')\n      return page\n\n    case 'worklist-dashboard':\n      import('./pages/dashboard/dashboard-home.js')\n      return page\n\n    case 'done-list-calendar':\n      import('./pages/todo/done-list-calendar-page.js')\n      return page\n\n    case 'todo-list':\n      import('./pages/todo/todo-list-page.js')\n      return page\n\n    case 'done-list':\n      import('./pages/todo/done-list-page.js')\n      return page\n\n    case 'approval-pending-list':\n      import('./pages/todo/approval-pending-list-page.js')\n      return page\n\n    case 'approval-done-list':\n      import('./pages/todo/approval-done-list-page.js')\n      return page\n\n    case 'draft-list':\n      import('./pages/todo/draft-list-page.js')\n      return page\n\n    case 'pickable-list':\n      import('./pages/todo/pickable-list-page.js')\n      return page\n\n    case 'starter-list':\n      import('./pages/activity/starter-list-page.js')\n      return page\n\n    case 'reporter-list':\n      import('./pages/activity-supervisor/reporter-list-page.js')\n      return page\n\n    case 'activity-list':\n      import('./pages/activity/activity-list-page.js')\n      return page\n\n    case 'activity':\n      import('./pages/activity/activity-page.js')\n      return page\n\n    case 'activity-instance-start':\n      import('./pages/activity-instance/activity-instance-start-page.js')\n      return page\n\n    case 'activity-thread':\n      import('./pages/activity-thread/activity-thread-page.js')\n      return page\n\n    case 'activity-thread-view':\n      import('./pages/activity-thread/activity-thread-view-page.js')\n      return page\n\n    case 'activity-approval':\n      import('./pages/activity-approval/activity-approval-page.js')\n      return page\n\n    case 'activity-instance-list':\n      import('./pages/activity-instance/activity-instance-list-page.js')\n      return page\n\n    case 'activity-instance-search':\n      import('./pages/activity-instance/activity-instance-search-page.js')\n      return page\n\n    case 'activity-template-list':\n      import('./pages/activity-template/activity-template-list-page.js')\n      return page\n\n    case 'activity-store':\n      import('./pages/activity-store/activity-store-page.js')\n      return page\n\n    case 'activity-thread-list':\n      import('./pages/activity-thread/activity-thread-list-page.js')\n      return page\n\n    case 'activity-approval-list':\n      import('./pages/activity-approval/activity-approval-list-page')\n      return page\n\n    case 'installable-activity-list':\n      import('./pages/installable-activity/installable-activity-list-page')\n      return page\n\n    case 'activity-stats-list':\n      import('./pages/activity-stats/activity-stats-list-page')\n      return page\n  }\n}\n"]}

package/dist-client/templates/activity-approval-context-template.d.ts

@@ -0,0 +1,3 @@
+import '@material/web/icon/icon.js';
+import '../components/activity-thread-timeline';
+import '@things-factory/organization/dist-client/component/approval-line-view.js';

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

@@ -0,0 +1,186 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '../components/activity-thread-timeline';
+import { html, css, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin';
+import { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js';
+import { store } from '@operato/shell';
+import { i18next } from '@operato/i18n';
+import '@things-factory/organization/dist-client/component/approval-line-view.js';
+function getSafeFormatter(locale, options) {
+    try {
+        const safeLocale = locale || 'en-US';
+        return new Intl.DateTimeFormat(safeLocale, options);
+    }
+    catch (e) {
+        console.warn(`Invalid locale or options provided: ${locale}, falling back to default en-US.`, e);
+        return new Intl.DateTimeFormat('en-US', options);
+    }
+}
+const formatter = getSafeFormatter(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
+let ActivityApprovalContextTemplate = class ActivityApprovalContextTemplate extends connect(store)(LitElement) {
+    render() {
+        const activityApproval = this.context.activityApproval || this.activityApproval || {};
+        const { round, order, approver, createdAt, activityThread } = activityApproval || {};
+        const { state, dueAt, assignedAt, assignee, activityInstance, activityApprovals } = activityThread || {};
+        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>
+
+      <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.round')}</label> <strong>${round}</strong></div>
+        <div><label>${i18next.t('field.approval-order')}</label> <strong>${order}</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.approver')}</label> <strong>${approver === null || approver === void 0 ? void 0 : approver.name}</strong></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>since</label> ${createdAt && formatter.format(new Date(createdAt))}</div>
+      </div>
+
+      ${activityApprovals && activityApprovals.length > 0
+            ? html ` <activity-thread-timeline .activityThread=${activityThread} short-form></activity-thread-timeline> `
+            : nothing}
+      ${thumbnail
+            ? html ` <div thumbnail>
+            <img src=${thumbnail} />
+          </div>`
+            : html ``}
+    `;
+    }
+    stateChanged(state) {
+        this.context = state.route.context;
+    }
+};
+ActivityApprovalContextTemplate.styles = [
+    ContextToolbarOverlayStyle,
+    css `
+      :host {
+        background-color: var(--md-sys-color-surface);
+        width: 100%;
+        min-width: 450px;
+        max-height: 100%;
+        overflow: auto;
+        --context-ui-padding: 0;
+      }
+
+      :host([state='assigned']) {
+        --worklist-status-color: #5f7184;
+      }
+
+      :host([state='started']) {
+        --worklist-status-color: #56af45;
+      }
+
+      :host([state='delegated']) {
+        --worklist-status-color: #8654b0;
+      }
+
+      :host([state='submitted']) {
+        --worklist-status-color: #428df3;
+      }
+
+      :host([state='escalated']) {
+        --worklist-status-color: #595de5;
+      }
+
+      :host([state='rejected']) {
+        --worklist-status-color: #f27429;
+      }
+
+      :host([state='ended']) {
+        --worklist-status-color: #02acae;
+      }
+
+      :host([state='aborted']) {
+        --worklist-status-color: #cb3a33;
+      }
+
+      [info],
+      [assignees] {
+        padding: var(--spacing-medium);
+        border-bottom: var(--border-dim-color);
+        color: var(--md-sys-color-secondary);
+      }
+
+      [info] div {
+        display: flex;
+        align-items: center;
+        padding: var(--spacing-small);
+        border-radius: var(--border-radius);
+        text-align: right;
+        clear: both;
+        overflow: hidden;
+      }
+
+      [info] div:nth-child(odd) {
+        background-color: var(--md-sys-color-background);
+      }
+
+      [info] label {
+        display: inline-block;
+        width: 25%;
+        text-align: right;
+        margin-right: 20px;
+      }
+
+      [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;
+      }
+
+      activity-thread-timeline {
+        margin: var(--spacing-medium);
+      }
+
+      [thumbnail] {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: var(--spacing-medium);
+      }
+
+      img {
+        max-width: 85%;
+        height: auto;
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], ActivityApprovalContextTemplate.prototype, "activityApproval", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ActivityApprovalContextTemplate.prototype, "context", void 0);
+ActivityApprovalContextTemplate = __decorate([
+    customElement('activity-approval-context-template')
+], ActivityApprovalContextTemplate);
+//# sourceMappingURL=activity-approval-context-template.js.map

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

@@ -0,0 +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\nfunction getSafeFormatter(locale: string, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat {\n  try {\n    const safeLocale = locale || 'en-US'\n    return new Intl.DateTimeFormat(safeLocale, options)\n  } catch (e) {\n    console.warn(`Invalid locale or options provided: ${locale}, falling back to default en-US.`, e)\n    return new Intl.DateTimeFormat('en-US', options)\n  }\n}\n\nconst formatter = getSafeFormatter(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\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(--spacing-medium);\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(--spacing-small);\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(--spacing-medium);\n      }\n\n      [thumbnail] {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        margin: var(--spacing-medium);\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>&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.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.d.ts

@@ -0,0 +1,3 @@
+import '@material/web/icon/icon.js';
+import '@material/web/button/elevated-button.js';
+import '@things-factory/organization/dist-client/component/approval-line-view.js';

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

@@ -0,0 +1,281 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@material/web/button/elevated-button.js';
+import { html, css, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin';
+import { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js';
+import { store } from '@operato/shell';
+import { i18next } from '@operato/i18n';
+import { openPopup } from '@operato/layout';
+import '@things-factory/organization/dist-client/component/approval-line-view.js';
+function getSafeFormatter(locale, options) {
+    try {
+        const safeLocale = locale || 'en-US';
+        return new Intl.DateTimeFormat(safeLocale, options);
+    }
+    catch (e) {
+        console.warn(`Invalid locale or options provided: ${locale}, falling back to default en-US.`, e);
+        return new Intl.DateTimeFormat('en-US', options);
+    }
+}
+const formatter = getSafeFormatter(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
+let ActivityInstanceContextTemplate = class ActivityInstanceContextTemplate extends connect(store)(LitElement) {
+    render() {
+        const activityInstance = this.context.activityInstance || this.activityInstance || {};
+        const { activity, name, description, state, assignees, approvalLine, assignedAt, startedAt, dueAt, thumbnail } = activityInstance || {};
+        const { startingType } = activity || {};
+        // const editable = state == 'draft'
+        return html `
+      <div flow>
+        ${approvalLine
+            ? html `
+              <approval-line-view
+                .model=${approvalLine}
+                @click=${() => this.onClickApprovalLine(activityInstance)}
+                @change=${e => (activityInstance.approvalLine = e.currentTarget.value)}
+              ></approval-line-view>
+            `
+            : html `<md-elevated-button @click=${() => this.onClickApprovalLine(activityInstance)}>
+              <md-icon slot="icon">group_add</md-icon>
+            </md-elevated-button>`}
+      </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.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.started-at')}</label> ${startedAt && formatter.format(new Date(startedAt))}</div>
+      </div>
+
+      ${startingType == 'issue'
+            ? html `<div assignees>
+            <div>
+              <label>${i18next.t('field.assignees')}</label>
+              ${assignees
+                ? html `
+                    <assignees-view
+                      .value=${assignees}
+                      @click=${() => this.onClickAssignees(activityInstance)}
+                      @change=${e => (activityInstance.assignees = e.currentTarget.value)}
+                    ></assignees-view>
+                  `
+                : html `<md-elevated-button @click=${() => this.onClickAssignees(activityInstance)}>
+                    <md-icon slot="icon">group_add</md-icon>
+                  </md-elevated-button>`}
+            </div>
+          </div>`
+            : html ``}
+      ${thumbnail
+            ? html ` <div thumbnail>
+            <img src=${thumbnail} />
+          </div>`
+            : html ``}
+    `;
+    }
+    stateChanged(state) {
+        this.context = state.route.context;
+    }
+    onClickAssignees(activityInstance) {
+        const { assignees } = activityInstance || {};
+        const popup = openPopup(html `
+        <assignees-editor-popup
+          .value=${assignees}
+          .confirmCallback=${value => {
+            activityInstance.assignees = value;
+            this.requestUpdate();
+        }}
+        ></assignees-editor-popup>
+      `, {
+            backdrop: true,
+            help: 'organization/assignees-editor',
+            size: 'large',
+            title: i18next.t('title.assignee list')
+        });
+        popup.onclosed = () => { };
+    }
+    onClickApprovalLine(activityInstance) {
+        const { approvalLine } = activityInstance || {};
+        const popup = openPopup(html `
+        <approval-line-items-editor-popup
+          .value=${approvalLine}
+          .confirmCallback=${value => {
+            activityInstance.approvalLine = value;
+            this.requestUpdate();
+        }}
+        ></approval-line-items-editor-popup>
+      `, {
+            backdrop: true,
+            help: 'organization/approval-line-items-editor',
+            size: 'large',
+            title: i18next.t('title.approval-line item list')
+        });
+        popup.onclosed = () => { };
+    }
+};
+ActivityInstanceContextTemplate.styles = [
+    ContextToolbarOverlayStyle,
+    css `
+      :host {
+        background-color: var(--md-sys-color-surface);
+        width: 100%;
+        min-width: 450px;
+        max-height: 100%;
+        overflow: auto;
+        --context-ui-padding: 0;
+      }
+
+      :host([state='draft']) {
+        --worklist-status-color: #5f7184;
+      }
+
+      :host([state='issued']) {
+        --worklist-status-color: #56af45;
+      }
+
+      :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;
+      }
+
+      :host:before {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        border: 22px solid transparent;
+        border-left-color: var(--worklist-status-color);
+        border-right: 0;
+      }
+
+      [info],
+      [assignees] {
+        padding: var(--spacing-medium);
+        border-bottom: var(--border-dim-color);
+        color: var(--md-sys-color-secondary);
+      }
+
+      [info] div {
+        display: flex;
+        align-items: center;
+        padding: var(--spacing-small);
+        border-radius: var(--border-radius);
+        text-align: right;
+        clear: both;
+        overflow: hidden;
+      }
+
+      [info] div:nth-child(odd) {
+        background-color: var(--md-sys-color-background);
+      }
+
+      [info] label {
+        display: inline-block;
+        width: 25%;
+        text-align: right;
+        margin-right: 20px;
+      }
+
+      [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(--spacing-medium);
+        color: var(--md-sys-color-secondary);
+      }
+
+      section label {
+        display: inline-block;
+        width: 25%;
+        margin-top: var(--spacing-medium);
+      }
+
+      [assignees] {
+        text-align: right;
+        clear: both;
+        overflow: hidden;
+      }
+
+      [assignees] label {
+        display: inline-block;
+        padding-left: var(--spacing-small);
+        width: 25%;
+        text-align: left;
+      }
+
+      [assignees] md-elevated-button {
+        float: right;
+      }
+
+      section input {
+        display: inline-block;
+        width: 70%;
+        border: var(--border-dim-color);
+        border-width: 0 0 1px 0;
+        margin-top: var(--spacing-medium);
+        font-size: var(--fontsize-large);
+      }
+
+      [thumbnail] {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: var(--spacing-medium);
+      }
+
+      img {
+        max-width: 85%;
+        height: auto;
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], ActivityInstanceContextTemplate.prototype, "activityInstance", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ActivityInstanceContextTemplate.prototype, "context", void 0);
+ActivityInstanceContextTemplate = __decorate([
+    customElement('activity-instance-context-template')
+], ActivityInstanceContextTemplate);
+//# sourceMappingURL=activity-instance-context-template.js.map

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

@@ -0,0 +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\nfunction getSafeFormatter(locale: string, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat {\n  try {\n    const safeLocale = locale || 'en-US'\n    return new Intl.DateTimeFormat(safeLocale, options)\n  } catch (e) {\n    console.warn(`Invalid locale or options provided: ${locale}, falling back to default en-US.`, e)\n    return new Intl.DateTimeFormat('en-US', options)\n  }\n}\n\nconst formatter = getSafeFormatter(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\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='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(--spacing-medium);\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(--spacing-small);\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(--spacing-medium);\n        color: var(--md-sys-color-secondary);\n      }\n\n      section label {\n        display: inline-block;\n        width: 25%;\n        margin-top: var(--spacing-medium);\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(--spacing-small);\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(--spacing-medium);\n        font-size: var(--fontsize-large);\n      }\n\n      [thumbnail] {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        margin: var(--spacing-medium);\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>&nbsp;<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.d.ts

@@ -0,0 +1,3 @@
+import '@material/web/icon/icon.js';
+import '@things-factory/organization/dist-client/component/approval-line-view.js';
+import '../components/activity-thread-timeline';