[SPIKE] Expermiment with 'additive' textarea component

caseworker/advice/forms.py

@@ -6,7 +6,13 @@
 from crispy_forms_gds.layout import Field, Layout, Submit
 from crispy_forms_gds.choices import Choice
 
-from core.forms.layouts import ConditionalRadios, ConditionalRadiosQuestion, ExpandingFieldset, RadioTextArea
+from core.forms.layouts import (
+    ConditionalRadios,
+    ConditionalRadiosQuestion,
+    ExpandingFieldset,
+    RadioTextArea,
+    AdditiveTextArea,
+)
 from core.forms.utils import coerce_str_to_bool
 from caseworker.tau.summaries import get_good_on_application_tau_summary
 from caseworker.tau.widgets import GoodsMultipleSelect
@@ -84,7 +90,7 @@ def __init__(self, team_name, *args, **kwargs):
 
 
 class PicklistAdviceForm(forms.Form):
-    def _picklist_to_choices(self, picklist_data):
+    def _picklist_to_choices(self, picklist_data, include_other=True):
         reasons_choices = []
         reasons_text = {"other": ""}
 
@@ -95,7 +101,8 @@ def _picklist_to_choices(self, picklist_data):
                 choice = Choice(key, result.get("name"), divider="or")
             reasons_choices.append(choice)
             reasons_text[key] = result.get("text")
-        reasons_choices.append(Choice("other", "Other"))
+        if include_other:
+            reasons_choices.append(Choice("other", "Other"))
         return reasons_choices, reasons_text
 
 
@@ -152,7 +159,7 @@ def __init__(self, *args, **kwargs):
         approval_choices, approval_text = self._picklist_to_choices(approval_reason)
         self.approval_text = approval_text
 
-        proviso_choices, proviso_text = self._picklist_to_choices(proviso)
+        proviso_choices, proviso_text = self._picklist_to_choices(proviso, include_other=False)
         self.proviso_text = proviso_text
 
         footnote_details_choices, footnote_text = self._picklist_to_choices(footnote_details)
