Check CSV files match the template

This commit adds a first stab at checking whether a CSV file has the right
data to fill the placeholders.

The UI is very much first bash, but I’d like to get this merged and see how it
feels. The main thing is that we’ve got all the bit in place now to do this
logic.

app/assets/stylesheets/components/table.scss

@@ -36,6 +36,13 @@
 
     }
 
+    &-missing {
+      color: $error-colour;
+      font-weight: bold;
+      border-left: 5px solid $error-colour;
+      padding-left: 7px;
+    }
+
   }
 
 }

app/main/views/sms.py

@@ -14,11 +14,10 @@ from flask import (
     flash,
     abort,
     session,
-    current_app,
-    Markup
+    current_app
 )
 
-from flask_login import login_required
+from flask_login import login_required, current_user
 from werkzeug import secure_filename
 from notifications_python_client.errors import HTTPError
 from utils.template import Template
@@ -72,10 +71,19 @@ def send_sms(service_id, template_id):
        templates_dao.get_service_template_or_404(service_id, template_id)['data']
     )
 
+    example_data = [dict(
+        phone=current_user.mobile_number,
+        **{
+            header: "test {}".format(header) for header in template.placeholders
+        }
+    )]
+
     return render_template(
         'views/send-sms.html',
         template=template,
-        column_headers=['phone number'] + template.placeholders_as_markup,
+        column_headers=['phone'] + template.placeholders_as_markup,
+        placeholders=template.placeholders,
+        example_data=example_data,
         form=form,
         service_id=service_id
     )
@@ -85,10 +93,11 @@ def send_sms(service_id, template_id):
 @login_required
 def get_example_csv(service_id, template_id):
     template = templates_dao.get_service_template_or_404(service_id, template_id)['data']
+    placeholders = list(Template(template).placeholders)
     output = io.StringIO()
-    csv.writer(output).writerow(
-        ['phone number'] + Template(template).list_placeholders
-    )
+    writer = csv.writer(output)
+    writer.writerow(['phone'] + placeholders)
+    writer.writerow([current_user.mobile_number] + ["test {}".format(header) for header in placeholders])
 
     return(output.getvalue(), 200, {'Content-Type': 'text/csv; charset=utf-8'})
 
@@ -116,7 +125,8 @@ def check_sms(service_id, upload_id):
             template=template,
             column_headers=['phone number'] + template.placeholders_as_markup,
             original_file_name=upload_data.get('original_file_name'),
-            service_id=service_id
+            service_id=service_id,
+            form=CsvUploadForm()
         )
     elif request.method == 'POST':
         upload_data = session['upload_data']

app/templates/views/check-sms.html

@@ -2,6 +2,7 @@
 {% from "components/sms-message.html" import sms_message %}
 {% from "components/table.html" import list_table, field %}
 {% from "components/placeholder.html" import placeholder %}
+{% from "components/file-upload.html" import file_upload %}
 {% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
@@ -23,17 +24,40 @@
 
     <div class="grid-row">
       <div class="column-two-thirds">
-        {{ sms_message(
-          template.replaced
-        )}}
+        {% if template.missing_data or template.additional_data %}
+          {{ sms_message(template.formatted_as_markup)}}
+        {% else %}
+          {{ sms_message(template.replaced)}}
+        {% endif %}
       </div>
     </div>
 
-    <form method="POST" enctype="multipart/form-data">
-      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-      <input type="submit" class="button" value="{{ "Send {} text message{}".format(upload_result.valid|count, '' if upload_result.valid|count == 1 else 's') }}" />
-      <a href="{{url_for('.send_sms', service_id=service_id, template_id=template.id)}}" class="page-footer-back-link">Back</a>
-    </form>
+    {% if template.missing_data %}
+      {{ banner(
+        "Add these columns to your CSV file: " + ", ".join(template.missing_data),
+        type="dangerous"
+      ) }}
+    {% elif template.additional_data %}
+      {{ banner(
+        "Remove these columns from your CSV file:" + ", ".join(template.missing_data),
+        type="dangerous"
+      ) }}
+    {% else %}
+      <form method="POST" enctype="multipart/form-data">
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+        <input type="submit" class="button" value="{{ "Send {} text message{}".format(upload_result.valid|count, '' if upload_result.valid|count == 1 else 's') }}" />
+        <a href="{{url_for('.send_sms', service_id=service_id, template_id=template.id)}}" class="page-footer-back-link">Back</a>
+      </form>
+    {% endif %}
+
+    {% if template.missing_data or template.additional_data %}
+      <form method="post" action="{{ url_for('.send_sms', service_id=service_id, template_id=template.id) }}" enctype="multipart/form-data">
+        {{file_upload(form.file, button_text='Choose a CSV file')}}
+        {{ page_footer(
+          "Upload"
+        ) }}
+      </form>
+    {% endif %}
 
     {% call(item) list_table(
       upload_result.valid,
@@ -43,6 +67,17 @@
       {% call field() %}
         {{ item.phone }}
       {% endcall %}
+      {% for column in template.placeholders %}
+        {% if item.get(column) %}
+          {% call field() %}
+            {{ item.get(column) }}
+          {% endcall %}
+        {% else %}
+          {% call field(status='missing') %}
+            missing
+          {% endcall %}
+        {% endif %}
+      {% endfor %}
     {% endcall %}
 
   {% endif %}

app/templates/views/choose-sms-template.html

@@ -17,7 +17,7 @@
       <div class="grid-row">
         {% for template in templates %}
           <div class="column-two-thirds">
-            {{ sms_message(template.content, name=template.name) }}
+            {{ sms_message(template.formatted_as_markup, name=template.name) }}
           </div>
           <div class="column-one-third">
             <div class="sms-message-use-link">

app/templates/views/send-sms.html

@@ -2,7 +2,7 @@
 {% from "components/sms-message.html" import sms_message %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/file-upload.html" import file_upload %}
-{% from "components/table.html" import list_table %}
+{% from "components/table.html" import list_table, field %}
 
 {% block page_title %}
   Send text messages – GOV.UK Notify
@@ -16,7 +16,7 @@
 
     <div class="grid-row">
       <div class="column-two-thirds">
-        {{ sms_message(template.content) }}
+        {{ sms_message(template.formatted_as_markup) }}
       </div>
     </div>
 
@@ -35,13 +35,21 @@
 
     {% if column_headers %}
       {% call(item) list_table(
-        [],
+        example_data,
         caption='Preview',
         field_headings=column_headers,
         field_headings_visible=True,
         caption_visible=False,
         empty_message="Your data here"
       ) %}
+        {% call field() %}
+          {{ item.phone }}
+        {% endcall %}
+        {% for column in template.placeholders %}
+          {% call field() %}
+            {{ item.get(column) }}
+          {% endcall %}
+        {% endfor %}
       {% endcall %}
     {% endif %}
     <p class="table-show-more-link">