@things-factory/worklist 10.1.5 → 10.1.6

package/dist-client/pages/activity-approval/activity-approval-page.js

@@ -1,4 +1,5 @@
 import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
 import '@operato/property-editor/ox-properties-dynamic-view.js';
 import '@operato/board/ox-board-viewer.js';
 import '../../components/activity-approval-ribon.js';
@@ -13,7 +14,9 @@ import { i18next, localize } from '@operato/i18n';
 import { PageView } from '@operato/shell';
 import { CommonButtonStyles, ScrollbarStyles } from '@operato/styles';
 import { provider } from '@things-factory/board-ui/dist-client/board-provider.js';
-import { ActivityFieldsStyles, inputSpecOf, outputSpecOf, renderGiven } from '../../components/activity-fields.js';
+import { isReferenceStep } from '@things-factory/organization/dist-client';
+import { ActivityFieldsStyles, fieldValue, inputSpecOf, outputSpecOf, renderGiven } from '../../components/activity-fields.js';
+import { decisionSlots, reversibilityOf, slotOfRole, slotsOfRole } from '../../components/decision-slots.js';
 const ActivityApprovalFetchResult = `\
 {   id
   judgment
@@ -57,6 +60,12 @@ const ActivityApprovalFetchResult = `\
       description
       state
       activity {         id
+        label
+        decisionKeys {           role
+          inputPath
+          tKey
+          unit
+ }
         model {           name
           description
           active
@@ -72,6 +81,7 @@ const ActivityApprovalFetchResult = `\
  }
       approvalLine {         type
         value
+        participation
         approver {           id
           name
           description
@@ -214,8 +224,154 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
         color: var(--ui-faint, #8a959c);
         word-break: keep-all;
       }
+
+      /*
+       * The decision, drawn from the activity's declaration.
+       *
+       * The order is the declaration's and the weight descends with it: what is being asked reads
+       * first at title size, then what it is about, then the words a person wrote, then what changes
+       * on approval, and last why it came up at all.
+       */
+      section[decision] .headline {
+        font-size: var(--ui-t-headline, 19px);
+        font-weight: 600;
+        line-height: 1.35;
+        color: var(--ui-ink, #17242c);
+        word-break: keep-all;
+      }
+
+      section[decision] .subject {
+        margin-top: 3px;
+        font-family: var(--ui-mono, ui-monospace, Menlo, monospace);
+        font-size: var(--ui-t-body, 13px);
+        color: var(--ui-muted, #57676f);
+      }
+
+      section[decision] .block {
+        margin-top: 14px;
+      }
+
+      section[decision] .block > .label {
+        margin-bottom: 4px;
+        font-size: var(--ui-t-small, 11.5px);
+        color: var(--ui-muted, #57676f);
+      }
+
+      /* What a person wrote is set apart, because it is the only part nobody computed. */
+      section[decision] .said {
+        padding: 9px 11px;
+        border-left: 3px solid var(--ui-line, #d5dce0);
+        background: var(--ui-line-soft, #f2f5f7);
+        color: var(--ui-ink, #17242c);
+        word-break: break-word;
+      }
+
+      section[decision] .none {
+        color: var(--ui-faint, #8a959c);
+      }
+
+      section[decision] .consequence {
+        margin-top: 8px;
+        padding: 9px 11px;
+        border: 1px solid var(--ui-line, #d5dce0);
+        border-radius: var(--ui-r-small, 6px);
+      }
+
+      section[decision] .consequence > .label {
+        margin-bottom: 3px;
+        font-size: var(--ui-t-small, 11.5px);
+        color: var(--ui-muted, #57676f);
+      }
+
+      /*
+       * Whether approving can be undone reads as the frame around the decision, not as one of its
+       * consequences. Among them it carries the same weight as "four orders get pushed back", and
+       * on an approval that moves equipment it is the heaviest line on the screen.
+       */
+      section[decision] .reversibility {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+
+        margin-top: 12px;
+        padding: 8px 11px;
+        border-radius: var(--ui-r-small, 6px);
+
+        background: var(--ui-line-soft, #f2f5f7);
+        color: var(--ui-muted, #57676f);
+        font-size: var(--ui-t-small, 11.5px);
+      }
+
+      section[decision] .reversibility[irreversible] {
+        background: var(--md-sys-color-error-container, #ffdad6);
+        color: var(--md-sys-color-on-error-container, #410002);
+        font-weight: 600;
+      }
+
+      section[decision] .reversibility md-icon {
+        font-size: 1.15em;
+      }
+
+      /*
+       * What the decision was made from. Set flatter than the consequences — it is the record the
+       * approver checks, not something the approval brings about.
+       */
+      section[decision] .evidence {
+        margin-top: 8px;
+        padding: 7px 0 7px 11px;
+        border-left: 2px solid var(--ui-line, #d5dce0);
+      }
+
+      section[decision] .evidence > .label {
+        margin-bottom: 2px;
+        font-size: var(--ui-t-small, 11.5px);
+        color: var(--ui-muted, #57676f);
+      }
+
+      /*
+       * What is true right now sits apart from what the approval would change. Sharing the box the
+       * consequences use would say the approval causes these readings.
+       */
+      section[decision] .current-state {
+        margin-top: 14px;
+        padding: 9px 11px;
+        border: 1px dashed var(--ui-line, #d5dce0);
+        border-radius: var(--ui-r-small, 6px);
+      }
+
+      section[decision] .current-state > .label {
+        margin-bottom: 3px;
+        font-size: var(--ui-t-small, 11.5px);
+        color: var(--ui-muted, #57676f);
+      }
+
+      section[decision] .policy {
+        margin-top: 14px;
+        padding-top: 11px;
+        border-top: 1px solid var(--ui-line, #d5dce0);
+        font-size: var(--ui-t-small, 11.5px);
+        color: var(--ui-muted, #57676f);
+      }
     `
     ]; }
