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

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

@@ -0,0 +1,490 @@
+import { __decorate, __metadata } from "tslib";
+import '@things-factory/organization/dist-client/component/approval-line-view.js';
+import gql from 'graphql-tag';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { ScrollbarStyles } from '@operato/styles';
+import { ActivityInstance } from '../../types/activity-instance.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 ActivityInstanceView = class ActivityInstanceView extends localize(i18next)(LitElement) {
+    render() {
+        if (!this.activityInstance) {
+            return html `<div>no activity instance info.</div>`;
+        }
+        const { id, name, description, state, issuer, assignedAt, startedAt, activityThreads, terminatedAt, updatedAt } = this.activityInstance;
+        return html `
+      <div instance-container>
+        <div header>
+          <md-icon>description</md-icon>
+          <strong>${name}</strong>
+          ${description}
+        </div>
+
+        <div>
+          <label>${i18next.t('label.status')}</label>
+          <span status></span>
+          <strong>${i18next.t('label.activity-state-' + state)}</strong>
+        </div>
+
+        <div issuer>
+          <label>${i18next.t('field.issuer')}</label>
+          <md-icon>account_circle</md-icon>
+          <strong>${(issuer === null || issuer === void 0 ? void 0 : issuer.name) || ''}</strong>
+        </div>
+        <div>
+          <label>${i18next.t('field.assigned-at')}</label>${assignedAt && formatter.format(new Date(assignedAt))}
+        </div>
+        <div><label>${i18next.t('field.started-at')}</label>${startedAt && formatter.format(new Date(startedAt))}</div>
+        <div><label>${i18next.t('field.updated-at')}</label>${updatedAt && formatter.format(new Date(updatedAt))}</div>
+        <div>
+          <label>${i18next.t('field.terminated-at')}</label>${terminatedAt && formatter.format(new Date(terminatedAt))}
+        </div>
+      </div>
+      <div thread-container>
+        ${activityThreads === null || activityThreads === void 0 ? void 0 : activityThreads.map(activityThread => this.renderActivityThread(this.activityInstance, activityThread))}
+      </div>
+    `;
+    }
+    renderActivityThread(activityInstance, activityThread) {
+        var _a;
+        const { state, assignee, output, round, activityApprovals = [], assignedAt, startedAt, terminatedAt } = activityThread;
+        const { approvalLine } = activityInstance;
+        const { name, email } = assignee || {};
+        const approvals = activityApprovals.sort((a, b) => a.round < b.round ? 1 : a.round > b.round ? -1 : a.order < b.order ? 1 : -1);
+        const current = ((_a = approvals[0]) === null || _a === void 0 ? void 0 : _a.round) == round ? approvals[0].order : -1;
+        return html `
+      <div assignee>
+        <md-icon>account_circle</md-icon>
+        <strong>${name}</strong>
+      </div>
+
+      <div thread>
+        <span subtitle>${i18next.t('label.information')}</span>
+        <div>
+          <label>${i18next.t('label.status')}</label>
+          <span status></span>
+          <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.started-at')}</label> ${startedAt && formatter.format(new Date(startedAt))}</div>
+        <div>
+          <label>${i18next.t('field.terminated-at')}</label> ${terminatedAt && formatter.format(new Date(terminatedAt))}
+        </div>
+        <div><label>${i18next.t('field.round')}</label> ${round}</div>
+      </div>
+
+      <div>
+        <span subtitle>${i18next.t('field.artifact')}</span>
+        ${this.renderInOut(output || {})}
+      </div>
+      <div timeline>
+        <span subtitle>${i18next.t('label.timeline')}</span>
+
+        <div>
+          ${approvalLine
+            ? html `<approval-line-view .model=${approvalLine} .current=${current}></approval-line-view>`
+            : html ``}
+        </div>
+
+        <ol>
+          ${approvals.map(approval => this.renderActivityApproval(approval))}
+        </ol>
+      </div>
+    `;
+    }
+    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><md-icon>account_circle</md-icon>${name}</strong>
+          <p>${comment}</p>
+        </span>
+      </li>
+    `;
+    }
+    renderSearchKeys() {
+        const { activity } = this.activityInstance;
+        const { searchKeys = [] } = activity || {};
+        return html `
+      <table>
+        <tr>
+          <th>${i18next.t('label.name')}</th>
+          <th>${i18next.t('label.value')}</th>
+        </tr>
+
+        ${searchKeys === null || searchKeys === void 0 ? void 0 : searchKeys.map((item, index) => html `
+            <tr>
+              <td>${item.tKey ? i18next.t(item.tKey) : item.name}</td>
+              <td>${this.activityInstance[`key0${index + 1}`]}</td>
+            </tr>
+          `)}
+      </table>
+    `;
+    }
+    renderInOut(data) {
+        const { activity } = this.activityInstance;
+        const { model } = activity || {};
+        return html `
+      <table>
+        <tr>
+          <th>${i18next.t('label.name')}</th>
+          <th>${i18next.t('label.value')}</th>
+        </tr>
+        ${model === null || model === void 0 ? void 0 : model.map(item => html `
+            <tr>
+              <td>${item.name}</td>
+              <td>${item.tag ? data[item.tag] : ''}</td>
+            </tr>
+          `)}
+      </table>
+    `;
+    }
+    updated(changes) {
+        if (changes.has('activityInstanceId')) {
+            this.fetchActivityInstance();
+        }
+    }
+    async fetchActivityInstance() {
+        var _a;
+        const id = this.activityInstanceId;
+        const response = await client.query({
+            query: gql `
+        query ($id: String!) {
+          activityInstance(id: $id) {
+            id
+            name
+            description
+            state
+            key01
+            key02
+            key03
+            key04
+            key05
+            input
+            output
+            issuer {
+              name
+              email
+            }
+            starter {
+              name
+              email
+            }
+            activity {
+              id
+              name
+              description
+              searchKeys {
+                name
+                description
+                inputKey
+                tKey
+              }
+              model {
+                name
+                description
+                active
+                tag
+                inout
+                type
+                unit
+                options
+                quantifier
+                spec
+              }
+            }
+            approvalLine {
+              type
+              value
+              approver {
+                id
+                name
+                description
+                controlNo
+              }
+            }
+            activityThreads {
+              state
+              transaction
+              output
+              assignee {
+                id
+                name
+                email
+              }
+              round
+              activityApprovals {
+                round
+                order
+                approver {
+                  name
+                  email
+                }
+                judgment
+                comment
+                createdAt
+                terminatedAt
+              }
+              assignedAt
+              startedAt
+              terminatedAt
+            }
+            updater {
+              id
+              name
+            }
+            assignedAt
+            startedAt
+            terminatedAt
+            updatedAt
+          }
+        }
+      `,
+            variables: {
+                id
+            }
+        });
+        this.activityInstance = response.data.activityInstance;
+        this.setAttribute('state', ((_a = this.activityInstance) === null || _a === void 0 ? void 0 : _a.state) || '');
+    }
+};
+ActivityInstanceView.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        overflow: auto;
+        font-size: var(--fontsize-default);
+      }
+      :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;
+      }
+      [instance-container] {
+        flex: 1;
+        background-color: var(--md-sys-color-background);
+        border-right: var(--border-dim-color);
+        padding: var(--spacing-large);
+        color: var(--md-sys-color-secondary);
+      }
+      [thread-container] {
+        flex: 2;
+        padding: var(--spacing-large);
+      }
+      [instance-container] div {
+        margin-bottom: var(--spacing-medium);
+        padding-bottom: var(--spacing-medium);
+        border-bottom: var(--border-dim-color);
+      }
+      [header] md-icon {
+        background-color: var(--worklist-status-color, tomato);
+        float: left;
+        margin-right: var(--spacing-medium);
+        padding: var(--spacing-medium);
+        border-radius: 50%;
+        float: left;
+        font-size: 1.8em;
+        color: var(--md-sys-color-on-primary);
+      }
+      [header] strong {
+        display: block;
+        font: bold 22px / 1.1 var(--theme-font);
+      }
+      [header] {
+        overflow: hidden;
+        font-size: var(--fontsize-small);
+      }
+      [instance-container] div label {
+        display: inline-block;
+        margin-right: var(--spacing-medium);
+        min-width: 50px;
+      }
+      [issuer] md-icon {
+        opacity: 0.5;
+        position: relative;
+        top: 4px;
+        font-size: 20px;
+      }
+      span[status] {
+        width: 15px;
+        height: 15px;
+        position: relative;
+        top: 2px;
+        background-color: var(--worklist-status-color, tomato);
+        display: inline-block;
+        margin-right: var(--spacing-small);
+        border-radius: 50%;
+      }
+      [thread-container] table {
+        width: 100%;
+        border-collapse: collapse;
+      }
+      [thread-container] th {
+        color: var(--md-sys-color-on-primary-container);
+        background-color: var(--md-sys-color-primary-container);
+        border-top: var(--grid-header-top-border);
+        border-bottom: var(--grid-header-bottom-border);
+        padding: var(--grid-header-padding);
+        text-overflow: ellipsis;
+        font: var(--grid-header-font);
+      }
+      [thread-container] td {
+        padding: var(--spacing-small);
+        border-bottom: var(--grid-record-border-bottom);
+      }
+      [assignee] * {
+        vertical-align: middle;
+      }
+      [assignee] md-icon {
+        opacity: 0.5;
+      }
+      [subtitle] {
+        display: block;
+        margin: var(--spacing-large) 0 var(--spacing-small) 0;
+        padding: var(--spacing-small) var(--spacing-medium);
+        color: var(--md-sys-color-on-surface);
+        background-color: var(--md-sys-color-surface-variant);
+        font: bold 16px var(--theme-font);
+        border: 2px solid var(--md-sys-color-outline);
+        border-radius: 999px;
+      }
+      [timeline] ol {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      [timeline] li {
+        display: flex;
+      }
+      [timeline] [info] {
+        color: var(--md-sys-color-on-surface);
+        background: var(--md-sys-color-surface-variant);
+
+        flex: 1;
+      }
+      [timeline] [date] {
+        opacity: 0.7;
+        width: 130px;
+        font-size: var(--fontsize-small);
+      }
+      [timeline] [info] strong {
+        float: right;
+      }
+      [timeline] [status] {
+        margin: 0 var(--spacing-small);
+        display: block;
+        border-radius: 50%;
+        width: 12px;
+        height: 12px;
+        position: relative;
+        top: 3px;
+        border: 2px solid #fff;
+        background-color: var(--worklist-status-color, tomato);
+      }
+      [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] md-icon {
+        position: relative;
+        top: 3px;
+        font-size: var(--fontsize-large);
+      }
+      [timeline] [info] p {
+        background-color: #f4f4f4;
+        margin: var(--spacing-small) 0 var(--spacing-medium) 0;
+        padding: var(--spacing-small) var(--spacing-medium);
+        border-radius: var(--border-radius);
+        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;
+      }
+      [thread] div {
+        border-bottom: var(--border-dim-color);
+        padding: var(--spacing-small);
+        text-align: right;
+        overflow: hidden;
+      }
+      [thread] div label {
+        float: left;
+        width: 25%;
+        text-align: left;
+      }
+    `
+];
+__decorate([
+    property({
+        type: String,
+        attribute: 'activity-instance-id'
+    }),
+    __metadata("design:type", String)
+], ActivityInstanceView.prototype, "activityInstanceId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", ActivityInstance)
+], ActivityInstanceView.prototype, "activityInstance", void 0);
+ActivityInstanceView = __decorate([
+    customElement('activity-instance-view')
+], ActivityInstanceView);
+export { ActivityInstanceView };
+//# sourceMappingURL=activity-instance-view.js.map

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

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

