@things-factory/worklist 10.1.248 → 10.1.250

package/dist-client/pages/activity-catalog/activity-detail-page.js

@@ -0,0 +1,525 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/list-state/ox-page-state.js';
+import '@things-factory/organization';
+import { isApprovalStep } from '@things-factory/organization/dist-client';
+import gql from 'graphql-tag';
+import { css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { openPopup, entity360Name } from '@operato/layout';
+import { navigate, PageView } from '@operato/shell';
+import { ButtonStyles, DocumentPageStyles, ScrollbarStyles } from '@operato/styles';
+import { ranMutation } from '../../components/say-outcome.js';
+import { activityPanels, panelSection } from './activity-panels.js';
+import { detailActions } from './activity-detail-actions.js';
+import { guideLines } from './activity-guide.js';
+/**
+ * 업무 하나 — **그 업무에 관한 일을 여기서 끝낸다.**
+ *
+ * ── 왜 이 화면이 생겼나 (2026-09-23) ───────────────────────────────────────
+ * 결재선 하나를 세워서 문이 서는지 보려면 화면을 셋 열어야 했고, 역할에 사람이 없으면 넷에서
+ * 다섯이었다 [확인함]. 카탈로그는 카드에 「결재선 없음」이라고 적어 놓고 **어디로 가야 하는지는
+ * 말하지 않았다** — 그 파일 전체에 `navigate()` 도 `<a href>` 도 없었다. 사람은 메뉴로 돌아가
+ * 이름으로 찾아야 했다.
+ *
+ * 그래서 카탈로그는 고르는 자리로 두고, 고른 뒤의 일은 이 화면 안에서 끝낸다.
+ *
+ * ── 돌아갈 길을 화면이 갖는다 ─────────────────────────────────────────────
+ * 탭 줄에 카탈로그가 남아 있으니 됐다고 볼 수 없다. 탭 줄은 **없을 수 있다** — 페이지가
+ * `mdibar: false` 를 적으면 셸이 걷고(`apptool-ui/client/layout/mdibar-visibility.ts`), 무엇보다
+ * **주소를 받아서 바로 여는 사람에게는 이전 화면이 아예 없다.** 「이 업무 결재선 좀 봐 주세요」로
+ * 링크를 받은 사람이 그 경우다. 그래서 머리에 돌아갈 자리를 직접 둔다.
+ *
+ * ── 못 하는 일은 까닭을 말한다 ────────────────────────────────────────────
+ * 눌리지 않는 단추만 남기지 않는다. 무엇을 할 수 있는지와 못 하면 왜인지는
+ * `activity-detail-actions.ts` 가 값으로 답하고, 이 화면은 그 값을 문장으로 바꾼다. 원인을 여기서
+ * 지어내지 않는다.
+ */
+const DETAIL = gql `
+  query ($name: String!) {
+    responses: installableActivities {
+      items {
+        name
+        label
+        labelTKey
+        description
+        guide
+        guideTKeys
+        approvalSteps
+        activity {
+          id
+        }
+        readiness {
+          stage
+        }
+      }
+    }
+    activityByName(name: $name) {
+      id
+      name
+      description
+      approvalLine {
+        type
+        value
+        participation
+        notifyAfter
+        approver {
+          id
+          name
+          description
+          controlNo
+        }
+      }
+    }
+  }
+`;
+/**
+ * 결재선에서 **서명하는 단계만** 센다. 참조는 알기만 하고 막지 않는다.
+ *
+ * 손으로 `'reference'` 와 비교하지 않는다 — API 는 `Reference` 로 보내서, 참조 한 줄이 결재 한 단계로
+ * 세어졌다. 목록의 수(`installableActivities.approvalSteps`)와 같은 규칙을 쓴다.
+ */
+function approvalSteps(line) {
+    return (line || []).filter(isApprovalStep).length;
+}
+let ActivityDetailPage = class ActivityDetailPage extends localize(i18next)(PageView) {
+    constructor() {
+        super(...arguments);
+        this.name = '';
+        this.entry = null;
+        this.activity = null;
+        this.loaded = false;
+        /** 구획이 「이 업무에는 보일 것 없음」을 알렸나. 이름으로 센다. */
+        this.emptyPanels = {};
+        /** 왜 못 읽었나 — ox-page-state 가 그것을 말하고 다시 시도를 준다. */
+        this.loadError = null;
+    }
+    static { this.styles = [
+        ScrollbarStyles,
+        DocumentPageStyles,
+        ButtonStyles,
+        css `
+      /*
+       * ── On the document frame (ADR-0117) ─────────────────────────────────────
+       * The screen imported the frame but drew outside its .page and styled its own section heads (small
+       * capitals) and buttons (pills). None of the frame's gutter, sections or text ground reached it, and
+       * long guide lines ran off the right edge. The parts are now page sections, the buttons sit in their
+       * section heads, and the name line (drawn here, see context) takes the title bar's size.
+       */
+
+      /*
+       * A section or panel the screen hides must stay hidden: .page-section sets display, which beat the
+       * browser's own [hidden] rule and left the empty "more settings" head standing alone.
+       */
+      [hidden] {
+        display: none;
+      }
+
+      /* Back to the catalog: above everything, read before the rest. */
+      a.back {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        align-self: flex-start;
+      }
+
+      a.back md-icon {
+        --md-icon-size: 16px;
+      }
+
+      /*
+       * ── Say what the screen is for, then the one thing people come here to do ──
+       * The screen read as a list of parts (a stage badge, an in-use badge, "this activity is", "use here",
+       * "approval line", "approval 2 steps") and left the reader to work out what to do. Now: the name, one
+       * sentence on what the activity is and what this screen decides, then who approves, with each step's
+       * role and what that role is, then whether this site uses it, then the notes.
+       */
+      .head .name {
+        margin: 0;
+        font-size: var(--ui-t-page, 18px);
+        font-weight: 700;
+        text-wrap: balance;
+      }
+
+
+      .lead {
+        margin: var(--spacing-small, 4px) 0 0;
+      }
+
+      .use {
+        margin-left: var(--spacing-small, 4px);
+        color: var(--ui-muted);
+        font-size: var(--ui-t-small, 11.5px);
+        font-weight: 400;
+      }
+
+      /* Why something cannot be done, or what the current state is: sentences, not badges. */
+      .why {
+        margin: 0;
+      }
+
+      .why {
+        color: var(--ui-muted);
+      }
+
+      /* One approval step per row: the step and the name. */
+      ol.steps {
+        display: grid;
+        grid-template-columns: max-content minmax(0, 1fr);
+        column-gap: var(--spacing-large, 12px);
+        margin: 0 0 var(--spacing-medium, 8px);
+        padding: 0;
+        list-style: none;
+      }
+
+      ol.steps li {
+        grid-column: 1 / -1;
+        display: grid;
+        grid-template-columns: subgrid;
+        align-items: baseline;
+        padding: var(--spacing-medium, 8px) 0;
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+      }
+
+      ol.steps li:first-child {
+        border-top: none;
+      }
+
+      .step {
+        color: var(--ui-muted);
+        font-size: var(--ui-t-small, 11.5px);
+        font-variant-numeric: tabular-nums;
+      }
+
+      .who {
+        font-weight: 600;
+      }
+
+      ul.notes {
+        margin: 0;
+        padding-left: var(--spacing-huge, 24px);
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-small, 4px);
+      }
+    `
+    ]; }
+    get context() {
+        return {
+            frame: 'document',
+            title: this.entry ? this.shownName(this.entry) : i18next.t('title.activity-detail'),
+            /*
+             * 이름은 **이 화면이 그린다.** 제목 줄은 끈다.
+             *
+             * 이름 옆에 단계 띠와 「사용 중」이 함께 서야 한다 — 그 셋이 한 줄에 있어야 이 업무를 지금
+             * 믿고 쓸 수 있는지가 한눈에 읽힌다. 제목 줄은 그것들을 못 받는다.
+             *
+             * 끄지 않으면 같은 이름이 화면에 두 번 뜬다(실측 2026-09-24: 제목 줄 「부적합 처분 승인」,
+             * 바로 아래 또 「부적합 처분 승인」). `title` 은 그대로 두므로 **탭 이름은 살아 있다** —
+             * `heading: false` 가 그리는 자리마다 켜고 끄라고 둔 문이다.
+             */
+            heading: false,
+            /* The menu has no row for one activity; it lights the catalog, where the back link goes. */
+            menu: 'activity-catalog',
+            help: 'worklist/activity-catalog-page',
+            actions: this.useActions()
+        };
+    }
+    /**
+     * 이름이 주소로 온다. 같은 라우트 안에서 이름만 바뀌어도 이 콜백이 다시 오므로, **이름이 실제로
+     * 바뀌었을 때만** 다시 읽는다.
+     */
+    async pageUpdated(changes, lifecycle) {
+        this.readName(lifecycle);
+    }
+    /**
+     * 처음 그린 뒤에도 한 번 읽는다 — **첫 방문이 통째로 비는 것을 봤다.**
+     *
+     * [확인함 2026-09-24 :4000] 카드에서 처음 들어가면 주소는 맞고(`?name=…`) `lifecycle.params.name`
+     * 도 들어 있는데 화면에 돌아갈 링크만 남았다. 같은 자리로 두 번째 들어가면 멀쩡했고, 그 상태에서
+     * 콜백을 손으로 한 번 부르면 바로 채워졌다.
+     *
+     * 이 화면은 주소로 처음 닿을 때 **모듈이 그때 실려 온다**(route.ts 의 동적 import). 셸은 화면을
+     * 처음 세울 때 이 콜백을 다음 animationFrame 으로 미루는데(page-view 가 「엘리먼트가 아직 안
+     * 만들어졌을 수 있다」고 적어 둔 그 갈래), 그 사이에 요소가 아직 이 클래스로 올라오지 않았으면
+     * **아무 일도 안 하는 기반 클래스의 콜백**이 불린다. 그 뒤로는 생애주기가 더 안 바뀌므로 이름을
+     * 받을 기회가 다시 오지 않는다.
+     *
+     * 그래서 이름을 받는 자리를 둘로 둔다. 둘 다 같은 판단을 지나므로 두 번 읽지 않는다.
+     */
+    firstUpdated() {
+        this.readName();
+    }
+    readName(lifecycle) {
+        const name = String((lifecycle ?? this.lifecycle)?.params?.name || '');
+        if (name && name !== this.name) {
+            this.name = name;
+            /* 구획이 알린 것은 그 업무의 것이다. 다른 업무로 옮기면 다시 듣는다. */
+            this.emptyPanels = {};
+            this.fetch();
+        }
+    }
+    shownName(one) {
+        if (!one?.label)
+            return String(one?.name ?? '');
+        return one.labelTKey ? String(i18next.t(one.labelTKey, { defaultValue: one.label })) : String(one.label);
+    }
+    async fetch() {
+        this.loaded = false;
+        this.loadError = null;
+        /*
+         * The tab and the document title come from `context`, and the shell reads it when the route
+         * changes - before this answer arrives. Nothing read it again, so the tab kept the previous
+         * activity's name while the page showed the next one [확인함 2026-09-24 :4000: 「교대 편성 변경
+         * 승인」 on the tab over 「계획 정비 연기 승인」]. Drop the old entry so the wait says the generic
+         * name, and hand the context over again once the answer is in.
+         */
+        this.entry = null;
+        this.updateContext();
+        try {
+            const response = await client.query({ query: DETAIL, variables: { name: this.name }, fetchPolicy: 'no-cache' });
+            /*
+             * 목록에 필터가 없어서 전부 받아 하나를 고른다. 업무는 설치된 모듈이 선언하는 것이라 수가
+             * 닫혀 있다 [확인함 2026-09-23: 마흔 안쪽]. 그 전제가 깨지면 서버에 이름으로 찾는 갈래를
+             * 두는 것이 맞다 — 여기서 자르지 않는다.
+             */
+            const items = response?.data?.responses?.items || [];
+            this.entry = items.find((one) => one.name === this.name) || null;
+            this.activity = response?.data?.activityByName || null;
+            this.loaded = true;
+        }
+        catch (thrown) {
+            this.loadError = thrown;
+            this.loaded = true;
+        }
+        this.updateContext();
+    }
+    render() {
+        return html `<div class="page">
+      <a
+        class="back page-nav-link"
+        href="activity-catalog"
+        @click=${(e) => (e.preventDefault(), navigate('activity-catalog'))}
+      >
+        <md-icon>chevron_left</md-icon>${i18next.t('button.back-to-activity-catalog')}
+      </a>
+
+      <ox-page-state .loading=${!this.loaded} .error=${this.loadError} @retry=${() => this.fetch()}
+        >${this.loaded && !this.loadError ? this.renderDetail() : ''}</ox-page-state
+      >
+    </div>`;
+    }
+    renderDetail() {
+        if (!this.entry) {
+            /* 없는 이름으로 들어온 주소. 빈 화면으로 두지 않는다 — 무엇을 못 찾았는지 이름을 댄다. */
+            return html `<div class="why">${i18next.t('text.activity-not-found', { name: this.name })}</div>`;
+        }
+        const actions = detailActions(this.entry);
+        const lines = guideLines(this.entry, (key, options) => i18next.t(key, options)).filter(Boolean);
+        /* The first guide line says what the activity is; with no guide, the description does. */
+        const [what, ...notes] = lines.length ? lines : [this.entry.description].filter(Boolean);
+        return html `
+      <div class="head">
+        <h2 class="name">${this.shownName(this.entry)} ${this.renderUse(actions)}</h2>
+        ${what ? html `<p class="lead">${what}</p>` : ''}
+      </div>
+
+      ${this.renderApprovalLine(actions)} ${this.renderNotes(notes)} ${this.renderPanels()}
+    `;
+    }
+    /** 알아 둘 것 — 첫 줄(무엇인가)을 뺀 안내문. 없으면 구획을 세우지 않는다. */
+    renderNotes(notes) {
+        if (!notes.length)
+            return html ``;
+        return html `
+      <section class="page-section">
+        <div class="page-section-header"><h3>${i18next.t('label.activity-what-is-it')}</h3></div>
+        <ul class="notes page-prose">
+          ${notes.map(line => html `<li>${line}</li>`)}
+        </ul>
+      </section>
+    `;
+    }
+    /**
+     * 이 업무를 쓸지 말지 — 화면 전체의 결정이라 하단 동작 줄에 둔다(page-standard §8).
+     * 아직 만들어지지 않은 업무는 쓸 수 없으므로 단추가 없다.
+     */
+    useActions() {
+        if (!this.entry)
+            return [];
+        const actions = detailActions(this.entry);
+        if (!actions.registered)
+            return [];
+        return actions.inUse
+            ? [{ title: i18next.t('button.activity-stop-using'), action: () => this.setUse(false) }]
+            : [{ title: i18next.t('button.activity-start-using'), action: () => this.setUse(true), emphasis: { raised: true } }];
+    }
+    /** 이름 옆의 상태 한 마디. */
+    renderUse(actions) {
+        if (!actions.registered) {
+            return html `<span class="use">${i18next.t('text.activity-line-not-built')}</span>`;
+        }
+        return html `<span class="use"
+      >${actions.inUse ? i18next.t('text.activity-in-use-here') : i18next.t('text.activity-not-in-use-here')}</span
+    >`;
+    }
+    /**
+     * 누가 승인하나 — 결재·배정 현황에서 이름을 누르고 온 사람이 보러 온 것. 그래서 맨 위다.
+     *
+     * 단계와 이름만 적는다.
+     */
+    renderApprovalLine(actions) {
+        const line = this.activity?.approvalLine || [];
+        const steps = approvalSteps(line);
+        return html `
+      <section class="page-section">
+        <div class="page-section-header">
+          <h3>${i18next.t('label.activity-approval-line')}</h3>
+          <div class="page-section-actions">
+            <button
+              ?raised=${!!actions.canSetApprovalLine && !steps}
+              ?disabled=${!actions.canSetApprovalLine}
+              @click=${() => this.openApprovalLine(line)}
+            >
+              ${i18next.t('button.activity-set-approval-line')}
+            </button>
+          </div>
+        </div>
+
+        ${steps
+            ? html `<ol class="steps">
+              ${line.map((one, at) => html `<li>
+                    <span class="step">${i18next.t('text.activity-step', { n: at + 1 })}</span>
+                    <span class="who">${entity360Name(one.approver, one.approver?.name || one.value || '')}</span>
+                  </li>`)}
+            </ol>`
+            : ''}
+
+        ${actions.approvalLineBlock
+            ? html `<p class="why">${i18next.t('text.activity-line-' + actions.approvalLineBlock)}</p>`
+            : steps
+                ? ''
+                : html `<p class="why">${i18next.t('text.activity-line-none')}</p>`}
+      </section>
+    `;
+    }
+    /**
+     * 다른 패키지가 건 구획.
+     *
+     * **하나도 안 걸렸으면 그 사실을 말한다.** 빈자리로 두면 「이 앱에는 그 구획이 없다」와
+     * 「정할 것이 없다」가 같은 화면이 된다.
+     */
+    renderPanels() {
+        const context = { activityName: this.entry.name, activityId: this.activity?.id };
+        const panels = activityPanels(context);
+        const shape = panelSection(panels.map(one => one.name), this.emptyPanels);
+        if (shape.kind === 'none-registered') {
+            return html `
+        <section class="page-section">
+          <div class="page-section-header"><h3>${i18next.t('label.activity-panels')}</h3></div>
+          <p class="why">${i18next.t('text.activity-no-panels')}</p>
+        </section>
+      `;
+        }
+        /*
+         * 비었다고 알린 구획도 **그리기는 계속한다** — 숨길 뿐이다. 지우면 그 구획이 다시 읽고
+         * 「있다」고 알릴 자리가 없어진다.
+         */
+        const hidden = shape.kind === 'all-empty' ? panels.map(one => one.name) : shape.hidden;
+        return html `
+      <section class="page-section" ?hidden=${shape.kind === 'all-empty'}>
+        <div class="page-section-header"><h3>${i18next.t('label.activity-panels')}</h3></div>
+        ${panels.map(panel => html `<div
+              ?hidden=${hidden.includes(panel.name)}
+              @activity-panel-content=${(event) => this.panelReported(panel.name, event)}
+            >
+              ${panel.render(context)}
+            </div>`)}
+      </section>
+    `;
+    }
+    panelReported(name, event) {
+        event.stopPropagation();
+        this.emptyPanels = { ...this.emptyPanels, [name]: event.detail?.empty === true };
+    }
+    async setUse(on) {
+        const outcome = await ranMutation(() => client.mutate({
+            mutation: on
+                ? gql `
+              mutation ($name: String!) {
+                activateInstallableActivity(name: $name) {
+                  name
+                }
+              }
+            `
+                : gql `
+              mutation ($name: String!) {
+                deactivateInstallableActivity(name: $name) {
+                  name
+                }
+              }
+            `,
+            variables: { name: this.entry.name }
+        }));
+        if (!outcome.ok)
+            return;
+        this.fetch();
+    }
+    /**
+     * 결재선 편집기는 **organization 것을 그대로 부른다.** 이 화면이 자기 편집기를 따로 지으면 같은
+     * 결재선이 두 화면에서 다르게 편집된다.
+     */
+    openApprovalLine(line) {
+        const popup = openPopup(html `<approval-line-items-editor-popup
+        .value=${line}
+        .confirmCallback=${(after) => this.saveApprovalLine(after || [])}
+      ></approval-line-items-editor-popup>`, { backdrop: true, size: 'large', title: i18next.t('title.approval-line editor') });
+        return popup;
+    }
+    async saveApprovalLine(after) {
+        const outcome = await ranMutation(() => client.mutate({
+            mutation: gql `
+          mutation ($patches: [ActivityPatch!]!) {
+            updateMultipleActivity(patches: $patches) {
+              name
+            }
+          }
+        `,
+            variables: { patches: [{ id: this.activity.id, approvalLine: after, cuFlag: 'M' }] }
+        }));
+        if (!outcome.ok)
+            return;
+        this.fetch();
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ActivityDetailPage.prototype, "name", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ActivityDetailPage.prototype, "entry", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ActivityDetailPage.prototype, "activity", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ActivityDetailPage.prototype, "loaded", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ActivityDetailPage.prototype, "emptyPanels", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ActivityDetailPage.prototype, "loadError", void 0);
+ActivityDetailPage = __decorate([
+    customElement('activity-detail-page')
+], ActivityDetailPage);
+export { ActivityDetailPage };
+//# sourceMappingURL=activity-detail-page.js.map

package/dist-client/pages/activity-catalog/activity-detail-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-detail-page.js","sourceRoot":"","sources":["../../../client/pages/activity-catalog/activity-detail-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/list-state/ox-page-state.js'\nimport '@things-factory/organization'\nimport { isApprovalStep } from '@things-factory/organization/dist-client'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup, entity360Name } from '@operato/layout'\nimport { navigate, PageView } from '@operato/shell'\nimport { ButtonStyles, DocumentPageStyles, ScrollbarStyles } from '@operato/styles'\n\nimport { ranMutation } from '../../components/say-outcome.js'\nimport { activityPanels, panelSection } from './activity-panels.js'\nimport { detailActions } from './activity-detail-actions.js'\nimport { canonicalStage } from './activity-stage.js'\nimport { guideLines } from './activity-guide.js'\n\n/**\n * 업무 하나 — **그 업무에 관한 일을 여기서 끝낸다.**\n *\n * ── 왜 이 화면이 생겼나 (2026-09-23) ───────────────────────────────────────\n * 결재선 하나를 세워서 문이 서는지 보려면 화면을 셋 열어야 했고, 역할에 사람이 없으면 넷에서\n * 다섯이었다 [확인함]. 카탈로그는 카드에 「결재선 없음」이라고 적어 놓고 **어디로 가야 하는지는\n * 말하지 않았다** — 그 파일 전체에 `navigate()` 도 `<a href>` 도 없었다. 사람은 메뉴로 돌아가\n * 이름으로 찾아야 했다.\n *\n * 그래서 카탈로그는 고르는 자리로 두고, 고른 뒤의 일은 이 화면 안에서 끝낸다.\n *\n * ── 돌아갈 길을 화면이 갖는다 ─────────────────────────────────────────────\n * 탭 줄에 카탈로그가 남아 있으니 됐다고 볼 수 없다. 탭 줄은 **없을 수 있다** — 페이지가\n * `mdibar: false` 를 적으면 셸이 걷고(`apptool-ui/client/layout/mdibar-visibility.ts`), 무엇보다\n * **주소를 받아서 바로 여는 사람에게는 이전 화면이 아예 없다.** 「이 업무 결재선 좀 봐 주세요」로\n * 링크를 받은 사람이 그 경우다. 그래서 머리에 돌아갈 자리를 직접 둔다.\n *\n * ── 못 하는 일은 까닭을 말한다 ────────────────────────────────────────────\n * 눌리지 않는 단추만 남기지 않는다. 무엇을 할 수 있는지와 못 하면 왜인지는\n * `activity-detail-actions.ts` 가 값으로 답하고, 이 화면은 그 값을 문장으로 바꾼다. 원인을 여기서\n * 지어내지 않는다.\n */\nconst DETAIL = gql`\n  query ($name: String!) {\n    responses: installableActivities {\n      items {\n        name\n        label\n        labelTKey\n        description\n        guide\n        guideTKeys\n        approvalSteps\n        activity {\n          id\n        }\n        readiness {\n          stage\n        }\n      }\n    }\n    activityByName(name: $name) {\n      id\n      name\n      description\n      approvalLine {\n        type\n        value\n        participation\n        notifyAfter\n        approver {\n          id\n          name\n          description\n          controlNo\n        }\n      }\n    }\n  }\n`\n\n/**\n * 결재선에서 **서명하는 단계만** 센다. 참조는 알기만 하고 막지 않는다.\n *\n * 손으로 `'reference'` 와 비교하지 않는다 — API 는 `Reference` 로 보내서, 참조 한 줄이 결재 한 단계로\n * 세어졌다. 목록의 수(`installableActivities.approvalSteps`)와 같은 규칙을 쓴다.\n */\nfunction approvalSteps(line?: any[]): number {\n  return (line || []).filter(isApprovalStep).length\n}\n\n@customElement('activity-detail-page')\nexport class ActivityDetailPage extends localize(i18next)(PageView) {\n  static styles = [\n    ScrollbarStyles,\n    DocumentPageStyles,\n    ButtonStyles,\n    css`\n      /*\n       * ── On the document frame (ADR-0117) ─────────────────────────────────────\n       * The screen imported the frame but drew outside its .page and styled its own section heads (small\n       * capitals) and buttons (pills). None of the frame's gutter, sections or text ground reached it, and\n       * long guide lines ran off the right edge. The parts are now page sections, the buttons sit in their\n       * section heads, and the name line (drawn here, see context) takes the title bar's size.\n       */\n\n      /*\n       * A section or panel the screen hides must stay hidden: .page-section sets display, which beat the\n       * browser's own [hidden] rule and left the empty \"more settings\" head standing alone.\n       */\n      [hidden] {\n        display: none;\n      }\n\n      /* Back to the catalog: above everything, read before the rest. */\n      a.back {\n        display: inline-flex;\n        align-items: center;\n        gap: 2px;\n        align-self: flex-start;\n      }\n\n      a.back md-icon {\n        --md-icon-size: 16px;\n      }\n\n      /*\n       * ── Say what the screen is for, then the one thing people come here to do ──\n       * The screen read as a list of parts (a stage badge, an in-use badge, \"this activity is\", \"use here\",\n       * \"approval line\", \"approval 2 steps\") and left the reader to work out what to do. Now: the name, one\n       * sentence on what the activity is and what this screen decides, then who approves, with each step's\n       * role and what that role is, then whether this site uses it, then the notes.\n       */\n      .head .name {\n        margin: 0;\n        font-size: var(--ui-t-page, 18px);\n        font-weight: 700;\n        text-wrap: balance;\n      }\n\n\n      .lead {\n        margin: var(--spacing-small, 4px) 0 0;\n      }\n\n      .use {\n        margin-left: var(--spacing-small, 4px);\n        color: var(--ui-muted);\n        font-size: var(--ui-t-small, 11.5px);\n        font-weight: 400;\n      }\n\n      /* Why something cannot be done, or what the current state is: sentences, not badges. */\n      .why {\n        margin: 0;\n      }\n\n      .why {\n        color: var(--ui-muted);\n      }\n\n      /* One approval step per row: the step and the name. */\n      ol.steps {\n        display: grid;\n        grid-template-columns: max-content minmax(0, 1fr);\n        column-gap: var(--spacing-large, 12px);\n        margin: 0 0 var(--spacing-medium, 8px);\n        padding: 0;\n        list-style: none;\n      }\n\n      ol.steps li {\n        grid-column: 1 / -1;\n        display: grid;\n        grid-template-columns: subgrid;\n        align-items: baseline;\n        padding: var(--spacing-medium, 8px) 0;\n        border-top: 1px solid var(--md-sys-color-outline-variant);\n      }\n\n      ol.steps li:first-child {\n        border-top: none;\n      }\n\n      .step {\n        color: var(--ui-muted);\n        font-size: var(--ui-t-small, 11.5px);\n        font-variant-numeric: tabular-nums;\n      }\n\n      .who {\n        font-weight: 600;\n      }\n\n      ul.notes {\n        margin: 0;\n        padding-left: var(--spacing-huge, 24px);\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-small, 4px);\n      }\n    `\n  ]\n\n  @state() private name = ''\n  @state() private entry: any = null\n  @state() private activity: any = null\n  @state() private loaded = false\n  /** 구획이 「이 업무에는 보일 것 없음」을 알렸나. 이름으로 센다. */\n  @state() private emptyPanels: Record<string, boolean> = {}\n  /** 왜 못 읽었나 — ox-page-state 가 그것을 말하고 다시 시도를 준다. */\n  @state() private loadError: unknown = null\n\n  get context() {\n    return {\n      frame: 'document',\n      title: this.entry ? this.shownName(this.entry) : i18next.t('title.activity-detail'),\n      /*\n       * 이름은 **이 화면이 그린다.** 제목 줄은 끈다.\n       *\n       * 이름 옆에 단계 띠와 「사용 중」이 함께 서야 한다 — 그 셋이 한 줄에 있어야 이 업무를 지금\n       * 믿고 쓸 수 있는지가 한눈에 읽힌다. 제목 줄은 그것들을 못 받는다.\n       *\n       * 끄지 않으면 같은 이름이 화면에 두 번 뜬다(실측 2026-09-24: 제목 줄 「부적합 처분 승인」,\n       * 바로 아래 또 「부적합 처분 승인」). `title` 은 그대로 두므로 **탭 이름은 살아 있다** —\n       * `heading: false` 가 그리는 자리마다 켜고 끄라고 둔 문이다.\n       */\n      heading: false,\n      /* The menu has no row for one activity; it lights the catalog, where the back link goes. */\n      menu: 'activity-catalog',\n      help: 'worklist/activity-catalog-page',\n      actions: this.useActions()\n    }\n  }\n\n  /**\n   * 이름이 주소로 온다. 같은 라우트 안에서 이름만 바뀌어도 이 콜백이 다시 오므로, **이름이 실제로\n   * 바뀌었을 때만** 다시 읽는다.\n   */\n  async pageUpdated(changes: any, lifecycle: any) {\n    this.readName(lifecycle)\n  }\n\n  /**\n   * 처음 그린 뒤에도 한 번 읽는다 — **첫 방문이 통째로 비는 것을 봤다.**\n   *\n   * [확인함 2026-09-24 :4000] 카드에서 처음 들어가면 주소는 맞고(`?name=…`) `lifecycle.params.name`\n   * 도 들어 있는데 화면에 돌아갈 링크만 남았다. 같은 자리로 두 번째 들어가면 멀쩡했고, 그 상태에서\n   * 콜백을 손으로 한 번 부르면 바로 채워졌다.\n   *\n   * 이 화면은 주소로 처음 닿을 때 **모듈이 그때 실려 온다**(route.ts 의 동적 import). 셸은 화면을\n   * 처음 세울 때 이 콜백을 다음 animationFrame 으로 미루는데(page-view 가 「엘리먼트가 아직 안\n   * 만들어졌을 수 있다」고 적어 둔 그 갈래), 그 사이에 요소가 아직 이 클래스로 올라오지 않았으면\n   * **아무 일도 안 하는 기반 클래스의 콜백**이 불린다. 그 뒤로는 생애주기가 더 안 바뀌므로 이름을\n   * 받을 기회가 다시 오지 않는다.\n   *\n   * 그래서 이름을 받는 자리를 둘로 둔다. 둘 다 같은 판단을 지나므로 두 번 읽지 않는다.\n   */\n  firstUpdated() {\n    this.readName()\n  }\n\n  private readName(lifecycle?: any) {\n    const name = String((lifecycle ?? this.lifecycle)?.params?.name || '')\n\n    if (name && name !== this.name) {\n      this.name = name\n      /* 구획이 알린 것은 그 업무의 것이다. 다른 업무로 옮기면 다시 듣는다. */\n      this.emptyPanels = {}\n      this.fetch()\n    }\n  }\n\n  private shownName(one: any): string {\n    if (!one?.label) return String(one?.name ?? '')\n    return one.labelTKey ? String(i18next.t(one.labelTKey, { defaultValue: one.label })) : String(one.label)\n  }\n\n  private async fetch() {\n    this.loaded = false\n    this.loadError = null\n    /*\n     * The tab and the document title come from `context`, and the shell reads it when the route\n     * changes - before this answer arrives. Nothing read it again, so the tab kept the previous\n     * activity's name while the page showed the next one [확인함 2026-09-24 :4000: 「교대 편성 변경\n     * 승인」 on the tab over 「계획 정비 연기 승인」]. Drop the old entry so the wait says the generic\n     * name, and hand the context over again once the answer is in.\n     */\n    this.entry = null\n    this.updateContext()\n\n    try {\n      const response = await client.query({ query: DETAIL, variables: { name: this.name }, fetchPolicy: 'no-cache' })\n\n      /*\n       * 목록에 필터가 없어서 전부 받아 하나를 고른다. 업무는 설치된 모듈이 선언하는 것이라 수가\n       * 닫혀 있다 [확인함 2026-09-23: 마흔 안쪽]. 그 전제가 깨지면 서버에 이름으로 찾는 갈래를\n       * 두는 것이 맞다 — 여기서 자르지 않는다.\n       */\n      const items = response?.data?.responses?.items || []\n\n      this.entry = items.find((one: any) => one.name === this.name) || null\n      this.activity = response?.data?.activityByName || null\n      this.loaded = true\n    } catch (thrown) {\n      this.loadError = thrown\n      this.loaded = true\n    }\n\n    this.updateContext()\n  }\n\n  render() {\n    return html`<div class=\"page\">\n      <a\n        class=\"back page-nav-link\"\n        href=\"activity-catalog\"\n        @click=${(e: Event) => (e.preventDefault(), navigate('activity-catalog'))}\n      >\n        <md-icon>chevron_left</md-icon>${i18next.t('button.back-to-activity-catalog')}\n      </a>\n\n      <ox-page-state .loading=${!this.loaded} .error=${this.loadError} @retry=${() => this.fetch()}\n        >${this.loaded && !this.loadError ? this.renderDetail() : ''}</ox-page-state\n      >\n    </div>`\n  }\n\n  private renderDetail() {\n    if (!this.entry) {\n      /* 없는 이름으로 들어온 주소. 빈 화면으로 두지 않는다 — 무엇을 못 찾았는지 이름을 댄다. */\n      return html`<div class=\"why\">${i18next.t('text.activity-not-found', { name: this.name })}</div>`\n    }\n\n    const actions = detailActions(this.entry)\n    const lines = guideLines(this.entry, (key, options) => i18next.t(key, options)).filter(Boolean)\n    /* The first guide line says what the activity is; with no guide, the description does. */\n    const [what, ...notes] = lines.length ? lines : [this.entry.description].filter(Boolean)\n\n    return html`\n      <div class=\"head\">\n        <h2 class=\"name\">${this.shownName(this.entry)} ${this.renderUse(actions)}</h2>\n        ${what ? html`<p class=\"lead\">${what}</p>` : ''}\n      </div>\n\n      ${this.renderApprovalLine(actions)} ${this.renderNotes(notes)} ${this.renderPanels()}\n    `\n  }\n\n  /** 알아 둘 것 — 첫 줄(무엇인가)을 뺀 안내문. 없으면 구획을 세우지 않는다. */\n  private renderNotes(notes: string[]) {\n    if (!notes.length) return html``\n\n    return html`\n      <section class=\"page-section\">\n        <div class=\"page-section-header\"><h3>${i18next.t('label.activity-what-is-it')}</h3></div>\n        <ul class=\"notes page-prose\">\n          ${notes.map(line => html`<li>${line}</li>`)}\n        </ul>\n      </section>\n    `\n  }\n\n  /**\n   * 이 업무를 쓸지 말지 — 화면 전체의 결정이라 하단 동작 줄에 둔다(page-standard §8).\n   * 아직 만들어지지 않은 업무는 쓸 수 없으므로 단추가 없다.\n   */\n  private useActions() {\n    if (!this.entry) return []\n    const actions = detailActions(this.entry)\n    if (!actions.registered) return []\n\n    return actions.inUse\n      ? [{ title: i18next.t('button.activity-stop-using'), action: () => this.setUse(false) }]\n      : [{ title: i18next.t('button.activity-start-using'), action: () => this.setUse(true), emphasis: { raised: true } }]\n  }\n\n  /** 이름 옆의 상태 한 마디. */\n  private renderUse(actions: ReturnType<typeof detailActions>) {\n    if (!actions.registered) {\n      return html`<span class=\"use\">${i18next.t('text.activity-line-not-built')}</span>`\n    }\n\n    return html`<span class=\"use\"\n      >${actions.inUse ? i18next.t('text.activity-in-use-here') : i18next.t('text.activity-not-in-use-here')}</span\n    >`\n  }\n\n  /**\n   * 누가 승인하나 — 결재·배정 현황에서 이름을 누르고 온 사람이 보러 온 것. 그래서 맨 위다.\n   *\n   * 단계와 이름만 적는다.\n   */\n  private renderApprovalLine(actions: ReturnType<typeof detailActions>) {\n    const line = this.activity?.approvalLine || []\n    const steps = approvalSteps(line)\n\n    return html`\n      <section class=\"page-section\">\n        <div class=\"page-section-header\">\n          <h3>${i18next.t('label.activity-approval-line')}</h3>\n          <div class=\"page-section-actions\">\n            <button\n              ?raised=${!!actions.canSetApprovalLine && !steps}\n              ?disabled=${!actions.canSetApprovalLine}\n              @click=${() => this.openApprovalLine(line)}\n            >\n              ${i18next.t('button.activity-set-approval-line')}\n            </button>\n          </div>\n        </div>\n\n        ${steps\n          ? html`<ol class=\"steps\">\n              ${line.map(\n                (one: any, at: number) =>\n                  html`<li>\n                    <span class=\"step\">${i18next.t('text.activity-step', { n: at + 1 })}</span>\n                    <span class=\"who\">${entity360Name(one.approver, one.approver?.name || one.value || '')}</span>\n                  </li>`\n              )}\n            </ol>`\n          : ''}\n\n        ${actions.approvalLineBlock\n          ? html`<p class=\"why\">${i18next.t('text.activity-line-' + actions.approvalLineBlock)}</p>`\n          : steps\n            ? ''\n            : html`<p class=\"why\">${i18next.t('text.activity-line-none')}</p>`}\n      </section>\n    `\n  }\n\n  /**\n   * 다른 패키지가 건 구획.\n   *\n   * **하나도 안 걸렸으면 그 사실을 말한다.** 빈자리로 두면 「이 앱에는 그 구획이 없다」와\n   * 「정할 것이 없다」가 같은 화면이 된다.\n   */\n  private renderPanels() {\n    const context = { activityName: this.entry.name, activityId: this.activity?.id }\n    const panels = activityPanels(context)\n    const shape = panelSection(\n      panels.map(one => one.name),\n      this.emptyPanels\n    )\n\n    if (shape.kind === 'none-registered') {\n      return html`\n        <section class=\"page-section\">\n          <div class=\"page-section-header\"><h3>${i18next.t('label.activity-panels')}</h3></div>\n          <p class=\"why\">${i18next.t('text.activity-no-panels')}</p>\n        </section>\n      `\n    }\n\n    /*\n     * 비었다고 알린 구획도 **그리기는 계속한다** — 숨길 뿐이다. 지우면 그 구획이 다시 읽고\n     * 「있다」고 알릴 자리가 없어진다.\n     */\n    const hidden = shape.kind === 'all-empty' ? panels.map(one => one.name) : shape.hidden\n\n    return html`\n      <section class=\"page-section\" ?hidden=${shape.kind === 'all-empty'}>\n        <div class=\"page-section-header\"><h3>${i18next.t('label.activity-panels')}</h3></div>\n        ${panels.map(\n          panel =>\n            html`<div\n              ?hidden=${hidden.includes(panel.name)}\n              @activity-panel-content=${(event: CustomEvent) => this.panelReported(panel.name, event)}\n            >\n              ${panel.render(context)}\n            </div>`\n        )}\n      </section>\n    `\n  }\n\n  private panelReported(name: string, event: CustomEvent) {\n    event.stopPropagation()\n    this.emptyPanels = { ...this.emptyPanels, [name]: event.detail?.empty === true }\n  }\n\n  private async setUse(on: boolean) {\n    const outcome = await ranMutation(() =>\n      client.mutate({\n        mutation: on\n          ? gql`\n              mutation ($name: String!) {\n                activateInstallableActivity(name: $name) {\n                  name\n                }\n              }\n            `\n          : gql`\n              mutation ($name: String!) {\n                deactivateInstallableActivity(name: $name) {\n                  name\n                }\n              }\n            `,\n        variables: { name: this.entry.name }\n      })\n    )\n\n    if (!outcome.ok) return\n\n    this.fetch()\n  }\n\n  /**\n   * 결재선 편집기는 **organization 것을 그대로 부른다.** 이 화면이 자기 편집기를 따로 지으면 같은\n   * 결재선이 두 화면에서 다르게 편집된다.\n   */\n  private openApprovalLine(line: any[]) {\n    const popup = openPopup(\n      html`<approval-line-items-editor-popup\n        .value=${line}\n        .confirmCallback=${(after?: any[] | null) => this.saveApprovalLine(after || [])}\n      ></approval-line-items-editor-popup>`,\n      { backdrop: true, size: 'large', title: i18next.t('title.approval-line editor') }\n    )\n\n    return popup\n  }\n\n  private async saveApprovalLine(after: any[]) {\n    const outcome = await ranMutation(() =>\n      client.mutate({\n        mutation: gql`\n          mutation ($patches: [ActivityPatch!]!) {\n            updateMultipleActivity(patches: $patches) {\n              name\n            }\n          }\n        `,\n        variables: { patches: [{ id: this.activity.id, approvalLine: after, cuFlag: 'M' }] }\n      })\n    )\n\n    if (!outcome.ok) return\n\n    this.fetch()\n  }\n}\n"]}

