darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-13 23:14:32 -05:00
Code Issues Packages Projects Releases Wiki Activity
Files
a088409dfeba315d3719e9e6d147ddf96cd75b0f
notifications-admin/app/templates/views/check/row-errors.html

131 lines
4.7 KiB
HTML
Raw Normal View History

Change tables to scroll in-page, not full screen There were three problems with showing tables fullscreen: - it was over-optimised for very big spreadsheets, whereas most users will only have a few columns in their files - it was jarring to go from full screen and back to the normal layout - it was a bit change for existing users, where we prefer incremental changes that make things better without disrupting people’s work (where possible) So this commit changes the big table to scroll horizontally in the page, not take up the full width of the page. From the fullscreen table it keeps: - the shimming method to keep the horizontal scrollbar at the bottom of the screen at all times It introduces some more refinements to make it nicer to use: - fixing the first column, so you always know what row you’re on - adding shadows indicate where there is content that’s scrolled outside the edges of the container
2017-12-14 11:58:40 +00:00
{% extends "withnav_template.html" %}
Give the user better error messages for CSV files Makes uses of the additions to utils in https://github.com/alphagov/notifications-utils/pull/9 This commit strips out a lot of the complex stuff that the views and templates in this app were doing. There is now a cleaner separation of concerns: - utils returns the number and type of errors in the csv - `get_errors_for_csv` helper in this app maps the number and type of errors onto human-friendly error messages - the view and template just doing the glueing-together of all the pieces This is (hopefully) easier to understand, definitely makes the component parts easier to test in isolation, and makes it easier to give more specific error messages.
2016-03-07 18:47:05 +00:00
{% from "components/banner.html" import banner_wrapper %}
Add a component for picking the time to send a job Users need to pick a time in the next 24hrs, or send a file immediately. Rationale for this is a bit lost in time-before-holiday, but generally: ‘Now’ and ‘later’ as the inital choices makes it really clear what this feature is about conceptually. The choice of times is absolute, eg ‘1pm’ not ‘in 3 hours’
2016-08-07 09:17:49 +01:00
{% from "components/radios.html" import radio_select %}
Convert list table to mapping table A list table takes a list of input, and assumes one row of output. In order to show errors that span multiple rows we need to output two rows for one item of input. The list table inherits from the mapping table; using the mapping table directly gives us the flexibility we need.
2020-04-11 11:07:20 +01:00
{% from "components/table.html" import mapping_table, row, field, text_field, index_field, hidden_field_heading %}
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.
2016-02-17 14:20:55 +00:00
{% from "components/file-upload.html" import file_upload %}
Committing before merge
2023-08-30 11:07:38 -04:00
{% from "components/components/back-link/macro.njk" import usaBackLink %}
Change order of errors for bad CSV files This commit rearranges the CSV errors (again) to make them geared towards teaching you how to match placeholders to the column headers. So the order of errors now is: 1. No phone number/email column 2. Column headers don’t match placeholders 3. Missing or bad data 4. Trial mode 5. Daily limit reached This depends on: - [x] https://github.com/alphagov/notifications-utils/pull/39 for 1.
2016-06-03 13:52:15 +01:00
Change tables to scroll in-page, not full screen There were three problems with showing tables fullscreen: - it was over-optimised for very big spreadsheets, whereas most users will only have a few columns in their files - it was jarring to go from full screen and back to the normal layout - it was a bit change for existing users, where we prefer incremental changes that make things better without disrupting people’s work (where possible) So this commit changes the big table to scroll horizontally in the page, not take up the full width of the page. From the fullscreen table it keeps: - the shimming method to keep the horizontal scrollbar at the bottom of the screen at all times It introduces some more refinements to make it nicer to use: - fixing the first column, so you always know what row you’re on - adding shadows indicate where there is content that’s scrolled outside the edges of the container
2017-12-14 11:58:40 +00:00
{% block service_page_title %}
Remove irrelevant stuff from error check pages If you have errors in your file then there’s stuff you’re not going to see on the page. So this doesn’t need to be in the Jinja templates that are only used when there are errors. Basically the conditional stuff is moving up to the level above these templates.
2017-07-20 09:10:23 +01:00
Error
Create shell page for checking text messages before sending
2015-11-30 14:20:17 +00:00
{% endblock %}
Move back link above main content for straightforward cases This moves the back link to be above the `<main>` tag by making use of the new `backLink` block. This doesn't change the pages which are using a back link as part of the `page_header` macro yet.
2021-07-30 14:42:54 +01:00
{% block backLink %}
Committing before merge
2023-08-30 11:07:38 -04:00
{{ usaBackLink({ "href": back_link }) }}
Move back link above main content for straightforward cases This moves the back link to be above the `<main>` tag by making use of the new `backLink` block. This doesn't change the pages which are using a back link as part of the `page_header` macro yet.
2021-07-30 14:42:54 +01:00
{% endblock %}
{% block maincolumn_content %}
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-29 11:44:05 +01:00
Fixing styling issues on the send message flow
2023-09-15 12:26:31 -04:00
<div class="">
Remove irrelevant stuff from error check pages If you have errors in your file then there’s stuff you’re not going to see on the page. So this doesn’t need to be in the Jinja templates that are only used when there are errors. Basically the conditional stuff is moving up to the level above these templates.
2017-07-20 09:10:23 +01:00
{% call banner_wrapper(type='dangerous') %}
{% if row_errors|length == 1 %}
Fixing styling issues on the send message flow
2023-09-15 12:26:31 -04:00
<div class="usa-alert usa-alert--error" role="alert">
<div class="usa-alert__body">
<h1 class="usa-alert__heading">There’s a problem with {{ original_file_name }}</h1>
<p class="usa-alert__text">
You need to {{ row_errors[0] }}.
</p>
</div>
</div>
Remove irrelevant stuff from error check pages If you have errors in your file then there’s stuff you’re not going to see on the page. So this doesn’t need to be in the Jinja templates that are only used when there are errors. Basically the conditional stuff is moving up to the level above these templates.
2017-07-20 09:10:23 +01:00
{% else %}
Fixing styling issues on the send message flow
2023-09-15 12:26:31 -04:00
<div class="usa-alert usa-alert--error" role="alert">
<div class="usa-alert__body">
<h1 class="usa-alert__heading">There’s a problem with {{ original_file_name }}</h1>
<p class="usa-alert__text">
You need to:
<ul class="list-bullet">
{% for error in row_errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</p>
</div>
</div>
Remove irrelevant stuff from error check pages If you have errors in your file then there’s stuff you’re not going to see on the page. So this doesn’t need to be in the Jinja templates that are only used when there are errors. Basically the conditional stuff is moving up to the level above these templates.
2017-07-20 09:10:23 +01:00
{% endif %}
{% endcall %}
</div>
First slice of csv upload of phone numbers for sending messages. At the moment the file contents are not persisted by checked in memory. The first and last three records are show if all are valid. If there are invalid rows, they are reported and the user is prompted to go back and sort out upload file. The storing of upload result (i.e. validation of file) in session will be removed in next story which is about persisting of file for later processing.
2016-01-11 15:00:51 +00:00
Change tables to scroll in-page, not full screen There were three problems with showing tables fullscreen: - it was over-optimised for very big spreadsheets, whereas most users will only have a few columns in their files - it was jarring to go from full screen and back to the normal layout - it was a bit change for existing users, where we prefer incremental changes that make things better without disrupting people’s work (where possible) So this commit changes the big table to scroll horizontally in the page, not take up the full width of the page. From the fullscreen table it keeps: - the shimming method to keep the horizontal scrollbar at the bottom of the screen at all times It introduces some more refinements to make it nicer to use: - fixing the first column, so you always know what row you’re on - adding shadows indicate where there is content that’s scrolled outside the edges of the container
2017-12-14 11:58:40 +00:00
<div class="js-stick-at-top-when-scrolling">
<div class="form-group">
Don’t store info about bad uploads in session Because we now[1] store info about each file upload separately in the session the session isn’t overridden every time you upload a file. This is good because you can do multiple file uploads idempotently. Generally we are cleaning up after ourselves because we pop anything to do with that upload from the session. However there is an edge case: if you never send the file then the info about the file stays in the session in perpetuity[2]. This is generally happening when people are uploading files that are impossible to send, ie ones that have errors. So this commit makes two changes: 1. remove info about a file upload from the session as soon as we know that it contains errors 2. `POST` reuploads to the same endpoint as initial uploads because otherwise we need to keep info about bad uploads in the session, which would prevent us from doing 1. 1. https://github.com/alphagov/notifications-admin/pull/1968 2. or at least until the session is cleared by the user logging out
2018-03-29 11:56:53 +01:00
{{ file_upload(
form.file,
Remove set-to-string conversion from upload code Also changes the allowed_spreadsheet_file_extensions variable to allowed_file_extensions for consistency.
2020-12-17 10:47:52 +00:00
allowed_file_extensions=allowed_file_extensions,
Don’t store info about bad uploads in session Because we now[1] store info about each file upload separately in the session the session isn’t overridden every time you upload a file. This is good because you can do multiple file uploads idempotently. Generally we are cleaning up after ourselves because we pop anything to do with that upload from the session. However there is an edge case: if you never send the file then the info about the file stays in the session in perpetuity[2]. This is generally happening when people are uploading files that are impossible to send, ie ones that have errors. So this commit makes two changes: 1. remove info about a file upload from the session as soon as we know that it contains errors 2. `POST` reuploads to the same endpoint as initial uploads because otherwise we need to keep info about bad uploads in the session, which would prevent us from doing 1. 1. https://github.com/alphagov/notifications-admin/pull/1968 2. or at least until the session is cleared by the user logging out
2018-03-29 11:56:53 +01:00
action=url_for('.send_messages', service_id=current_service.id, template_id=template.id),
Add re-upload button and back link to the preview page Re-upload button is only shown if file failed validation. Change wording of re-upload buttons Make test we test right buttons on letter upload preview page Also remove double backlink
2019-11-27 13:27:52 +00:00
button_text='Upload your file again'
Don’t store info about bad uploads in session Because we now[1] store info about each file upload separately in the session the session isn’t overridden every time you upload a file. This is good because you can do multiple file uploads idempotently. Generally we are cleaning up after ourselves because we pop anything to do with that upload from the session. However there is an edge case: if you never send the file then the info about the file stays in the session in perpetuity[2]. This is generally happening when people are uploading files that are impossible to send, ie ones that have errors. So this commit makes two changes: 1. remove info about a file upload from the session as soon as we know that it contains errors 2. `POST` reuploads to the same endpoint as initial uploads because otherwise we need to keep info about bad uploads in the session, which would prevent us from doing 1. 1. https://github.com/alphagov/notifications-admin/pull/1968 2. or at least until the session is cleared by the user logging out
2018-03-29 11:56:53 +01:00
) }}
Change tables to scroll in-page, not full screen There were three problems with showing tables fullscreen: - it was over-optimised for very big spreadsheets, whereas most users will only have a few columns in their files - it was jarring to go from full screen and back to the normal layout - it was a bit change for existing users, where we prefer incremental changes that make things better without disrupting people’s work (where possible) So this commit changes the big table to scroll horizontally in the page, not take up the full width of the page. From the fullscreen table it keeps: - the shimming method to keep the horizontal scrollbar at the bottom of the screen at all times It introduces some more refinements to make it nicer to use: - fixing the first column, so you always know what row you’re on - adding shadows indicate where there is content that’s scrolled outside the edges of the container
2017-12-14 11:58:40 +00:00
</div>
Add a skip link to the preview page The accessibility audit raised the issue that screen reader users could miss the table of data on the preview page, because it’s after the submit/back buttons. > The back button is before the table of error messages - a screen > reader user might read the initial error summary then get to the back > button and not realise the error detail are later in the sequence. > The send and back buttons are before the table of field values - a > screen reader user might read the template details ror summary then > get to the buttons and not realise the field details are later in the > sequence. This commit add a skip link to navigate the users directly to the table, which: - allows them to skip past a lot of content which they might already have read - makes them aware that the table exists It’s added: – as the first thing after the `<h1>` when there are no errors with the file - as the last thing in the error summary when there are errors with the file The link is hidden from those interacting with the site visually.
2017-02-13 15:20:56 +00:00
</div>
Change tables to scroll in-page, not full screen There were three problems with showing tables fullscreen: - it was over-optimised for very big spreadsheets, whereas most users will only have a few columns in their files - it was jarring to go from full screen and back to the normal layout - it was a bit change for existing users, where we prefer incremental changes that make things better without disrupting people’s work (where possible) So this commit changes the big table to scroll horizontally in the page, not take up the full width of the page. From the fullscreen table it keeps: - the shimming method to keep the horizontal scrollbar at the bottom of the screen at all times It introduces some more refinements to make it nicer to use: - fixing the first column, so you always know what row you’re on - adding shadows indicate where there is content that’s scrolled outside the edges of the container
2017-12-14 11:58:40 +00:00
<div class="fullscreen-content" data-module="fullscreen-table">
Convert list table to mapping table A list table takes a list of input, and assumes one row of output. In order to show errors that span multiple rows we need to output two rows for one item of input. The list table inherits from the mapping table; using the mapping table directly gives us the flexibility we need.
2020-04-11 11:07:20 +01:00
{% call(item, row_number) mapping_table(
Remove skiplink & fix table caption on bulk send error pages The skiplink in those pages is in the error summary at the top. In this case, it seems redundant because: - it jumps to a section of the page just below it - the section it would jump to is the only error on the page Because of this, and because The Digital Accessibility Centre (DAC) reported that the skiplinks in these pages may not be needed, we decided to remove it. This commit also adds a prefix to the table caption to indicate that it only contains the errors from the CSV, not the rest of its contents.
2020-08-18 11:55:22 +01:00
caption="Errors in " + original_file_name,
Change tables to scroll in-page, not full screen There were three problems with showing tables fullscreen: - it was over-optimised for very big spreadsheets, whereas most users will only have a few columns in their files - it was jarring to go from full screen and back to the normal layout - it was a bit change for existing users, where we prefer incremental changes that make things better without disrupting people’s work (where possible) So this commit changes the big table to scroll horizontally in the page, not take up the full width of the page. From the fullscreen table it keeps: - the shimming method to keep the horizontal scrollbar at the bottom of the screen at all times It introduces some more refinements to make it nicer to use: - fixing the first column, so you always know what row you’re on - adding shadows indicate where there is content that’s scrolled outside the edges of the container
2017-12-14 11:58:40 +00:00
caption_visible=False,
field_headings=[
Test passed, good time to commit
2023-06-16 14:55:24 -04:00
'<span class="usa-sr-only">Row in file</span><span aria-hidden="true" class="table-field-invisible-error">1</span>'|safe
Change tables to scroll in-page, not full screen There were three problems with showing tables fullscreen: - it was over-optimised for very big spreadsheets, whereas most users will only have a few columns in their files - it was jarring to go from full screen and back to the normal layout - it was a bit change for existing users, where we prefer incremental changes that make things better without disrupting people’s work (where possible) So this commit changes the big table to scroll horizontally in the page, not take up the full width of the page. From the fullscreen table it keeps: - the shimming method to keep the horizontal scrollbar at the bottom of the screen at all times It introduces some more refinements to make it nicer to use: - fixing the first column, so you always know what row you’re on - adding shadows indicate where there is content that’s scrolled outside the edges of the container
2017-12-14 11:58:40 +00:00
] + recipients.column_headers
) %}
Convert list table to mapping table A list table takes a list of input, and assumes one row of output. In order to show errors that span multiple rows we need to output two rows for one item of input. The list table inherits from the mapping table; using the mapping table directly gives us the flexibility we need.
2020-04-11 11:07:20 +01:00
{% for item in recipients.displayed_rows %}
Show error across the whole row Errors with messages being too long or empty aren’t specific to a single cell of the uploaded spreadsheet, they’re the results of combining all the cells with the template. Previously we could only show errors against a specific cell. This commit makes it possible to add a super-row which spans all the cells, into which we can put errors. The index (header) column then spans both these rows, to show that they are both associated with the same row of input. Depends on: - [x] https://github.com/alphagov/notifications-utils/pull/719
2020-04-11 11:42:13 +01:00
{% if item.has_error_spanning_multiple_cells %}
{% call row() %}
{% call index_field(rowspan=2) %}
<span class="table-field-error">
{{ item.index + 2 }}
</span>
{% endcall %}
{% call field(colspan=recipients.column_headers|length) %}
<span class="table-field-error-label">
{% if item.message_empty %}
No content for this message
{% elif item.message_too_long %}
Message is too long
{% endif %}
</span>
{% endcall %}
Change tables to scroll in-page, not full screen There were three problems with showing tables fullscreen: - it was over-optimised for very big spreadsheets, whereas most users will only have a few columns in their files - it was jarring to go from full screen and back to the normal layout - it was a bit change for existing users, where we prefer incremental changes that make things better without disrupting people’s work (where possible) So this commit changes the big table to scroll horizontally in the page, not take up the full width of the page. From the fullscreen table it keeps: - the shimming method to keep the horizontal scrollbar at the bottom of the screen at all times It introduces some more refinements to make it nicer to use: - fixing the first column, so you always know what row you’re on - adding shadows indicate where there is content that’s scrolled outside the edges of the container
2017-12-14 11:58:40 +00:00
{% endcall %}
Show error across the whole row Errors with messages being too long or empty aren’t specific to a single cell of the uploaded spreadsheet, they’re the results of combining all the cells with the template. Previously we could only show errors against a specific cell. This commit makes it possible to add a super-row which spans all the cells, into which we can put errors. The index (header) column then spans both these rows, to show that they are both associated with the same row of input. Depends on: - [x] https://github.com/alphagov/notifications-utils/pull/719
2020-04-11 11:42:13 +01:00
{% endif %}
{% call row(item.id) %}
{% if not item.has_error_spanning_multiple_cells %}
{% call index_field() %}
<span class="{% if item.has_errors %}table-field-error{% endif %}">
{{ item.index + 2 }}
</span>
{% endcall %}
{% endif %}
Convert list table to mapping table A list table takes a list of input, and assumes one row of output. In order to show errors that span multiple rows we need to output two rows for one item of input. The list table inherits from the mapping table; using the mapping table directly gives us the flexibility we need.
2020-04-11 11:07:20 +01:00
{% for column in recipients.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 %}
Remove stuff about test jobs on row errors page The send yourself a test flow doesn’t reference any kind of file/rows/table in the front end any more, and doesn’t create a CSV in the background (except for letters). And it should validate any mistakes before getting to the check page. So any user doing a send yourself a test flow should never get to this template, which means we can remove some redundant code.
2017-07-28 09:09:22 +01:00
{% endfor %}
Change tables to scroll in-page, not full screen There were three problems with showing tables fullscreen: - it was over-optimised for very big spreadsheets, whereas most users will only have a few columns in their files - it was jarring to go from full screen and back to the normal layout - it was a bit change for existing users, where we prefer incremental changes that make things better without disrupting people’s work (where possible) So this commit changes the big table to scroll horizontally in the page, not take up the full width of the page. From the fullscreen table it keeps: - the shimming method to keep the horizontal scrollbar at the bottom of the screen at all times It introduces some more refinements to make it nicer to use: - fixing the first column, so you always know what row you’re on - adding shadows indicate where there is content that’s scrolled outside the edges of the container
2017-12-14 11:58:40 +00:00
{% endcall %}
</div>
Remove irrelevant stuff from error check pages If you have errors in your file then there’s stuff you’re not going to see on the page. So this doesn’t need to be in the Jinja templates that are only used when there are errors. Basically the conditional stuff is moving up to the level above these templates.
2017-07-20 09:10:23 +01:00
{% if count_of_displayed_recipients < count_of_recipients %}
Give the user better error messages for CSV files Makes uses of the additions to utils in https://github.com/alphagov/notifications-utils/pull/9 This commit strips out a lot of the complex stuff that the views and templates in this app were doing. There is now a cleaner separation of concerns: - utils returns the number and type of errors in the csv - `get_errors_for_csv` helper in this app maps the number and type of errors onto human-friendly error messages - the view and template just doing the glueing-together of all the pieces This is (hopefully) easier to understand, definitely makes the component parts easier to test in isolation, and makes it easier to give more specific error messages.
2016-03-07 18:47:05 +00:00
<p class="table-show-more-link">
Only show row-level errors if all columns are OK Row-level errors are: - bad phone number/email address - missing data I think it’s distracting to show these on the page if there’s something more fundamentally wrong with the file, eg placeholders don’t match. So this commit makes sure that these error messages are only displayed when the top-level error says ‘There is a problem with your data’
2016-06-03 14:38:10 +01:00
{% if row_errors and not recipients.missing_column_headers %}
Change wording when there are hidden rows This caused some anxiety about why the rows were being hidden. Were there problems with them? This commit reframes the wording to talk about the rows that are shown instead.
2016-04-07 14:30:28 +01:00
Only showing the first {{ count_of_displayed_recipients }} rows with errors
{% else %}
Only showing the first {{ count_of_displayed_recipients }} rows
{% endif %}
</p>
Only show row-level errors if all columns are OK Row-level errors are: - bad phone number/email address - missing data I think it’s distracting to show these on the page if there’s something more fundamentally wrong with the file, eg placeholders don’t match. So this commit makes sure that these error messages are only displayed when the top-level error says ‘There is a problem with your data’
2016-06-03 14:38:10 +01:00
{% elif row_errors and not recipients.missing_column_headers %}
Change wording when there are hidden rows This caused some anxiety about why the rows were being hidden. Were there problems with them? This commit reframes the wording to talk about the rows that are shown instead.
2016-04-07 14:30:28 +01:00
<p class="table-show-more-link">
Only showing rows with errors
Give the user better error messages for CSV files Makes uses of the additions to utils in https://github.com/alphagov/notifications-utils/pull/9 This commit strips out a lot of the complex stuff that the views and templates in this app were doing. There is now a cleaner separation of concerns: - utils returns the number and type of errors in the csv - `get_errors_for_csv` helper in this app maps the number and type of errors onto human-friendly error messages - the view and template just doing the glueing-together of all the pieces This is (hopefully) easier to understand, definitely makes the component parts easier to test in isolation, and makes it easier to give more specific error messages.
2016-03-07 18:47:05 +00:00
</p>
{% endif %}
Create shell page for checking text messages before sending
2015-11-30 14:20:17 +00:00
{% endblock %}
Reference in New Issue Copy Permalink