@things-factory/sales 10.1.255 → 10.1.257

package/dist-client/entity360/opportunity-360.d.ts

@@ -1,12 +1,11 @@
 import { LitElement } from 'lit';
-import { type Entity360DoorAnswer, type Entity360Subject } from '@operato/layout';
+import { type Entity360Subject } from '@operato/layout';
 /** An opportunity's 360 (ADR-0067). The module draws the opportunity; an application hangs its own sections on 'opportunity'. */
 export declare function registerOpportunityKind(): void;
 export declare class OpportunityOverviewSection extends LitElement {
     static styles: import("lit").CSSResult;
     subject?: Entity360Subject;
-    answer?: Entity360DoorAnswer<any>;
-    updated(changed: Map<string, unknown>): void;
-    private read;
+    private opportunity;
+    get answer(): import("@operato/layout").Entity360DoorAnswer<any> | undefined;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist-client/entity360/opportunity-360.js

@@ -1,10 +1,10 @@
 import { __decorate, __metadata } from "tslib";
 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 { customElement, property } from 'lit/decorators.js';
+import { QueryController } from '@operato/graphql';
 import { i18next } from '@operato/i18n';
-import { entity360Name, readEntity360Door, registerEntity360Kind, registerEntity360Section } from '@operato/layout';
+import { entity360Answer, entity360Name, registerEntity360Kind, registerEntity360Section } from '@operato/layout';
 import { documentAmount } from '@things-factory/invoice/dist-client';
 import { opportunityStageWord } from '../opportunity-words';
 /** An opportunity's 360 (ADR-0067). The module draws the opportunity; an application hangs its own sections on 'opportunity'. */
@@ -23,6 +23,17 @@ export function registerOpportunityKind() {
     });
 }
 let OpportunityOverviewSection = class OpportunityOverviewSection extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.opportunity = new QueryController(this, gql `
+      query ($id: String!) {
+        opportunity(id: $id) {
+          id name stage probability amount currency expectedCloseMonth closedOn lostReason description
+          counterparty { id name } endCustomer { id name } owner { id name }
+        }
+      }
+    `, { variables: () => (this.subject?.id ? { id: this.subject.id } : undefined) });
+    }
     static { this.styles = css `
     :host {
       font-size: var(--ui-t-body);
@@ -43,37 +54,8 @@ let OpportunityOverviewSection = class OpportunityOverviewSection extends LitEle
       font-variant-numeric: tabular-nums;
     }
   `; }
