npm - @things-factory/worklist - Versions diffs - 10.1.256 → 10.1.257 - Mend

@things-factory/worklist 10.1.256 → 10.1.257

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (78) hide show

package/dist-client/pages/activity-thread/activity-thread-view-page.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { css, html, nothing } from 'lit';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { customElement, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
-import { client } from '@operato/graphql';
+import { QueryController } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { PageView } from '@operato/shell';
 import { DocumentPageStyles, ScrollbarStyles } from '@operato/styles';
@@ -101,15 +101,14 @@ export const ActivityThreadStatus = {
 let ActivityThreadViewPage = class ActivityThreadViewPage extends localize(i18next)(PageView) {
     constructor() {
         super(...arguments);
-        /**
-         * 조회를 마쳤나 — **「아직 안 읽었다」와 「없다」는 다르다.**
-         *
-         * 목록에서 줄을 눌러 들어온 사람이 방금 본 건이 없다는 말을 먼저 읽지 않게, 조회가 끝난 뒤에만
-         * 그 말을 한다.
-         */
-        this.loaded = false;
-        /** Why the task could not be read - ox-page-state says it, with retry (ADR-0060 decision 8). */
-        this.loadError = null;
+        /** The thread the address names. */
+        this.threadId = '';
+        /* The thread shown, read for the id the address names (ADR-0190). */
+        this.thread = new QueryController(this, gql `
+      query activityThread($id: String!) {
+        activityThread(id: $id) ${ActivityThreadFetchResult}
+      }
+    `, { variables: () => (this.threadId ? { id: this.threadId } : undefined) });
     }
     static { this.styles = [
         /* The frame owns the page shell and the reading column (ADR-0060 decision 8). */
@@ -188,6 +187,22 @@ let ActivityThreadViewPage = class ActivityThreadViewPage extends localize(i18ne
       }
     `
     ]; }
+    get activityThread() {
+        return this.thread.data?.activityThread;
+    }
+    /**
+     * 조회를 마쳤나 — **「아직 안 읽었다」와 「없다」는 다르다.**
+     *
+     * 목록에서 줄을 눌러 들어온 사람이 방금 본 건이 없다는 말을 먼저 읽지 않게, 조회가 끝난 뒤에만
+     * 그 말을 한다.
+     */
+    get loaded() {
+        return this.thread.data !== undefined;
+    }
+    /** Why the task could not be read - ox-page-state says it, with retry (ADR-0060 decision 8). */
+    get loadError() {
+        return this.thread.error ?? null;
+    }
     get context() {
         return {
             /*
@@ -220,7 +235,7 @@ let ActivityThreadViewPage = class ActivityThreadViewPage extends localize(i18ne
       <ox-page-state
       .loading=${!this.loaded && !this.loadError}
       .error=${this.loadError}
-      @retry=${() => this.lastId && this.fetchActivityThread(this.lastId)}
+      @retry=${() => this.thread.refetch()}
       >${!activityThread
             ? this.loaded
                 ? html `<div empty>
@@ -325,56 +340,16 @@ let ActivityThreadViewPage = class ActivityThreadViewPage extends localize(i18ne
         });
         return element;
     }
-    updated(changes) {
-        if (changes.has('activityThread')) {
-            this.updateContext();
-        }
-    }
     async pageUpdated(changes, lifecycle, changedBefore) {
         if (this.active) {
-            this.fetchActivityThread(lifecycle.resourceId);
+            this.threadId = lifecycle.resourceId;
         }
     }
-    async fetchActivityThread(id) {
-        this.lastId = id;
-        this.loadError = null;
-        let response;
-        try {
-            response = await client.query({
-                query: gql `
-        query activityThread($id: String!) {           activityThread(id: $id) ${ActivityThreadFetchResult}
- }
-      `,
-                variables: { id }
-            });
-        }
-        catch (error) {
-            this.loadError = error;
-            return;
-        }
-        if (response.errors?.length || !response.data) {
-            this.loadError = response.errors?.length
-                ? response.errors
-                : new Error(i18next.t('error.activity-thread not found', { activityThread: id }));
-            return;
-        }
-        this.activityThread = response.data.activityThread;
-        this.loaded = true;
-        this.updateContext();
-    }
 };
 __decorate([
     state(),
     __metadata("design:type", Object)
-], ActivityThreadViewPage.prototype, "activityThread", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], ActivityThreadViewPage.prototype, "loaded", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], ActivityThreadViewPage.prototype, "loadError", void 0);
+], ActivityThreadViewPage.prototype, "threadId", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)

