@projectcaluma/ember-form 14.7.0 → 14.8.0

package/addon/components/cf-content.js

@@ -3,7 +3,7 @@ import { destroy, registerDestructor } from "@ember/destroyable";
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { queryManager } from "ember-apollo-client";
-import { dropTask } from "ember-concurrency";
+import { task } from "ember-concurrency";
 import { trackedTask } from "reactiveweb/ember-concurrency";
 
 import getDocumentAnswersQuery from "@projectcaluma/ember-form/gql/queries/document-answers.graphql";
@@ -125,32 +125,33 @@ export default class CfContentComponent extends Component {
     );
   }
 
-  data = trackedTask(this, this.fetchData, () => [this.args.documentId]);
-
-  @dropTask
-  *fetchData() {
+  fetchData = task({ drop: true }, async () => {
     if (this.document) destroy(this.document);
     if (this.navigation) destroy(this.navigation);
 
     if (!this.args.documentId) return;
 
-    const [answerDocument] = (yield this.apollo.query(
-      {
-        query: getDocumentAnswersQuery,
-        fetchPolicy: "network-only",
-        variables: { id: this.args.documentId },
-      },
-      "allDocuments.edges",
-    )).map(({ node }) => node);
-
-    const [form] = (yield this.apollo.query(
-      {
-        query: getDocumentFormsQuery,
-        fetchPolicy: "cache-first",
-        variables: { slug: answerDocument.form.slug },
-      },
-      "allForms.edges",
-    )).map(({ node }) => node);
+    const [answerDocument] = (
+      await this.apollo.query(
+        {
+          query: getDocumentAnswersQuery,
+          fetchPolicy: "network-only",
+          variables: { id: this.args.documentId },
+        },
+        "allDocuments.edges",
+      )
+    ).map(({ node }) => node);
+
+    const [form] = (
+      await this.apollo.query(
+        {
+          query: getDocumentFormsQuery,
+          fetchPolicy: "cache-first",
+          variables: { slug: answerDocument.form.slug },
+        },
+        "allForms.edges",
+      )
+    ).map(({ node }) => node);
 
     const owner = getOwner(this);
     const Document = owner.factoryFor("caluma-model:document").class;
@@ -171,5 +172,7 @@ export default class CfContentComponent extends Component {
     });
 
     return { document, navigation };
-  }
+  });
+
+  data = trackedTask(this, this.fetchData, () => [this.args.documentId]);
 }

package/addon/components/cf-field/input/table.js

@@ -4,7 +4,7 @@ import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { queryManager } from "ember-apollo-client";
-import { dropTask } from "ember-concurrency";
+import { task } from "ember-concurrency";
 import { confirm } from "ember-uikit";
 
 import removeDocumentMutation from "@projectcaluma/ember-form/gql/mutations/remove-document.graphql";
@@ -44,9 +44,8 @@ export default class CfFieldInputTableComponent extends Component {
     return this.questions.slice(0, 4);
   }
 