-    updated(changed) {
-        if (changed.has('subject'))
-            this.read();
-    }
-    async read() {
-        const id = this.subject?.id;
-        this.answer = undefined;
-        if (!id)
-            return;
-        let response;
-        try {
-            response = await client.query({
-                query: gql `
-          query ($id: String!) {
-            opportunity(id: $id) {
-              id name stage probability amount currency expectedCloseMonth closedOn lostReason description
-              counterparty { id name } endCustomer { id name } owner { id name }
-            }
-          }
-        `,
-                variables: { id },
-                fetchPolicy: 'no-cache',
-                errorPolicy: 'all'
-            });
-        }
-        catch (e) {
-            response = { data: null, errors: e?.graphQLErrors?.length ? e.graphQLErrors : [{ message: e?.message ?? String(e) }] };
-        }
-        if (this.subject?.id !== id)
-            return;
-        this.answer = readEntity360Door(response, data => data?.opportunity);
+    get answer() {
+        return entity360Answer(this.opportunity, data => data?.opportunity);
     }
     render() {
         const one = this.answer?.data;
@@ -104,10 +86,6 @@ __decorate([
     property({ attribute: false }),
     __metadata("design:type", Object)
 ], OpportunityOverviewSection.prototype, "subject", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], OpportunityOverviewSection.prototype, "answer", void 0);
 OpportunityOverviewSection = __decorate([
     customElement('opportunity-overview-section')
 ], OpportunityOverviewSection);

package/dist-client/entity360/opportunity-360.js.map

@@ -1 +1 @@
-{"version":3,"file":"opportunity-360.js","sourceRoot":"","sources":["../../client/entity360/opportunity-360.ts"],"names":[],"mappings":"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","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { entity360Name, readEntity360Door, registerEntity360Kind, registerEntity360Section, type Entity360DoorAnswer, type Entity360Subject } from '@operato/layout'\nimport { documentAmount } from '@things-factory/invoice/dist-client'\n\nimport { opportunityStageWord } from '../opportunity-words'\n\n/** An opportunity's 360 (ADR-0067). The module draws the opportunity; an application hangs its own sections on 'opportunity'. */\nexport function registerOpportunityKind() {\n  registerEntity360Kind({\n    kind: 'opportunity',\n    typenames: ['Opportunity'],\n    assistantSubject: true,\n    title: ({ value }) => `${i18next.t('title.opportunity')} · ${value.name || ''}`,\n    context: ({ value }) => [value.counterparty?.name, value.stage ? opportunityStageWord(value.stage) : '', value.expectedCloseMonth].filter(Boolean).join(' · ')\n  })\n  registerEntity360Section('opportunity', {\n    name: 'overview',\n    order: 10,\n    render: subject => html`<opportunity-overview-section .subject=${subject}></opportunity-overview-section>`\n  })\n}\n\n@customElement('opportunity-overview-section')\nexport class OpportunityOverviewSection extends LitElement {\n  static styles = css`\n    :host {\n      font-size: var(--ui-t-body);\n      line-height: 1.5;\n    }\n    dl {\n      margin: 0;\n      display: grid;\n      grid-template-columns: max-content 1fr;\n      gap: var(--spacing-small) var(--spacing-large);\n    }\n    dt {\n      color: var(--ui-muted);\n    }\n    dd {\n      margin: 0;\n      overflow-wrap: anywhere;\n      font-variant-numeric: tabular-nums;\n    }\n  `\n\n  @property({ attribute: false }) subject?: Entity360Subject\n  @state() answer?: Entity360DoorAnswer<any>\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has('subject')) this.read()\n  }\n\n  private async read() {\n    const id = this.subject?.id\n    this.answer = undefined\n    if (!id) return\n    let response: any\n    try {\n      response = await client.query({\n        query: gql`\n          query ($id: String!) {\n            opportunity(id: $id) {\n              id name stage probability amount currency expectedCloseMonth closedOn lostReason description\n              counterparty { id name } endCustomer { id name } owner { id name }\n            }\n          }\n        `,\n        variables: { id },\n        fetchPolicy: 'no-cache',\n        errorPolicy: 'all'\n      } as any)\n    } catch (e: any) {\n      response = { data: null, errors: e?.graphQLErrors?.length ? e.graphQLErrors : [{ message: e?.message ?? String(e) }] }\n    }\n    if (this.subject?.id !== id) return\n    this.answer = readEntity360Door(response, data => data?.opportunity)\n  }\n\n  render() {\n    const one = this.answer?.data\n    const party = (value?: { id: string; name: string }) => (value ? entity360Name({ __typename: 'Counterparty', ...value }, value.name) : '—')\n    return html`<ox-entity360-section .heading=${i18next.t('title.opportunity')} .state=${this.answer?.state ?? 'loading'} .message=${this.answer?.message ?? ''}>\n      ${one\n        ? html`<dl>\n            <dt>${i18next.t('field.opportunity-stage')}</dt>\n            <dd>${opportunityStageWord(one.stage)} · ${one.probability}%</dd>\n            <dt>${i18next.t('field.opportunity-counterparty')}</dt>\n            <dd>${party(one.counterparty)}</dd>\n            <dt>${i18next.t('field.opportunity-end-customer')}</dt>\n            <dd>${party(one.endCustomer)}</dd>\n            <dt>${i18next.t('field.opportunity-amount')}</dt>\n            <dd>${documentAmount(one.amount, one.currency || 'KRW')}</dd>\n            <dt>${i18next.t('field.opportunity-expected-close-month')}</dt>\n            <dd>${one.expectedCloseMonth}</dd>\n            <dt>${i18next.t('field.opportunity-owner')}</dt>\n            <dd>${one.owner?.name ?? '—'}</dd>\n            ${one.closedOn ? html`<dt>${i18next.t('field.opportunity-closed-on')}</dt><dd>${one.closedOn}</dd>` : ''}\n            ${one.lostReason ? html`<dt>${i18next.t('field.opportunity-lost-reason')}</dt><dd>${one.lostReason}</dd>` : ''}\n          </dl>`\n        : ''}\n    </ox-entity360-section>`\n  }\n}\n"]}
+{"version":3,"file":"opportunity-360.js","sourceRoot":"","sources":["../../client/entity360/opportunity-360.ts"],"names":[],"mappings":"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","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { QueryController } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { entity360Answer, entity360Name, registerEntity360Kind, registerEntity360Section, type Entity360Subject } from '@operato/layout'\nimport { documentAmount } from '@things-factory/invoice/dist-client'\n\nimport { opportunityStageWord } from '../opportunity-words'\n\n/** An opportunity's 360 (ADR-0067). The module draws the opportunity; an application hangs its own sections on 'opportunity'. */\nexport function registerOpportunityKind() {\n  registerEntity360Kind({\n    kind: 'opportunity',\n    typenames: ['Opportunity'],\n    assistantSubject: true,\n    title: ({ value }) => `${i18next.t('title.opportunity')} · ${value.name || ''}`,\n    context: ({ value }) => [value.counterparty?.name, value.stage ? opportunityStageWord(value.stage) : '', value.expectedCloseMonth].filter(Boolean).join(' · ')\n  })\n  registerEntity360Section('opportunity', {\n    name: 'overview',\n    order: 10,\n    render: subject => html`<opportunity-overview-section .subject=${subject}></opportunity-overview-section>`\n  })\n}\n\n@customElement('opportunity-overview-section')\nexport class OpportunityOverviewSection extends LitElement {\n  static styles = css`\n    :host {\n      font-size: var(--ui-t-body);\n      line-height: 1.5;\n    }\n    dl {\n      margin: 0;\n      display: grid;\n      grid-template-columns: max-content 1fr;\n      gap: var(--spacing-small) var(--spacing-large);\n    }\n    dt {\n      color: var(--ui-muted);\n    }\n    dd {\n      margin: 0;\n      overflow-wrap: anywhere;\n      font-variant-numeric: tabular-nums;\n    }\n  `\n\n  @property({ attribute: false }) subject?: Entity360Subject\n  private opportunity = new QueryController(\n    this,\n    gql`\n      query ($id: String!) {\n        opportunity(id: $id) {\n          id name stage probability amount currency expectedCloseMonth closedOn lostReason description\n          counterparty { id name } endCustomer { id name } owner { id name }\n        }\n      }\n    `,\n    { variables: () => (this.subject?.id ? { id: this.subject.id } : undefined) }\n  )\n\n  get answer() {\n    return entity360Answer(this.opportunity, data => data?.opportunity)\n  }\n\n  render() {\n    const one = this.answer?.data\n    const party = (value?: { id: string; name: string }) => (value ? entity360Name({ __typename: 'Counterparty', ...value }, value.name) : '—')\n    return html`<ox-entity360-section .heading=${i18next.t('title.opportunity')} .state=${this.answer?.state ?? 'loading'} .message=${this.answer?.message ?? ''}>\n      ${one\n        ? html`<dl>\n            <dt>${i18next.t('field.opportunity-stage')}</dt>\n            <dd>${opportunityStageWord(one.stage)} · ${one.probability}%</dd>\n            <dt>${i18next.t('field.opportunity-counterparty')}</dt>\n            <dd>${party(one.counterparty)}</dd>\n            <dt>${i18next.t('field.opportunity-end-customer')}</dt>\n            <dd>${party(one.endCustomer)}</dd>\n            <dt>${i18next.t('field.opportunity-amount')}</dt>\n            <dd>${documentAmount(one.amount, one.currency || 'KRW')}</dd>\n            <dt>${i18next.t('field.opportunity-expected-close-month')}</dt>\n            <dd>${one.expectedCloseMonth}</dd>\n            <dt>${i18next.t('field.opportunity-owner')}</dt>\n            <dd>${one.owner?.name ?? '—'}</dd>\n            ${one.closedOn ? html`<dt>${i18next.t('field.opportunity-closed-on')}</dt><dd>${one.closedOn}</dd>` : ''}\n            ${one.lostReason ? html`<dt>${i18next.t('field.opportunity-lost-reason')}</dt><dd>${one.lostReason}</dd>` : ''}\n          </dl>`\n        : ''}\n    </ox-entity360-section>`\n  }\n}\n"]}

