@things-factory/auth-ui 10.1.16 → 10.1.18

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

@@ -1,154 +1,250 @@
 import { __decorate, __metadata } from "tslib";
-import '@material/web/button/elevated-button.js';
-import '@material/web/button/outlined-button.js';
+import '@material/web/icon/icon.js';
+import '@operato/data-grist/ox-grist.js';
+import '@operato/context/ox-context-page-toolbar.js';
 import gql from 'graphql-tag';
 import { css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { client } from '@operato/graphql';
-import { navigate, PageView } from '@operato/shell';
-let Appliances = class Appliances extends PageView {
+import { customElement, property, query } from 'lit/decorators.js';
+import { client, gqlContext } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { openPopup } from '@operato/layout';
+import { PageView } from '@operato/shell';
+import { CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles';
+import { isMobileDevice } from '@operato/utils';
+import { p13n } from '@operato/p13n';
+import '../../components/appliance-editor.js';
+import { listOutcome, pageFromResponse } from '../../utils/list-result.js';
+/**
+ * Registered appliances.
+ *
+ * ── What this screen looked like before ──────────────────────────────────────
+ * A hand-written table with no paging, sorting or search, and three columns that were not
+ * data: "API health" printed OK, "Installs" printed 1, "status" printed draft, identical on
+ * every row. An appliance that had never checked in read exactly like one reporting fine.
+ * Those are gone — Appliance declares none of the three — and the columns here are the
+ * fields it does declare.
+ *
+ * ── ⚠ The access token is not asked for, and a test holds that ──────────────
+ * `Appliance.accessToken` carries its own
+ * `@privilege(category: "security", privilege: "query", domainOwnerGranted: true)`. A list
+ * is the wrong place for it regardless of who may read it: a token in a grid cell is a token
+ * in plain text beside a name, visible to everyone who can open the screen and to anyone
+ * looking over their shoulder. The screens that genuinely need it ask one record at a time.
+ *
+ * `appliance-list-query.test.ts` fails if the word reappears here.
+ */
+let Appliances = class Appliances extends p13n(localize(i18next)(PageView)) {
     constructor() {
         super(...arguments);
-        this.appliances = [];
+        this.active = false;
+        this.mode = isMobileDevice() ? 'CARD' : 'GRID';
+        /** The last fetch did not answer. Distinct from answering with nothing. */
+        this.failed = false;
     }
     static { this.styles = [
+        CommonGristStyles,
+        CommonHeaderStyles,
+        ScrollbarStyles,
         css `
-      :host {         background-color: var(--md-sys-color-background);
-        padding: var(--spacing-large);
-
-        overflow: auto;
- }
-
-      md-elevated-button {         text-transform: capitalize;
- }
-
-      md-outlined-button {         float: right;
-        margin-top: var(--spacing-medium);
-        text-transform: capitalize;
- }
-
-      h2 {         margin: var(--title-margin);
-        font: var(--title-font);
-        color: var(--title-text-color);
- }
-
-      [page-description] {         margin: var(--page-description-margin);
-        font: var(--page-description-font);
-        color: var(--page-description-color);
- }
-
-      table {         width: 100%;
-        margin: var(--spacing-large) 0;
-        border-collapse: collapse;
- }
-
-      tr {         background-color: var(--tr-background-color);
- }
-
-      tr:nth-child(odd) {         background-color: var(--tr-background-odd-color);
- }
-
-      tr:hover {         background-color: var(--tr-background-hover-color);
- }
-
-      th {         border-top: var(--th-border-top);
-        border-bottom: var(--td-border-bottom);
-        padding: var(--th-padding);
-
-        font: var(--th-font);
-        color: var(--th-color);
-        text-transform: var(--th-text-transform);
-        text-align: left;
- }
-
-      td {         padding: var(--td-padding);
-        border-bottom: var(--td-border-bottom);
-        font: var(--td-font);
-        color: var(--td-color);
- }
-
-      td a {         color: var(--md-sys-color-primary);
-        font: bold 16px var(--theme-font);
-
-        display: block;
-        text-decoration: none;
- }
-
-      .text-align-center {         text-align: center;
- }
-
-      .text-align-right {         text-align: right;
- }
-
-      @media screen and (max-width: 480px) {         :host {           padding: var(--spacing-medium);
- }
- }
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+
+      [failed] {
+        padding: var(--spacing-medium);
+        color: var(--md-sys-color-error);
+        font: var(--label-font, inherit);
+      }
     `
     ]; }
     get context() {
-        return { title: `appliance home`,
-            help: 'auth/appliance'
+        return {
+            title: i18next.t('text.appliances'),
+            help: 'auth/appliance',
+            search: {
+                handler: (search) => {
+                    this.grist.searchText = search;
+                },
+                value: this.grist?.searchText || ''
+            },
+            actions: [
+                {
+                    title: i18next.t('button.register'),
+                    action: () => this.openEditor(),
+                    icon: 'add'
+                }
+            ],
+            toolbar: false
         };
     }
     render() {
-        var appliances = this.appliances || [];
         return html `
-      <div>
-        <h2>Registered Appliances</h2>
-        <p page-description>
-          What type of appliance are you building?<br />Choose the app type that best suits the audience you’re building
-          for. The appliance type can’t be changed after it’s created.
-        </p>
-        <md-elevated-button @click=${e => navigate('appliance-register')}>register new appliance</md-elevated-button>
-      </div>
-
-      <table>
-        <tr>
-          <th>appliance name</th>
-          <th>API health</th>
-          <th>Installs</th>
-          <th>status</th>
-        </tr>
-        ${appliances.map(appliance => html `
-            <tr>
-              <td>
-                <a href=${`appliance/${appliance.id}`}>${appliance.name}</a>
-                ${appliance.description}
-              </td>
-              <td>OK</td>
-              <td class="text-align-center">1</td>
-              <td>draft</td>
-            </tr>
-          `)}
-      </table>
+      <ox-grist
+        .mode=${this.mode}
+        .config=${this.config}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')}
+      >
+        <div slot="headroom" class="header">
+          <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
+        </div>
+      </ox-grist>
+
+      ${this.failed ? html `<div failed>${i18next.t('text.the list could not be loaded')}</div>` : ''}
     `;
     }
-    async pageUpdated() {
+    async pageInitialized() {
+        this.config = {
+            rows: { appendable: false, selectable: { multiple: false } },
+            columns: [
+                { type: 'gutter', gutterName: 'sequence' },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'chevron_right',
+                    title: i18next.t('button.detail'),
+                    handlers: {
+                        click: (_columns, _data, _column, record) => {
+                            if (record?.id) {
+                                this.openEditor(record.id);
+                            }
+                        }
+                    }
+                },
+                {
+                    type: 'string',
+                    name: 'name',
+                    header: i18next.t('field.name'),
+                    record: { editable: false },
+                    sortable: true,
+                    width: 180
+                },
+                {
+                    type: 'string',
+                    name: 'serialNo',
+                    header: i18next.t('field.serial-no'),
+                    record: { editable: false },
+                    sortable: true,
+                    width: 160
+                },
+                {
+                    type: 'string',
+                    name: 'brand',
+                    header: i18next.t('field.brand'),
+                    record: { editable: false },
+                    sortable: true,
+                    width: 140
+                },
+                {
+                    type: 'string',
+                    name: 'model',
+                    header: i18next.t('field.model'),
+                    record: { editable: false },
+                    sortable: true,
+                    width: 140
+                },
+                {
+                    type: 'string',
+                    name: 'netmask',
+                    header: i18next.t('field.netmask'),
+                    record: { editable: false },
+                    width: 160
+                },
+                {
+                    type: 'string',
+                    name: 'description',
+                    header: i18next.t('field.description'),
+                    record: { editable: false },
+                    width: 240
+                },
+                {
+                    type: 'datetime',
+                    name: 'updatedAt',
+                    header: i18next.t('field.updated at'),
+                    sortable: true,
+                    width: 180
+                }
+            ]
+        };
+    }
+    /*
+     * Registering and editing both happen here, over the list, the way every other resource in
+     * this package works. `appliance-register` and `appliance/{id}` were routes; nothing outside
+     * auth-ui linked to either.
+     */
+    openEditor(applianceId) {
+        const popup = openPopup(html `<appliance-editor
+        .applianceId=${applianceId}
+        @appliance-changed=${() => this.grist.fetch()}
+        @close=${() => popup.close()}
+      ></appliance-editor>`, {
+            backdrop: true,
+            size: 'medium',
+            title: applianceId ? i18next.t('text.appliance') : i18next.t('text.register new appliance')
+        });
+    }
+    async pageUpdated(_changes, _lifecycle) {
         if (this.active) {
-            this.appliances = (await this.fetchAppliances()).items;
+            await this.updateComplete;
+            this.grist.fetch();
         }
     }
-    async fetchAppliances() {
-        const response = await client.query({ query: gql `
-        query {           appliances {             items {               id
+    async fetchHandler({ page, limit, sortings = [], filters = [] }) {
+        const response = await client.query({
+            query: gql `
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          appliances(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
               name
+              serialNo
+              brand
+              model
+              netmask
               description
- }
+              updatedAt
+            }
             total
- }
- }
-      `
-        });
-        if (!response.errors) {
-            return response.data.appliances;
+          }
         }
+      `,
+            variables: { filters, pagination: { page, limit }, sortings },
+            context: gqlContext()
+        });
+        const { items, total, failed } = listOutcome(pageFromResponse(response, 'appliances'));
+        this.failed = failed;
+        return { total, records: items };
     }
 };
 __decorate([
-    property({ type: Array }),
-    __metadata("design:type", Array)
-], Appliances.prototype, "appliances", void 0);
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], Appliances.prototype, "active", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], Appliances.prototype, "config", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Appliances.prototype, "mode", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], Appliances.prototype, "failed", void 0);
+__decorate([
+    query('ox-grist'),
+    __metadata("design:type", Function)
+], Appliances.prototype, "grist", void 0);
 Appliances = __decorate([
     customElement('appliance-home')
 ], Appliances);
