Skip to content

Commit

Permalink
Fix notification logic when JS is turned off
Browse files Browse the repository at this point in the history
  • Loading branch information
@anselmbradford
anselmbradford committed Jan 17, 2019
1 parent 2f705dc commit fc64493
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 52 deletions.
1 change: 0 additions & 1 deletion cfgov/jinja2/v1/_includes/organisms/filterable-list-controls.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,6 @@

Filter List Controls


==========================================================================

Description:
Expand Down
111 changes: 69 additions & 42 deletions cfgov/jinja2/v1/_includes/organisms/filterable-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,67 +11,85 @@
value: Collection of field controls
and other settings to determine what's rendered.

value.no_posts_message: Message to show in "no posts" state.

value.no_posts_explanation: More info to show in "no posts" state.

value.form_type: What type of form this is.

value.categories.page_type: Page type of the filterable list control.

value.output_5050: Whether to render results as info-units or not.

value.link_image_and_heading: Whether to link the image and heading
in info-units.

filter_data.form: Django form that carries the fields to be rendered.

filter_data.page_set: Result set of posts from the filtered content.

========================================================================== #}

{% import 'organisms/filterable-list-controls.html' as filterable_list_controls with context %}
{% import 'molecules/notification.html' as notification with context %}

{# Show a notification if there's nothing to filter. #}
{% if not filter_data.form.filterable_pages.exists() %}
{{ notification.render(
'default',
true,
value.no_posts_message,
value.no_posts_explanation
) }}
{% else %}
{# SHOW A NOTIFICATION IF THERE'S NOTHING TO FILTER. #}

{% if value.no_posts_message %}
{{ notification.render(
'default',
true,
value.no_posts_message,
value.no_posts_explanation
) }}
{% elif filter_data.form.filterable_pages.first() %}

<div class="o-filterable-list">
{% set form = filter_data.form %}
{% set posts = filter_data.page_set %}

{# Add the filters. #}
{# ADD THE FILTER CONTROLS. #}

{% set fragment_id = 'o-filterable-list-controls' %}
{{ filterable_list_controls.render(value, form, fragment_id) }}

{# Add the notification, if needed. Begin with defaults. #}
{# ADD THE NOTIFICATION, IF NEEDED. #}

{% set notification_type = 'default' %}
{% set notification_is_visible = false %}
{% set notification_message = '' %}
{% set notification_explanation = '' %}
{% set notification_opts = {
'type': 'default',
'is_visible': false,
'message': '',
'explanation': ''
} %}

{% for field in form %}
{% if field.errors %}
{% for error in field.errors %}
{% set notification_type = 'error' %}
{% set notification_is_visible = true %}
{% set notification_message = notification_message + error + '<br>' %}
{% if notification_opts.update({
'type': 'error',
'is_visible': true,
'message': notification_opts.message + field.label + ': ' + error + '<br>' | safe
}) %}{%endif%}
{% endfor %}
{% endif %}
{% endfor %}
{% if form.non_field_errors() %}
{% for error in form.non_field_errors() %}
{% set notification_type = 'error' %}
{% set notification_is_visible = true %}
{% set notification_message = notification_message + error + '<br>' %}
{% endfor %}
{% endif %}
{% if 'filterable-list' in value.form_type and posts is defined %}
{% if form.is_valid() %}
{% set count = posts.paginator.count %}
{% set notification_is_visible = true %}
{% if count == 0 %}
{% set notification_type = 'warning' %}
{% set notification_is_visible = true %}
{% set notification_message = 'Sorry, there were no results based on your filter selections.' %}
{% set notification_explanation = 'Please reset the filter or change your selections and try again.' %}
{% if notification_opts.update({
'type': 'warning',
'is_visible': true,
'message': 'Sorry, there were no results based on your filter selections.',
'explanation': 'Please reset the filter or change your selections and try again.'
}) %}{%endif%}
{% else %}
{% set notification_type = 'success' %}
{% set notification_is_visible = true %}
{% set notification_message = count ~ ' filtered result' ~ count|pluralize('s') %}
{% if notification_opts.update({
'type': 'success',
'is_visible': true,
'message': count ~ ' filtered result' ~ count|pluralize('s')
}) %}{%endif%}
{% endif %}
{% endif %}
{% endif %}
Expand All @@ -84,15 +102,17 @@
u-hidden
{% endif %}">
{{ notification.render(
notification_type,
notification_is_visible,
notification_message,
notification_explanation
notification_opts.type,
notification_opts.is_visible,
notification_opts.message,
notification_opts.explanation
) }}
</div>

{# Add the filter results, if needed. #}
<section class="block
{# ADD THE FILTER RESULTS, IF THERE ARE ANY. #}

<section class="o-filterable-list_results
block
block__sub
{% if has_active_filters %}
block__flush-top
Expand Down Expand Up @@ -148,10 +168,17 @@
{{ post_preview.render(post, value) }}
{% endfor %}
{% endif %}
<div class="block block__flush-top block__flush-bottom block__padded-top">
{% import 'molecules/pagination.html' as pagination with context %}
{{ pagination.render( posts.paginator.num_pages, posts.number, fragment_id) }}
</div>

{# DISPLAY THE PAGINATOR, IF THERE ARE RESULTS OVER A COUNT. #}

{% set total_pages = posts.paginator.num_pages %}
{% set current_page = posts.number %}
{% if total_pages > 1 and current_page <= total_pages %}
<div class="block block__flush-top block__flush-bottom block__padded-top">
{% import 'molecules/pagination.html' as pagination with context %}
{{ pagination.render( total_pages, current_page, fragment_id) }}
</div>
{% endif %}
</section>
</div>
{% endif %}
4 changes: 4 additions & 0 deletions cfgov/unprocessed/js/organisms/FilterableList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ function FilterableList( element ) {
let _filterableListControls;
let _notificationContainer;
let _notification;
let _resultsContainer;

/**
* @returns {FilterableListControls|undefined} An instance,
Expand Down Expand Up @@ -54,6 +55,8 @@ function FilterableList( element ) {
_notification.init();
_filterableListControls.init();

_resultsContainer = _dom.querySelector( `.${ BASE_CLASS }_results` );

return this;
}

Expand All @@ -69,6 +72,7 @@ function FilterableList( element ) {

_notification.show();
_notificationContainer.classList.remove( 'u-hidden' );
_resultsContainer.classList.add( 'u-hidden' );
}

this.init = init;
Expand Down
16 changes: 7 additions & 9 deletions test/browser_tests/cucumber/features/suites/default/filterable-list-controls.feature
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,15 @@ Scenario: Select multiple categories

@undefined
Scenario: Date range to present
When I enter “01/01/2017” in the From date entry field
When I enter “1/1/2017” in the From date entry field
And I apply filters
Then I should see only results dated 01/01/2017 or later

# It’s a usability issue that currently the filter won’t work if you don’t put leading zeroes in the date range field. There's a plan to update that behavior at some point, and the test should be updated then too.
Then I should see only results dated 1/1/2017 or later

@undefined
Scenario: Date range in past
When I enter “01/01/2016” in the From date entry field
And I enter “01/01/2017” in the To date entry field
Then I should see only results between 01/01/2016 and 01/01/2017, inclusive
When I enter “1/1/2016” in the From date entry field
And I enter “1/1/2017” in the To date entry field
Then I should see only results between 1/1/2016 and 1/1/2017, inclusive

@undefined
Scenario: Select a topic
Expand Down Expand Up @@ -118,9 +116,9 @@ Scenario: Name search plus topic
@undefined
Scenario: Name search plus date range
When I type “loans” in the item name input box
And I type “01/01/2017” in the From date entry field
And I type “1/1/2017” in the From date entry field
And I apply filters
Then I should see only results dated 01/01/2017 or later with “loans” in the post title
Then I should see only results dated 1/1/2017 or later with “loans” in the post title

@undefined
Scenario: Name search plus author
Expand Down

0 comments on commit fc64493

Please sign in to comment.