Custom widgets for single and multiple choice questions

addon/components/cf-field/input.js

@@ -25,7 +25,11 @@ export default Component.extend({
   type: computed("field.question.__typename", function() {
     const typename = get(this, "field.question.__typename");
 
+    const meta = get(this, "field.question.meta") || "{}";
+    const customtype = JSON.parse(meta).widgetType;
+
     return (
+      (customtype && customtype !== "default" && customtype) ||
       (typename && mapping[typename]) ||
       typename.replace(/Question$/, "").toLowerCase()
     );

addon/components/cf-field/input/powerselect.js

@@ -0,0 +1,89 @@
+import Component from "@ember/component";
+import { computed } from "@ember/object";
+import { inject as service } from "@ember/service";
+import layout from "../../../templates/components/cf-field/input/powerselect";
+
+/**
+ * Dropdown component for the single and multiple choice question type
+ *
+ * @class CfFieldInputPowerSelectComponent
+ * @argument {Field} field The field for this input type
+ */
+export default Component.extend({
+  layout,
+  tagName: "",
+  intl: service(),
+
+  multiple: computed("field.question.__typename", function() {
+    return this.get("field.question.__typename").startsWith("Multiple");
+  }),
+
+  choices: computed(
+    "multiple",
+    "field.question.{choiceOptions,multipleChoiceOptions}.edges",
+    function() {
+      let options = this.get("multiple")
+        ? this.get("field.question.multipleChoiceOptions")
+        : this.get("field.question.choiceOptions");
+
+      return options.edges.map(edge => edge.node);
+    }
+  ),
+
+  selected: computed(
+    "field.answer.{_valueKey,listValue,stringValue}",
+    function() {
+      let key = this.get("field.answer._valueKey");
+      let path = `field.answer.${key}`;
+      let answers = this.get(path);
+      let selection = null;
+
+      if (answers !== null) {
+        selection = this.get("choices").filter(choice => {
+          return answers.includes(choice.slug);
+        });
+
+        if (key === "stringValue") {
+          selection = selection[0];
+        }
+      }
+
+      return selection;
+    }
+  ),
+
+  componentName: computed("multiple", function() {
+    let name = "power-select";
+
+    if (this.get("multiple")) {
+      name += "-multiple";
+    }
+
+    return name;
+  }),
+
+  searchEnabled: computed("choices", function() {
+    return this.get("choices").length > 10;
+  }),
+
+  placeholder: computed("multiple", function() {
+    let suffix = this.get("multiple") ? "multiple" : "single";
+    let path = `caluma.form.power-select.placeholder-${suffix}`;
+    return this.get("intl").t(path);
+  }),
+
+  actions: {
+    change: function(choices) {
+      let key = this.get("field.answer._valueKey");
+      let value = null;
+
+      if (key === "listValue") {
+        value = choices.map(choice => choice.slug);
+      } else if (choices !== null) {
+        value = choices.slug;
+      }
+
+      this.onSave(value);
+    }
+  }
+});

addon/components/cfb-form-editor/question.js

@@ -75,14 +75,22 @@ export default Component.extend(ComponentQueryManager, {
       ]);
     }
 
-    return yield this.get("apollo").watchQuery(
+    const questions = yield this.get("apollo").watchQuery(
       {
         query: formEditorQuestionQuery,
         variables: { slug: this.get("slug") },
         fetchPolicy: "cache-and-network"
       },
       "allQuestions.edges"
     );
+
+    function setWidgetType(question) {
+      const meta = JSON.parse(question.node.meta);
+      question.node.widgetType = meta.widgetType;
+      return question;
+    }
+
+    return A(questions.map(setWidgetType));
   }).restartable(),
 
   _getIntegerQuestionInput(changeset) {
@@ -152,6 +160,9 @@ export default Component.extend(ComponentQueryManager, {
                 slug: changeset.get("slug"),
                 isRequired: changeset.get("isRequired"),
                 isHidden: "false", // TODO: this must be configurable
+                meta: JSON.stringify({
+                  widgetType: changeset.get("widgetType")
+                }),
                 isArchived: changeset.get("isArchived"),
                 clientMutationId: v4()
               },

addon/gql/fragments/field-question.graphql

@@ -3,6 +3,7 @@ fragment FieldQuestion on Question {
   label
   isRequired
   isHidden
+  meta
   ... on TextQuestion {
     textMaxLength: maxLength
   }

addon/gql/fragments/question-info.graphql

@@ -3,5 +3,6 @@ fragment QuestionInfo on Question {
   label
   isRequired
   isHidden
+  meta
   isArchived
 }

addon/templates/components/cf-field/input/powerselect.hbs

@@ -0,0 +1,20 @@
+{{#component componentName
+  options=choices
+  selected=selected
+  disabled=disabled
+  allowClear=false
+  preventScroll=true
+  searchEnabled=searchEnabled
+  searchField="label"
+
+  placeholder=placeholder
+  loadingMessage=(t "caluma.form.power-select.options-loading")
+  searchMessage=(t "caluma.form.power-select.options-empty")
+  searchPlaceholder=(t "caluma.form.power-select.search-placeholder")
+  noMatchesMessage=(t "caluma.form.power-select.search-empty")
+
+  onchange=(action "change")
+  as |choice|
+}}
+  {{choice.label}}
+{{/component}}

addon/templates/components/cfb-form-editor/question.hbs

@@ -121,6 +121,18 @@
           required=true
           renderComponent=(component "cfb-form-editor/question/options")
         }}
+
+        {{f.input
+          name="widgetType"
+          label=(t "caluma.form-builder.question.widgetType")
+          required=true
+          class="uk-flex uk-flex-between uk-flex-column"
+
+          type="select"
+          optionTargetPath="value"
+          optionLabelPath="label"
+          options=(array (hash value="default" label="Default") (hash value="powerselect" label="Dropdown"))
+        }}
       {{/if}}
 
       {{f.input

app/components/cf-field/input/powerselect.js

@@ -0,0 +1 @@
+export { default } from "ember-caluma/components/cf-field/input/powerselect";

app/styles/_cfb-powerselect.scss

@@ -0,0 +1,17 @@
+$ember-power-select-focus-outline: 0;
+$ember-power-select-border-color: #e5e5e5;
+$ember-power-select-default-border-radius: 0;
+$ember-power-select-line-height: 38px;
+
+$ember-power-select-selected-background: #3799ad;
+$ember-power-select-multiple-selection-color: #ffffff;
+$ember-power-select-multiple-selection-background-color: $ember-power-select-selected-background;
+
+$ember-power-select-multiple-option-padding: 0 8px;
+$ember-power-select-multiple-option-line-height: 32px;
+$ember-power-select-multiple-option-border-color: $ember-power-select-border-color;
+
+$ember-power-select-highlighted-color: #ffffff;
+$ember-power-select-highlighted-background: lighten($ember-power-select-selected-background, 10%);
+
+@import "ember-power-select";

app/styles/ember-caluma.scss

@@ -3,6 +3,7 @@
 @import "cfb-form-editor/question-list/item";
 @import "cfb-loading-dots";
 @import "cfb-navigation";
+@import "cfb-powerselect";
 
 .cfb-pointer {
   cursor: pointer;

package.json

@@ -83,6 +83,7 @@
     "ember-export-application-global": "2.0.0",
     "ember-load-initializers": "2.0.0",
     "ember-maybe-import-regenerator": "0.1.6",
+    "ember-power-select": "2.2.2",
     "ember-qunit": "4.4.1",
     "ember-resolver": "5.0.1",
     "ember-source": "3.7.0",

tests/integration/components/cf-field/input/powerselect-test.js

@@ -0,0 +1,136 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "ember-qunit";
+import { click, render } from "@ember/test-helpers";
+import hbs from "htmlbars-inline-precompile";
+
+module("Integration | Component | cf-field/input/powerselect", function(hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders (single)", async function(assert) {
+    assert.expect(1);
+
+    this.set("field", {
+      id: "test",
+      answer: {
+        _valueKey: "stringValue",
+        stringValue: "option-3"
+      },
+      question: {
+        __typename: "ChoiceQuestion",
+        choiceOptions: {
+          edges: [
+            { node: { slug: "option-1", label: "Option 1" } },
+            { node: { slug: "option-2", label: "Option 2" } },
+            { node: { slug: "option-3", label: "Option 3" } }
+          ]
+        }
+      }
+    });
+
+    await render(hbs`{{cf-field/input/powerselect field=field }}`);
+
+    assert.dom(".ember-power-select-trigger").exists();
+  });
+
+  test("it saves on click (single)", async function(assert) {
+    assert.expect(3);
+
+    this.set("field", {
+      id: "test",
+      answer: {
+        _valueKey: "stringValue",
+        stringValue: "option-3"
+      },
+      question: {
+        __typename: "ChoiceQuestion",
+        choiceOptions: {
+          edges: [
+            { node: { slug: "option-1", label: "Option 1" } },
+            { node: { slug: "option-2", label: "Option 2" } },
+            { node: { slug: "option-3", label: "Option 3" } }
+          ]
+        }
+      }
+    });
+
+    this.set("onSave", choice => {
+      this.set("field.answer.stringValue", choice);
+    });
+
+    await render(
+      hbs`{{cf-field/input/powerselect field=field onSave=onSave }}`
+    );
+
+    assert.dom(".ember-power-select-trigger").exists();
+    await click(".ember-power-select-trigger");
+
+    assert.dom(".ember-power-select-option").exists({ count: 3 });
+    await click(".ember-power-select-option:first-child");
+
+    assert.equal(this.field.answer.stringValue, "option-1");
+  });
+
+  test("it renders (multiple)", async function(assert) {
+    assert.expect(1);
+
+    this.set("field", {
+      id: "test",
+      answer: {
+        _valueKey: "listValue",
+        listValue: ["option-1", "option-2"]
+      },
+      question: {
+        __typename: "MultipleChoiceQuestion",
+        multipleChoiceOptions: {
+          edges: [
+            { node: { slug: "option-1", label: "Option 1" } },
+            { node: { slug: "option-2", label: "Option 2" } },
+            { node: { slug: "option-3", label: "Option 3" } }
+          ]
+        }
+      }
+    });
+
+    await render(hbs`{{cf-field/input/powerselect field=field }}`);
+
+    assert.dom(".ember-power-select-trigger").exists();
+  });
+
+  test("it saves on click (multiple)", async function(assert) {
+    assert.expect(3);
+
+    this.set("field", {
+      id: "test",
+      answer: {
+        _valueKey: "listValue",
+        listValue: ["option-1", "option-2"]
+      },
+      question: {
+        __typename: "MultipleChoiceQuestion",
+        multipleChoiceOptions: {
+          edges: [
+            { node: { slug: "option-1", label: "Option 1" } },
+            { node: { slug: "option-2", label: "Option 2" } },
+            { node: { slug: "option-3", label: "Option 3" } }
+          ]
+        }
+      }
+    });
+
+    this.set("onSave", choices => {
+      this.set("field.answer.listValue", choices);
+    });
+
+    await render(
+      hbs`{{cf-field/input/powerselect field=field onSave=onSave }}`
+    );
+
+    assert.dom(".ember-power-select-trigger").exists();
+    await click(".ember-power-select-trigger");
+
+    assert.dom(".ember-power-select-option").exists({ count: 3 });
+    await click(".ember-power-select-option:first-child");
+
+    assert.deepEqual(this.field.answer.listValue, ["option-2"]);
+  });
+});

translations/de-de.yaml

@@ -5,6 +5,15 @@ dummy:
 caluma:
   form:
     optional: "Optional"
+
+    power-select:
+      placeholder-single: "Wählen Sie eine Option aus"
+      placeholder-multiple: "Wählen Sie eine oder mehrere Optionen aus"
+      options-loading: "Lade Optionen..."
+      options-empty: "Keine Optionen vorhanden"
+      search-placeholder: "Hier tippen um zu suchen"
+      search-empty: "Keine Optionen gefunden"
+
   form-builder:
     global:
       save: "Speichern"
@@ -38,6 +47,7 @@ caluma:
       slug: "Slug"
       type: "Typ"
       isRequired: "Erforderlich"
+      widgetType: "Widget Typ"
       isArchived: "Archiviert"
       type-disabled: "Sobald die Frage erstellt ist kann der Typ nicht mehr geändert werden um korrupte Daten zu verhindern."
 
@@ -63,8 +73,8 @@ caluma:
       types:
         IntegerQuestion: "Ganze Zahl"
         FloatQuestion: "Gleitkommazahl"
-        MultipleChoiceQuestion: "Checkbox"
-        ChoiceQuestion: "Radio"
+        MultipleChoiceQuestion: "Mehrfachauswahl"
+        ChoiceQuestion: "Einzelauswahl"
         TextQuestion: "Text"
         TextareaQuestion: "Textbereich"