fix(form builder): fix usage of nested properties in the question editor

projectcaluma · May 22, 2019 · 97a59a5 · 97a59a5
1 parent 42d2b7a
commit 97a59a5
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 198 deletions.
diff --git a/addon/components/cfb-form-editor/question.js b/addon/components/cfb-form-editor/question.js
@@ -5,7 +5,8 @@ import { task, timeout } from "ember-concurrency";
 import { ComponentQueryManager } from "ember-apollo-client";
 import v4 from "uuid/v4";
 import { optional } from "ember-composable-helpers/helpers/optional";
-import { computed, getWithDefault, get } from "@ember/object";
+import { computed, getWithDefault } from "@ember/object";
+import { reads } from "@ember/object/computed";
 import slugify from "ember-caluma/utils/slugify";
 import { A } from "@ember/array";
 import validations from "ember-caluma/validations/question";
@@ -96,8 +97,9 @@ export default Component.extend(ComponentQueryManager, {
             floatMaxValue: null,
             maxLength: null,
             options: [],
-            rowForm: "",
-            subForm: "",
+            rowForm: {},
+            subForm: {},
+            meta: {},
             dataSource: "",
             __typename: Object.keys(TYPES)[0]
           }
@@ -157,23 +159,7 @@ export default Component.extend(ComponentQueryManager, {
     });
   }).restartable(),
 
