From 1d145ef1a751a8a2f0f7b3590ebf297626d185c2 Mon Sep 17 00:00:00 2001 From: Tilo Stoppe Date: Fri, 3 Jan 2025 16:21:29 +0100 Subject: [PATCH 1/6] feat(form): add mandatory indicator for labels and provide configuration flag --- packages/form/addon/components/cf-field.hbs | 5 +++- packages/form/addon/components/cf-field.js | 12 ++++++++ .../form/addon/components/cf-field/label.hbs | 17 +++++++---- .../components/cf-field/label-test.js | 29 ++++++++++++++++++- packages/form/translations/de.yaml | 1 + packages/form/translations/en.yaml | 1 + packages/form/translations/fr.yaml | 1 + packages/form/translations/it.yaml | 1 + 8 files changed, 60 insertions(+), 7 deletions(-) diff --git a/packages/form/addon/components/cf-field.hbs b/packages/form/addon/components/cf-field.hbs index 94ae7cba6..103ccc3bf 100644 --- a/packages/form/addon/components/cf-field.hbs +++ b/packages/form/addon/components/cf-field.hbs @@ -13,7 +13,10 @@ {{in-viewport onEnter=this.refreshDynamicOptions}} > {{#if this.labelVisible}} - + {{/if}}
diff --git a/packages/form/addon/components/cf-field.js b/packages/form/addon/components/cf-field.js index 10029fbac..ac451061d 100644 --- a/packages/form/addon/components/cf-field.js +++ b/packages/form/addon/components/cf-field.js @@ -1,3 +1,4 @@ +import { getOwner } from "@ember/application"; import { action } from "@ember/object"; import { service } from "@ember/service"; import { macroCondition, isTesting } from "@embroider/macros"; @@ -80,6 +81,17 @@ export default class CfFieldComponent extends Component { return !hasQuestionType(this.args.field?.question, "action-button"); } + get config() { + return getOwner(this).resolveRegistration("config:environment"); + } + + get useMandatoryAsterisk() { + const { USE_MANDATORY_ASTERISK = false } = + this.config["ember-caluma"] || {}; + + return USE_MANDATORY_ASTERISK; + } + /** * Task to save a field. This will set the passed value to the answer and save * the field to the API after a timeout of 500 milliseconds which intends to diff --git a/packages/form/addon/components/cf-field/label.hbs b/packages/form/addon/components/cf-field/label.hbs index 35b3e603d..4454df9d3 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}} - {{#if (and (not @field.question.isCalculated) @field.optional)}} - ({{t "caluma.form.optional"}}) - {{/if}} + {{#unless @field.question.isCalculated}} + {{#if (and @field.optional (not @useMandatoryAsterisk))}} + ({{t "caluma.form.optional"}}) + {{else if (and (not @field.optional) @useMandatoryAsterisk)}} + * + {{/if}} + {{/unless}} {{yield}} \ No newline at end of file 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..1e18e4604 100644 --- a/packages/form/tests/integration/components/cf-field/label-test.js +++ b/packages/form/tests/integration/components/cf-field/label-test.js @@ -34,6 +34,7 @@ module("Integration | Component | cf-field/label", function (hooks) { { raw, owner: this.owner }, ); this.set("field", document.fields[0]); + this.set("useMandatoryAsterisk", false); }); test("it renders", async function (assert) { @@ -48,7 +49,9 @@ module("Integration | Component | cf-field/label", function (hooks) { test("it marks optional fields as such", async function (assert) { assert.expect(2); - await render(hbs``); + await render( + hbs``, + ); assert.dom("label").hasText("Test"); @@ -56,4 +59,28 @@ 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", async function (assert) { + assert.expect(1); + this.set("useMandatoryAsterisk", true); + + await render( + hbs``, + ); + this.set("field.question.raw.isRequired", "true"); + + assert.dom("label").hasText("Test *"); + }); + + test("it doesnt mark optional fields if useMandatoryAsterisk is configured true", async function (assert) { + assert.expect(1); + this.set("useMandatoryAsterisk", true); + + await render( + hbs``, + ); + this.set("field.question.raw.isRequired", "false"); + + 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:" From 4b2b973c81efdc825c8bd7c1ff53c98caf27b516 Mon Sep 17 00:00:00 2001 From: Tilo Stoppe Date: Mon, 6 Jan 2025 13:06:42 +0100 Subject: [PATCH 2/6] feat(form): add cfField label.js for config handling of mandatory asterisk --- packages/form/addon/components/cf-field.hbs | 5 +---- packages/form/addon/components/cf-field.js | 12 ---------- .../form/addon/components/cf-field/label.hbs | 4 ++-- .../form/addon/components/cf-field/label.js | 22 +++++++++++++++++++ 4 files changed, 25 insertions(+), 18 deletions(-) create mode 100644 packages/form/addon/components/cf-field/label.js diff --git a/packages/form/addon/components/cf-field.hbs b/packages/form/addon/components/cf-field.hbs index 103ccc3bf..94ae7cba6 100644 --- a/packages/form/addon/components/cf-field.hbs +++ b/packages/form/addon/components/cf-field.hbs @@ -13,10 +13,7 @@ {{in-viewport onEnter=this.refreshDynamicOptions}} > {{#if this.labelVisible}} - + {{/if}}
diff --git a/packages/form/addon/components/cf-field.js b/packages/form/addon/components/cf-field.js index ac451061d..10029fbac 100644 --- a/packages/form/addon/components/cf-field.js +++ b/packages/form/addon/components/cf-field.js @@ -1,4 +1,3 @@ -import { getOwner } from "@ember/application"; import { action } from "@ember/object"; import { service } from "@ember/service"; import { macroCondition, isTesting } from "@embroider/macros"; @@ -81,17 +80,6 @@ export default class CfFieldComponent extends Component { return !hasQuestionType(this.args.field?.question, "action-button"); } - get config() { - return getOwner(this).resolveRegistration("config:environment"); - } - - get useMandatoryAsterisk() { - const { USE_MANDATORY_ASTERISK = false } = - this.config["ember-caluma"] || {}; - - return USE_MANDATORY_ASTERISK; - } - /** * Task to save a field. This will set the passed value to the answer and save * the field to the API after a timeout of 500 milliseconds which intends to diff --git a/packages/form/addon/components/cf-field/label.hbs b/packages/form/addon/components/cf-field/label.hbs index 4454df9d3..cd9c3a156 100644 --- a/packages/form/addon/components/cf-field/label.hbs +++ b/packages/form/addon/components/cf-field/label.hbs @@ -4,11 +4,11 @@ {{#unless @field.question.isCalculated}} - {{#if (and @field.optional (not @useMandatoryAsterisk))}} + {{#if (and @field.optional (not this.useMandatoryAsterisk))}} ({{t "caluma.form.optional"}}) - {{else if (and (not @field.optional) @useMandatoryAsterisk)}} + {{else if (and (not @field.optional) this.useMandatoryAsterisk)}} Date: Mon, 6 Jan 2025 15:16:18 +0100 Subject: [PATCH 3/6] feat(form): improved syntax & tests for mandatory asterisk --- .../form/addon/components/cf-field/label.js | 4 +-- .../components/cf-field/label-test.js | 36 +++++++++++-------- 2 files changed, 23 insertions(+), 17 deletions(-) diff --git a/packages/form/addon/components/cf-field/label.js b/packages/form/addon/components/cf-field/label.js index ba69aeb29..87b6839d3 100644 --- a/packages/form/addon/components/cf-field/label.js +++ b/packages/form/addon/components/cf-field/label.js @@ -15,8 +15,6 @@ export default class CfFieldLabelComponent extends Component { const { USE_MANDATORY_ASTERISK = false } = this.config["ember-caluma"] || {}; - return [true, false].includes(this.args?.useMandatoryAsterisk) - ? this.args?.useMandatoryAsterisk - : USE_MANDATORY_ASTERISK; + 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 1e18e4604..06be34701 100644 --- a/packages/form/tests/integration/components/cf-field/label-test.js +++ b/packages/form/tests/integration/components/cf-field/label-test.js @@ -34,7 +34,6 @@ module("Integration | Component | cf-field/label", function (hooks) { { raw, owner: this.owner }, ); this.set("field", document.fields[0]); - this.set("useMandatoryAsterisk", false); }); test("it renders", async function (assert) { @@ -49,9 +48,7 @@ module("Integration | Component | cf-field/label", function (hooks) { test("it marks optional fields as such", async function (assert) { assert.expect(2); - await render( - hbs``, - ); + await render(hbs``); assert.dom("label").hasText("Test"); @@ -60,27 +57,38 @@ 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", async function (assert) { - assert.expect(1); + test("it marks mandatory fields as such if useMandatoryAsterisk is configured in attribute", async function (assert) { + assert.expect(2); this.set("useMandatoryAsterisk", true); await render( - hbs``, + hbs``, ); - this.set("field.question.raw.isRequired", "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 doesnt mark optional fields if useMandatoryAsterisk is configured true", async function (assert) { - assert.expect(1); + 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``, - ); - this.set("field.question.raw.isRequired", "false"); + await render(hbs``); + this.set("field.question.raw.isRequired", "false"); assert.dom("label").hasText("Test"); + + this.set("field.question.raw.isRequired", "true"); + assert.dom("label").hasText("Test *"); }); }); From 7c76a2ad264936aebee3c76ce72bbfda39d13c7a Mon Sep 17 00:00:00 2001 From: Tilo Stoppe Date: Mon, 6 Jan 2025 15:26:50 +0100 Subject: [PATCH 4/6] fix(form): fix eslint formatting in label-test.js --- .../tests/integration/components/cf-field/label-test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 06be34701..3c0eedf4d 100644 --- a/packages/form/tests/integration/components/cf-field/label-test.js +++ b/packages/form/tests/integration/components/cf-field/label-test.js @@ -63,9 +63,9 @@ module("Integration | Component | cf-field/label", function (hooks) { await render( hbs``, + @field={{this.field}} + @useMandatoryAsterisk={{this.useMandatoryAsterisk}} +/>`, ); this.set("field.question.raw.isRequired", "false"); From f8bfde1f0dbe48fc70c24ddba441cd0ee21c4d17 Mon Sep 17 00:00:00 2001 From: Tilo Stoppe Date: Tue, 7 Jan 2025 11:00:03 +0100 Subject: [PATCH 5/6] fix(form): css class naming, minor label-test improvements for mandatory asterisk --- packages/form/addon/components/cf-field/label.hbs | 2 +- packages/form/addon/components/cf-field/label.js | 2 +- .../form/tests/integration/components/cf-field/label-test.js | 3 +-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/form/addon/components/cf-field/label.hbs b/packages/form/addon/components/cf-field/label.hbs index cd9c3a156..fc844af1f 100644 --- a/packages/form/addon/components/cf-field/label.hbs +++ b/packages/form/addon/components/cf-field/label.hbs @@ -11,7 +11,7 @@ {{else if (and (not @field.optional) this.useMandatoryAsterisk)}} * {{/if}} {{/unless}} diff --git a/packages/form/addon/components/cf-field/label.js b/packages/form/addon/components/cf-field/label.js index 87b6839d3..21476e776 100644 --- a/packages/form/addon/components/cf-field/label.js +++ b/packages/form/addon/components/cf-field/label.js @@ -15,6 +15,6 @@ export default class CfFieldLabelComponent extends Component { const { USE_MANDATORY_ASTERISK = false } = this.config["ember-caluma"] || {}; - return this.args?.useMandatoryAsterisk ?? USE_MANDATORY_ASTERISK; + 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 3c0eedf4d..c71ec4968 100644 --- a/packages/form/tests/integration/components/cf-field/label-test.js +++ b/packages/form/tests/integration/components/cf-field/label-test.js @@ -59,12 +59,11 @@ module("Integration | Component | cf-field/label", function (hooks) { test("it marks mandatory fields as such if useMandatoryAsterisk is configured in attribute", async function (assert) { assert.expect(2); - this.set("useMandatoryAsterisk", true); await render( hbs``, ); From 7cfc0a0140140ff09a4a1290186116265003f702 Mon Sep 17 00:00:00 2001 From: Tilo Stoppe Date: Tue, 7 Jan 2025 13:42:15 +0100 Subject: [PATCH 6/6] fix(form): lint fix --- .../form/tests/integration/components/cf-field/label-test.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) 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 c71ec4968..1b1e7e59a 100644 --- a/packages/form/tests/integration/components/cf-field/label-test.js +++ b/packages/form/tests/integration/components/cf-field/label-test.js @@ -61,10 +61,7 @@ module("Integration | Component | cf-field/label", function (hooks) { assert.expect(2); await render( - hbs``, + hbs``, ); this.set("field.question.raw.isRequired", "false");