package/dist-client/pages/opportunity-editor.d.ts

@@ -9,18 +9,6 @@ type Picker = {
     search: string;
     found: Party[];
 };
-type Form = {
-    name: string;
-    counterparty: Party | null;
-    endCustomer: Party | null;
-    amount: string;
-    currency: string;
-    expectedCloseMonth: string;
-    stage: string;
-    probability: string;
-    ownerId: string;
-    description: string;
-};
 declare const OpportunityEditor_base: (new (...args: any[]) => import("lit").LitElement) & typeof PageView;
 /**
  * 영업 기회 편집 — with whom, for how much, by when and how likely.
@@ -31,26 +19,28 @@ declare const OpportunityEditor_base: (new (...args: any[]) => import("lit").Lit
  */
 export declare class OpportunityEditor extends OpportunityEditor_base {
     static styles: import("lit").CSSResult[];
-    opportunity: any;
-    form: Form;
+    /** The opportunity the address names; none for a new one. */
+    private opportunityId;
     pickers: Record<'counterparty' | 'endCustomer', Picker>;
-    stages: {
-        stage: string;
-        probability: number;
-        open: boolean;
-    }[];
-    owners: {
-        id: string;
-        name: string;
-        email?: string;
-    }[];
     /** Whether the application's section is this person's to read - asked once, before it is shown. */
     sectionReadable: boolean;
-    events: any[];
-    reason: string;
-    loading: boolean;
-    error: unknown;
-    busy: boolean;
+    private choices;
+    private record;
+    private draft;
+    private loss;
+    private saves;
+    private change;
+    private get opportunity();
+    private get events();
+    private get stages();
+    private get owners();
+    /** The form as it shows: each field's edit, else what was read (blank while it is read). */
+    private get form();
+    private get reason();
+    /** A failed read, or an opportunity the address names that is not there. */
+    private get error();
+    private get loading();
+    private get busy();
     private isOpen;
     /** Won is final; a lost one is changed only by being opened again. */
     get editable(): boolean;
@@ -69,16 +59,18 @@ export declare class OpportunityEditor extends OpportunityEditor_base {
     /** The quotations that answer this opportunity; a new one is written from here and answers it. */
     private renderQuotations;
     private renderEvents;
+    private edit;
     private setPicker;
     private chooseParty;
     /** The stage's own probability comes in with it; the person may change it afterwards. */
     private chooseStage;
-    private readChoices;
+    /**
+     * The counterparties the words find - a look-up on asking, not a read the page keeps: one match is taken at once,
+     * more are listed to choose from. A failure is told by the GraphQL link.
+     */
     private findParties;
-    private load;
-    private show;
-    private run;
     private input;
+    /** A new one is opened once it is made; the edits sent are cleared once the save answered. */
     private save;
     private lose;
 }

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

@@ -3,10 +3,9 @@ import '@operato/list-state/ox-page-state.js';
 import gql from 'graphql-tag';
 import { css, html, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { client } from '@operato/graphql';
+import { client, MutationController, QueryController } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
-import { notify } from '@operato/layout';
-import { navigate, PageView } from '@operato/shell';
+import { navigate, PageView, DraftController } from '@operato/shell';
 import { ButtonStyles, DocumentPageStyles, FormFieldStyles } from '@operato/styles';
 import { currencyChoices, documentAmount, DocumentFormStyles } from '@things-factory/invoice/dist-client';
 import { opportunitySection } from '../opportunity-attach';
@@ -17,6 +16,12 @@ const FIELDS = `
   counterpartyId endCustomerId ownerId counterparty { id name } endCustomer { id name } owner { id name }
   quotations { id number version status issueDate validUntil totalAmount currency }
 `;
+const READ = gql(`
+  query ($id: String!) {
+    opportunity(id: $id) { ${FIELDS} }
+    opportunityEvents(opportunityId: $id) { id action fromStage stage probability reason createdAt actor { id name } }
+  }
+`);
 const thisMonth = () => new Date().toLocaleDateString('en-CA').slice(0, 7);
 /**
  * 영업 기회 편집 — with whom, for how much, by when and how likely.
@@ -28,18 +33,29 @@ const thisMonth = () => new Date().toLocaleDateString('en-CA').slice(0, 7);
 let OpportunityEditor = class OpportunityEditor extends localize(i18next)(PageView) {
     constructor() {
         super(...arguments);
-        this.opportunity = null;
-        this.form = blank();
+        /** The opportunity the address names; none for a new one. */
+        this.opportunityId = '';
         this.pickers = { counterparty: { search: '', found: [] }, endCustomer: { search: '', found: [] } };
-        this.stages = [];
-        this.owners = [];
         /** Whether the application's section is this person's to read - asked once, before it is shown. */
         this.sectionReadable = false;
-        this.events = [];
-        this.reason = '';
-        this.loading = false;
-        this.error = null;
-        this.busy = false;
+        /* The stages with their probabilities and who may own one, and the opportunity the address names (ADR-0190). */
+        this.choices = new QueryController(this, gql `
+      query {
+        opportunityStages { stage probability open }
+        opportunityOwners { id name email }
+      }
+    `);
+        this.record = new QueryController(this, READ, { variables: () => (this.opportunityId ? { id: this.opportunityId } : undefined) });
+        /* What is typed over the opportunity read - a new one starts blank, at the first stage. */
+        this.draft = new DraftController(this, { read: () => (this.opportunityId ? this.opportunity && formOf(this.opportunity) : blank(this.stages)), key: () => this.opportunityId });
+        /* The reason a lost one is closed with. */
+        this.loss = new DraftController(this, { read: () => ({ reason: '' }), key: () => this.opportunityId });
+        /* Every change reads the opportunity again once it is done. */
+        this.saves = {
+            create: new MutationController(this, gql `mutation ($opportunity: NewOpportunity!) { opportunity: createOpportunity(opportunity: $opportunity) { id } }`),
+            update: this.change(gql `mutation ($id: String!, $opportunity: NewOpportunity!) { opportunity: updateOpportunity(id: $id, opportunity: $opportunity) { id } }`),
+            lose: this.change(gql `mutation ($id: String!, $reason: String!) { loseOpportunity(id: $id, reason: $reason) { id } }`)
+        };
     }
     static { this.styles = [
         FormFieldStyles,
@@ -77,6 +93,40 @@ let OpportunityEditor = class OpportunityEditor extends localize(i18next)(PageVi
       }
     `
     ]; }
+    change(mutation) {
+        return new MutationController(this, mutation, { refetch: () => [this.record] });
+    }
+    get opportunity() {
+        return (this.opportunityId && this.record.data?.opportunity) || null;
+    }
+    get events() {
+        return (this.opportunityId && this.record.data?.opportunityEvents) || [];
+    }
+    get stages() {
+        return this.choices.data?.opportunityStages ?? [];
+    }
+    get owners() {
+        return this.choices.data?.opportunityOwners ?? [];
+    }
+    /** The form as it shows: each field's edit, else what was read (blank while it is read). */
+    get form() {
+        return Object.fromEntries(Object.entries(blank(this.stages)).map(([name, given]) => [name, this.draft.value(name) ?? given]));
+    }
+    get reason() {
+        return this.loss.value('reason') ?? '';
+    }
+    /** A failed read, or an opportunity the address names that is not there. */
+    get error() {
+        if (this.choices.error || this.record.error)
+            return this.choices.error ?? this.record.error;
+        return this.opportunityId && this.record.data && !this.record.data.opportunity ? new Error(i18next.t('text.opportunity-not-found')) : null;
+    }
+    get loading() {
+        return this.choices.loading || this.record.loading;
+    }
+    get busy() {
+        return Object.values(this.saves).some(save => save.pending);
+    }
     isOpen(stage) {
         return this.stages.some(one => one.stage === stage && one.open);
     }
@@ -100,28 +150,17 @@ let OpportunityEditor = class OpportunityEditor extends localize(i18next)(PageVi
     async pageUpdated(changes, lifecycle) {
         if (!this.active || !(changes.active || changes.params))
             return;
-        if (!this.stages.length)
-            await this.readChoices();
         const section = opportunitySection();
         if (section && !this.sectionReadable)
             (section.readable?.() ?? Promise.resolve(true)).then(may => (this.sectionReadable = !!may));
-        const id = lifecycle?.params?.id;
-        if (!id) {
-            this.opportunity = null;
-            this.form = blank(this.stages);
-            this.events = [];
-            this.updateContext();
-            return;
-        }
-        if (id !== this.opportunity?.id)
-            await this.load(id);
+        this.opportunityId = lifecycle?.params?.id ?? '';
     }
     render() {
         const attached = this.opportunity && this.sectionReadable ? opportunitySection() : undefined;
         const editable = this.editable;
-        const set = (patch) => (this.form = { ...this.form, ...patch });
+        const set = (patch) => this.edit(patch);
         const stageChoices = this.stages.filter(one => one.open || one.stage === this.opportunity?.stage);
-        return html `<ox-page-state .loading=${this.loading} .error=${this.error} @retry=${() => this.opportunity && this.load(this.opportunity.id)}>
+        return html `<ox-page-state .loading=${this.loading} .error=${this.error} @retry=${() => (this.choices.refetch(), this.record.refetch())}>
       <div class="page">
         <section class="page-section">
           <header class="page-section-header"><h3>${i18next.t('text.opportunity-section-head')}</h3></header>
@@ -186,7 +225,7 @@ let OpportunityEditor = class OpportunityEditor extends localize(i18next)(PageVi
             : nothing}
         ${this.opportunity ? this.renderQuotations() : nothing}
         ${attached && this.opportunity
-            ? html `<section class="page-section" @opportunity-changed=${() => this.load(this.opportunity.id)}>
+            ? html `<section class="page-section" @opportunity-changed=${() => this.record.refetch()}>
               <header class="page-section-header"><h3>${attached.heading()}</h3></header>
               ${attached.render(this.opportunity)}
             </section>`
@@ -210,7 +249,7 @@ let OpportunityEditor = class OpportunityEditor extends localize(i18next)(PageVi
           @keydown=${(e) => e.key === 'Enter' && this.findParties(which)}
         />
         <button ?disabled=${!editable} @click=${() => this.findParties(which)}>${i18next.t('button.search')}</button>
-        ${which === 'endCustomer' && chosen ? html `<button ?disabled=${!editable} @click=${() => (this.form = { ...this.form, endCustomer: null })}>${i18next.t('button.opportunity-clear')}</button>` : nothing}
+        ${which === 'endCustomer' && chosen ? html `<button ?disabled=${!editable} @click=${() => this.edit({ endCustomer: null })}>${i18next.t('button.opportunity-clear')}</button>` : nothing}
       </span>
       ${picker.found.length
             ? html `<select ?disabled=${!editable} @change=${(e) => this.chooseParty(which, picker.found.find(one => one.id === e.target.value) ?? null)}>
@@ -231,7 +270,7 @@ let OpportunityEditor = class OpportunityEditor extends localize(i18next)(PageVi
       <div class="form">
         <label class="wide"
           >${i18next.t('field.opportunity-lost-reason')}
-          <input .value=${this.reason} ?disabled=${this.busy} @input=${(e) => (this.reason = e.target.value)}
+          <input .value=${this.reason} ?disabled=${this.busy} @input=${(e) => this.loss.set('reason', e.target.value)}
         /></label>
       </div>
     </section>`;
@@ -297,42 +336,30 @@ let OpportunityEditor = class OpportunityEditor extends localize(i18next)(PageVi
       </table>
     </section>`;
     }
+    edit(patch) {
+        for (const [name, value] of Object.entries(patch))
+            this.draft.set(name, value);
+    }
     setPicker(which, patch) {
         this.pickers = { ...this.pickers, [which]: { ...this.pickers[which], ...patch } };
     }
     chooseParty(which, party) {
         if (!party)
             return;
-        this.form = { ...this.form, [which]: party };
+        this.edit({ [which]: party });
         this.setPicker(which, { search: '', found: [] });
     }
     /** The stage's own probability comes in with it; the person may change it afterwards. */
     chooseStage(stage) {
         const given = this.stages.find(one => one.stage === stage);
-        this.form = { ...this.form, stage, probability: given ? String(given.probability) : this.form.probability };
-    }
-    async readChoices() {
-        try {
-            const response = await client.query({
-                query: gql `
-          query {
-            opportunityStages { stage probability open }
-            opportunityOwners { id name email }
-          }
-        `,
-                fetchPolicy: 'no-cache'
-            });
-            if (response.errors?.length)
-                throw response;
-            this.stages = response.data.opportunityStages;
-            this.owners = response.data.opportunityOwners;
-        }
-        catch (error) {
-            this.error = error;
-        }
+        this.edit({ stage, probability: given ? String(given.probability) : this.form.probability });
     }
+    /**
+     * The counterparties the words find - a look-up on asking, not a read the page keeps: one match is taken at once,
+     * more are listed to choose from. A failure is told by the GraphQL link.
+     */
     async findParties(which) {
-        await this.run(async () => {
+        try {
             const response = await client.query({
                 query: gql `
           query ($search: String, $pagination: Pagination) {
@@ -344,68 +371,14 @@ let OpportunityEditor = class OpportunityEditor extends localize(i18next)(PageVi
                 variables: { search: this.pickers[which].search.trim() || undefined, pagination: { page: 1, limit: 30 } },
                 fetchPolicy: 'no-cache'
             });
-            if (response.errors?.length)
-                throw response;
-            const found = response.data.counterparties.items ?? [];
+            const found = response.data?.counterparties?.items ?? [];
             if (found.length === 1)
                 this.chooseParty(which, found[0]);
             else
                 this.setPicker(which, { found });
-        });
-    }
-    async load(id) {
-        this.loading = true;
-        this.error = null;
-        try {
-            const response = await client.query({
-                query: gql(`query ($id: String!) { opportunity(id: $id) { ${FIELDS} } opportunityEvents(opportunityId: $id) { id action fromStage stage probability reason createdAt actor { id name } } }`),
-                variables: { id },
-                fetchPolicy: 'no-cache'
-            });
-            if (response.errors?.length)
-                throw response;
-            if (!response.data.opportunity)
-                throw new Error(i18next.t('text.opportunity-not-found'));
-            this.show(response.data.opportunity, response.data.opportunityEvents);
-        }
-        catch (error) {
-            this.error = error;
         }
-        finally {
-            this.loading = false;
-            this.updateContext();
-        }
-    }
-    show(opportunity, events) {
-        this.opportunity = opportunity;
-        this.events = events;
-        this.form = {
-            name: opportunity.name,
-            counterparty: opportunity.counterparty,
-            endCustomer: opportunity.endCustomer,
-            amount: String(opportunity.amount ?? 0),
-            currency: opportunity.currency,
-            expectedCloseMonth: opportunity.expectedCloseMonth,
-            stage: opportunity.stage,
-            probability: String(opportunity.probability),
-            ownerId: opportunity.ownerId ?? '',
-            description: opportunity.description ?? ''
-        };
-        this.reason = '';
-    }
-    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;
+        catch {
+            /* Told by the GraphQL link. */
         }
     }
     input() {
@@ -423,89 +396,34 @@ let OpportunityEditor = class OpportunityEditor extends localize(i18next)(PageVi
             description
         };
     }
+    /** A new one is opened once it is made; the edits sent are cleared once the save answered. */
     async save() {
-        const id = this.opportunity?.id;
-        const saved = await this.run(async () => {
-            const response = await client.mutate({
-                mutation: gql(id
-                    ? `mutation ($id: String!, $opportunity: NewOpportunity!) { opportunity: updateOpportunity(id: $id, opportunity: $opportunity) { id } }`
-                    : `mutation ($opportunity: NewOpportunity!) { opportunity: createOpportunity(opportunity: $opportunity) { id } }`),
-                variables: { ...(id ? { id } : {}), opportunity: this.input() }
-            });
-            if (response.errors?.length)
-                throw response;
-            return response.data.opportunity;
-        });
-        if (!saved)
+        if (this.busy)
             return;
-        if (!id)
-            navigate(`opportunity-editor?id=${saved.id}`);
-        else
-            await this.load(id);
+        const id = this.opportunityId;
+        const saved = await this.draft.submit(() => id ? this.saves.update.run({ id, opportunity: this.input() }) : this.saves.create.run({ opportunity: this.input() }));
+        if (saved && !id)
+            navigate(`opportunity-editor?id=${saved.opportunity.id}`);
     }
     async lose() {
-        const id = this.opportunity.id;
-        const lost = await this.run(async () => {
-            const response = await client.mutate({
-                mutation: gql `
-          mutation ($id: String!, $reason: String!) {
-            loseOpportunity(id: $id, reason: $reason) { id }
-          }
-        `,
-                variables: { id, reason: this.reason.trim() }
-            });
-            if (response.errors?.length)
-                throw response;
-            return response.data.loseOpportunity;
-        });
-        if (lost)
-            await this.load(id);
+        if (this.busy)
+            return;
+        const id = this.opportunityId;
+        await this.loss.submit(sent => this.saves.lose.run({ id, reason: (sent.reason ?? '').trim() }));
     }
 };
 __decorate([
     state(),
     __metadata("design:type", Object)
-], OpportunityEditor.prototype, "opportunity", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], OpportunityEditor.prototype, "form", void 0);
+], OpportunityEditor.prototype, "opportunityId", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
 ], OpportunityEditor.prototype, "pickers", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], OpportunityEditor.prototype, "stages", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], OpportunityEditor.prototype, "owners", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
 ], OpportunityEditor.prototype, "sectionReadable", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], OpportunityEditor.prototype, "events", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], OpportunityEditor.prototype, "reason", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], OpportunityEditor.prototype, "loading", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], OpportunityEditor.prototype, "error", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], OpportunityEditor.prototype, "busy", void 0);
 OpportunityEditor = __decorate([
     customElement('opportunity-editor')
 ], OpportunityEditor);
@@ -521,6 +439,21 @@ const eventWord = (action) => action === 'CREATED'
                 : action === 'REOPENED'
                     ? i18next.t('text.opportunity-event-reopened')
                     : i18next.t('text.opportunity-event-updated');
+/** The form of an opportunity as read. */
+function formOf(opportunity) {
+    return {
+        name: opportunity.name,
+        counterparty: opportunity.counterparty,
+        endCustomer: opportunity.endCustomer,
+        amount: String(opportunity.amount ?? 0),
+        currency: opportunity.currency,
+        expectedCloseMonth: opportunity.expectedCloseMonth,
+        stage: opportunity.stage,
+        probability: String(opportunity.probability),
+        ownerId: opportunity.ownerId ?? '',
+        description: opportunity.description ?? ''
+    };
+}
 function blank(stages = []) {
     const lead = stages.find(one => one.stage === 'LEAD');
     return {