package/dist-client/pages/activity-catalog/activity-guide.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 이 업무가 무엇인가 — 카드와 상세가 **같은 문장**을 그리게 한다.
+ *
+ * `guide` 가 원문이고 `guideTKeys` 는 서버가 줄마다 계산해 보낸 번역 열쇠다. 줄 수를 정하는 것은
+ * **원문 쪽**이다. 열쇠 쪽으로 세면 열쇠가 하나 더 오거나 덜 오는 판에서 줄이 늘거나 사라지고,
+ * 그것이 오류로는 안 나온다.
+ *
+ * 번역 함수를 받아서 쓴다 — 이 판단을 i18next 없이 시험할 수 있게 하려는 것이다.
+ */
+export type Translate = (key: string, options: {
+    defaultValue: string;
+}) => string;
+export declare function guideLines(entry: {
+    guide?: string[] | null;
+    guideTKeys?: string[] | null;
+} | null | undefined, translate: Translate): string[];

package/dist-client/pages/activity-catalog/activity-guide.js

@@ -0,0 +1,5 @@
+export function guideLines(entry, translate) {
+    const keys = entry?.guideTKeys || [];
+    return (entry?.guide || []).map((line, at) => (keys[at] ? String(translate(keys[at], { defaultValue: line })) : line));
+}
+//# sourceMappingURL=activity-guide.js.map

