Skip to content
Permalink
Browse files

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

  • Loading branch information...
anehx committed May 22, 2019
1 parent 42d2b7a commit 97a59a587074c38e42ff55c98fd3b2d9db7dcd55
@@ -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]);
}
}
});
@@ -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"

@@ -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)
)
};
@@ -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",
@@ -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]");

@@ -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"

0 comments on commit 97a59a5

Please sign in to comment.
You can’t perform that action at this time.