Add messages to the current job’s history

This mocks out a data structure for a job’s messages, and renders this data:
- on the notification page, as a table, which links through to…
- …the page for an indidivual message

app/assets/stylesheets/components/sms-message.scss

@@ -28,6 +28,7 @@
   }
 
   &-wrapper {
+    width: 100%;
     display: inline-block;
     box-sizing: border-box;
     position: relative;

app/assets/stylesheets/components/table.scss

@@ -1,7 +1,43 @@
-.table {
+.table-heading {
+  text-align: left;
+}
+
+%table-field,
+.table-field {
+
+  &:last-child {
+    padding-right: 0;
+  }
+
+  &-status {
+
+    &-default {
+      color: $secondary-text-colour;
+    }
+
+    &-error {
+      color: $error-colour;
+      font-weight: bold;
+    }
 
-  &-heading {
-    text-align: left;
   }
 
 }
+
+.table-field-heading {
+
+  &:last-child {
+    padding-right: 0;
+  }
+
+  &-right-aligned {
+    display: block;
+    text-align: right;
+  }
+
+}
+
+.table-field-right-aligned {
+  @extend .table-field;
+  text-align: right;
+}

app/main/__init__.py

@@ -3,4 +3,4 @@ from flask import Blueprint
 main = Blueprint('main', __name__)
 
 
-from app.main.views import index, sign_in, register, two_factor, verify, sms, add_service, code_not_received
+from app.main.views import index, sign_in, register, two_factor, verify, sms, add_service, code_not_received, jobs

app/main/views/index.py

@@ -45,21 +45,6 @@ def checkemail():
     return render_template('views/check-email.html')
 
 
-@main.route("/jobs")
-def showjobs():
-    return render_template('views/jobs.html')
-
-
-@main.route("/jobs/job")
-def showjob():
-    return render_template('views/job.html')
-
-
-@main.route("/jobs/job/notification")
-def shownotification():
-    return render_template('views/notification.html')
-
-
 @main.route("/forgot-password")
 def forgotpassword():
     return render_template('views/forgot-password.html')

app/main/views/jobs.py

@@ -0,0 +1,70 @@
+from flask import render_template
+
+from app.main import main
+
+
+messages = [
+    {
+        'phone': '+44 7700 900 579',
+        'message': 'Vehicle tax: Your vehicle tax for LV75 TDG expires…',
+        'status': 'Delivered',
+        'time': '13:42',
+        'id': '0'
+    },
+    {
+        'phone': '+44 7700 900 306',
+        'message': 'Vehicle tax: Your vehicle tax for PL53 GBD expires…',
+        'status': 'Delivered',
+        'time': '13:42',
+        'id': '1'
+    },
+    {
+        'phone': '+44 7700 900 454',
+        'message': 'Vehicle tax: Your vehicle tax for LV75 TDG expires…',
+        'status': 'Delivered',
+        'time': '13:42',
+        'id': '2'
+    },
+    {
+        'phone': '+44 7700 900 522',
+        'message': 'Vehicle tax: Your vehicle tax for RE67 PLM expires…',
+        'status': 'Failed',
+        'time': '13:42',
+        'id': '3'
+    }
+]
+
+
+@main.route("/jobs")
+def showjobs():
+    return render_template('views/jobs.html')
+
+
+@main.route("/jobs/job/")
+def showjob():
+    return render_template(
+        'views/job.html',
+        messages=messages,
+        counts={
+            'total': len(messages),
+            'delivered': len([
+                message for message in messages if message['status'] == 'Delivered'
+            ]),
+            'failed': len([
+                message for message in messages if message['status'] == 'Failed'
+            ])
+        },
+        cost='£0.00',
+        uploaded_file_name='contact-demo.csv',
+        template_used='Reminder template'
+    )
+
+
+@main.route("/jobs/job/notification/<string:notification_id>")
+def shownotification(notification_id):
+    return render_template(
+        'views/notification.html',
+        message=[
+            message for message in messages if message['id'] == notification_id
+        ][0]
+    )

app/templates/components/table.html

@@ -32,8 +32,12 @@
   </table>
 {%- endmacro %}
 
-{% macro field(first=False, wide=False, action=False) -%}
+{% macro field(align='left', status='') -%}
-  <td class="table-field{% if first %}-first{% endif %}{% if first and wide %}-wider{% endif %}{% if action %}-with-action{% endif %}">
+  <td class="table-field{% if align == 'right' %}-right-aligned{% endif %}">
-    <span>{{ caller() }}</span>
+    <span class="{{ 'table-field-status-' + status if status }}">{{ caller() }}</span>
   </td>
 {%- endmacro %}
+
+{% macro right_aligned_field_heading(text) %}
+  <span class="table-field-heading-right-aligned">{{ text }}</span>
+{%- endmacro %}

app/templates/views/job.html

@@ -1,4 +1,5 @@
 {% extends "withnav_template.html" %}
+{% from "components/table.html" import table, field, right_aligned_field_heading %}
 
 {% block page_title %}
 GOV.UK Notify | Notifications activity
@@ -6,14 +7,44 @@ GOV.UK Notify | Notifications activity
 
 {% block maincolumn_content %}
 
-		<h1 class="heading-xlarge">Notifications for a specific job</h1>
+    <h1 class="heading-large">
+			{{ uploaded_file_name }} sent with {{ template_used }}
+		</h1>
 
-		<p>This page will be where we list the notifications for a specific job.</p>
+		<p>
+	    {{ counts.total }} text messages
+		</p>
 
-  	<ul>
+		<p>
-  		<li><a href="/jobs/job/notification">view a specific notification</a></li>
+	    {{ counts.failed }} failed deliveries
-		<li><a href="/jobs">view all the activity for this service</a></li>
+		</p>
-  	</ul>
 
+		<p>
+	    {{ cost }} total cost
+		</p>
+
+    {% call(item) table(
+      messages,
+      caption='',
+      caption_visible=False,
+      field_headings=[
+        'To',
+        'Message',
+        right_aligned_field_heading('Delivery status')
+      ]
+    ) %}
+      {% call field() %}
+        <a href="{{ url_for('.shownotification', notification_id=item.id) }}">{{item.phone}}</a>
+      {% endcall %}
+      {% call field() %}
+        <a href="{{ url_for('.shownotification', notification_id=item.id) }}">{{item.message}}</a>
+      {% endcall %}
+      {% call field(
+        align='right',
+        status='error' if item.status == 'Failed' else 'default'
+      ) %}
+				{{ item.status }}&emsp;{{ item.time }}
+			{% endcall %}
+    {% endcall %}
 
 {% endblock %}

app/templates/views/notification.html

@@ -1,4 +1,5 @@
 {% extends "withnav_template.html" %}
+{% from "components/sms-message.html" import sms_message %}
 
 {% block page_title %}
 GOV.UK Notify | Notifications activity
@@ -7,12 +8,14 @@ GOV.UK Notify | Notifications activity
 {% block maincolumn_content %}
 
 
-		<h1 class="heading-xlarge">A specific notification</h1>
+		<h1 class="heading-large">
+			Text message to {{ message.phone }}
+		</h1>
 
-		<p>This page will be where we show what happened for a specific notification.</p>
+		{{ sms_message(message.message) }}
 
   	<p>
-  	<a href="/jobs/job">View other notifications in this job</a>
+	  	<a href="{{ url_for('.showjob') }}">View other notifications in this job</a>
   	</p>