@things-factory/figure-ui 10.1.178 → 10.1.179

package/dist-client/setting-let/figure-namespace-setting-let.js

@@ -1,19 +1,27 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/web/textfield/filled-text-field.js';
+import '@material/web/button/text-button.js';
 import '@things-factory/setting-base';
-import { css, html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
-import { fetchFigureNamespace, setFigureNamespace } from '../graphql/index.js';
+import { createFigureNamespace, fetchFigureNamespaces, setDefaultFigureNamespace, setFigureNamespaceState } from '../graphql/index.js';
 /**
- * The domain's figure namespace (ADR-0114): the `{namespace}` of every full name `{namespace}/{type}` a board stores.
- * Empty takes the subdomain. It is set once: when the domain's figures carry it, it is shown and no longer edited --
- * the server refuses a change either way, and says why.
+ * The namespaces the domain owns (LV figure-server design G1): the `{namespace}` of every full name `{namespace}/{type}`
+ * a board stores. A namespace is added once and never renamed; the default is the one new figures are created under;
+ * a suspended one takes no new figure and no release. The server refuses what it must and says why.
  */
 let FigureNamespaceSettingLet = class FigureNamespaceSettingLet extends localize(i18next)(LitElement) {
     constructor() {
         super(...arguments);
+        /* The server's calls; a check gives its own. */
+        this.list = fetchFigureNamespaces;
+        this.add = name => createFigureNamespace(name);
+        this.makeDefault = setDefaultFigureNamespace;
+        this.setState = setFigureNamespaceState;
+        this.draft = '';
         this.refused = '';
+        this.busy = false;
     }
     static { this.styles = [
         css `
@@ -23,70 +31,160 @@ let FigureNamespaceSettingLet = class FigureNamespaceSettingLet extends localize
         gap: var(--spacing-small, 4px);
         text-transform: none;
       }
-      md-filled-text-field {
-        width: 100%;
+      ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: grid;
+        gap: 2px;
       }
-      strong {
-        font: var(--label-font);
+      li {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 4px 12px;
+        min-height: 32px;
+      }
+      code {
+        font-family: var(--ui-mono, ui-monospace, monospace);
         color: var(--md-sys-color-on-surface);
       }
-      p {
-        margin: 0;
+      [mark] {
         font-size: 0.8rem;
         color: var(--md-sys-color-on-surface-variant);
       }
+      li[suspended] code {
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      [actions] {
+        margin-left: auto;
+        display: flex;
+        gap: 4px;
+      }
+      [add] {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      md-filled-text-field {
+        flex: 1;
+      }
     `
     ]; }
     render() {
-        const now = this.now;
+        const namespaces = this.namespaces;
         return html `
       <setting-let>
         <span slot="title">${i18next.t('figure.title.namespace-setting')}</span>
         <div slot="content">
-          ${!now
-            ? html ``
-            : now.fixed
-                ? html `<strong>${now.namespace}</strong>
-                  <p>${i18next.t('figure.text.namespace-fixed')}</p>`
-                : html `<md-filled-text-field
-                  .label=${i18next.t('figure.label.namespace')}
-                  .value=${now.written}
-                  placeholder=${now.subdomain}
-                  ?error=${!!this.refused || !now.namespace}
-                  error-text=${this.refused || i18next.t('figure.text.namespace-subdomain-unusable', { subdomain: now.subdomain })}
-                  supporting-text=${i18next.t('figure.text.namespace-empty-takes-subdomain', { subdomain: now.subdomain })}
-                  @change=${(e) => this.save(e.target.value)}
-                ></md-filled-text-field>`}
+          ${namespaces?.length
+            ? html `<ul>
+                ${namespaces.map(namespace => html `<li ?suspended=${namespace.state !== 'active'}>
+                    <code>${namespace.name}</code>
+                    ${namespace.isDefault ? html `<span mark>${i18next.t('figure.label.namespace-default')}</span>` : nothing}
+                    ${namespace.state !== 'active' ? html `<span mark>${i18next.t('figure.label.namespace-suspended')}</span>` : nothing}
+                    ${namespace.isDefault
+                ? nothing
+                : html `<span actions>
+                          ${namespace.state === 'active'
+                    ? html `<md-text-button ?disabled=${this.busy} @click=${() => this.run(() => this.makeDefault(namespace.name))}
+                                  >${i18next.t('figure.button.namespace-make-default')}</md-text-button
+                                ><md-text-button ?disabled=${this.busy} @click=${() => this.run(() => this.setState(namespace.name, 'suspended'))}
+                                  >${i18next.t('figure.button.namespace-suspend')}</md-text-button
+                                >`
+                    : html `<md-text-button ?disabled=${this.busy} @click=${() => this.run(() => this.setState(namespace.name, 'active'))}
+                                >${i18next.t('figure.button.namespace-activate')}</md-text-button
+                              >`}
+                        </span>`}
+                  </li>`)}
+              </ul>`
+            : nothing}
+          <div add>
+            <md-filled-text-field
+              .label=${i18next.t('figure.label.namespace')}
+              .value=${this.draft}
+              ?error=${!!this.refused}
+              error-text=${this.refused}
+              @input=${(e) => {
+            this.draft = e.target.value;
+            this.refused = '';
+        }}
+              @keydown=${(e) => e.key === 'Enter' && !e.isComposing && this.addDraft()}
+            ></md-filled-text-field>
+            <md-text-button ?disabled=${this.busy || !this.draft.trim()} @click=${() => this.addDraft()}>${i18next.t('figure.button.namespace-add')}</md-text-button>
+          </div>
         </div>
       </setting-let>
     `;
     }
     async firstUpdated() {
+        await this.reload();
+    }
+    async reload() {
         try {
-            this.now = await fetchFigureNamespace();
+            this.namespaces = await this.list();
         }
         catch (e) {
             this.refused = e.message;
         }
     }
-    async save(value) {
+    async addDraft() {
+        const name = this.draft.trim();
+        if (!name || this.busy)
+            return;
+        if (await this.run(() => this.add(name)))
+            this.draft = '';
+    }
+    /** One change, then the list read again. False when the server refused it; its reason is shown. */
+    async run(change) {
+        this.busy = true;
         try {
-            this.now = await setFigureNamespace(value);
+            await change();
             this.refused = '';
+            await this.reload();
+            return true;
         }
         catch (e) {
             this.refused = e.message;
+            return false;
+        }
+        finally {
+            this.busy = false;
         }
     }
 };
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Function)
+], FigureNamespaceSettingLet.prototype, "list", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Function)
+], FigureNamespaceSettingLet.prototype, "add", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Function)
+], FigureNamespaceSettingLet.prototype, "makeDefault", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Function)
+], FigureNamespaceSettingLet.prototype, "setState", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], FigureNamespaceSettingLet.prototype, "namespaces", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], FigureNamespaceSettingLet.prototype, "now", void 0);
+], FigureNamespaceSettingLet.prototype, "draft", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
 ], FigureNamespaceSettingLet.prototype, "refused", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureNamespaceSettingLet.prototype, "busy", void 0);
 FigureNamespaceSettingLet = __decorate([
     customElement('figure-namespace-setting-let')
 ], FigureNamespaceSettingLet);

