npm - @things-factory/compliance - Versions diffs - 10.1.255 → 10.1.257 - Mend

@things-factory/compliance 10.1.255 → 10.1.257

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (86) hide show

package/dist-client/components/my-trainings.js CHANGED Viewed

@@ -1,9 +1,9 @@
-import { __decorate, __metadata } from "tslib";
+import { __decorate } from "tslib";
 import '@material/web/button/text-button.js';
 import gql from 'graphql-tag';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import { client } from '@operato/graphql';
+import { customElement } from 'lit/decorators.js';
+import { QueryController } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { trainingWord } from '../training-words.js';
 import { failureOf } from '../words.js';
@@ -15,9 +15,16 @@ import { openTrainingCertificateForm } from './training-certificate-form.js';
 let ComplianceMyTrainings = class ComplianceMyTrainings extends localize(i18next)(LitElement) {
     constructor() {
         super(...arguments);
-        this.rows = [];
-        this.loaded = false;
-        this.message = '';
+        /* The trainings the person owes, with the sessions they may take (ADR-0190). */
+        this.mine = new QueryController(this, gql `
+      query {
+        myTrainings {
+          kind year dueOn state
+          completion { id status completedOn returnReason }
+          sessions { id name method startsOn endsOn }
+        }
+      }
+    `);
     }
     static { this.styles = css `
     :host {
@@ -53,14 +60,16 @@ let ComplianceMyTrainings = class ComplianceMyTrainings extends localize(i18next
       margin: 0;
     }
   `; }
-    connectedCallback() {
-        super.connectedCallback();
-        this.fetch();
+    get rows() {
+        return this.mine.data?.myTrainings ?? [];
+    }
+    get message() {
+        return this.mine.error ? failureOf(this.mine.error) : '';
     }
     render() {
         if (this.message)
             return html `<p muted>${this.message}</p>`;
-        if (!this.loaded)
+        if (!this.mine.data)
             return nothing;
         if (!this.rows.length)
             return html `<p muted>${i18next.t('text.training-mine-empty')}</p>`;
@@ -99,49 +108,11 @@ let ComplianceMyTrainings = class ComplianceMyTrainings extends localize(i18next
       </tbody>
     </table>`;
     }
-    async fetch() {
-        try {
-            const response = await client.query({
-                query: gql `
-          query {
-            myTrainings {
-              kind year dueOn state
-              completion { id status completedOn returnReason }
-              sessions { id name method startsOn endsOn }
-            }
-          }
-        `,
-                fetchPolicy: 'network-only'
-            });
-            if (response.errors?.length)
-                throw response;
-            this.rows = response.data.myTrainings;
-            this.message = '';
-        }
-        catch (error) {
-            this.message = failureOf(error);
-        }
-        finally {
-            this.loaded = true;
-        }
-    }
     async upload(row) {
         if (await openTrainingCertificateForm({ kind: row.kind, year: row.year, sessions: row.sessions }))
-            this.fetch();
+            this.mine.refetch();
     }
 };
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], ComplianceMyTrainings.prototype, "rows", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], ComplianceMyTrainings.prototype, "loaded", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], ComplianceMyTrainings.prototype, "message", void 0);
 ComplianceMyTrainings = __decorate([
     customElement('compliance-my-trainings')
 ], ComplianceMyTrainings);

package/dist-client/components/my-trainings.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"my-trainings.js","sourceRoot":"","sources":["../../client/components/my-trainings.ts"],"names":[],"mappings":";AAAA,OAAO,qCAAqC,CAAA;AAE5C,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,~~KAAK,EAAE,~~MAAM,mBAAmB,CAAA;~~AAExD~~,OAAO,EAAE,~~MAAM~~,EAAE,MAAM,kBAAkB,CAAA;~~AACzC~~,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAA;AAE5E;;;GAGG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAjE;;~~QAoCY~~,SAAI,~~GAAU~~,~~EAAE~~,~~CAAA;QAChB~~,~~WAAM~~,GAAG,~~KAAK,~~CAAA~~;QACd~~,~~YAAO~~,~~GAAG,EAAE,~~CAAA;~~IA+E/B~~,CAAC;~~aApHQ~~,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiClB,AAjCY,CAiCZ;~~IAMD~~,~~iBAAiB~~;~~QACf~~,~~KAAK~~,CAAC,~~iBAAiB~~,EAAE,CAAA;~~QACzB~~,IAAI,CAAC,KAAK,EAAE,CAAA;~~IACd~~,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAA,YAAY,IAAI,CAAC,OAAO,MAAM,CAAA;QAC3D,IAAI,CAAC,IAAI,CAAC,~~MAAM~~;YAAE,OAAO,OAAO,CAAA;~~QAChC~~,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAA,YAAY,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,MAAM,CAAA;QACzF,OAAO,IAAI,CAAA;;;gBAGC,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;gBAChC,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;gBAClC,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;gBACjC,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC;;;;;UAKzC,IAAI,CAAC,IAAI,CAAC,GAAG,CACb,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA;kBACH,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC;kBAC9B,GAAG,CAAC,KAAK;;yBAEF,GAAG,CAAC,KAAK,IAAI,YAAY,CAAC,OAAO,EAAE,GAAG,CAAC,KAAK,CAAC;gBACtD,GAAG,CAAC,UAAU,EAAE,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,YAAY,GAAG,CAAC,UAAU,CAAC,WAAW,MAAM,CAAC,CAAC,CAAC,OAAO;gBACnG,GAAG,CAAC,KAAK,KAAK,UAAU,IAAI,GAAG,CAAC,UAAU,EAAE,MAAM,KAAK,UAAU;YACjE,CAAC,CAAC,IAAI,CAAA,YAAY,OAAO,CAAC,CAAC,CAAC,wBAAwB,EAAE,EAAE,MAAM,EAAE,GAAG,CAAC,UAAU,CAAC,YAAY,IAAI,EAAE,EAAE,CAAC,MAAM;YAC1G,CAAC,CAAC,OAAO;;;gBAGT,GAAG,CAAC,QAAQ,CAAC,MAAM;YACnB,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CACd,CAAC,GAAQ,EAAE,EAAE,CACX,IAAI,CAAA,MAAM,GAAG,CAAC,IAAI,MAAM,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,MAAM,KAAK,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,QAAQ,MAAM,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,MAAM,YAAY,CAAC,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,CACrK;YACH,CAAC,CAAC,IAAI,CAAA,YAAY,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC,MAAM;;;gBAGjE,GAAG,CAAC,KAAK,KAAK,UAAU;YACxB,CAAC,CAAC,IAAI,CAAA,0BAA0B,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,oCAAoC,CAAC,mBAAmB;YAC5H,CAAC,CAAC,OAAO;;gBAET,CACP;;aAEI,CAAA;IACX,CAAC;IAEO,KAAK,CAAC,~~KAAK;QACjB,IAAI,CAAC;YACH,~~MAAM,~~QAAQ,GAAG,MAAM,MAAM,~~CAAC,KAAK,CAAC;gBAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;SAQT;gBACD,WAAW,EAAE,cAAc;aAC5B,CAAC,CAAA;YACF,IAAK,QAAgB,CAAC,MAAM,EAAE,MAAM;gBAAE,MAAM,QAAQ,CAAA;YACpD,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAA;YACrC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;QACnB,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;QACjC,CAAC;gBAAS,CAAC;YACT,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;QACpB,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,MAAM,CAAC,GAAQ;QAC3B,IAAI,MAAM,2BAA2B,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;YAAE,IAAI,CAAC,~~KAAK~~,~~EAAE,CAAA;IACjH,~~CAAC~~;;AAhFgB;IAAhB~~,~~KAAK~~,EAAE~~;;mDAAyB;AAChB;IAAhB~~,~~KAAK,EAAE;;qDAAuB~~;~~AACd;IAAhB~~,~~KAAK,EAAE~~;;~~sDAAqB;AAtClB~~,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,~~CAqHjC~~","sourcesContent":["import '@material/web/button/text-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, ~~state~~ } from 'lit/decorators.js'\n\nimport { ~~client~~ } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\n\nimport { trainingWord } from '../training-words.js'\nimport { failureOf } from '../words.js'\nimport { openTrainingCertificateForm } from './training-certificate-form.js'\n\n/*\n 내 의무 교육 (ADR-0187 decisions 10, 17, 18) - this year's trainings the person must take: by when, whether done, the\n * sessions of it, and the certificate of one taken elsewhere. Only a certificate the manager confirmed is done.\n */\n@customElement('compliance-my-trainings')\nexport class ComplianceMyTrainings extends localize(i18next)(LitElement) {\n static styles = css`\n :host {\n display: block;\n color: var(--ui-ink);\n font-size: var(--ui-t-body, 13px);\n }\n table {\n width: 100%;\n border-collapse: collapse;\n }\n th,\n td {\n text-align: left;\n vertical-align: top;\n padding: var(--spacing-small, 4px) var(--spacing-medium, 8px);\n border-bottom: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));\n }\n th {\n color: var(--ui-muted);\n font-weight: normal;\n }\n [state='DONE'] {\n color: var(--ui-ok, var(--md-sys-color-primary));\n }\n [state='NOT_DONE'] {\n color: var(--ui-crit, var(--md-sys-color-error));\n }\n [muted] {\n color: var(--ui-muted);\n }\n p {\n margin: 0;\n }\n `\n\n ~~@state~~() private ~~rows:~~ ~~any[]~~ = []\n @state() ~~private~~ ~~loaded~~ = ~~false~~\n ~~@state()~~ ~~private~~ ~~message~~ = ''\n\n ~~connectedCallback~~() {\n ~~super~~.~~connectedCallback~~()\n this.~~fetch~~()\n }\n\n render() {\n if (this.message) return html`<p muted>${this.message}</p>`\n if (!this.~~loaded~~) return nothing\n if (!this.rows.length) return html`<p muted>${i18next.t('text.training-mine-empty')}</p>`\n return html`<table>\n <thead>\n <tr>\n <th>${i18next.t('field.training-kind')}</th>\n <th>${i18next.t('field.training-due-on')}</th>\n <th>${i18next.t('field.training-state')}</th>\n <th>${i18next.t('field.training-session')}</th>\n <th></th>\n </tr>\n </thead>\n <tbody>\n ${this.rows.map(\n row => html`<tr>\n <td>${trainingWord('kind', row.kind)}</td>\n <td>${row.dueOn}</td>\n <td>\n <p state=${row.state}>${trainingWord('state', row.state)}</p>\n ${row.completion?.status === 'CONFIRMED' ? html`<p muted>${row.completion.completedOn}</p>` : nothing}\n ${row.state === 'NOT_DONE' && row.completion?.status === 'RETURNED'\n ? html`<p muted>${i18next.t('text.training-returned', { reason: row.completion.returnReason ?? '' })}</p>`\n : nothing}\n </td>\n <td>\n ${row.sessions.length\n ? row.sessions.map(\n (one: any) =>\n html`<p>${one.name} · ${one.endsOn && one.endsOn !== one.startsOn ? `${one.startsOn} ~ ${one.endsOn}` : one.startsOn} · ${trainingWord('method', one.method)}</p>`\n )\n : html`<p muted>${i18next.t('text.training-no-session-yet')}</p>`}\n </td>\n <td>\n ${row.state === 'NOT_DONE'\n ? html`<md-text-button @click=${() => this.upload(row)}>${i18next.t('button.training-certificate-upload')}</md-text-button>`\n : nothing}\n </td>\n </tr>`\n )}\n </tbody>\n </table>`\n }\n\n private async fetch() {\n try {\n const response = await client.query({\n query: gql`\n query {\n myTrainings {\n kind year dueOn state\n completion { id status completedOn returnReason }\n sessions { id name method startsOn endsOn }\n }\n }\n `,\n fetchPolicy: 'network-only'\n })\n if ((response as any).errors?.length) throw response\n this.rows = response.data.myTrainings\n this.message = ''\n } catch (error) {\n this.message = failureOf(error)\n } finally {\n this.loaded = true\n }\n }\n\n private async upload(row: any) {\n if (await openTrainingCertificateForm({ kind: row.kind, year: row.year, sessions: row.sessions })) this.~~fetch~~()\n }\n}\n"]}
1	+ {"version":3,"file":"my-trainings.js","sourceRoot":"","sources":["../../client/components/my-trainings.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/text-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { QueryController } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\n\nimport { trainingWord } from '../training-words.js'\nimport { failureOf } from '../words.js'\nimport { openTrainingCertificateForm } from './training-certificate-form.js'\n\n/*\n 내 의무 교육 (ADR-0187 decisions 10, 17, 18) - this year's trainings the person must take: by when, whether done, the\n * sessions of it, and the certificate of one taken elsewhere. Only a certificate the manager confirmed is done.\n /\n@customElement('compliance-my-trainings')\nexport class ComplianceMyTrainings extends localize(i18next)(LitElement) {\n static styles = css`\n :host {\n display: block;\n color: var(--ui-ink);\n font-size: var(--ui-t-body, 13px);\n }\n table {\n width: 100%;\n border-collapse: collapse;\n }\n th,\n td {\n text-align: left;\n vertical-align: top;\n padding: var(--spacing-small, 4px) var(--spacing-medium, 8px);\n border-bottom: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));\n }\n th {\n color: var(--ui-muted);\n font-weight: normal;\n }\n [state='DONE'] {\n color: var(--ui-ok, var(--md-sys-color-primary));\n }\n [state='NOT_DONE'] {\n color: var(--ui-crit, var(--md-sys-color-error));\n }\n [muted] {\n color: var(--ui-muted);\n }\n p {\n margin: 0;\n }\n `\n\n / The trainings the person owes, with the sessions they may take (ADR-0190). */\n private mine = new QueryController(\n this,\n gql`\n query {\n myTrainings {\n kind year dueOn state\n completion { id status completedOn returnReason }\n sessions { id name method startsOn endsOn }\n }\n }\n `\n )\n\n private get rows(): any[] {\n return this.mine.data?.myTrainings ?? []\n }\n\n private get message() {\n return this.mine.error ? failureOf(this.mine.error) : ''\n }\n\n render() {\n if (this.message) return html`<p muted>${this.message}</p>`\n if (!this.mine.data) return nothing\n if (!this.rows.length) return html`<p muted>${i18next.t('text.training-mine-empty')}</p>`\n return html`<table>\n <thead>\n <tr>\n <th>${i18next.t('field.training-kind')}</th>\n <th>${i18next.t('field.training-due-on')}</th>\n <th>${i18next.t('field.training-state')}</th>\n <th>${i18next.t('field.training-session')}</th>\n <th></th>\n </tr>\n </thead>\n <tbody>\n ${this.rows.map(\n row => html`<tr>\n <td>${trainingWord('kind', row.kind)}</td>\n <td>${row.dueOn}</td>\n <td>\n <p state=${row.state}>${trainingWord('state', row.state)}</p>\n ${row.completion?.status === 'CONFIRMED' ? html`<p muted>${row.completion.completedOn}</p>` : nothing}\n ${row.state === 'NOT_DONE' && row.completion?.status === 'RETURNED'\n ? html`<p muted>${i18next.t('text.training-returned', { reason: row.completion.returnReason ?? '' })}</p>`\n : nothing}\n </td>\n <td>\n ${row.sessions.length\n ? row.sessions.map(\n (one: any) =>\n html`<p>${one.name} · ${one.endsOn && one.endsOn !== one.startsOn ? `${one.startsOn} ~ ${one.endsOn}` : one.startsOn} · ${trainingWord('method', one.method)}</p>`\n )\n : html`<p muted>${i18next.t('text.training-no-session-yet')}</p>`}\n </td>\n <td>\n ${row.state === 'NOT_DONE'\n ? html`<md-text-button @click=${() => this.upload(row)}>${i18next.t('button.training-certificate-upload')}</md-text-button>`\n : nothing}\n </td>\n </tr>`\n )}\n </tbody>\n </table>`\n }\n\n private async upload(row: any) {\n if (await openTrainingCertificateForm({ kind: row.kind, year: row.year, sessions: row.sessions })) this.mine.refetch()\n }\n}\n"]}

package/dist-client/components/seal-use-form.d.ts CHANGED Viewed

@@ -24,7 +24,7 @@ export declare class SealUseForm extends SealUseForm_base {
     static styles: import("lit").CSSResult[];
     prefill: SealUsePrefill;
     private kind;
-    private sealId;
+    private chosenSeal?;
     private requesterId;
     private usedOn;
     private document;
@@ -34,11 +34,14 @@ export declare class SealUseForm extends SealUseForm_base {
     private copies;
     private usableUntil;
     private notes;
-    private seals;
-    private people;
-    private working;
-    private message;
-    connectedCallback(): Promise<void>;
+    private choices;
+    private recording;
+    connectedCallback(): void;
+    private get seals();
+    private get people();
+    private get sealId();
+    private get working();
+    private get message();
     render(): import("lit-html").TemplateResult<1>;
     /** One value among many - the framework popup list with its search box on top. */
     private chooser;

package/dist-client/components/seal-use-form.js CHANGED Viewed

@@ -8,7 +8,7 @@ import '@operato/popup/ox-popup-list.js';
 import gql from 'graphql-tag';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { client } from '@operato/graphql';
+import { MutationController, QueryController } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { notify, openPopup } from '@operato/layout';
 import { CommonPopupStyles, FormFieldStyles, PopupBodyStyles, PopupFieldStyles } from '@operato/styles';
@@ -34,7 +34,6 @@ let SealUseForm = class SealUseForm extends localize(i18next)(LitElement) {
         super(...arguments);
         this.prefill = {};
         this.kind = 'STAMP';
-        this.sealId = '';
         this.requesterId = '';
         this.usedOn = today();
         this.document = '';
@@ -44,10 +43,23 @@ let SealUseForm = class SealUseForm extends localize(i18next)(LitElement) {
         this.copies = '1';
         this.usableUntil = '';
         this.notes = '';
-        this.seals = [];
-        this.people = [];
-        this.working = false;
-        this.message = '';
+        /* The seals in use and the employees who may ask for one (ADR-0190). */
+        this.choices = new QueryController(this, gql `
+      query {
+        companySeals(filters: [{ name: "disposedOn", operator: "is_null" }], pagination: { page: 1, limit: 100 }) {
+          items { id kind name }
+        }
+        employees(filters: [{ name: "retiredOn", operator: "is_null" }], pagination: { page: 1, limit: 500 }, sortings: [{ name: "name" }]) {
+          items { id name controlNo }
+        }
+      }
+    `);
+        /* Its failure is drawn under the notes, beside the form. */
+        this.recording = new MutationController(this, gql `
+      mutation ($use: NewSealUse!) {
+        recordSealUse(use: $use) { id status }
+      }
+    `, { showsError: true });
     }
     /* The house shape of a popup (page-standard sections 7, 8): only the body scrolls, fields are labels above native
        inputs, the one button row is `ox-popup-actions`. */
@@ -77,30 +89,30 @@ let SealUseForm = class SealUseForm extends localize(i18next)(LitElement) {
       }
     `
     ]; }
