@things-factory/auth-ui 10.1.6 → 10.1.13

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

@@ -6,6 +6,7 @@ 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';
@@ -14,25 +15,30 @@ import { CommonGristStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato
 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 가 됐다. 지금은 `role-detail` 이 자기 이름을 들고 있다.
+ *     저장하면 B 의 이름이 A 가 됐다. 지금은 이름·설명을 격자에서 고친다.
  *  ② 목록에 권한이 하나도 안 보였다. 「이 역할이 무엇을 여나」를 알려면 펼쳐야 했다.
  *  ③ 한도도 쪽 나누기도 없었다.
  *
- * ── 목록이 말해 주는 것 ─────────────────────────────────────────────────────
- * 역할마다 **몇 개의 모듈에서 무엇이 열려 있나**를 요약해 싣는다(`board 읽기·쓰기 · order 읽기`
- * 식). 사용자 관리에서 역할을 고를 때 이름만 보고 고르던 것이 여기서 갈린다.
+ * ── 상속이 이 화면의 중심이다 ───────────────────────────────────────────────
+ * 목록은 부모 도메인의 역할까지 보여 준다 — **부여할 수 있는 범위가 그것**이기 때문이다.
+ * 그런데 그 행은 여기서 못 고친다(`updateRole` 이 `domain.id` 하나로 좁혀 찾는다).
  *
- * ── 상속 ────────────────────────────────────────────────────────────────────
- * 부모 도메인의 역할도 함께 나온다(`inherited: Include`) — 실제로 부여할 수 있는 범위가 그것이기
- * 때문이다. 다만 **부모 것은 여기서 못 고친다**(`updateRole` 의 범위가 내 도메인이다). 그래서
- * 어느 도메인의 역할인지 컬럼으로 말한다.
+ * 전에는 `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 {
@@ -54,6 +60,25 @@ let RoleListPage = class RoleListPage extends RoleListPageBase {
          * 견준다 — 두 도메인이 같은 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,
@@ -88,6 +113,84 @@ let RoleListPage = class RoleListPage extends RoleListPageBase {
         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;
@@ -103,10 +206,31 @@ let RoleListPage = class RoleListPage extends RoleListPageBase {
      * 격자에서 고치는 화면들의 관례다(`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) }
