feat(form): add reset function for optional single choice questions

---------

Co-authored-by: Aboubacar <aboubacar.mchangama@adfinis.com>
Co-authored-by: Falk <falk.neumann@adfinis.com>

packages/form/addon/components/cf-field/input/radio.hbs

@@ -22,4 +22,10 @@
       {{option.label}}
     {{/if}}
   </label>
-{{/each}}
+{{/each}}
+{{#if (and @field.optional @field.answer.value)}}
+  <br />
+  <a href="" data-test-radio-reset {{on "click" this.reset}}>
+    {{t "caluma.form.power-select.reset"}}
+  </a>
+{{/if}}

packages/form/addon/components/cf-field/input/radio.js

@@ -0,0 +1,11 @@
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
+
+export default class CfFieldInpuRadio extends Component {
+  @action
+  reset(event) {
+    event.preventDefault();
+
+    this.args.onSave(null);
+  }
+}

packages/form/blueprints/@projectcaluma/ember-form/index.js

@@ -20,6 +20,7 @@ module.exports = {
         { name: "ember-flatpickr" },
         { name: "ember-in-viewport" },
         { name: "ember-math-helpers" },
+        { name: "ember-truth-helpers" },
         { name: "ember-power-select" },
       ],
     });

packages/form/package.json

@@ -35,6 +35,7 @@
     "ember-math-helpers": "^4.0.0",
     "ember-power-select": "^7.2.0",
     "ember-resources": "^6.4.2",
+    "ember-truth-helpers": "^4.0.3",
     "ember-uikit": "^9.0.0",
     "ember-validators": "^4.1.2",
     "graphql": "^15.8.0",

packages/form/tests/integration/components/cf-field/input/radio-test.js

@@ -86,19 +86,33 @@ module("Integration | Component | cf-field/input/radio", function (hooks) {
   });
 
   test("it triggers save on click", async function (assert) {
-    assert.expect(1);
-
-    this.set("save", (value) => assert.strictEqual(value, "option-1"));
+    this.set("value", false);
+    this.set("optional", true);
+    this.set("onSave", (value) => {
+      this.set("value", value);
+      assert.step("save");
+    });
 
     await render(hbs`<CfField::Input::Radio
-  @onSave={{this.save}}
+  @onSave={{this.onSave}}
   @field={{hash
     options=(array (hash slug="option-1" label="Option 1"))
-    question=(hash __typename="ChoiceQuestion")
+    answer=(hash value=this.value)
+    question=(hash __typename="ChoiceQuestion" slug="test")
+    optional=this.optional
   }}
 />`);
 
     await click("label:nth-of-type(1) input");
+    await click("[data-test-radio-reset]");
+
+    assert.verifySteps(["save", "save"]);
+
+    this.set("optional", false);
+    await click("label:nth-of-type(1) input");
+
+    assert.verifySteps(["save"]);
+    assert.dom("[data-test-radio-reset]").isNotVisible();
   });
 
   test("it renders disabled options", async function (assert) {

packages/form/translations/de.yaml

@@ -40,6 +40,7 @@ caluma:
       options-empty: "Keine Optionen vorhanden"
       search-placeholder: "Hier tippen um zu suchen"
       search-empty: "Keine Optionen gefunden"
+      reset: "Zurücksetzen"
 
     validation:
       blank: "Dieses Feld darf nicht leer gelassen werden"

packages/form/translations/en.yaml

@@ -40,6 +40,7 @@ caluma:
       options-empty: "No options available"
       search-placeholder: "Type here to search options"
       search-empty: "Search didn't match any options"
+      reset: "Reset"
 
     validation:
       blank: "This field can't be blank"

packages/form/translations/fr.yaml

@@ -40,6 +40,7 @@ caluma:
       options-empty: "Pas d'options disponibles"
       search-placeholder: "Tapez ici pour rechercher"
       search-empty: "Pas d'options trouvées"
+      reset: "Réinitialiser"
 
     validation:
       blank: "Ce champ ne doit pas être laissé vide"