@projectcaluma/ember-form-builder 11.0.0-beta.5 → 11.0.0-beta.6

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [@projectcaluma/ember-form-builder-v11.0.0-beta.6](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.5...@projectcaluma/ember-form-builder-v11.0.0-beta.6) (2022-02-03)
+
+
+### Bug Fixes
+
+* **validation:** sync format validator validation with backend ([ee66968](https://github.com/projectcaluma/ember-caluma/commit/ee66968230b9f0e4c5a4df8bdb3f8e58b44b5b82))
+
+
+### BREAKING CHANGES
+
+* **validation:** Use the `formatValidators` property of the backend to store and read
+format validators instead of the `meta.formatValidators` so the backend
+validates as well. For more information on how to migrate check the
+migration guide to v11.
+
 # [@projectcaluma/ember-form-builder-v11.0.0-beta.5](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.4...@projectcaluma/ember-form-builder-v11.0.0-beta.5) (2022-02-02)
 
 

package/addon/components/cfb-form-editor/question/validation.hbs

@@ -1,9 +1,9 @@
-<div class="uk-margin" {{did-insert (perform this.availableFormatValidators)}}>
+<div class="uk-margin">
   {{component @labelComponent}}
 
   <PowerSelectMultiple
     @selected={{this.selected}}
-    @placeholder={{this.placeholder}}
+    @placeholder={{@placeholder}}
     @options={{this.validators}}
     @onChange={{this.updateValidators}}
     @renderInPlace={{true}}

package/addon/components/cfb-form-editor/question/validation.js

@@ -2,34 +2,38 @@ import { action } from "@ember/object";
 import Component from "@glimmer/component";
 import { queryManager } from "ember-apollo-client";
 import { dropTask } from "ember-concurrency";
+import { useTask } from "ember-resources";
 
-import allFormatValidatorsQuery from "@projectcaluma/ember-core/gql/queries/all-format-validators.graphql";
+import allFormatValidatorsQuery from "@projectcaluma/ember-form-builder/gql/queries/all-format-validators.graphql";
 
 export default class CfbFormEditorQuestionValidation extends Component {
   @queryManager apollo;
 
-  @dropTask
-  *availableFormatValidators() {
-    const formatValidators = yield this.apollo.watchQuery(
-      { query: allFormatValidatorsQuery, fetchPolicy: "cache-and-network" },
-      "allFormatValidators.edges"
-    );
-    return formatValidators.map((edge) => edge.node);
-  }
-
   get validators() {
-    return this.availableFormatValidators?.lastSuccessful?.value || [];
+    return this._validators.value?.map((edge) => edge.node) ?? [];
   }
 
   get selected() {
     return this.validators.filter((validator) =>
-      (this.args.value || []).includes(validator.slug)
+      (this.args.value?.edges.map((edge) => edge.node.slug) || []).includes(
+        validator.slug
+      )
+    );
+  }
+
+  _validators = useTask(this, this.fetchFormatValidators, () => []);
+
+  @dropTask
+  *fetchFormatValidators() {
+    return yield this.apollo.watchQuery(
+      { query: allFormatValidatorsQuery, fetchPolicy: "cache-and-network" },
+      "allFormatValidators.edges"
     );
   }
 
   @action
   updateValidators(value) {
-    this.args.update(value.map((validator) => validator.slug));
+    this.args.update({ edges: value.map(({ slug }) => ({ node: { slug } })) });
     this.args.setDirty();
   }
 }

package/addon/components/cfb-form-editor/question.hbs

@@ -207,13 +207,13 @@
         />
 
         <f.input
-          @name="meta.formatValidators"
+          @name="formatValidators"
           @label={{t "caluma.form-builder.question.formatValidators"}}
           @placeholder={{t "caluma.form-builder.question.choose"}}
           @required={{false}}
           @renderComponent={{component "cfb-form-editor/question/validation"}}
-          @on-update={{changeset-set f.model "meta.formatValidators"}}
-          @value={{changeset-get f.model "meta.formatValidators"}}
+          @on-update={{changeset-set f.model "formatValidators"}}
+          @value={{changeset-get f.model "formatValidators"}}
         />
       {{/if}}
 

package/addon/components/cfb-form-editor/question.js

@@ -106,6 +106,7 @@ export default class CfbFormEditorQuestion extends Component {
             subForm: {},
             meta: {},
             dataSource: "",
+            formatValidators: null,
             // action button
             action: ACTIONS[0],
             color: COLORS[0],
@@ -258,6 +259,9 @@ export default class CfbFormEditorQuestion extends Component {
       minLength: parseInt(changeset.get("minLength")),
       maxLength: parseInt(changeset.get("maxLength")),
       placeholder: changeset.get("placeholder"),
+      formatValidators: changeset
+        .get("formatValidators")
+        ?.edges.map((edge) => edge.node.slug),
     };
   }
 
@@ -266,6 +270,9 @@ export default class CfbFormEditorQuestion extends Component {
       minLength: parseInt(changeset.get("minLength")),
       maxLength: parseInt(changeset.get("maxLength")),
       placeholder: changeset.get("placeholder"),
+      formatValidators: changeset
+        .get("formatValidators")
+        ?.edges.map((edge) => edge.node.slug),
     };
   }
 

package/addon/engine.js

@@ -11,7 +11,7 @@ export default class FormBuilderEngine extends Engine {
   Resolver = Resolver;
 
   dependencies = {
-    services: ["apollo", "notification", "intl", "caluma-options", "validator"],
+    services: ["apollo", "notification", "intl", "caluma-options"],
   };
 }
 

package/addon/gql/queries/all-format-validators.graphql

@@ -0,0 +1,10 @@
+query AllFormatValidators {
+  allFormatValidators {
+    edges {
+      node {
+        slug
+        name
+      }
+    }
+  }
+}

package/addon/gql/queries/form-editor-question.graphql

@@ -33,11 +33,25 @@ query FormEditorQuestion($slug: String!) {
             id
             stringValue: value
           }
+          formatValidators {
+            edges {
+              node {
+                slug
+              }
+            }
+          }
         }
         ... on TextareaQuestion {
           minLength
           maxLength
           placeholder
+          formatValidators {
+            edges {
+              node {
+                slug
+              }
+            }
+          }
           defaultAnswer {
             id
             stringValue: value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form-builder",
-  "version": "11.0.0-beta.5",
+  "version": "11.0.0-beta.6",
   "description": "Ember engine for building Caluma forms.",
   "keywords": [
     "ember-addon",
@@ -21,8 +21,8 @@
     "@ember/render-modifiers": "^2.0.4",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
-    "@projectcaluma/ember-core": "^11.0.0-beta.2",
-    "@projectcaluma/ember-form": "^11.0.0-beta.6",
+    "@projectcaluma/ember-core": "^11.0.0-beta.3",
+    "@projectcaluma/ember-form": "^11.0.0-beta.7",
     "codejar": "^3.5.0",
     "ember-apollo-client": "^3.2.0",
     "ember-auto-import": "^2.4.0",
@@ -54,7 +54,7 @@
     "@ember/test-helpers": "2.6.0",
     "@embroider/test-setup": "1.0.0",
     "@faker-js/faker": "6.0.0-alpha.5",
-    "@projectcaluma/ember-testing": "10.2.0-beta.2",
+    "@projectcaluma/ember-testing": "11.0.0-beta.1",
     "broccoli-asset-rev": "3.0.0",
     "ember-cli": "3.28.5",
     "ember-cli-code-coverage": "1.0.3",