Merge pull request #3516 from opensafely-core/pluralised-form-components

Add radios component

jobserver/views/workspaces.py

@@ -422,7 +422,7 @@ def get_context_data(self, **kwargs):
             pk__in=JobRequest.objects.filter(workspace=self.workspace).values_list(
                 "backend_id", flat=True
             )
-        )
+        ).order_by("name")
 
         return super().get_context_data(**kwargs) | {
             "backends": backends,

templates/_components/form/radio.html

@@ -1,19 +1,5 @@
-{% if custom_field == True %}
-  {% var label_for=id %}
-  {% var input_id=id %}
-  {% var input_name=name %}
-  {% var input_value=value %}
-  {% var field_errors=errors %}
-{% else %}
-  {% var label_for=field.id_for_label %}
-  {% var input_id=field.auto_id %}
-  {% var input_name=field.html_name %}
-  {% var input_value=field.value %}
-  {% var field_errors=field.errors %}
-{% endif %}
-
 <label
-  for="{{ label_for }}"
+  for="{{ id }}"
   class="w-fit max-w-full flex flex-row gap-x-3 items-start cursor-pointer text-lg group {{ label_class }}"
 >
   <input
@@ -25,10 +11,10 @@
       checked:bg-oxford-600 checked:border-oxford-600
       {{ input_class }}
     "
-    id="{{ input_id }}"
-    name="{{ input_name }}"
+    id="{{ id }}"
+    name="{{ name }}"
     type="radio"
-    value="{{ input_value }}"
+    value="{{ value }}"
   >
   <span class="transition-colors group-hover:text-oxford-600 {{ span_class }}">
     {% if label %}{{ label }}{% else %}{{ field.label }}{% endif %}

templates/_components/form/radio_list.html

@@ -0,0 +1,13 @@
+{% for value, label in field.field.choices %}
+
+  {% if field.value == value %}
+  {% var checked=True %}
+  {% else %}
+  {% var checked=False %}
+  {% endif %}
+
+  {% with id=forloop.counter|stringformat:"s" %}
+  {% form_radio id="id_backend"|add:id name="backend" value=value label=label checked=checked %}
+  {% endwith %}
+
+{% endfor %}

templates/applications/page.html

@@ -84,10 +84,11 @@ <h2 class="text-lg leading-snug font-semibold mb-3">
                   {% var id="id"|add:valueStr|add:countStr %}
 
                   {% if value == field.field.value %}
-                    {% form_radio custom_field=True id=id label=label name=field.name value=value errors=field.errors checked=True %}
+                  {% var checked=True %}
                   {% else %}
-                    {% form_radio custom_field=True id=id label=label name=field.name value=value errors=field.errors %}
+                  {% var checked=False %}
                   {% endif %}
+                  {% form_radio id=id label=label name=field.name value=value errors=field.errors checked=checked %}
                 {% endfor %}
               {% /form_fieldset %}
             {% elif field.template_name == "components/form_checkbox.html" %}

templates/applications/researcher_form.html

@@ -62,10 +62,11 @@
       {% for value, label in form.does_researcher_need_server_access.field.choices %}
         {% with id=forloop.counter0|stringformat:"s" %}
           {% if form.does_researcher_need_server_access.value == value %}
-            {% form_radio custom_field=True name="does_researcher_need_server_access" id="id_does_researcher_need_server_access"|add:label|add:"_"|add:id|slugify label=label value=value checked=True %}
+          {% var checked=True %}
           {% else %}
-            {% form_radio custom_field=True name="does_researcher_need_server_access" id="id_does_researcher_need_server_access"|add:label|add:"_"|add:id|slugify label=label value=value  %}
+          {% var checked=False %}
           {% endif %}
+          {% form_radio name="does_researcher_need_server_access" id="id_does_researcher_need_server_access"|add:label|add:"_"|add:id|slugify label=label value=value checked=checked %}
         {% endwith %}
       {% endfor %}
     {% /form_fieldset %}
@@ -82,10 +83,11 @@
       {% for value, label in form.phone_type.field.choices %}
         {% with id=forloop.counter0|stringformat:"s" %}
           {% if form.phone_type.value == value %}
-            {% form_radio custom_field=True name="phone_type" id="id_"|add:label|add:"_"|add:id|slugify label=label value=value checked=True %}
+          {% var checked=True %}
           {% else %}
-            {% form_radio custom_field=True name="phone_type" id="id_"|add:label|add:"_"|add:id|slugify label=label value=value %}
+          {% var checked=False %}
           {% endif %}
+          {% form_radio name="phone_type" id="id_"|add:label|add:"_"|add:id|slugify label=label value=value checked=checked %}
         {% endwith %}
       {% endfor %}
     {% /form_fieldset %}
@@ -98,10 +100,11 @@
       {% for value, label in form.has_taken_safe_researcher_training.field.choices %}
         {% with id=forloop.counter0|stringformat:"s" %}
           {% if form.has_taken_safe_researcher_training.value == value %}
-            {% form_radio custom_field=True name="has_taken_safe_researcher_training" id="id_has_taken_safe_researcher_training"|add:label|add:"_"|add:id|slugify label=label value=value checked=True %}
+          {% var checked=True %}
           {% else %}
-            {% form_radio custom_field=True name="has_taken_safe_researcher_training" id="id_has_taken_safe_researcher_training"|add:label|add:"_"|add:id|slugify label=label value=value %}
+          {% var checked=False %}
           {% endif %}
+            {% form_radio name="has_taken_safe_researcher_training" id="id_has_taken_safe_researcher_training"|add:label|add:"_"|add:id|slugify label=label value=value checked=checked %}
         {% endwith %}
       {% endfor %}
     {% /form_fieldset %}

templates/components.yaml

@@ -16,6 +16,7 @@ components:
   form_input: "_components/form/input.html"
   form_legend: "_components/form/legend.html"
   form_radio: "_components/form/radio.html"
+  form_radios: "_components/form/radio_list.html"
   form_select: "_components/form/select.html"
   form_textarea: "_components/form/textarea.html"
   header: "_components/header.html"

templates/job_request_create.html

@@ -74,15 +74,7 @@
           {% form_legend text="Select a backend" %}
 
           <div class="max-w-lg flex flex-col gap-y-2" id="backends">
-            {% for value, label in form.backend.field.choices %}
-              {% with id=forloop.counter|stringformat:"s" %}
-              {% if form.backend.value == value %}
-                {% form_radio custom_field=True id="id_backend"|add:id name="backend" value=value label=label checked=True %}
-              {% else %}
-                {% form_radio custom_field=True id="id_backend"|add:id name="backend" value=value label=label checked=False %}
-              {% endif %}
-              {% endwith %}
-            {% endfor %}
+            {% form_radios field=form.backend %}
           </div>
 
           {% if form.backend.errors %}
@@ -191,16 +183,18 @@
 
           <div class="w-full grid grid-flow-row gap-y-2">
             {% if form.will_notify.value|stringformat:"s" == "True" %}
-              {% form_radio custom_field=True id="id_will_notify" name="will_notify" value="True" label="Notify me when each of the selected actions has completed" checked=True %}
+              {% var checked=True %}
             {% else %}
-              {% form_radio custom_field=True id="id_will_notify" name="will_notify" value="True" label="Notify me when each of the selected actions has completed" checked=False %}
+              {% var checked=False %}
             {% endif %}
+            {% form_radio id="id_will_notify0" name="will_notify" value="True" label="Notify me when each of the selected actions has completed" checked=checked %}
 
             {% if form.will_notify.value|stringformat:"s" == "False" %}
-              {% form_radio custom_field=True id="id_will_notify" name="will_notify" value="False" label="Do not notify me" checked=True %}
+              {% var checked=True %}
             {% else %}
-              {% form_radio custom_field=True id="id_will_notify" name="will_notify" value="False" label="Do not notify me" checked=False %}
+              {% var checked=False %}
             {% endif %}
+            {% form_radio id="id_will_notify1" name="will_notify" value="False" label="Do not notify me" checked=checked %}
           </div>
         {% /form_fieldset %}
 

templates/workspace_event_log.html

@@ -42,30 +42,29 @@
   {% article_header title=workspace.name text=intro_text %}
 
   {% #card container=True class="max-w-prose my-6" %}
-    <form method="GET">
-      {% form_input type="search" custom_field=True label="Search by Job action or ID" id="searchJobLogs" name="q" value=request.GET.q %}
-      {% #button class="mt-2" type="submit" variant="primary-outline" %}Search{% /button %}
+    <form method="GET" class="flex flex-col gap-y-6 items-start">
+      <div class="flex flex-col gap-y-2 w-full items-start">
+        {% form_input class="w-full" type="search" custom_field=True label="Search by Job action or ID" id="searchJobLogs" name="q" value=request.GET.q %}
+        {% #button type="submit" variant="primary-outline" %}Search{% /button %}
+      </div>
+
+      {% if backends %}
+        {% #form_fieldset %}
+          {% form_legend text="Filter by backend" %}
+          {% for backend in backends %}
+            {% is_filter_selected key="backend" value=backend.slug as is_active %}
+            {% form_checkbox custom_field=True label=backend.name value=backend.slug name="backend" id=backend.slug checked=is_active %}
+          {% endfor %}
+        {% /form_fieldset %}
+        {% #button type="submit" variant="primary-outline" %}Filter{% /button %}
+      {% endif %}
 
       {% if request.GET.q %}
-        <p class="mt-3">
+        <p>
           {% link href=workspace.get_logs_url text="Clear search" %}
         </p>
       {% endif %}
-    </form>
-
-    {% if backends|length > 1 %}
-    <form class="mt-6 pt-6 border-t border-t-slate-300" method="get">
-      {% #form_fieldset class="mb-3" %}
-        {% form_legend text="Filter by backend" %}
-        {% for backend in backends|dictsort:"name" %}
-          {% is_filter_selected key="backend" value=backend.slug as is_active %}
-          {% form_checkbox custom_field=True label=backend.name value=backend.slug name="backend" id=backend.slug checked=is_active %}
-        {% endfor %}
-      {% /form_fieldset %}
-      {% #button type="submit" variant="primary-outline" %}Filter{% /button %}
-    </form>
-    {% endif %}
-  {% /card %}
+    {% /card %}
 
   {% if not page_obj %}
     {% #card container=True title="No results found" %}