@projectcaluma/ember-form 11.0.0-beta.3 → 11.0.0-beta.31

package/addon/components/cf-field.js

@@ -1,5 +1,5 @@
-import { getOwner } from "@ember/application";
-import { set } from "@ember/object";
+import { action } from "@ember/object";
+import { macroCondition, isTesting } from "@embroider/macros";
 import Component from "@glimmer/component";
 import { timeout, restartableTask } from "ember-concurrency";
 
@@ -9,7 +9,7 @@ import { hasQuestionType } from "@projectcaluma/ember-core/helpers/has-question-
  * Component to display a label and input for a certain field of a document.
  *
  * ```hbs
- * {{cf-field field=someField}}
+ * <CfField @field={{this.someField}} />
  * ```
  *
  * You can disable the field by passing `disabled=true`.
@@ -18,6 +18,16 @@ import { hasQuestionType } from "@projectcaluma/ember-core/helpers/has-question-
  * @argument {Field} field The field data model to render
  */
 export default class CfFieldComponent extends Component {
+  @action
+  registerComponent() {
+    this.args.field._components.add(this);
+  }
+
+  @action
+  unregisterComponent() {
+    this.args.field._components.delete(this);
+  }
+
   get visible() {
     return (
       !this.args.field?.hidden &&
@@ -36,35 +46,49 @@ export default class CfFieldComponent extends Component {
     return !hasQuestionType(this.args.field?.question, "action-button");
   }
 
+  get hintTextVisible() {
+    return !hasQuestionType(
+      this.args.field?.question,
+      "action-button",
+      "static",
+      "form"
+    );
+  }
+
   get saveIndicatorVisible() {
     return !hasQuestionType(this.args.field?.question, "action-button");
   }
 
   /**
-   * Task to save a field. This will set the passed value to the answer and
-   * save the field to the API after a timeout off 500 milliseconds.
+   * Task to save a field. This will set the passed value to the answer and save
+   * the field to the API after a timeout of 500 milliseconds which intends to
+   * reduce the amount of saved values when changed rapidly.
    *
    * @method save
-   * @param {String|Number|String[]} value
+   * @param {String|Number|String[]} value The new value to save to the field
+   * @param {Boolean} bypassTimeout Whether to bypass the timeout
    */
   @restartableTask
-  *save(value) {
-    const { environment } =
-      getOwner(this).resolveRegistration("config:environment");
+  *save(value, bypassTimeout = false) {
+    if (typeof this.args.onSave === "function") {
+      return yield this.args.onSave(this.args.field, value);
+    }
 
     /* istanbul ignore next */
-    if (environment !== "test") {
-      yield timeout(500);
+    if (macroCondition(isTesting())) {
+      // no timeout
+    } else {
+      if (!bypassTimeout) {
+        yield timeout(500);
+      }
     }
 
-    set(this.args.field.answer, "value", value);
+    if (this.args.field.answer) {
+      this.args.field.answer.value = value;
+    }
 
     yield this.args.field.validate.perform();
 
-    try {
-      return yield this.args.field.save.unlinked().perform();
-    } catch (e) {
-      // that's ok
-    }
+    return yield this.args.field.save.unlinked().perform();
   }
 }

package/addon/components/cf-form-wrapper.hbs

@@ -1,6 +1,8 @@
 {{#let
   (component
-    (get-widget @fieldset.field.question @fieldset.form default="cf-form")
+    (ensure-safe-component
+      (get-widget @fieldset.field.question @fieldset.form default="cf-form")
+    )
   )
   as |FormComponent|
 }}
@@ -9,5 +11,6 @@
     @fieldset={{@fieldset}}
     @context={{@context}}
     @disabled={{@disabled}}
+    @onSave={{@onSave}}
   />
 {{/let}}

package/addon/components/cf-form.hbs

@@ -3,7 +3,12 @@
     {{#if (has-block)}}
       {{yield field}}
     {{else}}
-      <CfField @field={{field}} @disabled={{@disabled}} @context={{@context}} />
+      <CfField
+        @field={{field}}
+        @disabled={{@disabled}}
+        @context={{@context}}
+        @onSave={{@onSave}}
+      />
     {{/if}}
   {{/each}}
 </form>

package/addon/components/document-validity.js

@@ -1,6 +1,7 @@
 import { action } from "@ember/object";
 import Component from "@glimmer/component";
 import { restartableTask } from "ember-concurrency";
+import { cached } from "tracked-toolbox";
 
 /**
  * Component to check the validity of a document
@@ -31,12 +32,26 @@ export default class DocumentValidity extends Component {
    * @argument {Boolean} validateOnEnter
    */
 
+  @cached
   get isValid() {
-    return this.args.document.fields.every((f) => f.isValid);
+    return this.args.document.fields
+      .filter((f) => !f.hidden)
+      .every((f) => f.isValid);
   }
 
   @restartableTask
   *_validate() {
+    const saveTasks = this.args.document.fields
+      .flatMap((field) => [
+        ...[...(field._components ?? [])].map((c) => c.save.last),
+        field.save?.last,
+      ])
+      .filter(Boolean);
+
+    // Wait until all currently running save tasks in the UI and in the field
+    // itself are finished
+    yield Promise.all(saveTasks);
+
     for (const field of this.args.document.fields) {
       yield field.validate.linked().perform();
     }

package/addon/gql/fragments/field.graphql

@@ -19,6 +19,16 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    formatValidators {
+      edges {
+        node {
+          slug
+          regex
+          errorMsg
+        }
+      }
+    }
+    hintText
   }
   ... on TextareaQuestion {
     textareaMinLength: minLength
@@ -28,6 +38,16 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    formatValidators {
+      edges {
+        node {
+          slug
+          regex
+          errorMsg
+        }
+      }
+    }
+    hintText
   }
   ... on IntegerQuestion {
     integerMinValue: minValue
@@ -37,6 +57,7 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    hintText
   }
   ... on FloatQuestion {
     floatMinValue: minValue
@@ -46,6 +67,7 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    hintText
   }
   ... on ChoiceQuestion {
     choiceOptions: options {
@@ -62,6 +84,7 @@ fragment SimpleQuestion on Question {
       id
       value
     }
+    hintText
   }
   ... on MultipleChoiceQuestion {
     multipleChoiceOptions: options {
@@ -78,18 +101,24 @@ fragment SimpleQuestion on Question {
       id
       value
     }
+    hintText
   }
   ... on DateQuestion {
     dateDefaultAnswer: defaultAnswer {
       id
       value
     }
+    hintText
   }
   ... on StaticQuestion {
     staticContent
   }
   ... on CalculatedFloatQuestion {
     calcExpression
+    hintText
+  }
+  ... on FilesQuestion {
+    hintText
   }
   ... on ActionButtonQuestion {
     action
@@ -112,6 +141,7 @@ fragment FieldTableQuestion on Question {
         }
       }
     }
+    hintText
     tableDefaultAnswer: defaultAnswer {
       id
       value {
@@ -204,8 +234,8 @@ fragment SimpleAnswer on Answer {
   ... on ListAnswer {
     listValue: value
   }
-  ... on FileAnswer {
-    fileValue: value {
+  ... on FilesAnswer {
+    filesValue: value {
       id
       uploadUrl
       downloadUrl

package/addon/gql/mutations/save-document-files-answer.graphql

@@ -0,0 +1,9 @@
+#import * from '../fragments/field.graphql'
+
+mutation SaveDocumentFilesAnswer($input: SaveDocumentFilesAnswerInput!) {
+  saveDocumentFilesAnswer(input: $input) {
+    answer {
+      ...FieldAnswer
+    }
+  }
+}

package/addon/gql/queries/document-forms.graphql

@@ -1,7 +1,7 @@
 #import FieldQuestion, FieldTableQuestion, SimpleQuestion from '../fragments/field.graphql'
 
 query DocumentForms($slug: String!) {
-  allForms(filter: [{ slug: $slug }]) {
+  allForms(filter: [{ slugs: [$slug] }]) {
     edges {
       node {
         id

package/addon/gql/queries/dynamic-options.graphql

@@ -1,5 +1,5 @@
 query DynamicOptions($question: String!) {
-  allQuestions(filter: [{ slug: $question }], first: 1) {
+  allQuestions(filter: [{ slugs: [$question] }], first: 1) {
     edges {
       node {
         id

package/addon/gql/queries/{fileanswer-info.graphql → filesanswer-info.graphql}

@@ -1,8 +1,8 @@
-query FileAnswerInfo($id: ID!) {
+query FilesAnswerInfo($id: ID!) {
   node(id: $id) {
-    id
-    ... on FileAnswer {
-      fileValue: value {
+    ... on FilesAnswer {
+      id
+      value {
         id
         uploadUrl
         downloadUrl

package/addon/helpers/format-graphql-error.js

@@ -0,0 +1,21 @@
+import { helper } from "@ember/component/helper";
+
+export function formatGraphqlErrorObject(error) {
+  try {
+    const path = error.path.join(".");
+    const { line, column } = error.locations[error.locations.length - 1];
+
+    return `${path}:${line}:${column}: ${error.message}`;
+  } catch (e) {
+    return null;
+  }
+}
+
+export function formatGraphqlError(error) {
+  return (
+    error?.errors?.map(formatGraphqlErrorObject).filter(Boolean).join("\n") ??
+    ""
+  );
+}
+
+export default helper(([error]) => formatGraphqlError(error));

package/addon/helpers/get-widget.js

@@ -1,6 +1,15 @@
 import Helper from "@ember/component/helper";
 import { warn } from "@ember/debug";
 import { inject as service } from "@ember/service";
+import { ensureSafeComponent } from "@embroider/util";
+
+import InputComponent from "@projectcaluma/ember-form/components/cf-field/input";
+import FormComponent from "@projectcaluma/ember-form/components/cf-form";
+
+const DEFAULT_WIDGETS = {
+  "cf-field/input": InputComponent,
+  "cf-form": FormComponent,
+};
 
 /**
  * Helper for getting the right widget.
@@ -42,9 +51,14 @@ export default class GetWidgetHelper extends Helper {
         { id: "ember-caluma.unregistered-override" }
       );
 
-      if (override) return widget;
+      if (override) {
+        return ensureSafeComponent(
+          override.componentClass ?? override.component,
+          this
+        );
+      }
     }
 
-    return defaultWidget;
+    return ensureSafeComponent(DEFAULT_WIDGETS[defaultWidget], this);
   }
 }

package/addon/instance-initializers/form-widget-overrides.js

@@ -0,0 +1,52 @@
+import { setOwner } from "@ember/application";
+import { inject as service } from "@ember/service";
+
+import HiddenComponent from "@projectcaluma/ember-form/components/cf-field/input/hidden";
+import PowerSelectComponent from "@projectcaluma/ember-form/components/cf-field/input/powerselect";
+
+class HiddenOverride {
+  @service intl;
+
+  get label() {
+    return this.intl.t("caluma.form-builder.question.widgetOverrides.hidden");
+  }
+
+  component = "cf-field/input/hidden";
+  componentClass = HiddenComponent;
+}
+
+class PowerSelectOverride {
+  @service intl;
+
+  get label() {
+    return this.intl.t(
+      "caluma.form-builder.question.widgetOverrides.powerselect"
+    );
+  }
+
+  component = "cf-field/input/powerselect";
+  componentClass = PowerSelectComponent;
+  types = [
+    "ChoiceQuestion",
+    "MultipleChoiceQuestion",
+    "DynamicChoiceQuestion",
+    "DynamicMultipleChoiceQuestion",
+  ];
+}
+
+export function initialize(appInstance) {
+  const options = appInstance.lookup("service:caluma-options");
+
+  const hiddenOverride = new HiddenOverride();
+  const powerSelectOverride = new PowerSelectOverride();
+
+  setOwner(hiddenOverride, appInstance);
+  setOwner(powerSelectOverride, appInstance);
+
+  options.registerComponentOverride(hiddenOverride);
+  options.registerComponentOverride(powerSelectOverride);
+}
+
+export default {
+  initialize,
+};

package/addon/lib/field.js

@@ -3,6 +3,7 @@ import { assert } from "@ember/debug";
 import { associateDestroyableChild } from "@ember/destroyable";
 import { inject as service } from "@ember/service";
 import { camelize } from "@ember/string";
+import { isEmpty } from "@ember/utils";
 import { tracked } from "@glimmer/tracking";
 import { queryManager } from "ember-apollo-client";
 import { restartableTask, lastValue, dropTask } from "ember-concurrency";
@@ -12,7 +13,7 @@ import { cached } from "tracked-toolbox";
 
 import { decodeId } from "@projectcaluma/ember-core/helpers/decode-id";
 import saveDocumentDateAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-date-answer.graphql";
-import saveDocumentFileAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-file-answer.graphql";
+import saveDocumentFilesAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-files-answer.graphql";
 import saveDocumentFloatAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-float-answer.graphql";
 import saveDocumentIntegerAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-integer-answer.graphql";
 import saveDocumentListAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-list-answer.graphql";
@@ -33,7 +34,7 @@ export const TYPE_MAP = {
   DynamicChoiceQuestion: "StringAnswer",
   TableQuestion: "TableAnswer",
   FormQuestion: null,
-  FileQuestion: "FileAnswer",
+  FilesQuestion: "FilesAnswer",
   StaticQuestion: null,
   DateQuestion: "DateAnswer",
 };
@@ -43,7 +44,7 @@ const MUTATION_MAP = {
   IntegerAnswer: saveDocumentIntegerAnswerMutation,
   StringAnswer: saveDocumentStringAnswerMutation,
   ListAnswer: saveDocumentListAnswerMutation,
-  FileAnswer: saveDocumentFileAnswerMutation,
+  FilesAnswer: saveDocumentFilesAnswerMutation,
   DateAnswer: saveDocumentDateAnswerMutation,
   TableAnswer: saveDocumentTableAnswerMutation,
 };
@@ -63,7 +64,6 @@ const fieldIsHiddenOrEmpty = (field) => {
  */
 export default class Field extends Base {
   @service intl;
-  @service validator;
 
   @queryManager apollo;
 
@@ -83,18 +83,12 @@ export default class Field extends Base {
   _createQuestion() {
     const owner = getOwner(this);
 
-    const question =
+    this.question =
       this.calumaStore.find(`Question:${this.raw.question.slug}`) ||
       new (owner.factoryFor("caluma-model:question").class)({
         raw: this.raw.question,
         owner,
       });
-
-    if (question.isDynamic) {
-      question.loadDynamicOptions.perform();
-    }
-
-    this.question = question;
   }
 
   _createAnswer() {
@@ -113,6 +107,7 @@ export default class Field extends Base {
 
       answer = new Answer({
         raw: {
+          id: null,
           __typename: answerType,
           question: { slug: this.raw.question.slug },
           [camelize(answerType.replace(/Answer$/, "Value"))]: null,
@@ -152,6 +147,16 @@ export default class Field extends Base {
    */
   @tracked _errors = [];
 
+  /**
+   * Currently rendered field components that use this field. This is used in
+   * the document validity component to await all current save tasks before
+   * validating.
+   *
+   * @property {Set} _components
+   * @private
+   */
+  _components = new Set();
+
   /**
    * The primary key of the field. Consists of the document and question primary
    * keys.
@@ -577,10 +582,10 @@ export default class Field extends Base {
   @cached
   get errors() {
     return this._errors.map(({ type, context, value }) => {
-      return this.intl.t(
-        `caluma.form.validation.${type}`,
-        Object.assign({}, context, { value })
-      );
+      return this.intl.t(`caluma.form.validation.${type}`, {
+        ...context,
+        value,
+      });
     });
   }
 
@@ -618,6 +623,35 @@ export default class Field extends Base {
     this._errors = errors;
   }
 
+  /**
+   * Validate the value against the regexes of the given format validators.
+   *
+   * @method _validateFormatValidators
+   * @return {Array<Boolean|Object>} An array of error objects or `true`
+   * @private
+   */
+  _validateFormatValidators() {
+    const validators =
+      this.question.raw.formatValidators?.edges.map((edge) => edge.node) ?? [];
+    const value = this.answer.value;
+
+    if (isEmpty(value)) {
+      // empty values should not be validated since they are handled by the
+      // requiredness validation
+      return validators.map(() => true);
+    }
+
+    return validators.map((validator) => {
+      return (
+        new RegExp(validator.regex).test(value) || {
+          type: "format",
+          context: { errorMsg: validator.errorMsg },
+          value,
+        }
+      );
+    });
+  }
+
   /**
    * Method to validate if a question is required or not.
    *
@@ -637,15 +671,12 @@ export default class Field extends Base {
    * predefined by the question.
    *
    * @method _validateTextQuestion
-   * @return {Promise<Boolean|Object>} A promise which resolves into an object if invalid or true if valid
+   * @return {Array<Boolean|Object>} An array of error objects or `true`
    * @private
    */
-  async _validateTextQuestion() {
+  _validateTextQuestion() {
     return [
-      ...(await this.validator.validate(
-        this.answer.value,
-        this.question.raw.meta.formatValidators ?? []
-      )),
+      ...this._validateFormatValidators(),
       validate("length", this.answer.value, {
         min: this.question.raw.textMinLength || 0,
         max: this.question.raw.textMaxLength || Number.POSITIVE_INFINITY,
@@ -658,15 +689,12 @@ export default class Field extends Base {
    * than predefined by the question.
    *
    * @method _validateTextareaQuestion
-   * @return {Promise<Boolean|Object>} A promise which resolves into an object if invalid or true if valid
+   * @return {Array<Boolean|Object>} An array of error objects or `true`
    * @private
    */
-  async _validateTextareaQuestion() {
+  _validateTextareaQuestion() {
     return [
-      ...(await this.validator.validate(
-        this.answer.value,
-        this.question.raw.meta.formatValidators ?? []
-      )),
+      ...this._validateFormatValidators(),
       validate("length", this.answer.value, {
         min: this.question.raw.textareaMinLength || 0,
         max: this.question.raw.textareaMaxLength || Number.POSITIVE_INFINITY,
@@ -714,10 +742,7 @@ export default class Field extends Base {
    * @private
    */
   _validateChoiceQuestion() {
-    return validate("inclusion", this.answer.value, {
-      allowBlank: true,
-      in: (this.options || []).map(({ slug }) => slug),
-    });
+    return this._validateOption(this.answer.value, true);
   }
 
   /**
@@ -729,15 +754,9 @@ export default class Field extends Base {
    * @private
    */
   _validateMultipleChoiceQuestion() {
-    const value = this.answer.value;
-    if (!value) {
-      return true;
-    }
-    return value.map((value) =>
-      validate("inclusion", value, {
-        in: (this.options || []).map(({ slug }) => slug),
-      })
-    );
+    return this.answer.value
+      ? this.answer.value.map((value) => this._validateOption(value))
+      : true;
   }
 
   /**
@@ -749,11 +768,9 @@ export default class Field extends Base {
    * @private
    */
   async _validateDynamicChoiceQuestion() {
-    await this.question.loadDynamicOptions.perform();
+    await this.question.dynamicOptions;
 
-    return validate("inclusion", this.answer.value, {
-      in: (this.options || []).map(({ slug }) => slug),
-    });
+    return this._validateOption(this.answer.value, true);
   }
 
   /**
@@ -771,23 +788,35 @@ export default class Field extends Base {
       return true;
     }
 
-    await this.question.loadDynamicOptions.perform();
+    await this.question.dynamicOptions;
 
-    return value.map((value) => {
-      return validate("inclusion", value, {
-        in: (this.options || []).map(({ slug }) => slug),
-      });
+    return this.answer.value
+      ? value.map((value) => this._validateOption(value))
+      : true;
+  }
+
+  _validateOption(value, allowBlank = false) {
+    const label = Array.isArray(this.selected)
+      ? this.selected.find((selected) => selected.slug === value)?.label
+      : this.selected?.label;
+
+    return validate("inclusion", value, {
+      in: (this.options || [])
+        .filter((option) => !option.disabled)
+        .map(({ slug }) => slug),
+      allowBlank,
+      label: label ?? value,
     });
   }
 
   /**
    * Dummy method for the validation of file uploads.
    *
-   * @method _validateFileQuestion
+   * @method _validateFilesQuestion
    * @return {Boolean} Always returns true
    * @private
    */
-  _validateFileQuestion() {
+  _validateFilesQuestion() {
     return true;
   }
 

package/addon/lib/navigation.js

@@ -232,7 +232,9 @@ export class NavigationItem extends Base {
   @cached
   get visibleFields() {
     return this.fieldset.fields.filter(
-      (f) => f.questionType !== "FormQuestion" && !f.hidden
+      (f) =>
+        !["FormQuestion", "StaticQuestion"].includes(f.questionType) &&
+        !f.hidden
     );
   }