Display photo changes in report moderation updates.

CHANGELOG.md

@@ -45,6 +45,7 @@
         - Add role filter to dashboard interface.
         - Alerts are paginated on user edit page. #4158
         - Restrict flagging users and reports to superusers.
+        - Display photos in report moderation updates, rather than just the image hashes.
     - Development improvements:
         - Default make_css to `web/cobrands` rather than `web`.
         - Ability to pass custom arguments (eg: SSL config) to server when running via Docker

perllib/FixMyStreet/DB/Result/ModerationOriginalData.pm

@@ -139,26 +139,30 @@ sub compare_coords {
 sub compare_photo {
     my ($self, $other) = @_;
 
-    my $old = $self->photo || '';
-    my $new = $other->photo || '';
-    return '' if $old eq $new;
-
-    $old = [ split /,/, $old ];
-    $new = [ split /,/, $new ];
+    my $old = $self->photos;
+    my $new = $other->photos;
 
-    my $diff = Algorithm::Diff->new( $old, $new );
     my (@added, @deleted);
-    while ( $diff->Next ) {
-        next if $diff->Same;
-        push @deleted, $diff->Items(1);
-        push @added, $diff->Items(2);
+
+    my %old_photo_ids_set = map { $_->{id} => 1 } @$old;
+
+    my %new_photo_ids_set;
+    foreach (@$new) {
+        $new_photo_ids_set{ $_->{id} } = 1;
+        push @added, $_ unless $old_photo_ids_set{ $_->{id} };
     }
-    my $s = (join ', ', map {
-            "<del style='background-color:#fcc'>$_</del>";
-        } @deleted) . (join ', ', map {
-            "<ins style='background-color:#cfc'>$_</ins>";
-        } @added);
-    return FixMyStreet::Template::SafeString->new($s);
+    foreach (@$old) {
+        push @deleted, $_ unless $new_photo_ids_set{ $_->{id} };
+    }
+
+    if (!@added && !@deleted) {
+        return "";
+    }
+
+    return {
+       added => \@added,
+       deleted => \@deleted,
+    };
 }
 
 # This is a list of extra keys that could be set on a report after a moderation

templates/web/base/report/update/moderation_diff.html

@@ -1,7 +1,7 @@
 <ul>
     [% IF diff.title %]<li>[% loc('Subject:') %] [% diff.title %][% END %]
     [% IF diff.detail %]<li>[% loc('Details:') %] [% diff.detail %][% END %]
-    [% IF diff.photo %]<li>[% loc('Photo') %]: [% diff.photo %][% END %]
+    [% IF diff.photo %]<li>[% INCLUDE 'report/update/moderation_photo_diff.html' added=diff.photo.added deleted=diff.photo.deleted %][% END %]
     [% IF diff.anonymous %]<li>[% loc('Anonymous:') %] [% diff.anonymous %][% END %]
     [% IF diff.coords %]<li>[% loc('Latitude/Longitude:') %] [% diff.coords %][% END %]
     [% IF diff.category %]<li>[% loc('Category:') %] [% diff.category %][% END %]

templates/web/base/report/update/moderation_photo_diff.html

@@ -0,0 +1,26 @@
+[% IF added %]
+    [% loc('Photos added') %]:
+    <div class="update-img-set">
+    [% FOR photo IN added %]
+        <div class="update-img">
+            <a href="[% photo.url_temp_full %]" rel="fancy">
+                <img alt="[% loc('Photo added to this report in this moderation update') %]" src="[% photo.url_temp %]">
+                <span>zoom</span>
+            </a>
+        </div>
+    [% END %]
+    </div>
+[% END %]
+[% IF deleted %]
+    [% loc('Photos deleted') %]:
+    <div class="update-img-set">
+    [% FOR photo IN deleted %]
+        <div class="update-img">
+            <a href="[% photo.url_temp_full %]" rel="fancy">
+                <img alt="[% loc('Photo deleted from this report in this moderation update') %]" src="[% photo.url_temp %]">
+                <span>zoom</span>
+            </a>
+        </div>
+    [% END %]
+    </div>
+[% END %]