@@ -123,12 +247,18 @@ let RoleListPage = class RoleListPage extends RoleListPageBase {
       >
         <div slot="headroom" class="header">
           <div class="filters">
-            <ox-filters-form autofocus></ox-filters-form>
+            ${this.renderScopes()}
 
-            <!-- 목록에서 새 줄을 만드는 관례 (24 파일). 격자 설정에서 칸을 읽어 온다. -->
-            <ox-record-creator .callback=${this.onCreateRole.bind(this)}>
-              <button><md-icon>add</md-icon></button>
-            </ox-record-creator>
+            <!-- 찾기는 제목 줄이 갖는다(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>
@@ -139,6 +269,67 @@ let RoleListPage = class RoleListPage extends RoleListPageBase {
       ${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;
+        }, {});
+    }
     /**
      * 목록 위에 겹쳐 그린다 — 격자를 떼면 다시 읽을 길이 없어진다.
      *
@@ -181,15 +372,85 @@ let RoleListPage = class RoleListPage extends RoleListPageBase {
         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: ['summary', 'domain']
+                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',
@@ -218,34 +479,47 @@ let RoleListPage = class RoleListPage extends RoleListPageBase {
                 },
                 {
                     /*
-                     * **이 역할이 무엇을 여나.** 옛 화면은 이것을 보려면 펼쳐야 했다.
-                     * 권한이 하나도 없는 역할은 붙여도 아무 일이 없으므로 눈에 걸리게 그린다.
+                     * **이 역할이 여는 것이 몇 개인가.** 읽는 값이고, 누르는 자리가 아니다.
+                     *
+                     * 전에는 여기에 `activity 쓰기 · activity-instance 쓰기·읽기 · 3개 더` 식으로 잘린
+                     * 코드 용어를 그렸다. 그것을 그리려고 목록이 권한 **행**을 받았다.
+                     *
+                     * ```
+                     * [UX 실측] roles(limit:20) 권한 포함  5,731 bytes · 69ms
+                     * [UX 실측] 권한 없이                    518 bytes ·  7ms      → 11.1배 · 10배
+                     * ```
+                     *
+                     * 수는 잘린 문자열이 못 하던 것을 한다 — 「더 있다」가 아니라 **얼마인지** 말하고,
+                     * `0` 이면 아직 아무것도 안 열린 역할이라는 것이 한눈에 보인다.
+                     *
+                     * ⚠ **여기에 클릭을 얹지 않는다.** 한때 그렇게 뒀는데, 읽는 값과 누르는 자리가 한 칸에
+                     * 들어간다. 그리고 사용자 평가의 첫 줄이 「권한 편집 방법을 모르겠다」였는데 —
+                     * **눌리는 숫자는 보이는 손잡이가 아니다.** 문은 아래 버튼 칸이 진다.
                      */
                     type: 'string',
-                    name: 'summary',
+                    name: 'privilegeCount',
                     header: i18next.t('field.privileges'),
-                    record: { align: 'left', renderer: privilegeSummary },
-                    /*
-                     * **여기를 눌러 권한 편집으로 간다.** 컬럼마다 자기 처리기를 두는 것이 관례다
-                     * (`employee-list-page` 가 같은 모양) — 행 전체에 두면 이름을 고치려 누른 것이
-                     * 화면을 떠나 버린다.
-                     */
-                    handlers: {
-                        click: (_columns, _data, _column, record) => {
-                            if (record?.id) {
-                                navigate(`role-privileges/${record.id}`);
-                            }
-                        }
-                    },
-                    width: 300
+                    record: { align: 'center', renderer: privilegeCountCell },
+                    width: 110
                 },
                 {
-                    /* 부모 도메인의 역할은 여기서 못 고친다 — 어느 도메인 것인지 먼저 보여야 한다. */
+                    /*
+                     * **출처 — 여기가 「보이는 것과 고칠 수 있는 것」을 가른다.**
+                     *
+                     * 전에는 도메인 이름을 날값으로 냈다(`SYSTEM` · `MIRATEK`). 그건 구분이 아니다 —
+                     * 읽는 사람이 자기 도메인 이름을 외우고 있어야 한다. 지금은 「우리」와
+                     * 「상속 · SYSTEM」 으로 말한다.
+                     *
+                     * ⚠ `classifier` 로 행 전체를 물들이지 않는다. 선례들이 색을 `'#8B0000'` 처럼 박아
+                     * 두었고(dataset 5곳), 그 규약(`emphasized: [배경, 글자]`)이 `var(...)` 를 받는지도
+                     * 확인되지 않았다. 그리고 `emphasized` 는 **강조**하는 장치인데 여기서 필요한 것은
+                     * 그 반대다 — 11행 중 9행을 강조하면 강조가 아니다. 그래서 이 칸이 진다.
+                     */
                     type: 'string',
-                    name: 'domain',
-                    header: i18next.t('field.domain'),
-                    record: { align: 'center', renderer: (_v, _c, record) => record?.domain?.name || '' },
-                    width: 140
+                    name: 'source',
+                    header: i18next.t('field.source'),
+                    record: { align: 'center', renderer: (_v, _c, record) => this.sourceCell(record) },
+                    width: 150
                 },
                 {
                     type: 'datetime',
@@ -269,10 +543,21 @@ let RoleListPage = class RoleListPage extends RoleListPageBase {
         }
     }
     /**
-     * 역할과 그 권한을 함께 가져온다.
+     * 역할을 가져온다 — **권한 행은 받지 않는다.**
+     *
+     * 전에는 `privileges { id name category }` 를 함께 물었다. 그것으로 그린 것은 잘린 코드 용어
+     * 셋이었고, 값은 이랬다.
+     *
+     * ```
+     * [UX 실측] 권한 포함  5,731 bytes · 69ms
+     * [UX 실측] 권한 없이    518 bytes ·  7ms
+     * ```
+     *
+     * 바이트보다 큰 것은 **`Role.privileges` 필드 리졸버가 역할마다 한 번씩 도는 것**이 함께
+     * 없어지는 쪽이다. 지금은 `privilegeCount` 를 받는다 — DB 가 센다(`role-query.ts`).
      *
-     * 권한은 `Role.privileges` 필드 리졸버가 역할마다 한 번씩 읽는다. 역할은 도메인마다 열 단위이고
-     * 쪽 나누기가 걸려 있으므로 그 비용을 받아들인다 — 요약을 목록에서 보는 값이 그보다 크다.
+     * `inherited` 는 화면이 고른 묶음을 그대로 넘긴다. 기본값이 「우리 역할」이라 처음 화면에
+     * 못 고치는 행이 안 깔린다.
      */
     async fetchHandler({ filters = [], page, limit, sortings = [] }) {
         this.fetchState = 'loading';
@@ -301,11 +586,7 @@ let RoleListPage = class RoleListPage extends RoleListPageBase {
                     name
                     subdomain
                   }
-                  privileges {
-                    id
-                    name
-                    category
-                  }
+                  privilegeCount
                   updatedAt
                 }
                 total
