@things-factory/organization 10.1.256 → 10.1.258

package/dist-client/component/approval-line-items-editor.d.ts

@@ -12,8 +12,9 @@ export declare class ApprovalLineItemsEditor extends ApprovalLineItemsEditor_bas
     static styles: import("lit").CSSResult[];
     value?: ApprovalLineItem[];
     gristConfig?: any;
+    private savedLinesRead;
     /** 퍼 올 수 있는 저장된 결재선의 수. 세기 전과 못 센 것은 undefined 다(§ copy-from.ts). */
-    savedLines?: number;
+    get savedLines(): number | undefined;
     grist?: DataGrist;
     view?: ApprovalLineView;
     private popup?;
@@ -33,7 +34,6 @@ export declare class ApprovalLineItemsEditor extends ApprovalLineItemsEditor_bas
     /** 화면의 줄을 결재선으로 읽어 넘긴다 — 고치기와 지우기가 같은 길로 간다. */
     private takeRows;
     private announce;
-    private countSavedLines;
     openSelector(): void;
 }
 export {};

package/dist-client/component/approval-line-items-editor.js

@@ -9,7 +9,7 @@ import { isMobileDevice } from '@operato/utils';
 import { ButtonContainerStyles, CommonHeaderStyles } from '@operato/styles';
 import { openPopup } from '@operato/layout';
 import gql from 'graphql-tag';
-import { client } from '@operato/graphql';
+import { QueryController } from '@operato/graphql';
 import { ApprovalLineView } from './approval-line-view';
 import { lineAfterCopy, lineFromRows, participationChoice, PARTICIPATION_CHOICES, targetTypeOptions } from './approval-line-edit';
 import { offersCopyFrom } from './copy-from';
@@ -18,6 +18,17 @@ import { isReferenceStep, storedParticipation } from '../types/approval-line';
  * 결재선의 각 결재자 리스트를 편집한다.
  */
 let ApprovalLineItemsEditor = class ApprovalLineItemsEditor extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        /* 선택기가 읽는 목록과 같은 질의다 — 수만 센다(ADR-0190). */
