Skip to content

Commit

Permalink
fix(form builder): fix usage of nested properties in the question editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@anehx
Jonas Metzener authored and anehx committed May 22, 2019
1 parent 42d2b7a commit 97a59a5
Show file tree
Hide file tree
Showing 7 changed files with 150 additions and 198 deletions.
53 changes: 15 additions & 38 deletions addon/components/cfb-form-editor/question.js
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import { task, timeout } from "ember-concurrency";
import { ComponentQueryManager } from "ember-apollo-client"; import { ComponentQueryManager } from "ember-apollo-client";
import v4 from "uuid/v4"; import v4 from "uuid/v4";
import { optional } from "ember-composable-helpers/helpers/optional"; 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 slugify from "ember-caluma/utils/slugify";
import { A } from "@ember/array"; import { A } from "@ember/array";
import validations from "ember-caluma/validations/question"; import validations from "ember-caluma/validations/question";
Expand Down Expand Up @@ -96,8 +97,9 @@ export default Component.extend(ComponentQueryManager, {
floatMaxValue: null, floatMaxValue: null,
maxLength: null, maxLength: null,
options: [], options: [],
rowForm: "", rowForm: {},
subForm: "", subForm: {},
meta: {},
dataSource: "", dataSource: "",
__typename: Object.keys(TYPES)[0] __typename: Object.keys(TYPES)[0]
} }
Expand Down Expand Up @@ -157,23 +159,7 @@ export default Component.extend(ComponentQueryManager, {
}); });
}).restartable(), }).restartable(),


model: computed("data.lastSuccessful.value.firstObject.node", function() { model: reads("data.lastSuccessful.value.firstObject.node"),
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")
})
);
}),


changeset: computed("model", function() { changeset: computed("model", function() {
return new Changeset(this.model, lookupValidator(validations)); return new Changeset(this.model, lookupValidator(validations));
Expand Down Expand Up @@ -259,14 +245,14 @@ export default Component.extend(ComponentQueryManager, {
_getTableQuestionInput(changeset) { _getTableQuestionInput(changeset) {
return { return {
isRequired: changeset.get("isRequired"), isRequired: changeset.get("isRequired"),
rowForm: changeset.get("rowForm") rowForm: changeset.get("rowForm.slug")
}; };
}, },


_getFormQuestionInput(changeset) { _getFormQuestionInput(changeset) {
return { return {
isRequired: changeset.get("isRequired"), isRequired: changeset.get("isRequired"),
subForm: changeset.get("subForm") subForm: changeset.get("subForm.slug")
}; };
}, },


Expand Down Expand Up @@ -320,13 +306,7 @@ export default Component.extend(ComponentQueryManager, {
slug, slug,
isHidden: changeset.get("isHidden"), isHidden: changeset.get("isHidden"),
infoText: changeset.get("infoText"), infoText: changeset.get("infoText"),
meta: JSON.stringify( meta: JSON.stringify(changeset.get("meta")),
Object.assign({}, changeset.get("data.meta"), {
hideLabel: changeset.get("hideLabel"),
widgetOverride: changeset.get("widgetOverride"),
columnsToDisplay: changeset.get("selectedColumnsToDisplay")
})
),
isArchived: changeset.get("isArchived"), isArchived: changeset.get("isArchived"),
clientMutationId: v4() clientMutationId: v4()
}, },
Expand Down Expand Up @@ -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. * list if it isnt present, otherwise it will remove the slug.
*/ */
toggleColumnToDisplay(value) { toggleColumnToDisplay(value) {
let arr = this.get("model.selectedColumnsToDisplay"); let displayed = new Set(this.get("model.meta.columnsToDisplay"));
let idx = arr.indexOf(value);
if (idx >= 0) { displayed.delete(value) || displayed.add(value);
arr.splice(idx, 1);
this.set("model.selectedColumnsToDisplay", arr); this.set("model.meta.columnsToDisplay", [...displayed]);
} else {
this.set("model.selectedColumnsToDisplay", [...arr, value]);
}
} }
} }
}); });
54 changes: 24 additions & 30 deletions addon/templates/components/cfb-form-editor/question.hbs
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -175,16 +175,6 @@
required=true required=true
renderComponent=(component "cfb-form-editor/question/options") 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}}


