@things-factory/worklist 10.1.248 → 10.1.249

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

@@ -0,0 +1,494 @@
+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, nothing } 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 { ActivityFieldsStyles, declaredLabel, inputSpecOf, outputSpecOf, renderGiven } from '../../components/activity-fields.js';
+import { DecisionContentStyles, DecisionKeysFields, renderDecision } from '../../components/decision-content.js';
+import { WorklistStateColors } from '../../components/state-ribon.js';
+import { ActivityInstance } from '../../types/activity-instance.js';
+import { entity360Name } from '@operato/layout';
+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) {
+    static { this.styles = [
+        ScrollbarStyles,
+        WorklistStateColors,
+        ActivityFieldsStyles,
+        DecisionContentStyles,
+        css `
+      :host {
+        display: flex;
+        overflow: auto;
+        font-size: var(--fontsize-default);
+      }
+      [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);
+      }
+      /* The state speaks through the icon's colour on a quiet disc, as in the ribbons - a filled disc
+         under an on-primary icon read under 3:1 for three states. */
+      [header] md-icon {
+        background-color: var(--md-sys-color-surface-container-high);
+        float: left;
+        margin-right: var(--spacing-medium);
+        padding: var(--spacing-medium);
+        border-radius: 50%;
+        float: left;
+        font-size: 1.8em;
+        color: var(--worklist-state-color, var(--ui-muted, #57676f));
+      }
+      [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-state-color, var(--ui-muted, #57676f));
+        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;
+        /* The ring separates the dot from the line behind it, so it is the page's own colour. */
+        border: 2px solid var(--md-sys-color-surface);
+        background-color: var(--worklist-state-color, var(--ui-muted, #57676f));
+      }
+      [timeline] [status]::before {
+        content: '';
+        height: 60px;
+        width: 2px;
+        display: block;
+        position: relative;
+        margin-left: 5px;
+        background-color: var(--worklist-state-color, var(--ui-muted, #57676f));
+        opacity: 0.2;
+      }
+      [timeline] [info] md-icon {
+        position: relative;
+        top: 3px;
+        font-size: var(--fontsize-large);
+      }
+      [timeline] [info] p {
+        /* A fixed light grey under text that follows the theme was light-on-light in the dark theme. */
+        background-color: var(--md-sys-color-surface-container);
+        color: var(--md-sys-color-on-surface);
+        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: var(--md-sys-color-surface-container);
+        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;
+      }
+    `
+    ]; }
+    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>${entity360Name(issuer)}</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>
+        ${this.renderRequest()}
+        ${activityThreads?.map(activityThread => this.renderActivityThread(this.activityInstance, activityThread))}
+      </div>
+    `;
+    }
+    /**
+     * What was asked - the same drawing the task and approval screens use.
+     *
+     * 상신함 opens what I put up here. Without this the view showed the name, the state and the
+     * history, and not the request itself: an expenditure request's payee and lines live only in its
+     * decision, every model field being hidden. The declaration goes first and the given values are
+     * the fallback, as on the task screen (thread-sections).
+     */
+    renderRequest() {
+        const { activity, input } = this.activityInstance;
+        const decision = renderDecision(activity?.decisionKeys, input);
+        if (decision !== nothing) {
+            return decision;
+        }
+        const given = inputSpecOf(activity?.model);
+        return given.length
+            ? html `<section readonly>
+          <h2>${i18next.t('label.activity-input')}</h2>
+          ${renderGiven(given, input)}
+        </section>`
+            : nothing;
+    }
+    renderActivityThread(activityInstance, activityThread) {
+        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 = approvals[0]?.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.thread-basics')}</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>
+
+      ${this.renderWritten(output || {})}
+      <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?.map((item, index) => html `
+            <tr>
+              <td>${declaredLabel(item)}</td>
+              <td>${this.activityInstance[`key0${index + 1}`]}</td>
+            </tr>
+          `)}
+      </table>
+    `;
+    }
+    /**
+     * What the assignee wrote - the fields the model declares as output and does not hide.
+     *
+     * This listed every model field by its developer name, hidden ones too, with the value read from the
+     * output: an expenditure request showed requestId · month · requester · payee · lines, all empty,
+     * under 「산출물」. 상신함 opens this view for anyone who put something up, so it draws what the task
+     * screen draws, and nothing when the activity has nothing to write.
+     */
+    renderWritten(output) {
+        const written = outputSpecOf(this.activityInstance.activity?.model);
+        return written.length
+            ? html `<div>
+          <span subtitle>${i18next.t('field.artifact')}</span>
+          ${renderGiven(written, output)}
+        </div>`
+            : nothing;
+    }
+    updated(changes) {
+        if (changes.has('activityInstanceId')) {
+            this.fetchActivityInstance();
+        }
+    }
+    async fetchActivityInstance() {
+        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 {
+              id
+              name
+              email
+            }
+            starter {
+              name
+              email
+            }
+            activity {
+              id
+              name
+              description
+              searchKeys {
+                name
+                description
+                inputKey
+                tKey
+              }
+              ${DecisionKeysFields}
+              model {
+                name
+                description
+                active
+                tag
+                inout
+                type
+                unit
+                options
+                quantifier
+                spec
+                hidden
+              }
+            }
+            approvalLine {
+              type
+              participation
+              notifyAfter
+              value
+              approver {
+                id
+                name
+                description
+                controlNo
+              }
+            }
+            activityThreads {
+              state
+              transaction
+              output
+              assignee {
+                id
+                name
+                email
+              }
+              round
+              activityApprovals {
+                round
+                order
+                approver {
+                  id
+                  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', this.activityInstance?.state || '');
+    }
+};
+__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, nothing } 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 { ActivityFieldsStyles, declaredLabel, inputSpecOf, outputSpecOf, renderGiven } from '../../components/activity-fields.js'\nimport { DecisionContentStyles, DecisionKeysFields, renderDecision } from '../../components/decision-content.js'\nimport { WorklistStateColors } from '../../components/state-ribon.js'\nimport { ActivityInstance } from '../../types/activity-instance.js'\nimport { ActivityThread } from '../../types/activity-thread.js'\nimport { ActivityApproval } from '../../types/activity-approval.js'\nimport { entity360Name } from '@operato/layout'\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    WorklistStateColors,\n    ActivityFieldsStyles,\n    DecisionContentStyles,\n    css`\n      :host {\n        display: flex;\n        overflow: auto;\n        font-size: var(--fontsize-default);\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      /* The state speaks through the icon's colour on a quiet disc, as in the ribbons - a filled disc\n         under an on-primary icon read under 3:1 for three states. */\n      [header] md-icon {\n        background-color: var(--md-sys-color-surface-container-high);\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(--worklist-state-color, var(--ui-muted, #57676f));\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-state-color, var(--ui-muted, #57676f));\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        /* The ring separates the dot from the line behind it, so it is the page's own colour. */\n        border: 2px solid var(--md-sys-color-surface);\n        background-color: var(--worklist-state-color, var(--ui-muted, #57676f));\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-state-color, var(--ui-muted, #57676f));\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        /* A fixed light grey under text that follows the theme was light-on-light in the dark theme. */\n        background-color: var(--md-sys-color-surface-container);\n        color: var(--md-sys-color-on-surface);\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: var(--md-sys-color-surface-container);\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>${entity360Name(issuer)}</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        ${this.renderRequest()}\n        ${activityThreads?.map(activityThread => this.renderActivityThread(this.activityInstance!, activityThread))}\n      </div>\n    `\n  }\n\n  /**\n   * What was asked - the same drawing the task and approval screens use.\n   *\n   * 상신함 opens what I put up here. Without this the view showed the name, the state and the\n   * history, and not the request itself: an expenditure request's payee and lines live only in its\n   * decision, every model field being hidden. The declaration goes first and the given values are\n   * the fallback, as on the task screen (thread-sections).\n   */\n  renderRequest() {\n    const { activity, input } = this.activityInstance!\n    const decision = renderDecision(activity?.decisionKeys, input)\n\n    if (decision !== nothing) {\n      return decision\n    }\n\n    const given = inputSpecOf(activity?.model)\n\n    return given.length\n      ? html`<section readonly>\n          <h2>${i18next.t('label.activity-input')}</h2>\n          ${renderGiven(given, input)}\n        </section>`\n      : nothing\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.thread-basics')}</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      ${this.renderWritten(output || {})}\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>${declaredLabel(item)}</td>\n              <td>${this.activityInstance![`key0${index + 1}`]}</td>\n            </tr>\n          `\n        )}\n      </table>\n    `\n  }\n\n  /**\n   * What the assignee wrote - the fields the model declares as output and does not hide.\n   *\n   * This listed every model field by its developer name, hidden ones too, with the value read from the\n   * output: an expenditure request showed requestId · month · requester · payee · lines, all empty,\n   * under 「산출물」. 상신함 opens this view for anyone who put something up, so it draws what the task\n   * screen draws, and nothing when the activity has nothing to write.\n   */\n  renderWritten(output: any) {\n    const written = outputSpecOf(this.activityInstance!.activity?.model)\n\n    return written.length\n      ? html`<div>\n          <span subtitle>${i18next.t('field.artifact')}</span>\n          ${renderGiven(written, output)}\n        </div>`\n      : nothing\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              id\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              ${DecisionKeysFields}\n              model {\n                name\n                description\n                active\n                tag\n                inout\n                type\n                unit\n                options\n                quantifier\n                spec\n                hidden\n              }\n            }\n            approvalLine {\n              type\n              participation\n              notifyAfter\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                  id\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-instance/discard-offer.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Whether the draft screen offers "discard draft".
+ *
+ * Only a draft that has been saved: an unsaved one has nothing on the server to throw away, and one
+ * that has gone out is no longer the writer's alone (discard-draft.ts on the server refuses it by
+ * name). Who may discard is the server's to decide; the screen does not repeat it.
+ */
+export declare function offersDiscard(instance: {
+    id?: string;
+    state?: string;
+} | null | undefined): boolean;

