Add a page for each report

It’s useful to get some kind of preview of the report before you
download it.

And if there’s only a few letters in there then you might not even need
to download it at all.

For teams with lots of letters we don’t want the page to load too slowly
so let’s cap the number of displayed items to 50, same as previewing
a spreadsheet.

app/assets/stylesheets/views/dashboard.scss

@@ -62,6 +62,10 @@
     margin-top: -10px;
   }
 
+  &-filename-unlinked {
+    @include core-19;
+  }
+
   &-hint {
     @include core-16;
     display: block;

app/main/views/returned_letters.py

@@ -17,6 +17,24 @@ def returned_letter_summary(service_id):
     )
 
 
+@main.route("/services/<uuid:service_id>/returned-letters/<simple_date:reported_at>", methods=["GET"])
+@user_has_permissions('view_activity')
+def returned_letters(service_id, reported_at):
+
+    page_size = 50
+    returned_letters = service_api_client.get_returned_letters(service_id, reported_at)
+    count_of_returned_letters = len(returned_letters)
+
+    return render_template(
+        'views/returned-letters.html',
+        returned_letters=returned_letters[:page_size],
+        reported_at=reported_at,
+        more_than_one_page=(count_of_returned_letters > page_size),
+        page_size=page_size,
+        count_of_returned_letters=count_of_returned_letters,
+    )
+
+
 @main.route("/services/<uuid:service_id>/returned-letters/<simple_date:reported_at>.csv", methods=["GET"])
 @user_has_permissions('view_activity')
 def returned_letters_report(service_id, reported_at):

app/navigation.py

@@ -243,6 +243,7 @@ class HeaderNavigation(Navigation):
         'resend_email_verification',
         'resume_service',
         'returned_letter_summary',
+        'returned_letters',
         'returned_letters_report',
         'revoke_api_key',
         'robots',
@@ -567,6 +568,7 @@ class MainNavigation(Navigation):
         'resend_email_verification',
         'resume_service',
         'returned_letter_summary',
+        'returned_letters',
         'returned_letters_report',
         'roadmap',
         'robots',
@@ -806,6 +808,7 @@ class CaseworkNavigation(Navigation):
         'resend_email_verification',
         'resume_service',
         'returned_letter_summary',
+        'returned_letters',
         'returned_letters_report',
         'revoke_api_key',
         'roadmap',
@@ -1084,6 +1087,7 @@ class OrgNavigation(Navigation):
         'resend_email_verification',
         'resume_service',
         'returned_letter_summary',
+        'returned_letters',
         'returned_letters_report',
         'revoke_api_key',
         'roadmap',

app/templates/views/returned-letter-summary.html

@@ -20,8 +20,8 @@
         field_headings_visible=False
       ) %}
     {% call field() %}
-      <a download class="govuk_link file-list-filename"
-         href="{{url_for('.returned_letters_report', service_id=current_service.id, reported_at=item.reported_at)}}">{{ item.reported_at | format_date_normal }}</a>
+      <a class="govuk_link file-list-filename"
+         href="{{url_for('.returned_letters', service_id=current_service.id, reported_at=item.reported_at)}}">{{ item.reported_at | format_date_normal }}</a>
        <p class="file-list-hint">
          {{ item.returned_letter_count}} {{ message_count_label(item.returned_letter_count, 'letter', suffix='')}}
        </p>

app/templates/views/returned-letters.html

@@ -0,0 +1,57 @@
+{% from "components/table.html" import list_table, field %}
+{% from "components/message-count-label.html" import message_count_label %}
+{% from "components/page-header.html" import page_header %}
+{% extends "withnav_template.html" %}
+
+{% block service_page_title %}
+  Returned letters for {{ reported_at|format_date_normal }}
+{% endblock %}
+
+{% block maincolumn_content %}
+
+{{ page_header(
+  'Returned letters for {}'.format(reported_at|format_date_normal),
+  back_link=url_for('main.returned_letter_summary', service_id=current_service.id)
+) }}
+
+<p class="bottom-gutter">
+  <a download href="{{ url_for('.returned_letters_report', service_id=current_service.id, reported_at=reported_at) }}" class="heading-small">Download this report</a>
+</p>
+
+<div class="dashboard-table">
+  {% call(item, row_number) list_table(
+      returned_letters,
+      caption="Returned letters for {}".format(today),
+      caption_visible=False,
+      empty_message='If you have returned letter reports they will be listed here',
+      field_headings=['Template name', 'Originally sent'],
+      field_headings_visible=False
+  ) %}
+    {% call field() %}
+      <span class="file-list-filename file-list-filename-unlinked">{{ item.template_name or item.uploaded_letter_file_name }}</span>
+      <span class="file-list-hint">
+        {% if item.client_reference %}
+          Reference {{ item.client_reference }}
+        {% elif item.original_file_name %}
+          Sent from {{ item.original_file_name }}
+        {% else %}
+          No reference provided
+        {% endif %}
+      </span>
+    {% endcall %}
+    {% call field(align='right') %}
+      <span class="align-with-message-body">
+        <span class="status-hint">
+          Originally sent {{ item.created_at|format_date_normal }}
+        </span>
+      </span>
+    {% endcall %}
+  {% endcall %}
+  {% if more_than_one_page %}
+    <p class="table-show-more-link">
+      Only showing the first {{ page_size }} of {{ count_of_returned_letters }} rows
+    </p>
+  {% endif %}
+</div>
+
+{% endblock %}