Add table of recipients

Uses an adapted version of the 'summary table' pattern from Digital Marketplace
frontend toolkit:
http://alphagov.github.io/digitalmarketplace-frontend-toolkit/summary-table.html
This commit is contained in:
Chris Hill-Scott
2015-12-10 17:54:05 +00:00
parent c4df25c8db
commit dbc55e76b0
8 changed files with 87 additions and 12 deletions

View File

@@ -3,5 +3,5 @@
background: $light-blue; background: $light-blue;
color: $white; color: $white;
padding: 0 5px; padding: 0 5px;
box-shadow: inset 0 0 0 2px $panel-colour; border-radius: 3px;
} }

View File

@@ -0,0 +1,7 @@
.table {
&-heading {
text-align: left;
}
}

View File

@@ -30,6 +30,7 @@
@import "components/sms-message"; @import "components/sms-message";
@import "components/placeholder"; @import "components/placeholder";
@import "components/template-picker"; @import "components/template-picker";
@import "components/table";
// Break this uq // TODO: break this up into components
@import "app"; @import "app";

View File

@@ -68,7 +68,13 @@ def sendsms():
def checksms(): def checksms():
return render_template( return render_template(
'views/check-sms.html', 'views/check-sms.html',
recipient_count=159, recipients=[
{'phone': "+44 7815838437", 'registration': 'LC12 BFL', 'date': '25 December 2015'},
{'phone': "+44 7815838437", 'registration': 'LC12 BFL', 'date': '25 December 2015'},
{'phone': "+44 7815838437", 'registration': 'LC12 BFL', 'date': '25 December 2015'},
{'phone': "+44 7815838437", 'registration': 'LC12 BFL', 'date': '25 December 2015'},
{'phone': "+44 7815838437", 'registration': 'LC12 BFL', 'date': '25 December 2015'}
],
message_template=""" message_template="""
Vehicle tax: Your vehicle tax for ((registration number)) expires on ((date)). Vehicle tax: Your vehicle tax for ((registration number)) expires on ((date)).
Tax your vehicle at www.gov.uk/vehicle-tax Tax your vehicle at www.gov.uk/vehicle-tax

View File

@@ -0,0 +1,3 @@
{% macro placeholder(variable) %}
<span class='placeholder'>{{variable}}</span>
{% endmacro %}

View File

@@ -0,0 +1,39 @@
{% macro table(items, caption='', field_headings='', field_headings_visible=True) -%}
<table class="table">
<caption class="heading-medium table-heading">
{{ caption }}
</caption>
<thead class="table-field-headings{% if field_headings_visible %}-visible{% endif %}">
<tr>
{% for field_heading in field_headings %}
<th scope="col" class="table-field-heading{% if loop.first %}-first{% endif %}">
{% if field_headings_visible %}
{{ field_heading }}
{% else %}
<span class="visuallyhidden">{{ field_heading }}</span>
{% endif %}
</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% if items %}
{% for item in items %}
<tr class="table-row">
{{ caller(item) }}
</tr>
{% endfor %}
{% else %}
<p class="table-no-content">
{{ empty_message }}
</p>
{% endif %}
</tbody>
</table>
{%- endmacro %}
{% macro field(first=False, wide=False, action=False) -%}
<td class="table-field{% if first %}-first{% endif %}{% if first and wide %}-wider{% endif %}{% if action %}-with-action{% endif %}">
<span>{{ caller() }}</span>
</td>
{%- endmacro %}

View File

@@ -1,22 +1,37 @@
{% extends "admin_template.html" %} {% extends "admin_template.html" %}
{% from "components/sms-message.html" import sms_message %} {% from "components/sms-message.html" import sms_message %}
{% from "components/table.html" import table, field %}
{% from "components/placeholder.html" import placeholder %}
{% block page_title %} {% block page_title %}
GOV.UK Notify | Send text messages GOV.UK Notify | Send text messages
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="grid-row"> <div class="grid-row">
<div class="column-two-thirds"> <div class="column-two-thirds">
<h1 class="heading-xlarge">Send text messages</h1> <h1 class="heading-xlarge">Send text messages</h1>
{{ sms_message(message_template) }} <h2 class="heading-medium">Check and confirm</h2>
{{ sms_message(message_template) }}
<p> <p>
<a class="button" href="/jobs/job" role="button">Send {{recipient_count}} text messages</a> <a class="button" href="/jobs/job" role="button">Send {{recipients|length}} text messages</a>
</p> </p>
</div>
</div> </div>
</div>
{% call(item) table(
recipients,
caption="Preview of the first 3 recipients",
field_headings=[
'Recipient', placeholder('registration number'), placeholder('date')
]
) %}
{% call field() %}{{item.phone}}{% endcall %}
{% call field() %}{{item.registration}}{% endcall %}
{% call field() %}{{item.date}}{% endcall %}
{% endcall %}
{% endblock %} {% endblock %}

View File

@@ -23,6 +23,10 @@
</div> </div>
{% endfor %} {% endfor %}
<p>
<a href="#">Create a new template</a>
</p>
<h2 class="heading-medium">2. Add recipients</h2> <h2 class="heading-medium">2. Add recipients</h2>
<p> <p>