package/dist-client/pages/activity-instance/discard-offer.js

@@ -0,0 +1,11 @@
+/**
+ * Whether the draft screen offers "discard draft".
+ *
+ * Only a draft that has been saved: an unsaved one has nothing on the server to throw away, and one
+ * that has gone out is no longer the writer's alone (discard-draft.ts on the server refuses it by
+ * name). Who may discard is the server's to decide; the screen does not repeat it.
+ */
+export function offersDiscard(instance) {
+    return !!instance?.id && instance.state === 'draft';
+}
+//# sourceMappingURL=discard-offer.js.map

package/dist-client/pages/activity-instance/discard-offer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"discard-offer.js","sourceRoot":"","sources":["../../../client/pages/activity-instance/discard-offer.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,UAAU,aAAa,CAAC,QAA4D;IACxF,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,IAAI,QAAQ,CAAC,KAAK,KAAK,OAAO,CAAA;AACrD,CAAC","sourcesContent":["/**\n * Whether the draft screen offers \"discard draft\".\n *\n * Only a draft that has been saved: an unsaved one has nothing on the server to throw away, and one\n * that has gone out is no longer the writer's alone (discard-draft.ts on the server refuses it by\n * name). Who may discard is the server's to decide; the screen does not repeat it.\n */\nexport function offersDiscard(instance: { id?: string; state?: string } | null | undefined): boolean {\n  return !!instance?.id && instance.state === 'draft'\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>;
+}