package/dist-client/pages/activity-thread/activity-thread-view-page.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"activity-thread-view-page.js","sourceRoot":"","sources":["../../../client/pages/activity-thread/activity-thread-view-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/board/ox-board-viewer.js'\nimport '@operato/list-state/ox-page-state.js'\nimport '../../components/activity-thread-ribon.js'\nimport '../../components/activity-thread-timeline.js'\nimport './activity-thread-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, nothing } from 'lit'\nimport { DirectiveResult } from 'lit-html/directive.js'\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { PageView } from '@operato/shell'\nimport { DocumentPageStyles, ScrollbarStyles } from '@operato/styles'\nimport { provider } from '@operato/board/board-provider.js'\n\nimport { ActivityFieldsStyles } from '../../components/activity-fields.js'\nimport { DecisionKeysFields } from '../../components/decision-content.js'\n\nconst ActivityThreadFetchResult = `\\\n{ id\n state\n dueAt\n assignedAt\n startedAt\n terminatedAt\n assignee { id\n name\n }\n output\n round\n activityApprovals { round\n order\n approver { id name\n }\n judgment\n participation\n comment\n createdAt\n updatedAt\n terminatedAt\n }\n activityThreadHistories { transaction\n reason\n updater { id name\n }\n updatedAt\n state\n output\n }\n activityInstance { id\n name\n description\n state\n activity { id\n ${DecisionKeysFields}\n model { name\n description\n active\n tag\n inout\n type\n unit\n options\n quantifier\n spec\n hidden\n }\n }\n approvalLine { type\n value\n participation\n notifyAfter\n approver { id\n name\n description\n controlNo\n }\n }\n thumbnail\n input\n output\n viewType\n viewSource\n dueAt\n terminatedAt\n terminator { name\n email\n }\n createdAt\n }\n}`\n\nexport const ActivityThreadStatus = {\n Unassigned: 'unassigned',\n Assigned: 'assigned',\n Started: 'started',\n Delegated: 'delegated',\n Rejected: 'rejected',\n Ended: 'ended',\n Aborted: 'aborted'\n}\n\n@customElement('activity-thread-view-page')\nexport class ActivityThreadViewPage extends localize(i18next)(PageView) {\n static styles = [\n /* The frame owns the page shell and the reading column (ADR-0060 decision 8). /\n DocumentPageStyles,\n ScrollbarStyles,\n ActivityFieldsStyles,\n css`\n :host {\n color: var(--ui-ink, #17242c);\n font-size: var(--ui-t-body, 13px);\n }\n\n / 카드가 담아 주므로 안에 들어오는 화면은 자기 면과 여백을 갖지 않는다. /\n /\n * ── 줄어들지 않는다 — 줄어들면 본문이 잘린다 (2026-09-07) ──────────────\n * 이 칸은 flex 항목인데 크기를 안 정해 두어 기본값 flex: 0 1 auto 로 있었다. *1 이\n 줄어든다는 뜻이다** — 세로가 모자라면 브라우저가 이 칸부터 줄인다. 그런데 여기엔\n * overflow: hidden 이 걸려 있어서(카드 모서리를 따라 자르려고) 줄어든 만큼이 *스크롤도\n 없이 사라진다.*\n \n * 실측(1400x620): 이 칸이 242px 로 줄었는데 안의 내용은 362px 이었다. 「업무 내용」 절이\n * 276~464 에 있어 대부분이 잘렸고, 잘린 자리 바로 아래에서 타임라인이 시작하니 *타임라인이\n 본문을 덮은 것처럼** 보였다. 세로가 넉넉한 화면에서는 줄일 일이 없어 드러나지 않았다.\n \n 안에 오는 것은 셋 다 문서다(template · custom-element · 생성된 절 카드들). 높이를 정해\n * 주어야 하는 것은 board 뿐이고 board 는 이 칸을 거치지 않는다(activityContent 참조).\n * 문서는 제 높이로 서고, 화면이 모자라면 페이지 전체가 스크롤한다 — :host 의\n * overflow: auto 가 이미 그 자리다.\n /\n section[hosted] {\n flex: none;\n padding: 0;\n overflow: hidden;\n }\n\n /\n * 끝난 업무를 읽는 화면은 절이 여럿이라(기본 정보 · 업무 정보 · 수행 결과) 카드를 한 겹 더\n * 두르지 않는다. 절들이 곧 카드다.\n /\n section[hosted][plain] {\n margin: 0;\n background: none;\n border: none;\n border-radius: 0;\n }\n\n ox-board-viewer {\n width: 100%;\n height: 100%;\n }\n\n /\n * 여백을 주지 않는다 — 안에 든 절들이 이미 자기 여백을 갖는다.\n \n 여기에 padding 을 두면 두 겹이 된다. 실측으로 확인했다: 안쪽 절의 왼쪽이 233px,\n * 타임라인이 221px 이었다(--spacing-large 는 이 앱에서 12px 이다). 한 화면에서 카드마다\n * 왼쪽 기준선이 달랐다.\n /\n activity-thread-view {\n display: block;\n }\n\n activity-thread-timeline {\n margin: var(--spacing-large, 16px);\n }\n\n #custom-content {\n flex: 1;\n }\n\n @media print {\n :host {\n display: block;\n overflow: visible;\n }\n }\n `\n ]\n\n @state() activityThread: any\n\n /\n 조회를 마쳤나 — 「아직 안 읽었다」와 「없다」는 다르다.\n \n 목록에서 줄을 눌러 들어온 사람이 방금 본 건이 없다는 말을 먼저 읽지 않게, 조회가 끝난 뒤에만\n * 그 말을 한다.\n /\n @state() loaded = false\n /* Why the task could not be read - ox-page-state says it, with retry (ADR-0060 decision 8). /\n @state() loadError: unknown = null\n private lastId?: string\n @state() board: any\n\n get context() {\n return {\n /\n * 이 화면이 어떤 틀인가 — 동작 줄이 이것을 읽고 자기 오른쪽 끝을 내용에 맞춘다\n * (ADR-0060 결정 9 보탬). 안 적으면 창 폭이고, 그것은 작업면의 모양이다.\n /\n frame: 'document',\ntitle: this.lifecycle?.params?.['title'] \|\| i18next.t('title.activity'),\n help: 'worklist/activity-thread-view-page',\n /\n * 이 화면은 메뉴에 없다 — 「할 일」의 완료 묶음에서 줄을 눌러 들어온다. 그래서 왼쪽 메뉴가 가리킬\n * 항목이 없고, 표시가 사라져 들어온 사람이 자기가 어디에 있는지 잃는다.\n \n 어느 목록에서 열리는지는 이 화면이 안다. 그것을 적어 둔다.\n /\n menu: this.lifecycle?.params?.['box'] === 'draft-list' ? 'draft-list' : 'todo-list',\n /\n * 동작 줄이 비어 있다 — 끝난 일을 보는 화면이라 여기서 내릴 결정이 없다. 나가기는 두지 않는다\n * (ADR-0060 결정 9 보탬 판정 2): 탭의 × 가 이미 하는 일이고, 같은 곳으로 가는 문을 둘 두면\n * 어느 쪽이 무엇을 하는지 사람이 눌러 봐야 안다.\n /\n actions: []\n // activityThread: this.activityThread\n }\n }\n\n render() {\n const activityThread = this.activityThread\n\n / Reading and failing both drew nothing at all, so a failure looked like an empty screen. /\n return html`<div class=\"page\">\n <ox-page-state\n .loading=${!this.loaded && !this.loadError}\n .error=${this.loadError}\n @retry=${() => this.lastId && this.fetchActivityThread(this.lastId)}\n >${\n !activityThread\n ? this.loaded\n ? html`<div empty>\n <span class=\"title\">${i18next.t('text.no activity thread info')}</span>\n <span class=\"why\">${i18next.t('text.no-activity-thread-why')}</span>\n </div>`\n : nothing\n : this.renderThread(activityThread)\n }</ox-page-state\n >\n </div>`\n }\n\n private renderThread(activityThread: any) {\n return html`\n <activity-thread-ribon .activityThread=${activityThread}></activity-thread-ribon>\n ${this.activityContent()}\n <!--\n 여기서는 편다 — 끝난 업무를 보러 온 화면이라 「어떻게 여기까지 왔나」가 곧 본문이다.\n -->\n <activity-thread-timeline .activityThread=${activityThread} open short-form></activity-thread-timeline>\n `\n }\n\n activityContent() {\n switch (this.activityThread?.activityInstance?.viewType) {\n case 'template':\n return this.hostedContent(this.templateContent())\n case 'generated':\n return this.generatedContent()\n / board 는 전체 화면을 쓰는 캔버스라 카드에 담지 않는다. /\n case 'board':\n return this.boardContent()\n case 'custom-element':\n return this.hostedContent(this.customElementContent())\n case 'page':\n case 'external':\n return html``\n default:\n return this.generatedContent()\n }\n }\n\n /\n 화면 종류가 달라도 같은 자리에 같은 모양으로 놓인다(activity-approval-page 의 같은 이름 참조).\n \n plain 은 안에 들어오는 것이 이미 절 카드 여럿을 갖고 있을 때다 — 카드를 두 겹 두르지 않는다.\n /\n hostedContent(content: unknown, plain = false) {\n return html`<section hosted ?plain=${plain}>${content}</section>`\n }\n\n templateContent() {\n if (!this.activityThread) {\n return html``\n }\n\n const { viewSource: template } = this.activityThread?.activityInstance\n return unsafeHTML(template)\n }\n\n generatedContent(): DirectiveResult {\n if (!this.activityThread) {\n return html``\n }\n\n /\n * id 가 아니라 값을 넘긴다. 전에는 id 만 주고 그쪽이 스스로 다시 조회했다 — 이 화면이 이미\n * 같은 건을 조회한 뒤라서 한 번 열면 같은 질의가 두 번 나갔다.\n /\n return keyed(\n this.activityThread.id,\n this.hostedContent(\n html`<activity-thread-view .activityThread=${this.activityThread}></activity-thread-view>`,\n true\n )\n )\n }\n\n boardContent(): DirectiveResult {\n if (!this.activityThread) {\n return html``\n }\n\n const { output, activityInstance } = this.activityThread\n const { viewSource: boardId, input } = activityInstance \|\| {}\n\n if (!this.board \|\| this.board.id !== boardId) {\n this.board = { id: boardId }\n }\n\n / \n ox-board-viewer에서 provider에 의해 공급되는 board가 각 id별로 instance를 하나씩 밖에 가지지 않으므로,\n 동일한 id의 보드를 다른 page에 뺏기는 경우가 있다.\n 따라서, Page가 active될 때마다 타임스탬프를 refresh key로 설정하였다.\n */\n return keyed(\n this.activityThread.id,\n html`\n <ox-board-viewer\n style=\"background-color: white;\"\n .board=${this.board}\n .provider=${provider}\n .values=${{ ...input, ...output }}\n hide-fullscreen\n hide-navigation\n ></ox-board-viewer>\n `\n )\n }\n\n customElementContent() {\n if (!this.activityThread) {\n return html``\n }\n\n const { output, activityInstance } = this.activityThread\n const { viewSource: tagName, input } = activityInstance \|\| {}\n\n const element = document.createElement(tagName)\n element.id = 'custom-content'\n element.input = input\n element.output = output\n element.addEventListener('change', (e: CustomEvent) => {\n this.activityThread.output = e.detail\n })\n\n return element\n }\n\n updated(changes) {\n if (changes.has('activityThread')) {\n this.updateContext()\n }\n }\n\n async pageUpdated(changes, lifecycle, changedBefore) {\n if (this.active) {\n this.fetchActivityThread(lifecycle.resourceId)\n }\n }\n\n async fetchActivityThread(id) {\n this.lastId = id\n this.loadError = null\n\n let response: any\n try {\n response = await client.query({\n query: gql`\n query activityThread($id: String!) { activityThread(id: $id) ${ActivityThreadFetchResult}\n }\n `,\n variables: { id }\n })\n } catch (error) {\n this.loadError = error\n return\n }\n\n if (response.errors?.length \|\| !response.data) {\n this.loadError = response.errors?.length\n ? response.errors\n : new Error(i18next.t('error.activity-thread not found', { activityThread: id }))\n return\n }\n\n this.activityThread = response.data.activityThread\n this.loaded = true\n\n this.updateContext()\n }\n}\n"]}
1	+ {"version":3,"file":"activity-thread-view-page.js","sourceRoot":"","sources":["../../../client/pages/activity-thread/activity-thread-view-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/board/ox-board-viewer.js'\nimport '@operato/list-state/ox-page-state.js'\nimport '../../components/activity-thread-ribon.js'\nimport '../../components/activity-thread-timeline.js'\nimport './activity-thread-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, nothing } from 'lit'\nimport { DirectiveResult } from 'lit-html/directive.js'\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\nimport { QueryController } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { PageView } from '@operato/shell'\nimport { DocumentPageStyles, ScrollbarStyles } from '@operato/styles'\nimport { provider } from '@operato/board/board-provider.js'\n\nimport { ActivityFieldsStyles } from '../../components/activity-fields.js'\nimport { DecisionKeysFields } from '../../components/decision-content.js'\n\nconst ActivityThreadFetchResult = `\\\n{ id\n state\n dueAt\n assignedAt\n startedAt\n terminatedAt\n assignee { id\n name\n }\n output\n round\n activityApprovals { round\n order\n approver { id name\n }\n judgment\n participation\n comment\n createdAt\n updatedAt\n terminatedAt\n }\n activityThreadHistories { transaction\n reason\n updater { id name\n }\n updatedAt\n state\n output\n }\n activityInstance { id\n name\n description\n state\n activity { id\n ${DecisionKeysFields}\n model { name\n description\n active\n tag\n inout\n type\n unit\n options\n quantifier\n spec\n hidden\n }\n }\n approvalLine { type\n value\n participation\n notifyAfter\n approver { id\n name\n description\n controlNo\n }\n }\n thumbnail\n input\n output\n viewType\n viewSource\n dueAt\n terminatedAt\n terminator { name\n email\n }\n createdAt\n }\n}`\n\nexport const ActivityThreadStatus = {\n Unassigned: 'unassigned',\n Assigned: 'assigned',\n Started: 'started',\n Delegated: 'delegated',\n Rejected: 'rejected',\n Ended: 'ended',\n Aborted: 'aborted'\n}\n\n@customElement('activity-thread-view-page')\nexport class ActivityThreadViewPage extends localize(i18next)(PageView) {\n static styles = [\n /* The frame owns the page shell and the reading column (ADR-0060 decision 8). /\n DocumentPageStyles,\n ScrollbarStyles,\n ActivityFieldsStyles,\n css`\n :host {\n color: var(--ui-ink, #17242c);\n font-size: var(--ui-t-body, 13px);\n }\n\n / 카드가 담아 주므로 안에 들어오는 화면은 자기 면과 여백을 갖지 않는다. /\n /\n * ── 줄어들지 않는다 — 줄어들면 본문이 잘린다 (2026-09-07) ──────────────\n * 이 칸은 flex 항목인데 크기를 안 정해 두어 기본값 flex: 0 1 auto 로 있었다. *1 이\n 줄어든다는 뜻이다** — 세로가 모자라면 브라우저가 이 칸부터 줄인다. 그런데 여기엔\n * overflow: hidden 이 걸려 있어서(카드 모서리를 따라 자르려고) 줄어든 만큼이 *스크롤도\n 없이 사라진다.*\n \n * 실측(1400x620): 이 칸이 242px 로 줄었는데 안의 내용은 362px 이었다. 「업무 내용」 절이\n * 276~464 에 있어 대부분이 잘렸고, 잘린 자리 바로 아래에서 타임라인이 시작하니 *타임라인이\n 본문을 덮은 것처럼** 보였다. 세로가 넉넉한 화면에서는 줄일 일이 없어 드러나지 않았다.\n \n 안에 오는 것은 셋 다 문서다(template · custom-element · 생성된 절 카드들). 높이를 정해\n * 주어야 하는 것은 board 뿐이고 board 는 이 칸을 거치지 않는다(activityContent 참조).\n * 문서는 제 높이로 서고, 화면이 모자라면 페이지 전체가 스크롤한다 — :host 의\n * overflow: auto 가 이미 그 자리다.\n /\n section[hosted] {\n flex: none;\n padding: 0;\n overflow: hidden;\n }\n\n /\n * 끝난 업무를 읽는 화면은 절이 여럿이라(기본 정보 · 업무 정보 · 수행 결과) 카드를 한 겹 더\n * 두르지 않는다. 절들이 곧 카드다.\n /\n section[hosted][plain] {\n margin: 0;\n background: none;\n border: none;\n border-radius: 0;\n }\n\n ox-board-viewer {\n width: 100%;\n height: 100%;\n }\n\n /\n * 여백을 주지 않는다 — 안에 든 절들이 이미 자기 여백을 갖는다.\n \n 여기에 padding 을 두면 두 겹이 된다. 실측으로 확인했다: 안쪽 절의 왼쪽이 233px,\n * 타임라인이 221px 이었다(--spacing-large 는 이 앱에서 12px 이다). 한 화면에서 카드마다\n * 왼쪽 기준선이 달랐다.\n /\n activity-thread-view {\n display: block;\n }\n\n activity-thread-timeline {\n margin: var(--spacing-large, 16px);\n }\n\n #custom-content {\n flex: 1;\n }\n\n @media print {\n :host {\n display: block;\n overflow: visible;\n }\n }\n `\n ]\n\n /* The thread the address names. /\n @state() private threadId = ''\n\n / The thread shown, read for the id the address names (ADR-0190). /\n private thread = new QueryController(\n this,\n gql`\n query activityThread($id: String!) {\n activityThread(id: $id) ${ActivityThreadFetchResult}\n }\n `,\n { variables: () => (this.threadId ? { id: this.threadId } : undefined) }\n )\n\n get activityThread(): any {\n return this.thread.data?.activityThread\n }\n\n /\n 조회를 마쳤나 — 「아직 안 읽었다」와 「없다」는 다르다.\n \n 목록에서 줄을 눌러 들어온 사람이 방금 본 건이 없다는 말을 먼저 읽지 않게, 조회가 끝난 뒤에만\n * 그 말을 한다.\n /\n get loaded(): boolean {\n return this.thread.data !== undefined\n }\n\n /* Why the task could not be read - ox-page-state says it, with retry (ADR-0060 decision 8). /\n get loadError(): unknown {\n return this.thread.error ?? null\n }\n\n @state() board: any\n\n get context() {\n return {\n /\n * 이 화면이 어떤 틀인가 — 동작 줄이 이것을 읽고 자기 오른쪽 끝을 내용에 맞춘다\n * (ADR-0060 결정 9 보탬). 안 적으면 창 폭이고, 그것은 작업면의 모양이다.\n /\n frame: 'document',\ntitle: this.lifecycle?.params?.['title'] \|\| i18next.t('title.activity'),\n help: 'worklist/activity-thread-view-page',\n /\n * 이 화면은 메뉴에 없다 — 「할 일」의 완료 묶음에서 줄을 눌러 들어온다. 그래서 왼쪽 메뉴가 가리킬\n * 항목이 없고, 표시가 사라져 들어온 사람이 자기가 어디에 있는지 잃는다.\n \n 어느 목록에서 열리는지는 이 화면이 안다. 그것을 적어 둔다.\n /\n menu: this.lifecycle?.params?.['box'] === 'draft-list' ? 'draft-list' : 'todo-list',\n /\n * 동작 줄이 비어 있다 — 끝난 일을 보는 화면이라 여기서 내릴 결정이 없다. 나가기는 두지 않는다\n * (ADR-0060 결정 9 보탬 판정 2): 탭의 × 가 이미 하는 일이고, 같은 곳으로 가는 문을 둘 두면\n * 어느 쪽이 무엇을 하는지 사람이 눌러 봐야 안다.\n /\n actions: []\n // activityThread: this.activityThread\n }\n }\n\n render() {\n const activityThread = this.activityThread\n\n / Reading and failing both drew nothing at all, so a failure looked like an empty screen. /\n return html`<div class=\"page\">\n <ox-page-state\n .loading=${!this.loaded && !this.loadError}\n .error=${this.loadError}\n @retry=${() => this.thread.refetch()}\n >${\n !activityThread\n ? this.loaded\n ? html`<div empty>\n <span class=\"title\">${i18next.t('text.no activity thread info')}</span>\n <span class=\"why\">${i18next.t('text.no-activity-thread-why')}</span>\n </div>`\n : nothing\n : this.renderThread(activityThread)\n }</ox-page-state\n >\n </div>`\n }\n\n private renderThread(activityThread: any) {\n return html`\n <activity-thread-ribon .activityThread=${activityThread}></activity-thread-ribon>\n ${this.activityContent()}\n <!--\n 여기서는 편다 — 끝난 업무를 보러 온 화면이라 「어떻게 여기까지 왔나」가 곧 본문이다.\n -->\n <activity-thread-timeline .activityThread=${activityThread} open short-form></activity-thread-timeline>\n `\n }\n\n activityContent() {\n switch (this.activityThread?.activityInstance?.viewType) {\n case 'template':\n return this.hostedContent(this.templateContent())\n case 'generated':\n return this.generatedContent()\n / board 는 전체 화면을 쓰는 캔버스라 카드에 담지 않는다. /\n case 'board':\n return this.boardContent()\n case 'custom-element':\n return this.hostedContent(this.customElementContent())\n case 'page':\n case 'external':\n return html``\n default:\n return this.generatedContent()\n }\n }\n\n /\n 화면 종류가 달라도 같은 자리에 같은 모양으로 놓인다(activity-approval-page 의 같은 이름 참조).\n \n plain 은 안에 들어오는 것이 이미 절 카드 여럿을 갖고 있을 때다 — 카드를 두 겹 두르지 않는다.\n /\n hostedContent(content: unknown, plain = false) {\n return html`<section hosted ?plain=${plain}>${content}</section>`\n }\n\n templateContent() {\n if (!this.activityThread) {\n return html``\n }\n\n const { viewSource: template } = this.activityThread?.activityInstance\n return unsafeHTML(template)\n }\n\n generatedContent(): DirectiveResult {\n if (!this.activityThread) {\n return html``\n }\n\n /\n * id 가 아니라 값을 넘긴다. 전에는 id 만 주고 그쪽이 스스로 다시 조회했다 — 이 화면이 이미\n * 같은 건을 조회한 뒤라서 한 번 열면 같은 질의가 두 번 나갔다.\n /\n return keyed(\n this.activityThread.id,\n this.hostedContent(\n html`<activity-thread-view .activityThread=${this.activityThread}></activity-thread-view>`,\n true\n )\n )\n }\n\n boardContent(): DirectiveResult {\n if (!this.activityThread) {\n return html``\n }\n\n const { output, activityInstance } = this.activityThread\n const { viewSource: boardId, input } = activityInstance \|\| {}\n\n if (!this.board \|\| this.board.id !== boardId) {\n this.board = { id: boardId }\n }\n\n / \n ox-board-viewer에서 provider에 의해 공급되는 board가 각 id별로 instance를 하나씩 밖에 가지지 않으므로,\n 동일한 id의 보드를 다른 page에 뺏기는 경우가 있다.\n 따라서, Page가 active될 때마다 타임스탬프를 refresh key로 설정하였다.\n */\n return keyed(\n this.activityThread.id,\n html`\n <ox-board-viewer\n style=\"background-color: white;\"\n .board=${this.board}\n .provider=${provider}\n .values=${{ ...input, ...output }}\n hide-fullscreen\n hide-navigation\n ></ox-board-viewer>\n `\n )\n }\n\n customElementContent() {\n if (!this.activityThread) {\n return html``\n }\n\n const { output, activityInstance } = this.activityThread\n const { viewSource: tagName, input } = activityInstance \|\| {}\n\n const element = document.createElement(tagName)\n element.id = 'custom-content'\n element.input = input\n element.output = output\n element.addEventListener('change', (e: CustomEvent) => {\n this.activityThread.output = e.detail\n })\n\n return element\n }\n\n async pageUpdated(changes, lifecycle, changedBefore) {\n if (this.active) {\n this.threadId = lifecycle.resourceId\n }\n }\n}\n"]}

