@projectcaluma/ember-form 11.0.0-beta.2 → 11.0.0-beta.20

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 FileQuestion {
+    hintText
   }
   ... on ActionButtonQuestion {
     action
@@ -112,6 +141,7 @@ fragment FieldTableQuestion on Question {
         }
       }
     }
+    hintText
     tableDefaultAnswer: defaultAnswer {
       id
       value {

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";
@@ -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);
   }
 
   /**
@@ -771,12 +788,22 @@ 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 value.map((value) => this._validateOption(value));
+  }
+
+  _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,
     });
   }
 

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
     );
   }
 

package/addon/lib/question.js

@@ -1,7 +1,8 @@
 import { assert } from "@ember/debug";
 import { camelize } from "@ember/string";
 import { queryManager } from "ember-apollo-client";
-import { dropTask, lastValue } from "ember-concurrency";
+import { dropTask } from "ember-concurrency";
+import { trackedTask } from "ember-resources/util/ember-concurrency";
 import { cached } from "tracked-toolbox";
 
 import getDynamicOptions from "@projectcaluma/ember-form/gql/queries/dynamic-options.graphql";
@@ -71,13 +72,20 @@ export default class Question extends Base {
     );
 
     return (
-      question.node.dynamicChoiceOptions ||
+      question.node.dynamicChoiceOptions ??
       question.node.dynamicMultipleChoiceOptions
     );
   }
 
-  @lastValue("loadDynamicOptions") dynamicChoiceOptions;
-  @lastValue("loadDynamicOptions") dynamicMultipleChoiceOptions;
+  dynamicOptions = trackedTask(this, this.loadDynamicOptions, () => []);
+
+  get dynamicChoiceOptions() {
+    return this.dynamicOptions.value ?? [];
+  }
+
+  get dynamicMultipleChoiceOptions() {
+    return this.dynamicOptions.value ?? [];
+  }
 
   /**
    * Whether the question is a single choice question

package/addon/modifiers/autoresize.js

@@ -0,0 +1,16 @@
+import { inject as service } from "@ember/service";
+import AutoresizeModifier from "ember-autoresize-modifier/modifiers/autoresize";
+
+export default class CustomAutoresizeModifier extends AutoresizeModifier {
+  @service inViewport;
+
+  didInstall() {
+    super.didInstall();
+
+    this.inViewport.watchElement(this.element).onEnter(this.resize);
+  }
+
+  willRemove() {
+    this.inViewport.stopWatching(this.element);
+  }
+}

package/app/components/cf-field/hint.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-form/components/cf-field/hint";

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

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-form/helpers/format-graphql-error";

package/app/helpers/get-widget.js

@@ -1,4 +1 @@
-export {
-  default,
-  getWidget,
-} from "@projectcaluma/ember-form/helpers/get-widget";
+export { default } from "@projectcaluma/ember-form/helpers/get-widget";

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

@@ -0,0 +1,4 @@
+export {
+  default,
+  initialize,
+} from "@projectcaluma/ember-form/instance-initializers/form-widget-overrides";

package/app/modifiers/autoresize.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-form/modifiers/autoresize";

package/app/styles/@projectcaluma/ember-form.scss

@@ -5,19 +5,7 @@
 
 @import "../uikit-overwrites";
 
-.cf-checkbox_label {
-  display: block;
-  position: relative;
-  padding-left: 26px;
-
-  .uk-checkbox {
-    position: absolute;
-    top: 0.25em;
-    left: 0;
-    margin: 0;
-  }
-
-  & + br {
-    display: none;
-  }
+.table-controls > .uk-icon {
+  min-height: 20px;
+  min-width: 20px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form",
-  "version": "11.0.0-beta.2",
+  "version": "11.0.0-beta.20",
   "description": "Ember addon for rendering Caluma forms.",
   "keywords": [
     "ember-addon"
@@ -14,44 +14,48 @@
     "test:ember-compatibility": "ember try:each"
   },
   "dependencies": {
-    "@glimmer/component": "^1.0.4",
-    "@glimmer/tracking": "^1.0.4",
-    "@projectcaluma/ember-core": "^11.0.0-beta.2",
-    "ember-apollo-client": "^3.2.0",
-    "ember-auto-import": "^2.3.0",
+    "@ember/string": "^3.0.0",
+    "@embroider/macros": "^1.7.1",
+    "@embroider/util": "^1.7.1",
+    "@glimmer/component": "^1.1.2",
+    "@glimmer/tracking": "^1.1.2",
+    "@projectcaluma/ember-core": "^11.0.0-beta.7",
+    "ember-apollo-client": "^4.0.2",
+    "ember-auto-import": "^2.4.2",
     "ember-autoresize-modifier": "^0.5.0",
     "ember-cli-babel": "^7.26.11",
     "ember-cli-htmlbars": "^6.0.1",
     "ember-cli-showdown": "^6.0.1",
     "ember-composable-helpers": "^5.0.0",
+    "ember-concurrency": "^2.2.1",
     "ember-fetch": "^8.1.1",
-    "ember-in-viewport": "^4.0.0",
+    "ember-in-viewport": "^4.0.2",
     "ember-intl": "^5.7.2",
-    "ember-math-helpers": "^2.18.0",
-    "ember-pikaday": "^3.0.0",
-    "ember-power-select": "^5.0.3",
-    "ember-resources": "^4.1.3",
-    "ember-uikit": "^4.0.0",
-    "ember-validators": "^4.0.1",
+    "ember-math-helpers": "^2.18.2",
+    "ember-pikaday": "^4.0.0",
+    "ember-power-select": "^5.0.4",
+    "ember-resources": "^4.8.2",
+    "ember-uikit": "^5.1.3",
+    "ember-validators": "^4.1.2",
     "graphql": "^15.8.0",
     "jexl": "^2.3.0",
     "lodash.isequal": "^4.5.0",
-    "moment": "^2.29.1",
+    "luxon": "^2.4.0",
     "tracked-toolbox": "^1.2.3"
   },
   "devDependencies": {
     "@ember/optional-features": "2.0.0",
-    "@ember/test-helpers": "2.6.0",
-    "@embroider/test-setup": "0.50.2",
-    "@faker-js/faker": "6.0.0-alpha.3",
-    "@projectcaluma/ember-testing": "10.2.0-beta.1",
-    "@projectcaluma/ember-workflow": "11.0.0-beta.1",
+    "@ember/test-helpers": "2.8.1",
+    "@embroider/test-setup": "1.7.1",
+    "@faker-js/faker": "7.2.0",
+    "@projectcaluma/ember-testing": "11.0.0-beta.8",
+    "@projectcaluma/ember-workflow": "^11.0.0-beta.7",
     "broccoli-asset-rev": "3.0.0",
     "ember-cli": "3.28.5",
     "ember-cli-code-coverage": "1.0.3",
-    "ember-cli-dependency-checker": "3.2.0",
+    "ember-cli-dependency-checker": "3.3.1",
     "ember-cli-inject-live-reload": "2.1.0",
-    "ember-cli-mirage": "2.3.1",
+    "ember-cli-mirage": "3.0.0-alpha.3",
     "ember-cli-sri": "2.1.1",
     "ember-cli-terser": "4.0.2",
     "ember-disable-prototype-extensions": "1.1.3",
@@ -60,16 +64,24 @@
     "ember-maybe-import-regenerator": "1.0.0",
     "ember-qunit": "5.1.5",
     "ember-resolver": "8.0.3",
-    "ember-source": "3.28.8",
+    "ember-source": "3.28.9",
     "ember-source-channel-url": "3.0.0",
     "ember-try": "2.0.0",
     "loader.js": "4.7.0",
-    "miragejs": "0.1.43",
+    "miragejs": "0.1.45",
     "npm-run-all": "4.1.5",
-    "qunit": "2.17.2",
+    "qunit": "2.19.1",
     "qunit-dom": "2.0.0",
     "uuid": "8.3.2",
-    "webpack": "5.66.0"
+    "webpack": "5.73.0"
+  },
+  "peerDependencies": {
+    "@projectcaluma/ember-workflow": "^11.0.0-beta.7"
+  },
+  "peerDependenciesMeta": {
+    "@projectcaluma/ember-workflow": {
+      "optional": true
+    }
   },
   "engines": {
     "node": "12.* || 14.* || >= 16"

package/translations/de.yaml

@@ -12,6 +12,10 @@ caluma:
     optionNotAvailable: "Diese Option ist nicht mehr verfügbar"
     info: "Mehr Informationen"
 
+    error:
+      intro: "Oh nein, auf unserer Seite ist etwas schief gelaufen. Ihre Antwort konnte nicht gespeichert werden."
+      details: "Technische Details:"
+
     navigation:
       next: "Weiter"
       previous: "Zurück"
@@ -34,7 +38,6 @@ caluma:
       options-empty: "Keine Optionen vorhanden"
       search-placeholder: "Hier tippen um zu suchen"
       search-empty: "Keine Optionen gefunden"
-      null: "Keine Auswahl"
 
     validation:
       blank: "Dieses Feld darf nicht leer gelassen werden"
@@ -43,7 +46,8 @@ caluma:
       greaterThanOrEqualTo: "Die Eingabe in diesem Feld darf nicht kleiner als {gte} sein"
       lessThanOrEqualTo: "Die Eingabe in diesem Feld darf nicht grösser als {lte} sein"
       notAnInteger: "Bitte geben Sie eine ganze Zahl ein"
-      inclusion: "'{value}' ist kein gültiger Wert für dieses Feld"
+      inclusion: '"{label}" ist kein gültiger Wert für dieses Feld'
+      deleteFailed: "Beim Löschen ist ein Fehler aufgetreten."
       uploadFailed: "Beim Hochladen ist ein Fehler aufgetreten."
       format: "{errorMsg}"
       table: "Mindestens eine Zeile der Tabelle wurde nicht korrekt ausgefüllt"