feat(cfb): mark conditionally required / hidden questions

Enhance question type markers in question list of form- builder with additional styles for conditionally required and hidden JEXL expressions.
fugal-dy · Aug 10, 2021 · f91e07e · f91e07e
1 parent 22f0dea
commit f91e07e
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 5 deletions.
diff --git a/addon/components/cfb-form-editor/question-list/item.hbs b/addon/components/cfb-form-editor/question-list/item.hbs
@@ -69,13 +69,17 @@
 
     <span class="uk-position-relative uk-width-auto">
       <UkBadge
-        class="cfb-form-editor__question-list__item__type"
+        uk-tooltip="title: {{if this.hidden (t (concat "caluma.form-builder.question-list.hidden." this.hiddenType))}}; pos: left"
+        class="cfb-form-editor__question-list__item__type {{if this.hidden "cfb-form-editor__question-list__item__type--hidden"}}"
         @label={{t (concat "caluma.form-builder.question.types." @question.__typename)}}
+        title={{if this.hidden (t (concat "caluma.form-builder.question-list.hidden." this.hiddenType))}}
       />
       {{#if this.required}}
         <span
-          title={{t "caluma.form-builder.question.isRequired"}}
-          class="uk-position-top-right cfb-form-editor__question-list__item__required"
+          uk-tooltip="title: {{t (concat "caluma.form-builder.question-list.required." this.requiredType)}}; pos: top-left"
+          title={{t (concat "caluma.form-builder.question-list.required." this.requiredType)}}
+          class="uk-position-top-right cfb-form-editor__question-list__item__required 
+            cfb-form-editor__question-list__item__required--{{this.requiredType}}"
         >
         </span>
       {{/if}}

diff --git a/addon/components/cfb-form-editor/question-list/item.js b/addon/components/cfb-form-editor/question-list/item.js
@@ -15,10 +15,32 @@ export default class CfbFormEditorQuestionListItem extends Component {
     try {
       return jexl.evalSync(this.args.question?.isRequired);
     } catch (error) {
-      return false;
+      return this.args.question?.isRequired;
     }
   }
 
+  get requiredType() {
+    const required = this.required;
+    return required === true
+      ? "required"
+      : required
+      ? "conditional"
+      : "not-required";
+  }
+
+  get hidden() {
+    try {
+      return jexl.evalSync(this.args.question?.isHidden);
+    } catch (error) {
+      return this.args.question?.isHidden;
+    }
+  }
+
+  get hiddenType() {
+    const hidden = this.hidden;
+    return hidden === true ? "hidden" : hidden ? "conditional" : "not-hidden";
+  }
+
   get showFormLink() {
     const question = this.args.question;
     return (

diff --git a/app/styles/cfb-form-editor/question-list/_item.scss b/app/styles/cfb-form-editor/question-list/_item.scss
@@ -5,6 +5,16 @@
   border: 1px solid $global-background;
   background: $global-danger-background;
   border-radius: 50%;
+
+  &--conditional::after {
+    content: "";
+    transform: translate(3px, 3px);
+    width: 3px;
+    height: 3px;
+    background: $global-background;
+    border-radius: 50%;
+    display: block;
+  }
 }
 
 .cfb-form-editor__question-list__item__archived {
@@ -20,4 +30,10 @@
 .cfb-form-editor__question-list__item__type {
   font-size: $global-small-font-size;
   height: 22px;
+  border: 2px solid $badge-background;
+
+  &--hidden {
+    background-color: $global-background;
+    color: $global-color !important;
+  }
 }
diff --git a/tests/integration/components/cfb-form-editor/question-list/item-test.js b/tests/integration/components/cfb-form-editor/question-list/item-test.js
@@ -7,6 +7,7 @@ import { module, test } from "qunit";
 
 class Question {
   @tracked isRequired = "true";
+  @tracked isHidden = "true";
 
   slug = "test-question";
   label = "Test Question?";
@@ -20,7 +21,7 @@ module(
     setupIntl(hooks);
 
     test("it renders", async function (assert) {
-      assert.expect(6);
+      assert.expect(13);
 
       this.question = new Question();
       this.set("mode", "reorder");
@@ -37,14 +38,47 @@ module(
         .hasText(
           "test-question Test Question? t:caluma.form-builder.question.types.TextQuestion:()"
         );
+
       assert.dom(".cfb-form-editor__question-list__item__required").exists();
+      assert
+        .dom(".cfb-form-editor__question-list__item__required--conditional")
+        .doesNotExist();
 
       this.question.isRequired = "false";
       await settled();
 
       assert
         .dom(".cfb-form-editor__question-list__item__required")
         .doesNotExist();
+      assert
+        .dom(".cfb-form-editor__question-list__item__required--conditional")
+        .doesNotExist();
+
+      this.question.isRequired = "1+2";
+      await settled();
+
+      assert.dom(".cfb-form-editor__question-list__item__required").exists();
+      assert
+        .dom(".cfb-form-editor__question-list__item__required--conditional")
+        .exists();
+
+      assert
+        .dom(".cfb-form-editor__question-list__item__type--hidden")
+        .exists();
+
+      this.question.isHidden = "false";
+      await settled();
+
+      assert
+        .dom(".cfb-form-editor__question-list__item__type--hidden")
+        .doesNotExist();
+
+      this.question.isHidden = "1+2";
+      await settled();
+
+      assert
+        .dom(".cfb-form-editor__question-list__item__type--hidden")
+        .exists();
 
       assert.dom("[data-test-sort-handle]").exists();
       this.set("mode", "remove");

diff --git a/translations/de.yaml b/translations/de.yaml
@@ -98,6 +98,18 @@ caluma:
 
       not-found: "Kein Formular mit dem Slug '{slug}' gefunden"
 
+    question-list:
+      required:
+        label: "Erforderlich (JEXL)"
+        not-required: "Optional"
+        required: "Erforderlich"
+        conditional: "Bedingt erforderlich"
+      hidden:
+        label: "Versteckt (JEXL)"
+        not-hidden: "Sichtbar"
+        hidden: "Versteckt"
+        conditional: "Bedingt versteckt"
+
     question:
       label: "Label"
       slug: "Slug"

diff --git a/translations/en.yaml b/translations/en.yaml
@@ -98,6 +98,18 @@ caluma:
 
       not-found: "No form with slug '{slug}' found"
 
+    question-list:
+      required:
+        label: "Required (JEXL)"
+        not-required: "Optional"
+        required: "Required"
+        conditional: "Conditionally required"
+      hidden:
+        label: "Hidden (JEXL)"
+        not-hidden: "Visible"
+        hidden: "Hidden"
+        conditional: "Conditionally hidden"
+
     question:
       label: "Label"
       slug: "Slug"

diff --git a/translations/fr.yaml b/translations/fr.yaml
@@ -66,6 +66,18 @@ caluma:
       month-next: "Mois suivant"
 
   form-builder:
+    question-list:
+      required:
+        label: "Obligatoire (JEXL)"
+        not-required: "Optionnel"
+        required: "Obligatoire"
+        conditional: "Conditionnellement obligatoire"
+      hidden:
+        label: "Caché (JEXL)"
+        not-hidden: "Visible"
+        hidden: "Caché"
+        conditional: "Conditionnellement caché"
+
     question:
       defaultValue: "Valeur par défaut"
       search-placeholder: "Tapez ici pour rechercher"