@@ -166,7 +173,7 @@ def __init__(self, *args, **kwargs):
         self.helper.layout = Layout(
             RadioTextArea("approval_radios", "approval_reasons", self.approval_text),
             ExpandingFieldset(
-                RadioTextArea("proviso_radios", "proviso", self.proviso_text),
+                AdditiveTextArea("proviso_radios", "proviso", self.proviso_text),
                 "instructions_to_exporter",
                 RadioTextArea("footnote_details_radios", "footnote_details", self.footnote_text),
                 legend="Add a licence condition, instruction to exporter or footnote",

caseworker/assets/javascripts/additive-populate-textarea.js

@@ -0,0 +1,31 @@
+class PopulateTextOnRadioInput {
+  constructor($el) {
+    this.$addButtons = $el.querySelectorAll("a[data-additive-key]");
+    this.$textArea = $el.querySelector("textarea");
+    this.$lookup = JSON.parse(
+      $el.querySelector(`#${this.$textArea.name}`).textContent,
+    );
+  }
+
+  init() {
+    this.$addButtons.forEach((input) => {
+      input.addEventListener("click", (event) => {
+        event.preventDefault();
+        const text = this.$lookup[input.getAttribute("data-additive-key")];
+        if (this.$textArea.value == "") {
+          this.$textArea.value = text;
+        } else {
+          this.$textArea.value = this.$textArea.value + "\n\n\n" + text;
+        }
+      });
+    });
+  }
+}
+
+export default function initAdditiveTextArea() {
+  document
+    .querySelectorAll("[data-module=additive-textarea]")
+    .forEach(($el) => new PopulateTextOnRadioInput($el).init());
+}
+
+export { PopulateTextOnRadioInput, initAdditiveTextArea };

caseworker/assets/javascripts/main.js

@@ -21,6 +21,7 @@ import { initCaseNotes, initMentionUsers } from "./case-notes";
 import { initExpanders } from "./list-expander";
 import { initCustomisers } from "./customiser";
 import { initRadioTextArea } from "./radio-populate-textarea.js";
+import { initAdditiveTextArea } from "./additive-populate-textarea.js";
 import initSelectAllTables from "./select-all-tables.js";
 import { initTableExpanders } from "./table-expander.js";
 
@@ -45,6 +46,7 @@ initMentionUsers();
 initExpanders();
 initCustomisers();
 initRadioTextArea();
+initAdditiveTextArea();
 initSelectAllTables();
 initTableExpanders();
 

core/forms/layouts.py

@@ -187,6 +187,43 @@ def render(self, form, form_style, context, template_pack=TEMPLATE_PACK, **kwarg
         return render_to_string(template, context.flatten())
 
 
+class AdditiveTextArea(TemplateNameMixin):
+    template = "%s/layout/additive_textarea.html"
+
+    def __init__(self, radio_field, field, json_choices):
+        if not isinstance(field, str):
+            raise TypeError(f"{self.__class__.__name__} only accepts field as a string parameter")
+        if not isinstance(radio_field, str):
+            raise TypeError(f"{self.__class__.__name__} only accepts radio_field as a string parameter")
+        self.field = field
+        self.radio_field = radio_field
+        self.json_choices = self.sanitise_json_choices(json_choices)
+
+    def sanitise_json_choices(self, choices):
+        if not isinstance(choices, dict):
+            raise TypeError(f"{self.__class__.__name__} only accepts json_choices as a dict parameter")
+
+        for key in choices:
+            if not isinstance(choices[key], str):
+                raise TypeError(f"{self.__class__.__name__} only accepts json_choices with string values")
+        return choices
+
+    def render(self, form, form_style, context, template_pack=TEMPLATE_PACK, **kwargs):
+        template = self.get_template_name(template_pack)
+
+        bound_field = form[self.field]
+        radio_field = form[self.radio_field]
+        context.update(
+            {
+                "field": bound_field,
+                "radio_field": radio_field,
+                "json_choices": self.json_choices,
+            }
+        )
+
+        return render_to_string(template, context.flatten())
+
+
 class StarRadioSelect(TemplateNameMixin):
     template = "%s/layout/star_radio_select.html"
 

core/forms/templates/gds/layout/additive_snippets.html

@@ -0,0 +1,27 @@
+<!--
+This file is a template for the radios.html snippet to fix the line below which would mark checked when a choice is IN the field
+https://github.com/wildfish/crispy-forms-gds/blob/e5ecb6fc3ac906c80f1bd9f1d4a12e51c7bfa89d/src/crispy_forms_gds/templates/gds/layout/radios.html#L24
+-->
+
+{% load l10n crispy_forms_gds %}
+<fieldset class="govuk-fieldset"{% if field.help_text or field.errors %} aria-describedby="{% if field.help_text %}{{ field.auto_id }}_hint{% endif %}{% for error in field.errors %} {{ field.auto_id }}_{{ forloop.counter }}_error{% endfor %}"{% endif %}>
+
+  {% if field.label %}
+    <legend class="govuk-fieldset__legend{% if legend_size %} {{ legend_size }}{% endif %}">
+      {% if legend_tag %}<{{ legend_tag }} class="govuk-fieldset__heading">{% endif %}
+      {{ field.label|safe }}
+      {% if legend_tag %}</{{ legend_tag }}>{% endif %}
+    </legend>
+  {% endif %}
+
+  {% include 'gds/layout/help_text_and_errors.html' %}
+
+  <div>
+    {% for choice in field.field.choices %}
+        <p>
+            {{ choice.1|unlocalize }} <a href="#" class="govuk-link govuk-link--no-visited-state" data-additive-key="{{ choice.0|unlocalize }}">Add</a>
+        </p>
+    {% endfor %}
+  </div>
+
+</fieldset>

core/forms/templates/gds/layout/additive_textarea.html

@@ -0,0 +1,10 @@
+{% load l10n crispy_forms_gds %}
+<fieldset class="govuk-fieldset" data-module="additive-textarea">
+    <div id="div_id_{{radio_field.html_name}}" class="govuk-form-group">
+        {% include 'gds/layout/additive_snippets.html' with field=radio_field %}
+    </div>
+    <div id="div_id_{{field.html_name}}" class="govuk-form-group">
+        {% include 'gds/layout/multifield.html' with field=field %}
+    </div>
+    {{ json_choices | json_script:field.html_name }}
+</fieldset>