Prefill update field based on problem state

If there’s a response template matching the problem’s new state,
it’s selected and the update field prefilled accordingly.
The exception to this is if the user has manually entered text
into the update field already.

2 files changed, 22 insertions, 3 deletions

diff --git a/templates/web/base/admin/response_templates_select.html b/templates/web/base/admin/response_templates_select.html
index 417be9add..e10460e48 100644
--- a/templates/web/base/admin/response_templates_select.html
+++ b/templates/web/base/admin/response_templates_select.html
@@ -3,7 +3,7 @@
     <select id="templates_for_[% for %]" class="form-control js-template-name" data-for="[% for %]" name="response_template">
         <option value="">[% loc('--Choose a template--') %]</option>
       [% FOR t IN problem.response_templates %]
-        <option value="[% t.text | html %]"> [% t.title | html %] </option>
+        <option value="[% t.text | html %]" data-problem-state="[% t.state | html %]"> [% t.title | html %] </option>
       [% END %]
     </select>
 </div>
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index dd9167185..35a655c86 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -675,13 +675,21 @@ $.extend(fixmystreet.set_up, {
     // The inspect form submit button can change depending on the selected state
     $("#report_inspect_form [name=state]").change(function(){
         var state = $(this).val();
-        var $submit = $("#report_inspect_form input[type=submit]");
+        var $inspect_form = $("#report_inspect_form");
+        var $submit = $inspect_form.find("input[type=submit]");
         var value = $submit.attr('data-value-'+state);
         if (value !== undefined) {
             $submit.val(value);
         } else {
             $submit.val($submit.data('valueOriginal'));
         }
+
+        // We might also have a response template to preselect for the new state
+        var $select = $inspect_form.find("select.js-template-name");
+        var $option = $select.find("option[data-problem-state='"+state+"']").first();
+        if ($option.length) {
+            $select.val($option.val()).change();
+        }
     }).change();
 
     $('.js-toggle-public-update').each(function() {
@@ -1001,9 +1009,20 @@ $.extend(fixmystreet.set_up, {
   },
 
   response_templates: function() {
+      // If the user has manually edited the contents of an update field,
+      // mark it as dirty so it doesn't get clobbered if we select another
+      // response template. If the field is empty, it's not considered dirty.
+      $('.js-template-name').each(function() {
+          var $input = $('#' + $(this).data('for'));
+          $input.change(function() { $(this).data('dirty', !/^\s*$/.test($(this).val())); });
+      });
+
       $('.js-template-name').change(function() {
           var $this = $(this);
-          $('#' + $this.data('for')).val($this.val());
+          var $input = $('#' + $this.data('for'));
+          if (!$input.data('dirty')) {
+              $input.val($this.val());
+          }
       });
   }
 });