@things-factory/auth-ui 10.1.194 → 10.1.198

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

@@ -9,10 +9,12 @@ import { client, gqlContext } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { KNOWN_AXES, axisLabel } from '../../utils/privilege-axis.js';
 import { openPopup } from '@operato/layout';
+import { OxPrompt } from '@operato/popup/ox-prompt.js';
 import { PageView } from '@operato/shell';
 import { CommonHeaderStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles';
 import { getDomain } from '@things-factory/auth-base/dist-client';
 import { filterPrivilegeModules, selectedVisibleModule } from '../../components/role-privilege-picker-state.js';
+const GRANT_FIELDS = 'category axes';
 /**
  * 한 역할이 무엇을 할 수 있나 — **켜진 것이 문장으로 본문에 선다.**
  *
@@ -61,6 +63,14 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
         this.loadError = null;
         this.saving = false;
         this.dirty = false;
+        this.view = 'privileges';
+        /** The role laid against every task - computed by the server from the saved privileges (`Role.taskCoverage`). */
+        this.coverage = { tasks: [], unclassified: [] };
+        this.showUnheldTasks = false;
+        /** null until asked for; [] when this person may not read templates (`roleTemplates` asks user:mutation). */
+        this.templates = null;
+        this.templateId = '';
+        this.gap = null;
     }
     static { this.styles = [
         /* The frame owns the page shell; the two panes are the content it sizes (ADR-0060 decision 8). */
@@ -447,6 +457,157 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
         color: var(--md-sys-color-on-surface-variant);
         font-size: 0.85rem;
       }
+
+      /*
+        The three readings of one role - quiet text buttons in the panel's header line, the chosen one underlined.
+        They change what the panel shows, not what the role holds, so they are not boxed like an action.
+      */
+      [granted] > header nav {
+        margin-left: auto;
+        display: flex;
+        gap: 2px;
+      }
+
+      [granted] > header nav button {
+        padding: 2px 8px;
+        border: none;
+        border-bottom: 2px solid transparent;
+        background: none;
+        font: inherit;
+        font-size: 0.8rem;
+        color: var(--md-sys-color-on-surface-variant);
+        cursor: pointer;
+      }
+
+      [granted] > header nav button[selected] {
+        border-bottom-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-surface);
+        font-weight: 600;
+      }
+
+      [review] {
+        flex: 1;
+        min-height: 0;
+        overflow: auto;
+        padding: 0 12px 12px;
+      }
+
+      [review] h4 {
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+        margin: 14px 0 4px;
+        font-size: 0.85rem;
+        font-weight: 600;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      [review] h4 [count] {
+        font-weight: 400;
+        color: var(--md-sys-color-outline);
+      }
+
+      ul[tasks] {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      ul[tasks] > li {
+        padding: 9px 2px;
+        border-bottom: 1px solid var(--md-sys-color-surface-variant);
+      }
+
+      ul[tasks] > li:last-child {
+        border-bottom: none;
+      }
+
+      ul[tasks] [task-name] {
+        font-size: 0.95rem;
+        font-weight: 600;
+      }
+
+      ul[tasks] [task-says],
+      ul[tasks] [task-missing] {
+        margin-top: 2px;
+        font-size: 0.85rem;
+        line-height: 1.55;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      ul[tasks] [task-missing] {
+        color: var(--md-sys-color-outline);
+      }
+
+      ul[tasks][quiet] > li {
+        padding: 5px 2px;
+        font-size: 0.88rem;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      [state] {
+        margin-left: 8px;
+        padding: 0 6px;
+        border-radius: var(--md-sys-shape-corner-full, 999px);
+        font-size: 0.75rem;
+        font-weight: 400;
+        background-color: var(--md-sys-color-surface-container-highest);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      [state][all] {
+        background-color: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+
+      [state][broken] {
+        background-color: var(--md-sys-color-error-container);
+        color: var(--md-sys-color-on-error-container);
+      }
+
+      ul[sentences] {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      ul[sentences] li {
+        padding: 5px 2px;
+        font-size: 0.9rem;
+        line-height: 1.5;
+      }
+
+      button[quiet] {
+        padding: 4px 0;
+        border: none;
+        background: none;
+        font: inherit;
+        font-size: 0.85rem;
+        color: var(--md-sys-color-primary);
+        cursor: pointer;
+      }
+
+      button[quiet]:disabled {
+        color: var(--md-sys-color-outline);
+        cursor: default;
+      }
+
+      [review] select {
+        margin-top: 10px;
+        padding: 4px 6px;
+        font: inherit;
+        font-size: 0.88rem;
+        color: var(--md-sys-color-on-surface);
+        background-color: var(--md-sys-color-surface);
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: var(--md-sys-shape-corner-small, 6px);
+      }
+
+      [review] [stale] {
+        margin-top: 10px;
+        font-size: 0.82rem;
+        color: var(--md-sys-color-outline);
+      }
     `
     ]; }
     /**
@@ -600,17 +761,246 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
         <header>
           ${i18next.t('field.granted privileges')}
           <span count>${granted.length}</span>
+          <nav>
+            ${this.viewButton('privileges', i18next.t('label.privileges view'))} ${this.viewButton('tasks', i18next.t('label.tasks view'))}
+            ${this.viewButton('template', i18next.t('label.template view'))}
+          </nav>
         </header>
 
-        ${granted.length
-            ? html `<ul lines>
-                ${granted.map(({ category, cell }) => this.renderGrantedLine(category, cell))}
+        ${this.view === 'tasks'
+            ? this.renderTasks()
+            : this.view === 'template'
+                ? this.renderTemplate()
+                : html `${granted.length
+                    ? html `<ul lines>
+                        ${granted.map(({ category, cell }) => this.renderGrantedLine(category, cell))}
+                      </ul>`
+                    : html `<div empty>${i18next.t('text.nothing is on for this role yet')}</div>`}
+                ${this.renderAdd()}`}
+      </div>
+    `;
+    }
+    viewButton(view, label) {
+        return html `<button ?selected=${this.view === view} @click=${() => this.showView(view)}>${label}</button>`;
+    }
+    async showView(view) {
+        this.view = view;
+        if (view === 'template' && this.templates === null) {
+            await this.fetchTemplates();
+        }
+    }
+    /**
+     * **The role by task** (ADR-0139 decision 11) — which of each task's privileges this role holds, as the server
+     * computes it from the saved privileges.
+     *
+     * It says what the role holds, nothing more: 「전부」 is not "this person can do the work" (another role, the
+     * data's own scope or an approval line decide that too), and 「일부」 is not a fault — a privilege several tasks
+     * share makes each of them 「일부」. So nothing here offers to add or take away; the privileges view and the
+     * template view do that.
+     */
+    renderTasks() {
+        const tasks = this.coverage.tasks;
+        const held = tasks.filter(task => task.status !== 'none').sort((a, b) => statusOrder(a.status) - statusOrder(b.status));
+        const unheld = tasks.filter(task => task.status === 'none');
+        return html `
+      <div review>
+        ${this.dirty ? html `<div stale>${i18next.t('text.counted from the saved privileges')}</div>` : nothing}
+        ${held.length
+            ? html `<ul tasks>
+                ${held.map(task => this.renderTask(task))}
               </ul>`
-            : html `<div empty>${i18next.t('text.nothing is on for this role yet')}</div>`}
-        ${this.renderAdd()}
+            : html `<div empty>${i18next.t('text.this role holds no task')}</div>`}
+        ${unheld.length
+            ? html `<h4>
+                  ${i18next.t('label.tasks this role does not hold')}
+                  <span count>${unheld.length}</span>
+                  <button quiet @click=${() => (this.showUnheldTasks = !this.showUnheldTasks)}>
+                    ${this.showUnheldTasks ? i18next.t('button.fold') : i18next.t('button.unfold')}
+                  </button>
+                </h4>
+                ${this.showUnheldTasks
+                ? html `<ul tasks quiet>
+                        ${unheld.map(task => html `<li>${taskName(task.taskId)}</li>`)}
+                      </ul>`
+                : nothing}`
+            : nothing}
+        ${this.coverage.unclassified.length
+            ? html `<h4>
+                  ${i18next.t('label.privileges no task names')}
+                  <span count>${countOf(this.coverage.unclassified)}</span>
+                </h4>
+                ${this.renderSentences(this.coverage.unclassified)}`
+            : nothing}
       </div>
     `;
     }
+    renderTask(task) {
+        const held = countOf(task.held);
+        const total = held + countOf(task.missing);
+        const says = i18next.t(`task.${task.taskId}.description`, { defaultValue: '' });
+        return html `
+      <li>
+        <div>
+          <span task-name>${taskName(task.taskId)}</span>
+          ${task.status === 'broken'
+            ? html `<span state broken>${i18next.t('text.task names an undeclared privilege')}</span>`
+            : task.status === 'all'
+                ? html `<span state all>${i18next.t('text.task held whole')}</span>`
+                : html `<span state>${i18next.t('text.task held in part', { held, total })}</span>`}
+        </div>
+        ${says ? html `<div task-says>${says}</div>` : nothing}
+        ${task.status === 'some'
+            ? html `<div task-missing>${i18next.t('text.not held x', { x: task.missing.flatMap(grant => grant.axes.map(axis => this.sentenceOf(grant.category, axis))).join(' · ') })}</div>`
+            : nothing}
+      </li>
+    `;
+    }
+    /**
+     * **The role against a template the administrator picks** (ADR-0139 decision 11) — whatever the role is called.
+     *
+     * The template of the role's name is picked to begin with; a role named in the site's own words (경영지원, 인사급여)
+     * has no such pair, and the administrator picks one. The role is never renamed to make a pair: an approval line
+     * holds the role. What the role holds beyond the template is shown as wider, not wrong — the site may have widened it
+     * on purpose — and nothing takes it away. What it lacks can be added; adding is the same top-up the template button
+     * on the role list runs (`createRoleFromTemplate` onto this role's name).
+     */
+    renderTemplate() {
+        if (this.templates === null) {
+            return html `<div review><div empty>${i18next.t('text.loading')}</div></div>`;
+        }
+        if (!this.templates.length) {
+            return html `<div review><div empty>${i18next.t('text.no template to compare with')}</div></div>`;
+        }
+        const template = this.templates.find(one => one.id === this.templateId);
+        const gap = this.gap;
+        return html `
+      <div review>
+        <select @change=${(event) => this.pickTemplate(event.target.value)}>
+          <option value="" ?selected=${!this.templateId}>${i18next.t('text.pick a template to compare with')}</option>
+          ${this.templates.map(one => html `<option value=${one.id} ?selected=${one.id === this.templateId}>${one.name}</option>`)}
+        </select>
+        ${this.dirty ? html `<div stale>${i18next.t('text.counted from the saved privileges')}</div>` : nothing}
+        ${template?.definitionErrors.length
+            ? html `<div note attention>${i18next.t('text.template cannot be applied because', { list: template.definitionErrors.join(' · ') })}</div>`
+            : nothing}
+        ${gap
+            ? html `
+                <h4>
+                  ${i18next.t('label.missing against the template')}
+                  <span count>${gap.missingCount}</span>
+                  ${gap.missingCount && !this.inherited
+                ? html `<button quiet ?disabled=${this.dirty || this.saving || Boolean(template?.definitionErrors.length)} @click=${() => this.addMissing()}>
+                          ${i18next.t('button.add')}
+                        </button>`
+                : nothing}
+                </h4>
+                ${gap.missingCount ? this.renderSentences(gap.missing) : html `<div empty>${i18next.t('text.nothing missing against the template')}</div>`}
+                <h4>
+                  ${i18next.t('label.wider than the template')}
+                  <span count>${gap.extraCount}</span>
+                </h4>
+                ${gap.extraCount ? this.renderSentences(gap.extra) : nothing}
+              `
+            : nothing}
+      </div>
+    `;
+    }
+    renderSentences(grants) {
+        return html `<ul sentences>
+      ${grants.flatMap(grant => grant.axes.map(axis => html `<li>${this.sentenceOf(grant.category, axis)}</li>`))}
+    </ul>`;
+    }
+    /** A privilege in words — the sentence the privileges view draws, or its module and axis when there is none. */
+    sentenceOf(category, axis) {
+        const cell = this.modules.find(module => module.category === category)?.cells.find(one => one.axis === axis);
+        return (cell && axisText(category, cell)) || `${moduleLabel(category)} · ${axisLabel(axis)}`;
+    }
+    async fetchTemplates() {
+        const response = await client.query({
+            query: gql `
+        query {
+          roleTemplates {
+            id
+            name
+            definitionErrors
+          }
+        }
+      `,
+            context: gqlContext()
+        });
+        /* Reading templates asks the same door creating a role does; without it there is nothing to compare with. */
+        const templates = response.errors?.length ? [] : response.data?.roleTemplates || [];
+        this.templates = templates;
+        const paired = templates.find(one => one.name === this.subject?.name);
+        await this.pickTemplate(paired?.id || '');
+    }
+    async pickTemplate(templateId) {
+        this.templateId = templateId;
+        this.gap = null;
+        if (!templateId)
+            return;
+        const response = await client.query({
+            query: gql `
+        query ($filters: [Filter!], $templateId: String) {
+          roles(filters: $filters) {
+            items {
+              id
+              templateGap(templateId: $templateId) {
+                templateId
+                templateName
+                missing { ${GRANT_FIELDS} }
+                missingCount
+                extra { ${GRANT_FIELDS} }
+                extraCount
+              }
+            }
+          }
+        }
+      `,
+            variables: { filters: [{ name: 'id', operator: 'eq', value: this.subject.id }], templateId },
+            context: gqlContext()
+        });
+        if (response.errors?.length) {
+            document.dispatchEvent(new CustomEvent('notify', { detail: { level: 'error', message: response.errors[0]?.message } }));
+            return;
+        }
+        if (this.templateId === templateId)
+            this.gap = response.data?.roles?.items?.[0]?.templateGap || null;
+    }
+    /** Adds what the role lacks against the picked template — after showing what it adds. */
+    async addMissing() {
+        const gap = this.gap;
+        if (!gap?.missingCount || this.dirty || this.inherited)
+            return;
+        const list = gap.missing.flatMap(grant => grant.axes.map(axis => this.sentenceOf(grant.category, axis))).join(', ');
+        const confirmed = await OxPrompt.open({
+            type: 'info',
+            title: i18next.t('title.add template privileges'),
+            text: i18next.t('text.add template privileges', { template: gap.templateName, count: gap.missingCount, list }),
+            confirmButton: { text: i18next.t('button.add') },
+            cancelButton: { text: i18next.t('button.cancel') }
+        });
+        if (!confirmed)
+            return;
+        const response = await client.mutate({
+            mutation: gql `
+        mutation ($templateId: String!, $name: String) {
+          createRoleFromTemplate(templateId: $templateId, name: $name) {
+            id
+          }
+        }
+      `,
+            variables: { templateId: gap.templateId, name: this.subject.name },
+            context: gqlContext()
+        });
+        if (response.errors?.length) {
+            document.dispatchEvent(new CustomEvent('notify', { detail: { level: 'error', message: response.errors[0]?.message } }));
+            return;
+        }
+        document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.data_updated_successfully') } }));
+        await this.fetch();
+        await this.pickTemplate(gap.templateId);
+    }
     /**
      * 한 줄 — 문장과 [떼기].
      *
@@ -861,6 +1251,17 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
                 name
                 email
               }
+              taskCoverage {
+                tasks {
+                  taskId
+                  module
+                  status
+                  held { ${GRANT_FIELDS} }
+                  missing { ${GRANT_FIELDS} }
+                  undeclared { ${GRANT_FIELDS} }
+                }
+                unclassified { ${GRANT_FIELDS} }
+              }
             }
           }
         }
@@ -887,6 +1288,7 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
         }
         this.subject = role;
         this.holders = this.subject.users || [];
+        this.coverage = role.taskCoverage || { tasks: [], unclassified: [] };
         this.build(response.data?.rolePrivileges || []);
         this.fetchState = 'loaded';
         /*
@@ -1047,6 +1449,30 @@ __decorate([
     state(),
     __metadata("design:type", Boolean)
 ], RolePrivilegePage.prototype, "dirty", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], RolePrivilegePage.prototype, "view", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], RolePrivilegePage.prototype, "coverage", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], RolePrivilegePage.prototype, "showUnheldTasks", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], RolePrivilegePage.prototype, "templates", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], RolePrivilegePage.prototype, "templateId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], RolePrivilegePage.prototype, "gap", void 0);
 RolePrivilegePage = __decorate([
     customElement('role-privilege-page')
 ], RolePrivilegePage);
@@ -1096,4 +1522,14 @@ function axisOrder(axis) {
     const index = KNOWN_AXES.indexOf(axis);
     return index < 0 ? KNOWN_AXES.length : index;
 }
+/** A task's name in the words of the module that declares it (`task.<id>.name`); the id when there are none. */
+function taskName(id) {
+    return i18next.t(`task.${id}.name`, { defaultValue: id });
+}
+function statusOrder(status) {
+    return ['broken', 'all', 'some', 'none'].indexOf(status);
+}
+function countOf(grants) {
+    return grants.reduce((count, grant) => count + grant.axes.length, 0);
+}
 //# sourceMappingURL=role-privilege-page.js.map