-    async connectedCallback() {
+    connectedCallback() {
         super.connectedCallback();
         const { kind, document, purpose, submittedTo } = this.prefill ?? {};
         Object.assign(this, { kind: kind ?? this.kind, document: document ?? '', purpose: purpose ?? '', submittedTo: submittedTo ?? '' });
-        const response = await client.query({
-            query: gql `
-        query {
-          companySeals(filters: [{ name: "disposedOn", operator: "is_null" }], pagination: { page: 1, limit: 100 }) {
-            items { id kind name }
-          }
-          employees(filters: [{ name: "retiredOn", operator: "is_null" }], pagination: { page: 1, limit: 500 }, sortings: [{ name: "name" }]) {
-            items { id name controlNo }
-          }
-        }
-      `,
-            fetchPolicy: 'no-cache'
-        });
+    }
+    get seals() {
         /* The kind is said beside a name that does not say it already - 「사용인감 1호」, not 「법인인감 (법인인감)」. */
         const named = (one) => (one.name.includes(wordOf('company-seal-kind', one.kind)) ? one.name : `${one.name} (${wordOf('company-seal-kind', one.kind)})`);
-        this.seals = (response.data?.companySeals?.items ?? []).map((one) => ({ value: one.id, display: named(one), kind: one.kind }));
-        this.people = (response.data?.employees?.items ?? []).map((one) => ({ value: one.id, display: one.controlNo ? `${one.name} · ${one.controlNo}` : one.name }));
+        return (this.choices.data?.companySeals?.items ?? []).map((one) => ({ value: one.id, display: named(one), kind: one.kind }));
+    }
+    get people() {
+        return (this.choices.data?.employees?.items ?? []).map((one) => ({ value: one.id, display: one.controlNo ? `${one.name} · ${one.controlNo}` : one.name }));
+    }
+    get sealId() {
+        if (this.chosenSeal !== undefined)
+            return this.chosenSeal;
         const wanted = this.prefill?.sealKind;
-        if (wanted)
-            this.sealId = this.seals.find(one => one.kind === wanted)?.value ?? '';
+        return (wanted && this.seals.find(one => one.kind === wanted)?.value) || '';
+    }
+    get working() {
+        return this.recording.pending;
+    }
+    get message() {
+        return this.recording.error ? failureOf(this.recording.error) : '';
     }
     render() {
         const certificate = this.kind === 'CERTIFICATE';
@@ -119,7 +131,7 @@ let SealUseForm = class SealUseForm extends localize(i18next)(LitElement) {
         <label class="field">
           <span>${i18next.t('field.seal-use-seal')}</span>
-          ${this.chooser(seals, this.sealId, value => (this.sealId = value))}
+          ${this.chooser(seals, this.sealId, value => (this.chosenSeal = value))}
         </label>
         <label class="field">
@@ -189,44 +201,27 @@ let SealUseForm = class SealUseForm extends localize(i18next)(LitElement) {
     </ox-select>`;
     }
     async record() {
-        this.message = '';
-        this.working = true;
-        try {
-            const certificate = this.kind === 'CERTIFICATE';
-            const response = await client.mutate({
-                mutation: gql `
-          mutation ($use: NewSealUse!) {
-            recordSealUse(use: $use) { id status }
-          }
-        `,
-                variables: {
-                    use: {
-                        kind: this.kind,
-                        sealId: this.sealId,
-                        requesterId: this.requesterId || null,
-                        usedOn: this.usedOn,
-                        document: certificate ? null : this.document,
-                        purpose: this.purpose,
-                        submittedTo: this.submittedTo,
-                        returnDueOn: this.kind === 'TAKE_OUT' ? this.returnDueOn || null : null,
-                        copies: certificate ? Number(this.copies) || null : null,
-                        usableUntil: certificate ? this.usableUntil || null : null,
-                        notes: this.notes
-                    }
-                }
-            });
-            if (response.errors?.length)
-                throw response;
-            const written = response.data.recordSealUse;
-            notify({ message: i18next.t(written.status === 'SUBMITTED' ? 'text.seal-use-submitted' : 'text.seal-use-recorded') });
-            this.dispatchEvent(new CustomEvent('recorded', { detail: written }));
-        }
-        catch (error) {
-            this.message = failureOf(error);
-        }
-        finally {
-            this.working = false;
-        }
+        const certificate = this.kind === 'CERTIFICATE';
+        const done = await this.recording.run({
+            use: {
+                kind: this.kind,
+                sealId: this.sealId,
+                requesterId: this.requesterId || null,
+                usedOn: this.usedOn,
+                document: certificate ? null : this.document,
+                purpose: this.purpose,
+                submittedTo: this.submittedTo,
+                returnDueOn: this.kind === 'TAKE_OUT' ? this.returnDueOn || null : null,
+                copies: certificate ? Number(this.copies) || null : null,
+                usableUntil: certificate ? this.usableUntil || null : null,
+                notes: this.notes
+            }
+        });
+        if (!done)
+            return;
+        const written = done.recordSealUse;
+        notify({ message: i18next.t(written.status === 'SUBMITTED' ? 'text.seal-use-submitted' : 'text.seal-use-recorded') });
+        this.dispatchEvent(new CustomEvent('recorded', { detail: written }));
     }
 };
 __decorate([
@@ -239,8 +234,8 @@ __decorate([
 ], SealUseForm.prototype, "kind", void 0);
 __decorate([
     state(),
-    __metadata("design:type", Object)
-], SealUseForm.prototype, "sealId", void 0);
+    __metadata("design:type", String)
+], SealUseForm.prototype, "chosenSeal", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -277,22 +272,6 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], SealUseForm.prototype, "notes", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], SealUseForm.prototype, "seals", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], SealUseForm.prototype, "people", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], SealUseForm.prototype, "working", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], SealUseForm.prototype, "message", void 0);
 SealUseForm = __decorate([
     customElement('seal-use-form')
 ], SealUseForm);

package/dist-client/components/seal-use-form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"seal-use-form.js","sourceRoot":"","sources":["../../client/components/seal-use-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/button/text-button.js'\nimport '@operato/input/ox-input-select-buttons.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-actions.js'\nimport '@operato/popup/ox-popup-list.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { CommonPopupStyles, FormFieldStyles, PopupBodyStyles, PopupFieldStyles } from '@operato/styles'\n\nimport { failureOf, USE_KINDS, wordOf } from '../words.js'\n\n/** What the form is opened with - a 사용인감계 just issued asks for the corporate seal's stamp on it. /\nexport interface SealUsePrefill {\n kind?: string\n sealKind?: string\n document?: string\n purpose?: string\n submittedTo?: string\n}\n\ntype Choice = { value: string; display: string; kind?: string }\n\n/* Opens the form; resolves with the written use, or null when the person closed it. /\nexport function openSealUseForm(prefill: SealUsePrefill = {}): Promise<any \| null> {\n return new Promise(resolve => {\n let done: any = null\n const handle: any = openPopup(\n html`<seal-use-form .prefill=${prefill} @close=${() => handle.close()} @recorded=${(e: CustomEvent) => ((done = e.detail), handle.close())}></seal-use-form>`,\n { backdrop: true, size: 'medium', title: i18next.t('title.seal-use-record') }\n )\n handle.onclosed = () => resolve(done)\n })\n}\n\nconst today = () => {\n const now = new Date()\n return new Date(now.getTime() - now.getTimezoneOffset() 60000).toISOString().slice(0, 10)\n}\n\n/*\n 날인 기록 쓰기 (ADR-0188 decision 2) - which seal, what was done with it, who asked, for which paper and where it goes.\n * The server decides whether it goes up for approval; the guide says when.\n /\n@customElement('seal-use-form')\nexport class SealUseForm extends localize(i18next)(LitElement) {\n / The house shape of a popup (page-standard sections 7, 8): only the body scrolls, fields are labels above native\n inputs, the one button row is `ox-popup-actions`. /\n static styles = [\n CommonPopupStyles,\n PopupBodyStyles,\n FormFieldStyles,\n PopupFieldStyles,\n css`\n [invalid] {\n color: var(--ui-crit, var(--md-sys-color-error));\n font-size: var(--ui-t-small, 11.5px);\n }\n [invalid]:empty {\n display: none;\n }\n [guide] p {\n margin: 0;\n color: var(--ui-muted);\n line-height: var(--popup-line-height);\n }\n ox-input-select-buttons {\n align-self: flex-start;\n }\n ox-select {\n width: 100%;\n }\n `\n ]\n\n @property({ type: Object }) prefill: SealUsePrefill = {}\n\n @state() private kind = 'STAMP'\n @state() private sealId = ''\n @state() private requesterId = ''\n @state() private usedOn = today()\n @state() private document = ''\n @state() private purpose = ''\n @state() private submittedTo = ''\n @state() private returnDueOn = ''\n @state() private copies = '1'\n @state() private usableUntil = ''\n @state() private notes = ''\n @state() private seals: Choice[] = []\n @state() private people: Choice[] = []\n @state() private working = false\n @state() private message = ''\n\n async connectedCallback() {\n super.connectedCallback()\n const { kind, document, purpose, submittedTo } = this.prefill ?? {}\n Object.assign(this, { kind: kind ?? this.kind, document: document ?? '', purpose: purpose ?? '', submittedTo: submittedTo ?? '' })\n const response = await client.query({\n query: gql`\n query {\n companySeals(filters: [{ name: \"disposedOn\", operator: \"is_null\" }], pagination: { page: 1, limit: 100 }) {\n items { id kind name }\n }\n employees(filters: [{ name: \"retiredOn\", operator: \"is_null\" }], pagination: { page: 1, limit: 500 }, sortings: [{ name: \"name\" }]) {\n items { id name controlNo }\n }\n }\n `,\n fetchPolicy: 'no-cache'\n })\n / The kind is said beside a name that does not say it already - 「사용인감 1호」, not 「법인인감 (법인인감)」. /\n const named = (one: any) => (one.name.includes(wordOf('company-seal-kind', one.kind)) ? one.name : `${one.name} (${wordOf('company-seal-kind', one.kind)})`)\n this.seals = (response.data?.companySeals?.items ?? []).map((one: any) => ({ value: one.id, display: named(one), kind: one.kind }))\n this.people = (response.data?.employees?.items ?? []).map((one: any) => ({ value: one.id, display: one.controlNo ? `${one.name} · ${one.controlNo}` : one.name }))\n const wanted = this.prefill?.sealKind\n if (wanted) this.sealId = this.seals.find(one => one.kind === wanted)?.value ?? ''\n }\n\n render() {\n const certificate = this.kind === 'CERTIFICATE'\n const seals = certificate ? this.seals.filter(one => one.kind === 'CORPORATE') : this.seals\n return html`\n <div class=\"body\">\n <div guide><p>${i18next.t('text.seal-use-approval-guide')}</p></div>\n\n <div class=\"field\">\n <ox-input-select-buttons\n .value=${this.kind}\n .options=${USE_KINDS.map(code => ({ display: wordOf('seal-use-kind', code), value: code }))}\n @change=${(e: CustomEvent) => e.detail && (this.kind = e.detail)}\n ></ox-input-select-buttons>\n </div>\n\n <label class=\"field\">\n <span>${i18next.t('field.seal-use-seal')}</span>\n ${this.chooser(seals, this.sealId, value => (this.sealId = value))}\n </label>\n\n <label class=\"field\">\n <span>${i18next.t('field.seal-use-requester')}</span>\n ${this.chooser(this.people, this.requesterId, value => (this.requesterId = value))}\n </label>\n\n <label class=\"field\">\n <span>${i18next.t(`field.seal-use-used-on-${this.kind.toLowerCase().replace('_', '-')}`)}</span>\n <input type=\"date\" .value=${this.usedOn} @input=${(e: any) => (this.usedOn = e.target.value)} />\n </label>\n\n ${certificate\n ? nothing\n : html`<label class=\"field\">\n <span>${i18next.t('field.seal-use-document')}</span>\n <input .value=${this.document} @input=${(e: any) => (this.document = e.target.value)} />\n </label>`}\n\n <label class=\"field\">\n <span>${i18next.t('field.seal-use-purpose')}</span>\n <input .value=${this.purpose} @input=${(e: any) => (this.purpose = e.target.value)} />\n </label>\n\n <label class=\"field\">\n <span>${i18next.t('field.seal-use-submitted-to')}</span>\n <input .value=${this.submittedTo} @input=${(e: any) => (this.submittedTo = e.target.value)} />\n </label>\n\n ${this.kind === 'TAKE_OUT'\n ? html`<label class=\"field\">\n <span>${i18next.t('field.seal-use-return-due-on')}</span>\n <input type=\"date\" .value=${this.returnDueOn} @input=${(e: any) => (this.returnDueOn = e.target.value)} />\n </label>`\n : nothing}\n ${certificate\n ? html`<label class=\"field\">\n <span>${i18next.t('field.seal-use-copies')}</span>\n <input type=\"number\" min=\"1\" .value=${this.copies} @input=${(e: any) => (this.copies = e.target.value)} />\n </label>\n <label class=\"field\">\n <span>${i18next.t('field.seal-use-usable-until')}</span>\n <input type=\"date\" .value=${this.usableUntil} @input=${(e: any) => (this.usableUntil = e.target.value)} />\n <span>${i18next.t('text.seal-use-usable-until-hint')}</span>\n </label>`\n : nothing}\n\n <label class=\"field\">\n <span>${i18next.t('field.seal-use-notes')}</span>\n <input .value=${this.notes} @input=${(e: any) => (this.notes = e.target.value)} />\n <span invalid>${this.message}</span>\n </label>\n </div>\n\n <ox-popup-actions>\n <md-text-button slot=\"cancel\" @click=${() => this.dispatchEvent(new CustomEvent('close'))}>${i18next.t('button.cancel')}</md-text-button>\n <md-filled-button slot=\"confirm\" ?disabled=${this.working} @click=${() => this.record()}>${i18next.t('button.seal-use-record')}</md-filled-button>\n </ox-popup-actions>\n `\n }\n\n /* One value among many - the framework popup list with its search box on top. */\n private chooser(options: Choice[], value: string, change: (value: string) => void) {\n const shown = options.find(one => one.value === value)?.display ?? '—'\n return html`<ox-select .value=${value} @change=${(e: CustomEvent) => String(e.detail ?? '') !== value && change(String(e.detail ?? ''))}>\n <span slot=\"label\">${shown}</span>\n <ox-popup-list align-left nowrap with-search>${options.map(one => html`<div option value=${one.value}>${one.display}</div>`)}</ox-popup-list>\n </ox-select>`\n }\n\n private async record() {\n this.message = ''\n this.working = true\n try {\n const certificate = this.kind === 'CERTIFICATE'\n const response = await client.mutate({\n mutation: gql`\n mutation ($use: NewSealUse!) {\n recordSealUse(use: $use) { id status }\n }\n `,\n variables: {\n use: {\n kind: this.kind,\n sealId: this.sealId,\n requesterId: this.requesterId \|\| null,\n usedOn: this.usedOn,\n document: certificate ? null : this.document,\n purpose: this.purpose,\n submittedTo: this.submittedTo,\n returnDueOn: this.kind === 'TAKE_OUT' ? this.returnDueOn \|\| null : null,\n copies: certificate ? Number(this.copies) \|\| null : null,\n usableUntil: certificate ? this.usableUntil \|\| null : null,\n notes: this.notes\n }\n }\n })\n if ((response as any).errors?.length) throw response\n const written = response.data.recordSealUse\n notify({ message: i18next.t(written.status === 'SUBMITTED' ? 'text.seal-use-submitted' : 'text.seal-use-recorded') })\n this.dispatchEvent(new CustomEvent('recorded', { detail: written }))\n } catch (error) {\n this.message = failureOf(error)\n } finally {\n this.working = false\n }\n }\n}\n"]}
1	+ {"version":3,"file":"seal-use-form.js","sourceRoot":"","sources":["../../client/components/seal-use-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/button/text-button.js'\nimport '@operato/input/ox-input-select-buttons.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-actions.js'\nimport '@operato/popup/ox-popup-list.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { MutationController, QueryController } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { CommonPopupStyles, FormFieldStyles, PopupBodyStyles, PopupFieldStyles } from '@operato/styles'\n\nimport { failureOf, USE_KINDS, wordOf } from '../words.js'\n\n/** What the form is opened with - a 사용인감계 just issued asks for the corporate seal's stamp on it. /\nexport interface SealUsePrefill {\n kind?: string\n sealKind?: string\n document?: string\n purpose?: string\n submittedTo?: string\n}\n\ntype Choice = { value: string; display: string; kind?: string }\n\n/* Opens the form; resolves with the written use, or null when the person closed it. /\nexport function openSealUseForm(prefill: SealUsePrefill = {}): Promise<any \| null> {\n return new Promise(resolve => {\n let done: any = null\n const handle: any = openPopup(\n html`<seal-use-form .prefill=${prefill} @close=${() => handle.close()} @recorded=${(e: CustomEvent) => ((done = e.detail), handle.close())}></seal-use-form>`,\n { backdrop: true, size: 'medium', title: i18next.t('title.seal-use-record') }\n )\n handle.onclosed = () => resolve(done)\n })\n}\n\nconst today = () => {\n const now = new Date()\n return new Date(now.getTime() - now.getTimezoneOffset() 60000).toISOString().slice(0, 10)\n}\n\n/*\n 날인 기록 쓰기 (ADR-0188 decision 2) - which seal, what was done with it, who asked, for which paper and where it goes.\n * The server decides whether it goes up for approval; the guide says when.\n /\n@customElement('seal-use-form')\nexport class SealUseForm extends localize(i18next)(LitElement) {\n / The house shape of a popup (page-standard sections 7, 8): only the body scrolls, fields are labels above native\n inputs, the one button row is `ox-popup-actions`. /\n static styles = [\n CommonPopupStyles,\n PopupBodyStyles,\n FormFieldStyles,\n PopupFieldStyles,\n css`\n [invalid] {\n color: var(--ui-crit, var(--md-sys-color-error));\n font-size: var(--ui-t-small, 11.5px);\n }\n [invalid]:empty {\n display: none;\n }\n [guide] p {\n margin: 0;\n color: var(--ui-muted);\n line-height: var(--popup-line-height);\n }\n ox-input-select-buttons {\n align-self: flex-start;\n }\n ox-select {\n width: 100%;\n }\n `\n ]\n\n @property({ type: Object }) prefill: SealUsePrefill = {}\n\n @state() private kind = 'STAMP'\n / The seal chosen - undefined until one is, while the one the prefill names stands. /\n @state() private chosenSeal?: string\n @state() private requesterId = ''\n @state() private usedOn = today()\n @state() private document = ''\n @state() private purpose = ''\n @state() private submittedTo = ''\n @state() private returnDueOn = ''\n @state() private copies = '1'\n @state() private usableUntil = ''\n @state() private notes = ''\n / The seals in use and the employees who may ask for one (ADR-0190). /\n private choices = new QueryController(\n this,\n gql`\n query {\n companySeals(filters: [{ name: \"disposedOn\", operator: \"is_null\" }], pagination: { page: 1, limit: 100 }) {\n items { id kind name }\n }\n employees(filters: [{ name: \"retiredOn\", operator: \"is_null\" }], pagination: { page: 1, limit: 500 }, sortings: [{ name: \"name\" }]) {\n items { id name controlNo }\n }\n }\n `\n )\n\n / Its failure is drawn under the notes, beside the form. /\n private recording = new MutationController(\n this,\n gql`\n mutation ($use: NewSealUse!) {\n recordSealUse(use: $use) { id status }\n }\n `,\n { showsError: true }\n )\n\n connectedCallback() {\n super.connectedCallback()\n const { kind, document, purpose, submittedTo } = this.prefill ?? {}\n Object.assign(this, { kind: kind ?? this.kind, document: document ?? '', purpose: purpose ?? '', submittedTo: submittedTo ?? '' })\n }\n\n private get seals(): Choice[] {\n / The kind is said beside a name that does not say it already - 「사용인감 1호」, not 「법인인감 (법인인감)」. /\n const named = (one: any) => (one.name.includes(wordOf('company-seal-kind', one.kind)) ? one.name : `${one.name} (${wordOf('company-seal-kind', one.kind)})`)\n return (this.choices.data?.companySeals?.items ?? []).map((one: any) => ({ value: one.id, display: named(one), kind: one.kind }))\n }\n\n private get people(): Choice[] {\n return (this.choices.data?.employees?.items ?? []).map((one: any) => ({ value: one.id, display: one.controlNo ? `${one.name} · ${one.controlNo}` : one.name }))\n }\n\n private get sealId(): string {\n if (this.chosenSeal !== undefined) return this.chosenSeal\n const wanted = this.prefill?.sealKind\n return (wanted && this.seals.find(one => one.kind === wanted)?.value) \|\| ''\n }\n\n private get working() {\n return this.recording.pending\n }\n\n private get message() {\n return this.recording.error ? failureOf(this.recording.error) : ''\n }\n\n render() {\n const certificate = this.kind === 'CERTIFICATE'\n const seals = certificate ? this.seals.filter(one => one.kind === 'CORPORATE') : this.seals\n return html`\n <div class=\"body\">\n <div guide><p>${i18next.t('text.seal-use-approval-guide')}</p></div>\n\n <div class=\"field\">\n <ox-input-select-buttons\n .value=${this.kind}\n .options=${USE_KINDS.map(code => ({ display: wordOf('seal-use-kind', code), value: code }))}\n @change=${(e: CustomEvent) => e.detail && (this.kind = e.detail)}\n ></ox-input-select-buttons>\n </div>\n\n <label class=\"field\">\n <span>${i18next.t('field.seal-use-seal')}</span>\n ${this.chooser(seals, this.sealId, value => (this.chosenSeal = value))}\n </label>\n\n <label class=\"field\">\n <span>${i18next.t('field.seal-use-requester')}</span>\n ${this.chooser(this.people, this.requesterId, value => (this.requesterId = value))}\n </label>\n\n <label class=\"field\">\n <span>${i18next.t(`field.seal-use-used-on-${this.kind.toLowerCase().replace('_', '-')}`)}</span>\n <input type=\"date\" .value=${this.usedOn} @input=${(e: any) => (this.usedOn = e.target.value)} />\n </label>\n\n ${certificate\n ? nothing\n : html`<label class=\"field\">\n <span>${i18next.t('field.seal-use-document')}</span>\n <input .value=${this.document} @input=${(e: any) => (this.document = e.target.value)} />\n </label>`}\n\n <label class=\"field\">\n <span>${i18next.t('field.seal-use-purpose')}</span>\n <input .value=${this.purpose} @input=${(e: any) => (this.purpose = e.target.value)} />\n </label>\n\n <label class=\"field\">\n <span>${i18next.t('field.seal-use-submitted-to')}</span>\n <input .value=${this.submittedTo} @input=${(e: any) => (this.submittedTo = e.target.value)} />\n </label>\n\n ${this.kind === 'TAKE_OUT'\n ? html`<label class=\"field\">\n <span>${i18next.t('field.seal-use-return-due-on')}</span>\n <input type=\"date\" .value=${this.returnDueOn} @input=${(e: any) => (this.returnDueOn = e.target.value)} />\n </label>`\n : nothing}\n ${certificate\n ? html`<label class=\"field\">\n <span>${i18next.t('field.seal-use-copies')}</span>\n <input type=\"number\" min=\"1\" .value=${this.copies} @input=${(e: any) => (this.copies = e.target.value)} />\n </label>\n <label class=\"field\">\n <span>${i18next.t('field.seal-use-usable-until')}</span>\n <input type=\"date\" .value=${this.usableUntil} @input=${(e: any) => (this.usableUntil = e.target.value)} />\n <span>${i18next.t('text.seal-use-usable-until-hint')}</span>\n </label>`\n : nothing}\n\n <label class=\"field\">\n <span>${i18next.t('field.seal-use-notes')}</span>\n <input .value=${this.notes} @input=${(e: any) => (this.notes = e.target.value)} />\n <span invalid>${this.message}</span>\n </label>\n </div>\n\n <ox-popup-actions>\n <md-text-button slot=\"cancel\" @click=${() => this.dispatchEvent(new CustomEvent('close'))}>${i18next.t('button.cancel')}</md-text-button>\n <md-filled-button slot=\"confirm\" ?disabled=${this.working} @click=${() => this.record()}>${i18next.t('button.seal-use-record')}</md-filled-button>\n </ox-popup-actions>\n `\n }\n\n /* One value among many - the framework popup list with its search box on top. */\n private chooser(options: Choice[], value: string, change: (value: string) => void) {\n const shown = options.find(one => one.value === value)?.display ?? '—'\n return html`<ox-select .value=${value} @change=${(e: CustomEvent) => String(e.detail ?? '') !== value && change(String(e.detail ?? ''))}>\n <span slot=\"label\">${shown}</span>\n <ox-popup-list align-left nowrap with-search>${options.map(one => html`<div option value=${one.value}>${one.display}</div>`)}</ox-popup-list>\n </ox-select>`\n }\n\n private async record() {\n const certificate = this.kind === 'CERTIFICATE'\n const done = await this.recording.run({\n use: {\n kind: this.kind,\n sealId: this.sealId,\n requesterId: this.requesterId \|\| null,\n usedOn: this.usedOn,\n document: certificate ? null : this.document,\n purpose: this.purpose,\n submittedTo: this.submittedTo,\n returnDueOn: this.kind === 'TAKE_OUT' ? this.returnDueOn \|\| null : null,\n copies: certificate ? Number(this.copies) \|\| null : null,\n usableUntil: certificate ? this.usableUntil \|\| null : null,\n notes: this.notes\n }\n })\n if (!done) return\n const written = done.recordSealUse\n notify({ message: i18next.t(written.status === 'SUBMITTED' ? 'text.seal-use-submitted' : 'text.seal-use-recorded') })\n this.dispatchEvent(new CustomEvent('recorded', { detail: written }))\n }\n}\n"]}

package/dist-client/components/training-attendance-form.d.ts CHANGED Viewed

@@ -25,12 +25,14 @@ export declare class TrainingAttendanceForm extends TrainingAttendanceForm_base
         startsOn: string;
         endsOn?: string | null;
     };
-    private people;
     private chosen;
     private completedOn;
-    private working;
-    private message;
-    connectedCallback(): Promise<void>;
+    private employees;
+    private recording;
+    connectedCallback(): void;
+    private get people();
+    private get working();
+    private get message();
     render(): import("lit-html").TemplateResult<1>;
     private record;
 }

package/dist-client/components/training-attendance-form.js CHANGED Viewed

@@ -8,7 +8,7 @@ import '@operato/popup/ox-popup-list.js';
 import gql from 'graphql-tag';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { client } from '@operato/graphql';
+import { MutationController, QueryController } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { notify, openPopup } from '@operato/layout';
 import { CommonPopupStyles, FormFieldStyles, PopupBodyStyles, PopupFieldStyles } from '@operato/styles';
@@ -28,11 +28,22 @@ export function openTrainingAttendanceForm(session) {
 let TrainingAttendanceForm = class TrainingAttendanceForm extends localize(i18next)(LitElement) {
     constructor() {
         super(...arguments);
-        this.people = [];
         this.chosen = [];
         this.completedOn = '';
-        this.working = false;
-        this.message = '';
+        /* The employees who may have attended (ADR-0190). */
+        this.employees = new QueryController(this, gql `
+      query {
+        employees(filters: [{ name: "retiredOn", operator: "is_null" }], pagination: { page: 1, limit: 500 }, sortings: [{ name: "name" }]) {
+          items { id name controlNo }
+        }
+      }
+    `);
+        /* Its failure is drawn under the attendees, beside the form. */
+        this.recording = new MutationController(this, gql `
+      mutation ($sessionId: String!, $employeeIds: [String!]!, $completedOn: String) {
+        recordTrainingAttendance(sessionId: $sessionId, employeeIds: $employeeIds, completedOn: $completedOn) { id }
+      }
+    `, { showsError: true });
     }
     static { this.styles = [
         CommonPopupStyles,
@@ -82,20 +93,18 @@ let TrainingAttendanceForm = class TrainingAttendanceForm extends localize(i18ne
       }
     `
     ]; }
-    async connectedCallback() {
+    connectedCallback() {
         super.connectedCallback();
         this.completedOn = this.session.endsOn || this.session.startsOn;
-        const response = await client.query({
-            query: gql `
-        query {
-          employees(filters: [{ name: "retiredOn", operator: "is_null" }], pagination: { page: 1, limit: 500 }, sortings: [{ name: "name" }]) {
-            items { id name controlNo }
-          }
-        }
-      `,
-            fetchPolicy: 'no-cache'
-        });
-        this.people = (response.data?.employees?.items ?? []).map((one) => ({ value: one.id, display: one.controlNo ? `${one.name} · ${one.controlNo}` : one.name }));
+    }
+    get people() {
+        return (this.employees.data?.employees?.items ?? []).map((one) => ({ value: one.id, display: one.controlNo ? `${one.name} · ${one.controlNo}` : one.name }));
+    }
+    get working() {
+        return this.recording.pending;
+    }
+    get message() {
+        return this.recording.error ? failureOf(this.recording.error) : '';
     }
     render() {
         const left = this.people.filter(one => !this.chosen.includes(one.value));
@@ -131,38 +140,17 @@ let TrainingAttendanceForm = class TrainingAttendanceForm extends localize(i18ne
     `;
     }
     async record() {
-        this.message = '';
-        this.working = true;
-        try {
-            const response = await client.mutate({
-                mutation: gql `
-          mutation ($sessionId: String!, $employeeIds: [String!]!, $completedOn: String) {
-            recordTrainingAttendance(sessionId: $sessionId, employeeIds: $employeeIds, completedOn: $completedOn) { id }
-          }
-        `,
-                variables: { sessionId: this.session.id, employeeIds: this.chosen, completedOn: this.completedOn || null }
-            });
-            if (response.errors?.length)
-                throw response;
-            notify({ message: i18next.t('text.training-attendance-recorded', { count: response.data.recordTrainingAttendance.length }) });
-            this.dispatchEvent(new CustomEvent('recorded'));
-        }
-        catch (error) {
-            this.message = failureOf(error);
-        }
-        finally {
-            this.working = false;
-        }
+        const done = await this.recording.run({ sessionId: this.session.id, employeeIds: this.chosen, completedOn: this.completedOn || null });
+        if (!done)
+            return;
+        notify({ message: i18next.t('text.training-attendance-recorded', { count: done.recordTrainingAttendance.length }) });
+        this.dispatchEvent(new CustomEvent('recorded'));
     }
 };
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)
 ], TrainingAttendanceForm.prototype, "session", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], TrainingAttendanceForm.prototype, "people", void 0);
 __decorate([
     state(),
     __metadata("design:type", Array)
@@ -171,14 +159,6 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], TrainingAttendanceForm.prototype, "completedOn", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], TrainingAttendanceForm.prototype, "working", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], TrainingAttendanceForm.prototype, "message", void 0);
 TrainingAttendanceForm = __decorate([
     customElement('training-attendance-form')
 ], TrainingAttendanceForm);