@@ -316,7 +597,7 @@ let RoleListPage = class RoleListPage extends RoleListPageBase {
                     filters,
                     pagination: { page, limit },
                     sortings: sortings.length ? sortings : [{ name: 'name' }],
-                    inherited: InheritedValueType.Include
+                    inherited: this.scope
                 }
             })).data.responses;
             this.total = response.total;
@@ -423,6 +704,55 @@ let RoleListPage = class RoleListPage extends RoleListPageBase {
         }
         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 });
+    }
     /**
      * 새 역할.
      *
@@ -473,6 +803,14 @@ __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)
@@ -481,34 +819,20 @@ RoleListPage = __decorate([
     customElement('role-list-page')
 ], RoleListPage);
 export { RoleListPage };
-/** 아는 축은 사람 말로. `role-detail` 과 같은 어휘를 쓴다. */
-const AXIS_LABEL = {
-    query: 'label.read',
-    mutation: 'label.write',
-    execute: 'label.execute'
-};
 /**
- * `board 읽기·쓰기 · order 읽기` — 모듈별로 접어 보여 준다.
+ * 권한 수 한 칸 — **0 이 가장 할 말이 많은 값이다.**
  *
- * 84개를 다 적으면 목록이 못 읽히므로 앞의 셋만 적고 나머지는 수로 말한다. 권한이 하나도 없는
- * 역할은 **붙여도 아무 일이 없다** — 그것이 조치가 필요한 유일한 상태이므로 색을 쓴다.
+ * 권한이 하나도 없는 역할은 붙여도 아무 일이 없다. 그것이 이 화면에서 **조치가 필요한 유일한
+ * 상태**이므로 색을 그때만 쓴다. 나머지는 수만 낸다.
  */
-function privilegeSummary(_value, _column, record) {
-    const privileges = record?.privileges || [];
-    if (!privileges.length) {
-        return html `<span class="badge" attention>${i18next.t('text.no privilege granted')}</span>`;
-    }
-    const byCategory = new Map();
-    for (const { category, name } of privileges) {
-        const axes = byCategory.get(category) || [];
-        axes.push(AXIS_LABEL[name] ? i18next.t(AXIS_LABEL[name]) : name);
-        byCategory.set(category, axes);
+function privilegeCountCell(_value, _column, record) {
+    const count = record?.privilegeCount;
+    /* 「모른다」와 「0」은 다르다 — 아직 안 온 값에 색을 쓰지 않는다. */
+    if (count === undefined || count === null) {
+        return html ``;
     }
-    const entries = [...byCategory.entries()].sort((a, b) => a[0].localeCompare(b[0]));
-    const shown = entries.slice(0, 3).map(([category, axes]) => `${category} ${axes.join('·')}`);
-    const rest = entries.length - shown.length;
-    return html `<span class="badge"
-    >${shown.join(' · ')}${rest > 0 ? ` ${i18next.t('text.and x more', { x: rest })}` : ''}</span
-  >`;
+    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