@things-factory/worklist 10.1.247 → 10.1.248

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

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