+    /**
+     * Is the reader seated here as a reference — someone who comments and does not decide?
+     *
+     * The rule comes from organization's client types, the same function its own approval-line editor
+     * and list use, so the two wire spellings of the enum are handled in one place. The approval line
+     * answers rather than ActivityApproval.participation, matching what the server refuses on
+     * (isReferenceOrder in approval-line.ts): the line decides who comes next, so letting the row
+     * decide who may judge would leave two authorities with nothing to settle a disagreement.
+     *
+     * The value comes back false while the query is still out. That is the same answer as for an
+     * approver, so the buttons show for a moment on a reference's screen — pressing one is refused by
+     * the server, which is why the server closed first.
+     */
+    get isReference() {
+        const approvalLine = this.activityThread?.activityInstance?.approvalLine;
+        const order = Number(this.activityApproval?.order ?? 0);
+        return isReferenceStep(approvalLine?.[order - 1]);
+    }
     get context() {
         const judgment = this.activityApproval?.judgment;
         return { title: this.lifecycle?.params?.['title'] || i18next.t('title.activity approval'),
@@ -227,6 +383,17 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
              * 어느 목록에서 열리는지는 이 화면이 안다. 그것을 적어 둔다.
              */
             menu: 'approval-pending-list',
+            /*
+             * A reference is offered neither approve nor reject.
+             *
+             * ActivityApprovalJudgment has carried Closed for this seat from the start — "the case ended"
+             * rather than a judgment — so a reference row was never meant to end in approved or rejected.
+             * The buttons were offered anyway, and the server accepted them until 2026-09-09.
+             *
+             * What stays is the note, because a comment is the whole point of the seat, and close. The
+             * hint under the textarea says which seat this is; buttons that simply vanish leave the
+             * reader looking for them.
+             */
             actions: judgment
                 ? [
                     { title: i18next.t('button.close'),
@@ -236,48 +403,16 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
                         ...CommonButtonStyles.back
                     }
                 ]
-                : /*
-                   * ── 세 단추의 순서와 무게 (2026-09-06) ──────────────────────────
-                   * 전에는 반려가 첫 자리였고, 승인 · 반려 · 저장이 모두 같은 모양이었다. 되돌리기 어려운
-                   * 것이 앞에 서고 무엇이 주된 흐름인지 화면이 말하지 않았다.
-                   *
-                   * 승인이 주 동작이다 — 채운 단추 하나. 반려는 대등한 선택이지만 예외 경로라 테두리
-                   * 단추로 그 옆에 둔다.
-                   *
-                   * 「저장」은 이름이 뜻을 말하지 않았다. 이 단추가 저장하는 것은 **의견 하나**이고
-                   * (saveActivityApproval 은 id 와 comment 만 보낸다), 판단은 미뤄 둔다. 그리고 그 결과는
-                   * 목록에서 「메모 있음」 표식으로 나타난다(activity-cells 의 approvalMarks). 목록이
-                   * 부르는 이름과 같은 낱말로 맞춘다.
-                   */
-                    [
-                        { title: i18next.t('button.approve'),
-                            action: this.approveActivityApproval.bind(this),
-                            icon: 'approval',
-                            emphasis: { raised: true,
-                                outlined: false,
-                                dense: false,
-                                danger: false
-                            }
-                        },
-                        { title: i18next.t('button.reject'),
-                            action: this.rejectActivityApproval.bind(this),
-                            icon: 'assignment_return',
-                            emphasis: { raised: false,
-                                outlined: true,
-                                dense: false,
-                                danger: false
-                            }
-                        },
-                        { title: i18next.t('button.save-note'),
+                : this.isReference
+                    ? [
+                        {
+                            title: i18next.t('button.save-note'),
                             action: this.saveActivityApproval.bind(this),
                             icon: 'edit_note',
-                            emphasis: { raised: false,
-                                outlined: true,
-                                dense: false,
-                                danger: false
-                            }
+                            emphasis: { raised: true, outlined: false, dense: false, danger: false }
                         },
-                        { title: i18next.t('button.close'),
+                        {
+                            title: i18next.t('button.close'),
                             action: () => {
                                 history.back();
                             },
@@ -285,6 +420,55 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
                             icon: 'close'
                         }
                     ]
+                    : /*
+                     * ── 세 단추의 순서와 무게 (2026-09-06) ──────────────────────────
+                     * 전에는 반려가 첫 자리였고, 승인 · 반려 · 저장이 모두 같은 모양이었다. 되돌리기 어려운
+                     * 것이 앞에 서고 무엇이 주된 흐름인지 화면이 말하지 않았다.
+                     *
+                     * 승인이 주 동작이다 — 채운 단추 하나. 반려는 대등한 선택이지만 예외 경로라 테두리
+                     * 단추로 그 옆에 둔다.
+                     *
+                     * 「저장」은 이름이 뜻을 말하지 않았다. 이 단추가 저장하는 것은 **의견 하나**이고
+                     * (saveActivityApproval 은 id 와 comment 만 보낸다), 판단은 미뤄 둔다. 그리고 그 결과는
+                     * 목록에서 「메모 있음」 표식으로 나타난다(activity-cells 의 approvalMarks). 목록이
+                     * 부르는 이름과 같은 낱말로 맞춘다.
+                     */
+                        [
+                            { title: i18next.t('button.approve'),
+                                action: this.approveActivityApproval.bind(this),
+                                icon: 'approval',
+                                emphasis: { raised: true,
+                                    outlined: false,
+                                    dense: false,
+                                    danger: false
+                                }
+                            },
+                            { title: i18next.t('button.reject'),
+                                action: this.rejectActivityApproval.bind(this),
+                                icon: 'assignment_return',
+                                emphasis: { raised: false,
+                                    outlined: true,
+                                    dense: false,
+                                    danger: false
+                                }
+                            },
+                            { title: i18next.t('button.save-note'),
+                                action: this.saveActivityApproval.bind(this),
+                                icon: 'edit_note',
+                                emphasis: { raised: false,
+                                    outlined: true,
+                                    dense: false,
+                                    danger: false
+                                }
+                            },
+                            { title: i18next.t('button.close'),
+                                action: () => {
+                                    history.back();
+                                },
+                                ...CommonButtonStyles.back,
+                                icon: 'close'
+                            }
+                        ]
             // activityApproval: this.activityApproval
         };
     }
@@ -317,7 +501,9 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
               <section>
                 <h2>${i18next.t('field.wl-comment')}</h2>
                 <textarea
-                  placeholder=${String(i18next.t('text.explain the reason for approval/rejection'))}
+                  placeholder=${String(i18next.t(this.isReference
+                ? 'text.write-your-comment-as-reference'
+                : 'text.explain the reason for approval/rejection'))}
                   .value=${this.activityApproval?.comment}
                   @change=${(e) => {
                 this.activityApproval.comment = e.target.value;
@@ -326,8 +512,14 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
                 <!--
                   반려는 의견이 필수다(rejectActivityApproval). 전에는 그 규칙을 **누른 뒤에** 토스트로
                   알렸다. 되돌릴 수 없는 것과 뜻이 다른 동작은 하기 전에 말한다.
+
+                  A reference reads a different line: this one names the seat, because the approve
+                  and reject buttons are absent for them and a reader whose buttons are missing
+                  goes looking for them.
                 -->
-                <p class="hint">${i18next.t('text.approval-comment-hint')}</p>
+                <p class="hint">
+                  ${i18next.t(this.isReference ? 'text.reference-comment-hint' : 'text.approval-comment-hint')}
+                </p>
               </section>
             </div>
           `
@@ -387,12 +579,163 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
      * approveActivityApproval / rejectActivityApproval 은 id 와 comment 만 보낸다 — 그 값은 어디에도
      * 가지 않는다. 결재자가 적을 수 있는 것은 의견 하나이고, 그것은 화면 아래 칸이 받는다.
      */
+    /**
+     * The decision the activity declared, or nothing when it declared none.
+     *
+     * Returning nothing is how generatedContent knows to fall back to the model. An activity with no
+     * decisionKeys draws exactly what it drew before.
+     *
+     * A slot whose path led nowhere is skipped rather than drawn empty. Older instances of an activity
+     * predate a field the declaration names — plant hit that with its `policy` value — and an empty
+     * bar on the screen would read as "there is no reason" when the truth is that this record has no
+     * such value. What cannot be shown is left out; what is shown is only what the payload actually
+     * carries.
+     *
+     * `reason` is the exception. Missing and blank mean the same thing to whoever is reading — nobody
+     * wrote one — so both draw the grey line rather than disappearing. A reason that silently vanishes
+     * would let an approver assume it was never asked for.
+     */
+    decisionContent() {
+        const { activityInstance } = this.activityThread || {};
+        const slots = decisionSlots(activityInstance?.activity?.decisionKeys, activityInstance?.input);
+        if (!slots.length) {
+            return nothing;
+        }
+        const headline = slotOfRole(slots, 'headline');
+        const subject = slotOfRole(slots, 'subject');
+        const reason = slotOfRole(slots, 'reason');
+        const consequences = slotsOfRole(slots, 'consequence').filter(slot => slot.found);
+        const policy = slotOfRole(slots, 'policy');
+        const evidence = slotsOfRole(slots, 'evidence').filter(slot => slot.found);
+        const currentState = slotOfRole(slots, 'currentState');
+        const reversibility = slotOfRole(slots, 'reversibility');
+        const drawable = [headline, subject, policy, currentState].some(slot => slot?.found) ||
+            !!reason ||
+            consequences.length ||
+            evidence.length ||
+            reversibilityOf(reversibility) !== undefined;
+        /*
+         * Every declared slot missed this payload. Saying so is not this screen's job — falling back to
+         * the model at least shows the values that are there, and the reader is no worse off than before
+         * the declaration existed.
+         */
+        if (!drawable) {
+            return nothing;
+        }
+        return keyed(this.activityApproval.id, html `
+        <section decision>
+          ${headline?.found ? html `<div class="headline">${this.slotText(headline)}</div>` : ''}
+          ${subject?.found ? html `<div class="subject">${this.slotText(subject)}</div>` : ''}
+          ${reason
+            ? html `
+                <div class="block">
+                  <div class="label">${i18next.t('field.reason')}</div>
+                  <div class="said ${this.hasWords(reason) ? '' : 'none'}">
+                    ${this.hasWords(reason) ? this.slotText(reason) : i18next.t('text.no-reason-given')}
+                  </div>
+                </div>
+              `
+            : ''}
+          ${this.renderReversibility(reversibility)}
+          ${evidence.length
+            ? html `
+                <div class="block">
+                  <div class="label">${i18next.t('label.what-it-was-judged-from')}</div>
+                  ${evidence.map(slot => html `
+                      <div class="evidence">
+                        ${slot.tKey ? html `<div class="label">${i18next.t(slot.tKey)}</div>` : ''}
+                        <div>${fieldValue(slot.value)}</div>
+                      </div>
+                    `)}
+                </div>
+              `
+            : ''}
+          ${currentState?.found
+            ? html `
+                <div class="current-state">
+                  <div class="label">${i18next.t(currentState.tKey || 'label.current-state')}</div>
+                  <div>${fieldValue(currentState.value)}</div>
+                </div>
+              `
+            : ''}
+          ${consequences.length
+            ? html `
+                <div class="block">
+                  <div class="label">${i18next.t('label.what-changes')}</div>
+                  ${consequences.map(slot => html `
+                      <div class="consequence">
+                        ${slot.tKey ? html `<div class="label">${i18next.t(slot.tKey)}</div>` : ''}
+                        <div>${fieldValue(slot.value)}</div>
+                      </div>
+                    `)}
+                </div>
+              `
+            : ''}
+          ${policy?.found
+            ? html `
+                <div class="policy">
+                  ${i18next.t('label.why-approval')} — ${this.slotText(policy)}
+                </div>
+              `
+            : ''}
+        </section>
+      `);
+    }
+    /**
+     * Whether approving can be undone, drawn as the frame around the decision.
+     *
+     * Only an explicit true or false draws. Anything else — the path led nowhere, or the value is not
+     * a boolean — draws nothing, because saying "this can be undone" on a screen that does not know is
+     * the one mistake this line must never make.
+     *
+     * This is not rejectionIsFinal. That one says whether **rejecting** ends the case for good; this
+     * says whether **approving** can be taken back. The twin actuation carries both, which is exactly
+     * why they must not share a sentence.
+     */
+    renderReversibility(slot) {
+        const reversible = reversibilityOf(slot);
+        if (reversible === undefined) {
+            return '';
+        }
+        return html `
+      <div class="reversibility" ?irreversible=${!reversible}>
+        <md-icon>${reversible ? 'undo' : 'lock'}</md-icon>
+        <span>${i18next.t(reversible ? 'text.approval-is-reversible' : 'text.approval-is-irreversible')}</span>
+      </div>
+    `;
+    }
+    /**
+     * One slot's value as something to read.
+     *
+     * A scalar prints with its unit when one was declared. Anything shaped — an object, a list — goes
+     * through fieldValue, the same laying-out the model sections use, so a payload reads the same way
+     * wherever it appears and a four-level object does not become one long line.
+     */
+    slotText(slot) {
+        const scalar = slot.value !== null && slot.value !== undefined && typeof slot.value !== 'object';
+        if (scalar && slot.unit) {
+            return `${slot.value} ${slot.unit}`;
+        }
+        return scalar ? String(slot.value) : fieldValue(slot.value);
+    }
+    /** Did a person actually write something here. Whitespace is not words. */
+    hasWords(slot) {
+        return typeof slot.value === 'string' ? slot.value.trim().length > 0 : slot.found && slot.value != null;
+    }
     generatedContent() {
         if (!this.activityApproval) {
             return html ``;
         }
         const { output, activityInstance } = this.activityThread || {};
         const { input } = activityInstance || {};
+        /*
+         * The declaration goes first. It answers "what happens if I approve", which is the question this
+         * screen exists for; the model answers "what are the values", which is the fallback.
+         */
+        const decision = this.decisionContent();
+        if (decision !== nothing) {
+            return decision;
+        }
         const model = activityInstance?.activity?.model;
         const inputSpec = inputSpecOf(model);
         const outputSpec = outputSpecOf(model);
@@ -449,12 +792,37 @@ let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(
         ></ox-board-viewer>
       `);
     }
+    /**
+     * The element the activity names, or a plain statement that it could not be loaded.
+     *
+     * document.createElement answers something for any name, so an activity pointing at an element
+     * nobody registered used to produce an empty card. The approver got a screen with nothing on it
+     * and the approve button still worked — plant shipped two such forms in one day and found them by
+     * reading the file list, not by opening the screen.
+     *
+     * The reader is told what to judge by instead. Same shape as the empty generated screen: what is
+     * missing, and where to look — the submission reason and the history in the timeline below.
+     *
+     * ── Waiting for a late definition ─────────────────────────────────────────
+     * An element can be registered after this page renders, and answering "not loaded" forever in
+     * that case would be a screen inventing a defect. whenDefined resolves whenever it arrives and
+     * the page redraws; a name nobody ever registers simply never resolves, and the statement stands.
+     */
     customElementContent() {
         if (!this.activityApproval) {
             return html ``;
         }
         const { output, activityInstance } = this.activityThread;
         const { viewSource: tagName, input } = activityInstance || {};
+        if (!tagName || !customElements.get(tagName)) {
+            if (tagName) {
+                customElements.whenDefined(tagName).then(() => this.requestUpdate());
+            }
+            return html `<section empty>
+        <span class="title">${i18next.t('text.approval-view-not-loaded')}</span>
+        <span class="why">${i18next.t('text.no-approval-content-why')}</span>
+      </section>`;
+        }
         const element = document.createElement(tagName);
         element.id = 'custom-content';
         element.activityId = activityInstance.activity.id;
@@ -586,7 +954,21 @@ __decorate([
 ], ActivityApprovalPage.prototype, "board", void 0);
 __decorate([
     query('textarea'),
-    __metadata("design:type", HTMLTextAreaElement)
+    __metadata("design:type", HTMLTextAreaElement
+    /**
+     * Is the reader seated here as a reference — someone who comments and does not decide?
+     *
+     * The rule comes from organization's client types, the same function its own approval-line editor
+     * and list use, so the two wire spellings of the enum are handled in one place. The approval line
+     * answers rather than ActivityApproval.participation, matching what the server refuses on
+     * (isReferenceOrder in approval-line.ts): the line decides who comes next, so letting the row
+     * decide who may judge would leave two authorities with nothing to settle a disagreement.
+     *
+     * The value comes back false while the query is still out. That is the same answer as for an
+     * approver, so the buttons show for a moment on a reference's screen — pressing one is refused by
+     * the server, which is why the server closed first.
+     */
+    )
 ], ActivityApprovalPage.prototype, "commentInput", void 0);
 __decorate([
     query('ox-board-viewer'),