package/dist-client/pages/activity-stats/activity-stats-importer.d.ts

@@ -0,0 +1,23 @@
+import '@material/web/icon/icon.js';
+import '@operato/data-grist';
+import { LitElement } from 'lit';
+export declare class ActivityStatsImporter extends LitElement {
+    static styles: import("lit").CSSResult[];
+    activityStats: any[];
+    columns: {
+        list: {
+            fields: string[];
+        };
+        pagination: {
+            infinite: boolean;
+        };
+        columns: {
+            type: string;
+            name: string;
+            header: string;
+            width: number;
+        }[];
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    save(): Promise<void>;
+}

package/dist-client/pages/activity-stats/activity-stats-importer.js

@@ -0,0 +1,94 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/data-grist';
+import gql from 'graphql-tag';
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { i18next } from '@operato/i18n';
+import { isMobileDevice } from '@operato/utils';
+import { CommonHeaderStyles } from '@operato/styles';
+export class ActivityStatsImporter extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.activityStats = [];
+        this.columns = {
+            list: { fields: ['name', 'description'] },
+            pagination: { infinite: true },
+            columns: [
+                {
+                    type: 'string',
+                    name: 'name',
+                    header: i18next.t('field.name'),
+                    width: 150
+                },
+                {
+                    type: 'string',
+                    name: 'description',
+                    header: i18next.t('field.description'),
+                    width: 200
+                },
+                {
+                    type: 'checkbox',
+                    name: 'active',
+                    header: i18next.t('field.active'),
+                    width: 60
+                }
+            ]
+        };
+    }
+    render() {
+        return html `
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.columns}
+        .data=${{
+            records: this.activityStats
+        }}
+      ></ox-grist>
+
+      <div class="footer">
+        <div filler></div>
+        <button @click=${this.save.bind(this)} done><md-icon>save</md-icon>${i18next.t('button.save')}</button>
+      </div>
+    `;
+    }
+    async save() {
+        var _a;
+        const response = await client.mutate({
+            mutation: gql `
+        mutation importActivityStats($activityStats: [ActivityStatsPatch!]!) {
+          importActivityStats(activityStats: $activityStats)
+        }
+      `,
+            variables: { activityStats: this.activityStats }
+        });
+        if ((_a = response.errors) === null || _a === void 0 ? void 0 : _a.length)
+            return;
+        this.dispatchEvent(new CustomEvent('imported'));
+    }
+}
+ActivityStatsImporter.styles = [
+    CommonHeaderStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+    `
+];
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], ActivityStatsImporter.prototype, "activityStats", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], ActivityStatsImporter.prototype, "columns", void 0);
+//# sourceMappingURL=activity-stats-importer.js.map

package/dist-client/pages/activity-stats/activity-stats-importer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-stats-importer.js","sourceRoot":"","sources":["../../../client/pages/activity-stats/activity-stats-importer.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,qBAAqB,CAAA;AAE5B,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAEpD,MAAM,OAAO,qBAAsB,SAAQ,UAAU;IAArD;;QAiB6B,kBAAa,GAAU,EAAE,CAAA;QACxB,YAAO,GAAG;YACpC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,EAAE;YACzC,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;YAC9B,OAAO,EAAE;gBACP;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;oBAC/B,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,aAAa;oBACnB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACtC,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,UAAU;oBAChB,IAAI,EAAE,QAAQ;oBACd,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;oBACjC,KAAK,EAAE,EAAE;iBACV;aACF;SACF,CAAA;IAiCH,CAAC;IA/BC,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;kBAChC,IAAI,CAAC,OAAO;gBACd;YACN,OAAO,EAAE,IAAI,CAAC,aAAa;SAC5B;;;;;yBAKgB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gCAAgC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;;KAEhG,CAAA;IACH,CAAC;IAED,KAAK,CAAC,IAAI;;QACR,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,GAAG,CAAA;;;;OAIZ;YACD,SAAS,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE;SACjD,CAAC,CAAA;QAEF,IAAI,MAAA,QAAQ,CAAC,MAAM,0CAAE,MAAM;YAAE,OAAM;QAEnC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,CAAC;;AAxEM,4BAAM,GAAG;IACd,kBAAkB;IAClB,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,AAdY,CAcZ;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;4DAA0B;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAuB1B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { isMobileDevice } from '@operato/utils'\nimport { CommonHeaderStyles } from '@operato/styles'\n\nexport class ActivityStatsImporter extends LitElement {\n  static styles = [\n    CommonHeaderStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-surface);\n      }\n\n      ox-grist {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Array }) activityStats: any[] = []\n  @property({ type: Object }) columns = {\n    list: { fields: ['name', 'description'] },\n    pagination: { infinite: true },\n    columns: [\n      {\n        type: 'string',\n        name: 'name',\n        header: i18next.t('field.name'),\n        width: 150\n      },\n      {\n        type: 'string',\n        name: 'description',\n        header: i18next.t('field.description'),\n        width: 200\n      },\n      {\n        type: 'checkbox',\n        name: 'active',\n        header: i18next.t('field.active'),\n        width: 60\n      }\n    ]\n  }\n\n  render() {\n    return html`\n      <ox-grist\n        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n        .config=${this.columns}\n        .data=${{\n          records: this.activityStats\n        }}\n      ></ox-grist>\n\n      <div class=\"footer\">\n        <div filler></div>\n        <button @click=${this.save.bind(this)} done><md-icon>save</md-icon>${i18next.t('button.save')}</button>\n      </div>\n    `\n  }\n\n  async save() {\n    const response = await client.mutate({\n      mutation: gql`\n        mutation importActivityStats($activityStats: [ActivityStatsPatch!]!) {\n          importActivityStats(activityStats: $activityStats)\n        }\n      `,\n      variables: { activityStats: this.activityStats }\n    })\n\n    if (response.errors?.length) return\n\n    this.dispatchEvent(new CustomEvent('imported'))\n  }\n}\n"]}