Allow filter links to be used in combination

Means you can see, for example emails that have failed.

Means adding:
- logic to generate links which can have a type parameter, a status
  parameter, or both
- a ‘pill’ UI component for seeing which filters you currently have
  applied
- some logic to change the page title based on which filters you have
  applied
This commit is contained in:
Chris Hill-Scott
2016-04-13 12:50:28 +01:00
parent 4da92f170a
commit e282ca2109
6 changed files with 139 additions and 18 deletions

View File

@@ -0,0 +1,16 @@
{% macro pill(
title,
items=[],
current_value=None
) %}
<nav role='navigation' class='pill' aria-labelledby="pill_{{title}}">
<h2 id="pill_{{title}}" class="visuallyhidden">{{title}}</h2>
{% for label, option, link in items %}
{% if current_value == option %}
<span aria-hidden="true">{{ label }}</span>
{% else %}
<a href="{{ link }}">{{ label }}</a>
{% endif %}
{% endfor %}
</nav>
{% endmacro %}

View File

@@ -1,6 +1,8 @@
{% extends "withnav_template.html" %}
{% from "components/table.html" import list_table, field, text_field, link_field, right_aligned_field_heading, hidden_field_heading %}
{% from "components/previous-next-navigation.html" import previous_next_navigation %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/pill.html" import pill %}
{% block page_title %}
Activity GOV.UK Notify
@@ -8,18 +10,58 @@
{% block maincolumn_content %}
<h1 class="heading-large">Activity</h1>
<p>
<a href="{{ url_for(".view_notifications", service_id=current_service.id, page=1) }}">All messages</a>
</p>
<p>
<a href="{{ url_for(".view_notifications", service_id=current_service.id, type="sms", page=1) }}">Text messages</a>&emsp;
<a href="{{ url_for(".view_notifications", service_id=current_service.id, type="email", page=1) }}">Email messages</a>
</p>
<p>
<a href="{{ url_for(".view_notifications", service_id=current_service.id, status=['delivered'], page=1) }}">Successful messages</a>&emsp;
<a href="{{ url_for(".view_notifications", service_id=current_service.id, status=['failed'], page=1) }}">Failed messages</a>
</p>
<h1 class="heading-large">
{%- if (request_args.get('template_type', '') == '') and (request_args.get('status', '') == '') -%}
Activity
{%- else -%}
{% if request_args.get('status') != '' %}
{% for label, option, _ in status_filters %}
{% if request_args.get('status') == option %}
{{ label }}
{% endif %}
{% endfor %}
{% endif %}
{% if request_args.get('template_type') == '' %}
emails and text messages
{% else %}
{% for template_label, template_option, _ in type_filters %}
{% if request_args.get('template_type') == template_option %}
{% if request_args.get('status', '') == '' %}
{{ template_label }}
{% else %}
{{ template_label | lower }}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{%- endif -%}
</h1>
<div class='grid-row bottom-gutter'>
<div class='column-half'>
{{ pill(
'Type',
type_filters,
request_args.get('template_type', '')
) }}
</div>
<div class='column-half'>
{{ pill(
'Status',
status_filters,
request_args.get('status', '')
) }}
</div>
</div>
{% call(item, row_number) list_table(
notifications,