{{#if (contains f.model.__typename (array "DynamicMultipleChoiceQuestion" "DynamicChoiceQuestion"))}} {{#if (contains f.model.__typename (array "DynamicMultipleChoiceQuestion" "DynamicChoiceQuestion"))}}
Expand All @@ -200,10 +190,12 @@
optionLabelPath="info" optionLabelPath="info"
includeBlank=(t "caluma.form-builder.question.chooseRowForm") includeBlank=(t "caluma.form-builder.question.chooseRowForm")
}} }}
{{/if}}


{{#if (contains f.model.__typename (array "DynamicMultipleChoiceQuestion" "DynamicChoiceQuestion" "MultipleChoiceQuestion" "ChoiceQuestion"))}}
<div data-test-hide-label> <div data-test-hide-label>
{{f.input {{f.input
name="hideLabel" name="meta.hideLabel"
required=true required=true
label=(t "caluma.form-builder.question.hideLabel") label=(t "caluma.form-builder.question.hideLabel")
renderComponent=(component "cfb-toggle-switch" size="small") renderComponent=(component "cfb-toggle-switch" size="small")
Expand All @@ -214,44 +206,46 @@


{{#if (eq f.model.__typename "TableQuestion")}} {{#if (eq f.model.__typename "TableQuestion")}}
{{f.input {{f.input
name="rowForm" name="rowForm.slug"
type="select" type="select"
options=(or availableForms.lastSuccessful.value (array )) options=(or availableForms.lastSuccessful.value (array ))
required=true required=true
includeBlank=(t "caluma.form-builder.question.chooseRowForm") includeBlank=(t "caluma.form-builder.question.choose")
label=(t "caluma.form-builder.question.rowForm") label=(t "caluma.form-builder.question.rowForm")
}} }}


{{#f.input name="columnsToDisplay" label=(t "caluma.form-builder.question.columnsToDisplay") as |fi|}} {{#f.input name="meta.columnsToDisplay" label=(t "caluma.form-builder.question.columnsToDisplay") as |fi|}}
{{#each model.rowsToDisplay as |row|}} {{#each model.rowForm.questions.edges as |rowEdge|}}
<label class="cf-checkbox_label"> {{#let rowEdge.node as |row|}}
<input <label class="cf-checkbox_label">
type="checkbox" <input
value={{row.slug}} type="checkbox"
checked={{contains row.slug model.selectedColumnsToDisplay}} value={{row.slug}}
onclick={{action "toggleColumnToDisplay" row.slug}} checked={{contains row.slug model.meta.columnsToDisplay}}
onfocusout={{fi.setDirty}} onclick={{action "toggleColumnToDisplay" row.slug}}
class="uk-checkbox uk-margin-small-right" onfocusout={{fi.setDirty}}
> class="uk-checkbox uk-margin-small-right"
{{row.label}} >
</label> {{row.label}}
</label>
{{/let}}
{{/each}} {{/each}}
{{/f.input}} {{/f.input}}
{{/if}} {{/if}}


{{#if (eq f.model.__typename "FormQuestion")}} {{#if (eq f.model.__typename "FormQuestion")}}
{{f.input {{f.input
name="subForm" name="subForm.slug"
type="select" type="select"
options=(or availableForms.lastSuccessful.value (array )) options=(or availableForms.lastSuccessful.value (array ))
required=true required=true
includeBlank=(t "caluma.form-builder.question.chooseRowForm") includeBlank=(t "caluma.form-builder.question.choose")
label=(t "caluma.form-builder.question.rowForm") label=(t "caluma.form-builder.question.subForm")
}} }}
{{/if}} {{/if}}


{{f.input {{f.input
name="widgetOverride" name="meta.widgetOverride"
label=(t "caluma.form-builder.question.widgetOverride") label=(t "caluma.form-builder.question.widgetOverride")
class="uk-flex uk-flex-between uk-flex-column" class="uk-flex uk-flex-between uk-flex-column"


Expand Down
10 changes: 8 additions & 2 deletions addon/validations/question.js
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -60,6 +60,12 @@ export default {
), ),
and(validateOptions(), validateLength({ min: 1 })) and(validateOptions(), validateLength({ min: 1 }))
), ),
rowForm: or(validateType("TableQuestion", false), validatePresence(true)), "rowForm.slug": or(
subForm: or(validateType("FormQuestion", false), validatePresence(true)) validateType("TableQuestion", false),
validatePresence(true)
),
"subForm.slug": or(
validateType("FormQuestion", false),
validatePresence(true)
)
}; };
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@
"broccoli-merge-trees": "^3.0.2", "broccoli-merge-trees": "^3.0.2",
"ember-apollo-client": "2.0.0-beta.2", "ember-apollo-client": "2.0.0-beta.2",
"ember-auto-import": "^1.3.0", "ember-auto-import": "^1.3.0",
"ember-changeset": "^1.6.0", "ember-changeset": "^2.1.0",
"ember-changeset-validations": "^1.3.3", "ember-changeset-validations": "^2.1.0",
"ember-cli-babel": "^7.7.3", "ember-cli-babel": "^7.7.3",
"ember-cli-htmlbars": "^3.0.1", "ember-cli-htmlbars": "^3.0.1",
"ember-cli-sass": "^10.0.0", "ember-cli-sass": "^10.0.0",
Expand All @@ -64,9 +64,9 @@
"uuid": "^3.3.2" "uuid": "^3.3.2"
}, },
"devDependencies": { "devDependencies": {
"@adfinis-sygroup/semantic-release-config": "2.1.0",
"@babel/plugin-proposal-decorators": "7.4.4", "@babel/plugin-proposal-decorators": "7.4.4",
"@babel/plugin-proposal-object-rest-spread": "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/cli": "7.6.1",
"@commitlint/config-conventional": "7.6.0", "@commitlint/config-conventional": "7.6.0",
"@ember/jquery": "0.6.0", "@ember/jquery": "0.6.0",
Expand Down
4 changes: 2 additions & 2 deletions tests/integration/components/cfb-form-editor/question-test.js
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -368,7 +368,7 @@ module("Integration | Component | cfb-form-editor/question", function(hooks) {
await fillIn("[name=__typename]", "TableQuestion"); await fillIn("[name=__typename]", "TableQuestion");
await fillIn("[name=label]", "Label"); await fillIn("[name=label]", "Label");
await fillIn("[name=slug]", "slug"); await fillIn("[name=slug]", "slug");
await fillIn("[name=rowForm]", "subform"); await fillIn("[name=rowForm\\.slug]", "subform");


await click("button[type=submit]"); await click("button[type=submit]");


Expand Down Expand Up @@ -397,7 +397,7 @@ module("Integration | Component | cfb-form-editor/question", function(hooks) {
await fillIn("[name=__typename]", "FormQuestion"); await fillIn("[name=__typename]", "FormQuestion");
await fillIn("[name=label]", "Label"); await fillIn("[name=label]", "Label");
await fillIn("[name=slug]", "slug"); await fillIn("[name=slug]", "slug");
await fillIn("[name=subForm]", "subform"); await fillIn("[name=subForm\\.slug]", "subform");


await click("button[type=submit]"); await click("button[type=submit]");


Expand Down
5 changes: 3 additions & 2 deletions translations/de-de.yaml
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -89,8 +89,9 @@ caluma:
min-value: "Minimaler Wert" min-value: "Minimaler Wert"
max-value: "Maximaler Wert" max-value: "Maximaler Wert"
max-length: "Maximale Länge" max-length: "Maximale Länge"
rowForm: "Formular für Einträge" rowForm: "Tabellen-Formular für Einträge"
chooseRowForm: "-- bitte wählen --" subForm: "Formular für Einträge"
choose: "-- bitte wählen --"
columnsToDisplay: "Spalten zur Anzeige auswählen" columnsToDisplay: "Spalten zur Anzeige auswählen"


new: "Neue Frage" new: "Neue Frage"
Expand Down
Loading

0 comments on commit 97a59a5

Please sign in to comment.