From d23f5ad79b77e2d8d9a08dc5d530a686f02af2d9 Mon Sep 17 00:00:00 2001
From: Tilo Stoppe <tilo.stoppe@adfinis.com>
Date: Tue, 7 Jan 2025 14:57:36 +0100
Subject: [PATCH] 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
---
 .../form/addon/components/cf-field/label.hbs  | 17 +++++++---
 .../form/addon/components/cf-field/label.js   | 20 ++++++++++++
 .../components/cf-field/label-test.js         | 31 +++++++++++++++++++
 packages/form/translations/de.yaml            |  1 +
 packages/form/translations/en.yaml            |  1 +
 packages/form/translations/fr.yaml            |  1 +
 packages/form/translations/it.yaml            |  1 +
 7 files changed, 67 insertions(+), 5 deletions(-)
 create mode 100644 packages/form/addon/components/cf-field/label.js

diff --git a/packages/form/addon/components/cf-field/label.hbs b/packages/form/addon/components/cf-field/label.hbs
index 35b3e603d..fc844af1f 100644
--- 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>
\ No newline at end of file
diff --git a/packages/form/addon/components/cf-field/label.js b/packages/form/addon/components/cf-field/label.js
new file mode 100644
index 000000000..21476e776
--- /dev/null
+++ 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
index ee3ba0b79..1b1e7e59a 100644
--- 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
index c6654a55c..c22e2301f 100644
--- 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
index 3f3684952..f313060a2 100644
--- 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
index b369218b9..2165e1606 100644
--- 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
index 5e1d5e6ee..7960f3834 100644
--- 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:"