From dd56dc8705eaf120d76d93b4fb841925f08d2d70 Mon Sep 17 00:00:00 2001 From: Jonas Metzener Date: Tue, 11 Sep 2018 15:20:50 +0200 Subject: [PATCH] Add toggle switch to set question required --- addon/components/cfb-form-editor/question.js | 2 + .../cfb-jexl-boolean-toggle-switch.js | 27 +++++++++ addon/gql/fragments/question-info.graphql | 2 + .../components/cfb-form-editor/question.hbs | 29 ++++++--- .../cfb-jexl-boolean-toggle-switch.hbs | 13 ++++ .../cfb-jexl-boolean-toggle-switch.js | 3 + package.json | 1 + tests/dummy/mirage/factories/question.js | 2 + tests/dummy/mirage/schema.js | 4 ++ .../cfb-jexl-boolean-toggle-switch-test.js | 60 +++++++++++++++++++ translations/de-de.yaml | 1 + translations/en-us.yaml | 1 + yarn.lock | 4 ++ 13 files changed, 141 insertions(+), 8 deletions(-) create mode 100644 addon/components/cfb-jexl-boolean-toggle-switch.js create mode 100644 addon/templates/components/cfb-jexl-boolean-toggle-switch.hbs create mode 100644 app/components/cfb-jexl-boolean-toggle-switch.js create mode 100644 tests/integration/components/cfb-jexl-boolean-toggle-switch-test.js diff --git a/addon/components/cfb-form-editor/question.js b/addon/components/cfb-form-editor/question.js index 3696630..7536267 100644 --- a/addon/components/cfb-form-editor/question.js +++ b/addon/components/cfb-form-editor/question.js @@ -54,6 +54,8 @@ export default Component.extend(ComponentQueryManager, { label: changeset.get("label"), slug: changeset.get("slug"), type: changeset.get("type"), + isRequired: changeset.get("isRequired"), + isHidden: "false", // TODO: this must be configurable clientMutationId: v4() } } diff --git a/addon/components/cfb-jexl-boolean-toggle-switch.js b/addon/components/cfb-jexl-boolean-toggle-switch.js new file mode 100644 index 0000000..036dab8 --- /dev/null +++ b/addon/components/cfb-jexl-boolean-toggle-switch.js @@ -0,0 +1,27 @@ +import RenderComponent from "ember-validated-form/components/validated-input/-themes/uikit/render"; +import layout from "../templates/components/cfb-jexl-boolean-toggle-switch"; +import jexl from "jexl"; +import { reads } from "@ember/object/computed"; +import { task } from "ember-concurrency"; + +export default RenderComponent.extend({ + layout, + + didReceiveAttrs() { + this._super(...arguments); + + this.get("_boolValue").perform(); + }, + + boolValue: reads("_boolValue.lastSuccessful.value"), + + _boolValue: task(function*() { + return yield jexl.eval(this.get("value")); + }), + + actions: { + toggle(boolValue) { + this.get("update")(String(boolValue)); + } + } +}); diff --git a/addon/gql/fragments/question-info.graphql b/addon/gql/fragments/question-info.graphql index 756a0e1..4c72c91 100644 --- a/addon/gql/fragments/question-info.graphql +++ b/addon/gql/fragments/question-info.graphql @@ -3,4 +3,6 @@ fragment QuestionInfo on Question { slug label type + isRequired + isHidden } diff --git a/addon/templates/components/cfb-form-editor/question.hbs b/addon/templates/components/cfb-form-editor/question.hbs index 5d857ae..4f8ee20 100644 --- a/addon/templates/components/cfb-form-editor/question.hbs +++ b/addon/templates/components/cfb-form-editor/question.hbs @@ -34,14 +34,27 @@ disabled=f.model.id }} - {{f.input - type='select' - options=possibleTypes - optionLabelPath='label' - optionTargetPath='value' - label=(t 'caluma.form-builder.question.type') - name='type' - }} +
+
+ {{f.input + type='select' + options=possibleTypes + optionLabelPath='label' + optionTargetPath='value' + label=(t 'caluma.form-builder.question.type') + name='type' + }} +
+ +
+ {{f.input + name='isRequired' + label=(t 'caluma.form-builder.question.isRequired') + renderComponent=(component 'cfb-jexl-boolean-toggle-switch' size='small') + class='uk-flex uk-flex-between uk-flex-column' + }} +
+
{{f.submit diff --git a/addon/templates/components/cfb-jexl-boolean-toggle-switch.hbs b/addon/templates/components/cfb-jexl-boolean-toggle-switch.hbs new file mode 100644 index 0000000..76d3cdd --- /dev/null +++ b/addon/templates/components/cfb-jexl-boolean-toggle-switch.hbs @@ -0,0 +1,13 @@ +{{component labelComponent}} + +
+ {{uk-toggle-switch + value=boolValue + size=size + name=name + on-toggle=(action 'toggle') + }} +
+ +{{component hintComponent}} +{{component errorComponent}} diff --git a/app/components/cfb-jexl-boolean-toggle-switch.js b/app/components/cfb-jexl-boolean-toggle-switch.js new file mode 100644 index 0000000..3f3f846 --- /dev/null +++ b/app/components/cfb-jexl-boolean-toggle-switch.js @@ -0,0 +1,3 @@ +export { + default +} from "ember-caluma-form-builder/components/cfb-jexl-boolean-toggle-switch"; diff --git a/package.json b/package.json index a9bf7bc..8b25c51 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "ember-test-selectors": "1.0.0", "ember-uikit": "0.7.1", "ember-validated-form": "2.0.0-alpha.1", + "jexl": "1.1.4", "sass": "1.13.4", "slugify": "1.3.1", "uuid": "3.3.2" diff --git a/tests/dummy/mirage/factories/question.js b/tests/dummy/mirage/factories/question.js index 9c81258..02abda1 100644 --- a/tests/dummy/mirage/factories/question.js +++ b/tests/dummy/mirage/factories/question.js @@ -6,5 +6,7 @@ export default Factory.extend({ slug: i => `question-${i + 1}`, label: () => `${faker.lorem.sentence().replace(/\.$/, "")}?`, type: () => faker.list.random(...TYPES), + isRequired: () => faker.random.boolean().toString(), + isHidden: "false", meta: JSON.stringify({}) }); diff --git a/tests/dummy/mirage/schema.js b/tests/dummy/mirage/schema.js index dc66cff..9638b87 100644 --- a/tests/dummy/mirage/schema.js +++ b/tests/dummy/mirage/schema.js @@ -14,6 +14,8 @@ type Question implements Node { slug: String! label: String! type: String! + isRequired: String! + isHidden: String! meta: String forms: FormConnection } @@ -56,6 +58,8 @@ input SaveQuestionInput { slug: String! label: String type: String + isRequired: String! + isHidden: String! clientMutationId: String! } diff --git a/tests/integration/components/cfb-jexl-boolean-toggle-switch-test.js b/tests/integration/components/cfb-jexl-boolean-toggle-switch-test.js new file mode 100644 index 0000000..f6ac6d1 --- /dev/null +++ b/tests/integration/components/cfb-jexl-boolean-toggle-switch-test.js @@ -0,0 +1,60 @@ +import { module, test } from "qunit"; +import { setupRenderingTest } from "ember-qunit"; +import { render, click, settled } from "@ember/test-helpers"; +import hbs from "htmlbars-inline-precompile"; + +module("Integration | Component | cfb-jexl-boolean-toggle-switch", function( + hooks +) { + setupRenderingTest(hooks); + + test("it renders", async function(assert) { + assert.expect(2); + + this.set("value", "false"); + + await render(hbs` + {{cfb-jexl-boolean-toggle-switch + name='test' + value=value + update=(action (mut value)) + }} + `); + + assert.dom("input[name=test]").isNotChecked(); + + this.set("value", "true"); + + await settled(); + + assert.dom("input[name=test]").isChecked(); + }); + + test("it can toggle", async function(assert) { + assert.expect(4); + + this.set("value", "false"); + + this.set("update", value => { + assert.step("update"); + + this.set("value", value); + }); + + await render(hbs` + {{cfb-jexl-boolean-toggle-switch + name='test' + value=value + update=(action update) + }} + `); + + assert.dom("input[name=test]").isNotChecked(); + + await click(".x-toggle"); + + assert.dom("input[name=test]").isChecked(); + + assert.verifySteps(["update"]); + }); +}); diff --git a/translations/de-de.yaml b/translations/de-de.yaml index 0b84963..8d4695e 100644 --- a/translations/de-de.yaml +++ b/translations/de-de.yaml @@ -19,6 +19,7 @@ caluma: label: "Label" slug: "Slug" type: "Typ" + isRequired: "Erforderlich" minor-info-title: "Wichtig!" minor-info: "Das Anpassen einer Frage darf niemals die Bedeutung der Frage verändern, um die Daten konsistent zu halten." diff --git a/translations/en-us.yaml b/translations/en-us.yaml index 581149c..babd415 100644 --- a/translations/en-us.yaml +++ b/translations/en-us.yaml @@ -19,6 +19,7 @@ caluma: label: "Label" slug: "Slug" type: "Type" + isRequired: "Required" minor-info-title: "Important!" minor-info: "Updating a question must never change the meaning to preserve data consistency." diff --git a/yarn.lock b/yarn.lock index 5efb90e..a0cbec6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7345,6 +7345,10 @@ jest-docblock@^21.0.0: version "21.2.0" resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-21.2.0.tgz#51529c3b30d5fd159da60c27ceedc195faf8d414" +jexl@1.1.4: + version "1.1.4" + resolved "https://registry.yarnpkg.com/jexl/-/jexl-1.1.4.tgz#35cf86f881ea219d1e215c7a41e2e747ce6ee8a6" + joi@^12.0.0: version "12.0.0" resolved "https://registry.yarnpkg.com/joi/-/joi-12.0.0.tgz#46f55e68f4d9628f01bbb695902c8b307ad8d33a"