@things-factory/worklist 10.1.246 → 10.1.248

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

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

@@ -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, 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

@@ -1,11 +0,0 @@
-/**
- * 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

@@ -1,11 +0,0 @@
-/**
- * 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

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

@@ -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>;
-}