package/dist-client/pages/activity-catalog/activity-guide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-guide.js","sourceRoot":"","sources":["../../../client/pages/activity-catalog/activity-guide.ts"],"names":[],"mappings":"AAWA,MAAM,UAAU,UAAU,CACxB,KAAmF,EACnF,SAAoB;IAEpB,MAAM,IAAI,GAAG,KAAK,EAAE,UAAU,IAAI,EAAE,CAAA;IAEpC,OAAO,CAAC,KAAK,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAA;AACxH,CAAC","sourcesContent":["/**\n * 이 업무가 무엇인가 — 카드와 상세가 **같은 문장**을 그리게 한다.\n *\n * `guide` 가 원문이고 `guideTKeys` 는 서버가 줄마다 계산해 보낸 번역 열쇠다. 줄 수를 정하는 것은\n * **원문 쪽**이다. 열쇠 쪽으로 세면 열쇠가 하나 더 오거나 덜 오는 판에서 줄이 늘거나 사라지고,\n * 그것이 오류로는 안 나온다.\n *\n * 번역 함수를 받아서 쓴다 — 이 판단을 i18next 없이 시험할 수 있게 하려는 것이다.\n */\nexport type Translate = (key: string, options: { defaultValue: string }) => string\n\nexport function guideLines(\n  entry: { guide?: string[] | null; guideTKeys?: string[] | null } | null | undefined,\n  translate: Translate\n): string[] {\n  const keys = entry?.guideTKeys || []\n\n  return (entry?.guide || []).map((line, at) => (keys[at] ? String(translate(keys[at], { defaultValue: line })) : line))\n}\n"]}