Add row numbers to tables

When a table is showing the contents of a CSV file, it should look
something like a spreadsheet.

The minimally skeuomorphic way to do this is by adding row numbers.

This commit doesn’t
- make the row numbers monospace (it’s barely noticeable and doesn’t
  reflect what actual spreadsheets do)
- make the first column heading ‘Row’ (again, doesn’t reflect how actual
  spreadsheets work, and takes up more valuable space)

app/assets/stylesheets/components/table.scss

@@ -73,6 +73,10 @@
 
   }
 
+  &-index {
+    width: 15px;
+  }
+
 }
 
 .table-field-heading {

app/templates/components/table.html

@@ -29,7 +29,7 @@
   {% call mapping_table(caption, field_headings, field_headings_visible, caption_visible) %}
     {% for item in items %}
       {% call row() %}
-        {{ parent_caller(item) }}
+        {{ parent_caller(item, loop.index + 1) }}
       {% endcall %}
     {% endfor %}
     {% if not items %}
@@ -55,6 +55,12 @@
   </td>
 {%- endmacro %}
 
+{% macro index_field(text) -%}
+  <td class="table-field-index">
+    <span>{{ text }}</span>
+  </td>
+{%- endmacro %}
+
 {% macro text_field(text) -%}
   {% call field() %}
     {{ text }}

app/templates/partials/jobs/notifications.html

@@ -1,6 +1,6 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading %}
 
-{% call(item) list_table(
+{% call(item, row_number) list_table(
   notifications,
   caption=uploaded_file_name,
   caption_visible=False,

app/templates/views/api-keys.html

@@ -29,7 +29,7 @@
     {{ current_service.id }}
   </p>
 
-  {% call(item) list_table(
+  {% call(item, row_number) list_table(
     keys,
     empty_message="You haven’t created any API keys yet",
     caption="API keys",

app/templates/views/check.html

@@ -2,7 +2,7 @@
 {% from "components/banner.html" import banner_wrapper %}
 {% from "components/email-message.html" import email_message %}
 {% from "components/sms-message.html" import sms_message %}
-{% from "components/table.html" import list_table, field, text_field, hidden_field_heading %}
+{% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %}
 {% from "components/placeholder.html" import placeholder %}
 {% from "components/file-upload.html" import file_upload %}
 {% from "components/page-footer.html" import page_footer %}
@@ -71,14 +71,12 @@
     </form>
   {% endif %}
 
-  {% call(item) list_table(
+  {% call(item, row_number) list_table(
     recipients.initial_annotated_rows_with_errors if rows_have_errors else recipients.initial_annotated_rows,
     caption=original_file_name,
     field_headings=['1'] + recipients.column_headers_with_placeholders_highlighted
   ) %}
-    {% call field() %}
+    {{ index_field(item.index + 2) }}
-      {{ item.index + 2 }}
-    {% endcall %}
     {% for column in recipients.column_headers %}
       {% if item[column].error %}
         {% call field() %}

app/templates/views/dashboard/jobs.html

@@ -1,6 +1,6 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, hidden_field_heading %}
 
-{% call(item) list_table(
+{% call(item, row_number) list_table(
   jobs,
   caption="Recent batch jobs",
   empty_message='You haven’t sent any batch messages yet',

app/templates/views/dashboard/template-statistics.html

@@ -1,5 +1,5 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading %}
-{% call(item) list_table(
+{% call(item, row_number) list_table(
   template_statistics,
   caption="Recent templates used",
   empty_message='You haven’t sent any batch messages yet',

app/templates/views/jobs/jobs.html

@@ -19,7 +19,7 @@
       <a href="{{ url_for(".view_notifications", service_id=current_service.id, job_id=job_id, status=['sent', 'delivered'], page=1) }}">Successful messages</a>&emsp;
       <a href="{{ url_for(".view_notifications", service_id=current_service.id, job_id=job_id, status=['failed', 'complaint', 'bounce'], page=1) }}">Failed messages</a>
     </p>
-    {% call(item) list_table(
+    {% call(item, row_number) list_table(
       jobs,
       caption="Recent activity",
       caption_visible=False,

app/templates/views/manage-users.html

@@ -29,7 +29,7 @@ Manage users – GOV.UK Notify
     {% endif %}
   </div>
 
-  {% call(item) list_table(
+  {% call(item, row_number) list_table(
     users, caption='Active', **table_options
   ) %}
     {% call field() %}
@@ -48,7 +48,7 @@ Manage users – GOV.UK Notify
   {% endcall %}
 
   {% if invited_users %}
-    {% call(item) list_table(
+    {% call(item, row_number) list_table(
       invited_users, caption='Invited', **table_options
     ) %}
       {% call field() %}

app/templates/views/notifications.html

@@ -20,7 +20,7 @@
       <a href="{{ url_for(".view_notifications", service_id=current_service.id, status=['sent', 'delivered'], page=1) }}">Successful messages</a>&emsp;
       <a href="{{ url_for(".view_notifications", service_id=current_service.id, status=['failed', 'complaint', 'bounce'], page=1) }}">Failed messages</a>
     </p>
-    {% call(item) list_table(
+    {% call(item, row_number) list_table(
       notifications,
       caption="Recent activity",
       caption_visible=False,

app/templates/views/send.html

@@ -3,7 +3,7 @@
 {% from "components/email-message.html" import email_message %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/file-upload.html" import file_upload %}
-{% from "components/table.html" import list_table, text_field %}
+{% from "components/table.html" import list_table, text_field, index_field, index_field_heading %}
 
 {% block page_title %}
   Send text messages – GOV.UK Notify
@@ -39,12 +39,13 @@
     in your file, like this:
   </p>
 
-  {% call(item) list_table(
+  {% call(item, row_number) list_table(
     example,
     caption="Example",
     caption_visible=False,
-    field_headings=[recipient_column] + template.placeholders|list
+    field_headings=['1'] + [recipient_column] + template.placeholders|list
   ) %}
+    {{ index_field(row_number) }}
     {% for column in item %}
       {{ text_field(column) }}
     {% endfor %}

app/templates/views/styleguide.html

@@ -178,7 +178,7 @@
         {% endcall %}
       {% endcall %}
 
-      {% call(item) list_table(
+      {% call(item, row_number) list_table(
         [
           {
             'file': 'dispatch_20151114.csv', 'status': 'Queued'
@@ -206,7 +206,7 @@
         {% endcall %}
       {% endcall %}
 
-      {% call(item) list_table(
+      {% call(item, row_number) list_table(
         [],
         caption='Jobs',
         field_headings=['Job', 'Time'],

app/templates/views/user-profile.html

@@ -9,7 +9,7 @@
 
   <h1 class="heading-large">Your profile</h1>
 
-  {% call(item) list_table(
+  {% call(item, row_number) list_table(
     [
       {'label': 'Name', 'value': current_user.name, 'url': url_for('.user_profile_name')},
       {'label': 'Email address', 'value': current_user.email_address, 'url': url_for('.user_profile_email')},