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

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

@@ -1,490 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,23 +0,0 @@
-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

@@ -1,94 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"]}