+export { Appliances };
 //# sourceMappingURL=home.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"home.js","sourceRoot":"","sources":["../../../client/pages/appliance/home.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,yCAAyC,CAAA;AAEhD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGnD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ;IAAjC;;QA2E6B,eAAU,GAAU,EAAE,CAAA;IA6DnD,CAAC;aAxI4C,WAAM,GAAG;QAClD,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEF;KACF,AAzEgD,CAyEhD;IAID,IAAI,OAAO;QAAS,OAAO,EAAQ,KAAK,EAAE,gBAAgB;YACtD,IAAI,EAAE,gBAAgB;SAC1B,CAAA;IACD,CAAC;IAEA,MAAM;QAAS,IAAI,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE,CAAA;QAEnD,OAAO,IAAI,CAAA;;;;;;;qCAOsB,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,oBAAoB,CAAC;;;;;;;;;;UAU9D,UAAU,CAAC,GAAG,CACd,SAAS,CAAC,EAAE,CAAC,IAAI,CAAA;;;0BAGD,aAAa,SAAS,CAAC,EAAE,EAAE,IAAI,SAAS,CAAC,IAAI;kBACrD,SAAS,CAAC,WAAW;;;;;;WAM5B,CACF;;KAEJ,CAAA;IACJ,CAAC;IAEA,KAAK,CAAC,WAAW;QAAS,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAAO,IAAI,CAAC,UAAU,GAAG,CAAC,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,KAAK,CAAA;QAC1G,CAAC;IACD,CAAC;IAEA,KAAK,CAAC,eAAe;QAAS,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC,EAAQ,KAAK,EAAE,GAAG,CAAA;;;;;;;;OAQ/E;SACL,CAAC,CAAA;QAEC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YAAO,OAAO,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAA;QAChE,CAAC;IACD,CAAC;;AA5D2B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;8CAAuB;AA3E7C,UAAU;IADf,aAAa,CAAC,gBAAgB,CAAC;GAC1B,UAAU,CAwIf","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@material/web/button/outlined-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { navigate, PageView } from '@operato/shell'\n\n@customElement('appliance-home')\nclass Appliances extends PageView {   static styles = [\n    css`\n      :host {         background-color: var(--md-sys-color-background);\n        padding: var(--spacing-large);\n\n        overflow: auto;\n }\n\n      md-elevated-button {         text-transform: capitalize;\n }\n\n      md-outlined-button {         float: right;\n        margin-top: var(--spacing-medium);\n        text-transform: capitalize;\n }\n\n      h2 {         margin: var(--title-margin);\n        font: var(--title-font);\n        color: var(--title-text-color);\n }\n\n      [page-description] {         margin: var(--page-description-margin);\n        font: var(--page-description-font);\n        color: var(--page-description-color);\n }\n\n      table {         width: 100%;\n        margin: var(--spacing-large) 0;\n        border-collapse: collapse;\n }\n\n      tr {         background-color: var(--tr-background-color);\n }\n\n      tr:nth-child(odd) {         background-color: var(--tr-background-odd-color);\n }\n\n      tr:hover {         background-color: var(--tr-background-hover-color);\n }\n\n      th {         border-top: var(--th-border-top);\n        border-bottom: var(--td-border-bottom);\n        padding: var(--th-padding);\n\n        font: var(--th-font);\n        color: var(--th-color);\n        text-transform: var(--th-text-transform);\n        text-align: left;\n }\n\n      td {         padding: var(--td-padding);\n        border-bottom: var(--td-border-bottom);\n        font: var(--td-font);\n        color: var(--td-color);\n }\n\n      td a {         color: var(--md-sys-color-primary);\n        font: bold 16px var(--theme-font);\n\n        display: block;\n        text-decoration: none;\n }\n\n      .text-align-center {         text-align: center;\n }\n\n      .text-align-right {         text-align: right;\n }\n\n      @media screen and (max-width: 480px) {         :host {           padding: var(--spacing-medium);\n }\n }\n    `\n  ]\n\n  @property({ type: Array }) appliances: any[] = []\n\n  get context() {     return {       title: `appliance home`,\n      help: 'auth/appliance'\n }\n }\n\n  render() {     var appliances = this.appliances || []\n\n    return html`\n      <div>\n        <h2>Registered Appliances</h2>\n        <p page-description>\n          What type of appliance are you building?<br />Choose the app type that best suits the audience you’re building\n          for. The appliance type can’t be changed after it’s created.\n        </p>\n        <md-elevated-button @click=${e => navigate('appliance-register')}>register new appliance</md-elevated-button>\n      </div>\n\n      <table>\n        <tr>\n          <th>appliance name</th>\n          <th>API health</th>\n          <th>Installs</th>\n          <th>status</th>\n        </tr>\n        ${appliances.map(\n          appliance => html`\n            <tr>\n              <td>\n                <a href=${`appliance/${appliance.id}`}>${appliance.name}</a>\n                ${appliance.description}\n              </td>\n              <td>OK</td>\n              <td class=\"text-align-center\">1</td>\n              <td>draft</td>\n            </tr>\n          `\n        )}\n      </table>\n    `\n }\n\n  async pageUpdated() {     if (this.active) {       this.appliances = (await this.fetchAppliances()).items\n }\n }\n\n  async fetchAppliances() {     const response = await client.query({       query: gql`\n        query {           appliances {             items {               id\n              name\n              description\n }\n            total\n }\n }\n      `\n })\n\n    if (!response.errors) {       return response.data.appliances\n }\n }\n}\n"]}