-  @dropTask
-  *add() {
-    const raw = yield this.apollo.mutate(
+  add = task({ drop: true }, async () => {
+    const raw = await this.apollo.mutate(
       {
         mutation: saveDocumentMutation,
         variables: {
@@ -66,11 +65,10 @@ export default class CfFieldInputTableComponent extends Component {
     this.documentToEditIsNew = true;
     this.documentToEdit = newDocument;
     this.showAddModal = true;
-  }
+  });
 
-  @dropTask
-  *delete(document) {
-    if (!(yield confirm(this.intl.t("caluma.form.deleteRow")))) {
+  delete = task({ drop: true }, async (document) => {
+    if (!(await confirm(this.intl.t("caluma.form.deleteRow")))) {
       return;
     }
 
@@ -78,20 +76,19 @@ export default class CfFieldInputTableComponent extends Component {
       (doc) => doc.pk !== document.pk,
     );
 
-    yield this.args.onSave(remainingDocuments);
-    yield this.removeOrphan(document);
-  }
+    await this.args.onSave(remainingDocuments);
+    await this.removeOrphan(document);
+  });
 
-  @dropTask
-  *save(validate) {
+  save = task({ drop: true }, async (validate) => {
     try {
-      if (!(yield validate())) {
+      if (!(await validate())) {
         return;
       }
 
       const newDocument = this.documentToEdit;
 
-      yield Promise.all(newDocument.fields.map((f) => f.validate.perform()));
+      await Promise.all(newDocument.fields.map((f) => f.validate.perform()));
 
       if (newDocument.fields.some((field) => field.isInvalid)) {
         return;
@@ -101,7 +98,7 @@ export default class CfFieldInputTableComponent extends Component {
 
       if (!rows.find((doc) => doc.pk === newDocument.pk)) {
         // add document to table
-        yield this.args.onSave([...rows, newDocument]);
+        await this.args.onSave([...rows, newDocument]);
 
         this.notification.success(
           this.intl.t("caluma.form.notification.table.add.success"),
@@ -110,29 +107,28 @@ export default class CfFieldInputTableComponent extends Component {
 
       this.documentToEditIsNew = false;
 
-      yield this.close.perform();
+      await this.close.perform();
     } catch {
       this.notification.danger(
         this.intl.t("caluma.form.notification.table.add.error"),
       );
     }
-  }
+  });
 
-  @dropTask
-  *close() {
+  close = task({ drop: true }, async () => {
     if (this.documentToEditIsNew) {
-      yield this.removeOrphan(this.documentToEdit);
+      await this.removeOrphan(this.documentToEdit);
 
       this.documentToEditIsNew = false;
     }
 
     if (!this.args.disabled) {
-      yield this.args.field.validate.perform();
+      await this.args.field.validate.perform();
     }
 
     this.showAddModal = false;
     this.documentToEdit = null;
-  }
+  });
 
   async removeOrphan(calumaDocument) {
     // Remove orphaned document from database.

package/addon/components/cf-field.js

@@ -2,7 +2,7 @@ import { action } from "@ember/object";
 import { service } from "@ember/service";
 import { macroCondition, isTesting } from "@embroider/macros";
 import Component from "@glimmer/component";
-import { timeout, restartableTask } from "ember-concurrency";
+import { timeout, task } from "ember-concurrency";
 
 import { hasQuestionType } from "@projectcaluma/ember-core/helpers/has-question-type";
 
@@ -88,22 +88,21 @@ export default class CfFieldComponent extends Component {
    * @method save
    * @param {String|Number|String[]} value The new value to save to the field
    */
-  @restartableTask
-  *save(value) {
+  save = task({ restartable: true }, async (value) => {
     if (typeof this.args.onSave === "function") {
-      return yield this.args.onSave(this.args.field, value);
+      return await this.args.onSave(this.args.field, value);
     }
 
     /* istanbul ignore next */
     if (macroCondition(!isTesting())) {
-      yield timeout(500);
+      await timeout(500);
     }
 
     if (this.args.field.answer) {
       this.args.field.answer.value = value;
     }
 
-    yield this.args.field.validate.perform();
+    await this.args.field.validate.perform();
 
     if (this.args.field.isInvalid) {
       // If the frontend validation fails, we don't need to try saving the value
@@ -111,8 +110,8 @@ export default class CfFieldComponent extends Component {
       return;
     }
 
-    return yield this.args.field.save.unlinked().perform();
-  }
+    return await this.args.field.save.unlinked().perform();
+  });
 
   @action
   refreshDynamicOptions() {

package/addon/components/document-validity.js

@@ -1,6 +1,6 @@
 import { action } from "@ember/object";
 import Component from "@glimmer/component";
-import { restartableTask } from "ember-concurrency";
+import { task } from "ember-concurrency";
 import { cached } from "tracked-toolbox";
 
 /**
@@ -43,8 +43,15 @@ export default class DocumentValidity extends Component {
     return this._validate.isRunning;
   }
 
-  @restartableTask
-  *_validate() {
+  _validateField = task(async (field) => {
+    await field.validate.linked().perform();
+
+    if (field.question.hasFormatValidators) {
+      await field.save.linked().perform();
+    }
+  });
+
+  _validate = task({ restartable: true }, async () => {
     const saveTasks = this.args.document.fields
       .flatMap((field) => [
         ...[...(field._components ?? [])].map((c) => c.save.last),
@@ -54,16 +61,12 @@ export default class DocumentValidity extends Component {
 
     // Wait until all currently running save tasks in the UI and in the field
     // itself are finished
-    yield Promise.all(saveTasks);
+    await Promise.all(saveTasks);
 
-    yield Promise.all(
-      this.args.document.fields.map(async (field) => {
-        await field.validate.linked().perform();
-
-        if (field.question.hasFormatValidators) {
-          await field.save.linked().perform();
-        }
-      }),
+    await Promise.all(
+      this.args.document.fields.map((field) =>
+        this._validateField.perform(field),
+      ),
     );
 
     if (this.isValid) {
@@ -73,7 +76,7 @@ export default class DocumentValidity extends Component {
     }
 
     return this.isValid;
-  }
+  });
 
   @action
   validate() {

package/addon/lib/field.js

@@ -5,7 +5,7 @@ import { inject as service } from "@ember/service";
 import { camelize } from "@ember/string";
 import { tracked } from "@glimmer/tracking";
 import { queryManager } from "ember-apollo-client";
-import { dropTask, lastValue, restartableTask } from "ember-concurrency";
+import { task } from "ember-concurrency";
 import { validate } from "ember-validators";
 import isEqual from "lodash.isequal";
 import { cached } from "tracked-toolbox";
@@ -325,11 +325,10 @@ export default class Field extends Base {
    * @return {Object[]} Formerly used dynamic options
    * @private
    */
-  @dropTask
-  *_fetchUsedDynamicOptions() {
+  _fetchUsedDynamicOptions = task({ drop: true }, async () => {
     if (!this.question.isDynamic) return null;
 
-    const edges = yield this.apollo.query(
+    const edges = await this.apollo.query(
       {
         query: getDocumentUsedDynamicOptionsQuery,
         fetchPolicy: "cache-first",
@@ -345,15 +344,16 @@ export default class Field extends Base {
       slug,
       label,
     }));
-  }
+  });
 
   /**
    * The formerly used dynamic options for this question.
    *
    * @property {Object[]} usedDynamicOptions
    */
-  @lastValue("_fetchUsedDynamicOptions")
-  usedDynamicOptions;
+  get usedDynamicOptions() {
+    return this._fetchUsedDynamicOptions.lastSuccessful?.value;
+  }
 
   /**
    * The available options for choice questions. This only works for the
@@ -606,8 +606,7 @@ export default class Field extends Base {
    * @method save
    * @return {Object} The response from the server
    */
-  @restartableTask
-  *save() {
+  save = task({ restartable: true }, async () => {
     if (this.question.isCalculated) {
       return;
     }
@@ -628,8 +627,10 @@ export default class Field extends Base {
       input.dataSourceContext = JSON.stringify(this.document.dataSourceContext);
     }
 
+    await this.beforeSave();
+
     try {
-      const response = yield this.apollo.mutate(
+      const response = await this.apollo.mutate(
         {
           mutation: MUTATION_MAP[type],
           variables: { input },
@@ -653,12 +654,16 @@ export default class Field extends Base {
         this._errors = this._errors.filter(({ type }) => type !== "format");
       }
 
+      await this.afterSave(response);
+
       return response;
     } catch (e) {
       const validationError = e.errors.find(
         (err) => err.extensions?.code === "format_validation_failed",
       );
 
+      await this.onSaveError(e);
+
       if (validationError) {
         this._errors = [
           ...this._errors,
@@ -672,7 +677,32 @@ export default class Field extends Base {
         throw e;
       }
     }
-  }
+  });
+
+  /**
+   * Hook method that can be overridden to add functionality before saving the field.
+   *
+   * @method beforeSave
+   */
+  async beforeSave() {}
+
+  /**
+   * Hook method that can be overridden to add functionality after saving the field.
+   *
+   * @method afterSave
+   * @param {Object} response The response from the server
+   */
+  // eslint-disable-next-line no-unused-vars
+  async afterSave(response) {}
+
+  /**
+   * Hook method that can be overridden to add functionality when saving the field fails.
+   *
+   * @method onSaveError
+   * @param {Object} error The error thrown during saving
+   */
+  // eslint-disable-next-line no-unused-vars
+  async onSaveError(error) {}
 
   /**
    * The translated error messages
@@ -696,8 +726,7 @@ export default class Field extends Base {
    *
    * @method validate
    */
-  @restartableTask
-  *validate() {
+  validate = task({ restartable: true }, async () => {
     const specificValidation = this[`_validate${this.questionType}`];
 
     assert(
@@ -710,22 +739,23 @@ export default class Field extends Base {
       specificValidation,
     ];
 
-    const errors = (yield Promise.all(
-      validationFns.map(async (fn) => {
-        const res = await fn.call(this);
+    const errors = (
+      await Promise.all(
+        validationFns.map(async (fn) => {
+          const res = await fn.call(this);
 
-        return Array.isArray(res) ? res : [res];
-      }),
-    ))
+          return Array.isArray(res) ? res : [res];
+        }),
+      )
+    )
       .reduce((arr, e) => [...arr, ...e], []) // flatten the array
       .filter((e) => typeof e === "object");
 
     this._errors = errors;
-  }
+  });
 
-  @dropTask
-  *refreshAnswer() {
-    const response = yield this.apollo.query(
+  refreshAnswer = task({ drop: true }, async () => {
+    const response = await this.apollo.query(
       {
         query: refreshAnswerQuery,
         fetchPolicy: "network-only",
@@ -744,9 +774,9 @@ export default class Field extends Base {
         this.answer.raw[key] = value;
       });
 
-      yield this.validate.linked().perform();
+      await this.validate.linked().perform();
     }
-  }
+  });
 
   /**
    * Method to validate if a question is required or not.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form",
-  "version": "14.7.0",
+  "version": "14.8.0",
   "description": "Ember addon for rendering Caluma forms.",
   "keywords": [
     "ember-addon"
@@ -22,7 +22,7 @@
     "ember-cli-htmlbars": "^6.3.0",
     "ember-cli-showdown": "^9.0.1",
     "ember-composable-helpers": "^5.0.0",
-    "ember-concurrency": "^4.0.2",
+    "ember-concurrency": "^4.0.2 || ^5.1.0",
     "ember-flatpickr": "^8.0.1",
     "ember-in-viewport": "^4.1.0",
     "ember-intl": "^7.1.1",
@@ -39,7 +39,7 @@
     "luxon": "^3.5.0",
     "reactiveweb": "^1.3.0",
     "tracked-toolbox": "^2.0.0",
-    "@projectcaluma/ember-core": "^14.7.0"
+    "@projectcaluma/ember-core": "^14.8.0"
   },
   "devDependencies": {
     "@ember/optional-features": "2.3.0",
@@ -74,12 +74,12 @@
     "uikit": "3.25.6",
     "uuid": "13.0.0",
     "webpack": "5.104.1",
-    "@projectcaluma/ember-testing": "14.7.0",
-    "@projectcaluma/ember-workflow": "14.7.0"
+    "@projectcaluma/ember-workflow": "14.8.0",
+    "@projectcaluma/ember-testing": "14.8.0"
   },
   "peerDependencies": {
     "ember-source": ">= 4.0.0",
-    "@projectcaluma/ember-workflow": "^14.7.0"
+    "@projectcaluma/ember-workflow": "^14.8.0"
   },
   "dependenciesMeta": {
     "@projectcaluma/ember-core": {