Add toggle switch to set question required

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()
             }
           }

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));
+    }
+  }
+});

addon/gql/fragments/question-info.graphql

@@ -3,4 +3,6 @@ fragment QuestionInfo on Question {
   slug
   label
   type
+  isRequired
+  isHidden
 }

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'
-      }}
+      <div uk-grid class="uk-grid-small uk-margin">
+        <div class="uk-width-expand">
+          {{f.input
+            type='select'
+            options=possibleTypes
+            optionLabelPath='label'
+            optionTargetPath='value'
+            label=(t 'caluma.form-builder.question.type')
+            name='type'
+          }}
+        </div>
+
+        <div class="uk-width-auto uk-flex">
+          {{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'
+          }}
+        </div>
+      </div>
 
       <div class="uk-text-right">
         {{f.submit

addon/templates/components/cfb-jexl-boolean-toggle-switch.hbs

@@ -0,0 +1,13 @@
+{{component labelComponent}}
+
+<div class="uk-form-controls">
+  {{uk-toggle-switch
+    value=boolValue
+    size=size
+    name=name
+    on-toggle=(action 'toggle')
+  }}
+</div>
+
+{{component hintComponent}}
+{{component errorComponent}}

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

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.2",
     "slugify": "1.3.1",
     "uuid": "3.3.2"

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({})
 });

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
 }
 
@@ -55,6 +57,8 @@ input SaveQuestionInput {
   slug: String!
   label: String
   type: String
+  isRequired: String!
+  isHidden: String!
   clientMutationId: String!
 }
 

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

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

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

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"
 
+[email protected]:
+  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"