+{"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'\nimport '@operato/context/ox-context-page-toolbar.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 } 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    CommonGristStyles,\n    CommonHeaderStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n      }\n\n      ox-grist {\n        overflow-y: auto;\n        flex: 1;\n      }\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      toolbar: false\n    }\n  }\n\n  render() {\n    return html`\n      <ox-grist\n        .mode=${this.mode}\n        .config=${this.config}\n        .fetchHandler=${this.fetchHandler.bind(this)}\n        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')!}\n      >\n        <div slot=\"headroom\" class=\"header\">\n          <ox-context-page-toolbar class=\"actions\" .context=${this.context}></ox-context-page-toolbar>\n        </div>\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 = [] }: FetchOption) {\n    const response = await client.query({\n      query: gql`\n        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n          appliances(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: { 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

@@ -1,2 +1,63 @@
-import '@material/web/button/elevated-button.js';
-import '@material/web/button/outlined-button.js';
+import '@material/web/icon/icon.js';
+import '@operato/data-grist/ox-grist.js';
+import '@operato/context/ox-context-page-toolbar.js';
+import type { FetchOption } from '@operato/data-grist';
+import { PageView } from '@operato/shell';
+import '../../components/application-editor.js';
+declare const Applications_base: (new (...args: any[]) => {
+    __preferenceProviders: {
+        [element: string]: import("@operato/p13n").PagePreferenceProvider;
+    };
+    getPagePreferenceProvider(element: string): import("@operato/p13n").PagePreferenceProvider | undefined;
+}) & (new (...args: any[]) => import("lit").LitElement) & typeof PageView;
+/**
+ * Registered applications.
+ *
+ * ── What this screen looked like before ──────────────────────────────────────
+ * A hand-written `<table>` with no paging, no sort and no search, and three columns that
+ * were not data at all: "API health" printed OK, "Installs" printed 1, "status" printed
+ * draft — written into the markup, identical on every row. The previous commit removed the
+ * two the server cannot answer and made status real. This one gives the list the same shape
+ * as every other list in the product.
+ *
+ * The server was already ready for it: `applications` takes ListParam and declares
+ * `searchables: ['name', 'description']`, so paging, sorting and the header's search box all
+ * work by passing the grist's own options through.
+ *
+ * ── Why the row does not carry health or install counts ──────────────────────
+ * Because Application does not declare them. If they arrive one day, they are columns; until
+ * then the screen says what it knows. See `utils/application-status.ts` for the matching rule
+ * on values the screen has no word for.
+ */
+export declare class Applications extends Applications_base {
+    static styles: import("lit").CSSResult[];
+    active: boolean;
+    config: any;
+    mode: 'CARD' | 'LIST' | 'GRID';
+    /** The last fetch did not answer. Distinct from answering with nothing. */
+    failed: boolean;
+    private grist;
+    get context(): {
+        title: string;
+        help: string;
+        search: {
+            handler: (search: string) => void;
+            value: string;
+        };
+        actions: {
+            title: string;
+            action: () => void;
+            icon: string;
+        }[];
+        toolbar: boolean;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    pageInitialized(): Promise<void>;
+    private openEditor;
+    pageUpdated(_changes: any, _lifecycle: any): Promise<void>;
+    fetchHandler({ page, limit, sortings, filters }: FetchOption): Promise<{
+        total: number;
+        records: any[];
+    }>;
+}
+export {};