@things-factory/invoice 10.1.256 → 10.1.258

package/dist-client/pages/invoice-editor.js

@@ -5,18 +5,19 @@ import gql from 'graphql-tag';
 import { css, html, nothing } from 'lit';
 import { customElement, query, state } from 'lit/decorators.js';
 import { DataGrist } from '@operato/data-grist';
-import { client } from '@operato/graphql';
+import { client, MutationController, QueryController } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { notify } from '@operato/layout';
 import { OxPrompt } from '@operato/popup/ox-prompt.js';
-import { navigate, PageView } from '@operato/shell';
+import { navigate, PageView, DraftController } from '@operato/shell';
 import { ButtonStyles, CommonGristStyles, DocumentPageStyles, FormFieldStyles, ScrollbarStyles } from '@operato/styles';
+import { hasPrivilege } from '@things-factory/auth-base/dist-client';
 import { daysAfter, nextInvoiceNumber } from '@things-factory/invoice/dist-shared/document-start.js';
 import { documentAmount } from '../document/document-amount';
 import { DocumentFormStyles, renderDocumentHead, renderDocumentTotals } from '../document/document-form';
 import { documentLinesConfig, linesOf, onLineChange, reckonLines } from '../document/document-lines';
 import { partyOfName } from '../document/document-party';
-import { documentDefaults, headFromDefaults, OUR_SIDE_FIELDS, oursFromLast } from '../document/document-defaults';
+import { DOCUMENT_DEFAULTS, DOCUMENT_DEFAULTS_READER, headFromDefaults, OUR_SIDE_FIELDS, oursFromLast } from '../document/document-defaults';
 import { openDocumentPreview } from '../document/document-preview';
 import { invoiceStatusWord } from '../entity360/invoice-360';
 import { invoiceLinkSection } from '../invoice-attach';