+        this.savedLinesRead = new QueryController(this, gql `
+      query {
+        responses: approvalLineReferences(pagination: { page: 1, limit: 1 }) {
+          total
+        }
+      }
+    `);
+    }
     static { this.styles = [
         CommonHeaderStyles,
         ButtonContainerStyles,
@@ -42,6 +53,10 @@ let ApprovalLineItemsEditor = class ApprovalLineItemsEditor extends localize(i18
       }
     `
     ]; }
+    /** 퍼 올 수 있는 저장된 결재선의 수. 세기 전과 못 센 것은 undefined 다(§ copy-from.ts). */
+    get savedLines() {
+        return this.savedLinesRead.data?.responses?.total ?? undefined;
+    }
     render() {
         return html `
       <approval-line-view .model=${this.value}></approval-line-view>
@@ -68,7 +83,6 @@ let ApprovalLineItemsEditor = class ApprovalLineItemsEditor extends localize(i18
     `;
     }
     async firstUpdated() {
-        this.countSavedLines();
         this.gristConfig = {
             list: {
                 fields: ['type', 'approver', 'participation']
@@ -327,24 +341,6 @@ let ApprovalLineItemsEditor = class ApprovalLineItemsEditor extends localize(i18
             detail: this.value
         }));
     }
-    /* 선택기가 읽는 목록과 같은 질의다 — 수만 센다. */
-    async countSavedLines() {
-        try {
-            const response = await client.query({
-                query: gql `
-          query {
-            responses: approvalLineReferences(pagination: { page: 1, limit: 1 }) {
-              total
-            }
-          }
-        `
-            });
-            this.savedLines = response?.data?.responses?.total ?? undefined;
-        }
-        catch {
-            this.savedLines = undefined;
-        }
-    }
     openSelector() {
         if (this.popup) {
             delete this.popup;
@@ -375,10 +371,6 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], ApprovalLineItemsEditor.prototype, "gristConfig", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Number)
-], ApprovalLineItemsEditor.prototype, "savedLines", void 0);
 __decorate([
     query('ox-grist'),
     __metadata("design:type", DataGrist)

package/dist-client/component/approval-line-items-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"approval-line-items-editor.js","sourceRoot":"","sources":["../../client/component/approval-line-items-editor.ts"],"names":[],"mappings":";AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAe,SAAS,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAC3E,OAAO,EAAE,SAAS,EAAe,MAAM,iBAAiB,CAAA;AAExD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACjI,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAC5C,OAAO,EAAkC,eAAe,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAE7G;;GAEG;AAEI,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aACjE,WAAM,GAAG;QACd,kBAAkB;QAClB,qBAAqB;QACrB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;KAmBF;KACF,AAvBY,CAuBZ;IAaD,MAAM;QACJ,OAAO,IAAI,CAAA;mCACoB,IAAI,CAAC,KAAK;;gBAE7B,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;kBAChC,IAAI,CAAC,WAAW;wBACV,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;yBAC3B,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;;;;cAIhC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC;YAC/B,CAAC,CAAC,IAAI,CAAA,kBAAkB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;mDACf,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC;0BACtD;YACZ,CAAC,CAAC,EAAE;;oCAEkB,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE;yCACvB,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;;;;KAK9D,CAAA;IACH,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC,eAAe,EAAE,CAAA;QAEtB,IAAI,CAAC,WAAW,GAAG;YACjB,IAAI,EAAE;gBACJ,MAAM,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,eAAe,CAAC;aAC9C;YACD,OAAO,EAAE;gBACP,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,cAAc,EAAE,QAAQ,EAAE,IAAI,EAAE;gBAC9D,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE;gBAC1C;oBACE,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,QAAQ;oBACpB,IAAI,EAAE,cAAc;oBACpB,QAAQ,EAAE;wBACR,KAAK,EAAE,SAAS;qBACjB;iBACF;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,QAAQ;oBACpB,IAAI,EAAE,gBAAgB;oBACtB,QAAQ,EAAE;wBACR,KAAK,EAAE,WAAW;qBACnB;iBACF;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC;oBACzD,MAAM,EAAE;wBACN,QAAQ,EAAE,IAAI;wBACd,OAAO,EAAE,iBAAiB,CAAC,CAAC,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;qBAChI;oBACD,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE;;;;;;;uBAOG;oBACH,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,eAAe;oBACrB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;oBACxC,MAAM,EAAE;wBACN,QAAQ,EAAE,IAAI;wBACd,OAAO,EAAE,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC;wBAC9F,QAAQ,EAAE,CAAC,KAAU,EAAE,MAAW,EAAE,MAAW,EAAE,EAAE,CAAC,IAAI,CAAA,SAAS,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS;qBACrH;oBACD,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE;;;;;;;;uBAQG;oBACH,IAAI,EAAE,SAAS;oBACf,IAAI,EAAE,aAAa;oBACnB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC;oBACvC,MAAM,EAAE;wBACN,QAAQ,EAAE,CAAC,KAAU,EAAE,MAAW,EAAE,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC;wBAC9D,KAAK,EAAE,MAAM;wBACb,QAAQ,EAAE,CAAC,KAAU,EAAE,MAAW,EAAE,MAAW,EAAE,EAAE;4BACjD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,CAAC;gCAC7B,OAAO,IAAI,CAAA,sBAAsB,OAAO,CAAC,CAAC,CAAC,kCAAkC,CAAC,SAAS,CAAA;4BACzF,CAAC;4BAED,OAAO,KAAK;gCACV,CAAC,CAAC,IAAI,CAAA,GAAG,OAAO,CAAC,CAAC,CAAC,uBAAuB,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;gCAC3D,CAAC,CAAC,IAAI,CAAA,uBAAuB,OAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC,SAAS,CAAA;wBAC9E,CAAC;qBACF;oBACD,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,iBAAiB;oBACvB,IAAI,EAAE,UAAU;oBAChB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;oBACnC,MAAM,EAAE;wBACN,QAAQ,EAAE,IAAI;wBACd,MAAM,EAAE,UAAU,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK;4BACtD,IAAI,OAAO,GAAG,EAAE,CAAA;4BAChB,QAAQ,MAAM,CAAC,IAAI,EAAE,CAAC;gCACpB,KAAK,UAAU;oCACb,OAAO,GAAG;wCACR,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;wCACvC,UAAU,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE;wCACrC,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE;wCAC3E,SAAS,EAAE,WAAW;wCACtB,OAAO,EAAE;4CACP,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE;4CAC5B;gDACE,IAAI,EAAE,WAAW;gDACjB,KAAK,EAAE,GAAG;gDACV,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,EAAE;gDACzD,MAAM,EAAE,QAAQ;gDAChB,QAAQ,EAAE,IAAI;6CACf;4CACD;gDACE,IAAI,EAAE,MAAM;gDACZ,KAAK,EAAE,GAAG;gDACV,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE;gDACnD,MAAM,EAAE,QAAQ;gDAChB,QAAQ,EAAE,IAAI;6CACf;4CACD;gDACE,IAAI,EAAE,OAAO;gDACb,KAAK,EAAE,GAAG;gDACV,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE;gDACpD,MAAM,EAAE,QAAQ;gDAChB,QAAQ,EAAE,IAAI;6CACf;4CACD;gDACE,IAAI,EAAE,MAAM;gDACZ,IAAI,EAAE,MAAM;gDACZ,KAAK,EAAE,GAAG;gDACV,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC,EAAE;gDAC7E,MAAM,EAAE;oDACN,QAAQ,EAAE,KAAK;oDACf,QAAQ,EAAE,eAAe;iDAC1B;6CACF;4CACD;gDACE,IAAI,EAAE,MAAM;gDACZ,IAAI,EAAE,aAAa;gDACnB,KAAK,EAAE,GAAG;gDACV,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,EAAE;gDAC3D,MAAM,EAAE;oDACN,QAAQ,EAAE,KAAK;oDACf,QAAQ,EAAE,cAAc;iDACzB;6CACF;4CACD;gDACE,IAAI,EAAE,MAAM;gDACZ,IAAI,EAAE,mBAAmB;gDACzB,KAAK,EAAE,GAAG;gDACV,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,EAAE;gDACjE,MAAM,EAAE;oDACN,QAAQ,EAAE,KAAK;oDACf,QAAQ,EAAE,oBAAoB;iDAC/B;6CACF;4CACD;gDACE,IAAI,EAAE,MAAM;gDACZ,IAAI,EAAE,SAAS;gDACf,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE;gDACvD,KAAK,EAAE,GAAG;6CACX;yCACF;wCACD,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,CAAC,EAAE;wCAC3D,UAAU,EAAE,IAAI;wCAChB,SAAS,EAAE,MAAM;wCACjB,gBAAgB,EAAE,WAAW;qCAC9B,CAAA;oCACD,MAAK;gCACP,KAAK,YAAY;oCACf,OAAO,GAAG;wCACR,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;wCACzC,SAAS,EAAE,aAAa;wCACxB,OAAO,EAAE;4CACP,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE;4CAC5B;gDACE,IAAI,EAAE,WAAW;gDACjB,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,EAAE;gDACzD,MAAM,EAAE,QAAQ;6CACjB;4CACD,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE;yCACxF;wCACD,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,EAAE;wCACxC,UAAU,EAAE,IAAI;wCAChB,SAAS,EAAE,MAAM;wCACjB,gBAAgB,EAAE,WAAW;qCAC9B,CAAA;oCACD,MAAK;gCACP,KAAK,MAAM;oCACT,OAAO,GAAG;wCACR,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,EAAE,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC;wCACtE,SAAS,EAAE,OAAO;qCACnB,CAAA;oCACD,MAAK;gCACP;oCACE,OAAO,IAAI,CAAA;4BACf,CAAC;4BAED,IAAI,aAAa,GAAG,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,CAAA;4BAEjD,OAAO,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAA;wBACrG,CAAC;wBACD,QAAQ,EAAE,UAAU,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK;4BACxD,IAAI,OAAO,GAAG,EAAE,CAAA;4BAChB,QAAQ,MAAM,CAAC,IAAI,EAAE,CAAC;gCACpB,KAAK,UAAU;oCACb,OAAO,GAAG;wCACR,UAAU,EAAE,IAAI;wCAChB,SAAS,EAAE,MAAM;wCACjB,gBAAgB,EAAE,WAAW;qCAC9B,CAAA;oCACD,MAAK;gCACP,KAAK,YAAY,CAAC;gCAClB,KAAK,MAAM,CAAC;gCACZ;oCACE,MAAK;4BACT,CAAC;4BAED,IAAI,aAAa,GAAG,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,CAAA;4BAEjD,OAAO,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,GAAG,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAA;wBACvG,CAAC;qBACF;oBACD,KAAK,EAAE,GAAG;iBACX;aACF;YACD,IAAI,EAAE;gBACJ,UAAU,EAAE;oBACV,QAAQ,EAAE,IAAI;iBACf;aACF;YACD,UAAU,EAAE;gBACV,QAAQ,EAAE,IAAI;aACf;YACD,OAAO,EAAE,EAAE;SACZ,CAAA;IACH,CAAC;IAED,YAAY,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,GAAG,EAAE,EAAe;QAC/D;;;;;WAKG;QACH,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,aAAa,EAAE,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA;QACrG,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAElB,OAAO;YACL,KAAK,EAAE,KAAK,CAAC,MAAM;YACnB,OAAO,EAAE,KAAK;SACf,CAAA;IACH,CAAC;IAED,KAAK,CAAC,eAAe;QACnB,IAAI,CAAC,KAAK,EAAE,qBAAqB,CAAC,KAAK,CAAC,CAAA;QAExC;;;WAGG;QACH,IAAI,CAAC,QAAQ,EAAE,CAAA;IACjB,CAAC;IAED,gDAAgD;IACxC,QAAQ;QACd,IAAI,CAAC,KAAK,GAAG,YAAY,CAAE,IAAI,CAAC,KAAa,EAAE,KAAK,EAAE,OAAO,CAAC,CAAA;QAC9D,IAAI,CAAC,QAAQ,EAAE,CAAA;IACjB,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;IAGD,iCAAiC;IACzB,KAAK,CAAC,eAAe;QAC3B,IAAI,CAAC;YACH,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;gBAClC,KAAK,EAAE,GAAG,CAAA;;;;;;SAMT;aACF,CAAC,CAAA;YAEF,IAAI,CAAC,UAAU,GAAG,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,IAAI,SAAS,CAAA;QACjE,CAAC;QAAC,MAAM,CAAC;YACP,IAAI,CAAC,UAAU,GAAG,SAAS,CAAA;QAC7B,CAAC;IACH,CAAC;IACD,YAAY;QACV,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,OAAO,IAAI,CAAC,KAAK,CAAA;QACnB,CAAC;QAED,MAAM,eAAe,GAAG,KAAK,EAAE,QAA8B,EAAE,EAAE;YAC/D,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;YAEhD,IAAI,CAAC,KAAM,CAAC,KAAK,EAAE,CAAA;YAEnB,IAAI,CAAC,QAAQ,EAAE,CAAA;QACjB,CAAC,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,SAAS,CACpB,IAAI,CAAA,6CAA6C,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,6BAA6B,EACxG;YACE,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,MAAM,EAAE;gBACN,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,mCAAmC,CAAC;gBAC3D,OAAO,EAAE,CAAC,QAAa,EAAE,KAAU,EAAE,EAAE;oBACrC,iCAAiC;oBACjC,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;gBAC5B,CAAC;aACF;SACF,CACF,CAAA;IACH,CAAC;;AAtW0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;sDAA2B;AAE5C;IAAR,KAAK,EAAE;;4DAAkB;AAEjB;IAAR,KAAK,EAAE;;2DAAoB;AAET;IAAlB,KAAK,CAAC,UAAU,CAAC;8BAAS,SAAS;sDAAA;AACP;IAA5B,KAAK,CAAC,oBAAoB,CAAC;8BAAQ,gBAAgB;qDAAA;AAjCzC,uBAAuB;IADnC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,uBAAuB,CAiYnC","sourcesContent":["import './approval-line-view'\nimport './approval-line-selector'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { DataGrist, FetchOption, getEditor, getRenderer } from '@operato/data-grist'\nimport { isMobileDevice } from '@operato/utils'\nimport { ButtonContainerStyles, CommonHeaderStyles } from '@operato/styles'\nimport { openPopup, PopupHandle } from '@operato/layout'\n\nimport gql from 'graphql-tag'\nimport { client } from '@operato/graphql'\n\nimport { ApprovalLineView } from './approval-line-view'\nimport { lineAfterCopy, lineFromRows, participationChoice, PARTICIPATION_CHOICES, targetTypeOptions } from './approval-line-edit'\nimport { offersCopyFrom } from './copy-from'\nimport { ApprovalLine, ApprovalLineItem, isReferenceStep, storedParticipation } from '../types/approval-line'\n\n/**\n * 결재선의 각 결재자 리스트를 편집한다.\n */\n@customElement('approval-line-items-editor')\nexport class ApprovalLineItemsEditor extends localize(i18next)(LitElement) {\n  static styles = [\n    CommonHeaderStyles,\n    ButtonContainerStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-surface);\n      }\n\n      approval-line-view {\n        min-height: 100px;\n      }\n\n      ox-grist {\n        flex: 1;\n      }\n\n      .header {\n        grid-template-areas: 'filters actions';\n      }\n    `\n  ]\n\n  @property({ type: Array }) value?: ApprovalLineItem[]\n\n  @state() gristConfig?: any\n  /** 퍼 올 수 있는 저장된 결재선의 수. 세기 전과 못 센 것은 undefined 다(§ copy-from.ts). */\n  @state() savedLines?: number\n\n  @query('ox-grist') grist?: DataGrist\n  @query('approval-line-view') view?: ApprovalLineView\n\n  private popup?: PopupHandle\n\n  render() {\n    return html`\n      <approval-line-view .model=${this.value}></approval-line-view>\n      <ox-grist\n        .mode=${isMobileDevice() ? 'CARD' : 'GRID'}\n        .config=${this.gristConfig}\n        .fetchHandler=${this.fetchHandler.bind(this)}\n        @record-change=${() => this.takeRows()}\n      >\n        <div slot=\"headroom\" class=\"header\">\n          <div class=\"actions\">\n            ${offersCopyFrom(this.savedLines)\n              ? html`<button @click=${this.openSelector.bind(this)}>\n                  <md-icon>content_copy</md-icon>${i18next.t('button.copy from')}\n                </button>`\n              : ''}\n\n            <button danger @click=${() => this.deleteDataItems()}>\n              <md-icon>delete</md-icon>${i18next.t('button.delete')}\n            </button>\n          </div>\n        </div>\n      </ox-grist>\n    `\n  }\n\n  async firstUpdated() {\n    this.countSavedLines()\n\n    this.gristConfig = {\n      list: {\n        fields: ['type', 'approver', 'participation']\n      },\n      columns: [\n        { type: 'gutter', gutterName: 'row-selector', multiple: true },\n        { type: 'gutter', gutterName: 'sequence' },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'arrow_upward',\n          handlers: {\n            click: 'move-up'\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'arrow_downward',\n          handlers: {\n            click: 'move-down'\n          }\n        },\n        {\n          type: 'select',\n          name: 'type',\n          header: i18next.t('field.type', { defaultValue: 'type' }),\n          record: {\n            editable: true,\n            options: targetTypeOptions(['Employee', 'Department', 'Role', 'MyDepartment', 'MySupervisor', 'Myself'], key => i18next.t(key))\n          },\n          width: 140\n        },\n        {\n          /*\n           * 어떤 자격으로 서는가 — 결재냐 참조냐.\n           *\n           * 빈 값이 「결재」다. 지금 도는 결재선에는 이 칸이 없어서, 그 항목들이 전부 결재자로 읽혀야\n           * 거동이 안 바뀐다. 그래서 옵션의 첫 자리를 빈 값으로 두고 그 문구를 「결재」로 그린다.\n           * 그리는 것은 이 칸이 한다 — 그리스트의 select 렌더러는 값이 비면 옵션을 보기도 전에 빈\n           * 글자를 내서, 결재 항목이 전부 빈칸으로 보였다(§ approval-line-edit 의 participationChoice).\n           */\n          type: 'select',\n          name: 'participation',\n          header: i18next.t('field.participation'),\n          record: {\n            editable: true,\n            options: PARTICIPATION_CHOICES.map(one => ({ display: i18next.t(one.key), value: one.value })),\n            renderer: (value: any, column: any, record: any) => html`<span>${i18next.t(participationChoice(record).key)}</span>`\n          },\n          width: 100\n        },\n        {\n          /*\n           * 참조에게 언제 알리나.\n           *\n           * 결재자에게는 뜻이 없다 — 자기 차례가 곧 시점이다. 그래서 결재 항목에서는 고칠 수 없게 두고,\n           * 그 자리에 「참조에만 씁니다」를 적는다. 빈 칸으로 두면 「안 정했다」로 읽힌다.\n           *\n           * 비면 「상신 즉시」다. 가장 일찍 알리는 쪽이 안 정한 사람에게 안전하다 — 늦게 알리면 의견 낼\n           * 기회가 줄고, 마지막 결재 뒤라면 기회가 아예 없다.\n           */\n          type: 'integer',\n          name: 'notifyAfter',\n          header: i18next.t('field.notify-after'),\n          record: {\n            editable: (value: any, record: any) => isReferenceStep(record),\n            align: 'left',\n            renderer: (value: any, column: any, record: any) => {\n              if (!isReferenceStep(record)) {\n                return html`<span class=\"none\">${i18next.t('text.notify-after-only-reference')}</span>`\n              }\n\n              return value\n                ? html`${i18next.t('text.notify-after-nth', { n: value })}`\n                : html`<span class=\"quiet\">${i18next.t('text.notify-immediately')}</span>`\n            }\n          },\n          width: 130\n        },\n        {\n          type: 'resource-object',\n          name: 'approver',\n          header: i18next.t('field.approver'),\n          record: {\n            editable: true,\n            editor: function (value, column, record, rowIndex, field) {\n              var options = {}\n              switch (record.type) {\n                case 'Employee':\n                  options = {\n                    title: i18next.t('title.employee list'),\n                    pagination: { pages: [50, 100, 200] },\n                    basicArgs: { filters: [{ name: 'active', operator: 'eq', value: 'true' }] },\n                    queryName: 'employees',\n                    columns: [\n                      { name: 'id', hidden: true },\n                      {\n                        name: 'controlNo',\n                        width: 120,\n                        header: { renderer: () => i18next.t('field.control-no') },\n                        filter: 'search',\n                        sortable: true\n                      },\n                      {\n                        name: 'name',\n                        width: 120,\n                        header: { renderer: () => i18next.t('field.name') },\n                        filter: 'search',\n                        sortable: true\n                      },\n                      {\n                        name: 'alias',\n                        width: 150,\n                        header: { renderer: () => i18next.t('label.alias') },\n                        filter: 'search',\n                        sortable: true\n                      },\n                      {\n                        type: 'code',\n                        name: 'type',\n                        width: 110,\n                        header: { renderer: () => i18next.t('label.type', { defaultValue: 'type' }) },\n                        record: {\n                          editable: false,\n                          codeName: 'EMPLOYEE_TYPE'\n                        }\n                      },\n                      {\n                        type: 'code',\n                        name: 'jobPosition',\n                        width: 110,\n                        header: { renderer: () => i18next.t('label.job-position') },\n                        record: {\n                          editable: false,\n                          codeName: 'JOB_POSITION'\n                        }\n                      },\n                      {\n                        type: 'code',\n                        name: 'jobResponsibility',\n                        width: 200,\n                        header: { renderer: () => i18next.t('label.job-responsibility') },\n                        record: {\n                          editable: false,\n                          codeName: 'JOB_RESPONSIBILITY'\n                        }\n                      },\n                      {\n                        type: 'date',\n                        name: 'hiredOn',\n                        header: { renderer: () => i18next.t('field.hired-on') },\n                        width: 100\n                      }\n                    ],\n                    list: { fields: ['controlNo', 'name', 'alias', 'hiredOn'] },\n                    valueField: 'id',\n                    nameField: 'name',\n                    descriptionField: 'controlNo'\n                  }\n                  break\n                case 'Department':\n                  options = {\n                    title: i18next.t('title.department list'),\n                    queryName: 'departments',\n                    columns: [\n                      { name: 'id', hidden: true },\n                      {\n                        name: 'controlNo',\n                        header: { renderer: () => i18next.t('field.control-no') },\n                        filter: 'search'\n                      },\n                      { name: 'name', header: { renderer: () => i18next.t('field.name') }, filter: 'search' }\n                    ],\n                    list: { fields: ['name', 'control-no'] },\n                    valueField: 'id',\n                    nameField: 'name',\n                    descriptionField: 'controlNo'\n                  }\n                  break\n                case 'Role':\n                  options = {\n                    title: i18next.t('title.lookup role', { defaultValue: 'lookup role' }),\n                    queryName: 'roles'\n                  }\n                  break\n                default:\n                  return null\n              }\n\n              var dynamicRecord = { ...column.record, options }\n\n              return getEditor(column.type)(value, { ...column, record: dynamicRecord }, record, rowIndex, field)\n            },\n            renderer: function (value, column, record, rowIndex, field) {\n              var options = {}\n              switch (record.type) {\n                case 'Employee':\n                  options = {\n                    valueField: 'id',\n                    nameField: 'name',\n                    descriptionField: 'controlNo'\n                  }\n                  break\n                case 'Department':\n                case 'Role':\n                default:\n                  break\n              }\n\n              var dynamicRecord = { ...column.record, options }\n\n              return getRenderer(column.type)(value, { ...column, record: dynamicRecord }, record, rowIndex, field)\n            }\n          },\n          width: 180\n        }\n      ],\n      rows: {\n        selectable: {\n          multiple: true\n        }\n      },\n      pagination: {\n        infinite: true\n      },\n      sorters: []\n    }\n  }\n\n  fetchHandler({ filters, page, limit, sortings = [] }: FetchOption) {\n    /*\n     * Rows come straight from the API, where participation is spelled `Reference` — type-graphql\n     * publishes a registered enum by its key. The select below matches its options by string, so\n     * that spelling matches neither `''` nor `'reference'` and the row draws as an approver. Fixed\n     * here rather than in the column, because grist compares the record's own value.\n     */\n    const value = (this.value || []).map(item => ({ ...item, participation: storedParticipation(item) }))\n    this.value = value\n\n    return {\n      total: value.length,\n      records: value\n    }\n  }\n\n  async deleteDataItems() {\n    this.grist?.deleteSelectedRecords(false)\n\n    /*\n     * 지우기는 record-change 를 안 낸다. 여기서 읽지 않으면 줄은 화면에서 사라지는데 팝업이 받은\n     * 값은 지우기 전 그대로라, 확인을 누르면 지운 줄이 되살아난다.\n     */\n    this.takeRows()\n  }\n\n  /** 화면의 줄을 결재선으로 읽어 넘긴다 — 고치기와 지우기가 같은 길로 간다. */\n  private takeRows() {\n    this.value = lineFromRows((this.grist as any)?._data?.records)\n    this.announce()\n  }\n\n  private announce() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n\n\n  /* 선택기가 읽는 목록과 같은 질의다 — 수만 센다. */\n  private async countSavedLines() {\n    try {\n      const response = await client.query({\n        query: gql`\n          query {\n            responses: approvalLineReferences(pagination: { page: 1, limit: 1 }) {\n              total\n            }\n          }\n        `\n      })\n\n      this.savedLines = response?.data?.responses?.total ?? undefined\n    } catch {\n      this.savedLines = undefined\n    }\n  }\n  openSelector() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    const confirmCallback = async (selected?: ApprovalLine | null) => {\n      this.value = lineAfterCopy(this.value, selected)\n\n      this.grist!.fetch()\n\n      this.announce()\n    }\n\n    this.popup = openPopup(\n      html` <approval-line-selector .confirmCallback=${confirmCallback.bind(this)}></approval-line-selector> `,\n      {\n        backdrop: true,\n        size: 'large',\n        search: {\n          placeholder: i18next.t('title.approval-line template list'),\n          handler: (instance: any, value: any) => {\n            /* instance: template instance */\n            instance.searchText(value)\n          }\n        }\n      }\n    )\n  }\n}\n"]}
+{"version":3,"file":"approval-line-items-editor.js","sourceRoot":"","sources":["../../client/component/approval-line-items-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import './approval-line-view'\nimport './approval-line-selector'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { DataGrist, FetchOption, getEditor, getRenderer } from '@operato/data-grist'\nimport { isMobileDevice } from '@operato/utils'\nimport { ButtonContainerStyles, CommonHeaderStyles } from '@operato/styles'\nimport { openPopup, PopupHandle } from '@operato/layout'\n\nimport gql from 'graphql-tag'\nimport { QueryController } from '@operato/graphql'\n\nimport { ApprovalLineView } from './approval-line-view'\nimport { lineAfterCopy, lineFromRows, participationChoice, PARTICIPATION_CHOICES, targetTypeOptions } from './approval-line-edit'\nimport { offersCopyFrom } from './copy-from'\nimport { ApprovalLine, ApprovalLineItem, isReferenceStep, storedParticipation } from '../types/approval-line'\n\n/**\n * 결재선의 각 결재자 리스트를 편집한다.\n */\n@customElement('approval-line-items-editor')\nexport class ApprovalLineItemsEditor extends localize(i18next)(LitElement) {\n  static styles = [\n    CommonHeaderStyles,\n    ButtonContainerStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-surface);\n      }\n\n      approval-line-view {\n        min-height: 100px;\n      }\n\n      ox-grist {\n        flex: 1;\n      }\n\n      .header {\n        grid-template-areas: 'filters actions';\n      }\n    `\n  ]\n\n  @property({ type: Array }) value?: ApprovalLineItem[]\n\n  @state() gristConfig?: any\n  /* 선택기가 읽는 목록과 같은 질의다 — 수만 센다(ADR-0190). */\n  private savedLinesRead = new QueryController(\n    this,\n    gql`\n      query {\n        responses: approvalLineReferences(pagination: { page: 1, limit: 1 }) {\n          total\n        }\n      }\n    `\n  )\n\n  /** 퍼 올 수 있는 저장된 결재선의 수. 세기 전과 못 센 것은 undefined 다(§ copy-from.ts). */\n  get savedLines(): number | undefined {\n    return this.savedLinesRead.data?.responses?.total ?? undefined\n  }\n\n  @query('ox-grist') grist?: DataGrist\n  @query('approval-line-view') view?: ApprovalLineView\n\n  private popup?: PopupHandle\n\n  render() {\n    return html`\n      <approval-line-view .model=${this.value}></approval-line-view>\n      <ox-grist\n        .mode=${isMobileDevice() ? 'CARD' : 'GRID'}\n        .config=${this.gristConfig}\n        .fetchHandler=${this.fetchHandler.bind(this)}\n        @record-change=${() => this.takeRows()}\n      >\n        <div slot=\"headroom\" class=\"header\">\n          <div class=\"actions\">\n            ${offersCopyFrom(this.savedLines)\n              ? html`<button @click=${this.openSelector.bind(this)}>\n                  <md-icon>content_copy</md-icon>${i18next.t('button.copy from')}\n                </button>`\n              : ''}\n\n            <button danger @click=${() => this.deleteDataItems()}>\n              <md-icon>delete</md-icon>${i18next.t('button.delete')}\n            </button>\n          </div>\n        </div>\n      </ox-grist>\n    `\n  }\n\n  async firstUpdated() {\n    this.gristConfig = {\n      list: {\n        fields: ['type', 'approver', 'participation']\n      },\n      columns: [\n        { type: 'gutter', gutterName: 'row-selector', multiple: true },\n        { type: 'gutter', gutterName: 'sequence' },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'arrow_upward',\n          handlers: {\n            click: 'move-up'\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'arrow_downward',\n          handlers: {\n            click: 'move-down'\n          }\n        },\n        {\n          type: 'select',\n          name: 'type',\n          header: i18next.t('field.type', { defaultValue: 'type' }),\n          record: {\n            editable: true,\n            options: targetTypeOptions(['Employee', 'Department', 'Role', 'MyDepartment', 'MySupervisor', 'Myself'], key => i18next.t(key))\n          },\n          width: 140\n        },\n        {\n          /*\n           * 어떤 자격으로 서는가 — 결재냐 참조냐.\n           *\n           * 빈 값이 「결재」다. 지금 도는 결재선에는 이 칸이 없어서, 그 항목들이 전부 결재자로 읽혀야\n           * 거동이 안 바뀐다. 그래서 옵션의 첫 자리를 빈 값으로 두고 그 문구를 「결재」로 그린다.\n           * 그리는 것은 이 칸이 한다 — 그리스트의 select 렌더러는 값이 비면 옵션을 보기도 전에 빈\n           * 글자를 내서, 결재 항목이 전부 빈칸으로 보였다(§ approval-line-edit 의 participationChoice).\n           */\n          type: 'select',\n          name: 'participation',\n          header: i18next.t('field.participation'),\n          record: {\n            editable: true,\n            options: PARTICIPATION_CHOICES.map(one => ({ display: i18next.t(one.key), value: one.value })),\n            renderer: (value: any, column: any, record: any) => html`<span>${i18next.t(participationChoice(record).key)}</span>`\n          },\n          width: 100\n        },\n        {\n          /*\n           * 참조에게 언제 알리나.\n           *\n           * 결재자에게는 뜻이 없다 — 자기 차례가 곧 시점이다. 그래서 결재 항목에서는 고칠 수 없게 두고,\n           * 그 자리에 「참조에만 씁니다」를 적는다. 빈 칸으로 두면 「안 정했다」로 읽힌다.\n           *\n           * 비면 「상신 즉시」다. 가장 일찍 알리는 쪽이 안 정한 사람에게 안전하다 — 늦게 알리면 의견 낼\n           * 기회가 줄고, 마지막 결재 뒤라면 기회가 아예 없다.\n           */\n          type: 'integer',\n          name: 'notifyAfter',\n          header: i18next.t('field.notify-after'),\n          record: {\n            editable: (value: any, record: any) => isReferenceStep(record),\n            align: 'left',\n            renderer: (value: any, column: any, record: any) => {\n              if (!isReferenceStep(record)) {\n                return html`<span class=\"none\">${i18next.t('text.notify-after-only-reference')}</span>`\n              }\n\n              return value\n                ? html`${i18next.t('text.notify-after-nth', { n: value })}`\n                : html`<span class=\"quiet\">${i18next.t('text.notify-immediately')}</span>`\n            }\n          },\n          width: 130\n        },\n        {\n          type: 'resource-object',\n          name: 'approver',\n          header: i18next.t('field.approver'),\n          record: {\n            editable: true,\n            editor: function (value, column, record, rowIndex, field) {\n              var options = {}\n              switch (record.type) {\n                case 'Employee':\n                  options = {\n                    title: i18next.t('title.employee list'),\n                    pagination: { pages: [50, 100, 200] },\n                    basicArgs: { filters: [{ name: 'active', operator: 'eq', value: 'true' }] },\n                    queryName: 'employees',\n                    columns: [\n                      { name: 'id', hidden: true },\n                      {\n                        name: 'controlNo',\n                        width: 120,\n                        header: { renderer: () => i18next.t('field.control-no') },\n                        filter: 'search',\n                        sortable: true\n                      },\n                      {\n                        name: 'name',\n                        width: 120,\n                        header: { renderer: () => i18next.t('field.name') },\n                        filter: 'search',\n                        sortable: true\n                      },\n                      {\n                        name: 'alias',\n                        width: 150,\n                        header: { renderer: () => i18next.t('label.alias') },\n                        filter: 'search',\n                        sortable: true\n                      },\n                      {\n                        type: 'code',\n                        name: 'type',\n                        width: 110,\n                        header: { renderer: () => i18next.t('label.type', { defaultValue: 'type' }) },\n                        record: {\n                          editable: false,\n                          codeName: 'EMPLOYEE_TYPE'\n                        }\n                      },\n                      {\n                        type: 'code',\n                        name: 'jobPosition',\n                        width: 110,\n                        header: { renderer: () => i18next.t('label.job-position') },\n                        record: {\n                          editable: false,\n                          codeName: 'JOB_POSITION'\n                        }\n                      },\n                      {\n                        type: 'code',\n                        name: 'jobResponsibility',\n                        width: 200,\n                        header: { renderer: () => i18next.t('label.job-responsibility') },\n                        record: {\n                          editable: false,\n                          codeName: 'JOB_RESPONSIBILITY'\n                        }\n                      },\n                      {\n                        type: 'date',\n                        name: 'hiredOn',\n                        header: { renderer: () => i18next.t('field.hired-on') },\n                        width: 100\n                      }\n                    ],\n                    list: { fields: ['controlNo', 'name', 'alias', 'hiredOn'] },\n                    valueField: 'id',\n                    nameField: 'name',\n                    descriptionField: 'controlNo'\n                  }\n                  break\n                case 'Department':\n                  options = {\n                    title: i18next.t('title.department list'),\n                    queryName: 'departments',\n                    columns: [\n                      { name: 'id', hidden: true },\n                      {\n                        name: 'controlNo',\n                        header: { renderer: () => i18next.t('field.control-no') },\n                        filter: 'search'\n                      },\n                      { name: 'name', header: { renderer: () => i18next.t('field.name') }, filter: 'search' }\n                    ],\n                    list: { fields: ['name', 'control-no'] },\n                    valueField: 'id',\n                    nameField: 'name',\n                    descriptionField: 'controlNo'\n                  }\n                  break\n                case 'Role':\n                  options = {\n                    title: i18next.t('title.lookup role', { defaultValue: 'lookup role' }),\n                    queryName: 'roles'\n                  }\n                  break\n                default:\n                  return null\n              }\n\n              var dynamicRecord = { ...column.record, options }\n\n              return getEditor(column.type)(value, { ...column, record: dynamicRecord }, record, rowIndex, field)\n            },\n            renderer: function (value, column, record, rowIndex, field) {\n              var options = {}\n              switch (record.type) {\n                case 'Employee':\n                  options = {\n                    valueField: 'id',\n                    nameField: 'name',\n                    descriptionField: 'controlNo'\n                  }\n                  break\n                case 'Department':\n                case 'Role':\n                default:\n                  break\n              }\n\n              var dynamicRecord = { ...column.record, options }\n\n              return getRenderer(column.type)(value, { ...column, record: dynamicRecord }, record, rowIndex, field)\n            }\n          },\n          width: 180\n        }\n      ],\n      rows: {\n        selectable: {\n          multiple: true\n        }\n      },\n      pagination: {\n        infinite: true\n      },\n      sorters: []\n    }\n  }\n\n  fetchHandler({ filters, page, limit, sortings = [] }: FetchOption) {\n    /*\n     * Rows come straight from the API, where participation is spelled `Reference` — type-graphql\n     * publishes a registered enum by its key. The select below matches its options by string, so\n     * that spelling matches neither `''` nor `'reference'` and the row draws as an approver. Fixed\n     * here rather than in the column, because grist compares the record's own value.\n     */\n    const value = (this.value || []).map(item => ({ ...item, participation: storedParticipation(item) }))\n    this.value = value\n\n    return {\n      total: value.length,\n      records: value\n    }\n  }\n\n  async deleteDataItems() {\n    this.grist?.deleteSelectedRecords(false)\n\n    /*\n     * 지우기는 record-change 를 안 낸다. 여기서 읽지 않으면 줄은 화면에서 사라지는데 팝업이 받은\n     * 값은 지우기 전 그대로라, 확인을 누르면 지운 줄이 되살아난다.\n     */\n    this.takeRows()\n  }\n\n  /** 화면의 줄을 결재선으로 읽어 넘긴다 — 고치기와 지우기가 같은 길로 간다. */\n  private takeRows() {\n    this.value = lineFromRows((this.grist as any)?._data?.records)\n    this.announce()\n  }\n\n  private announce() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n\n\n  openSelector() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    const confirmCallback = async (selected?: ApprovalLine | null) => {\n      this.value = lineAfterCopy(this.value, selected)\n\n      this.grist!.fetch()\n\n      this.announce()\n    }\n\n    this.popup = openPopup(\n      html` <approval-line-selector .confirmCallback=${confirmCallback.bind(this)}></approval-line-selector> `,\n      {\n        backdrop: true,\n        size: 'large',\n        search: {\n          placeholder: i18next.t('title.approval-line template list'),\n          handler: (instance: any, value: any) => {\n            /* instance: template instance */\n            instance.searchText(value)\n          }\n        }\n      }\n    )\n  }\n}\n"]}

