Merge branch 'issues/forcouncils/193-state-of-the-template'

1 files changed, 48 insertions, 26 deletions

diff --git a/web/cobrands/fixmystreet/staff.js b/web/cobrands/fixmystreet/staff.js
index 7f248acb8..50d049217 100644
--- a/web/cobrands/fixmystreet/staff.js
+++ b/web/cobrands/fixmystreet/staff.js
@@ -184,52 +184,71 @@ $.extend(fixmystreet.set_up, {
   },
 
   report_page_inspect: function() {
-    if (!$('form#report_inspect_form').length) {
+    var $inspect_form = $('form#report_inspect_form'),
+        $templates = $('#templates_for_public_update');
+
+    if (!$inspect_form.length) {
         return;
     }
 
     // Focus on form
-    $('html,body').scrollTop($('#report_inspect_form').offset().top);
+    $('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.
-    $('form#report_inspect_form [name=category]').change(function() {
+    $inspect_form.find('[name=category]').change(function() {
         var category = $(this).val(),
             selector = "[data-category='" + category + "']",
+            entry = $inspect_form.find(selector),
             $priorities = $('#problem_priority'),
             $defect_types = $('#defect_type'),
-            defect_types_data = $("form#report_inspect_form " + selector).data('defect-types') || [],
-            priorities_data = $("form#report_inspect_form " + selector).data('priorities') || [],
+            defect_types_data = entry.data('defect-types') || [],
+            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));
-          });
-        }
-
-        $("form#report_inspect_form [data-category]:not(" + selector + ")").addClass("hidden");
-        $("form#report_inspect_form " + selector).removeClass("hidden");
+        $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);
     });
 
     // The inspect form submit button can change depending on the selected state
-    $("#report_inspect_form [name=state]").change(function(){
+    $inspect_form.find("[name=state]").change(function(){
         var state = $(this).val();
-        var $inspect_form = $("#report_inspect_form");
-        var $submit = $inspect_form.find("input[type=submit]");
+        var $submit = $inspect_form.find("input[type=submit][name=save]");
         var value = $submit.attr('data-value-'+state);
-        if (value !== undefined) {
-            $submit.val(value);
-        } else {
-            $submit.val($submit.data('valueOriginal'));
-        }
+        $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");
@@ -265,8 +284,8 @@ $.extend(fixmystreet.set_up, {
             $("#problem_easting").text(bng.lon.toFixed(1));
             $("#problem_latitude").text(latlon.lat.toFixed(6));
             $("#problem_longitude").text(latlon.lon.toFixed(6));
-            $("form#report_inspect_form input[name=latitude]").val(latlon.lat);
-            $("form#report_inspect_form input[name=longitude]").val(latlon.lon);
+            $inspect_form.find("input[name=latitude]").val(latlon.lat);
+            $inspect_form.find("input[name=longitude]").val(latlon.lon);
         });
     }
 
@@ -454,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));