@@ -62,18 +63,36 @@ const PAYMENT_DAYS = 30;
 let InvoiceEditor = class InvoiceEditor extends localize(i18next)(PageView) {
     constructor() {
         super(...arguments);
-        this.invoice = null;
-        this.form = blank();
-        this.loading = false;
-        this.error = null;
-        this.busy = false;
-        this.voidReason = '';
         /** The totals of the lines as typed - reckoned as the invoice will keep them, shown before it is saved. */
-        this.amounts = {};
-        /** The company's words a new invoice starts with, and the payment terms it offers (ADR-0170). */
-        this.defaults = null;
-        /** The number a new invoice was offered - it follows the direction while the person leaves it. */
-        this.suggestedNumber = '';
+        this.typedAmounts = null;
+        /** Whether this person may read the company's words - unknown, and nothing read, until asked. */
+        this.defaultsReadable = false;
+        /* The company's words, the invoice the address names, and the last sales invoice a new one follows (ADR-0190). */
+        this.companyDefaults = new QueryController(this, DOCUMENT_DEFAULTS, { variables: () => (this.defaultsReadable ? {} : undefined) });
+        this.record = new QueryController(this, gql(`query ($id: String!) { invoice(id: $id) { ${FIELDS} } }`), {
+            variables: () => (this.invoiceId ? { id: this.invoiceId } : undefined)
+        });
+        this.last = new QueryController(this, gql `
+      query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+        invoices(filters: $filters, pagination: $pagination, sortings: $sortings) { items { number ${OUR_SIDE_FIELDS.join(' ')} } }
+      }
+    `, {
+            variables: () => this.address && !this.address.id
+                ? { filters: [{ name: 'direction', operator: 'eq', value: 'SALES' }], pagination: { page: 1, limit: 1 }, sortings: [{ name: 'createdAt', desc: true }] }
+                : undefined
+        });
+        /* What is typed over the invoice read, or over what a new one starts with; the lines are the grid's. */
+        this.draft = new DraftController(this, { read: () => this.formRead, key: () => this.address });
+        /* The reason an issued one is voided with. */
+        this.voiding = new DraftController(this, { read: () => ({ reason: '' }), key: () => this.address });
+        /* Every change of the invoice reads it again once it is done. */
+        this.saves = {
+            create: new MutationController(this, gql `mutation ($invoice: NewInvoice!) { invoice: createInvoice(invoice: $invoice) { id } }`),
+            update: this.saving(gql `mutation ($id: String!, $invoice: NewInvoice!) { invoice: updateInvoice(id: $id, invoice: $invoice) { id } }`),
+            issue: this.saving(gql `mutation ($id: String!) { invoice: issueInvoice(id: $id) { id } }`),
+            void: this.saving(gql `mutation ($id: String!, $reason: String!) { invoice: voidInvoice(id: $id, reason: $reason) { id } }`)
+        };
+        this.relined = false;
     }
     static { this.styles = [
         FormFieldStyles,
@@ -88,6 +107,49 @@ let InvoiceEditor = class InvoiceEditor extends localize(i18next)(PageView) {
       }
     `
     ]; }
+    saving(mutation) {
+        return new MutationController(this, mutation, { refetch: () => [this.record] });
+    }
+    get invoiceId() {
+        return this.address?.id ?? '';
+    }
+    /** The company's words a new invoice starts with, and the payment terms it offers (ADR-0170) - none until read. */
+    get defaults() {
+        return this.companyDefaults.data?.documentDefaults ?? null;
+    }
+    get invoice() {
+        return (this.invoiceId && this.record.data?.invoice) || null;
+    }
+    /** What the form shows unedited: the invoice read, or what a new one starts with. */
+    get formRead() {
+        if (!this.address)
+            return undefined;
+        return this.address.id ? (this.invoice ?? undefined) : this.start;
+    }
+    /** The form as it shows: each field's edit, else what was read. */
+    get form() {
+        return { ...blank(), ...this.formRead, ...this.draft.edits };
+    }
+    /** The totals of the lines as typed, else as the invoice keeps them. */
+    get amounts() {
+        return this.typedAmounts ?? this.invoice ?? {};
+    }
+    get voidReason() {
+        return this.voiding.value('reason') ?? '';
+    }
+    /** A failed read, or an invoice the address names that is not there. */
+    get error() {
+        if (this.record.error)
+            return this.record.error;
+        return this.invoiceId && this.record.data && !this.record.data.invoice ? new Error(i18next.t('text.invoice-not-found')) : null;
+    }
+    get loading() {
+        return this.record.loading;
+    }
+    /** Runs one request at a time. */
+    get busy() {
+        return Object.values(this.saves).some(save => save.pending);
+    }
     get received() {
         return this.form.taxBasis === 'RECEIVED';
     }
@@ -111,28 +173,34 @@ let InvoiceEditor = class InvoiceEditor extends localize(i18next)(PageView) {
             actions: this.error ? [] : actions
         };
     }
-    async pageUpdated(changes, lifecycle) {
+    pageUpdated(changes, lifecycle) {
         if (!this.active || !(changes.active || changes.params))
             return;
         const id = lifecycle?.params?.id;
-        if (!this.defaults)
-            this.defaults = await documentDefaults();
-        if (!id) {
-            this.invoice = null;
-            this.form = blank();
-            this.amounts = {};
-            this.configure();
-            this.updateContext();
-            /* Started, not waited for - the page's title stands meanwhile. */
-            this.prefill();
+        if (!this.defaultsReadable)
+            hasPrivilege(DOCUMENT_DEFAULTS_READER).then(may => (this.defaultsReadable = !!may));
+        this.address = id ? { id } : {};
+    }
+    willUpdate(changes) {
+        super.willUpdate(changes);
+        const source = this.invoiceId ? this.invoice : JSON.stringify(this.address ?? null);
+        if (source === this.lined)
             return;
-        }
-        if (id !== this.invoice?.id)
-            await this.load(id);
+        this.lined = source;
+        this.typedAmounts = null;
+        this.configure();
+        this.relined = true;
+    }
+    updated(changes) {
+        super.updated(changes);
+        if (!this.relined)
+            return;
+        this.relined = false;
+        this.grist?.fetch();
     }
     render() {
         const links = this.invoice ? invoiceLinkSection() : undefined;
-        return html `<ox-page-state .loading=${this.loading} .error=${this.error} @retry=${() => this.invoice && this.load(this.invoice.id)}>
+        return html `<ox-page-state .loading=${this.loading} .error=${this.error} @retry=${() => this.record.refetch()}>
       <div class="page">
         <section class="page-section">
           <header class="page-section-header"><h3>${i18next.t('text.invoice-section-head')}</h3></header>
@@ -146,8 +214,8 @@ let InvoiceEditor = class InvoiceEditor extends localize(i18next)(PageView) {
           <ox-grist
             mode="GRID"
             .config=${this.gristConfig}
-            .fetchHandler=${() => ({ total: this.form.items.length, records: this.form.items })}
-            @record-change=${(e) => (this.amounts = onLineChange(this.grist, e, this.form.currency, this.received, this.form.discountAmount))}
+            .fetchHandler=${() => ({ total: (this.form.items ?? []).length, records: (this.form.items ?? []).map((item) => ({ ...item })) })}
+            @record-change=${(e) => (this.typedAmounts = onLineChange(this.grist, e, this.form.currency, this.received, this.form.discountAmount))}
           ></ox-grist>
         </section>
         <section class="page-section">
@@ -174,7 +242,7 @@ let InvoiceEditor = class InvoiceEditor extends localize(i18next)(PageView) {
         const editable = this.editable && !this.busy;
         return html `<label
         >${i18next.t('field.invoice-due-date')}
-        <input type="date" .value=${this.form.dueDate ?? ''} ?disabled=${!editable} @input=${(e) => (this.form = { ...this.form, dueDate: e.target.value })}
+        <input type="date" .value=${this.form.dueDate ?? ''} ?disabled=${!editable} @input=${(e) => this.put({ dueDate: e.target.value })}
       /></label>
       ${this.form.direction === 'PURCHASE'
             ? html `<label
@@ -201,61 +269,52 @@ let InvoiceEditor = class InvoiceEditor extends localize(i18next)(PageView) {
     }
     /**
      * A party typed by name and not picked is the counterparty of that name when exactly one is - case and spaces aside;
-     * otherwise it stays unlinked and the editor says so.
+     * otherwise it stays unlinked and the editor says so. Looked up for the save and shown nowhere: the invoice read after
+     * it shows the link.
      */
     async linkByName() {
         if (this.form.counterpartyId)
-            return;
-        const party = await partyOfName(this.form.direction === 'PURCHASE' ? this.form.supplierName : this.form.buyerName);
-        if (party)
-            this.form = { ...this.form, counterpartyId: party.id, counterparty: party };
+            return null;
+        return partyOfName(this.form.direction === 'PURCHASE' ? this.form.supplierName : this.form.buyerName);
     }
     /**
      * What a new invoice starts with, so a person writes only what is new: the number after the last sales invoice's, the
      * due date the company's days after the issue, the company's own words (ADR-0170 decision 6), and what they leave
      * blank of our side as the last sales invoice wrote it.
      */
-    async prefill() {
-        let last;
-        try {
-            const response = await client.query({
-                query: gql `
-          query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
-            invoices(filters: $filters, pagination: $pagination, sortings: $sortings) { items { number ${OUR_SIDE_FIELDS.join(' ')} } }
-          }
-        `,
-                variables: { filters: [{ name: 'direction', operator: 'eq', value: 'SALES' }], pagination: { page: 1, limit: 1 }, sortings: [{ name: 'createdAt', desc: true }] },
-                fetchPolicy: 'no-cache'
-            });
-            last = response.data?.invoices?.items?.[0];
-        }
-        catch {
-            /* Nothing to follow - the first number of the year, and our side from the company's words alone. */
-        }
-        /* An invoice opened meanwhile is not a new one. */
-        if (this.invoice)
-            return;
-        this.suggestedNumber = nextInvoiceNumber(last?.number, Number(this.form.issueDate.slice(0, 4)));
-        this.form = { ...this.form, ...headFromDefaults(this.form, this.defaults) };
-        this.form = {
-            ...this.form,
-            ...oursFromLast(this.form, last),
-            number: this.form.number || this.suggestedNumber,
-            dueDate: this.form.dueDate || daysAfter(this.form.issueDate, this.paymentDays)
+    get start() {
+        const form = blank();
+        const head = { ...form, ...headFromDefaults(form, this.defaults) };
+        return {
+            ...head,
+            ...oursFromLast(head, this.last.data?.invoices?.items?.[0]),
+            number: this.suggestedNumber,
+            dueDate: daysAfter(form.issueDate, this.paymentDays)
         };
     }
+    /** The number a new invoice is offered once the last one is read - it follows the direction while the person leaves it. */
+    get suggestedNumber() {
+        if (!this.last.answeredAt && !this.last.error)
+            return '';
+        const last = this.last.data?.invoices?.items?.[0];
+        return nextInvoiceNumber(last?.number, Number(today().slice(0, 4)));
+    }
     /** Days an invoice is due - the company's, or thirty. */
     get paymentDays() {
         return this.defaults?.paymentDays ?? PAYMENT_DAYS;
     }
     chooseParty(party) {
         const side = this.form.direction === 'PURCHASE' ? 'supplier' : 'buyer';
-        this.form = {
-            ...this.form,
+        this.put({
             counterpartyId: party?.id ?? null,
             counterparty: party,
             ...(party ? { [`${side}Name`]: party.name, [`${side}RegistrationNumber`]: party.businessNumber ?? this.form[`${side}RegistrationNumber`] } : {})
-        };
+        });
+    }
+    /** Edits of several fields at once. */
+    put(patch) {
+        for (const [name, value] of Object.entries(patch))
+            this.draft.set(name, value);
     }
     renderVoid() {
         return html `<section class="page-section">
@@ -268,20 +327,20 @@ let InvoiceEditor = class InvoiceEditor extends localize(i18next)(PageView) {
       <div class="form">
         <label class="wide"
           >${i18next.t('field.invoice-void-reason')}
-          <input .value=${this.voidReason} ?disabled=${this.busy} @input=${(e) => (this.voidReason = e.target.value)}
+          <input .value=${this.voidReason} ?disabled=${this.busy} @input=${(e) => this.voiding.set('reason', e.target.value)}
         /></label>
       </div>
     </section>`;
     }
     changeTaxBasis(taxBasis) {
-        this.form = { ...this.form, items: linesOf(this.grist), taxBasis };
+        this.put({ items: linesOf(this.grist), taxBasis });
         this.configure();
-        this.updateComplete.then(() => (this.amounts = reckonLines(this.grist, this.form.currency, this.received, this.form.discountAmount)));
+        this.updateComplete.then(() => (this.typedAmounts = reckonLines(this.grist, this.form.currency, this.received, this.form.discountAmount)));
     }
     /** The discount of the whole invoice as typed, and the totals after it. */
     discount(value) {
-        this.form = { ...this.form, discountAmount: value };
-        this.amounts = reckonLines(this.grist, this.form.currency, this.received, value);
+        this.put({ discountAmount: value });
+        this.typedAmounts = reckonLines(this.grist, this.form.currency, this.received, value);
     }
     /**
      * A change of the head; a new currency reckons the lines in its minor unit; the due date follows a moved issue date
@@ -298,58 +357,15 @@ let InvoiceEditor = class InvoiceEditor extends localize(i18next)(PageView) {
                 : patch.direction === 'SALES' && !String(this.form.number ?? '').trim()
                     ? { number: this.suggestedNumber }
                     : {};
-        this.form = { ...this.form, ...patch, ...number, ...(following ? { dueDate: daysAfter(patch.issueDate, this.paymentDays) } : {}) };
+        this.put({ ...patch, ...number, ...(following ? { dueDate: daysAfter(patch.issueDate, this.paymentDays) } : {}) });
         if (patch.currency && patch.currency !== currency) {
             this.configure();
-            this.amounts = reckonLines(this.grist, this.form.currency, this.received, this.form.discountAmount);
+            this.typedAmounts = reckonLines(this.grist, this.form.currency, this.received, this.form.discountAmount);
         }
     }
     configure() {
         this.gristConfig = documentLinesConfig({ editable: this.editable, received: this.form.taxBasis === 'RECEIVED', currency: this.form.currency || 'KRW' });
     }
-    async load(id) {
-        this.loading = true;
-        this.error = null;
-        try {
-            const response = await client.query({ query: gql(`query ($id: String!) { invoice(id: $id) { ${FIELDS} } }`), variables: { id }, fetchPolicy: 'no-cache' });
-            if (response.errors?.length)
-                throw response;
-            if (!response.data.invoice)
-                throw new Error(i18next.t('text.invoice-not-found'));
-            this.show(response.data.invoice);
-        }
-        catch (error) {
-            this.error = error;
-        }
-        finally {
-            this.loading = false;
-            this.updateContext();
-        }
-    }
-    show(invoice) {
-        this.invoice = invoice;
-        this.form = { ...invoice, items: invoice.items.map((item) => ({ ...item })) };
-        this.amounts = invoice;
-        this.voidReason = '';
-        this.configure();
-        this.grist?.fetch();
-    }
-    /** Runs one request at a time; a refusal is said in the server's words. */
-    async run(work) {
-        if (this.busy)
-            return undefined;
-        this.busy = true;
-        try {
-            return await work();
-        }
-        catch (error) {
-            notify({ level: 'error', message: error?.graphQLErrors?.[0]?.message ?? error?.errors?.[0]?.message ?? error?.message ?? String(error) });
-            return undefined;
-        }
-        finally {
-            this.busy = false;
-        }
-    }
     input() {
         const input = Object.fromEntries(HEAD.map(key => [key, this.form[key] === '' ? null : this.form[key] ?? null]));
         input.taxBasis = input.direction === 'PURCHASE' ? input.taxBasis || 'CALCULATED' : 'CALCULATED';
@@ -357,29 +373,24 @@ let InvoiceEditor = class InvoiceEditor extends localize(i18next)(PageView) {
         input.discountAmount = input.discountAmount === null ? 0 : Number(input.discountAmount);
         return input;
     }
+    /** A new one is opened once it is made; the edits sent are cleared once the save answered. Answers the invoice's id. */
     async save() {
-        const id = this.invoice?.id;
         if (this.busy)
             return undefined;
-        await this.linkByName();
-        const saved = await this.run(async () => {
-            const response = await client.mutate({
-                mutation: gql(id
-                    ? `mutation ($id: String!, $invoice: NewInvoice!) { invoice: updateInvoice(id: $id, invoice: $invoice) { ${FIELDS} } }`
-                    : `mutation ($invoice: NewInvoice!) { invoice: createInvoice(invoice: $invoice) { ${FIELDS} } }`),
-                variables: { ...(id ? { id } : {}), invoice: this.input() }
-            });
-            if (response.errors?.length)
-                throw response;
-            return response.data.invoice;
+        const id = this.invoiceId;
+        const linked = await this.linkByName();
+        const saved = await this.draft.submit(() => {
+            const invoice = { ...this.input(), ...(linked ? { counterpartyId: linked.id } : {}) };
+            return id ? this.saves.update.run({ id, invoice }) : this.saves.create.run({ invoice });
         });
         if (!saved)
             return undefined;
-        this.show(saved);
-        this.updateContext();
-        if (!id)
-            navigate(`invoice-editor?id=${saved.id}`);
-        return saved;
+        if (!id) {
+            /* The lines went with it: the grid keeps them as saved while the new invoice opens. */
+            this.grist?.commit();
+            navigate(`invoice-editor?id=${saved.invoice.id}`);
+        }
+        return saved.invoice.id;
     }
     /** Asked first - to whom and how much, fixed after - then save what is on screen and issue it. */
     async issue() {
@@ -399,7 +410,7 @@ let InvoiceEditor = class InvoiceEditor extends localize(i18next)(PageView) {
         const saved = await this.save();
         if (!saved)
             return;
-        const issued = await this.mutate(`mutation ($id: String!) { invoice: issueInvoice(id: $id) { ${FIELDS} } }`, { id: saved.id });
+        const issued = await this.saves.issue.run({ id: saved });
         if (issued)
             notify({ level: 'info', message: i18next.t('text.invoice-issued') });
     }
@@ -412,23 +423,7 @@ let InvoiceEditor = class InvoiceEditor extends localize(i18next)(PageView) {
         });
         if (!confirmed)
             return;
-        await this.mutate(`mutation ($id: String!, $reason: String!) { invoice: voidInvoice(id: $id, reason: $reason) { ${FIELDS} } }`, {
-            id: this.invoice.id,
-            reason: this.voidReason.trim()
-        });
-    }
-    async mutate(mutation, variables) {
-        const changed = await this.run(async () => {
-            const response = await client.mutate({ mutation: gql(mutation), variables });
-            if (response.errors?.length)
-                throw response;
-            return response.data.invoice;
-        });
-        if (changed) {
-            this.show(changed);
-            this.updateContext();
-        }
-        return changed;
+        await this.voiding.submit(sent => this.saves.void.run({ id: this.invoiceId, reason: (sent.reason ?? '').trim() }));
     }
     /**
      * The saved invoice as it goes out (ADR-0170 decision 10) - the server's page in the language chosen there, the
@@ -455,27 +450,7 @@ let InvoiceEditor = class InvoiceEditor extends localize(i18next)(PageView) {
 __decorate([
     state(),
     __metadata("design:type", Object)
-], InvoiceEditor.prototype, "invoice", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], InvoiceEditor.prototype, "form", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], InvoiceEditor.prototype, "loading", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], InvoiceEditor.prototype, "error", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], InvoiceEditor.prototype, "busy", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], InvoiceEditor.prototype, "voidReason", void 0);
+], InvoiceEditor.prototype, "address", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -483,15 +458,11 @@ __decorate([
 __decorate([
     state(),
     __metadata("design:type", Object)
-], InvoiceEditor.prototype, "amounts", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], InvoiceEditor.prototype, "defaults", void 0);
+], InvoiceEditor.prototype, "typedAmounts", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], InvoiceEditor.prototype, "suggestedNumber", void 0);
+], InvoiceEditor.prototype, "defaultsReadable", void 0);
 __decorate([
     query('ox-grist'),
     __metadata("design:type", DataGrist)