@things-factory/worklist 10.1.255 → 10.1.257

package/dist-client/pages/activity-instance/activity-instance-start-page.d.ts

@@ -9,14 +9,21 @@ import { PageView } from '@operato/shell';
 declare const ActivityInstanceStartPage_base: (new (...args: any[]) => import("lit").LitElement) & typeof PageView;
 export declare class ActivityInstanceStartPage extends ActivityInstanceStartPage_base {
     static styles: import("lit").CSSResult[];
-    activity: any;
-    activityInstance: any;
     board: any;
     customHtmlElement: any;
-    loaded: boolean;
-    loadError: unknown;
-    /** The id this screen last read, so retry asks for the same task. */
-    private lastId?;
+    /** The task read the custom element was made for: another answer makes it again. */
+    private customFor?;
+    /** The draft task the address names. */
+    private instanceId;
+    private record;
+    private draft;
+    private saveDraft;
+    private issue;
+    get activityInstance(): any;
+    get activity(): any;
+    get loaded(): boolean;
+    /** Why the task could not be read - ox-page-state says it, with retry (ADR-0060 decision 8). */
+    get loadError(): unknown;
     viewer: any;
     get context(): {
         title: any;
@@ -44,9 +51,9 @@ export declare class ActivityInstanceStartPage extends ActivityInstanceStartPage
     boardContent(): DirectiveResult;
     customElementContent(): any;
     getInOutFromBoard(): any[];
-    updated(changes: any): void;
     pageUpdated(changes: any, lifecycle: any, changedBefore: any): Promise<void>;
-    fetchActivityInstance(id: any): Promise<void>;
+    /** What this task takes and gives: the board's values, or what was written over the task read. */
+    private inOutToSend;
     discardDraft(): Promise<void>;
     draftActivityInstance(): Promise<void>;
     issueActivityInstance(): Promise<void>;

package/dist-client/pages/activity-instance/activity-instance-start-page.js

@@ -9,11 +9,12 @@ import { css, html } from 'lit';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { customElement, query, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
-import { client } from '@operato/graphql';
+import { client, MutationController, QueryController } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
-import { ranMutation } from '../../components/say-outcome.js';
+import { mutationOutcome } from '../../components/mutation-outcome.js';
+import { ranMutation, sayFailure } from '../../components/say-outcome.js';
 import { offersDiscard } from './discard-offer.js';
-import { navigate, PageView } from '@operato/shell';
+import { navigate, PageView, DraftController } from '@operato/shell';
 import { OxPrompt } from '@operato/popup';
 import { CommonButtonStyles, ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles';
 import { provider } from '@operato/board/board-provider.js';
@@ -21,10 +22,77 @@ import { notify } from '@operato/layout';
 let ActivityInstanceStartPage = class ActivityInstanceStartPage extends localize(i18next)(PageView) {
     constructor() {
         super(...arguments);
-        this.activity = {};
-        this.activityInstance = {};
-        this.loaded = false;
-        this.loadError = null;
+        /** The draft task the address names. */
+        this.instanceId = '';
+        /* The draft task shown, read for the id the address names (ADR-0190). */
+        this.record = new QueryController(this, gql `
+      query activityInstance($id: String!) {
+        activityInstance(id: $id) {
+          id
+          name
+          description
+          state
+          activity {
+            id
+            startingType
+            model {
+              name
+              description
+              active
+              tag
+              inout
+              type
+              unit
+              options
+              quantifier
+              spec
+            }
+          }
+          thumbnail
+          input
+          output
+          uiType
+          uiSource
+          approvalLine {
+            type
+            value
+            participation
+            notifyAfter
+            approver {
+              id
+              name
+              description
+              controlNo
+            }
+          }
+          dueAt
+          createdAt
+        }
+      }
+    `, { variables: () => (this.instanceId ? { id: this.instanceId } : undefined) });
+        /* What is written here over the task read; another task drops it (ADR-0190 decision 2). */
+        this.draft = new DraftController(this, {
+            read: () => this.activityInstance,
+            key: () => this.instanceId
+        });
+        /*
+         * The changes made here: each reads what it changed again once done. This screen says its own failure
+         * (sayFailure), so the GraphQL link stays quiet about it (ADR-0190).
+         */
+        this.saveDraft = new MutationController(this, gql `
+      mutation ($activityInstance: ActivityInstanceDraft!) {
+        draftActivityInstance(activityInstance: $activityInstance) {
+          id
+        }
+      }
+    `, { refetch: () => [this.record], showsError: true });
+        this.issue = new MutationController(this, gql `
+      mutation ($activityInstance: ActivityInstanceIssue!) {
+        issueActivityInstance(activityInstance: $activityInstance) {
+          id
+        }
+      }
+    `, { refetch: () => [this.record], showsError: true });
     }
     static { this.styles = [
         /*
@@ -45,6 +113,22 @@ let ActivityInstanceStartPage = class ActivityInstanceStartPage extends localize
       }
     `
     ]; }
+    get activityInstance() {
+        return this.record.data?.activityInstance ?? {};
+    }
+    get activity() {
+        return this.activityInstance.activity ?? {};
+    }
+    get loaded() {
+        return this.record.data !== undefined;
+    }
+    /** Why the task could not be read - ox-page-state says it, with retry (ADR-0060 decision 8). */
+    get loadError() {
+        return (this.record.error ??
+            (this.loaded && !this.record.data?.activityInstance
+                ? new Error(i18next.t('error.activity-instance not found', { activityInstance: this.instanceId }))
+                : null));
+    }
     get context() {
         const { startingType } = this.activity;
         const { state } = this.activityInstance;
@@ -87,7 +171,7 @@ let ActivityInstanceStartPage = class ActivityInstanceStartPage extends localize
         return html `<ox-page-state
       .loading=${!this.loaded && !this.loadError}
       .error=${this.loadError}
-      @retry=${() => this.lastId && this.fetchActivityInstance(this.lastId)}
+      @retry=${() => this.record.refetch()}
       >${this.renderActivity()}</ox-page-state
     >`;
     }
@@ -141,7 +225,8 @@ let ActivityInstanceStartPage = class ActivityInstanceStartPage extends localize
         if (!this.activityInstance) {
             return html ``;
         }
-        var { input, output } = this.activityInstance || {};
+        var input = this.draft.value('input');
+        var output = this.draft.value('output');
         const inputSpec = this.getInputSpec();
         const outputSpec = this.getOutputSpec();
         if (!output) {
@@ -159,7 +244,7 @@ let ActivityInstanceStartPage = class ActivityInstanceStartPage extends localize
             data-name="input"
             .props=${inputSpec}
             .value=${input}
-            @property-change=${e => (this.activityInstance.input = e.currentTarget.value)}
+            @property-change=${e => this.draft.set('input', e.currentTarget.value)}
           ></ox-properties-dynamic-view>
         </fieldset>
 
@@ -169,7 +254,7 @@ let ActivityInstanceStartPage = class ActivityInstanceStartPage extends localize
             data-name="output"
             .props=${outputSpec}
             .value=${output}
-            @property-change=${e => (this.activityInstance.output = e.currentTarget.value)}
+            @property-change=${e => this.draft.set('output', e.currentTarget.value)}
           ></ox-properties-dynamic-view>
         </fieldset>
       `);
@@ -178,7 +263,9 @@ let ActivityInstanceStartPage = class ActivityInstanceStartPage extends localize
         if (!this.activityInstance) {
             return html ``;
         }
-        const { uiSource: boardId, input, output } = this.activityInstance;
+        const { uiSource: boardId } = this.activityInstance;
+        const input = this.draft.value('input');
+        const output = this.draft.value('output');
         if (!this.board || this.board.id !== boardId) {
             this.board = { id: boardId };
         }
@@ -202,24 +289,19 @@ let ActivityInstanceStartPage = class ActivityInstanceStartPage extends localize
         if (!this.activityInstance) {
             return html ``;
         }
-        const { uiSource: tagName, input, output } = this.activityInstance;
-        if (!this.customHtmlElement) {
+        const { uiSource: tagName } = this.activityInstance;
+        if (!this.customHtmlElement || this.customFor !== this.activityInstance) {
             const element = document.createElement(tagName);
             element.id = 'custom-content';
             element.activityId = this.activityInstance.activity.id;
-            element.input = input;
-            element.output = output;
-            element.addEventListener('change-input', (e) => {
-                this.activityInstance.input = e.detail;
-            });
-            element.addEventListener('change-output', (e) => {
-                this.activityInstance.output = e.detail;
-            });
+            element.input = this.draft.value('input');
+            element.output = this.draft.value('output');
+            element.addEventListener('change-input', (e) => this.draft.set('input', e.detail));
+            element.addEventListener('change-output', (e) => this.draft.set('output', e.detail));
             /* DEPRECATED 일반적으로 output만 수정될 가능성이 높기때문에, change 이벤트는 output을 수정하는 것으로 한다. */
-            element.addEventListener('change', (e) => {
-                this.activityInstance.output = e.detail;
-            });
+            element.addEventListener('change', (e) => this.draft.set('output', e.detail));
             this.customHtmlElement = element;
+            this.customFor = this.activityInstance;
         }
         return this.customHtmlElement;
     }
@@ -237,82 +319,19 @@ let ActivityInstanceStartPage = class ActivityInstanceStartPage extends localize
         }, {});
         return [input, output];
     }
-    updated(changes) {
-        if (changes.has('activityInstance')) {
-            this.updateContext();
-        }
-    }
     async pageUpdated(changes, lifecycle, changedBefore) {
         if (this.active && lifecycle.resourceId) {
-            this.fetchActivityInstance(lifecycle.resourceId);
+            this.instanceId = lifecycle.resourceId;
         }
         else {
             this.customHtmlElement = undefined;
         }
     }
-    async fetchActivityInstance(id) {
-        this.lastId = id;
-        this.loadError = null;
-        try {
-            const response = await client.query({
-                query: gql `
-          query activityInstance($id: String!) {
-            activityInstance(id: $id) {
-              id
-              name
-              description
-              state
-              activity {
-                id
-                startingType
-                model {
-                  name
-                  description
-                  active
-                  tag
-                  inout
-                  type
-                  unit
-                  options
-                  quantifier
-                  spec
-                }
-              }
-              thumbnail
-              input
-              output
-              uiType
-              uiSource
-              approvalLine {
-                type
-                value
-                participation
-                notifyAfter
-                approver {
-                  id
-                  name
-                  description
-                  controlNo
-                }
-              }
-              dueAt
-              createdAt
-            }
-          }
-        `,
-                variables: { id }
-            });
-            if (response.errors?.length || !response.data?.activityInstance) {
-                throw (response.errors?.[0] || new Error(i18next.t('error.activity-instance not found', { activityInstance: id })));
-            }
-            this.customHtmlElement = undefined;
-            this.activityInstance = response.data.activityInstance;
-            this.activity = this.activityInstance.activity;
-            this.loaded = true;
-        }
-        catch (error) {
-            this.loadError = error;
-        }
+    /** What this task takes and gives: the board's values, or what was written over the task read. */
+    inOutToSend() {
+        return this.activityInstance.uiType === 'board'
+            ? this.getInOutFromBoard()
+            : [this.draft.value('input'), this.draft.value('output')];
     }
     /* Asked once, since a discarded draft cannot come back; then back to the list it was opened from. */
     async discardDraft() {
@@ -335,17 +354,20 @@ let ActivityInstanceStartPage = class ActivityInstanceStartPage extends localize
             variables: { id }
         }));
         if (outcome.ok) {
+            /* The draft is gone, and what was written on it with it: leaving asks about nothing. */
+            this.draft.reset();
             notify({ message: i18next.t('text.draft-discarded') });
             navigate('draft-list');
         }
     }
+    /*
+     * Each change sends what is written now and reads the task again once it went through; its answer is not kept
+     * (ADR-0190 decision 2). The edits sent are cleared then, and a failure keeps them.
+     */
     async draftActivityInstance() {
         var { id: activityId } = this.activity;
-        var { id, name, description, priority, threadsMin, threadsMax, dueAt, input, output, reason, uiType, assignees, approvalLine } = this.activityInstance;
-        if (uiType === 'board') {
-            ;
-            [input, output] = this.getInOutFromBoard();
-        }
+        var { id, name, description, priority, threadsMin, threadsMax, dueAt, reason, assignees, approvalLine } = this.activityInstance;
+        const [input, output] = this.inOutToSend();
         name ||= this.activity.name;
         description ||= this.activity.description;
         assignees ||= this.activity.assignees;
@@ -365,69 +387,11 @@ let ActivityInstanceStartPage = class ActivityInstanceStartPage extends localize
             assignees,
             approvalLine
         };
-        const outcome = await ranMutation(() => client.mutate({
-            mutation: gql `
-          mutation ($activityInstance: ActivityInstanceDraft!) {
-            draftActivityInstance(activityInstance: $activityInstance) {
-              id
-              name
-              description
-              input
-              output
-              state
-              activity {
-                id
-                startingType
-                model {
-                  name
-                  description
-                  active
-                  tag
-                  inout
-                  type
-                  unit
-                  options
-                  quantifier
-                  spec
-                }
-              }
-              assignees {
-                type
-                value
-                assignee {
-                  id
-                  name
-                  description
-                  controlNo
-                }
-              }
-              approvalLine {
-                type
-                value
-                participation
-                notifyAfter
-                approver {
-                  id
-                  name
-                  description
-                  controlNo
-                }
-              }
-              uiType
-              uiSource
-              threadsMin
-              threadsMax
-            }
-          }
-        `,
-            variables: { activityInstance }
-        }));
-        if (!outcome.ok) {
+        const drafted = await this.draft.submit(() => this.saveDraft.run({ activityInstance }));
+        if (!drafted) {
+            sayFailure(mutationOutcome(this.saveDraft.error));
             return;
         }
-        this.customHtmlElement = undefined;
-        this.activityInstance = outcome.data.draftActivityInstance;
-        this.activity = this.activityInstance.activity;
         notify({
             message: i18next.t('text.info_x_successfully', {
                 x: `${i18next.t('label.activity-instance')} ${i18next.t('text.draft')}`
@@ -435,11 +399,8 @@ let ActivityInstanceStartPage = class ActivityInstanceStartPage extends localize
         });
     }
     async issueActivityInstance() {
-        var { id, name, description, input, output, reason, uiType, threadsMin = 0, threadsMax = 0, assignees, approvalLine } = this.activityInstance;
-        if (uiType === 'board') {
-            ;
-            [input, output] = this.getInOutFromBoard();
-        }
+        var { id, name, description, reason, threadsMin = 0, threadsMax = 0, assignees, approvalLine } = this.activityInstance;
+        const [input, output] = this.inOutToSend();
         const activityInstance = {
             id,
             name: name || this.activity.name,
@@ -452,69 +413,11 @@ let ActivityInstanceStartPage = class ActivityInstanceStartPage extends localize
             assignees,
             approvalLine
         };
-        const outcome = await ranMutation(() => client.mutate({
-            mutation: gql `
-          mutation ($activityInstance: ActivityInstanceIssue!) {
-            issueActivityInstance(activityInstance: $activityInstance) {
-              id
-              name
-              description
-              input
-              output
-              state
-              activity {
-                id
-                startingType
-                model {
-                  name
-                  description
-                  active
-                  tag
-                  inout
-                  type
-                  unit
-                  options
-                  quantifier
-                  spec
-                }
-              }
-              assignees {
-                type
-                value
-                assignee {
-                  id
-                  name
-                  description
-                  controlNo
-                }
-              }
-              approvalLine {
-                type
-                value
-                participation
-                notifyAfter
-                approver {
-                  id
-                  name
-                  description
-                  controlNo
-                }
-              }
-              uiType
-              uiSource
-              threadsMin
-              threadsMax
-            }
-          }
-        `,
-            variables: { activityInstance }
-        }));
-        if (!outcome.ok) {
+        const issued = await this.draft.submit(() => this.issue.run({ activityInstance }));
+        if (!issued) {
+            sayFailure(mutationOutcome(this.issue.error));
             return;
         }
-        this.customHtmlElement = undefined;
-        this.activityInstance = outcome.data.issueActivityInstance;
-        this.activity = this.activityInstance.activity;
         notify({
             message: i18next.t('text.info_x_successfully', {
                 x: `${i18next.t('label.activity-instance')} ${i18next.t('text.assign')}`
@@ -522,14 +425,6 @@ let ActivityInstanceStartPage = class ActivityInstanceStartPage extends localize
         });
     }
 };
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], ActivityInstanceStartPage.prototype, "activity", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], ActivityInstanceStartPage.prototype, "activityInstance", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -541,11 +436,7 @@ __decorate([
 __decorate([
     state(),
     __metadata("design:type", Object)
-], ActivityInstanceStartPage.prototype, "loaded", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], ActivityInstanceStartPage.prototype, "loadError", void 0);
+], ActivityInstanceStartPage.prototype, "instanceId", void 0);
 __decorate([
     query('ox-board-viewer'),
     __metadata("design:type", Object)