Update templates when category/state changed.

When the category or state changes, the list of available templates
updates (previously it was frozen at what the category was on page
load, and didn't care about the state).

1 files changed, 33 insertions, 10 deletions

diff --git a/web/cobrands/fixmystreet/staff.js b/web/cobrands/fixmystreet/staff.js
index febd306ba..50d049217 100644
--- a/web/cobrands/fixmystreet/staff.js
+++ b/web/cobrands/fixmystreet/staff.js
@@ -184,7 +184,8 @@ $.extend(fixmystreet.set_up, {
   },
 
   report_page_inspect: function() {
-    var $inspect_form = $('form#report_inspect_form');
+    var $inspect_form = $('form#report_inspect_form'),
+        $templates = $('#templates_for_public_update');
 
     if (!$inspect_form.length) {
         return;
@@ -193,6 +194,31 @@ $.extend(fixmystreet.set_up, {
     // Focus on form
     $('html,body').scrollTop($inspect_form.offset().top);
 
+    function updateTemplates(opts) {
+        opts.category = opts.category || $inspect_form.find('[name=category]').val();
+        opts.state = opts.state || $inspect_form.find('[name=state]').val();
+        var selector = "[data-category='" + opts.category + "']";
+        var data = $inspect_form.find(selector).data('templates') || [];
+        data = $.grep(data, function(d, i) {
+            if (!d.state || d.state == opts.state) {
+                return true;
+            }
+            return false;
+        });
+        populateSelect($templates, data, 'templates_format');
+    }
+
+    function populateSelect($select, data, label_formatter) {
+      $select.find('option:gt(0)').remove();
+      $.each(data, function(k,v) {
+        label = window.fixmystreet.utils[label_formatter](v);
+        $opt = $('<option></option>').attr('value', v.id).text(label);
+        if (v.state) {
+            $opt.attr('data-problem-state', v.state);
+        }
+        $select.append($opt);
+      });
+    }
 
     // On the manage/inspect report form, we already have all the extra inputs
     // in the DOM, we just need to hide/show them as appropriate.
@@ -206,20 +232,12 @@ $.extend(fixmystreet.set_up, {
             priorities_data = entry.data('priorities') || [],
             curr_pri = $priorities.val();
 
-        function populateSelect($select, data, label_formatter) {
-          $select.find('option:gt(0)').remove();
-          $.each(data, function(k,v) {
-            label = window.fixmystreet.utils[label_formatter](v);
-            $select.append($('<option></option>')
-            .attr('value', v.id).text(label));
-          });
-        }
-
         $inspect_form.find("[data-category]:not(" + selector + ")").addClass("hidden");
         entry.removeClass("hidden");
 
         populateSelect($priorities, priorities_data, 'priorities_type_format');
         populateSelect($defect_types, defect_types_data, 'defect_type_format');
+        updateTemplates({'category': category});
         $priorities.val(curr_pri);
     });
 
@@ -230,6 +248,8 @@ $.extend(fixmystreet.set_up, {
         var value = $submit.attr('data-value-'+state);
         $submit.val(value || $submit.data('valueOriginal'));
 
+        updateTemplates({'state': state});
+
         // 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();
@@ -453,6 +473,9 @@ $.extend(fixmystreet.utils, {
     priorities_type_format: function(data) {
         return data.name;
     },
+    templates_format: function(data) {
+        return data.name;
+    },
     toggle_shortlist: function(btn, sw, id) {
         btn.attr('class', 'item-list__item__shortlist-' + sw);
         btn.attr('title', btn.data('label-' + sw));