@things-factory/auth-ui 10.1.258 → 10.1.260

package/dist-client/pages/appliance/home.d.ts

@@ -52,7 +52,6 @@ export declare class Appliances extends Appliances_base {
     render(): import("lit-html").TemplateResult<1>;
     pageInitialized(): Promise<void>;
     private openEditor;
-    pageUpdated(_changes: any, _lifecycle: any): Promise<void>;
     fetchHandler({ page, limit, sortings, filters, search }: FetchOption): Promise<{
         total: number;
         records: any[];

package/dist-client/pages/appliance/home.js

@@ -83,6 +83,7 @@ let Appliances = class Appliances extends p13n(localize(i18next)(PageView)) {
         .config=${this.config}
         .fetchHandler=${this.fetchHandler.bind(this)}
         .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')}
+        ?url-params-sensitive=${this.active}
       >
       </ox-grist>
 
@@ -179,12 +180,10 @@ let Appliances = class Appliances extends p13n(localize(i18next)(PageView)) {
             title: applianceId ? i18next.t('text.appliance') : i18next.t('text.register new appliance')
         });
     }
-    async pageUpdated(_changes, _lifecycle) {
-        if (this.active) {
-            await this.updateComplete;
-            this.grist.fetch();
-        }
-    }
+    /*
+     * No read on activation here: the list is bound to the address (FOOTER-BUTTON-REVIEW G09), so it reads its search,
+     * sort and page from the address itself whenever the page becomes active.
+     */
     async fetchHandler({ page, limit, sortings = [], filters = [], search }) {
         const response = await client.query({
             query: gql `

package/dist-client/pages/appliance/home.js.map

@@ -1 +1 @@
-{"version":3,"file":"home.js","sourceRoot":"","sources":["../../../client/pages/appliance/home.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport '@operato/data-grist/ox-grist.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport type { DataGrist, FetchOption } from '@operato/data-grist'\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\nimport { PageView } from '@operato/shell'\nimport { CommonHeaderStyles, CommonGristStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles'\nimport { isMobileDevice } from '@operato/utils'\nimport { p13n } from '@operato/p13n'\n\nimport '../../components/appliance-editor.js'\nimport { listOutcome, pageFromResponse } from '../../utils/list-result.js'\n\n/**\n * Registered appliances.\n *\n * ── What this screen looked like before ──────────────────────────────────────\n * A hand-written table with no paging, sorting or search, and three columns that were not\n * data: \"API health\" printed OK, \"Installs\" printed 1, \"status\" printed draft, identical on\n * every row. An appliance that had never checked in read exactly like one reporting fine.\n * Those are gone — Appliance declares none of the three — and the columns here are the\n * fields it does declare.\n *\n * ── ⚠ The access token is not asked for, and a test holds that ──────────────\n * `Appliance.accessToken` carries its own\n * `@privilege(category: \"security\", privilege: \"query\", domainOwnerGranted: true)`. A list\n * is the wrong place for it regardless of who may read it: a token in a grid cell is a token\n * in plain text beside a name, visible to everyone who can open the screen and to anyone\n * looking over their shoulder. The screens that genuinely need it ask one record at a time.\n *\n * `appliance-list-query.test.ts` fails if the word reappears here.\n */\n@customElement('appliance-home')\nexport class Appliances extends p13n(localize(i18next)(PageView)) {\n  static styles = [\n    /* The work surface frame for a list screen (ADR-0060 decision 8). */\n    WorkSurfacePageStyles,\n    CommonGristStyles,\n    CommonHeaderStyles,\n    ScrollbarStyles,\n    css`\n\n      [failed] {\n        padding: var(--spacing-medium);\n        color: var(--md-sys-color-error);\n        font: var(--label-font, inherit);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) active: boolean = false\n  @property({ type: Object }) config: any\n  @property({ type: String }) mode: 'CARD' | 'LIST' | 'GRID' = isMobileDevice() ? 'CARD' : 'GRID'\n\n  /** The last fetch did not answer. Distinct from answering with nothing. */\n  @property({ type: Boolean }) failed: boolean = false\n\n  @query('ox-grist') private grist!: DataGrist\n\n  get context() {\n    return {\n      title: i18next.t('text.appliances'),\n      help: 'auth/appliance',\n      search: {\n        handler: (search: string) => {\n          this.grist.searchText = search\n        },\n        value: this.grist?.searchText || ''\n      },\n      actions: [\n        {\n          title: i18next.t('button.register'),\n          action: () => this.openEditor(),\n          icon: 'add'\n        }\n      ]\n    }\n  }\n\n  render() {\n    return html`\n      <ox-grist\n        class=\"page-fill\"\n        search-mode=\"term\"\n        .mode=${this.mode}\n        .config=${this.config}\n        .fetchHandler=${this.fetchHandler.bind(this)}\n        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')!}\n      >\n      </ox-grist>\n\n      ${this.failed ? html`<div failed>${i18next.t('text.the list could not be loaded')}</div>` : ''}\n    `\n  }\n\n  async pageInitialized() {\n    this.config = {\n      rows: { appendable: false, selectable: { multiple: false } },\n      columns: [\n        { type: 'gutter', gutterName: 'sequence' },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'chevron_right',\n          title: i18next.t('button.detail'),\n          handlers: {\n            click: (_columns: any, _data: any, _column: any, record: any) => {\n              if (record?.id) {\n                this.openEditor(record.id)\n              }\n            }\n          }\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: i18next.t('field.name'),\n          record: { editable: false },\n          sortable: true,\n          width: 180\n        },\n        {\n          type: 'string',\n          name: 'serialNo',\n          header: i18next.t('field.serial-no'),\n          record: { editable: false },\n          sortable: true,\n          width: 160\n        },\n        {\n          type: 'string',\n          name: 'brand',\n          header: i18next.t('field.brand'),\n          record: { editable: false },\n          sortable: true,\n          width: 140\n        },\n        {\n          type: 'string',\n          name: 'model',\n          header: i18next.t('field.model'),\n          record: { editable: false },\n          sortable: true,\n          width: 140\n        },\n        {\n          type: 'string',\n          name: 'netmask',\n          header: i18next.t('field.netmask'),\n          record: { editable: false },\n          width: 160\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: i18next.t('field.description'),\n          record: { editable: false },\n          width: 240\n        },\n        {\n          type: 'datetime',\n          name: 'updatedAt',\n          header: i18next.t('field.updated at'),\n          sortable: true,\n          width: 180\n        }\n      ]\n    }\n  }\n\n  /*\n   * Registering and editing both happen here, over the list, the way every other resource in\n   * this package works. `appliance-register` and `appliance/{id}` were routes; nothing outside\n   * auth-ui linked to either.\n   */\n  private openEditor(applianceId?: string) {\n    const popup = openPopup(\n      html`<appliance-editor\n        .applianceId=${applianceId}\n        @appliance-changed=${() => this.grist.fetch()}\n        @close=${() => popup.close()}\n      ></appliance-editor>`,\n      {\n        backdrop: true,\n        size: 'medium',\n        title: applianceId ? i18next.t('text.appliance') : i18next.t('text.register new appliance')\n      }\n    )\n  }\n\n  async pageUpdated(_changes: any, _lifecycle: any) {\n    if (this.active) {\n      await this.updateComplete\n      this.grist.fetch()\n    }\n  }\n\n  async fetchHandler({ page, limit, sortings = [], filters = [], search }: FetchOption) {\n    const response = await client.query({\n      query: gql`\n        query ($search: String, $filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n          appliances(search: $search, filters: $filters, pagination: $pagination, sortings: $sortings) {\n            items {\n              id\n              name\n              serialNo\n              brand\n              model\n              netmask\n              description\n              updatedAt\n            }\n            total\n          }\n        }\n      `,\n      variables: { search, filters, pagination: { page, limit }, sortings },\n      context: gqlContext()\n    })\n\n    const { items, total, failed } = listOutcome(pageFromResponse(response, 'appliances'))\n\n    this.failed = failed\n\n    return { total, records: items }\n  }\n}\n"]}
+{"version":3,"file":"home.js","sourceRoot":"","sources":["../../../client/pages/appliance/home.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,iCAAiC,CAAA;AAExC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGlE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAC/G,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEpC,OAAO,sCAAsC,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAE1E;;;;;;;;;;;;;;;;;;GAkBG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC;IAA1D;;QAiBwB,WAAM,GAAY,KAAK,CAAA;QAExB,SAAI,GAA6B,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAA;QAE/F,2EAA2E;QAC9C,WAAM,GAAY,KAAK,CAAA;IA0KtD,CAAC;aA/LQ,WAAM,GAAG;QACd,qEAAqE;QACrE,qBAAqB;QACrB,iBAAiB;QACjB,kBAAkB;QAClB,eAAe;QACf,GAAG,CAAA;;;;;;;KAOF;KACF,AAdY,CAcZ;IAWD,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC;YACnC,IAAI,EAAE,gBAAgB;YACtB,MAAM,EAAE;gBACN,OAAO,EAAE,CAAC,MAAc,EAAE,EAAE;oBAC1B,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAA;gBAChC,CAAC;gBACD,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,IAAI,EAAE;aACpC;YACD,OAAO,EAAE;gBACP;oBACE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC;oBACnC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;oBAC/B,IAAI,EAAE,KAAK;iBACZ;aACF;SACF,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;gBAIC,IAAI,CAAC,IAAI;kBACP,IAAI,CAAC,MAAM;wBACL,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;kCAClB,IAAI,CAAC,yBAAyB,CAAC,UAAU,CAAE;gCAC7C,IAAI,CAAC,MAAM;;;;QAInC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe,OAAO,CAAC,CAAC,CAAC,mCAAmC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;KAC/F,CAAA;IACH,CAAC;IAED,KAAK,CAAC,eAAe;QACnB,IAAI,CAAC,MAAM,GAAG;YACZ,IAAI,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;YAC5D,OAAO,EAAE;gBACP,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE;gBAC1C;oBACE,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,QAAQ;oBACpB,IAAI,EAAE,eAAe;oBACrB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;oBACjC,QAAQ,EAAE;wBACR,KAAK,EAAE,CAAC,QAAa,EAAE,KAAU,EAAE,OAAY,EAAE,MAAW,EAAE,EAAE;4BAC9D,IAAI,MAAM,EAAE,EAAE,EAAE,CAAC;gCACf,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;4BAC5B,CAAC;wBACH,CAAC;qBACF;iBACF;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;oBAC/B,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;oBAC3B,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,UAAU;oBAChB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC;oBACpC,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;oBAC3B,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,OAAO;oBACb,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;oBAChC,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;oBAC3B,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,OAAO;oBACb,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;oBAChC,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;oBAC3B,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,SAAS;oBACf,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;oBAClC,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;oBAC3B,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,aAAa;oBACnB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACtC,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;oBAC3B,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,UAAU;oBAChB,IAAI,EAAE,WAAW;oBACjB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC;oBACrC,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;iBACX;aACF;SACF,CAAA;IACH,CAAC;IAED;;;;OAIG;IACK,UAAU,CAAC,WAAoB;QACrC,MAAM,KAAK,GAAG,SAAS,CACrB,IAAI,CAAA;uBACa,WAAW;6BACL,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;iBACpC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE;2BACT,EACrB;YACE,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC;SAC5F,CACF,CAAA;IACH,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAE,MAAM,EAAe;QAClF,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;OAgBT;YACD,SAAS,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE;YACrE,OAAO,EAAE,UAAU,EAAE;SACtB,CAAC,CAAA;QAEF,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAA;QAEtF,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QAEpB,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;IAClC,CAAC;;AA9K4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;0CAAwB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wCAAoE;AAGlE;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;0CAAwB;AAEzB;IAA1B,KAAK,CAAC,UAAU,CAAC;;yCAA0B;AAxBjC,UAAU;IADtB,aAAa,CAAC,gBAAgB,CAAC;GACnB,UAAU,CAgMtB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport '@operato/data-grist/ox-grist.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport type { DataGrist, FetchOption } from '@operato/data-grist'\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\nimport { PageView } from '@operato/shell'\nimport { CommonHeaderStyles, CommonGristStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles'\nimport { isMobileDevice } from '@operato/utils'\nimport { p13n } from '@operato/p13n'\n\nimport '../../components/appliance-editor.js'\nimport { listOutcome, pageFromResponse } from '../../utils/list-result.js'\n\n/**\n * Registered appliances.\n *\n * ── What this screen looked like before ──────────────────────────────────────\n * A hand-written table with no paging, sorting or search, and three columns that were not\n * data: \"API health\" printed OK, \"Installs\" printed 1, \"status\" printed draft, identical on\n * every row. An appliance that had never checked in read exactly like one reporting fine.\n * Those are gone — Appliance declares none of the three — and the columns here are the\n * fields it does declare.\n *\n * ── ⚠ The access token is not asked for, and a test holds that ──────────────\n * `Appliance.accessToken` carries its own\n * `@privilege(category: \"security\", privilege: \"query\", domainOwnerGranted: true)`. A list\n * is the wrong place for it regardless of who may read it: a token in a grid cell is a token\n * in plain text beside a name, visible to everyone who can open the screen and to anyone\n * looking over their shoulder. The screens that genuinely need it ask one record at a time.\n *\n * `appliance-list-query.test.ts` fails if the word reappears here.\n */\n@customElement('appliance-home')\nexport class Appliances extends p13n(localize(i18next)(PageView)) {\n  static styles = [\n    /* The work surface frame for a list screen (ADR-0060 decision 8). */\n    WorkSurfacePageStyles,\n    CommonGristStyles,\n    CommonHeaderStyles,\n    ScrollbarStyles,\n    css`\n\n      [failed] {\n        padding: var(--spacing-medium);\n        color: var(--md-sys-color-error);\n        font: var(--label-font, inherit);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) active: boolean = false\n  @property({ type: Object }) config: any\n  @property({ type: String }) mode: 'CARD' | 'LIST' | 'GRID' = isMobileDevice() ? 'CARD' : 'GRID'\n\n  /** The last fetch did not answer. Distinct from answering with nothing. */\n  @property({ type: Boolean }) failed: boolean = false\n\n  @query('ox-grist') private grist!: DataGrist\n\n  get context() {\n    return {\n      title: i18next.t('text.appliances'),\n      help: 'auth/appliance',\n      search: {\n        handler: (search: string) => {\n          this.grist.searchText = search\n        },\n        value: this.grist?.searchText || ''\n      },\n      actions: [\n        {\n          title: i18next.t('button.register'),\n          action: () => this.openEditor(),\n          icon: 'add'\n        }\n      ]\n    }\n  }\n\n  render() {\n    return html`\n      <ox-grist\n        class=\"page-fill\"\n        search-mode=\"term\"\n        .mode=${this.mode}\n        .config=${this.config}\n        .fetchHandler=${this.fetchHandler.bind(this)}\n        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')!}\n        ?url-params-sensitive=${this.active}\n      >\n      </ox-grist>\n\n      ${this.failed ? html`<div failed>${i18next.t('text.the list could not be loaded')}</div>` : ''}\n    `\n  }\n\n  async pageInitialized() {\n    this.config = {\n      rows: { appendable: false, selectable: { multiple: false } },\n      columns: [\n        { type: 'gutter', gutterName: 'sequence' },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'chevron_right',\n          title: i18next.t('button.detail'),\n          handlers: {\n            click: (_columns: any, _data: any, _column: any, record: any) => {\n              if (record?.id) {\n                this.openEditor(record.id)\n              }\n            }\n          }\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: i18next.t('field.name'),\n          record: { editable: false },\n          sortable: true,\n          width: 180\n        },\n        {\n          type: 'string',\n          name: 'serialNo',\n          header: i18next.t('field.serial-no'),\n          record: { editable: false },\n          sortable: true,\n          width: 160\n        },\n        {\n          type: 'string',\n          name: 'brand',\n          header: i18next.t('field.brand'),\n          record: { editable: false },\n          sortable: true,\n          width: 140\n        },\n        {\n          type: 'string',\n          name: 'model',\n          header: i18next.t('field.model'),\n          record: { editable: false },\n          sortable: true,\n          width: 140\n        },\n        {\n          type: 'string',\n          name: 'netmask',\n          header: i18next.t('field.netmask'),\n          record: { editable: false },\n          width: 160\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: i18next.t('field.description'),\n          record: { editable: false },\n          width: 240\n        },\n        {\n          type: 'datetime',\n          name: 'updatedAt',\n          header: i18next.t('field.updated at'),\n          sortable: true,\n          width: 180\n        }\n      ]\n    }\n  }\n\n  /*\n   * Registering and editing both happen here, over the list, the way every other resource in\n   * this package works. `appliance-register` and `appliance/{id}` were routes; nothing outside\n   * auth-ui linked to either.\n   */\n  private openEditor(applianceId?: string) {\n    const popup = openPopup(\n      html`<appliance-editor\n        .applianceId=${applianceId}\n        @appliance-changed=${() => this.grist.fetch()}\n        @close=${() => popup.close()}\n      ></appliance-editor>`,\n      {\n        backdrop: true,\n        size: 'medium',\n        title: applianceId ? i18next.t('text.appliance') : i18next.t('text.register new appliance')\n      }\n    )\n  }\n\n  /*\n   * No read on activation here: the list is bound to the address (FOOTER-BUTTON-REVIEW G09), so it reads its search,\n   * sort and page from the address itself whenever the page becomes active.\n   */\n\n  async fetchHandler({ page, limit, sortings = [], filters = [], search }: FetchOption) {\n    const response = await client.query({\n      query: gql`\n        query ($search: String, $filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n          appliances(search: $search, filters: $filters, pagination: $pagination, sortings: $sortings) {\n            items {\n              id\n              name\n              serialNo\n              brand\n              model\n              netmask\n              description\n              updatedAt\n            }\n            total\n          }\n        }\n      `,\n      variables: { search, filters, pagination: { page, limit }, sortings },\n      context: gqlContext()\n    })\n\n    const { items, total, failed } = listOutcome(pageFromResponse(response, 'appliances'))\n\n    this.failed = failed\n\n    return { total, records: items }\n  }\n}\n"]}

package/dist-client/pages/application/applications.d.ts

@@ -52,7 +52,6 @@ export declare class Applications extends Applications_base {
     render(): import("lit-html").TemplateResult<1>;
     pageInitialized(): Promise<void>;
     private openEditor;
-    pageUpdated(_changes: any, _lifecycle: any): Promise<void>;
     fetchHandler({ page, limit, sortings, filters, search }: FetchOption): Promise<{
         total: number;
         records: any[];

package/dist-client/pages/application/applications.js

@@ -84,6 +84,7 @@ let Applications = class Applications extends p13n(localize(i18next)(PageView))
         .config=${this.config}
         .fetchHandler=${this.fetchHandler.bind(this)}
         .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')}
+        ?url-params-sensitive=${this.active}
       >
       </ox-grist>
 
@@ -164,12 +165,10 @@ let Applications = class Applications extends p13n(localize(i18next)(PageView))
             title: applicationId ? i18next.t('text.application') : i18next.t('text.register new application')
         });
     }
-    async pageUpdated(_changes, _lifecycle) {
-        if (this.active) {
-            await this.updateComplete;
-            this.grist.fetch();
-        }
-    }
+    /*
+     * No read on activation here: the list is bound to the address (FOOTER-BUTTON-REVIEW G09), so it reads its search,
+     * sort and page from the address itself whenever the page becomes active.
+     */
     async fetchHandler({ page, limit, sortings = [], filters = [], search }) {
         const response = await client.query({
             query: gql `

package/dist-client/pages/application/applications.js.map

@@ -1 +1 @@
-{"version":3,"file":"applications.js","sourceRoot":"","sources":["../../../client/pages/application/applications.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport '@operato/data-grist/ox-grist.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport type { DataGrist, FetchOption } from '@operato/data-grist'\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\nimport { PageView } from '@operato/shell'\nimport { CommonHeaderStyles, CommonGristStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles'\nimport { isMobileDevice } from '@operato/utils'\nimport { p13n } from '@operato/p13n'\n\nimport '../../components/application-editor.js'\nimport { applicationStatusLabel } from '../../utils/application-status.js'\nimport { listOutcome, pageFromResponse } from '../../utils/list-result.js'\n\n/**\n * Registered applications.\n *\n * ── What this screen looked like before ──────────────────────────────────────\n * A hand-written `<table>` with no paging, no sort and no search, and three columns that\n * were not data at all: \"API health\" printed OK, \"Installs\" printed 1, \"status\" printed\n * draft — written into the markup, identical on every row. The previous commit removed the\n * two the server cannot answer and made status real. This one gives the list the same shape\n * as every other list in the product.\n *\n * The server was already ready for it: `applications` takes ListParam and declares\n * `searchables: ['name', 'description']`, so paging, sorting and the header's search box all\n * work by passing the grist's own options through.\n *\n * ── Why the row does not carry health or install counts ──────────────────────\n * Because Application does not declare them. If they arrive one day, they are columns; until\n * then the screen says what it knows. See `utils/application-status.ts` for the matching rule\n * on values the screen has no word for.\n */\n@customElement('applications-page')\nexport class Applications extends p13n(localize(i18next)(PageView)) {\n  static styles = [\n    /* The work surface frame for a list screen (ADR-0060 decision 8). */\n    WorkSurfacePageStyles,\n    CommonGristStyles,\n    CommonHeaderStyles,\n    ScrollbarStyles,\n    css`\n\n      [failed] {\n        padding: var(--spacing-medium);\n        color: var(--md-sys-color-error);\n        font: var(--label-font, inherit);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) active: boolean = false\n  @property({ type: Object }) config: any\n  @property({ type: String }) mode: 'CARD' | 'LIST' | 'GRID' = isMobileDevice() ? 'CARD' : 'GRID'\n\n  /** The last fetch did not answer. Distinct from answering with nothing. */\n  @property({ type: Boolean }) failed: boolean = false\n\n  @query('ox-grist') private grist!: DataGrist\n\n  get context() {\n    return {\n      title: i18next.t('text.applications'),\n      help: 'auth/application',\n      search: {\n        handler: (search: string) => {\n          this.grist.searchText = search\n        },\n        value: this.grist?.searchText || ''\n      },\n      actions: [\n        {\n          title: i18next.t('button.register'),\n          action: () => this.openEditor(),\n          icon: 'add'\n        }\n      ]\n    }\n  }\n\n  render() {\n    return html`\n      <ox-grist\n        class=\"page-fill\"\n        search-mode=\"term\"\n        .mode=${this.mode}\n        .config=${this.config}\n        .fetchHandler=${this.fetchHandler.bind(this)}\n        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')!}\n      >\n      </ox-grist>\n\n      ${this.failed ? html`<div failed>${i18next.t('text.the list could not be loaded')}</div>` : ''}\n    `\n  }\n\n  async pageInitialized() {\n    this.config = {\n      rows: { appendable: false, selectable: { multiple: false } },\n      columns: [\n        { type: 'gutter', gutterName: 'sequence' },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'chevron_right',\n          title: i18next.t('button.detail'),\n          handlers: {\n            click: (_columns: any, _data: any, _column: any, record: any) => {\n              if (record?.id) {\n                this.openEditor(record.id)\n              }\n            }\n          }\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: i18next.t('field.name'),\n          record: { editable: false },\n          sortable: true,\n          width: 200\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: i18next.t('field.description'),\n          record: { editable: false },\n          width: 260\n        },\n        {\n          type: 'string',\n          name: 'type',\n          header: i18next.t('field.type'),\n          record: { align: 'center', editable: false },\n          sortable: true,\n          width: 120\n        },\n        {\n          type: 'string',\n          name: 'statusLabel',\n          header: i18next.t('field.status'),\n          record: { align: 'center', editable: false },\n          width: 120\n        },\n        {\n          type: 'datetime',\n          name: 'updatedAt',\n          header: i18next.t('field.updated at'),\n          sortable: true,\n          width: 180\n        }\n      ]\n    }\n  }\n\n  /*\n   * Registering and editing both happen over the list, the way every other resource in this\n   * package works. `application-register` and `application/{id}` were routes; nothing outside\n   * auth-ui linked to either.\n   */\n  private openEditor(applicationId?: string) {\n    const popup = openPopup(\n      html`<application-editor\n        .applicationId=${applicationId}\n        @application-changed=${() => this.grist.fetch()}\n        @close=${() => popup.close()}\n      ></application-editor>`,\n      {\n        backdrop: true,\n        size: 'medium',\n        title: applicationId ? i18next.t('text.application') : i18next.t('text.register new application')\n      }\n    )\n  }\n\n  async pageUpdated(_changes: any, _lifecycle: any) {\n    if (this.active) {\n      await this.updateComplete\n      this.grist.fetch()\n    }\n  }\n\n  async fetchHandler({ page, limit, sortings = [], filters = [], search }: FetchOption) {\n    const response = await client.query({\n      query: gql`\n        query ($search: String, $filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n          applications(search: $search, filters: $filters, pagination: $pagination, sortings: $sortings) {\n            items {\n              id\n              name\n              description\n              type\n              status\n              updatedAt\n            }\n            total\n          }\n        }\n      `,\n      variables: { search, filters, pagination: { page, limit }, sortings },\n      context: gqlContext()\n    })\n\n    const { items, total, failed } = listOutcome(pageFromResponse(response, 'applications'))\n\n    this.failed = failed\n\n    /*\n     * The status is turned into words here rather than in a cell renderer so the rule lives\n     * in one tested place — a value this screen has no word for is printed as it arrived.\n     */\n    return {\n      total,\n      records: items.map((item: any) => ({\n        ...item,\n        statusLabel: applicationStatusLabel(item.status, (key: string) => i18next.t(key))\n      }))\n    }\n  }\n}\n"]}
+{"version":3,"file":"applications.js","sourceRoot":"","sources":["../../../client/pages/application/applications.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport '@operato/data-grist/ox-grist.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport type { DataGrist, FetchOption } from '@operato/data-grist'\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\nimport { PageView } from '@operato/shell'\nimport { CommonHeaderStyles, CommonGristStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles'\nimport { isMobileDevice } from '@operato/utils'\nimport { p13n } from '@operato/p13n'\n\nimport '../../components/application-editor.js'\nimport { applicationStatusLabel } from '../../utils/application-status.js'\nimport { listOutcome, pageFromResponse } from '../../utils/list-result.js'\n\n/**\n * Registered applications.\n *\n * ── What this screen looked like before ──────────────────────────────────────\n * A hand-written `<table>` with no paging, no sort and no search, and three columns that\n * were not data at all: \"API health\" printed OK, \"Installs\" printed 1, \"status\" printed\n * draft — written into the markup, identical on every row. The previous commit removed the\n * two the server cannot answer and made status real. This one gives the list the same shape\n * as every other list in the product.\n *\n * The server was already ready for it: `applications` takes ListParam and declares\n * `searchables: ['name', 'description']`, so paging, sorting and the header's search box all\n * work by passing the grist's own options through.\n *\n * ── Why the row does not carry health or install counts ──────────────────────\n * Because Application does not declare them. If they arrive one day, they are columns; until\n * then the screen says what it knows. See `utils/application-status.ts` for the matching rule\n * on values the screen has no word for.\n */\n@customElement('applications-page')\nexport class Applications extends p13n(localize(i18next)(PageView)) {\n  static styles = [\n    /* The work surface frame for a list screen (ADR-0060 decision 8). */\n    WorkSurfacePageStyles,\n    CommonGristStyles,\n    CommonHeaderStyles,\n    ScrollbarStyles,\n    css`\n\n      [failed] {\n        padding: var(--spacing-medium);\n        color: var(--md-sys-color-error);\n        font: var(--label-font, inherit);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) active: boolean = false\n  @property({ type: Object }) config: any\n  @property({ type: String }) mode: 'CARD' | 'LIST' | 'GRID' = isMobileDevice() ? 'CARD' : 'GRID'\n\n  /** The last fetch did not answer. Distinct from answering with nothing. */\n  @property({ type: Boolean }) failed: boolean = false\n\n  @query('ox-grist') private grist!: DataGrist\n\n  get context() {\n    return {\n      title: i18next.t('text.applications'),\n      help: 'auth/application',\n      search: {\n        handler: (search: string) => {\n          this.grist.searchText = search\n        },\n        value: this.grist?.searchText || ''\n      },\n      actions: [\n        {\n          title: i18next.t('button.register'),\n          action: () => this.openEditor(),\n          icon: 'add'\n        }\n      ]\n    }\n  }\n\n  render() {\n    return html`\n      <ox-grist\n        class=\"page-fill\"\n        search-mode=\"term\"\n        .mode=${this.mode}\n        .config=${this.config}\n        .fetchHandler=${this.fetchHandler.bind(this)}\n        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')!}\n        ?url-params-sensitive=${this.active}\n      >\n      </ox-grist>\n\n      ${this.failed ? html`<div failed>${i18next.t('text.the list could not be loaded')}</div>` : ''}\n    `\n  }\n\n  async pageInitialized() {\n    this.config = {\n      rows: { appendable: false, selectable: { multiple: false } },\n      columns: [\n        { type: 'gutter', gutterName: 'sequence' },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'chevron_right',\n          title: i18next.t('button.detail'),\n          handlers: {\n            click: (_columns: any, _data: any, _column: any, record: any) => {\n              if (record?.id) {\n                this.openEditor(record.id)\n              }\n            }\n          }\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: i18next.t('field.name'),\n          record: { editable: false },\n          sortable: true,\n          width: 200\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: i18next.t('field.description'),\n          record: { editable: false },\n          width: 260\n        },\n        {\n          type: 'string',\n          name: 'type',\n          header: i18next.t('field.type'),\n          record: { align: 'center', editable: false },\n          sortable: true,\n          width: 120\n        },\n        {\n          type: 'string',\n          name: 'statusLabel',\n          header: i18next.t('field.status'),\n          record: { align: 'center', editable: false },\n          width: 120\n        },\n        {\n          type: 'datetime',\n          name: 'updatedAt',\n          header: i18next.t('field.updated at'),\n          sortable: true,\n          width: 180\n        }\n      ]\n    }\n  }\n\n  /*\n   * Registering and editing both happen over the list, the way every other resource in this\n   * package works. `application-register` and `application/{id}` were routes; nothing outside\n   * auth-ui linked to either.\n   */\n  private openEditor(applicationId?: string) {\n    const popup = openPopup(\n      html`<application-editor\n        .applicationId=${applicationId}\n        @application-changed=${() => this.grist.fetch()}\n        @close=${() => popup.close()}\n      ></application-editor>`,\n      {\n        backdrop: true,\n        size: 'medium',\n        title: applicationId ? i18next.t('text.application') : i18next.t('text.register new application')\n      }\n    )\n  }\n\n  /*\n   * No read on activation here: the list is bound to the address (FOOTER-BUTTON-REVIEW G09), so it reads its search,\n   * sort and page from the address itself whenever the page becomes active.\n   */\n\n  async fetchHandler({ page, limit, sortings = [], filters = [], search }: FetchOption) {\n    const response = await client.query({\n      query: gql`\n        query ($search: String, $filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n          applications(search: $search, filters: $filters, pagination: $pagination, sortings: $sortings) {\n            items {\n              id\n              name\n              description\n              type\n              status\n              updatedAt\n            }\n            total\n          }\n        }\n      `,\n      variables: { search, filters, pagination: { page, limit }, sortings },\n      context: gqlContext()\n    })\n\n    const { items, total, failed } = listOutcome(pageFromResponse(response, 'applications'))\n\n    this.failed = failed\n\n    /*\n     * The status is turned into words here rather than in a cell renderer so the rule lives\n     * in one tested place — a value this screen has no word for is printed as it arrived.\n     */\n    return {\n      total,\n      records: items.map((item: any) => ({\n        ...item,\n        statusLabel: applicationStatusLabel(item.status, (key: string) => i18next.t(key))\n      }))\n    }\n  }\n}\n"]}

package/dist-client/pages/audit/audit-page.d.ts

@@ -14,16 +14,8 @@ export declare class AuditPage extends AuditPageBase {
     static styles: CSSResultGroup;
     mode: 'CARD' | 'GRID' | 'LIST';
     private view;
-    private days;
-    private from;
-    private to;
-    private actor?;
-    private door?;
-    private outcome;
-    /** How many records each outcome chip would show under the other conditions, counted by the records' own door. */
-    private outcomes;
+    private asked;
     private auditHealth;
-    private get outcomeCounts();
     private get health();
     private grist;
     get context(): {
@@ -36,13 +28,22 @@ export declare class AuditPage extends AuditPageBase {
     render(): import("lit-html").TemplateResult<1>;
     private renderControls;
     private renderHealth;
-    private show;
-    private lastDays;
-    private pick;
+    /**
+     * Narrow the records to a person, a privilege or an outcome - from a number on the people or privileges view, or the
+     * 「모든 사람」·「모든 권한」 buttons. It shows the records and sets those of the grid's filters it names, keeping the
+     * others (the period among them); the grid writes them to the address and reads again.
+     */
     private narrow;
-    pageUpdated(_changes: any, _lifecycle: any): Promise<void>;
+    private filterColumns;
+    countHandler({ filters }: FetchOption): Promise<{
+        outcome?: undefined;
+    } | {
+        outcome: {
+            [k: string]: any;
+        };
+    }>;
     private configOf;
-    fetchHandler({ page, limit }: FetchOption): Promise<{
+    fetchHandler({ page, limit, filters }: FetchOption): Promise<{
         total: any;
         records: any;
     }>;

package/dist-client/pages/audit/audit-page.js

@@ -14,42 +14,23 @@ import { PageView } from '@operato/shell';
 import { ButtonStyles, CommonGristStyles, CommonHeaderStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles';
 import { isMobileDevice } from '@operato/utils';
 import { statusRenderer } from '../../components/user-status-renderer.js';
-import { doorWords, lastDays, recordWords } from '../../utils/audit-words.js';
+import { AUDIT_DEFAULT_DAYS, auditQueryOf, doorWords, recordWords } from '../../utils/audit-words.js';
 const PERIODS = [7, 30, 90];
 const VIEWS = ['people', 'doors', 'records'];
 const OUTCOMES = ['', 'denied', 'error', 'failed'];
 const AuditPageBase = p13n(localize(i18next)(PageView));
-function dateInputValue(date) {
-    const pad = (n) => String(n).padStart(2, '0');
-    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
-}
 let AuditPage = class AuditPage extends AuditPageBase {
     constructor() {
         super(...arguments);
         this.mode = isMobileDevice() ? 'LIST' : 'GRID';
-        this.view = 'people';
-        this.days = 30;
-        this.from = lastDays(30).from;
-        this.to = new Date();
-        this.outcome = '';
-        /** How many records each outcome chip would show under the other conditions, counted by the records' own door. */
         /*
-         * The outcome chips' numbers - the records' own door asked for its total once per outcome, under the period, the
-         * person and the privilege narrowed to, in one request. The chips keep their numbers while new ones are read.
+         * The view is page state: it switches the whole list - its columns and its query - not a condition of one list.
+         * The conditions - the period, the person and the privilege narrowed to, the outcome - are the grid's own filters,
+         * kept in the address (FOOTER-BUTTON-REVIEW G09), and every view declares the same ones, so a period chosen on one
+         * view holds on the others. `asked` is what the grid last read with; the narrowed person and privilege are said from it.
          */
-        this.outcomes = new QueryController(this, gql `
-      query (${OUTCOMES.map((_, at) => `$f${at}: AuditRecordFilter!`).join(', ')}) {
-        ${OUTCOMES.map((_, at) => `c${at}: auditRecords(filter: $f${at}) { total }`).join('\n')}
-      }
-    `, {
-            variables: () => {
-                if (this.view !== 'records')
-                    return undefined;
-                const filter = { from: this.from.toISOString(), to: this.to.toISOString(), actorId: this.actor?.id, door: this.door };
-                return Object.fromEntries(OUTCOMES.map((outcome, at) => [`f${at}`, { ...filter, outcome: outcome || undefined, page: 1, limit: 1 }]));
-            },
-            keepPrevious: true
-        });
+        this.view = 'people';
+        this.asked = [];
         this.auditHealth = new QueryController(this, gql `{ auditHealth { failures since } }`);
     }
     static { this.styles = [
@@ -63,24 +44,6 @@ let AuditPage = class AuditPage extends AuditPageBase {
         flex-wrap: wrap;
       }
 
-      [group] {
-        display: flex;
-        align-items: center;
-        gap: var(--spacing-tiny, 2px);
-      }
-
-      input[type='date'] {
-        height: var(--context-action-height, 28px);
-        box-sizing: border-box;
-        border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: var(--md-sys-shape-corner-small, 4px);
-        background: var(--md-sys-color-surface-container-lowest);
-        color: var(--md-sys-color-on-surface);
-        font: inherit;
-        font-size: var(--ui-t-body, 13px);
-        padding: 0 var(--spacing-small, 4px);
-      }
-
       [narrowed] {
         display: flex;
         align-items: center;
@@ -96,10 +59,6 @@ let AuditPage = class AuditPage extends AuditPageBase {
       }
     `
     ]; }
-    get outcomeCounts() {
-        const data = this.outcomes.data;
-        return new Map(OUTCOMES.map((outcome, at) => [outcome || 'all', data?.[`c${at}`]?.total ?? 0]));
-    }
     get health() {
         if (this.auditHealth.data?.auditHealth)
             return this.auditHealth.data.auditHealth;
@@ -115,7 +74,14 @@ let AuditPage = class AuditPage extends AuditPageBase {
         };
     }
     render() {
-        return html `${keyed(this.view, html `<ox-grist class="page-fill" .mode=${this.mode} .config=${this.configOf(this.view)} .fetchHandler=${this.fetchHandler.bind(this)}>
+        return html `${keyed(this.view, html `<ox-grist
+        class="page-fill"
+        .mode=${this.mode}
+        .config=${this.configOf(this.view)}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        .countHandler=${this.countHandler.bind(this)}
+        ?url-params-sensitive=${this.active}
+      >
         <div slot="headroom" class="header">
           <div class="filters">${this.renderControls()}</div>
         </div>
@@ -123,47 +89,27 @@ let AuditPage = class AuditPage extends AuditPageBase {
     }
     renderControls() {
         const t = i18next.t.bind(i18next);
-        /* One of each is always chosen: a press on the chosen chip leaves it chosen. */
-        const choose = (e, chosen, pick) => {
-            if (e.detail)
-                pick(e.detail);
-            else
-                e.target.value = chosen;
-        };
+        const { actor, door } = auditQueryOf(this.asked);
         return html `
       <ox-input-select-buttons
         .options=${VIEWS.map(view => ({ value: view, display: t(`audit.view.${view}`) }))}
         .value=${this.view}
-        @change=${(e) => choose(e, this.view, view => this.show(view))}
+        @change=${(e) => {
+            /* One view is always shown: a press on the chosen chip leaves it chosen. */
+            if (e.detail)
+                this.view = e.detail;
+            else
+                e.target.value = this.view;
+        }}
       ></ox-input-select-buttons>
 
-      <div group>
-        <ox-input-select-buttons
-          .options=${PERIODS.map(days => ({ value: String(days), display: t('audit.period.days', { count: days }) }))}
-          .value=${this.days ? String(this.days) : undefined}
-          @change=${(e) => choose(e, this.days ? String(this.days) : undefined, days => this.lastDays(Number(days)))}
-        ></ox-input-select-buttons>
-        <input type="date" aria-label=${t('audit.period.from')} .value=${dateInputValue(this.from)} @change=${(e) => this.pick('from', e)} />
-        <span>~</span>
-        <input type="date" aria-label=${t('audit.period.to')} .value=${dateInputValue(this.to)} @change=${(e) => this.pick('to', e)} />
-      </div>
+      <ox-filters-form without-search></ox-filters-form>
 
-      ${this.view === 'records'
-            ? html `<ox-input-select-buttons
-            .options=${OUTCOMES.map(outcome => ({
-                value: outcome || 'all',
-                display: t(outcome ? `audit.outcome.${outcome}` : 'audit.outcome.all'),
-                count: this.outcomeCounts.get(outcome || 'all') ?? 0
-            }))}
-            .value=${this.outcome || 'all'}
-            @change=${(e) => choose(e, this.outcome || 'all', outcome => this.narrow({ outcome: (outcome === 'all' ? '' : outcome) }))}
-          ></ox-input-select-buttons>`
-            : nothing}
-      ${this.view === 'records' && this.actor
-            ? html `<span narrowed>${this.actor.name}<button quiet small @click=${() => this.narrow({ actor: undefined })}>${t('audit.button.all-people')}</button></span>`
+      ${this.view === 'records' && actor
+            ? html `<span narrowed>${actor.name}<button quiet small @click=${() => this.narrow({ actor: undefined })}>${t('audit.button.all-people')}</button></span>`
             : nothing}
-      ${this.view === 'records' && this.door
-            ? html `<span narrowed>${doorWords(t, this.door)}<button quiet small @click=${() => this.narrow({ door: undefined })}>${t('audit.button.all-privileges')}</button></span>`
+      ${this.view === 'records' && door
+            ? html `<span narrowed>${doorWords(t, door)}<button quiet small @click=${() => this.narrow({ door: undefined })}>${t('audit.button.all-privileges')}</button></span>`
             : nothing}
       ${this.renderHealth()}
     `;
@@ -177,37 +123,74 @@ let AuditPage = class AuditPage extends AuditPageBase {
             return nothing;
         return html `<span health>${i18next.t('audit.health.failures', { count: health.failures, since: formatWhen(health.since, { lang: i18next.language, style: 'datetime' }) ?? '' })}</span>`;
     }
-    show(view) {
-        this.view = view;
-    }
-    lastDays(days) {
-        const { from, to } = lastDays(days);
-        this.days = days;
-        this.from = from;
-        this.to = to;
-        this.grist?.fetch();
+    /**
+     * Narrow the records to a person, a privilege or an outcome - from a number on the people or privileges view, or the
+     * 「모든 사람」·「모든 권한」 buttons. It shows the records and sets those of the grid's filters it names, keeping the
+     * others (the period among them); the grid writes them to the address and reads again.
+     */
+    async narrow(change) {
+        if (this.view !== 'records') {
+            this.view = 'records';
+            await this.updateComplete;
+        }
+        const values = { ...change, ...('outcome' in change ? { outcome: change.outcome || 'all' } : {}) };
+        const names = Object.keys(values);
+        const filters = [
+            ...(this.grist?.filters || []).filter((one) => !names.includes(one.name)),
+            ...names.filter(name => values[name] !== undefined).map(name => ({ name, operator: 'eq', value: values[name] }))
+        ];
+        this.grist?.dispatchEvent(new CustomEvent('fetch-params-change', { bubbles: true, composed: true, detail: { filters, from: 'audit-narrow' } }));
     }
-    pick(which, event) {
-        const value = event.target.value;
-        if (!value)
-            return;
-        const [year, month, day] = value.split('-').map(Number);
-        this[which] = which === 'from' ? new Date(year, month - 1, day, 0, 0, 0) : new Date(year, month - 1, day, 23, 59, 59, 999);
-        this.days = null;
-        this.grist?.fetch();
+    /*
+     * The conditions every view declares - hidden columns, since no column shows them. The day window and the dates are
+     * drawn on every view; the outcome only on the records; the person and the privilege are said beside the filters
+     * (`narrowed`) and set from the numbers, never typed.
+     */
+    filterColumns(view) {
+        const t = i18next.t.bind(i18next);
+        const hiddenColumn = (name, header, filter) => ({ type: 'string', name, header, hidden: true, record: { editable: false }, filter });
+        return [
+            hiddenColumn('days', t('audit.period.range'), {
+                type: 'select-buttons',
+                operator: 'eq',
+                label: '',
+                value: String(AUDIT_DEFAULT_DAYS),
+                options: PERIODS.map(days => ({ value: String(days), display: t('audit.period.days', { count: days }) }))
+            }),
+            hiddenColumn('period', t('audit.period.range'), { type: 'date', operator: 'between' }),
+            hiddenColumn('outcome', t('audit.view.records'), {
+                type: 'select-buttons',
+                operator: 'eq',
+                label: '',
+                value: 'all',
+                hidden: view !== 'records',
+                options: OUTCOMES.map(outcome => ({ value: outcome || 'all', display: t(outcome ? `audit.outcome.${outcome}` : 'audit.outcome.all') }))
+            }),
+            hiddenColumn('actor', t('audit.field.actor'), { type: 'string', operator: 'eq', hidden: true }),
+            hiddenColumn('door', t('audit.field.privilege'), { type: 'string', operator: 'eq', hidden: true })
+        ];
     }
-    narrow(change) {
-        Object.assign(this, change);
+    /*
+     * The outcome chips' numbers on the records view - the records' own door asked for its total once per outcome, under
+     * the period, the person and the privilege narrowed to, in one request.
+     */
+    async countHandler({ filters = [] }) {
         if (this.view !== 'records')
-            this.view = 'records';
-        else
-            this.grist?.fetch();
-    }
-    async pageUpdated(_changes, _lifecycle) {
-        if (this.active) {
-            await this.updateComplete;
-            this.grist?.fetch();
+            return {};
+        const { from, to, actor, door } = auditQueryOf(filters);
+        const filter = { from: from.toISOString(), to: to.toISOString(), actorId: actor?.id, door };
+        const response = await client.query({
+            query: gql `
+        query (${OUTCOMES.map((_, at) => `$f${at}: AuditRecordFilter!`).join(', ')}) {
+          ${OUTCOMES.map((_, at) => `c${at}: auditRecords(filter: $f${at}) { total }`).join('\n')}
         }
+      `,
+            variables: Object.fromEntries(OUTCOMES.map((outcome, at) => [`f${at}`, { ...filter, outcome: outcome || undefined, page: 1, limit: 1 }])),
+            fetchPolicy: 'no-cache'
+        });
+        if (response.errors?.length)
+            throw response.errors[0];
+        return { outcome: Object.fromEntries(OUTCOMES.map((outcome, at) => [outcome || 'all', response.data?.[`c${at}`]?.total ?? 0])) };
     }
     configOf(view) {
         const t = i18next.t.bind(i18next);
@@ -241,7 +224,8 @@ let AuditPage = class AuditPage extends AuditPageBase {
                     number('checkins', t('audit.field.checkins')),
                     number('failedSignins', t('audit.field.failed-signins'), record => this.narrow({ actor: person(record), door: undefined, outcome: 'failed' })),
                     number('granted', t('audit.field.granted'), record => this.narrow({ actor: person(record), door: undefined, outcome: '' })),
-                    number('denied', t('audit.field.denied'), record => this.narrow({ actor: person(record), door: undefined, outcome: 'denied' }))
+                    number('denied', t('audit.field.denied'), record => this.narrow({ actor: person(record), door: undefined, outcome: 'denied' })),
+                    ...this.filterColumns(view)
                 ]
             };
         }
@@ -261,7 +245,8 @@ let AuditPage = class AuditPage extends AuditPageBase {
                     },
                     number('people', t('audit.field.people')),
                     number('granted', t('audit.field.granted'), record => this.narrow({ door: record.door, actor: undefined, outcome: '' })),
-                    number('denied', t('audit.field.denied'), record => this.narrow({ door: record.door, actor: undefined, outcome: 'denied' }))
+                    number('denied', t('audit.field.denied'), record => this.narrow({ door: record.door, actor: undefined, outcome: 'denied' })),
+                    ...this.filterColumns(view)
                 ]
             };
         }
@@ -275,13 +260,16 @@ let AuditPage = class AuditPage extends AuditPageBase {
                 { type: 'string', name: 'operation', header: t('audit.field.request'), record: { editable: false }, width: 200 },
                 { type: 'string', name: 'what', header: t('audit.field.actions'), record: { editable: false }, width: 360 },
                 { type: 'string', name: 'ip', header: t('audit.field.address'), record: { editable: false }, width: 120 },
-                { type: 'integer', name: 'durationMs', header: t('audit.field.duration'), record: { editable: false, align: 'right' }, width: 80 }
+                { type: 'integer', name: 'durationMs', header: t('audit.field.duration'), record: { editable: false, align: 'right' }, width: 80 },
+                ...this.filterColumns(view)
             ]
         };
     }
-    async fetchHandler({ page, limit }) {
+    async fetchHandler({ page, limit, filters = [] }) {
         const t = i18next.t.bind(i18next);
-        const period = { from: this.from.toISOString(), to: this.to.toISOString() };
+        this.asked = filters;
+        const { from, to, actor, door, outcome } = auditQueryOf(filters);
+        const period = { from: from.toISOString(), to: to.toISOString() };
         if (this.view === 'people') {
             const response = await client.query({
                 query: gql `
@@ -379,9 +367,9 @@ let AuditPage = class AuditPage extends AuditPageBase {
             variables: {
                 filter: {
                     ...period,
-                    actorId: this.actor?.id,
-                    door: this.door,
-                    outcome: this.outcome || undefined,
+                    actorId: actor?.id,
+                    door,
+                    outcome: outcome || undefined,
                     page,
                     limit
                 }
@@ -413,28 +401,8 @@ __decorate([
 ], AuditPage.prototype, "view", void 0);
 __decorate([
     state(),
-    __metadata("design:type", Object)
-], AuditPage.prototype, "days", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Date)
-], AuditPage.prototype, "from", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Date)
-], AuditPage.prototype, "to", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], AuditPage.prototype, "actor", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", String)
-], AuditPage.prototype, "door", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", String)
-], AuditPage.prototype, "outcome", void 0);
+    __metadata("design:type", Array)
+], AuditPage.prototype, "asked", void 0);
 __decorate([
     query('ox-grist'),
     __metadata("design:type", Function)