814 - Adding alert component to CSV error area

This commit is contained in:
Jonathan Bobel
2023-10-05 16:20:37 -04:00
parent 838f643b18
commit fd196c6534
5 changed files with 31 additions and 31 deletions

View File

@@ -12,6 +12,5 @@
hideBanner: () => $('.banner-dangerous').addClass('display-none'),
showBanner: () => $('.banner-dangerous')
.removeClass('display-none')
.trigger('focus'),
};
})(window);

View File

@@ -15,9 +15,9 @@
// The label gets styled like a button and is used to hide the native file upload control. This is so that
// users see a button that looks like the others on the site.
//
this.$form.find('label.file-upload-button').addClass('usa-button margin-bottom-1');
this.$form.find('label.file-upload-button').addClass('usa-button margin-bottom-1').attr( {role: 'button', tabindex: '0'} );
// Clear the form if the user navigates back to the page
$(window).on("pageshow", () => this.$form[0].reset());

View File

@@ -16,8 +16,6 @@ $(() => GOVUK.modules.start());
$(() => $('.error-message, .usa-error-message').eq(0).parent('label').next('input').trigger('focus'));
$(() => $('.banner-dangerous').eq(0).trigger('focus'));
$(() => $('.govuk-header__container').on('click', function() {
$(this).css('border-color', '#005ea5');
}));

View File

@@ -11,7 +11,7 @@
<div class="usa-alert__body">
<h{{params.header_level}} class="usa-alert__heading">{{params.heading}}</h{{params.header_level}}>
<p class="usa-alert__text">
{{params.text}}
{{params.text | safe }}
</p>
</div>
</div>

View File

@@ -4,6 +4,8 @@
{% 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/components/back-link/macro.njk" import usaBackLink %}
{% from "components/components/alert/macro.njk" import usaAlert %}
{% block service_page_title %}
Error
@@ -64,34 +66,35 @@
{% 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 }}">
Theres a problem with your column names
</h1>
<p>
We found more than one column called {{ (
recipients.duplicate_recipient_column_headers
) | formatted_list(
conjunction='or',
prefix='',
prefix_plural=''
) }}.
</p>
<p>
Delete or rename one of these columns and try again.
</p>
{% set duplicate_recipient_column_headers = recipients.duplicate_recipient_column_headers
| formatted_list(
conjunction='or',
prefix='',
prefix_plural=''
) %}
{{ usaAlert({
"heading": "Theres a problem with your column names",
"text": "We found more than one column called " + duplicate_recipient_column_headers + ". Delete or rename one of these columns and try again.",
"type": "error",
})
}}
{% elif recipients.missing_column_headers %}
<h1 class='banner-title' data-module="track-error" data-error-type="Missing placeholder columns" data-error-label="{{ upload_id }}">
Your column names 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>
{% set missing_column_headers = recipients.missing_column_headers | formatted_list(
conjunction='and',
prefix='a column called ',
prefix_plural='columns called '
)%}
{{ usaAlert({
"heading": "Your column names need to match the double brackets in your template",
"text": "Your file is missing " + missing_column_headers + ".",
"type": "error",
})
}}
{% elif sent_previously %}