feat(cfb): make sub- & rowforms searchable

When building table and form questions in the form-builder, the selection of available sub- or rowforms is searchable and displays the name of the form in addition to the slug.
fugal-dy · Jul 30, 2021 · 66e483f · 66e483f
1 parent 499f0ba
commit 66e483f
Show file tree

Hide file tree

Showing 9 changed files with 187 additions and 24 deletions.
diff --git a/addon/components/cfb-form-editor/question.hbs b/addon/components/cfb-form-editor/question.hbs
@@ -243,14 +243,38 @@
       {{/if}}
 
       {{#if (has-question-type f.model "table")}}
-        {{f.input
-          name="rowForm.slug"
-          type="select"
-          options=(or availableForms.lastSuccessful.value (array ))
-          required=true
-          includeBlank=(t "caluma.form-builder.question.choose")
-          label=(t "caluma.form-builder.question.rowForm")
-        }}
+        <f.input
+          @name="rowForm.slug"
+          @label={{t "caluma.form-builder.question.rowForm"}}
+          @required={{true}}
+          @on-update={{action "updateRowForm"}}
+          @value={{find-by "slug" (changeset-get f.model "rowForm.slug")
+            availableForms.lastSuccessful.value}}
+          as |fi|
+        >
+          <PowerSelect
+            @options={{or availableForms.lastSuccessful.value array}}
+            @selected={{fi.value}}
+            @placeholder={{t "caluma.form-builder.question.choose"}}
+            @onBlur={{fi.setDirty}}
+            @onChange={{queue fi.update (fn (mut fi.value))}}
+            @searchField="slug"
+            @searchEnabled={{true}}
+            @searchPlaceholder={{t "caluma.form-builder.question.search-placeholder"}}
+            @noMatchesMessage={{t "caluma.form-builder.question.search-empty"}}
+            as |form|
+          >
+            <span class="uk-width-auto uk-margin-small-right uk-text-truncate">
+              {{form.slug}}
+            </span>
+            <span
+              class="highlight-option uk-text-muted uk-width-expand 
+                uk-margin-small-right uk-text-small uk-text-truncate"
+            >
+              {{form.name}}
+            </span>
+          </PowerSelect>
+        </f.input>
 
         {{#f.input name="meta.columnsToDisplay" label=(t "caluma.form-builder.question.columnsToDisplay") as |fi|}}
           {{#each model.rowForm.questions.edges as |rowEdge|}}
@@ -272,14 +296,38 @@
       {{/if}}
 
       {{#if (has-question-type f.model "form")}}
-        {{f.input
-          name="subForm.slug"
-          type="select"
-          options=(or availableForms.lastSuccessful.value (array ))
-          required=true
-          includeBlank=(t "caluma.form-builder.question.choose")
-          label=(t "caluma.form-builder.question.subForm")
-        }}
+        <f.input
+          @name="subForm.slug"
+          @label={{t "caluma.form-builder.question.subForm"}}
+          @required={{true}}
+          @on-update={{action "updateSubForm"}}
+          @value={{find-by "slug" (changeset-get f.model "subForm.slug")
+            availableForms.lastSuccessful.value}}
+          as |fi|
+        >
+          <PowerSelect
+            @options={{or availableForms.lastSuccessful.value array}}
+            @selected={{fi.value}}
+            @placeholder={{t "caluma.form-builder.question.choose"}}
+            @onBlur={{fi.setDirty}}
+            @onChange={{queue fi.update (fn (mut fi.value))}}
+            @searchField="slug"
+            @searchEnabled={{true}}
+            @searchPlaceholder={{t "caluma.form-builder.question.search-placeholder"}}
+            @noMatchesMessage={{t "caluma.form-builder.question.search-empty"}}
+            as |form|
+          >
+            <span class="uk-width-auto uk-margin-small-right uk-text-truncate">
+              {{form.slug}}
+            </span>
+            <span
+              class="highlight-option uk-text-muted uk-width-expand 
+                uk-margin-small-right uk-text-small uk-text-truncate"
+            >
+              {{form.name}}
+            </span>
+          </PowerSelect>
+        </f.input>
       {{/if}}
 
       {{f.input

diff --git a/addon/components/cfb-form-editor/question.js b/addon/components/cfb-form-editor/question.js
@@ -147,7 +147,7 @@ export default Component.extend({
     if (!forms.map) {
       return [];
     }
-    return forms.mapBy("node.slug").filter((slug) => slug !== this.form);
+    return forms.mapBy("node").filter((form) => form.slug !== this.form);
   }).restartable(),
 
   availableOverrides: computed("changeset.__typename", function () {
@@ -460,5 +460,13 @@ export default Component.extend({
 
       this.changeset.set("meta.columnsToDisplay", [...displayed]);
     },
+
+    updateSubForm(value, changeset) {
+      changeset.set("subForm.slug", value.slug);
+    },
+
+    updateRowForm(value, changeset) {
+      changeset.set("rowForm.slug", value.slug);
+    },
   },
 });
diff --git a/addon/mirage-graphql/mocks/question.js b/addon/mirage-graphql/mocks/question.js
@@ -164,14 +164,22 @@ export default class extends BaseMock {
   @register("SaveTableQuestionPayload")
   handleSaveTableQuestion(_, { input }) {
     return this.handleSavePayload.fn.call(this, _, {
-      input: { ...input, type: "TABLE" },
+      input: {
+        ...input,
+        ...(input.rowForm ? { rowForm: { slug: input.rowForm } } : {}),
+        type: "TABLE",
+      },
     });
   }
 
   @register("SaveFormQuestionPayload")
   handleSaveFormQuestion(_, { input }) {
     return this.handleSavePayload.fn.call(this, _, {
-      input: { ...input, type: "FORM" },
+      input: {
+        ...input,
+        ...(input.subForm ? { subForm: { slug: input.subForm } } : {}),
+        type: "FORM",
+      },
     });
   }
 

diff --git a/app/styles/cfb-form-editor/_question.scss b/app/styles/cfb-form-editor/_question.scss
@@ -0,0 +1,4 @@
+.ember-power-select-option[aria-current="true"]
+  .highlight-option.uk-text-muted {
+  color: #e9e9e9 !important;
+}
diff --git a/app/styles/ember-caluma.scss b/app/styles/ember-caluma.scss
@@ -1,6 +1,7 @@
 @import "ember-uikit/variables-theme";
 
 @import "cfb-form-editor/question-list/item";
+@import "cfb-form-editor/question";
 @import "cfb-navigation";
 @import "cfb-powerselect";
 

diff --git a/tests/integration/components/cfb-form-editor/question-test.js b/tests/integration/components/cfb-form-editor/question-test.js
@@ -367,13 +367,13 @@ module("Integration | Component | cfb-form-editor/question", function (hooks) {
     assert.expect(6);
 
     this.server.create("form", { slug: "test-form" });
-    this.server.create("form", { slug: "subform" });
+    this.server.create("form", { slug: "rowform" });
 
     this.set("afterSubmit", (question) => {
       assert.equal(question.__typename, "TableQuestion");
       assert.equal(question.label, "Label");
       assert.equal(question.slug, "slug");
-      assert.ok(question.rowForm.slug);
+      assert.equal(question.rowForm.slug, "rowform");
 
       assert.step("after-submit");
     });
@@ -385,13 +385,57 @@ 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\\.slug]", "subform");
+    await click(".ember-power-select-trigger");
+    await click(".ember-power-select-option");
 
     await click("button[type=submit]");
 
     assert.verifySteps(["after-submit"]);
   });
 
+  test("it can search for forms in table question rowform", async function (assert) {
+    assert.expect(19);
+
+    this.server.create("form", { slug: "test-form" });
+    const forms = this.server.createList("form", 5);
+
+    this.set("afterSubmit", (question) => {
+      assert.equal(question.rowForm.slug, forms[0].slug);
+      assert.step("after-submit");
+    });
+
+    await render(
+      hbs`{{cfb-form-editor/question form='test-form' on-after-submit=(action afterSubmit)}}`
+    );
+
+    await fillIn("[name=__typename]", "TableQuestion");
+    await fillIn("[name=label]", "Label");
+
+    assert
+      .dom(".ember-power-select-trigger")
+      .hasText("t:caluma.form-builder.question.choose:()");
+    await click(".ember-power-select-trigger");
+    const options = [
+      ...document.querySelectorAll(".ember-power-select-option"),
+    ];
+    assert.equal(options.length, forms.length);
+    forms.forEach((form, index) => {
+      assert.dom(options[index]).containsText(form.slug);
+      assert.dom(options[index]).containsText(form.name);
+    });
+
+    await fillIn(".ember-power-select-search-input", forms[0].slug);
+    assert.dom(".ember-power-select-option").exists({ count: 1 });
+    assert.dom(".ember-power-select-option").containsText(forms[0].slug);
+
+    await click(".ember-power-select-option");
+    assert.dom(".ember-power-select-trigger").containsText(forms[0].slug);
+    assert.dom(".ember-power-select-trigger").containsText(forms[0].name);
+
+    await click("button[type=submit]");
+    assert.verifySteps(["after-submit"]);
+  });
+
   test("it can create a form question", async function (assert) {
     assert.expect(6);
 
@@ -402,7 +446,7 @@ module("Integration | Component | cfb-form-editor/question", function (hooks) {
       assert.equal(question.__typename, "FormQuestion");
       assert.equal(question.label, "Label");
       assert.equal(question.slug, "slug");
-      assert.ok(question.subForm.slug);
+      assert.equal(question.subForm.slug, "subform");
 
       assert.step("after-submit");
     });
@@ -414,13 +458,57 @@ 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\\.slug]", "subform");
+    await click(".ember-power-select-trigger");
+    await click(".ember-power-select-option");
 
     await click("button[type=submit]");
 
     assert.verifySteps(["after-submit"]);
   });
 
+  test("it can search for forms in form question subform", async function (assert) {
+    assert.expect(19);
+
+    this.server.create("form", { slug: "test-form" });
+    const forms = this.server.createList("form", 5);
+
+    this.set("afterSubmit", (question) => {
+      assert.equal(question.subForm.slug, forms[0].slug);
+      assert.step("after-submit");
+    });
+
+    await render(
+      hbs`{{cfb-form-editor/question form='test-form' on-after-submit=(action afterSubmit)}}`
+    );
+
+    await fillIn("[name=__typename]", "FormQuestion");
+    await fillIn("[name=label]", "Label");
+
+    assert
+      .dom(".ember-power-select-trigger")
+      .hasText("t:caluma.form-builder.question.choose:()");
+    await click(".ember-power-select-trigger");
+    const options = [
+      ...document.querySelectorAll(".ember-power-select-option"),
+    ];
+    assert.equal(options.length, forms.length);
+    forms.forEach((form, index) => {
+      assert.dom(options[index]).containsText(form.slug);
+      assert.dom(options[index]).containsText(form.name);
+    });
+
+    await fillIn(".ember-power-select-search-input", forms[0].slug);
+    assert.dom(".ember-power-select-option").exists({ count: 1 });
+    assert.dom(".ember-power-select-option").containsText(forms[0].slug);
+
+    await click(".ember-power-select-option");
+    assert.dom(".ember-power-select-trigger").containsText(forms[0].slug);
+    assert.dom(".ember-power-select-trigger").containsText(forms[0].name);
+
+    await click("button[type=submit]");
+    assert.verifySteps(["after-submit"]);
+  });
+
   test("it can create a file question", async function (assert) {
     assert.expect(5);
 

diff --git a/translations/de.yaml b/translations/de.yaml
@@ -126,6 +126,8 @@ caluma:
       rowForm: "Formular für Tabelleneinträge"
       subForm: "Formular für Einträge"
       choose: "-- bitte wählen --"
+      search-placeholder: "Hier tippen um zu suchen"
+      search-empty: "Keine Formulare gefunden"
       columnsToDisplay: "Spalten zur Anzeige auswählen"
       calcExpression: "Berechnungsformel"
 

diff --git a/translations/en.yaml b/translations/en.yaml
@@ -126,6 +126,8 @@ caluma:
       rowForm: "Form to use for rows"
       subForm: "Form to use for entries"
       choose: "-- please choose --"
+      search-placeholder: "Type here to search forms"
+      search-empty: "Search didn't match any forms"
       columnsToDisplay: "Select columns to be shown"
       calcExpression: "Calculation formula"
 

diff --git a/translations/fr.yaml b/translations/fr.yaml
@@ -68,6 +68,8 @@ caluma:
   form-builder:
     question:
       defaultValue: "Valeur par défaut"
+      search-placeholder: "Tapez ici pour rechercher"
+      search-empty: "Pas de formulaires trouvés"
 
     options:
       delete: "Supprimer l'option"