@things-factory/auth-ui 10.1.4 → 10.1.7

package/dist-client/pages/role/role-list-page.js

@@ -0,0 +1,838 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/data-grist';
+import '@operato/oops/ox-oops-note.js';
+import gql from 'graphql-tag';
+import { css, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { client, gqlContext } from '@operato/graphql';
+import { openPopup } from '@operato/layout';
+import { OxPrompt } from '@operato/popup/ox-prompt.js';
+import { i18next, localize } from '@operato/i18n';
+import { p13n } from '@operato/p13n';
+import { InheritedValueType, navigate, PageView } from '@operato/shell';
+import { CommonGristStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
+import { isMobileDevice } from '@operato/utils';
+import { getDomain } from '@things-factory/auth-base/dist-client';
+/**
+ * 역할 목록 — **보이는 것과 고칠 수 있는 것을 가른다.**
+ *
+ * ── 옛 화면이 하던 것 (`pages/role/role-management.ts`) ──────────────────────
+ * `quick-find-list` 안에 역할을 늘어놓고, 펼치면 그 안에 이름 입력칸과 84줄의 권한 체크박스가
+ * 함께 있었다. 그 구조에서 셋이 났다.
+ *
+ *  ① 이름 입력이 매 글자마다 페이지로 올라가 **모든** 편집기에 공유됐다 — A 를 고치고 B 를
+ *     저장하면 B 의 이름이 A 가 됐다. 지금은 이름·설명을 격자에서 고친다.
+ *  ② 목록에 권한이 하나도 안 보였다. 「이 역할이 무엇을 여나」를 알려면 펼쳐야 했다.
+ *  ③ 한도도 쪽 나누기도 없었다.
+ *
+ * ── 상속이 이 화면의 중심이다 ───────────────────────────────────────────────
+ * 목록은 부모 도메인의 역할까지 보여 준다 — **부여할 수 있는 범위가 그것**이기 때문이다.
+ * 그런데 그 행은 여기서 못 고친다(`updateRole` 이 `domain.id` 하나로 좁혀 찾는다).
+ *
+ * 전에는 `Include` 로 열어서 **못 고치는 9행이 고칠 수 있는 2행 앞에 깔렸다**(UX 실측).
+ * 지금은 「우리 역할」로 열고, 세 묶음의 수를 함께 적어 **상속이 있다는 사실 자체는 남긴다.**
+ * 편집도 `editable` 함수로 상속 행에서 닫고, 삭제도 상속 행을 안 보낸다.
+ *
+ * ── 권한은 수만 낸다 ────────────────────────────────────────────────────────
+ * 전에는 `activity 쓰기 · activity-instance 쓰기·읽기` 식으로 잘린 코드 용어를 그렸고, 그것을
+ * 그리려고 권한 **행**을 받았다(UX 실측 5,731 bytes · 69ms 대 518 bytes · 7ms). 지금은
+ * `privilegeCount` 하나를 받는다. 권한 편집으로 가는 문은 **버튼 gutter 칸**이 진다 —
+ * 눌리는 숫자는 손잡이로 보이지 않는다.
+ */
+const RoleListPageBase = p13n(localize(i18next)(PageView));
+let RoleListPage = class RoleListPage extends RoleListPageBase {
+    constructor() {
+        super(...arguments);
+        this.mode = isMobileDevice() ? 'LIST' : 'GRID';
+        /* 읽는 중 · 못 읽었다 · 읽었는데 없다 를 가른다. */
+        this.fetchState = 'loading';
+        this.total = 0;
+        this.filtered = false;
+        /*
+         * 지금 어느 도메인에 있나.
+         *
+         * 목록은 상속으로 부모 도메인의 역할까지 보여 준다 — 실제로 부여할 수 있는 범위가 그것이기
+         * 때문이다. 그런데 **그 행은 여기서 못 고친다**(`updateRole`·`updateMultipleRole` 이
+         * `domain.id` 하나로 좁혀 찾는다). 그래서 편집을 열어 두면 안 된다.
+         *
+         * 프로필의 `domain` 에는 `id` 가 없어서(`auth-private-process-router.ts`) `subdomain` 으로
+         * 견준다 — 두 도메인이 같은 subdomain 을 가질 수 없으므로 id 와 같은 답이다.
+         */
+        this.mySubdomain = '';
+        /*
+         * **어느 묶음을 보고 있나 — 기본값은 「우리 역할」이다.**
+         *
+         * 전에는 `Include` 로 열었다. 그러면 처음 화면에 **못 고치는 행 9개가 앞에 깔린다**
+         * (UX 실측: miratek 2 · system 9). `None` 으로 열면 처음 화면이 2행이고 **그 2행이 전부
+         * 고칠 수 있는 행**이다.
+         *
+         * 세 묶음은 서버에 이미 있다(`InheritedValueType`). 새로 만들 것이 없다.
+         */
+        this.scope = InheritedValueType.None;
+        /**
+         * 묶음마다 몇 건인가.
+         *
+         * 수를 함께 적는 이유는 **상속이 있다는 사실 자체가 보이게** 하는 것이다. 기본값을 「우리
+         * 역할」로 좁혀 놓으면, 수가 없으면 상속 9건이 존재하는지조차 모른다.
+         *
+         * `undefined` 는 「아직 못 셌다」다 — 0 으로 메우면 「없다」와 같아 보인다.
+         */
+        this.counts = {};
+    }
+    static { this.styles = [
+        ScrollbarStyles,
+        CommonGristStyles,
+        CommonHeaderStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+        position: relative;
+      }
+
+      ox-grist {
+        flex: 1;
+        min-height: 0;
+      }
+
+      /* 요약 배지 — 색은 짝으로, 그리고 「무엇이 나를 기다리나」에만 쓴다. */
+      .badge {
+        display: inline-block;
+        padding: 2px 8px;
+        border-radius: var(--md-sys-shape-corner-small, 6px);
+        font-size: 0.78rem;
+        white-space: nowrap;
+        background-color: var(--md-sys-color-surface-variant);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      .badge[attention] {
+        background-color: var(--md-sys-color-error-container);
+        color: var(--md-sys-color-on-error-container);
+      }
+      /* 「우리」는 기본 상태다 — 색을 쓰면 색이 아무것도 말하지 않게 된다. */
+      .badge[quiet] {
+        background-color: transparent;
+        color: var(--md-sys-color-outline);
+      }
+
+      /*
+        ── 세 묶음 ────────────────────────────────────────────────────────────
+        고른 것은 면으로 말한다. 글자색만 바꾸면 야간에 안 보인다.
+      */
+      [scopes] {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      button[scope] {
+        display: inline-flex;
+        align-items: baseline;
+        gap: 5px;
+        padding: 5px 12px;
+        font: var(--label-font, inherit);
+        font-size: 0.82rem;
+        color: var(--md-sys-color-on-surface-variant);
+        background-color: transparent;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: var(--md-sys-shape-corner-full, 999px);
+        cursor: pointer;
+        white-space: nowrap;
+      }
+
+      button[scope]:hover {
+        background-color: var(--md-sys-color-surface-variant);
+      }
+
+      button[scope][active] {
+        color: var(--md-sys-color-on-secondary-container);
+        background-color: var(--md-sys-color-secondary-container);
+        border-color: var(--md-sys-color-secondary-container);
+      }
+
+      button[scope] [count] {
+        font-size: 0.78rem;
+        color: var(--md-sys-color-outline);
+      }
+
+      button[scope][active] [count] {
+        color: var(--md-sys-color-on-secondary-container);
+      }
+
+      /*
+       * 새 역할 단추 — **옆에 선 것들을 따라간다.**
+       *
+       * 이 줄에는 알약 범위 단추 셋과 검색이 서 있다. 그 사이에서 이것만 네모난 기본 단추면
+       * 같은 줄의 문법이 깨진다. 범위 단추와 같은 모서리·같은 테두리를 쓰되, **여는 일**이므로
+       * 채워서 한 단 앞으로 낸다 — 나머지는 거르는 일이고 이것만 만드는 일이다.
+       */
+      button[add] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 5px 10px;
+        color: var(--md-sys-color-on-secondary-container);
+        background-color: var(--md-sys-color-secondary-container);
+        border: 1px solid transparent;
+        border-radius: var(--md-sys-shape-corner-full, 999px);
+        cursor: pointer;
+        margin-left: auto;
+      }
+
+      button[add]:hover {
+        background-color: var(--md-sys-color-secondary);
+        color: var(--md-sys-color-on-secondary);
+      }
+
+      button[add] md-icon {
+        --md-icon-size: 18px;
+      }
+
+      ox-oops-note[note] {
+        position: absolute;
+        inset: 0;
+        z-index: 5;
+        background-color: var(--md-sys-color-surface);
+      }
+    `
+    ]; }
+    /**
+     * 저장과 삭제를 **툴바**에 둔다.
+     *
+     * 격자에서 고치는 화면들의 관례다(`fiscal-quarter-list-page` 외). 격자 안 편집은 여러 줄을
+     * 한꺼번에 고치므로, 줄마다 저장 단추를 두면 어디를 눌러야 하는지가 사라진다.
+     */
+    /**
+     * 찾기는 **제목 줄**에 선다 — 셸이 그 자리를 모든 화면에 같은 모양으로 둔다.
+     *
+     * 이 페이지는 한동안 `ox-filters-form` 을 헤드룸의 칩 줄에 **직접** 끼워 넣고 있었다. 그래서
+     * 돋보기가 범위 칩과 만들기 단추 사이에 끼어, 같은 앱의 다른 목록과 찾기 자리가 달랐다
+     * (`env-var-list-page` 외 auth-ui 목록 다섯이 전부 아래 모양이다).
+     *
+     * 둘은 대안이 아니라 **다른 것**이다 — `search` 는 목록 전체를 훑는 글자 찾기이고,
+     * `filter` 는 칸별 조건 폼을 접었다 펴는 것이다. 표준 화면은 둘 다 선언한다.
+     */
+    get context() {
+        return {
+            title: i18next.t('text.role_management'),
+            help: 'auth/roles',
+            search: {
+                handler: (search) => {
+                    this.grist.searchText = search;
+                },
+                value: this.grist?.searchText || ''
+            },
+            filter: {
+                handler: () => {
+                    this.grist.toggleHeadroom();
+                }
+            },
+            actions: [
+                { title: i18next.t('button.save'), action: this.onSaveGrid.bind(this) },
+                { title: i18next.t('button.delete'), action: this.onDeleteGrid.bind(this) }
+            ]
+        };
+    }
+    render() {
+        return html `
+      <ox-grist
+        .mode=${this.mode}
+        .config=${this.config}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')}
+      >
+        <div slot="headroom" class="header">
+          <div class="filters">
+            ${this.renderScopes()}
+
+            <!-- 찾기는 제목 줄이 갖는다(context.search). 폼이 자기 검색칸을 또 그리면 둘이 된다. -->
+            <ox-filters-form without-search></ox-filters-form>
+
+            <!--
+              여기 ox-record-creator 가 있었다 — 목록에 빈 줄을 만들고 이름을 치게 하는
+              관례(24 파일)다. 걷어낸 이유는 openCreate 의 머리말에 있다.
+            -->
+            <button add @click=${() => this.openCreate()} title=${i18next.t('button.create')}>
+              <md-icon>add</md-icon>
+            </button>
+          </div>
+          <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
+        </div>
+
+        <ox-grist-personalizer slot="setting"></ox-grist-personalizer>
+      </ox-grist>
+
+      ${this.renderNote()}
+    `;
+    }
+    /**
+     * 세 묶음.
+     *
+     * **수를 함께 적는 것이 이 부품의 이유다.** 기본값을 「우리 역할」로 좁혀 두면 처음 화면이
+     * 깨끗한 대신 **상속 9건이 있다는 사실이 사라진다.** 수가 그것을 되돌려 놓는다.
+     *
+     * 아직 못 센 묶음은 수를 **안 그린다** — 0 으로 메우면 「없다」와 같아 보인다.
+     */
+    renderScopes() {
+        const scopes = [
+            [InheritedValueType.None, 'label.ours'],
+            [InheritedValueType.Only, 'label.inherited'],
+            [InheritedValueType.Include, 'label.all']
+        ];
+        return html `
+      <div scopes>
+        ${scopes.map(([scope, key]) => html `
+            <button scope ?active=${this.scope === scope} @click=${() => this.onScope(scope)}>
+              ${i18next.t(key)}
+              ${this.counts[scope] === undefined ? nothing : html `<span count>${this.counts[scope]}</span>`}
+            </button>
+          `)}
+      </div>
+    `;
+    }
+    onScope(scope) {
+        if (this.scope === scope) {
+            return;
+        }
+        this.scope = scope;
+        this.grist.fetch();
+    }
+    /**
+     * 세 묶음의 건수.
+     *
+     * 세 번 묻는다. 한 번에 셋을 세는 질의가 서버에 없고, 각각 `total` 만 받으므로 가볍다
+     * (UX 실측 158·566·684 bytes). 실패하면 **수를 안 그린다** — 틀린 수를 그리는 것보다
+     * 없는 것이 낫다.
+     */
+    async countScopes() {
+        const scopes = [InheritedValueType.None, InheritedValueType.Only, InheritedValueType.Include];
+        const counted = await Promise.all(scopes.map(async (scope) => {
+            const response = await client.query({
+                query: gql `
+            query ($inherited: InheritedValueType) {
+              roles(inherited: $inherited, pagination: { page: 1, limit: 1 }) {
+                total
+              }
+            }
+          `,
+                variables: { inherited: scope }
+            });
+            return [scope, response.errors?.length ? undefined : response.data?.roles?.total];
+        }));
+        this.counts = counted.reduce((counts, [scope, total]) => {
+            if (total !== undefined) {
+                counts[scope] = total;
+            }
+            return counts;
+        }, {});
+    }
+    /**
+     * 목록 위에 겹쳐 그린다 — 격자를 떼면 다시 읽을 길이 없어진다.
+     *
+     * **아무 역할도 없는 것이 이 화면의 가장 중요한 자리다.** 새 도메인은 여기서 시작하고,
+     * 역할이 없으면 초대한 사람은 로그인해도 볼 화면이 하나도 없다. 그래서 그 사실을 말한다.
+     */
+    renderNote() {
+        if (this.fetchState === 'loading') {
+            return nothing;
+        }
+        if (this.fetchState === 'failed') {
+            return html `<ox-oops-note
+        note
+        icon="error_outline"
+        title=${i18next.t('text.failed to fetch')}
+        description=${i18next.t('text.please try again')}
+      ></ox-oops-note>`;
+        }
+        if (this.total === 0 && !this.filtered) {
+            return html `<ox-oops-note
+        note
+        icon="badge"
+        title=${i18next.t('text.no role yet')}
+        description=${i18next.t('text.without a role they see nothing')}
+      ></ox-oops-note>`;
+        }
+        return nothing;
+    }
+    /**
+     * 상속된 역할인가 — **격자의 편집 가드가 이것을 본다.**
+     *
+     * `mySubdomain` 을 아직 못 읽었으면 **거짓을 돌려주지 않고 상속으로 본다.** 「모른다」를
+     * 「내 것이다」로 바꾸면 그 순간 못 고치는 행이 열리고, 사람이 타이핑해 저장한 뒤에 서버가
+     * 거절한다. 모를 때는 잠가 두는 쪽이 안전하다.
+     */
+    isInherited(record) {
+        if (!this.mySubdomain) {
+            return true;
+        }
+        const subdomain = record?.domain?.subdomain;
+        return Boolean(subdomain) && subdomain !== this.mySubdomain;
+    }
+    /**
+     * 출처 한 칸.
+     *
+     * 「우리」는 조용히 둔다 — 기본 상태에 색을 쓰면 색이 아무것도 말하지 않게 된다.
+     * 상속은 **어느 도메인에서 왔는지 함께 적는다.** 「상속」만 적으면 관리자가 어디로 가야
+     * 하는지 모른다.
+     */
+    sourceCell(record) {
+        if (!this.isInherited(record)) {
+            return html `<span class="badge" quiet>${i18next.t('label.ours')}</span>`;
+        }
+        const from = record?.domain?.name || record?.domain?.subdomain || '';
+        return html `<span class="badge" title=${i18next.t('text.role belongs to x domain and is edited there', { x: from })}
+      >${i18next.t('label.inherited')}${from ? ` · ${from}` : ''}</span
+    >`;
+    }
+    async pageInitialized() {
+        this.mySubdomain = (await getDomain())?.subdomain || '';
+        this.countScopes();
+        this.config = {
+            /*
+             * **두 모드가 다른 말을 하지 않게 한다.**
+             *
+             * ⚠ 여기가 `summary`·`domain` 을 가리킨 채로 남아 있었다 — 컬럼을 `privilegeCount`·
+             * `source` 로 갈았는데 이 설정을 안 고쳤다. 그래서 **LIST 모드에서는 권한 수도 출처도
+             * 아예 안 그려졌다.** 이름이 틀려도 격자가 조용히 넘어가므로 빌드도 시험도 못 잡는다.
+             *
+             * 그리고 이 앱이 실제로 LIST 로 연다(`isMobileDevice()` 또는 사람마다 기억된 개인 설정).
+             * GRID 만 보고 만들면 그 사람들은 내가 만든 칸을 한 번도 못 본다.
+             */
+            list: {
+                fields: ['name', 'description'],
+                details: ['privilegeCount', 'source']
+            },
+            columns: [
+                { type: 'gutter', gutterName: 'sequence', fixed: true },
+                {
+                    /*
+                     * **권한 편집으로 가는 문.**
+                     *
+                     * `gutterName: 'button'` 이 이 저장소의 관례다 — 68 파일 · 104 자리
+                     * (`employee-list-page.ts:110-124` 가 같은 모양). `header` 에 이름이 붙은 아이콘 칸은
+                     * **손잡이로 보인다.** 그것이 「권한 편집 방법을 모르겠다」를 고치는 자리다.
+                     *
+                     * 행 전체에 클릭을 두지 않는 이유는 그대로다 — 이름을 고치려 누른 것이 화면을
+                     * 떠나면 안 된다.
+                     *
+                     * ── 상속 행에서도 버튼은 남긴다 ─────────────────────────────────────
+                     * **읽는 것은 정당하다.** 상속 역할이 무엇을 여는지 보는 것은 막을 이유가 없고,
+                     * 오히려 「우리 역할로 복사」를 하려면 먼저 봐야 한다. `icon`·`title` 이 record 를
+                     * 받으므로 그 구분이 여기 실린다 — 글자만 「보기만」으로 바뀐다.
+                     */
+                    type: 'gutter',
+                    gutterName: 'button',
+                    header: i18next.t('field.privileges'),
+                    /*
+                     * ⚠ **아직 저장 안 된 빈 줄에는 내주지 않는다.** 격자가 데이터 2행 아래에 추가용 빈
+                     * 줄을 하나 더 그리는데, 거기에도 버튼이 나왔다. 눌러도 `record.id` 가 없어 아무 일이
+                     * 없다 — **조용한 무동작 단추**다.
+                     *
+                     * `employee-list-page` 가 `icon` 에서 `''` 를 돌려주는 이유가 이것이었다. 모양만
+                     * 베끼고 그 가드를 안 가져왔다.
+                     */
+                    icon: (record) => (record?.id ? 'key' : ''),
+                    iconOnly: false,
+                    title: (record) => !record?.id
+                        ? ''
+                        : this.isInherited(record)
+                            ? i18next.t('text.view only')
+                            : i18next.t('button.edit privileges'),
+                    width: 92,
+                    handlers: {
+                        click: (_columns, _data, _column, record) => {
+                            if (record?.id) {
+                                navigate(`role-privileges/${record.id}`);
+                            }
+                        }
+                    }
+                },
+                {
+                    type: 'string',
+                    name: 'name',
+                    header: i18next.t('field.name'),
+                    /*
+                     * **격자 안에서 고친다.** 이 저장소의 관례가 그렇고(`editable` 139 파일 대
+                     * `openPopup` 96 파일), 옛 화면이 이름을 팝업에 두었다가 A 의 이름을 B 에 저장했다.
+                     *
+                     * ⚠ **상속된 행은 열지 않는다.** `editable` 이 함수를 받는다
+                     * (`data-grist` types.ts:458, data-grid-body.js:530·861 이 그렇게 부른다). 이것이
+                     * 없으면 부모 도메인 역할에 타이핑해 저장할 수 있고, 서버가 그때 거절한다.
+                     */
+                    record: { align: 'left', editable: (_v, _c, record) => !this.isInherited(record) },
+                    filter: 'search',
+                    sortable: true,
+                    width: 160
+                },
+                {
+                    type: 'string',
+                    name: 'description',
+                    header: i18next.t('field.description'),
+                    record: { align: 'left', editable: (_v, _c, record) => !this.isInherited(record) },
+                    filter: 'search',
+                    sortable: true,
+                    width: 220
+                },
+                {
+                    /*
+                     * **이 역할이 여는 것이 몇 개인가.** 읽는 값이고, 누르는 자리가 아니다.
+                     *
+                     * 전에는 여기에 `activity 쓰기 · activity-instance 쓰기·읽기 · 3개 더` 식으로 잘린
+                     * 코드 용어를 그렸다. 그것을 그리려고 목록이 권한 **행**을 받았다.
+                     *
+                     * ```
+                     * [UX 실측] roles(limit:20) 권한 포함  5,731 bytes · 69ms
+                     * [UX 실측] 권한 없이                    518 bytes ·  7ms      → 11.1배 · 10배
+                     * ```
+                     *
+                     * 수는 잘린 문자열이 못 하던 것을 한다 — 「더 있다」가 아니라 **얼마인지** 말하고,
+                     * `0` 이면 아직 아무것도 안 열린 역할이라는 것이 한눈에 보인다.
+                     *
+                     * ⚠ **여기에 클릭을 얹지 않는다.** 한때 그렇게 뒀는데, 읽는 값과 누르는 자리가 한 칸에
+                     * 들어간다. 그리고 사용자 평가의 첫 줄이 「권한 편집 방법을 모르겠다」였는데 —
+                     * **눌리는 숫자는 보이는 손잡이가 아니다.** 문은 아래 버튼 칸이 진다.
+                     */
+                    type: 'string',
+                    name: 'privilegeCount',
+                    header: i18next.t('field.privileges'),
+                    record: { align: 'center', renderer: privilegeCountCell },
+                    width: 110
+                },
+                {
+                    /*
+                     * **출처 — 여기가 「보이는 것과 고칠 수 있는 것」을 가른다.**
+                     *
+                     * 전에는 도메인 이름을 날값으로 냈다(`SYSTEM` · `MIRATEK`). 그건 구분이 아니다 —
+                     * 읽는 사람이 자기 도메인 이름을 외우고 있어야 한다. 지금은 「우리」와
+                     * 「상속 · SYSTEM」 으로 말한다.
+                     *
+                     * ⚠ `classifier` 로 행 전체를 물들이지 않는다. 선례들이 색을 `'#8B0000'` 처럼 박아
+                     * 두었고(dataset 5곳), 그 규약(`emphasized: [배경, 글자]`)이 `var(...)` 를 받는지도
+                     * 확인되지 않았다. 그리고 `emphasized` 는 **강조**하는 장치인데 여기서 필요한 것은
+                     * 그 반대다 — 11행 중 9행을 강조하면 강조가 아니다. 그래서 이 칸이 진다.
+                     */
+                    type: 'string',
+                    name: 'source',
+                    header: i18next.t('field.source'),
+                    record: { align: 'center', renderer: (_v, _c, record) => this.sourceCell(record) },
+                    width: 150
+                },
+                {
+                    type: 'datetime',
+                    name: 'updatedAt',
+                    header: i18next.t('field.updated_at'),
+                    record: { align: 'center' },
+                    sortable: true,
+                    width: 160
+                }
+            ],
+            rows: {
+                selectable: { multiple: true }
+            },
+            sorters: [{ name: 'name' }]
+        };
+    }
+    async pageUpdated(_changes, _lifecycle) {
+        if (this.active) {
+            await this.updateComplete;
+            this.grist.fetch();
+        }
+    }
+    /**
+     * 역할을 가져온다 — **권한 행은 받지 않는다.**
+     *
+     * 전에는 `privileges { id name category }` 를 함께 물었다. 그것으로 그린 것은 잘린 코드 용어
+     * 셋이었고, 값은 이랬다.
+     *
+     * ```
+     * [UX 실측] 권한 포함  5,731 bytes · 69ms
+     * [UX 실측] 권한 없이    518 bytes ·  7ms
+     * ```
+     *
+     * 바이트보다 큰 것은 **`Role.privileges` 필드 리졸버가 역할마다 한 번씩 도는 것**이 함께
+     * 없어지는 쪽이다. 지금은 `privilegeCount` 를 받는다 — DB 가 센다(`role-query.ts`).
+     *
+     * `inherited` 는 화면이 고른 묶음을 그대로 넘긴다. 기본값이 「우리 역할」이라 처음 화면에
+     * 못 고치는 행이 안 깔린다.
+     */
+    async fetchHandler({ filters = [], page, limit, sortings = [] }) {
+        this.fetchState = 'loading';
+        this.filtered = filters.length > 0;
+        try {
+            const response = (await client.query({
+                query: gql `
+            query (
+              $filters: [Filter!]
+              $pagination: Pagination
+              $sortings: [Sorting!]
+              $inherited: InheritedValueType
+            ) {
+              responses: roles(
+                filters: $filters
+                pagination: $pagination
+                sortings: $sortings
+                inherited: $inherited
+              ) {
+                items {
+                  id
+                  name
+                  description
+                  domain {
+                    id
+                    name
+                    subdomain
+                  }
+                  privilegeCount
+                  updatedAt
+                }
+                total
+              }
+            }
+          `,
+                variables: {
+                    filters,
+                    pagination: { page, limit },
+                    sortings: sortings.length ? sortings : [{ name: 'name' }],
+                    inherited: this.scope
+                }
+            })).data.responses;
+            this.total = response.total;
+            this.fetchState = 'loaded';
+            return {
+                records: response.items,
+                total: response.total
+            };
+        }
+        catch (e) {
+            /* 못 읽은 것을 「없다」로 그리지 않는다. */
+            this.fetchState = 'failed';
+            throw e;
+        }
+    }
+    /**
+     * 격자에서 고친 줄들을 저장한다.
+     *
+     * 이 저장소의 목록 관례를 그대로 쓴다 — `dirtyRecords` 를 `__dirtyfields__[key].after` 로 펴서
+     * `cuFlag` 와 함께 보낸다(`fiscal-quarter-list-page` 가 같은 모양). 서버가
+     * `updateMultipleRole` 로 받는다.
+     *
+     * **`privileges` 는 안 보낸다.** 여기서 고치는 것은 이름과 설명이고, 권한은 전용 화면이
+     * 소유한다. 안 보낸 것을 「비우라」로 읽으면 이름만 고친 순간 그 역할이 아무것도 안 여는
+     * 역할이 된다 — 서버 쪽에도 같은 말을 주석으로 적어 뒀다.
+     */
+    async onSaveGrid() {
+        const dirty = this.grist.dirtyRecords;
+        if (!dirty?.length) {
+            return;
+        }
+        const patches = dirty.map((record) => {
+            const patch = record.id ? { id: record.id } : {};
+            for (const key in record.__dirtyfields__) {
+                patch[key] = record.__dirtyfields__[key].after;
+            }
+            patch.cuFlag = record.__dirty__;
+            return patch;
+        });
+        const response = await client.mutate({
+            mutation: gql `
+        mutation ($patches: [RolePatch!]!) {
+          updateMultipleRole(patches: $patches) {
+            id
+          }
+        }
+      `,
+            variables: { patches },
+            context: gqlContext()
+        });
+        if (response.errors?.length) {
+            /* 실패를 조용히 넘기지 않는다 — 격자는 고친 채로 남아 있어야 다시 저장할 수 있다. */
+            document.dispatchEvent(new CustomEvent('notify', { detail: { level: 'error', message: response.errors[0]?.message } }));
+            return;
+        }
+        this.grist.fetch();
+    }
+    /**
+     * 고른 역할을 지운다.
+     *
+     * 서버는 **가진 사람이 있는 역할을 남긴다**(`deleteRoles`). 그래서 여기서 「지웠다」고 말하지
+     * 않고 목록을 다시 읽는다 — 무엇이 남았는지가 화면에서 보이는 것이 맞다.
+     */
+    async onDeleteGrid() {
+        const selected = this.grist.selected;
+        if (!selected?.length) {
+            return;
+        }
+        /*
+         * **상속된 행은 여기서 못 지운다** — `deleteRoles` 가 `domain.id` 로 좁혀 찾으므로 그 행은
+         * 조용히 남는다. 「지웠다」로 보이고 목록에 그대로 있으면 사람이 두 번 세 번 누른다.
+         */
+        const mine = selected.filter((record) => !this.isInherited(record));
+        if (!mine.length) {
+            await OxPrompt.open({
+                type: 'warning',
+                title: i18next.t('button.delete'),
+                text: i18next.t('text.inherited roles are edited in their own domain'),
+                confirmButton: { text: i18next.t('button.confirm') }
+            });
+            return;
+        }
+        if (!(await OxPrompt.open({
+            type: 'warning',
+            title: i18next.t('button.delete'),
+            text: i18next.t('text.roles in use are kept'),
+            confirmButton: { text: i18next.t('button.confirm') },
+            cancelButton: { text: i18next.t('button.cancel') }
+        }))) {
+            return;
+        }
+        const response = await client.mutate({
+            mutation: gql `
+        mutation ($ids: [String!]!) {
+          deleteRoles(ids: $ids)
+        }
+      `,
+            variables: { ids: mine.map((record) => record.id) },
+            context: gqlContext()
+        });
+        if (response.errors?.length) {
+            document.dispatchEvent(new CustomEvent('notify', { detail: { level: 'error', message: response.errors[0]?.message } }));
+            return;
+        }
+        this.grist.fetch();
+    }
+    /**
+     * 역할을 만드는 두 문을 **한 자리에** 연다.
+     *
+     * ── 왜 `ox-record-creator`(빈 줄)를 걷어냈나 ────────────────────────────────
+     * 이름을 짓는 것은 쉬운 쪽이고 「품질검사원에게 84개 중 무엇을 주나」가 어려운 쪽인데, 빈
+     * 줄은 그 판단을 통째로 사람에게 넘긴다. 미라텍이 그래서 역할 둘뿐이다.
+     *
+     * 그리고 그 단추는 `.filters` 안에 있었는데 `CommonHeaderStyles` 는 `.actions button` 만
+     * 꾸민다. `.filters` 에 button 규칙이 없어서 **브라우저 기본 단추**가 그대로 나왔다 — 옆의
+     * 알약 범위 단추·검색과 같은 줄에서 혼자 네모난 회색 상자였다. 이 관례를 쓰는 다른 목록
+     * 화면(24 파일)도 전부 같은 상태다.
+     *
+     * ── 순서가 가르친다 ────────────────────────────────────────────────────────
+     * 템플릿이 먼저고 백지가 나중이다. 「품질검사원, 권한 7」을 본 사람은 자리가 어떻게 생긴
+     * 것인지 알고 나서 자기 것을 짓는다. 그렇다고 백지를 감추면 안 된다 — 「야간반장」·「외주
+     * 검사」 같은 자리는 그 공장이 아는 것이지 제품이 아는 게 아니다.
+     */
+    async openCreate() {
+        await import('../../components/role-template-picker.js');
+        const popup = openPopup(html `<role-template-picker .page=${this} @close=${() => popup.close()}></role-template-picker>`, {
+            backdrop: true,
+            size: 'large',
+            title: i18next.t('button.create role')
+        });
+    }
+    /** 템플릿에서 — 이름은 이 공장이 정한 것을 그대로 보낸다. */
+    async createFromTemplate(templateId, name) {
+        const response = await client.mutate({
+            mutation: gql `
+        mutation ($templateId: String!, $name: String) {
+          createRoleFromTemplate(templateId: $templateId, name: $name) {
+            id
+          }
+        }
+      `,
+            variables: { templateId, name },
+            context: gqlContext()
+        });
+        if (response.errors?.length) {
+            document.dispatchEvent(new CustomEvent('notify', { detail: { level: 'error', message: response.errors[0]?.message } }));
+            return false;
+        }
+        this.grist.fetch();
+        return true;
+    }
+    /** 백지에서 — 권한 없이 선다. 목록의 권한 수 칸이 0 을 빨갛게 말하므로 다음 걸음이 보인다. */
+    async createBlankRole(name, description) {
+        return await this.onCreateRole({ name, description });
+    }
+    /**
+     * 새 역할.
+     *
+     * **권한 없이 만들어진다.** 그것이 맞다 — 이름을 정하는 것과 무엇을 열지 정하는 것은 다른
+     * 판단이고, 목록의 요약 칸이 「여는 것이 없음」을 빨갛게 말하므로 다음 걸음이 보인다.
+     */
+    async onCreateRole(record) {
+        const response = await client.mutate({
+            mutation: gql `
+        mutation ($role: NewRole!) {
+          createRole(role: $role) {
+            id
+          }
+        }
+      `,
+            variables: { role: { name: record.name, description: record.description } },
+            context: gqlContext()
+        });
+        if (response.errors?.length) {
+            document.dispatchEvent(new CustomEvent('notify', { detail: { level: 'error', message: response.errors[0]?.message } }));
+            return false;
+        }
+        this.grist.fetch();
+        return true;
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], RoleListPage.prototype, "config", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], RoleListPage.prototype, "mode", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], RoleListPage.prototype, "fetchState", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], RoleListPage.prototype, "total", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], RoleListPage.prototype, "filtered", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], RoleListPage.prototype, "mySubdomain", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], RoleListPage.prototype, "scope", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], RoleListPage.prototype, "counts", void 0);
+__decorate([
+    query('ox-grist'),
+    __metadata("design:type", Function)
+], RoleListPage.prototype, "grist", void 0);
+RoleListPage = __decorate([
+    customElement('role-list-page')
+], RoleListPage);
+export { RoleListPage };
+/**
+ * 권한 수 한 칸 — **0 이 가장 할 말이 많은 값이다.**
+ *
+ * 권한이 하나도 없는 역할은 붙여도 아무 일이 없다. 그것이 이 화면에서 **조치가 필요한 유일한
+ * 상태**이므로 색을 그때만 쓴다. 나머지는 수만 낸다.
+ */
+function privilegeCountCell(_value, _column, record) {
+    const count = record?.privilegeCount;
+    /* 「모른다」와 「0」은 다르다 — 아직 안 온 값에 색을 쓰지 않는다. */
+    if (count === undefined || count === null) {
+        return html ``;
+    }
+    return count === 0
+        ? html `<span class="badge" attention>${i18next.t('text.no privilege granted')}</span>`
+        : html `<span class="badge">${count}</span>`;
+}
+//# sourceMappingURL=role-list-page.js.map