Files
notifications-admin/app/templates/views/check/column-errors.html
Chris Hill-Scott 74fb30ce5f Add GOV.UK Design System style back links
The Design System has standardised on back links being at the top of the
page, decorated with a small text-coloured arrow.

I think this makes more sense than having them at the bottom, because it
suggests, in some way, being able to go back before commiting to any of
the forms on the page. Whereas the things at the bottom of the page
should be performing actions on what’s in the page.

The reason for making this change now is that it de-clutters the area
around the green buttons. This was presenting a design challenge where
multiple levels of interaction were happening in the same form. Moving
these back links to the top of the page should mean that, in these
complicated forms, there’s one fewer thing to compete for the user’s
attention.

I’ve componentised this into a `page_header` macro so that the change is
easier to roll out and maintain.
2019-04-30 15:29:39 +01:00

225 lines
7.8 KiB
HTML

{% extends "withnav_template.html" %}
{% from "components/banner.html" import banner_wrapper %}
{% from "components/radios.html" import radio_select %}
{% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %}
{% from "components/file-upload.html" import file_upload %}
{% from "components/page-header.html" import govuk_back_link %}
{% from "components/message-count-label.html" import message_count_label %}
{% set file_contents_header_id = 'file-preview' %}
{% macro skip_to_file_contents() %}
<p class="visually-hidden">
<a href="#{{ file_contents_header_id }}">Skip to file contents</a>
</p>
{% endmacro %}
{% block service_page_title %}
Error
{% endblock %}
{% block maincolumn_content %}
{{ govuk_back_link(back_link) }}
<div class="bottom-gutter-1-2">
{% call banner_wrapper(type='dangerous') %}
{% if recipients.too_many_rows %}
<h1 class='banner-title' data-module="track-error" data-error-type="Too many rows" data-error-label="{{ upload_id }}">
Your file has too many rows
</h1>
<p>
Notify can process up to
{{ "{:,}".format(recipients.max_rows) }} rows at once. Your
file has {{ "{:,}".format(recipients|length) }} rows.
</p>
{% elif not count_of_recipients %}
<h1 class='banner-title' data-module="track-error" data-error-type="No rows" data-error-label="{{ upload_id }}">
Your file is missing some rows
</h1>
{% if recipients.missing_column_headers %}
<p>
It needs at least one row of data, and {{ recipients.missing_column_headers | sort() | formatted_list(
prefix='a column called',
prefix_plural='columns called'
) }}.
</p>
{% else %}
<p>
It needs at least one row of data.
</p>
{% endif %}
{% elif not recipients.has_recipient_columns %}
<h1 class='banner-title' data-module="track-error" data-error-type="Missing recipient columns" data-error-label="{{ upload_id }}">
Your file needs {{ (
recipients.missing_column_headers
if template.template_type == 'letter' else required_recipient_columns
) | formatted_list(
prefix='a column called',
prefix_plural='columns called'
) }}
</h1>
<p>
Right now it has {{ recipients.column_headers | formatted_list(
prefix='one column, called ',
prefix_plural='columns called '
) }}.
</p>
{% elif recipients.duplicate_recipient_column_headers %}
<h1 class='banner-title' data-module="track-error" data-error-type="Duplicate recipient columns" data-error-label="{{ upload_id }}">
Your file has more than one column called {{ (
recipients.duplicate_recipient_column_headers
) | formatted_list(
conjunction='or',
prefix='',
prefix_plural=''
) }}
</h1>
<p>
Delete or rename one of these columns and try again.
</p>
{% elif recipients.missing_column_headers %}
<h1 class='banner-title' data-module="track-error" data-error-type="Missing placeholder columns" data-error-label="{{ upload_id }}">
The columns in your file need to match the double brackets in
your template
</h1>
<p>
Your file is missing {{ recipients.missing_column_headers | formatted_list(
conjunction='and',
prefix='a column called ',
prefix_plural='columns called '
) }}.
</p>
{% elif sent_previously %}
{% include "partials/check/sent-previously.html" %}
{% elif not recipients.allowed_to_send_to %}
{% with
count_of_recipients=count_of_recipients,
template_type_label=recipients.recipient_column_headers[0]
%}
{% include "partials/check/not-allowed-to-send-to.html" %}
{% endwith %}
{% elif trying_to_send_letters_in_trial_mode %}
<div class="bottom-gutter">
{% with
count_of_recipients=count_of_recipients
%}
{% include "partials/check/trying-to-send-letters-in-trial-mode.html" %}
{% endwith %}
</div>
{% elif recipients.more_rows_than_can_send %}
{% include "partials/check/too-many-messages.html" %}
{% endif %}
{{ skip_to_file_contents() }}
{% endcall %}
</div>
<div class="js-stick-at-top-when-scrolling">
<div class="form-group">
{% if not request.args.from_test %}
{{ file_upload(
form.file,
action=url_for('.send_messages', service_id=current_service.id, template_id=template.id),
button_text='Re-upload your file'
) }}
{% endif %}
</div>
<a href="#content" class="back-to-top-link">Back to top</a>
</div>
{% if not request.args.from_test %}
{% set column_headers = recipients._raw_column_headers if recipients.duplicate_recipient_column_headers else recipients.column_headers %}
<h2 class="heading-medium" id="{{ file_contents_header_id }}">{{ original_file_name }}</h2>
<div class="fullscreen-content" data-module="fullscreen-table">
{% call(item, row_number) list_table(
recipients.displayed_rows,
caption=original_file_name,
caption_visible=False,
field_headings=[
'<span class="visually-hidden">Row in file</span><span aria-hidden="true">1</span>'|safe
] + column_headers
) %}
{% call index_field() %}
<span>
{% set displayed_index = item.index + 2 %}
{% if (
trying_to_send_letters_in_trial_mode and
(not errors or recipients.more_rows_than_can_send) and
displayed_index != preview_row
) %}
<a href="{{ url_for('.check_messages', service_id=current_service.id, template_id=template.id, upload_id=upload_id, row_index=displayed_index, original_file_name=original_file_name) }}">{{ displayed_index }}</a>
{% else %}
{{ displayed_index }}
{% endif %}
</span>
{% endcall %}
{% for column in column_headers %}
{% if item[column].error and not recipients.missing_column_headers %}
{% call field() %}
<span>
<span class="table-field-error-label">{{ item[column].error }}</span>
{{ item[column].data if item[column].data != None }}
</span>
{% endcall %}
{% elif item[column].ignore %}
{{ text_field(item[column].data or '', status='default') }}
{% else %}
{{ text_field(item[column].data or '') }}
{% endif %}
{% endfor %}
{% if item[None].data %}
{% for column in item[None].data %}
{{ text_field(column, status='default') }}
{% endfor %}
{% endif %}
{% endcall %}
{% endif %}
</div>
{% if recipients.too_many_rows %}
<p class="table-show-more-link">
Only showing the first {{ count_of_displayed_recipients }} rows
</p>
{% elif count_of_displayed_recipients < count_of_recipients %}
<p class="table-show-more-link">
{% if row_errors and not recipients.missing_column_headers %}
Only showing the first {{ count_of_displayed_recipients }} rows with errors
{% else %}
Only showing the first {{ count_of_displayed_recipients }} rows
{% endif %}
</p>
{% elif row_errors and not recipients.missing_column_headers %}
<p class="table-show-more-link">
Only showing rows with errors
</p>
{% endif %}
<h2 class="heading-medium">Preview of {{ template.name }}</h2>
{{ template|string }}
{% endblock %}