FS-4861 - Welsh available toggle affects Welsh field visibility on 'C…

…reate a Fund' page
communitiesuk · Dec 12, 2024 · f1f7e49 · f1f7e49
1 parent 952baab
commit f1f7e49
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 11 deletions.
diff --git a/app/blueprints/fund_builder/templates/fund.html b/app/blueprints/fund_builder/templates/fund.html
@@ -21,17 +21,16 @@ <h1 class="govuk-heading-l">{{pageHeading}}</h1>
         <div class="govuk-form-group">
             <fieldset class="govuk-fieldset">
                 <form method="POST">
-
                     {{ form.hidden_tag()}}
 
+                    {{yes_no(form.welsh_available)}}
                     {{input(form.name_en)}}
-                    {{input(form.name_cy)}}
+                    {{input(form.name_cy, classes="welsh-field")}}
                     {{input(form.title_en)}}
-                    {{input(form.title_cy)}}
+                    {{input(form.title_cy, classes="welsh-field")}}
                     {{input(form.short_name)}}
                     {{multilineinput(form.description_en)}}
-                    {{multilineinput(form.description_cy)}}
-                    {{yes_no(form.welsh_available)}}
+                    {{multilineinput(form.description_cy, classes="welsh-field")}}
                     {{radios_from_enum(form.funding_type)}}
                     {{input(form.ggis_scheme_reference_number)}}
                     <div class="govuk-!-margin-top-6">
@@ -44,4 +43,30 @@ <h1 class="govuk-heading-l">{{pageHeading}}</h1>
         </div>
     </div>
 </div>
+
+<script>
+function toggleWelshFields() {
+    const welshAvailable = document.querySelector('input[name="welsh_available"]:checked').value;
+    const welshFields = document.querySelectorAll('.welsh-field');
+
+    welshFields.forEach(field => {
+        const fieldContainer = field.closest('.govuk-form-group');
+        if (welshAvailable === 'true') {
+            fieldContainer.style.display = 'block';
+        } else {
+            fieldContainer.style.display = 'none';
+        }
+    });
+}
+
+// Run on page load
+document.addEventListener('DOMContentLoaded', function() {
+    toggleWelshFields();
+
+    // Add change event listeners to radio buttons
+    document.querySelectorAll('input[name="welsh_available"]').forEach(radio => {
+        radio.addEventListener('change', toggleWelshFields);
+    });
+});
+</script>
 {% endblock content %}
diff --git a/app/templates/macros/wtfToGovUk.html b/app/templates/macros/wtfToGovUk.html
@@ -4,29 +4,31 @@
 {% from "govuk_frontend_jinja/components/textarea/macro.html" import govukTextarea %}
 {% from "govuk_frontend_jinja/components/date-input/macro.html" import govukDateInput %}
 
-{% macro input(form_field) %}
+{% macro input(form_field, classes="") %}
 {{ govukInput({
 "label": {
-"text": form_field.label ,
+"text": form_field.label,
 "isPageHeading": false
 },
 "id": form_field.id,
-"name": form_field.name ,
+"name": form_field.name,
 "value": form_field.data,
+"classes": classes,
 "errorMessage": {"text": form_field.errors[0]} if (form_field.errors | length > 0) else None,
 "hint":{"text":form_field.description}
 }) }}
 {%endmacro%}
 
-{% macro multilineinput(form_field) %}
+{% macro multilineinput(form_field, classes="") %}
 {{ govukTextarea({
 "label": {
-"text": form_field.label ,
+"text": form_field.label,
 "isPageHeading": false
 },
 "id": form_field.id,
-"name": form_field.name ,
+"name": form_field.name,
 "value": form_field.data if form_field.data else "",
+"classes": classes,
 "errorMessage": {"text": form_field.errors[0]} if (form_field.errors | length > 0) else None,
 "hint":{"text":form_field.description}
 }) }}