package/dist-client/component/department-selector.d.ts

@@ -9,11 +9,11 @@ export declare class DepartmentSelector extends LitElement {
     static styles: import("lit").CSSResult[];
     confirmCallback?: (selected?: any) => void;
     value?: Department;
-    roots?: Department[];
+    private departments;
+    private get roots();
     render(): import("lit-html").TemplateResult<1>;
     onSelect(e: CustomEvent, confirm?: boolean): void;
     onEmpty(): void;
     onCancel(): void;
     onConfirm(): void;
-    firstUpdated(): Promise<void>;
 }

package/dist-client/component/department-selector.js

@@ -6,8 +6,8 @@ import '@material/web/button/filled-button.js';
 import '@operato/data-tree';
 import gql from 'graphql-tag';
 import { css, html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { client } from '@operato/graphql';
+import { customElement, property } from 'lit/decorators.js';
+import { QueryController } from '@operato/graphql';
 import { i18next } from '@operato/i18n';
 import { closePopup } from '@operato/popup';
 import { CommonHeaderStyles, CommonPopupStyles } from '@operato/styles';
@@ -30,6 +30,43 @@ const departmentFragment = gql `
   }
 `;
 let DepartmentSelector = class DepartmentSelector extends LitElement {
+    constructor() {
+        super(...arguments);
+        /*
+         * Every top-level department, each with its subtree (ADR-0190). Keeping records[0] only let an organization with more
+         * than one top-level department pick from the first one alone (OA: five, all top-level).
+         */
+        this.departments = new QueryController(this, gql `
+      query {
+        responses: departmentRoots {
+          total
+          items {
+            ...SubDepartment
+            children {
+              ...SubDepartment
+              children {
+                ...SubDepartment
+                children {
+                  ...SubDepartment
+                  children {
+                    ...SubDepartment
+                    children {
+                      ...SubDepartment
+                      children {
+                        ...SubDepartment
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
+      ${departmentFragment}
+    `);
+    }
     static { this.styles = [
         CommonHeaderStyles,
         CommonPopupStyles,
@@ -65,6 +102,9 @@ let DepartmentSelector = class DepartmentSelector extends LitElement {
       }
     `
     ]; }
+    get roots() {
+        return this.departments.data?.responses?.items;
+    }
     /*
      * ox-tree-vertical prints id-property as each box's header and also matches the selection by it. That is
      * the department code: people read it, and it is unique within a domain (ix_department_1). With the
@@ -108,45 +148,6 @@ let DepartmentSelector = class DepartmentSelector extends LitElement {
         this.confirmCallback && this.confirmCallback(this.value);
         closePopup(this);
     }
-    async firstUpdated() {
-        const response = await client.query({
-            query: gql `
-        query {
-          responses: departmentRoots {
-            total
-            items {
-              ...SubDepartment
-              children {
-                ...SubDepartment
-                children {
-                  ...SubDepartment
-                  children {
-                    ...SubDepartment
-                    children {
-                      ...SubDepartment
-                      children {
-                        ...SubDepartment
-                        children {
-                          ...SubDepartment
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-
-        ${departmentFragment}
-      `
-        });
-        /*
-         * Every top-level department, each with its subtree. This kept records[0] only, so an organization with
-         * more than one top-level department could pick from the first one alone (OA: five, all top-level).
-         */
-        this.roots = response.data.responses.items;
-    }
 };
 __decorate([
     property({ type: Object }),
@@ -154,12 +155,13 @@ __decorate([
 ], DepartmentSelector.prototype, "confirmCallback", void 0);
 __decorate([
     property({ type: Object }),
-    __metadata("design:type", Department)
+    __metadata("design:type", Department
+    /*
+     * Every top-level department, each with its subtree (ADR-0190). Keeping records[0] only let an organization with more
+     * than one top-level department pick from the first one alone (OA: five, all top-level).
+     */
+    )
 ], DepartmentSelector.prototype, "value", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], DepartmentSelector.prototype, "roots", void 0);
 DepartmentSelector = __decorate([
     customElement('department-selector')
 ], DepartmentSelector);

package/dist-client/component/department-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"department-selector.js","sourceRoot":"","sources":["../../client/component/department-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/popup/ox-popup-actions.js'\nimport '@material/web/icon/icon.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/button/filled-button.js'\nimport '@operato/data-tree'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { closePopup } from '@operato/popup'\nimport { CommonHeaderStyles, CommonPopupStyles } from '@operato/styles'\n\nimport { Department } from '../types/department'\n\nconst departmentFragment = gql`\n  fragment SubDepartment on Department {\n    id\n    controlNo\n    name\n    description\n\n    active\n    picture\n\n    updater {\n      id\n      name\n    }\n    updatedAt\n  }\n`\n\n@customElement('department-selector')\nexport class DepartmentSelector extends LitElement {\n  static styles = [\n    CommonHeaderStyles,\n    CommonPopupStyles,\n    css`\n      /*\n       * 단추 줄은 **제품의 팝업 규약**을 쓴다(CommonPopupStyles 의 .buttons).\n       *\n       * 전에는 손으로 만든 .footer 였고 organization 의 팝업 다섯이 그것을 복사해 갖고 있었다.\n       * 규약이 주는 것을 다 놓쳤다 — 팝업 안 단추의 알약 모서리(담는 카드가 둥그니 그 안도\n       * 둥글다), 마우스와 손가락을 가르는 갈래(손가락에서는 카드 아래 폭을 채우는 액션바가 된다),\n       * 단추 높이 통일.\n       *\n       * 단추는 Material 것으로 쓴다. 규약의 마우스 갈래는 **md-*-button 의 토큰으로만** 모양을\n       * 말한다 — 평범한 button 을 두면 모서리가 0 으로 남는다(실측: 알약이어야 할 자리에 0px).\n       * 제품의 다른 팝업도 같은 관용구다(operato-plant 의 maintenance-dialog).\n       *\n       * 「비우기」는 왼쪽에 둔다 — 되돌리는 것이라 저지르는 것들과 같은 자리에 두지 않는다.\n       */\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-surface);\n\n        width: var(--overlay-center-normal-width, 50%);\n        height: var(--overlay-center-normal-height, 50%);\n\n        overflow: auto;\n      }\n\n      ox-tree-vertical {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Object }) confirmCallback?: (selected?: any) => void\n  @property({ type: Object }) value?: Department\n\n  @state() roots?: Department[]\n\n  /*\n   * ox-tree-vertical prints id-property as each box's header and also matches the selection by it. That is\n   * the department code: people read it, and it is unique within a domain (ix_department_1). With the\n   * database id the header was a UUID.\n   */\n  render() {\n    return html`\n      <ox-tree-vertical\n        .data=${this.roots}\n        .selected=${this.value}\n        @select=${e => this.onSelect(e, false)}\n        @select-confirm=${e => this.onSelect(e, true)}\n        id-property=\"controlNo\"\n        label-property=\"name\"\n        description-property=\"description\"\n      ></ox-tree-vertical>\n\n      <ox-popup-actions>\n        <md-text-button slot=\"start\" @click=${this.onEmpty.bind(this)}>\n          ${i18next.t('button.empty', { defaultValue: 'empty' })}\n        </md-text-button>\n        <md-text-button slot=\"cancel\" @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</md-text-button>\n        <md-filled-button slot=\"confirm\" @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm', { defaultValue: 'confirm' })}</md-filled-button>\n      </ox-popup-actions>\n    `\n  }\n\n  onSelect(e: CustomEvent, confirm?: boolean) {\n    this.value = e.detail as Department\n\n    if (confirm) {\n      this.onConfirm()\n    }\n  }\n\n  onEmpty() {\n    this.confirmCallback && this.confirmCallback(null)\n    closePopup(this)\n  }\n\n  onCancel() {\n    closePopup(this)\n  }\n\n  onConfirm() {\n    this.confirmCallback && this.confirmCallback(this.value)\n    closePopup(this)\n  }\n\n  async firstUpdated() {\n    const response = await client.query({\n      query: gql`\n        query {\n          responses: departmentRoots {\n            total\n            items {\n              ...SubDepartment\n              children {\n                ...SubDepartment\n                children {\n                  ...SubDepartment\n                  children {\n                    ...SubDepartment\n                    children {\n                      ...SubDepartment\n                      children {\n                        ...SubDepartment\n                        children {\n                          ...SubDepartment\n                        }\n                      }\n                    }\n                  }\n                }\n              }\n            }\n          }\n        }\n\n        ${departmentFragment}\n      `\n    })\n\n    /*\n     * Every top-level department, each with its subtree. This kept records[0] only, so an organization with\n     * more than one top-level department could pick from the first one alone (OA: five, all top-level).\n     */\n    this.roots = response.data.responses.items\n  }\n}\n"]}
+{"version":3,"file":"department-selector.js","sourceRoot":"","sources":["../../client/component/department-selector.ts"],"names":[],"mappings":";AAAA,OAAO,oCAAoC,CAAA;AAC3C,OAAO,4BAA4B,CAAA;AACnC,OAAO,qCAAqC,CAAA;AAC5C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,oBAAoB,CAAA;AAE3B,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAEvE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAEhD,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;CAgB7B,CAAA;AAGM,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAwCL;;;WAGG;QACK,gBAAW,GAAG,IAAI,eAAe,CACvC,IAAI,EACJ,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA4BC,kBAAkB;KACrB,CACF,CAAA;IAsDH,CAAC;aAjIQ,WAAM,GAAG;QACd,kBAAkB;QAClB,iBAAiB;QACjB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8BF;KACF,AAlCY,CAkCZ;IA2CD,IAAY,KAAK;QACf,OAAO,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,CAAA;IAChD,CAAC;IAED;;;;OAIG;IACH,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,KAAK;oBACN,IAAI,CAAC,KAAK;kBACZ,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,CAAC;0BACpB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC;;;;;;;8CAOP,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;YACzD,OAAO,CAAC,CAAC,CAAC,cAAc,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC;;+CAEjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;kDACnD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,gBAAgB,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;;KAElI,CAAA;IACH,CAAC;IAED,QAAQ,CAAC,CAAc,EAAE,OAAiB;QACxC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAoB,CAAA;QAEnC,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,SAAS,EAAE,CAAA;QAClB,CAAC;IACH,CAAC;IAED,OAAO;QACL,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;QAClD,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IAED,QAAQ;QACN,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxD,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;;AA5F2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2DAA2C;AAC1C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8BAAS,UAAU;IAE9C;;;OAGG;;iDAL2C;AAtCnC,kBAAkB;IAD9B,aAAa,CAAC,qBAAqB,CAAC;GACxB,kBAAkB,CAkI9B","sourcesContent":["import '@operato/popup/ox-popup-actions.js'\nimport '@material/web/icon/icon.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/button/filled-button.js'\nimport '@operato/data-tree'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { QueryController } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { closePopup } from '@operato/popup'\nimport { CommonHeaderStyles, CommonPopupStyles } from '@operato/styles'\n\nimport { Department } from '../types/department'\n\nconst departmentFragment = gql`\n  fragment SubDepartment on Department {\n    id\n    controlNo\n    name\n    description\n\n    active\n    picture\n\n    updater {\n      id\n      name\n    }\n    updatedAt\n  }\n`\n\n@customElement('department-selector')\nexport class DepartmentSelector extends LitElement {\n  static styles = [\n    CommonHeaderStyles,\n    CommonPopupStyles,\n    css`\n      /*\n       * 단추 줄은 **제품의 팝업 규약**을 쓴다(CommonPopupStyles 의 .buttons).\n       *\n       * 전에는 손으로 만든 .footer 였고 organization 의 팝업 다섯이 그것을 복사해 갖고 있었다.\n       * 규약이 주는 것을 다 놓쳤다 — 팝업 안 단추의 알약 모서리(담는 카드가 둥그니 그 안도\n       * 둥글다), 마우스와 손가락을 가르는 갈래(손가락에서는 카드 아래 폭을 채우는 액션바가 된다),\n       * 단추 높이 통일.\n       *\n       * 단추는 Material 것으로 쓴다. 규약의 마우스 갈래는 **md-*-button 의 토큰으로만** 모양을\n       * 말한다 — 평범한 button 을 두면 모서리가 0 으로 남는다(실측: 알약이어야 할 자리에 0px).\n       * 제품의 다른 팝업도 같은 관용구다(operato-plant 의 maintenance-dialog).\n       *\n       * 「비우기」는 왼쪽에 둔다 — 되돌리는 것이라 저지르는 것들과 같은 자리에 두지 않는다.\n       */\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-surface);\n\n        width: var(--overlay-center-normal-width, 50%);\n        height: var(--overlay-center-normal-height, 50%);\n\n        overflow: auto;\n      }\n\n      ox-tree-vertical {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Object }) confirmCallback?: (selected?: any) => void\n  @property({ type: Object }) value?: Department\n\n  /*\n   * Every top-level department, each with its subtree (ADR-0190). Keeping records[0] only let an organization with more\n   * than one top-level department pick from the first one alone (OA: five, all top-level).\n   */\n  private departments = new QueryController(\n    this,\n    gql`\n      query {\n        responses: departmentRoots {\n          total\n          items {\n            ...SubDepartment\n            children {\n              ...SubDepartment\n              children {\n                ...SubDepartment\n                children {\n                  ...SubDepartment\n                  children {\n                    ...SubDepartment\n                    children {\n                      ...SubDepartment\n                      children {\n                        ...SubDepartment\n                      }\n                    }\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n\n      ${departmentFragment}\n    `\n  )\n\n  private get roots(): Department[] | undefined {\n    return this.departments.data?.responses?.items\n  }\n\n  /*\n   * ox-tree-vertical prints id-property as each box's header and also matches the selection by it. That is\n   * the department code: people read it, and it is unique within a domain (ix_department_1). With the\n   * database id the header was a UUID.\n   */\n  render() {\n    return html`\n      <ox-tree-vertical\n        .data=${this.roots}\n        .selected=${this.value}\n        @select=${e => this.onSelect(e, false)}\n        @select-confirm=${e => this.onSelect(e, true)}\n        id-property=\"controlNo\"\n        label-property=\"name\"\n        description-property=\"description\"\n      ></ox-tree-vertical>\n\n      <ox-popup-actions>\n        <md-text-button slot=\"start\" @click=${this.onEmpty.bind(this)}>\n          ${i18next.t('button.empty', { defaultValue: 'empty' })}\n        </md-text-button>\n        <md-text-button slot=\"cancel\" @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</md-text-button>\n        <md-filled-button slot=\"confirm\" @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm', { defaultValue: 'confirm' })}</md-filled-button>\n      </ox-popup-actions>\n    `\n  }\n\n  onSelect(e: CustomEvent, confirm?: boolean) {\n    this.value = e.detail as Department\n\n    if (confirm) {\n      this.onConfirm()\n    }\n  }\n\n  onEmpty() {\n    this.confirmCallback && this.confirmCallback(null)\n    closePopup(this)\n  }\n\n  onCancel() {\n    closePopup(this)\n  }\n\n  onConfirm() {\n    this.confirmCallback && this.confirmCallback(this.value)\n    closePopup(this)\n  }\n}\n"]}

package/dist-client/entity360/department-360.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { type Entity360DoorAnswer, type Entity360Subject } from '@operato/layout';
+import { type Entity360Subject } from '@operato/layout';
 type Department = {
     id: string;
     controlNo?: string;
@@ -20,9 +20,8 @@ export declare function registerDepartmentKind(): void;
 export declare class DepartmentOverviewSection extends LitElement {
     static styles: import("lit").CSSResult;
     subject?: Entity360Subject;
-    answer?: Entity360DoorAnswer<Department | undefined>;
-    updated(changed: Map<string, unknown>): void;
-    private read;
+    private department;
+    get answer(): import("@operato/layout").Entity360DoorAnswer<Department | undefined> | undefined;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

package/dist-client/entity360/department-360.js

@@ -1,10 +1,10 @@
 import { __decorate, __metadata } from "tslib";
 import gql from 'graphql-tag';
 import { css, html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { client } from '@operato/graphql';
+import { customElement, property } from 'lit/decorators.js';
+import { QueryController } from '@operato/graphql';
 import { i18next } from '@operato/i18n';
-import { entity360Name, readEntity360Door, registerEntity360Kind, registerEntity360Section } from '@operato/layout';
+import { entity360Answer, entity360Name, registerEntity360Kind, registerEntity360Section } from '@operato/layout';
 /** A department is a shared organizational fact: it can open from a person's membership and from generic object cells. */
 export function registerDepartmentKind() {
     registerEntity360Kind({
@@ -20,6 +20,29 @@ export function registerDepartmentKind() {
     });
 }
 let DepartmentOverviewSection = class DepartmentOverviewSection extends LitElement {
+    constructor() {
+        super(...arguments);
+        /* The department of the subject shown (ADR-0190). */
+        this.department = new QueryController(this, gql `
+      query ($id: String!) {
+        department(id: $id) {
+          id
+          controlNo
+          name
+          description
+          active
+          parent {
+            id
+            __typename
+            name
+          }
+          manager {
+            name
+          }
+        }
+      }
+    `, { variables: () => (this.subject?.id ? { id: this.subject.id } : undefined) });
+    }
     static { this.styles = css `
     dl {
       margin: 0;
@@ -37,40 +60,8 @@ let DepartmentOverviewSection = class DepartmentOverviewSection extends LitEleme
       overflow-wrap: anywhere;
     }
   `; }
-    updated(changed) {
-        if (changed.has('subject'))
-            this.read();
-    }
-    async read() {
-        const id = this.subject?.id;
-        this.answer = undefined;
-        if (!id)
-            return;
-        const response = await client.query({
-            query: gql `
-        query ($id: String!) {
-          department(id: $id) {
-            id
-            controlNo
-            name
-            description
-            active
-            parent {
-              id
-              __typename
-              name
-            }
-            manager {
-              name
-            }
-          }
-        }
-      `,
-            variables: { id }
-        });
-        if (this.subject?.id !== id)
-            return;
-        this.answer = readEntity360Door(response, data => data?.department);
+    get answer() {
+        return entity360Answer(this.department, data => data?.department);
     }
     render() {
         const answer = this.answer;
@@ -100,10 +91,6 @@ __decorate([
     property({ attribute: false }),
     __metadata("design:type", Object)
 ], DepartmentOverviewSection.prototype, "subject", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], DepartmentOverviewSection.prototype, "answer", void 0);
 DepartmentOverviewSection = __decorate([
     customElement('department-overview-section')
 ], DepartmentOverviewSection);

package/dist-client/entity360/department-360.js.map

@@ -1 +1 @@
-{"version":3,"file":"department-360.js","sourceRoot":"","sources":["../../client/entity360/department-360.ts"],"names":[],"mappings":"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","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport {\n  entity360Name,\n  readEntity360Door,\n  registerEntity360Kind,\n  registerEntity360Section,\n  type Entity360DoorAnswer,\n  type Entity360Subject\n} from '@operato/layout'\n\ntype Department = {\n  id: string\n  controlNo?: string\n  name?: string\n  description?: string\n  active?: boolean\n  parent?: { id: string; name?: string; __typename?: string }\n  manager?: { name?: string }\n}\n\n/** A department is a shared organizational fact: it can open from a person's membership and from generic object cells. */\nexport function registerDepartmentKind() {\n  registerEntity360Kind({\n    kind: 'department',\n    typenames: ['Department'],\n    title: ({ value }) => value.name || value.controlNo || '',\n    context: ({ value }) => value.controlNo || ''\n  })\n\n  registerEntity360Section('department', {\n    name: 'overview',\n    order: 10,\n    render: subject => html`<department-overview-section .subject=${subject}></department-overview-section>`\n  })\n}\n\n@customElement('department-overview-section')\nexport class DepartmentOverviewSection extends LitElement {\n  static styles = css`\n    dl {\n      margin: 0;\n      display: grid;\n      grid-template-columns: max-content 1fr;\n      gap: 4px 12px;\n      font: 13px/1.5 sans-serif;\n    }\n    dt {\n      color: var(--md-sys-color-on-surface-variant);\n    }\n    dd {\n      margin: 0;\n      color: var(--md-sys-color-on-surface);\n      overflow-wrap: anywhere;\n    }\n  `\n\n  @property({ attribute: false }) subject?: Entity360Subject\n  @state() answer?: Entity360DoorAnswer<Department | undefined>\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has('subject')) this.read()\n  }\n\n  private async read() {\n    const id = this.subject?.id\n    this.answer = undefined\n    if (!id) return\n\n    const response = await client.query({\n      query: gql`\n        query ($id: String!) {\n          department(id: $id) {\n            id\n            controlNo\n            name\n            description\n            active\n            parent {\n              id\n              __typename\n              name\n            }\n            manager {\n              name\n            }\n          }\n        }\n      `,\n      variables: { id }\n    })\n\n    if (this.subject?.id !== id) return\n    this.answer = readEntity360Door(response, data => data?.department)\n  }\n\n  render() {\n    const answer = this.answer\n    const department = answer?.data\n    const none = i18next.t('text.entity360-none', { defaultValue: 'none' })\n\n    return html`<ox-entity360-section\n      .heading=${i18next.t('title.department list', { defaultValue: 'department' })}\n      .state=${answer?.state ?? 'loading'}\n      .message=${answer?.message ?? ''}\n    >\n      ${\n        department\n          ? html`<dl>\n              <dt>${i18next.t('label.control-no')}</dt>\n              <dd>${department.controlNo || none}</dd>\n              <dt>${i18next.t('label.description')}</dt>\n              <dd>${department.description || none}</dd>\n              <dt>${i18next.t('label.department')}</dt>\n              <dd>${department.parent ? entity360Name(department.parent, department.parent.name || none) : none}</dd>\n              <dt>${i18next.t('label.manager')}</dt>\n              <dd>${department.manager?.name || none}</dd>\n            </dl>`\n          : ''\n      }\n    </ox-entity360-section>`\n  }\n}\n"]}
+{"version":3,"file":"department-360.js","sourceRoot":"","sources":["../../client/entity360/department-360.ts"],"names":[],"mappings":"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","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { QueryController } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { entity360Answer, entity360Name, registerEntity360Kind, registerEntity360Section, type Entity360Subject } from '@operato/layout'\n\ntype Department = {\n  id: string\n  controlNo?: string\n  name?: string\n  description?: string\n  active?: boolean\n  parent?: { id: string; name?: string; __typename?: string }\n  manager?: { name?: string }\n}\n\n/** A department is a shared organizational fact: it can open from a person's membership and from generic object cells. */\nexport function registerDepartmentKind() {\n  registerEntity360Kind({\n    kind: 'department',\n    typenames: ['Department'],\n    title: ({ value }) => value.name || value.controlNo || '',\n    context: ({ value }) => value.controlNo || ''\n  })\n\n  registerEntity360Section('department', {\n    name: 'overview',\n    order: 10,\n    render: subject => html`<department-overview-section .subject=${subject}></department-overview-section>`\n  })\n}\n\n@customElement('department-overview-section')\nexport class DepartmentOverviewSection extends LitElement {\n  static styles = css`\n    dl {\n      margin: 0;\n      display: grid;\n      grid-template-columns: max-content 1fr;\n      gap: 4px 12px;\n      font: 13px/1.5 sans-serif;\n    }\n    dt {\n      color: var(--md-sys-color-on-surface-variant);\n    }\n    dd {\n      margin: 0;\n      color: var(--md-sys-color-on-surface);\n      overflow-wrap: anywhere;\n    }\n  `\n\n  @property({ attribute: false }) subject?: Entity360Subject\n\n  /* The department of the subject shown (ADR-0190). */\n  private department = new QueryController(\n    this,\n    gql`\n      query ($id: String!) {\n        department(id: $id) {\n          id\n          controlNo\n          name\n          description\n          active\n          parent {\n            id\n            __typename\n            name\n          }\n          manager {\n            name\n          }\n        }\n      }\n    `,\n    { variables: () => (this.subject?.id ? { id: this.subject.id } : undefined) }\n  )\n\n  get answer() {\n    return entity360Answer<Department | undefined>(this.department, data => data?.department)\n  }\n\n  render() {\n    const answer = this.answer\n    const department = answer?.data\n    const none = i18next.t('text.entity360-none', { defaultValue: 'none' })\n\n    return html`<ox-entity360-section\n      .heading=${i18next.t('title.department list', { defaultValue: 'department' })}\n      .state=${answer?.state ?? 'loading'}\n      .message=${answer?.message ?? ''}\n    >\n      ${\n        department\n          ? html`<dl>\n              <dt>${i18next.t('label.control-no')}</dt>\n              <dd>${department.controlNo || none}</dd>\n              <dt>${i18next.t('label.description')}</dt>\n              <dd>${department.description || none}</dd>\n              <dt>${i18next.t('label.department')}</dt>\n              <dd>${department.parent ? entity360Name(department.parent, department.parent.name || none) : none}</dd>\n              <dt>${i18next.t('label.manager')}</dt>\n              <dd>${department.manager?.name || none}</dd>\n            </dl>`\n          : ''\n      }\n    </ox-entity360-section>`\n  }\n}\n"]}

package/dist-client/entity360/person-membership-section.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { type Entity360DoorAnswer, type Entity360Subject } from '@operato/layout';
+import { type Entity360Subject } from '@operato/layout';
 /**
  * The person 360's membership section (ADR-0067, design/ui/entity360-person.md §3): department,
  * position and supervisor, from the person's employee records in this domain.
@@ -25,9 +25,8 @@ export declare function registerPersonMembershipSection(): void;
 export declare class PersonMembershipSection extends LitElement {
     static styles: import("lit").CSSResult;
     subject?: Entity360Subject;
-    answer?: Entity360DoorAnswer<Membership[]>;
-    updated(changed: Map<string, unknown>): void;
-    private read;
+    private memberships;
+    get answer(): import("@operato/layout").Entity360DoorAnswer<Membership[]> | undefined;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};