Store and display selected duplicate report

6 files changed, 46 insertions, 9 deletions

diff --git a/perllib/FixMyStreet/App/Controller/Report.pm b/perllib/FixMyStreet/App/Controller/Report.pm
index 13967601b..a9d171d33 100644
--- a/perllib/FixMyStreet/App/Controller/Report.pm
+++ b/perllib/FixMyStreet/App/Controller/Report.pm
@@ -320,7 +320,7 @@ sub inspect : Private {
         my $reputation_change = 0;
 
         if ($permissions->{report_inspect}) {
-            foreach (qw/detailed_information traffic_information/) {
+            foreach (qw/detailed_information traffic_information duplicate_of/) {
                 $problem->set_extra_metadata( $_ => $c->get_param($_) );
             }
 
diff --git a/perllib/FixMyStreet/DB/Result/Problem.pm b/perllib/FixMyStreet/DB/Result/Problem.pm
index ab6f20050..c63e6c881 100644
--- a/perllib/FixMyStreet/DB/Result/Problem.pm
+++ b/perllib/FixMyStreet/DB/Result/Problem.pm
@@ -1032,4 +1032,15 @@ has shortlisted_user => (
     },
 );
 
+has duplicate_of => (
+    is => 'ro',
+    lazy => 1,
+    default => sub {
+        my $self = shift;
+        my $duplicate_of = $self->get_extra_metadata("duplicate_of");
+        return unless defined $duplicate_of;
+        return $self->result_source->schema->resultset('Problem')->search({ id => $duplicate_of })->first;
+    },
+);
+
 1;
diff --git a/templates/web/base/report/_inspect.html b/templates/web/base/report/_inspect.html
index a09d75d40..d5df3d42e 100644
--- a/templates/web/base/report/_inspect.html
+++ b/templates/web/base/report/_inspect.html
@@ -10,6 +10,7 @@
         <p>
           <strong>[% loc('Report ID:') %]</strong>
           [% problem.id %]
+          <input type="hidden" name="report_id" value="[% problem.id | html %]">
         </p>
         <p>
           [% SET local_coords = problem.local_coords; %]
@@ -76,10 +77,14 @@
             [% END %]
           </select>
         </p>
-        <div id="js-duplicate-reports" class="hidden">
-          <input type="hidden" name="duplicate_of" value="[% problem.get_extra_metadata('duplicate_of') | html %]">
+        <div id="js-duplicate-reports" class="[% "hidden" UNLESS problem.duplicate_of %]">
+          <input type="hidden" name="duplicate_of" value="[% problem.duplicate_of.id %]">
           Which report is it a duplicate of?
-          <ul></ul>
+          <ul>
+            [% IF problem.duplicate_of %]
+              [% INCLUDE 'report/_item.html' no_fixed = 1 item_extra_class = 'item-list__item--with-pin item-list--reports__item--selected' problem = problem.duplicate_of %]
+            [% END %]
+          </ul>
         </div>
         [% END %]
 
diff --git a/templates/web/base/report/_item.html b/templates/web/base/report/_item.html
index 5894c5d81..0f42b00ce 100644
--- a/templates/web/base/report/_item.html
+++ b/templates/web/base/report/_item.html
@@ -1,4 +1,4 @@
-<li class="item-list__item item-list--reports__item [% item_extra_class %]">
+<li class="item-list__item item-list--reports__item [% item_extra_class %]" data-report-id="[% problem.id | html %]">
 <a href="[% c.cobrand.base_url_for_report( problem ) %][% problem.url %]">
     [% IF problem.photo %]
         <img class="img" height="60" width="90" src="[% problem.photos.first.url_fp %]" alt="">
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index a7e6f28f0..ac7ddacaf 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -414,12 +414,25 @@ $.extend(fixmystreet.set_up, {
         args.latitude = $('input[name="latitude"]').val();
         args.longitude = $('input[name="longitude"]').val();
 
-        console.log(args);
-
         $.getJSON('/ajax', args, function(data) {
-            var $reports = $(data.current);
+            var report_id = $("#report_inspect_form [name=report_id]").val();
+            var duplicate_of = $("#report_inspect_form [name=duplicate_of]").val();
+            var $reports = $(data.current)
+                            .filter("li")
+                            .not("[data-report-id="+report_id+"]")
+                            .slice(0, 5);
+            $reports.filter("[data-report-id="+duplicate_of+"]").addClass("item-list--reports__item--selected");
+
             $("#js-duplicate-reports").removeClass("hidden");
-            $reports.slice(0, 5).appendTo($("#js-duplicate-reports ul").empty());
+            $("#js-duplicate-reports ul").empty().prepend($reports);
+
+            $reports.find("a").click(function() {
+                var report_id = $(this).closest("li").data('reportId');
+                $("#report_inspect_form [name=duplicate_of]").val(report_id);
+                $("#js-duplicate-reports ul li").removeClass("item-list--reports__item--selected");
+                $(this).closest("li").addClass("item-list--reports__item--selected");
+                return false;
+            });
         });
     });
   },
diff --git a/web/cobrands/sass/_report_list_pins.scss b/web/cobrands/sass/_report_list_pins.scss
index 74f0a5f90..eaeefbc10 100644
--- a/web/cobrands/sass/_report_list_pins.scss
+++ b/web/cobrands/sass/_report_list_pins.scss
@@ -50,6 +50,14 @@
     color: #777;
   }
 }
+.item-list--reports__item--selected {
+  background: $base_bg;
+
+  a, a:hover, a:focus {
+    background-color: transparent;
+  }
+}
+
 
 .item-list__item--empty {
   background: none;