Feature/add mandatory asterisk (#2871)

* feat(form): add mandatory indicator for labels and provide configuration flag * feat(form): add cfField label.js for config handling of mandatory asterisk * feat(form): improved syntax & tests for mandatory asterisk * fix(form): fix eslint formatting in label-test.js * fix(form): css class naming, minor label-test improvements for mandatory asterisk * fix(form): lint fix
projectcaluma · Jan 7, 2025 · d23f5ad · d23f5ad
1 parent 8490d7f
commit d23f5ad
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 5 deletions.
diff --git a/packages/form/addon/components/cf-field/label.hbs b/packages/form/addon/components/cf-field/label.hbs
@@ -3,11 +3,18 @@
     {{@field.question.raw.label}}
   </span>
 
-  {{#if (and (not @field.question.isCalculated) @field.optional)}}
-    <span
-      class="uk-margin-small-left uk-text-muted uk-text-lowercase uk-text-normal"
-    >({{t "caluma.form.optional"}})</span>
-  {{/if}}
+  {{#unless @field.question.isCalculated}}
+    {{#if (and @field.optional (not this.useMandatoryAsterisk))}}
+      <span
+        class="uk-margin-small-left uk-text-muted uk-text-lowercase uk-text-normal"
+      >({{t "caluma.form.optional"}})</span>
+    {{else if (and (not @field.optional) this.useMandatoryAsterisk)}}
+      <span
+        title={{t "caluma.form.mandatory"}}
+        class="uk-text-muted uk-text-lowercase uk-text-normal cf-label__mandatory-asterisk"
+      >* </span>
+    {{/if}}
+  {{/unless}}
 
   {{yield}}
 </label>
diff --git a/packages/form/addon/components/cf-field/label.js b/packages/form/addon/components/cf-field/label.js
@@ -0,0 +1,20 @@
+import { getOwner } from "@ember/application";
+import Component from "@glimmer/component";
+
+/**
+ * Label component of the CfField
+ *
+ * @class CfFieldLabelComponent
+ */
+export default class CfFieldLabelComponent extends Component {
+  get config() {
+    return getOwner(this).resolveRegistration("config:environment");
+  }
+
+  get useMandatoryAsterisk() {
+    const { USE_MANDATORY_ASTERISK = false } =
+      this.config["ember-caluma"] || {};
+
+    return this.args.useMandatoryAsterisk ?? USE_MANDATORY_ASTERISK;
+  }
+}
diff --git a/packages/form/tests/integration/components/cf-field/label-test.js b/packages/form/tests/integration/components/cf-field/label-test.js
@@ -56,4 +56,35 @@ module("Integration | Component | cf-field/label", function (hooks) {
 
     assert.dom("label").hasText("Test (Optional)");
   });
+
+  test("it marks mandatory fields as such if useMandatoryAsterisk is configured in attribute", async function (assert) {
+    assert.expect(2);
+
+    await render(
+      hbs`<CfField::Label @field={{this.field}} @useMandatoryAsterisk={{true}} />`,
+    );
+
+    this.set("field.question.raw.isRequired", "false");
+    assert.dom("label").hasText("Test");
+
+    this.set("field.question.raw.isRequired", "true");
+    assert.dom("label").hasText("Test *");
+  });
+
+  test("it marks mandatory fields as such if useMandatoryAsterisk is globally configured", async function (assert) {
+    this.owner.resolveRegistration("config:environment")["ember-caluma"] = {
+      USE_MANDATORY_ASTERISK: true,
+    };
+
+    assert.expect(2);
+    this.set("useMandatoryAsterisk", true);
+
+    await render(hbs`<CfField::Label @field={{this.field}} />`);
+
+    this.set("field.question.raw.isRequired", "false");
+    assert.dom("label").hasText("Test");
+
+    this.set("field.question.raw.isRequired", "true");
+    assert.dom("label").hasText("Test *");
+  });
 });
diff --git a/packages/form/translations/de.yaml b/packages/form/translations/de.yaml
@@ -12,6 +12,7 @@ caluma:
     addRow: "Zeile hinzufügen"
     optionNotAvailable: "Diese Option ist nicht mehr verfügbar"
     info: "Mehr Informationen"
+    mandatory: "Pflichtfeld"
 
     error:
       details: "Technische Details:"

diff --git a/packages/form/translations/en.yaml b/packages/form/translations/en.yaml
@@ -12,6 +12,7 @@ caluma:
     addRow: "Add row"
     optionNotAvailable: "This option is not available anymore"
     info: "More information"
+    mandatory: "Mandatory field"
 
     error:
       details: "Technical details:"

diff --git a/packages/form/translations/fr.yaml b/packages/form/translations/fr.yaml
@@ -12,6 +12,7 @@ caluma:
     addRow: "Ajouter une ligne"
     optionNotAvailable: "Cette option n'est plus disponible"
     info: "Plus d'informations"
+    mandatory: "Champ obligatoire"
 
     error:
       details: "Détails techniques :"

diff --git a/packages/form/translations/it.yaml b/packages/form/translations/it.yaml
@@ -12,6 +12,7 @@ caluma:
     addRow: "Aggiungi riga"
     optionNotAvailable: "Questa opzione non è più disponibile"
     info: "Ulteriori informazioni"
+    mandatory: "Campo obbligatorio"
 
     error:
       details: "Dettagli tecnici:"