package/dist-client/pages/todo/approval-done-list-page.d.ts CHANGED Viewed

@@ -10,8 +10,6 @@ export declare class ApprovalDoneListPage extends ApprovalDoneListPage_base {
     mode: 'GRID' | 'LIST' | 'CARD';
     grist: DataGrist;
     filters?: string[];
-    /** How many each chip would show under the list's other conditions, counted by the list's own door. */
-    chipCounts: Map<string, number>;
     get context(): {
         title: string;
         search: {
@@ -28,7 +26,9 @@ export declare class ApprovalDoneListPage extends ApprovalDoneListPage_base {
     pageInitialized(lifecycle: any): Promise<void>;
     pageUpdated(changes: any, lifecycle: any, changedBefore: any): Promise<void>;
     private counted;
-    private countChips;
+    countHandler({ filters, signal }: FetchOption): Promise<{
+        chips: Record<string, number>;
+    }>;
     fetchHandler(options: FetchOption): Promise<{
         total: any;
         records: any;

package/dist-client/pages/todo/approval-done-list-page.js CHANGED Viewed

@@ -18,8 +18,6 @@ let ApprovalDoneListPage = class ApprovalDoneListPage extends localize(i18next)(
     constructor() {
         super(...arguments);
         this.mode = isMobileDevice() ? 'CARD' : 'GRID';
-        /** How many each chip would show under the list's other conditions, counted by the list's own door. */
-        this.chipCounts = new Map();
     }
     static { this.styles = [
         /* The work surface frame for a list screen (ADR-0060 decision 8). */
@@ -94,7 +92,7 @@ let ApprovalDoneListPage = class ApprovalDoneListPage extends localize(i18next)(
     render() {
         const mode = this.mode || (isMobileDevice() ? 'CARD' : 'GRID');
         return html `
-      <ox-grist class="page-fill" .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
+      <ox-grist class="page-fill" .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} .countHandler=${this.countHandler.bind(this)} @counts-change=${() => this.requestUpdate()}>
         <div slot="headroom" class="header">
           <div class="filters">
             <!-- 좁은 화면에서는 상단 바가 검색을 갖는다(위 context 주석 참조). -->
@@ -266,13 +264,11 @@ let ApprovalDoneListPage = class ApprovalDoneListPage extends localize(i18next)(
     }
     /* 읽은 것에 그림이 하나도 없으면 카드마다 빈 그림 칸을 세우지 않는다(§ list-thumbnail.ts). */
     counted(chips) {
-        return chips.map(chip => ({ ...chip, count: this.chipCounts.get(chip.value) ?? 0 }));
+        return chips.map(chip => ({ ...chip, count: this.grist?.counts?.chips?.[chip.value] ?? 0 }));
     }
-    /* The chips' numbers - asked beside the list, on the list's filters before any chip is added. */
-    countChips(filters) {
-        countChips('approvalDoneList', ['important', 'rejected'], filters)
-            .then(counts => (this.chipCounts = counts))
-            .catch(e => console.error(e));
+    /* The chips' numbers - asked beside each read, on the list's filters before any chip is added. */
+    async countHandler({ filters = [], signal }) {
+        return { chips: await countChips('approvalDoneList', ['important', 'rejected'], filters, signal) };
     }
     async fetchHandler(options) {
         const fetched = await this.fetchRows(options);
@@ -280,7 +276,6 @@ let ApprovalDoneListPage = class ApprovalDoneListPage extends localize(i18next)(
         return fetched;
     }
     async fetchRows({ page, limit, sortings = [], filters = [] }) {
-        this.countChips(filters);
         filters = withChips(filters, this.filters);
         const response = await client.query({ query: gql `
         query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {           responses: approvalDoneList(filters: $filters, pagination: $pagination, sortings: $sortings) {             items {               id
@@ -354,10 +349,6 @@ __decorate([
     state(),
     __metadata("design:type", Array)
 ], ApprovalDoneListPage.prototype, "filters", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], ApprovalDoneListPage.prototype, "chipCounts", void 0);
 ApprovalDoneListPage = __decorate([
     customElement('approval-done-list-page')
 ], ApprovalDoneListPage);

package/dist-client/pages/todo/approval-done-list-page.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"approval-done-list-page.js","sourceRoot":"","sources":["../../../client/pages/todo/approval-done-list-page.ts"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAA;AAC5B,OAAO,wCAAwC,CAAA;AAC/C,OAAO,2CAA2C,CAAA;AAElD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,SAAS,EAAe,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAC5E,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAC5F,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAG5D,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;IAA9D;;QAoCuB,SAAI,GAA6B,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAA;QAM/F,uGAAuG;QAC9F,eAAU,GAAG,IAAI,GAAG,EAAkB,CAAA;IA+RjD,CAAC;aA1UgF,WAAM,GAAG;QACtF,qEAAqE;QACrE,qBAAqB;QACrB,eAAe;QACf,kBAAkB;QAClB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BF;KACF,AAjCoF,CAiCpF;IAYD,IAAI,OAAO;QAAS,OAAO,EAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC;YAC3E;;;;;;;;;;;eAWG;YACH;;;;;;;;eAQG;YACH,MAAM,EAAE;gBACN,OAAO,EAAE,CAAC,MAAc,EAAE,EAAE;oBAC1B,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAA;gBAChC,CAAC;gBACD,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,IAAI,EAAE;aACpC;YACD,MAAM,EAAE,EAAU,OAAO,EAAE,GAAG,EAAE;oBAAa,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAA;gBAC7E,CAAC;aACA;YACI,IAAI,EAAE,kCAAkC;YACxC,OAAO,EAAE,EAAE,EACf,CAAA;IACD,CAAC;IAEA,MAAM;QAAS,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;QAE3E,OAAO,IAAI,CAAA;0CAC2B,IAAI,YAAY,IAAI,CAAC,WAAW,kBAAkB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;;;;;;uBAMjG,IAAI,CAAC,OAAO;yBACV,IAAI,CAAC,OAAO,CAAC;YACtB,aAAa,EAAE;YACf;;;;;;;;;;eAUG;YACH,EAAoB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;gBAC7D,KAAK,EAAE,UAAU;aACjC;SACa,CAAC;wBACQ,CAAC,CAAc,EAAE,EAAE;YAAmB,IAAI,CAAC,OAAO,GAAI,CAAC,CAAC,aAAqB,EAAE,KAAK,CAAA;YAC5F,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QACjC,CAAC;;;;;;;KAOG,CAAA;IACJ,CAAC;IAEA,KAAK,CAAC,eAAe,CAAC,SAAS;QAAQ,IAAI,CAAC,WAAW,GAAG,EAAQ,IAAI,EAAE,EAAU,SAAS,EAAE,WAAW;gBAClG,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC;gBAC/B,OAAO,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC;aACnC;YACI,OAAO,EAAE;gBACP,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE;gBACvD,EAAY,IAAI,EAAE,QAAQ;oBACxB,IAAI,EAAE,MAAM;oBACZ,KAAK,EAAE,IAAI;oBACX,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC;oBACrC,MAAM,EAAE;wBACN,QAAQ,EAAE,KAAK;wBACf,QAAQ,EAAE,WAAW,EAAE;qBACxB;oBACD,MAAM,EAAE,QAAQ;oBAChB,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;iBAClB;gBACM;oBACE;;;;;;;;;;uBAUG;oBACH,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,aAAa;oBACnB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACtC,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;oBAC3B,MAAM,EAAE,QAAQ;oBAChB,MAAM,EAAE,IAAI;iBACb;gBACD,EAAY,IAAI,EAAE,QAAQ;oBACxB,IAAI,EAAE,UAAU;oBAChB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACtC,MAAM,EAAE;wBACN,QAAQ,EAAE,KAAK;wBACf,KAAK,EAAE,QAAQ;wBACf,QAAQ,EAAE,YAAY,EAAE;qBACzB;oBACD,KAAK,EAAE,EAAE;iBACjB;gBACM,EAAY,IAAI,EAAE,QAAQ;oBACxB,IAAI,EAAE,UAAU;oBAChB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACtC,MAAM,EAAE,EAAc,QAAQ,EAAE,KAAK;wBACnC,KAAK,EAAE,QAAQ;wBACf,OAAO,EAAE;4BACP,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,+BAA+B,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE;4BAC1E,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,gCAAgC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE;4BAC5E,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,gCAAgC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE;4BAC5E,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,+BAA+B,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE;4BAC1E,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE;yBACzE;qBACX;oBACQ,KAAK,EAAE,EAAE;iBACjB;gBACM,EAAY,IAAI,EAAE,QAAQ;oBACxB,IAAI,EAAE,OAAO;oBACb,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;oBACnC,MAAM,EAAE,EAAc,QAAQ,EAAE,KAAK;qBAC7C;oBACQ,KAAK,EAAE,EAAE;iBACjB;gBACM,EAAY,IAAI,EAAE,QAAQ;oBACxB,IAAI,EAAE,SAAS;oBACf,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC;oBACrC,MAAM,EAAE,EAAc,QAAQ,EAAE,KAAK;qBAC7C;oBACQ,KAAK,EAAE,GAAG;iBAClB;gBACM,EAAY,IAAI,EAAE,UAAU;oBAC1B,IAAI,EAAE,cAAc;oBACpB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC;oBAC3C,MAAM,EAAE,EAAc,QAAQ,EAAE,KAAK;qBAC7C;oBACQ,QAAQ,EAAE,IAAI;oBACd,MAAM,EAAE,KAAK;oBACb,KAAK,EAAE,GAAG;iBAClB;gBACM,EAAY,IAAI,EAAE,UAAU;oBAC1B,IAAI,EAAE,WAAW;oBACjB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;oBAC1C,MAAM,EAAE,EAAc,QAAQ,EAAE,KAAK;qBAC7C;oBACQ,QAAQ,EAAE,IAAI;oBACd,MAAM,EAAE,KAAK;oBACb,KAAK,EAAE,GAAG;iBAClB;gBACM,EAAY,IAAI,EAAE,QAAQ;oBACxB,IAAI,EAAE,YAAY;oBAClB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;oBACzC,MAAM,EAAE,EAAc,QAAQ,EAAE,KAAK;wBACnC,QAAQ,EAAE,UAAU,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK;4BAAkB,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,QAAQ,IAAI,EAAE,CAAA;4BAChI,IAAI,IAAI,GAAG,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAA;4BACpD,OAAO,WAAW,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAA;wBAClF,CAAC;qBACA;oBACQ,KAAK,EAAE,GAAG;oBACV,MAAM,EAAE,IAAI;iBACpB;gBACM,EAAY,IAAI,EAAE,OAAO;oBACvB,IAAI,EAAE,WAAW;oBACjB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC;oBACpC,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;oBAC3B,MAAM,EAAE,IAAI;iBACpB;aACK;YACD,IAAI,EAAE,EAAU,UAAU,EAAE,KAAK;gBAC/B,QAAQ,EAAE,KAAK;gBACf,QAAQ,EAAE,EAAY,KAAK,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE;wBAAe,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAA;oBAChI,CAAC;iBACA;aACA;YACI,OAAO,EAAE;gBACP,EAAY,IAAI,EAAE,cAAc;oBAC9B,IAAI,EAAE,IAAI;iBAClB;aACK;SACL,CAAA;IACD,CAAC;IAEA,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,aAAa;QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAAO,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,CAAA;QACxG,CAAC;IACD,CAAC;IAEA,kEAAkE;IAC1D,OAAO,CAAC,KAA0D;QACxE,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA;IACtF,CAAC;IAED,iGAAiG;IACzF,UAAU,CAAC,OAAc;QAC/B,UAAU,CAAC,kBAAkB,EAAE,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,OAAO,CAAC;aAC/D,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,CAAC;aAC1C,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;IACjC,CAAC;IAED,KAAK,CAAC,YAAY,CAAC,OAAoB;QACrC,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;QAE7C,IAAI,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,OAAO,IAAI,EAAE,CAAC,CAAA;QAE9E,OAAO,OAAO,CAAA;IAChB,CAAC;IAED,KAAK,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAe;QACvE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;QACxB,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,CAAA;QAE1C,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC,EAAQ,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgCnD;YACD,SAAS,EAAE,EAAU,OAAO;gBAC1B,UAAU,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;gBAC3B,QAAQ;aACd;SACA,CAAC,CAAA;QAEC,OAAO,EAAQ,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;YACtD,OAAO,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBAAW,IAAI,MAAM,GAAG,IAAI,CAAC,cAAc,CAAA;gBACnG,OAAO,EAAY,EAAE,EAAE,IAAI,CAAC,EAAE;oBAC5B,GAAG,MAAM,CAAC,gBAAgB;oBAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;oBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,SAAS,EAAE,IAAI,CAAC,SAAS;oBACzB,YAAY,EAAE,IAAI,CAAC,YAAY;iBACvC,CAAA;YACD,CAAC,CAAC;SACD,CAAA;IACD,CAAC;IAEA,oBAAoB,CAAC,gBAAgB;QAAQ,QAAQ,CAAC,qBAAqB,gBAAgB,CAAC,EAAE,UAAU,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAA;IACjI,CAAC;;AAtS4B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yDAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAAoE;AAE5E;IAAlB,KAAK,CAAC,UAAU,CAAC;8BAAS,SAAS;mDAAA;AAE3B;IAAR,KAAK,EAAE;;qDAAmB;AAGlB;IAAR,KAAK,EAAE;;wDAAuC;AA3CpC,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CA0UhC","sourcesContent":["import '@operato/data-grist'\nimport '@operato/data-grist/ox-filters-form.js'\nimport '@operato/input/ox-input-select-buttons.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { DataGrist, FetchOption, getRenderer } from '@operato/data-grist'\nimport { client } from '@operato/graphql'\nimport { countChips, importantChip, withChips } from '../../chip-filters.js'\nimport { i18next, localize } from '@operato/i18n'\nimport { navigate, PageView } from '@operato/shell'\nimport { listWithThumbnail } from './list-thumbnail.js'\nimport { CommonHeaderStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles'\nimport { isMobileDevice } from '@operato/utils'\n\nimport { priorityCell, subjectCell } from '../../activity-cells.js'\n\n@customElement('approval-done-list-page')\nexport class ApprovalDoneListPage extends localize(i18next)(PageView) { static styles = [\n /* The work surface frame for a list screen (ADR-0060 decision 8). /\n WorkSurfacePageStyles,\n ScrollbarStyles,\n CommonHeaderStyles,\n css`\n :host {\n --grid-record-emphasized-background-color: #8b0000;\n --grid-record-emphasized-color: #ff6b6b;\n }\n\n .header { grid-template-areas: 'filters actions';\n }\n\n /\n * ── 헤드룸의 왼쪽 기준선은 표와 같다 ─────────────────────────────────\n * CommonHeaderStyles 의 .filters 는 배경과 모서리와 여백을 가진 영역이다. 그 배경이\n * --md-sys-color-surface 인데 이 제품에서는 바탕색과 같은 값이라, *보이지 않는 영역이\n 자리만 차지하고** 검색창을 여백만큼(12px) 안쪽으로 밀었다.\n \n 실측: 표 왼쪽 끝 212 · 필터 영역 212 · 검색창 224. 화면의 왼쪽 기준선이 둘이 됐다.\n \n 그 규칙들은 .header 안에 중첩되어 있어(.header .filters) 밑줄 없는 .filters 로는 이길 수\n * 없다 — 특정도가 0,1,0 대 0,2,0 이다.\n /\n .header .filters {\n padding: 0;\n background: none;\n border-radius: 0;\n gap: 12px;\n }\n\n `\n ]\n\n @property({ type: Object }) gristConfig?: any\n @property({ type: String }) mode: 'GRID' \| 'LIST' \| 'CARD' = isMobileDevice() ? 'CARD' : 'GRID'\n\n @query('ox-grist') grist!: DataGrist\n\n @state() filters?: string[]\n\n /* How many each chip would show under the list's other conditions, counted by the list's own door. /\n @state() chipCounts = new Map<string, number>()\n\n get context() { return { title: i18next.t('title.approval done list'),\n /\n * 검색의 자리는 기기가 정한다.\n \n PC 에서는 화면 안으로 내린다. 상단 바에 두면 거른 조건과 걸러진 결과가 화면의 위아래 끝으로\n * 갈라지고, 지금 무엇으로 걸렀는지가 목록 옆에서 보이지 않는다.\n \n 좁은 화면에서는 상단 바에 그대로 둔다. 헤드룸에 두면 검색창과 필터가 목록을 그만큼 밀어\n * 내리고, 카드 두 장이 화면 밖으로 나간다. 상단 바는 그 자리를 아끼려고 있는 것이다.\n \n 이 저장소에는 두 방식이 다 있다 — 헤드룸 50곳, 상단 바 51곳. 정형인 것은 구조\n * (.header / .filters / .filter)이고 검색의 자리는 화면이 정한다.\n /\n /\n * 검색은 페이지 제목 줄의 오른쪽 끝에 둔다 — 다른 화면들과 같은 자리다.\n \n 전에는 좁은 화면에서만 여기에 넣고, 넓은 화면에서는 헤드룸의 ox-filters-form 이 검색을\n * 그렸다. 그래서 같은 앱 안에서 검색 상자의 자리가 화면마다 달랐다.\n \n 헤드룸에는 좁히는 칩만 남는다. 폼은 without-search 로 남겨 두어, 나중에 어느 칸에\n * filter 를 달면 그 UI 가 저절로 생긴다(비면 아무것도 그리지 않는다).\n /\n search: {\n handler: (search: string) => {\n this.grist.searchText = search\n },\n value: this.grist?.searchText \|\| ''\n },\n filter: { handler: () => { this.grist.toggleHeadroom()\n }\n },\n help: 'worklist/approval-done-list-page',\n actions: []\n }\n }\n\n render() { const mode = this.mode \|\| (isMobileDevice() ? 'CARD' : 'GRID')\n\n return html`\n <ox-grist class=\"page-fill\" .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>\n <div slot=\"headroom\" class=\"header\">\n <div class=\"filters\">\n <!-- 좁은 화면에서는 상단 바가 검색을 갖는다(위 context 주석 참조). -->\n <ox-filters-form class=\"filter\" without-search></ox-filters-form>\n <ox-input-select-buttons\n .value=${this.filters}\n .options=${this.counted([\n importantChip(),\n /\n * No 만기 chip here. These approvals have already been judged.\n \n The chip asks \"due within 24 hours\" (dueSoonFilters in chip-filters). Finished\n * work does not carry that question, and the condition — dueAt lte now + 24h —\n * matches every deadline already past, so on this screen it selects \"has a\n * deadline\" rather than \"due soon\".\n \n It also filters a column this grid does not show, leaving no way to tell what it\n * took away.\n /\n { display: i18next.t('label.filter-rejected'),\n value: 'rejected'\n }\n ])}\n @change=${(e: CustomEvent) => { this.filters = (e.currentTarget as any)?.value\n this.grist.fetch()\n }}\n ></ox-input-select-buttons>\n <!-- <ox-filters-form class=\"filter\" autofocus without-search></ox-filters-form> -->\n </div>\n\n </div>\n </ox-grist>\n `\n }\n\n async pageInitialized(lifecycle) { this.gristConfig = { list: { thumbnail: 'thumbnail',\n fields: ['name', 'description'],\n details: ['createdAt', 'due']\n },\n columns: [\n { type: 'gutter', gutterName: 'sequence', fixed: true },\n { type: 'string',\n name: 'name',\n fixed: true,\n header: i18next.t('field.wl-subject'),\n record: {\n editable: false,\n renderer: subjectCell()\n },\n filter: 'search',\n sortable: true,\n width: 225\n },\n {\n /\n * 설명은 제목 칸 안에서 두 줄로 보인다(activity-cells 의 subjectCell). 그래서 따로 보일 칸이\n * 필요하지 않다.\n \n 그런데 칸을 없애면 설명으로 검색하는 기능이 함께 사라진다. searchText 는\n * filter: 'search' 를 선언한 컬럼마다 필터를 만들고 hidden 은 보지 않는다\n * (data-grist.ts 의 set searchText). 실측으로 확인했다 — 컬럼을 없앤 뒤 설명에만 있는\n * 낱말로 검색하면 0건이었다.\n \n 그래서 감춘 칸으로 남겨 검색만 남긴다.\n /\n type: 'string',\n name: 'description',\n header: i18next.t('field.description'),\n record: { editable: false },\n filter: 'search',\n hidden: true\n },\n { type: 'number',\n name: 'priority',\n header: i18next.t('field.wl-priority'),\n record: {\n editable: false,\n align: 'center',\n renderer: priorityCell()\n },\n width: 75\n },\n { type: 'select',\n name: 'judgment',\n header: i18next.t('field.wl-judgment'),\n record: { editable: false,\n align: 'center',\n options: [\n { display: i18next.t('label.activity-state-rejected'), value: 'rejected' },\n { display: i18next.t('label.activity-state-escalated'), value: 'escalated' },\n { display: i18next.t('label.activity-state-delegated'), value: 'delegated' },\n { display: i18next.t('label.activity-state-approved'), value: 'approved' },\n { display: i18next.t('label.activity-state-aborted'), value: 'aborted' }\n ]\n },\n width: 80\n },\n { type: 'number',\n name: 'round',\n header: i18next.t('field.wl-round'),\n record: { editable: false\n },\n width: 50\n },\n { type: 'string',\n name: 'comment',\n header: i18next.t('field.wl-comment'),\n record: { editable: false\n },\n width: 200\n },\n { type: 'datetime',\n name: 'terminatedAt',\n header: i18next.t('field.wl-terminated-at'),\n record: { editable: false\n },\n sortable: true,\n filter: false,\n width: 180\n },\n { type: 'datetime',\n name: 'createdAt',\n header: i18next.t('field.wl-submitted-at'),\n record: { editable: false\n },\n sortable: true,\n filter: false,\n width: 180\n },\n { type: 'string',\n name: 'viewSource',\n header: i18next.t('field.wl-view-source'),\n record: { editable: false,\n renderer: function (value, column, record, rowIndex, field) { const { viewType, viewSource } = record.activity \|\| {}\n var type = viewType !== 'board' ? 'string' : 'board'\n return getRenderer(type)(viewSource, column, record, rowIndex, field)\n }\n },\n width: 140,\n hidden: true\n },\n { type: 'image',\n name: 'thumbnail',\n header: i18next.t('field.thumbnail'),\n record: { editable: false },\n hidden: true\n }\n ],\n rows: { appendable: false,\n editable: false,\n handlers: { click: (columns, data, column, record, rowIndex) => { this.openActivityApproval(record)\n }\n }\n },\n sorters: [\n { name: 'terminatedAt',\n desc: true\n }\n ]\n }\n }\n\n async pageUpdated(changes, lifecycle, changedBefore) { if (this.active) { this.grist?.fetch()\n }\n }\n\n / 읽은 것에 그림이 하나도 없으면 카드마다 빈 그림 칸을 세우지 않는다(§ list-thumbnail.ts). /\n private counted(chips: { display: string; value: string; hint?: string }[]) {\n return chips.map(chip => ({ ...chip, count: this.chipCounts.get(chip.value) ?? 0 }))\n }\n\n / The chips' numbers - asked beside the list, on the list's filters before any chip is added. */\n private countChips(filters: any[]) {\n countChips('approvalDoneList', ['important', 'rejected'], filters)\n .then(counts => (this.chipCounts = counts))\n .catch(e => console.error(e))\n }\n\n async fetchHandler(options: FetchOption) {\n const fetched = await this.fetchRows(options)\n\n this.gristConfig = listWithThumbnail(this.gristConfig, fetched?.records \|\| [])\n\n return fetched\n }\n\n async fetchRows({ page, limit, sortings = [], filters = [] }: FetchOption) {\n this.countChips(filters)\n filters = withChips(filters, this.filters)\n\n const response = await client.query({ query: gql`\n query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) { responses: approvalDoneList(filters: $filters, pagination: $pagination, sortings: $sortings) { items { id\n round\n judgment\n comment\n createdAt\n terminatedAt\n activityThread { activityInstance { activityId: id\n name\n description\n priority\n input\n refBy\n activityType\n viewType\n viewSource\n thumbnail\n updatedAt\n createdAt\n creator { id\n name\n }\n }\n state\n output\n dueAt\n assignedAt\n }\n }\n total\n }\n }\n `,\n variables: { filters,\n pagination: { page, limit },\n sortings\n }\n })\n\n return { total: response.data.responses.total \|\| 0,\n records: (response.data.responses.items \|\| []).map(item => { let thread = item.activityThread\n return { id: item.id,\n ...thread.activityInstance,\n judgment: item.judgment,\n comment: item.comment,\n round: item.round,\n createdAt: item.createdAt,\n terminatedAt: item.terminatedAt\n }\n })\n }\n }\n\n openActivityApproval(activityApproval) { navigate(`activity-approval/${activityApproval.id}?title=${activityApproval.name}`)\n }\n}\n"]}
1	+ {"version":3,"file":"approval-done-list-page.js","sourceRoot":"","sources":["../../../client/pages/todo/approval-done-list-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@operato/data-grist/ox-filters-form.js'\nimport '@operato/input/ox-input-select-buttons.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { DataGrist, FetchOption, getRenderer } from '@operato/data-grist'\nimport { client } from '@operato/graphql'\nimport { countChips, importantChip, withChips } from '../../chip-filters.js'\nimport { i18next, localize } from '@operato/i18n'\nimport { navigate, PageView } from '@operato/shell'\nimport { listWithThumbnail } from './list-thumbnail.js'\nimport { CommonHeaderStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles'\nimport { isMobileDevice } from '@operato/utils'\n\nimport { priorityCell, subjectCell } from '../../activity-cells.js'\n\n@customElement('approval-done-list-page')\nexport class ApprovalDoneListPage extends localize(i18next)(PageView) { static styles = [\n /* The work surface frame for a list screen (ADR-0060 decision 8). /\n WorkSurfacePageStyles,\n ScrollbarStyles,\n CommonHeaderStyles,\n css`\n :host {\n --grid-record-emphasized-background-color: #8b0000;\n --grid-record-emphasized-color: #ff6b6b;\n }\n\n .header { grid-template-areas: 'filters actions';\n }\n\n /\n * ── 헤드룸의 왼쪽 기준선은 표와 같다 ─────────────────────────────────\n * CommonHeaderStyles 의 .filters 는 배경과 모서리와 여백을 가진 영역이다. 그 배경이\n * --md-sys-color-surface 인데 이 제품에서는 바탕색과 같은 값이라, *보이지 않는 영역이\n 자리만 차지하고** 검색창을 여백만큼(12px) 안쪽으로 밀었다.\n \n 실측: 표 왼쪽 끝 212 · 필터 영역 212 · 검색창 224. 화면의 왼쪽 기준선이 둘이 됐다.\n \n 그 규칙들은 .header 안에 중첩되어 있어(.header .filters) 밑줄 없는 .filters 로는 이길 수\n * 없다 — 특정도가 0,1,0 대 0,2,0 이다.\n /\n .header .filters {\n padding: 0;\n background: none;\n border-radius: 0;\n gap: 12px;\n }\n\n `\n ]\n\n @property({ type: Object }) gristConfig?: any\n @property({ type: String }) mode: 'GRID' \| 'LIST' \| 'CARD' = isMobileDevice() ? 'CARD' : 'GRID'\n\n @query('ox-grist') grist!: DataGrist\n\n @state() filters?: string[]\n\n get context() { return { title: i18next.t('title.approval done list'),\n /\n * 검색의 자리는 기기가 정한다.\n \n PC 에서는 화면 안으로 내린다. 상단 바에 두면 거른 조건과 걸러진 결과가 화면의 위아래 끝으로\n * 갈라지고, 지금 무엇으로 걸렀는지가 목록 옆에서 보이지 않는다.\n \n 좁은 화면에서는 상단 바에 그대로 둔다. 헤드룸에 두면 검색창과 필터가 목록을 그만큼 밀어\n * 내리고, 카드 두 장이 화면 밖으로 나간다. 상단 바는 그 자리를 아끼려고 있는 것이다.\n \n 이 저장소에는 두 방식이 다 있다 — 헤드룸 50곳, 상단 바 51곳. 정형인 것은 구조\n * (.header / .filters / .filter)이고 검색의 자리는 화면이 정한다.\n /\n /\n * 검색은 페이지 제목 줄의 오른쪽 끝에 둔다 — 다른 화면들과 같은 자리다.\n \n 전에는 좁은 화면에서만 여기에 넣고, 넓은 화면에서는 헤드룸의 ox-filters-form 이 검색을\n * 그렸다. 그래서 같은 앱 안에서 검색 상자의 자리가 화면마다 달랐다.\n \n 헤드룸에는 좁히는 칩만 남는다. 폼은 without-search 로 남겨 두어, 나중에 어느 칸에\n * filter 를 달면 그 UI 가 저절로 생긴다(비면 아무것도 그리지 않는다).\n /\n search: {\n handler: (search: string) => {\n this.grist.searchText = search\n },\n value: this.grist?.searchText \|\| ''\n },\n filter: { handler: () => { this.grist.toggleHeadroom()\n }\n },\n help: 'worklist/approval-done-list-page',\n actions: []\n }\n }\n\n render() { const mode = this.mode \|\| (isMobileDevice() ? 'CARD' : 'GRID')\n\n return html`\n <ox-grist class=\"page-fill\" .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} .countHandler=${this.countHandler.bind(this)} @counts-change=${() => this.requestUpdate()}>\n <div slot=\"headroom\" class=\"header\">\n <div class=\"filters\">\n <!-- 좁은 화면에서는 상단 바가 검색을 갖는다(위 context 주석 참조). -->\n <ox-filters-form class=\"filter\" without-search></ox-filters-form>\n <ox-input-select-buttons\n .value=${this.filters}\n .options=${this.counted([\n importantChip(),\n /\n * No 만기 chip here. These approvals have already been judged.\n \n The chip asks \"due within 24 hours\" (dueSoonFilters in chip-filters). Finished\n * work does not carry that question, and the condition — dueAt lte now + 24h —\n * matches every deadline already past, so on this screen it selects \"has a\n * deadline\" rather than \"due soon\".\n \n It also filters a column this grid does not show, leaving no way to tell what it\n * took away.\n /\n { display: i18next.t('label.filter-rejected'),\n value: 'rejected'\n }\n ])}\n @change=${(e: CustomEvent) => { this.filters = (e.currentTarget as any)?.value\n this.grist.fetch()\n }}\n ></ox-input-select-buttons>\n <!-- <ox-filters-form class=\"filter\" autofocus without-search></ox-filters-form> -->\n </div>\n\n </div>\n </ox-grist>\n `\n }\n\n async pageInitialized(lifecycle) { this.gristConfig = { list: { thumbnail: 'thumbnail',\n fields: ['name', 'description'],\n details: ['createdAt', 'due']\n },\n columns: [\n { type: 'gutter', gutterName: 'sequence', fixed: true },\n { type: 'string',\n name: 'name',\n fixed: true,\n header: i18next.t('field.wl-subject'),\n record: {\n editable: false,\n renderer: subjectCell()\n },\n filter: 'search',\n sortable: true,\n width: 225\n },\n {\n /\n * 설명은 제목 칸 안에서 두 줄로 보인다(activity-cells 의 subjectCell). 그래서 따로 보일 칸이\n * 필요하지 않다.\n \n 그런데 칸을 없애면 설명으로 검색하는 기능이 함께 사라진다. searchText 는\n * filter: 'search' 를 선언한 컬럼마다 필터를 만들고 hidden 은 보지 않는다\n * (data-grist.ts 의 set searchText). 실측으로 확인했다 — 컬럼을 없앤 뒤 설명에만 있는\n * 낱말로 검색하면 0건이었다.\n \n 그래서 감춘 칸으로 남겨 검색만 남긴다.\n /\n type: 'string',\n name: 'description',\n header: i18next.t('field.description'),\n record: { editable: false },\n filter: 'search',\n hidden: true\n },\n { type: 'number',\n name: 'priority',\n header: i18next.t('field.wl-priority'),\n record: {\n editable: false,\n align: 'center',\n renderer: priorityCell()\n },\n width: 75\n },\n { type: 'select',\n name: 'judgment',\n header: i18next.t('field.wl-judgment'),\n record: { editable: false,\n align: 'center',\n options: [\n { display: i18next.t('label.activity-state-rejected'), value: 'rejected' },\n { display: i18next.t('label.activity-state-escalated'), value: 'escalated' },\n { display: i18next.t('label.activity-state-delegated'), value: 'delegated' },\n { display: i18next.t('label.activity-state-approved'), value: 'approved' },\n { display: i18next.t('label.activity-state-aborted'), value: 'aborted' }\n ]\n },\n width: 80\n },\n { type: 'number',\n name: 'round',\n header: i18next.t('field.wl-round'),\n record: { editable: false\n },\n width: 50\n },\n { type: 'string',\n name: 'comment',\n header: i18next.t('field.wl-comment'),\n record: { editable: false\n },\n width: 200\n },\n { type: 'datetime',\n name: 'terminatedAt',\n header: i18next.t('field.wl-terminated-at'),\n record: { editable: false\n },\n sortable: true,\n filter: false,\n width: 180\n },\n { type: 'datetime',\n name: 'createdAt',\n header: i18next.t('field.wl-submitted-at'),\n record: { editable: false\n },\n sortable: true,\n filter: false,\n width: 180\n },\n { type: 'string',\n name: 'viewSource',\n header: i18next.t('field.wl-view-source'),\n record: { editable: false,\n renderer: function (value, column, record, rowIndex, field) { const { viewType, viewSource } = record.activity \|\| {}\n var type = viewType !== 'board' ? 'string' : 'board'\n return getRenderer(type)(viewSource, column, record, rowIndex, field)\n }\n },\n width: 140,\n hidden: true\n },\n { type: 'image',\n name: 'thumbnail',\n header: i18next.t('field.thumbnail'),\n record: { editable: false },\n hidden: true\n }\n ],\n rows: { appendable: false,\n editable: false,\n handlers: { click: (columns, data, column, record, rowIndex) => { this.openActivityApproval(record)\n }\n }\n },\n sorters: [\n { name: 'terminatedAt',\n desc: true\n }\n ]\n }\n }\n\n async pageUpdated(changes, lifecycle, changedBefore) { if (this.active) { this.grist?.fetch()\n }\n }\n\n / 읽은 것에 그림이 하나도 없으면 카드마다 빈 그림 칸을 세우지 않는다(§ list-thumbnail.ts). /\n private counted(chips: { display: string; value: string; hint?: string }[]) {\n return chips.map(chip => ({ ...chip, count: this.grist?.counts?.chips?.[chip.value] ?? 0 }))\n }\n\n / The chips' numbers - asked beside each read, on the list's filters before any chip is added. */\n async countHandler({ filters = [], signal }: FetchOption) {\n return { chips: await countChips('approvalDoneList', ['important', 'rejected'], filters, signal) }\n }\n\n async fetchHandler(options: FetchOption) {\n const fetched = await this.fetchRows(options)\n\n this.gristConfig = listWithThumbnail(this.gristConfig, fetched?.records \|\| [])\n\n return fetched\n }\n\n async fetchRows({ page, limit, sortings = [], filters = [] }: FetchOption) {\n filters = withChips(filters, this.filters)\n\n const response = await client.query({ query: gql`\n query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) { responses: approvalDoneList(filters: $filters, pagination: $pagination, sortings: $sortings) { items { id\n round\n judgment\n comment\n createdAt\n terminatedAt\n activityThread { activityInstance { activityId: id\n name\n description\n priority\n input\n refBy\n activityType\n viewType\n viewSource\n thumbnail\n updatedAt\n createdAt\n creator { id\n name\n }\n }\n state\n output\n dueAt\n assignedAt\n }\n }\n total\n }\n }\n `,\n variables: { filters,\n pagination: { page, limit },\n sortings\n }\n })\n\n return { total: response.data.responses.total \|\| 0,\n records: (response.data.responses.items \|\| []).map(item => { let thread = item.activityThread\n return { id: item.id,\n ...thread.activityInstance,\n judgment: item.judgment,\n comment: item.comment,\n round: item.round,\n createdAt: item.createdAt,\n terminatedAt: item.terminatedAt\n }\n })\n }\n }\n\n openActivityApproval(activityApproval) { navigate(`activity-approval/${activityApproval.id}?title=${activityApproval.name}`)\n }\n}\n"]}

package/dist-client/pages/todo/approval-pending-list-page.d.ts CHANGED Viewed

@@ -34,11 +34,25 @@ export declare class ApprovalPendingListPage extends ApprovalPendingListPage_bas
     private group;
     /** 세 묶음의 건수. 탭에 함께 적는다 — 안 눌러도 얼마나 있는지 보여야 한다. */
     private counts;
+    /**
+     * 안 보고 있는 묶음의 건수를 따로 센다 — 한 줄만 받아 `total` 을 읽는다(ADR-0190).
+     *
+     * 보고 있는 쪽의 수는 목록 조회가 이미 알려 준다(fetchHandler). 그래서 여기서는 나머지 둘만 묻는다.
+     * 묶음이 주소에서 정해진 뒤에 묻는다.
+     */
+    private otherCounts;
+    /**
+     * A count we could not fetch is not zero.
+     *
+     * This read `?? 0`, and the client runs with errorPolicy: 'all' — a failed query comes back as
+     * a resolved response carrying `errors`, not a rejection. So any failure drew the other tab as
+     * 「0」, which says "nothing is waiting on you". The render already draws nothing when the count
+     * is undefined, so leaving it unknown is both honest and already handled.
+     */
+    private get shownCounts();
     mode: 'GRID' | 'LIST' | 'CARD';
     grist: DataGrist;
     filters?: string[];
-    /** How many each chip would show under the list's other conditions, counted by the list's own door. */
-    chipCounts: Map<string, number>;
     get context(): {
         title: string;
         search: {
@@ -55,17 +69,13 @@ export declare class ApprovalPendingListPage extends ApprovalPendingListPage_bas
     /** 주소만 바꾼다 — 목록도 설정도 pageUpdated 가 한 벌로 다시 세운다. */
     private selectGroup;
     private syncGroup;
-    /**
-     * 안 보고 있는 묶음의 건수를 따로 센다 — 한 줄만 받아 `total` 을 읽는다.
-     *
-     * 보고 있는 쪽의 수는 목록 조회가 이미 알려 준다(fetchHandler). 그래서 여기서는 나머지 둘만 묻는다.
-     */
-    private countOther;
     pageInitialized(lifecycle: any): Promise<void>;
     private applyConfig;
     pageUpdated(changes: any, lifecycle: any, changedBefore: any): Promise<void>;
     private counted;
-    private countChips;
+    countHandler({ filters, signal }: FetchOption): Promise<{
+        chips: Record<string, number>;
+    }>;
     fetchHandler(options: FetchOption): Promise<{
         total: any;
         records: any;

package/dist-client/pages/todo/approval-pending-list-page.js CHANGED Viewed

@@ -7,7 +7,7 @@ import gql from 'graphql-tag';
 import { css, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { DataGrist, getRenderer } from '@operato/data-grist';
-import { client } from '@operato/graphql';
+import { client, QueryController } from '@operato/graphql';
 import { countChips, dueSoonChip, importantChip, withChips } from '../../chip-filters.js';
 import { i18next, localize } from '@operato/i18n';
 import { navigate, PageView } from '@operato/shell';
@@ -44,9 +44,27 @@ let ApprovalPendingListPage = class ApprovalPendingListPage extends p13n(localiz
         this.group = 'approval';
         /** 세 묶음의 건수. 탭에 함께 적는다 — 안 눌러도 얼마나 있는지 보여야 한다. */
         this.counts = {};
+        /**
+         * 안 보고 있는 묶음의 건수를 따로 센다 — 한 줄만 받아 `total` 을 읽는다(ADR-0190).
+         *
+         * 보고 있는 쪽의 수는 목록 조회가 이미 알려 준다(fetchHandler). 그래서 여기서는 나머지 둘만 묻는다.
+         * 묶음이 주소에서 정해진 뒤에 묻는다.
+         */
+        this.otherCounts = new QueryController(this, gql `
+      query ($pagination: Pagination, $approval: Boolean!, $reference: Boolean!) {
+        approval: approvalPendingList(pagination: $pagination) @include(if: $approval) {
+          total
+        }
+        reference: approvalReferenceList(pagination: $pagination) @include(if: $reference) {
+          total
+        }
+      }
+    `, {
+            variables: () => this.gristConfig
+                ? { approval: this.group !== 'approval', reference: this.group !== 'reference', pagination: { page: 1, limit: 1 } }
+                : undefined
+        });
         this.mode = isMobileDevice() ? 'CARD' : 'GRID';
-        /** How many each chip would show under the list's other conditions, counted by the list's own door. */
-        this.chipCounts = new Map();
     }
     static { this.styles = [
         /* The frame owns the page shell; the grist is the content it sizes (ADR-0060 decision 8). */
@@ -114,6 +132,23 @@ let ApprovalPendingListPage = class ApprovalPendingListPage extends p13n(localiz
        */
     `
     ]; }
+    /**
+     * A count we could not fetch is not zero.
+     *
+     * This read `?? 0`, and the client runs with errorPolicy: 'all' — a failed query comes back as
+     * a resolved response carrying `errors`, not a rejection. So any failure drew the other tab as
+     * 「0」, which says "nothing is waiting on you". The render already draws nothing when the count
+     * is undefined, so leaving it unknown is both honest and already handled.
+     */
+    get shownCounts() {
+        const counts = { ...this.counts };
+        for (const group of ['approval', 'reference']) {
+            const total = group === this.group ? undefined : this.otherCounts.data?.[group]?.total;
+            if (typeof total == 'number')
+                counts[group] = total;
+        }
+        return counts;
+    }
     get context() {
         return { title: i18next.t('title.approval pending list'),
             /*
@@ -158,7 +193,7 @@ let ApprovalPendingListPage = class ApprovalPendingListPage extends p13n(localiz
             ['approval', 'label.group-approval', 'text.group-approval-hint'],
             ['reference', 'label.group-reference', 'text.group-reference-hint'],
             ['completed', 'label.group-completed', 'text.group-completed-hint']
-        ].map(([key, label, hint]) => ({ key, label, hint, count: countsOnTab(key) ? this.counts[key] : undefined }))}
+        ].map(([key, label, hint]) => ({ key, label, hint, count: countsOnTab(key) ? this.shownCounts[key] : undefined }))}
         .selected=${this.group}
         @select=${(e) => this.selectGroup(e.detail)}
       ></work-box-groups>
@@ -168,6 +203,8 @@ let ApprovalPendingListPage = class ApprovalPendingListPage extends p13n(localiz
         .mode=${mode}
         .config=${this.gristConfig}
         .fetchHandler=${this.fetchHandler.bind(this)}
+        .countHandler=${this.countHandler.bind(this)}
+        @counts-change=${() => this.requestUpdate()}
         .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')}
       >
         <div slot="headroom" class="header">
@@ -212,54 +249,12 @@ let ApprovalPendingListPage = class ApprovalPendingListPage extends p13n(localiz
         this.group = group;
         this.applyConfig();
     }
-    /**
-     * 안 보고 있는 묶음의 건수를 따로 센다 — 한 줄만 받아 `total` 을 읽는다.
-     *
-     * 보고 있는 쪽의 수는 목록 조회가 이미 알려 준다(fetchHandler). 그래서 여기서는 나머지 둘만 묻는다.
-     */
-    async countOther() {
-        const queries = {
-            approval: 'approvalPendingList',
-            reference: 'approvalReferenceList'
-        };
-        const others = Object.keys(queries).filter(group => group !== this.group);
-        const results = await Promise.all(others.map(async (group) => ({
-            group,
-            response: await client.query({
-                query: gql `
-            query ($pagination: Pagination) {
-              responses: ${queries[group]}(pagination: $pagination) {
-                total
-              }
-            }
-          `,
-                variables: { pagination: { page: 1, limit: 1 } },
-                fetchPolicy: 'no-cache'
-            })
-        })));
-        /*
-         * A count we could not fetch is not zero.
-         *
-         * This read `?? 0`, and the client runs with errorPolicy: 'all' — a failed query comes back as
-         * a resolved response carrying `errors`, not a rejection. So any failure drew the other tab as
-         * 「0」, which says "nothing is waiting on you". The render already draws nothing when the count
-         * is undefined, so leaving it unknown is both honest and already handled.
-         */
-        const counts = { ...this.counts };
-        for (const { group, response } of results) {
-            const total = response.errors?.length ? undefined : response.data?.responses?.total;
-            if (typeof total == 'number')
-                counts[group] = total;
-        }
-        this.counts = counts;
-    }
     async pageInitialized(lifecycle) {
         /*
          * 주소가 묶음을 정한다. 주소로 바로 들어온 경우가 여기서 잡힌다 — pageUpdated 가 이 함수보다 먼저
          * 지나가므로 그것만 믿으면 `/reference` 링크가 결재 묶음을 보여준다.
          */
         await this.syncGroup(lifecycle?.resourceId);
-        await this.countOther();
     }
     applyConfig() {
         this.gristConfig = { list: { thumbnail: 'thumbnail',
@@ -552,7 +547,6 @@ let ApprovalPendingListPage = class ApprovalPendingListPage extends p13n(localiz
     async pageUpdated(changes, lifecycle, changedBefore) {
         if (lifecycle?.resourceId !== changedBefore?.resourceId) {
             await this.syncGroup(lifecycle?.resourceId);
-            await this.countOther();
         }
         if (this.active) {
             this.grist?.fetch();
@@ -560,13 +554,11 @@ let ApprovalPendingListPage = class ApprovalPendingListPage extends p13n(localiz
     }
     /* 읽은 것에 그림이 하나도 없으면 카드마다 빈 그림 칸을 세우지 않는다(§ list-thumbnail.ts). */
     counted(chips) {
-        return chips.map(chip => ({ ...chip, count: this.chipCounts.get(chip.value) ?? 0 }));
+        return chips.map(chip => ({ ...chip, count: this.grist?.counts?.chips?.[chip.value] ?? 0 }));
     }
-    /* The chips' numbers - asked beside the list, on the list's filters before any chip is added. */
-    countChips(filters) {
-        countChips(this.group === 'reference' ? 'approvalReferenceList' : this.group === 'completed' ? 'approvalCompletedList' : 'approvalPendingList', ['important', 'due', 'resubmitted'], filters)
-            .then(counts => (this.chipCounts = counts))
-            .catch(e => console.error(e));
+    /* The chips' numbers - asked beside each read, on the list's filters before any chip is added. */
+    async countHandler({ filters = [], signal }) {
+        return { chips: await countChips(this.group === 'reference' ? 'approvalReferenceList' : this.group === 'completed' ? 'approvalCompletedList' : 'approvalPendingList', ['important', 'due', 'resubmitted'], filters, signal) };
     }
     async fetchHandler(options) {
         const fetched = await this.fetchRows(options);
@@ -574,7 +566,6 @@ let ApprovalPendingListPage = class ApprovalPendingListPage extends p13n(localiz
         return fetched;
     }
     async fetchRows({ page, limit, sortings = [], filters = [] }) {
-        this.countChips(filters);
         filters = withChips(filters, this.filters);
         const response = await client.query({ query: gql `
         query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {           responses: ${this.group === 'reference' ? 'approvalReferenceList' : this.group === 'completed' ? 'approvalCompletedList' : 'approvalPendingList'}(filters: $filters, pagination: $pagination, sortings: $sortings) {             items {               id
@@ -620,7 +611,7 @@ let ApprovalPendingListPage = class ApprovalPendingListPage extends p13n(localiz
             }
         });
         const total = response.data.responses.total || 0;
-        /* 보고 있는 묶음의 수는 이 조회가 알려 준다. 나머지 둘만 따로 센다(countOther). */
+        /* 보고 있는 묶음의 수는 이 조회가 알려 준다. 나머지 둘만 따로 센다(otherCounts). */
         if (this.group !== 'completed')
             this.counts = { ...this.counts, [this.group]: total };
         return { total,
@@ -672,10 +663,6 @@ __decorate([
     state(),
     __metadata("design:type", Array)
 ], ApprovalPendingListPage.prototype, "filters", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], ApprovalPendingListPage.prototype, "chipCounts", void 0);
 ApprovalPendingListPage = __decorate([
     customElement('approval-pending-list-page')
 ], ApprovalPendingListPage);