package/dist-client/setting-let/figure-namespace-setting-let.js.map

@@ -1 +1 @@
-{"version":3,"file":"figure-namespace-setting-let.js","sourceRoot":"","sources":["../../client/setting-let/figure-namespace-setting-let.ts"],"names":[],"mappings":";AAAA,OAAO,8CAA8C,CAAA;AACrD,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAA6B,MAAM,qBAAqB,CAAA;AAEzG;;;;GAIG;AAEI,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAArE;;QAyBY,YAAO,GAAG,EAAE,CAAA;IA2C/B,CAAC;aAnEQ,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;KAmBF;KACF,AArBY,CAqBZ;IAKD,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAA;QACpB,OAAO,IAAI,CAAA;;6BAEc,OAAO,CAAC,CAAC,CAAC,gCAAgC,CAAC;;YAE5D,CAAC,GAAG;YACJ,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,GAAG,CAAC,KAAK;gBACT,CAAC,CAAC,IAAI,CAAA,WAAW,GAAG,CAAC,SAAS;uBACrB,OAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC,MAAM;gBACvD,CAAC,CAAC,IAAI,CAAA;2BACO,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC;2BACnC,GAAG,CAAC,OAAO;gCACN,GAAG,CAAC,SAAS;2BAClB,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,SAAS;+BAC5B,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,0CAA0C,EAAE,EAAE,SAAS,EAAE,GAAG,CAAC,SAAS,EAAE,CAAC;oCAC9F,OAAO,CAAC,CAAC,CAAC,6CAA6C,EAAE,EAAE,SAAS,EAAE,GAAG,CAAC,SAAS,EAAE,CAAC;4BAC9F,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;yCAChD;;;KAGpC,CAAA;IACH,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC;YACH,IAAI,CAAC,GAAG,GAAG,MAAM,oBAAoB,EAAE,CAAA;QACzC,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,IAAI,CAAC,OAAO,GAAI,CAAW,CAAC,OAAO,CAAA;QACrC,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,IAAI,CAAC,KAAa;QAC9B,IAAI,CAAC;YACH,IAAI,CAAC,GAAG,GAAG,MAAM,kBAAkB,CAAC,KAAK,CAAC,CAAA;YAC1C,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;QACnB,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,IAAI,CAAC,OAAO,GAAI,CAAW,CAAC,OAAO,CAAA;QACrC,CAAC;IACH,CAAC;;AA3CgB;IAAhB,KAAK,EAAE;;sDAAmC;AAC1B;IAAhB,KAAK,EAAE;;0DAAqB;AAzBlB,yBAAyB;IADrC,aAAa,CAAC,8BAA8B,CAAC;GACjC,yBAAyB,CAoErC","sourcesContent":["import '@material/web/textfield/filled-text-field.js'\nimport '@things-factory/setting-base'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\nimport { fetchFigureNamespace, setFigureNamespace, type FigureNamespaceState } from '../graphql/index.js'\n\n/**\n * The domain's figure namespace (ADR-0114): the `{namespace}` of every full name `{namespace}/{type}` a board stores.\n * Empty takes the subdomain. It is set once: when the domain's figures carry it, it is shown and no longer edited --\n * the server refuses a change either way, and says why.\n */\n@customElement('figure-namespace-setting-let')\nexport class FigureNamespaceSettingLet extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      /* A namespace is lower-case by rule: the card's capitalised words must not reach it, nor what is typed. */\n      div[slot='content'] {\n        display: grid;\n        gap: var(--spacing-small, 4px);\n        text-transform: none;\n      }\n      md-filled-text-field {\n        width: 100%;\n      }\n      strong {\n        font: var(--label-font);\n        color: var(--md-sys-color-on-surface);\n      }\n      p {\n        margin: 0;\n        font-size: 0.8rem;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n    `\n  ]\n\n  @state() private now?: FigureNamespaceState\n  @state() private refused = ''\n\n  render() {\n    const now = this.now\n    return html`\n      <setting-let>\n        <span slot=\"title\">${i18next.t('figure.title.namespace-setting')}</span>\n        <div slot=\"content\">\n          ${!now\n            ? html``\n            : now.fixed\n              ? html`<strong>${now.namespace}</strong>\n                  <p>${i18next.t('figure.text.namespace-fixed')}</p>`\n              : html`<md-filled-text-field\n                  .label=${i18next.t('figure.label.namespace')}\n                  .value=${now.written}\n                  placeholder=${now.subdomain}\n                  ?error=${!!this.refused || !now.namespace}\n                  error-text=${this.refused || i18next.t('figure.text.namespace-subdomain-unusable', { subdomain: now.subdomain })}\n                  supporting-text=${i18next.t('figure.text.namespace-empty-takes-subdomain', { subdomain: now.subdomain })}\n                  @change=${(e: Event) => this.save((e.target as HTMLInputElement).value)}\n                ></md-filled-text-field>`}\n        </div>\n      </setting-let>\n    `\n  }\n\n  async firstUpdated() {\n    try {\n      this.now = await fetchFigureNamespace()\n    } catch (e) {\n      this.refused = (e as Error).message\n    }\n  }\n\n  private async save(value: string) {\n    try {\n      this.now = await setFigureNamespace(value)\n      this.refused = ''\n    } catch (e) {\n      this.refused = (e as Error).message\n    }\n  }\n}\n"]}
+{"version":3,"file":"figure-namespace-setting-let.js","sourceRoot":"","sources":["../../client/setting-let/figure-namespace-setting-let.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/textfield/filled-text-field.js'\nimport '@material/web/button/text-button.js'\nimport '@things-factory/setting-base'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\nimport {\n  createFigureNamespace,\n  fetchFigureNamespaces,\n  setDefaultFigureNamespace,\n  setFigureNamespaceState,\n  type FigureNamespace\n} from '../graphql/index.js'\n\n/**\n * The namespaces the domain owns (LV figure-server design G1): the `{namespace}` of every full name `{namespace}/{type}`\n * a board stores. A namespace is added once and never renamed; the default is the one new figures are created under;\n * a suspended one takes no new figure and no release. The server refuses what it must and says why.\n */\n@customElement('figure-namespace-setting-let')\nexport class FigureNamespaceSettingLet extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      /* A namespace is lower-case by rule: the card's capitalised words must not reach it, nor what is typed. */\n      div[slot='content'] {\n        display: grid;\n        gap: var(--spacing-small, 4px);\n        text-transform: none;\n      }\n      ul {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        display: grid;\n        gap: 2px;\n      }\n      li {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: 4px 12px;\n        min-height: 32px;\n      }\n      code {\n        font-family: var(--ui-mono, ui-monospace, monospace);\n        color: var(--md-sys-color-on-surface);\n      }\n      [mark] {\n        font-size: 0.8rem;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n      li[suspended] code {\n        color: var(--md-sys-color-on-surface-variant);\n      }\n      [actions] {\n        margin-left: auto;\n        display: flex;\n        gap: 4px;\n      }\n      [add] {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n      }\n      md-filled-text-field {\n        flex: 1;\n      }\n    `\n  ]\n\n  /* The server's calls; a check gives its own. */\n  @property({ attribute: false }) list: () => Promise<FigureNamespace[]> = fetchFigureNamespaces\n  @property({ attribute: false }) add: (name: string) => Promise<FigureNamespace> = name => createFigureNamespace(name)\n  @property({ attribute: false }) makeDefault: (name: string) => Promise<FigureNamespace> = setDefaultFigureNamespace\n  @property({ attribute: false }) setState: (name: string, state: 'active' | 'suspended') => Promise<FigureNamespace> = setFigureNamespaceState\n\n  @state() private namespaces?: FigureNamespace[]\n  @state() private draft = ''\n  @state() private refused = ''\n  @state() private busy = false\n\n  render() {\n    const namespaces = this.namespaces\n    return html`\n      <setting-let>\n        <span slot=\"title\">${i18next.t('figure.title.namespace-setting')}</span>\n        <div slot=\"content\">\n          ${namespaces?.length\n            ? html`<ul>\n                ${namespaces.map(\n                  namespace => html`<li ?suspended=${namespace.state !== 'active'}>\n                    <code>${namespace.name}</code>\n                    ${namespace.isDefault ? html`<span mark>${i18next.t('figure.label.namespace-default')}</span>` : nothing}\n                    ${namespace.state !== 'active' ? html`<span mark>${i18next.t('figure.label.namespace-suspended')}</span>` : nothing}\n                    ${namespace.isDefault\n                      ? nothing\n                      : html`<span actions>\n                          ${namespace.state === 'active'\n                            ? html`<md-text-button ?disabled=${this.busy} @click=${() => this.run(() => this.makeDefault(namespace.name!))}\n                                  >${i18next.t('figure.button.namespace-make-default')}</md-text-button\n                                ><md-text-button ?disabled=${this.busy} @click=${() => this.run(() => this.setState(namespace.name!, 'suspended'))}\n                                  >${i18next.t('figure.button.namespace-suspend')}</md-text-button\n                                >`\n                            : html`<md-text-button ?disabled=${this.busy} @click=${() => this.run(() => this.setState(namespace.name!, 'active'))}\n                                >${i18next.t('figure.button.namespace-activate')}</md-text-button\n                              >`}\n                        </span>`}\n                  </li>`\n                )}\n              </ul>`\n            : nothing}\n          <div add>\n            <md-filled-text-field\n              .label=${i18next.t('figure.label.namespace')}\n              .value=${this.draft}\n              ?error=${!!this.refused}\n              error-text=${this.refused}\n              @input=${(e: Event) => {\n                this.draft = (e.target as HTMLInputElement).value\n                this.refused = ''\n              }}\n              @keydown=${(e: KeyboardEvent) => e.key === 'Enter' && !e.isComposing && this.addDraft()}\n            ></md-filled-text-field>\n            <md-text-button ?disabled=${this.busy || !this.draft.trim()} @click=${() => this.addDraft()}>${i18next.t('figure.button.namespace-add')}</md-text-button>\n          </div>\n        </div>\n      </setting-let>\n    `\n  }\n\n  async firstUpdated() {\n    await this.reload()\n  }\n\n  private async reload() {\n    try {\n      this.namespaces = await this.list()\n    } catch (e) {\n      this.refused = (e as Error).message\n    }\n  }\n\n  private async addDraft() {\n    const name = this.draft.trim()\n    if (!name || this.busy) return\n    if (await this.run(() => this.add(name))) this.draft = ''\n  }\n\n  /** One change, then the list read again. False when the server refused it; its reason is shown. */\n  private async run(change: () => Promise<unknown>): Promise<boolean> {\n    this.busy = true\n    try {\n      await change()\n      this.refused = ''\n      await this.reload()\n      return true\n    } catch (e) {\n      this.refused = (e as Error).message\n      return false\n    } finally {\n      this.busy = false\n    }\n  }\n}\n"]}