@things-factory/worklist 10.1.248 → 10.1.249

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

@@ -0,0 +1,875 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/list-state/ox-page-state.js';
+import '@operato/property-editor/ox-properties-dynamic-view.js';
+import '@operato/board/ox-board-viewer.js';
+import '../../components/activity-approval-ribon.js';
+import '../../components/activity-thread-timeline.js';
+import gql from 'graphql-tag';
+import { css, html, nothing, unsafeCSS } from 'lit';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { customElement, query, state } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
+import { client } from '@operato/graphql';
+import { OxPrompt } from '@operato/popup';
+import { i18next, localize } from '@operato/i18n';
+import { ranMutation } from '../../components/say-outcome.js';
+import { approvalGate } from './approval-gate.js';
+import { PageView } from '@operato/shell';
+import { DocumentPageStyles, ScrollbarStyles } from '@operato/styles';
+import { provider } from '@operato/board/board-provider.js';
+import { isReferenceStep } from '@things-factory/organization/dist-client';
+import { ActivityFieldsStyles, inputSpecOf, outputSpecOf, renderGiven } from '../../components/activity-fields.js';
+import { DecisionContentStyles, DecisionKeysFields, renderDecision } from '../../components/decision-content.js';
+import { decisionSlots, slotOfRole } from '../../components/decision-slots.js';
+const ActivityApprovalFetchResult = `\
+{   id
+  judgment
+  comment
+  approver {     id
+    name
+ }
+  round
+  order
+  createdAt
+  terminatedAt
+  activityThread {     state
+    dueAt
+    assignedAt
+    assignee {       id
+      name
+ }
+    updatedAt
+    terminatedAt
+    output
+    activityApprovals {       round
+      order
+      approver {         id         name
+ }
+      judgment
+      comment
+      createdAt
+      updatedAt
+      terminatedAt
+ }
+    activityThreadHistories {       transaction
+      reason
+      updater {         id         name
+ }
+      updatedAt
+      state
+      output
+ }
+    activityInstance {       id
+      name
+      description
+      state
+      activity {         id
+        label
+        labelTKey
+        ${DecisionKeysFields}
+        model {           name
+          description
+          active
+          tag
+          inout
+          type
+          unit
+          options
+          quantifier
+          spec
+          hidden
+ }
+ }
+      approvalLine {         type
+        value
+        participation
+        notifyAfter
+        approver {           id
+          name
+          description
+          controlNo
+ }
+ }
+      thumbnail
+      input
+      output
+      viewType
+      viewSource
+      dueAt
+      createdAt
+ }  
+ }
+}`;
+export const ActivityThreadStatus = {
+    Unassigned: 'unassigned',
+    Assigned: 'assigned',
+    Started: 'started',
+    Delegated: 'delegated',
+    Ended: 'ended',
+    Aborted: 'aborted'
+};
+/** 타임라인이 옆에 서는 폭 — 읽는 단 1080 + 사이 24 + 최소 패널 360 + page 좌우 40. */
+const BESIDE = '(min-width: 1504px)';
+let ActivityApprovalPage = class ActivityApprovalPage extends localize(i18next)(PageView) {
+    constructor() {
+        super(...arguments);
+        /**
+         * 타임라인이 옆에 설 만큼 넓은가.
+         *
+         * 폭은 CSS 가 정하지만 타임라인을 펴는 것은 속성이라 CSS 로 안 된다. 같은 값을 두 곳에 적지
+         * 않도록 물음은 하나이고(`BESIDE`), 그 물음을 CSS 와 여기가 함께 쓴다.
+         */
+        this.beside = false;
+        /**
+         * 조회를 마쳤나 — **「아직 안 읽었다」와 「없다」는 다르다.**
+         *
+         * 전에는 값이 없으면 곧바로 「업무활동 정보가 없습니다」를 그렸다. 그런데 이 화면은 열리자마자
+         * 조회를 시작하므로, 응답이 오기 전까지 **없다고 단언하는 화면**이 보인다. 목록에서 줄을 눌러
+         * 들어온 사람은 방금 본 건이 없다는 말을 먼저 읽는다.
+         *
+         * 조회가 끝난 뒤에만 그 말을 한다. 그 전에는 아무 말도 하지 않는다.
+         */
+        this.loaded = false;
+        /** Why the approval could not be read - ox-page-state says it, with retry (ADR-0060 decision 8). */
+        this.loadError = null;
+        this.approvalRead = 0;
+        this.onBeside = () => (this.beside = !!this.media?.matches);
+    }
+    static { this.styles = [
+        /* The frame owns the page shell and the reading column (ADR-0060 decision 8). */
+        DocumentPageStyles,
+        ScrollbarStyles,
+        ActivityFieldsStyles,
+        DecisionContentStyles,
+        css `
+      :host {
+        color: var(--ui-ink, #17242c);
+        font-size: var(--ui-t-body, 13px);
+      }
+
+      /*
+       * 넓을 때만 타임라인이 옆에 선다 — **읽는 단은 줄이지 않는다.**
+       *
+       * 결재자가 판단에 쓰는 것(결정 · 사유 · 의견)이 왼쪽이고, 참고하는 것(타임라인)이 오른쪽이다.
+       * 처음 낸 안은 읽는 단 1080 안에서 둘로 쪼개는 것이었는데, 그러면 결정 카드가 1014 에서
+       * 520 으로 줄어든다 — 주된 것을 좁혀 참고용 자리를 만드는 꼴이라 물렀다.
+       *
+       * 그래서 **읽는 단을 넘는 여분이 한 판만큼 있을 때만** 편다:
+       *
+       *   1080(읽는 단) + 24(사이) + 360(최소 패널) + 40(page 좌우 여백) = 1504
+       *
+       * 그 아래에서는 한 단이고 차례가 그대로다 — 결재선 · 결정 · 타임라인 · 의견. 좁은 화면이
+       * 기본이고 넓은 화면이 덤이다.
+       */
+      @media ${unsafeCSS(BESIDE)} {
+        .page {
+          max-width: none;
+          display: grid;
+          grid-template-columns: var(--ui-measure, 1080px) minmax(360px, 1fr);
+          column-gap: 24px;
+          align-items: start;
+        }
+
+        /*
+         * 두 패널의 자리는 문서 차례가 아니라 격자가 정한다. 문서 차례는 좁은 화면 그대로 두어야
+         * 하고(결재선 · 결정 · 타임라인 · 의견), 넓은 화면에서만 타임라인이 오른쪽으로 빠진다.
+         */
+        .main {
+          grid-column: 1;
+          min-width: 0;
+        }
+
+        /* 옆에 선 타임라인은 읽는 동안 따라온다 — 결정과 맞대어 보는 값이다. */
+        .aside {
+          grid-column: 2;
+          grid-row: 1 / span 3;
+          position: sticky;
+          top: 0;
+        }
+      }
+
+      .comment-actions {
+        display: flex;
+        justify-content: flex-end;
+      }
+
+      .comment-actions button {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        height: var(--form-action-height, 32px);
+        padding: 0 12px;
+        border: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));
+        border-radius: var(--ui-r-small, 6px);
+        background: transparent;
+        color: var(--ui-ink, var(--md-sys-color-on-surface));
+        font: inherit;
+        font-size: var(--ui-t-body, 13px);
+        cursor: pointer;
+      }
+
+      .comment-actions md-icon {
+        font-size: 16px;
+        --md-icon-size: 16px;
+      }
+
+      /* 카드가 담아 주므로 안에 들어오는 화면은 자기 면과 여백을 갖지 않는다. */
+      /*
+       * 줄어들지 않는다 — 줄어들면 본문이 잘린다.
+       *
+       * flex 항목인데 크기를 안 정해 두면 기본이 flex: 0 1 auto 다. **1 이 줄어든다는 뜻이다** —
+       * 세로가 모자라면 브라우저가 이 칸부터 줄이는데, 여기엔 카드 모서리를 따라 자르려고
+       * overflow: hidden 이 걸려 있어서 줄어든 만큼이 **스크롤도 없이 사라진다.**
+       *
+       * 완료 조회에서 실측했다(1400x620): 칸이 242px 로 줄고 내용은 362px 이라 「업무 내용」 절이
+       * 대부분 잘렸고, 잘린 자리 바로 아래에서 타임라인이 시작하니 타임라인이 본문을 덮은 것처럼
+       * 보였다. 세로가 넉넉하면 줄일 일이 없어 안 드러난다.
+       *
+       * 안에 오는 것은 문서다. 높이를 정해 주어야 하는 것은 board 뿐이고 board 는 이 칸을 거치지
+       * 않는다(activityContent 참조). 문서는 제 높이로 서고, 모자라면 페이지 전체가 스크롤한다 —
+       * :host 의 overflow: auto 가 그 자리다.
+       */
+      section[hosted] {
+        flex: none;
+        padding: 0;
+        overflow: hidden;
+      }
+
+      ox-board-viewer {
+        width: 100%;
+        height: 100%;
+      }
+
+      activity-thread-timeline {
+        margin: var(--spacing-large, 16px);
+      }
+
+      /*
+       * 의견 칸 — 이 화면에서 **결재자가 유일하게 적는 자리**다.
+       *
+       * 화면 아래에 붙어 있어(sticky) 목록을 내려 읽는 동안에도 보인다. 그 자리를 지키되 모양은
+       * 다른 절과 같은 카드로 둔다. 전에는 회색 면(surface-variant)에 다른 테두리라 이 화면에서
+       * 혼자 다른 부품처럼 보였다.
+       */
+      /*
+       * 의견 — 이 화면에서 **결재자가 유일하게 적는 자리**다.
+       *
+       * 화면 아래에 붙어 있어(sticky) 내용을 내려 읽는 동안에도 보인다. 그 자리를 지키되 모양은
+       * 다른 절과 같은 카드로 둔다. 전에는 회색 면(surface-variant)에 다른 테두리라 이 화면에서
+       * 혼자 다른 부품처럼 보였다.
+       */
+      div[comment] {
+        position: sticky;
+        bottom: 0;
+        padding-bottom: var(--spacing-large, 16px);
+        background: var(--ui-bg, #f0f2f4);
+      }
+
+      /*
+       * 이 화면에서 **사용자가 유일하게 손대는 자리**라는 것을 모양으로 말한다.
+       *
+       * 나머지 절은 전부 읽는 것이고, 판단은 아래 툴바의 단추가 받는다. 그런데 의견 칸이 읽는
+       * 절들과 똑같은 카드라 「내 차례가 어디인지」가 화면에 없었다. 왼쪽에 강조색 띠를 둔다 —
+       * sticky 라 툴바 바로 위에 붙으므로 띠와 단추가 한 덩어리로 읽힌다.
+       */
+      div[comment] section {
+        border-left: 3px solid var(--ui-accent, #00727e);
+      }
+
+      div[comment] textarea {
+        display: block;
+        box-sizing: border-box;
+        width: 100%;
+        height: 76px;
+        padding: 10px 12px;
+        background: var(--ui-panel, #ffffff);
+        border: 1px solid var(--ui-line, #d5dce0);
+        border-radius: var(--ui-r-small, 6px);
+        color: var(--ui-ink, #17242c);
+        font: inherit;
+        font-size: var(--ui-t-body, 13px);
+        resize: none;
+        outline: none;
+      }
+
+      div[comment] textarea:focus {
+        border-color: var(--ui-accent, #00727e);
+      }
+
+      div[comment] .hint {
+        margin: 7px 0 0;
+        font-size: var(--ui-t-small, 11.5px);
+        color: var(--ui-faint, #8a959c);
+        word-break: keep-all;
+      }
+    `
+    ]; }
+    /**
+     * 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 {
+            /*
+             * 이 화면이 어떤 틀인가 — 동작 줄이 이것을 읽고 자기 오른쪽 끝을 내용에 맞춘다
+             * (ADR-0060 결정 9 보탬). 안 적으면 창 폭이고, 그것은 작업면의 모양이다.
+             */
+            frame: 'document',
+            title: this.lifecycle?.params?.['title'] || i18next.t('title.activity approval'),
+            help: 'worklist/activity-approval',
+            /*
+             * 이 화면은 메뉴에 없다 — 「내 결재함」에서 줄을 눌러 들어온다. 그래서 왼쪽 메뉴가 가리킬
+             * 항목이 없고, 표시가 사라져 들어온 사람이 자기가 어디에 있는지 잃는다.
+             *
+             * 어느 목록에서 열리는지는 이 화면이 안다. 그것을 적어 둔다.
+             */
+            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
+                ? []
+                : this.isReference
+                    ? []
+                    : /*
+                       * ── 결정 단추의 순서와 무게 (ADR-0060 결정 9 보탬) ─────────────
+                       * 전에는 반려가 첫 자리였고, 승인 · 반려 · 저장이 모두 같은 모양이었다. 되돌리기 어려운
+                       * 것이 앞에 서고 무엇이 주된 흐름인지 화면이 말하지 않았다.
+                       *
+                       * 승인이 주 동작이다 — 채운 단추 하나. 반려는 대등한 선택이지만 예외 경로라 테두리
+                       * 단추로 그 옆에 둔다.
+                       *
+                       * 「저장」은 이름이 뜻을 말하지 않았다. 이 단추가 저장하는 것은 **의견 하나**이고
+                       * (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 }
+                            },
+                        ]
+            // activityApproval: this.activityApproval
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.media = window.matchMedia(BESIDE);
+        this.onBeside();
+        this.media.addEventListener('change', this.onBeside);
+    }
+    disconnectedCallback() {
+        this.media?.removeEventListener('change', this.onBeside);
+        super.disconnectedCallback();
+    }
+    render() {
+        /* Reading and failing both drew nothing at all, so a failure looked like an empty screen. */
+        return html `<div class="page">
+      <ox-page-state
+      .loading=${!this.loaded && !this.loadError}
+      .error=${this.loadError}
+      @retry=${() => this.lastId && this.fetchActivityApproval(this.lastId)}
+      >${this.activityThread
+            ? this.renderApproval()
+            : this.loaded
+                ? html `<div empty>
+                <span class="title">${i18next.t('text.no activity thread info')}</span>
+                <span class="why">${i18next.t('text.no-activity-thread-why')}</span>
+              </div>`
+                : nothing}</ox-page-state
+    >
+    </div>`;
+    }
+    renderApproval() {
+        const { terminatedAt } = this.activityApproval;
+        const editable = !terminatedAt;
+        return html `
+      <div class="main">
+        <activity-approval-ribon .activityApproval=${this.activityApproval}></activity-approval-ribon>
+        ${this.activityContent()}
+      </div>
+      <!--
+        보일 항목이 하나도 없으면 타임라인을 편다 — 그때는 화면이 「아래 타임라인의 상신 사유와
+        이력을 보고 판단하세요」로 여기를 가리키므로, 접혀 있으면 그 안내가 거짓말이 된다.
+
+        옆에 설 자리가 있을 때도 편다. 접힌 줄을 눌러 펴는 동작이, 그 줄이 이미 보이는 자리에
+        있으면 하는 일이 없다.
+      -->
+      <activity-thread-timeline
+        class="aside"
+        .activityThread=${this.activityThread}
+        ?open=${!this.hasFields() || this.beside}
+        short-form
+      ></activity-thread-timeline>
+      ${editable
+            ? html `
+              <div comment class="main">
+                <section>
+                  <h2>${i18next.t('field.wl-comment')}</h2>
+                  <textarea
+                    placeholder=${String(i18next.t(this.isReference
+                ? 'text.write-your-comment-as-reference'
+                : 'text.explain the reason for approval/rejection'))}
+                    .value=${this.activityApproval?.comment}
+                    @input=${(e) => {
+                this.activityApproval.comment = e.target.value;
+            }}
+                    @change=${(e) => {
+                this.activityApproval.comment = e.target.value;
+            }}
+                  ></textarea>
+                  <!--
+                  반려는 의견이 필수다(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(this.isReference ? 'text.reference-comment-hint' : 'text.approval-comment-hint')}
+                  </p>
+
+                  <!--
+                    의견을 저장하는 단추는 의견 상자 옆이다(ADR-0060 결정 9 보탬). 동작 줄에는
+                    결정만 둔다 — 전에는 승인 · 반려와 같은 줄에 같은 무게로 서서 셋 다 결정처럼
+                    읽혔고, 좁은 화면에서는 넘침 메뉴로 밀려 반려가 숨을 수 있었다.
+                  -->
+                  <div class="comment-actions">
+                    <button @click=${this.saveActivityApproval.bind(this)}>
+                      <md-icon>edit_note</md-icon>${i18next.t('button.save-note')}
+                    </button>
+                  </div>
+                </section>
+              </div>
+            `
+            : nothing}
+    `;
+    }
+    /** 화면에 낼 항목이 하나라도 있나. 타임라인을 펴 둘지 정하는 자리가 쓴다. */
+    hasFields() {
+        const model = this.activityThread?.activityInstance?.activity?.model;
+        return inputSpecOf(model).length > 0 || outputSpecOf(model).length > 0;
+    }
+    activityContent() {
+        switch (this.activityThread?.activityInstance?.viewType) {
+            case 'template':
+                return this.hostedContent(this.templateContent());
+            case 'generated':
+                return this.generatedContent();
+            /* board 는 전체 화면을 쓰는 캔버스라 카드에 담지 않는다(hostedContent 머리말). */
+            case 'board':
+                return this.boardContent();
+            case 'custom-element': {
+                /*
+                 * The wrapper is for the element, not for the notice.
+                 *
+                 * hostedContent puts the content in a card so every ui type sits at the same place with the
+                 * same frame. The not-loaded notice is already a card — wrapping it drew a card inside a
+                 * card, two borders deep, and its margins landed unevenly: 16 above and none below, inside
+                 * a box that had its own padding. The generated branch returns the same notice unwrapped
+                 * and looks right.
+                 */
+                const { viewSource: tagName } = this.activityThread?.activityInstance || {};
+                /*
+                 * Naming no element is not the same as naming one that is missing.
+                 *
+                 * A template that stops providing a screen clears the field — installActivity does not
+                 * blank what a template leaves undefined, so clearing is written as null. That left
+                 * viewType saying custom-element with nothing named, and this branch answered "the
+                 * screen could not be loaded": a failure, for an activity that simply has no screen of its
+                 * own. Those read as different things to whoever is approving, and the second one is not
+                 * true.
+                 *
+                 * With nothing named, the generated screen is what this activity has — and it draws a
+                 * decision when the activity declares one, which the two plant forms that hit this do.
+                 */
+                if (!tagName) {
+                    return this.generatedContent();
+                }
+                const element = this.customElementContent();
+                return element ? this.hostedContent(element) : this.screenNotLoaded();
+            }
+            case 'page':
+            case 'external':
+                return html ``;
+            default:
+                return this.generatedContent();
+        }
+    }
+    /**
+     * 화면 종류가 달라도 **같은 자리에 같은 모양으로 놓인다.**
+     *
+     * worklist 는 네 가지로 내용을 그린다(generated · custom-element · template · board). 그중
+     * generated 만 절 카드 안에 있었고 나머지 셋은 면 위에 맨몸으로 놓였다. 그래서 같은 결재 화면이
+     * 액티비티에 따라 카드였다가 아니었다가 했다 — 아래의 타임라인 · 의견은 늘 카드라 위계도 어긋났다.
+     *
+     * board 는 뺀다. 전체 폭 · 전체 높이를 쓰는 캔버스라 카드 안에 넣으면 여백이 두 겹이 되고 크기가
+     * 어긋난다.
+     *
+     * 카드는 여백을 두지 않는다(padding: 0). 안에 들어오는 것이 자기 조판을 갖고 있고, 두 겹으로
+     * 주면 안쪽 내용이 카드 가운데로 밀린다.
+     */
+    hostedContent(content) {
+        return html `<section hosted>${content}</section>`;
+    }
+    templateContent() {
+        if (!this.activityApproval) {
+            return html ``;
+        }
+        const { viewSource: template } = this.activityThread?.activityInstance;
+        return unsafeHTML(template);
+    }
+    /**
+     * 결재자가 보는 내용 — **전부 읽기 전용이다.**
+     *
+     * 전에는 「Output」 절을 편집기로 그리고 변경을 activityApproval.output 에 적었다. 그런데
+     * approveActivityApproval / rejectActivityApproval 은 id 와 comment 만 보낸다 — 그 값은 어디에도
+     * 가지 않는다. 결재자가 적을 수 있는 것은 의견 하나이고, 그것은 화면 아래 칸이 받는다.
+     */
+    /** The decision the activity declared, or nothing - drawn by `renderDecision`, the one drawing both screens use. */
+    decisionContent() {
+        const { activityInstance } = this.activityThread || {};
+        const decision = renderDecision(activityInstance?.activity?.decisionKeys, activityInstance?.input);
+        return decision === nothing ? nothing : keyed(this.activityApproval.id, decision);
+    }
+    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);
+        /*
+         * **결재 화면에서 내용이 비어 있는 것은 경고다.**
+         *
+         * 업무 상세라면 「적을 것이 없다」로 끝난다. 여기서는 다르다 — 무엇을 승인하는지 모르는 채로
+         * 승인 · 반려 버튼이 그대로 눌린다. 그 사실을 화면이 말하고, 대신 무엇을 보고 판단할지 알려
+         * 준다(타임라인의 상신 사유).
+         */
+        if (!inputSpec.length && !outputSpec.length) {
+            return keyed(this.activityApproval.id, html `<section empty>
+          <span class="title">${i18next.t('text.no-approval-content')}</span>
+          <span class="why">${i18next.t('text.no-approval-content-why')}</span>
+        </section>`);
+        }
+        return keyed(this.activityApproval.id, html `
+        ${inputSpec.length
+            ? html `
+                <section readonly>
+                  <h2>${i18next.t('label.activity-input')}</h2>
+                  ${renderGiven(inputSpec, input)}
+                </section>
+              `
+            : ''}
+        ${outputSpec.length
+            ? html `
+                <section readonly>
+                  <h2>${i18next.t('field.artifact')}</h2>
+                  ${renderGiven(outputSpec, output)}
+                </section>
+              `
+            : ''}
+      `);
+    }
+    boardContent() {
+        if (!this.activityApproval) {
+            return html ``;
+        }
+        const { output, activityInstance } = this.activityThread;
+        const { viewSource: boardId, input } = activityInstance || {};
+        if (!this.board || this.board.id !== boardId) {
+            this.board = { id: boardId };
+        }
+        return keyed(this.activityApproval.id, html `
+        <ox-board-viewer
+          style="background-color: white;"
+          .board=${this.board}
+          .provider=${provider}
+          .values=${{ ...input, ...output }}
+          hide-fullscreen
+          hide-navigation
+        ></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 (!customElements.get(tagName)) {
+            customElements.whenDefined(tagName).then(() => this.requestUpdate());
+            /* The caller draws the notice — unwrapped, because the notice is its own card. */
+            return undefined;
+        }
+        const element = document.createElement(tagName);
+        element.id = 'custom-content';
+        element.activityId = activityInstance.activity.id;
+        element.input = input;
+        element.output = output;
+        element.activityApproval = this.activityApproval;
+        return element;
+    }
+    /** The activity names a screen and nothing registered it. Says what to judge by instead. */
+    screenNotLoaded() {
+        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>`;
+    }
+    getOutputFromBoard() {
+        const outputSpec = outputSpecOf(this.activityThread?.activityInstance?.activity?.model);
+        const data = this.oxBoardViewer.getSceneValues();
+        return outputSpec.reduce((output, spec) => {
+            output[spec.name] = data[spec.name];
+            return output;
+        }, {});
+    }
+    focusComment() {
+        const id = this.activityApproval?.id;
+        if (!id || !this.active || this.activityApproval?.terminatedAt || this.focusedFor === id) {
+            return;
+        }
+        this.commentInput?.focus({ preventScroll: true });
+        this.focusedFor = id;
+    }
+    updated(changes) {
+        if (changes.has('activityApproval')) {
+            this.updateContext();
+            this.focusComment();
+        }
+    }
+    async pageUpdated(changes, lifecycle, changedBefore) {
+        if (this.active && lifecycle.resourceId) {
+            // Entity 360 changes only the query address. Do not reload the same approval and erase its unsaved opinion.
+            if (this.lastId === lifecycle.resourceId && !('active' in changes))
+                return;
+            this.fetchActivityApproval(lifecycle.resourceId);
+        }
+    }
+    async fetchActivityApproval(id) {
+        const read = ++this.approvalRead;
+        if (this.lastId !== id) {
+            this.activityApproval = undefined;
+            this.activityThread = undefined;
+            this.loaded = false;
+        }
+        this.lastId = id;
+        this.loadError = null;
+        let response;
+        try {
+            response = await client.query({
+                query: gql `
+        query activityApproval($id: String!) {           activityApproval(id: $id) ${ActivityApprovalFetchResult}
+ }
+      `,
+                variables: { id }
+            });
+        }
+        catch (error) {
+            if (read !== this.approvalRead)
+                return;
+            this.loadError = error;
+            return;
+        }
+        if (read !== this.approvalRead)
+            return;
+        if (response.errors?.length || !response.data?.activityApproval) {
+            this.loadError = response.errors?.length
+                ? response.errors
+                : new Error(i18next.t('error.activity-approval not found', { activityApproval: id }));
+            return;
+        }
+        this.activityApproval = response.data.activityApproval;
+        this.loaded = true;
+        this.activityThread = this.activityApproval.activityThread;
+        this.updateContext();
+    }
+    /*
+     * The approval declared that it cannot be undone: ask once, as a destructive confirmation, before
+     * sending it. Reversible and undeclared approvals go straight through, as before.
+     */
+    async confirmIfIrreversible() {
+        const { activityInstance } = this.activityThread || {};
+        const slots = decisionSlots(activityInstance?.activity?.decisionKeys, activityInstance?.input);
+        const gate = approvalGate(slotOfRole(slots, 'reversibility'));
+        if (!gate.ask) {
+            return true;
+        }
+        return await OxPrompt.open({
+            type: 'warning',
+            title: i18next.t('text.approval-is-irreversible'),
+            text: gate.caveat,
+            /* From the declaration, not a literal: this screen does not decide what is irreversible. */
+            confirmButton: { text: i18next.t('button.approve'), destructive: gate.ask },
+            cancelButton: { text: i18next.t('button.cancel') }
+        });
+    }
+    async rejectActivityApproval() {
+        var { id, comment } = this.activityApproval;
+        if (!comment) {
+            document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.enter a comment') } }));
+            this.commentInput.focus();
+            return;
+        }
+        const outcome = await ranMutation(() => client.mutate({
+            mutation: gql `
+        mutation ($id: String!, $comment: String!) {           rejectActivityApproval(id: $id,  comment: $comment) ${ActivityApprovalFetchResult}
+ }
+      `,
+            variables: { id, comment }
+        }));
+        if (outcome.ok) {
+            this.activityApproval = outcome.data.rejectActivityApproval;
+            this.activityThread = this.activityApproval.activityThread;
+            this.updateContext();
+            document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.task_is_rejected_successfully') } }));
+        }
+    }
+    async approveActivityApproval() {
+        var { id, comment } = this.activityApproval;
+        if (!(await this.confirmIfIrreversible())) {
+            return;
+        }
+        const outcome = await ranMutation(() => client.mutate({
+            mutation: gql `
+        mutation ($id: String!, $comment: String) {           approveActivityApproval(id: $id,  comment: $comment) ${ActivityApprovalFetchResult}
+ }
+      `,
+            variables: { id, comment }
+        }));
+        if (outcome.ok) {
+            this.activityApproval = outcome.data.approveActivityApproval;
+            this.activityThread = this.activityApproval.activityThread;
+            this.updateContext();
+            document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.task_is_approved_successfully') } }));
+        }
+    }
+    async saveActivityApproval() {
+        var { id, comment } = this.activityApproval;
+        const outcome = await ranMutation(() => client.mutate({
+            mutation: gql `
+        mutation ($id: String!, $comment: String) {           saveActivityApproval(id: $id, comment: $comment) ${ActivityApprovalFetchResult}
+ }
+      `,
+            variables: { id, comment }
+        }));
+        if (outcome.ok) {
+            this.activityApproval = outcome.data.saveActivityApproval;
+            this.activityThread = this.activityApproval.activityThread;
+            this.updateContext();
+            document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.task_is_saved_successfully') } }));
+        }
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ActivityApprovalPage.prototype, "activityApproval", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ActivityApprovalPage.prototype, "beside", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ActivityApprovalPage.prototype, "loaded", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ActivityApprovalPage.prototype, "loadError", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ActivityApprovalPage.prototype, "activityThread", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ActivityApprovalPage.prototype, "board", void 0);
+__decorate([
+    query('textarea'),
+    __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'),
+    __metadata("design:type", Object)
+], ActivityApprovalPage.prototype, "oxBoardViewer", void 0);
+ActivityApprovalPage = __decorate([
+    customElement('activity-approval-page')
+], ActivityApprovalPage);
+export { ActivityApprovalPage };
+//# sourceMappingURL=activity-approval-page.js.map