-  model: computed("data.lastSuccessful.value.firstObject.node", function() {
-    const model = this.get("data.lastSuccessful.value.firstObject.node");
-
-    return (
-      model &&
-      Object.assign(model, {
-        subForm: get(model, "subForm.slug"),
-        rowForm: get(model, "rowForm.slug"),
-        rowsToDisplay: getWithDefault(model, "rowForm.questions.edges", []).map(
-          ({ node }) => node
-        ),
-        selectedColumnsToDisplay: get(model, "meta.columnsToDisplay"),
-        hideLabel: get(model, "meta.hideLabel"),
-        widgetOverride: get(model, "meta.widgetOverride")
-      })
-    );
-  }),
+  model: reads("data.lastSuccessful.value.firstObject.node"),
 
   changeset: computed("model", function() {
     return new Changeset(this.model, lookupValidator(validations));
@@ -259,14 +245,14 @@ export default Component.extend(ComponentQueryManager, {
   _getTableQuestionInput(changeset) {
     return {
       isRequired: changeset.get("isRequired"),
-      rowForm: changeset.get("rowForm")
+      rowForm: changeset.get("rowForm.slug")
     };
   },
 
   _getFormQuestionInput(changeset) {
     return {
       isRequired: changeset.get("isRequired"),
-      subForm: changeset.get("subForm")
+      subForm: changeset.get("subForm.slug")
     };
   },
 
@@ -320,13 +306,7 @@ export default Component.extend(ComponentQueryManager, {
                 slug,
                 isHidden: changeset.get("isHidden"),
                 infoText: changeset.get("infoText"),
-                meta: JSON.stringify(
-                  Object.assign({}, changeset.get("data.meta"), {
-                    hideLabel: changeset.get("hideLabel"),
-                    widgetOverride: changeset.get("widgetOverride"),
-                    columnsToDisplay: changeset.get("selectedColumnsToDisplay")
-                  })
-                ),
+                meta: JSON.stringify(changeset.get("meta")),
                 isArchived: changeset.get("isArchived"),
                 clientMutationId: v4()
               },
@@ -416,18 +396,15 @@ export default Component.extend(ComponentQueryManager, {
     },
 
     /*
-     * This function adds the selected slugs to the selectedColumnsToDisplay
+     * This function adds the selected slugs to the columns to display
      * list if it isnt present, otherwise it will remove the slug.
      */
     toggleColumnToDisplay(value) {
-      let arr = this.get("model.selectedColumnsToDisplay");
-      let idx = arr.indexOf(value);
-      if (idx >= 0) {
-        arr.splice(idx, 1);
-        this.set("model.selectedColumnsToDisplay", arr);
-      } else {
-        this.set("model.selectedColumnsToDisplay", [...arr, value]);
-      }
+      let displayed = new Set(this.get("model.meta.columnsToDisplay"));
+
+      displayed.delete(value) || displayed.add(value);
+
+      this.set("model.meta.columnsToDisplay", [...displayed]);
     }
   }
 });
diff --git a/addon/templates/components/cfb-form-editor/question.hbs b/addon/templates/components/cfb-form-editor/question.hbs
@@ -175,16 +175,6 @@
           required=true
           renderComponent=(component "cfb-form-editor/question/options")
         }}
-
-        <div data-test-hide-label>
-          {{f.input
-            name="hideLabel"
-            required=true
-            label=(t "caluma.form-builder.question.hideLabel")
-            renderComponent=(component "cfb-toggle-switch" size="small")
-            class="uk-flex uk-flex-between uk-flex-column"
-          }}
-        </div>
       {{/if}}
 
       {{#if (contains f.model.__typename (array "DynamicMultipleChoiceQuestion" "DynamicChoiceQuestion"))}}
@@ -200,10 +190,12 @@
           optionLabelPath="info"
           includeBlank=(t "caluma.form-builder.question.chooseRowForm")
         }}
+      {{/if}}
 
+      {{#if (contains f.model.__typename (array "DynamicMultipleChoiceQuestion" "DynamicChoiceQuestion" "MultipleChoiceQuestion" "ChoiceQuestion"))}}
         <div data-test-hide-label>
           {{f.input
-            name="hideLabel"
+            name="meta.hideLabel"
             required=true
             label=(t "caluma.form-builder.question.hideLabel")
             renderComponent=(component "cfb-toggle-switch" size="small")
@@ -214,44 +206,46 @@
 
       {{#if (eq f.model.__typename "TableQuestion")}}
         {{f.input
-          name="rowForm"
+          name="rowForm.slug"
           type="select"
           options=(or availableForms.lastSuccessful.value (array ))
           required=true
-          includeBlank=(t "caluma.form-builder.question.chooseRowForm")
+          includeBlank=(t "caluma.form-builder.question.choose")
           label=(t "caluma.form-builder.question.rowForm")
         }}
 
-        {{#f.input name="columnsToDisplay" label=(t "caluma.form-builder.question.columnsToDisplay") as |fi|}}
-          {{#each model.rowsToDisplay as |row|}}
-            <label class="cf-checkbox_label">
-              <input
-                type="checkbox"
-                value={{row.slug}}
-                checked={{contains row.slug model.selectedColumnsToDisplay}}
-                onclick={{action "toggleColumnToDisplay" row.slug}}
-                onfocusout={{fi.setDirty}}
-                class="uk-checkbox uk-margin-small-right"
-              >
-              {{row.label}}
-            </label>
+        {{#f.input name="meta.columnsToDisplay" label=(t "caluma.form-builder.question.columnsToDisplay") as |fi|}}
+          {{#each model.rowForm.questions.edges as |rowEdge|}}
+            {{#let rowEdge.node as |row|}}
+              <label class="cf-checkbox_label">
+                <input
+                  type="checkbox"
+                  value={{row.slug}}
+                  checked={{contains row.slug model.meta.columnsToDisplay}}
+                  onclick={{action "toggleColumnToDisplay" row.slug}}
+                  onfocusout={{fi.setDirty}}
+                  class="uk-checkbox uk-margin-small-right"
+                >
+                {{row.label}}
+              </label>
+            {{/let}}
           {{/each}}
         {{/f.input}}
       {{/if}}
 
       {{#if (eq f.model.__typename "FormQuestion")}}
         {{f.input
-          name="subForm"
+          name="subForm.slug"
           type="select"
           options=(or availableForms.lastSuccessful.value (array ))
           required=true
-          includeBlank=(t "caluma.form-builder.question.chooseRowForm")
-          label=(t "caluma.form-builder.question.rowForm")
+          includeBlank=(t "caluma.form-builder.question.choose")
+          label=(t "caluma.form-builder.question.subForm")
         }}
       {{/if}}
 
       {{f.input
-        name="widgetOverride"
+        name="meta.widgetOverride"
         label=(t "caluma.form-builder.question.widgetOverride")
         class="uk-flex uk-flex-between uk-flex-column"
 

diff --git a/addon/validations/question.js b/addon/validations/question.js
@@ -60,6 +60,12 @@ export default {
     ),
     and(validateOptions(), validateLength({ min: 1 }))
   ),
-  rowForm: or(validateType("TableQuestion", false), validatePresence(true)),
-  subForm: or(validateType("FormQuestion", false), validatePresence(true))
+  "rowForm.slug": or(
+    validateType("TableQuestion", false),
+    validatePresence(true)
+  ),
+  "subForm.slug": or(
+    validateType("FormQuestion", false),
+    validatePresence(true)
+  )
 };
diff --git a/package.json b/package.json
@@ -37,8 +37,8 @@
     "broccoli-merge-trees": "^3.0.2",
     "ember-apollo-client": "2.0.0-beta.2",
     "ember-auto-import": "^1.3.0",
-    "ember-changeset": "^1.6.0",
-    "ember-changeset-validations": "^1.3.3",
+    "ember-changeset": "^2.1.0",
+    "ember-changeset-validations": "^2.1.0",
     "ember-cli-babel": "^7.7.3",
     "ember-cli-htmlbars": "^3.0.1",
     "ember-cli-sass": "^10.0.0",
@@ -64,9 +64,9 @@
     "uuid": "^3.3.2"
   },
   "devDependencies": {
+    "@adfinis-sygroup/semantic-release-config": "2.1.0",
     "@babel/plugin-proposal-decorators": "7.4.4",
     "@babel/plugin-proposal-object-rest-spread": "7.4.4",
-    "@adfinis-sygroup/semantic-release-config": "2.1.1",
     "@commitlint/cli": "7.6.1",
     "@commitlint/config-conventional": "7.6.0",
     "@ember/jquery": "0.6.0",

diff --git a/tests/integration/components/cfb-form-editor/question-test.js b/tests/integration/components/cfb-form-editor/question-test.js
@@ -368,7 +368,7 @@ module("Integration | Component | cfb-form-editor/question", function(hooks) {
     await fillIn("[name=__typename]", "TableQuestion");
     await fillIn("[name=label]", "Label");
     await fillIn("[name=slug]", "slug");
-    await fillIn("[name=rowForm]", "subform");
+    await fillIn("[name=rowForm\\.slug]", "subform");
 
     await click("button[type=submit]");
 
@@ -397,7 +397,7 @@ module("Integration | Component | cfb-form-editor/question", function(hooks) {
     await fillIn("[name=__typename]", "FormQuestion");
     await fillIn("[name=label]", "Label");
     await fillIn("[name=slug]", "slug");
-    await fillIn("[name=subForm]", "subform");
+    await fillIn("[name=subForm\\.slug]", "subform");
 
     await click("button[type=submit]");
 

diff --git a/translations/de-de.yaml b/translations/de-de.yaml
@@ -89,8 +89,9 @@ caluma:
       min-value: "Minimaler Wert"
       max-value: "Maximaler Wert"
       max-length: "Maximale Länge"
-      rowForm: "Formular für Einträge"
-      chooseRowForm: "-- bitte wählen --"
+      rowForm: "Tabellen-Formular für Einträge"
+      subForm: "Formular für Einträge"
+      choose: "-- bitte wählen --"
       columnsToDisplay: "Spalten zur Anzeige auswählen"
 
       new: "Neue Frage"