Browse Source
* Add Pagy pagination to logs index * Add result count * Show total count at top * Replace view spec with request spec * More logs context * Make sure we have next/prev * Add total count * Generisize * Remove pagination indicators when only 1 page * Add pagination to title * Whole pagination nav only shows if > 1 page * Dry up paginated titles * Update style namespacepull/441/head
baarkerlounger
3 years ago
committed by
GitHub
14 changed files with 554 additions and 37 deletions
@ -0,0 +1,135 @@
|
||||
|
||||
// https://github.com/alphagov/govuk-frontend/blob/add-pagination-prototype/src/govuk/components/pagination/_index.scss |
||||
.app-pagination { |
||||
border-top: 1px solid $govuk-border-colour; |
||||
margin-top: govuk-spacing(2); |
||||
padding-top: govuk-spacing(2); |
||||
text-align: center; |
||||
|
||||
@include govuk-media-query($from: tablet) { |
||||
// Hide whitespace between elements |
||||
font-size: 0; |
||||
|
||||
// Trick to remove the need for floats |
||||
text-align: justify; |
||||
|
||||
&:after { |
||||
content: " "; |
||||
display: inline-block; |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.app-pagination__list { |
||||
margin: 0 govuk-spacing(-3); |
||||
padding: 0; |
||||
list-style: none; |
||||
|
||||
@include govuk-media-query($from: tablet) { |
||||
display: inline-block; |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
|
||||
.app-pagination__results { |
||||
@include govuk-font(19); |
||||
margin-top: 0; |
||||
margin-bottom: govuk-spacing(4); |
||||
padding: govuk-spacing(1) 0; |
||||
|
||||
@include govuk-media-query($from: tablet) { |
||||
display: inline-block; |
||||
} |
||||
} |
||||
|
||||
.app-pagination__item { |
||||
@include govuk-font(19); |
||||
display: inline-block; |
||||
margin-bottom: govuk-spacing(4); |
||||
|
||||
// Hide items on small screens |
||||
@include govuk-media-query($until: tablet) { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
// Only show previous, next, first, last and current items on mobile |
||||
.app-pagination__item--current, |
||||
.app-pagination__item--divider, |
||||
.app-pagination__item--prev, |
||||
.app-pagination__item--next, |
||||
.app-pagination__item:nth-child(2), |
||||
.app-pagination__item:nth-last-child(2) { |
||||
@include govuk-media-query($until: tablet) { |
||||
display: inline-block; |
||||
} |
||||
} |
||||
|
||||
.app-pagination__item--current, |
||||
.app-pagination__item--divider { |
||||
box-sizing: border-box; |
||||
font-weight: bold; |
||||
min-width: govuk-spacing(8); |
||||
min-height: govuk-spacing(4); |
||||
padding: govuk-spacing(2); |
||||
text-align: center; |
||||
} |
||||
|
||||
.app-pagination__item--divider { |
||||
margin: 0 govuk-spacing(-4); |
||||
padding-right: 0; |
||||
padding-left: 0; |
||||
color: $govuk-secondary-text-colour; |
||||
pointer-events: none; |
||||
} |
||||
|
||||
.app-pagination__link { |
||||
@include govuk-link-common; |
||||
@include govuk-link-style-no-underline; |
||||
box-sizing: border-box; |
||||
color: $govuk-link-colour; |
||||
display: block; |
||||
min-width: govuk-spacing(8); |
||||
min-height: govuk-spacing(4); |
||||
padding: govuk-spacing(2); |
||||
text-align: center; |
||||
|
||||
.app-pagination__link-label { |
||||
@include govuk-font($size: 16, $weight: "regular"); |
||||
display: block; |
||||
padding-left: 32px; |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
&:hover .app-pagination__link-label { |
||||
@include govuk-link-hover-decoration; |
||||
} |
||||
|
||||
&:focus { |
||||
box-shadow: 0 0 $govuk-focus-colour, 0 4px $govuk-focus-text-colour; |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
&:hover:not(:focus) { |
||||
background-color: govuk-colour("light-grey", $legacy: "grey-4"); |
||||
} |
||||
} |
||||
|
||||
.app-pagination__icon { |
||||
fill: currentColor; |
||||
} |
||||
|
||||
.app-pagination__item--prev .app-pagination__link, |
||||
.app-pagination__item--next .app-pagination__link { |
||||
padding: govuk-spacing(2) govuk-spacing(3); |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.app-pagination__item--prev .app-pagination__icon { |
||||
margin-right: govuk-spacing(2); |
||||
} |
||||
|
||||
.app-pagination__item--next .app-pagination__icon { |
||||
margin-left: govuk-spacing(2); |
||||
} |
||||
@ -1,9 +1,20 @@
|
||||
module ApplicationHelper |
||||
def browser_title(title, *resources) |
||||
include Pagy::Frontend |
||||
|
||||
def browser_title(title, pagy, *resources) |
||||
if resources.any? { |r| r.present? && r.errors.present? } |
||||
"Error: #{[title, t('service_name'), 'GOV.UK'].select(&:present?).join(' - ')}" |
||||
else |
||||
[title, t("service_name"), "GOV.UK"].select(&:present?).join(" - ") |
||||
[paginated_title(title, pagy), t("service_name"), "GOV.UK"].select(&:present?).join(" - ") |
||||
end |
||||
end |
||||
|
||||
private |
||||
|
||||
def paginated_title(title, pagy) |
||||
return unless title |
||||
return title unless pagy && pagy.pages > 1 |
||||
|
||||
title + " (page #{pagy.page} of #{pagy.pages})" |
||||
end |
||||
end |
||||
|
||||
@ -0,0 +1,40 @@
|
||||
<% link = pagy_link_proc(pagy) -%> |
||||
<% if pagy.pages > 1 %> |
||||
<nav class="app-pagination" id="pagination-label" aria-label="results navigation"> |
||||
|
||||
<ul class="app-pagination__list"> |
||||
<li class="app-pagination__item app-pagination__item--prev"> |
||||
<% if pagy.prev %> |
||||
<a class="app-pagination__link" href=<%= "/logs?page=#{pagy.prev}" %>> |
||||
<% end %> |
||||
<span class="app-pagination__link-title"> |
||||
<svg class="app-pagination__icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17"> |
||||
<path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path> |
||||
</svg>Previous |
||||
<span class="govuk-visually-hidden">page</span> |
||||
</span></a> |
||||
</li> |
||||
<% (1..pagy.pages).each do |idx| %> |
||||
<% if pagy.page == idx %> |
||||
<li class="app-pagination__item app-pagination__item--current"><span class="govuk-visually-hidden">Page </span><%= idx %><span class="govuk-visually-hidden"> (current page) </span></li> |
||||
<% else %> |
||||
<li class="app-pagination__item"><a class="app-pagination__link" href=<%= "/logs?page=#{idx}" %>><span class="govuk-visually-hidden">Page </span><%= idx %></a></li> |
||||
<% end %> |
||||
<% end %> |
||||
<li class="app-pagination__item app-pagination__item--next"> |
||||
<% if pagy.next %> |
||||
<a class="app-pagination__link" href=<%= "/logs?page=#{pagy.next}" %>> |
||||
<% end %> |
||||
Next <span class="govuk-visually-hidden">page</span> |
||||
<span class="app-pagination__link-title"> |
||||
<svg class="app-pagination__icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17"> |
||||
<path d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path> |
||||
</svg> |
||||
</span></a> |
||||
</li> |
||||
</ul> |
||||
<p class="app_pagination__results"> |
||||
Showing <b><%= pagy.from %></b> to <b><%= pagy.to %></b> of <b><%= pagy.count %></b> <%= item_name %> |
||||
</p> |
||||
</nav> |
||||
<% end %> |
||||
@ -0,0 +1,235 @@
|
||||
# frozen_string_literal: true |
||||
|
||||
# Pagy initializer file (5.10.1) |
||||
# Customize only what you really need and notice that the core Pagy works also without any of the following lines. |
||||
# Should you just cherry pick part of this file, please maintain the require-order of the extras |
||||
|
||||
# Pagy DEFAULT Variables |
||||
# See https://ddnexus.github.io/pagy/api/pagy#variables |
||||
# All the Pagy::DEFAULT are set for all the Pagy instances but can be overridden per instance by just passing them to |
||||
# Pagy.new|Pagy::Countless.new|Pagy::Calendar::*.new or any of the #pagy* controller methods |
||||
|
||||
# Instance variables |
||||
# See https://ddnexus.github.io/pagy/api/pagy#instance-variables |
||||
# Pagy::DEFAULT[:page] = 1 # default |
||||
# Pagy::DEFAULT[:items] = 20 # default |
||||
# Pagy::DEFAULT[:outset] = 0 # default |
||||
|
||||
# Other Variables |
||||
# See https://ddnexus.github.io/pagy/api/pagy#other-variables |
||||
# Pagy::DEFAULT[:size] = [1,4,4,1] # default |
||||
# Pagy::DEFAULT[:page_param] = :page # default |
||||
# The :params can be also set as a lambda e.g ->(params){ params.exclude('useless').merge!('custom' => 'useful') } |
||||
# Pagy::DEFAULT[:params] = {} # default |
||||
# Pagy::DEFAULT[:fragment] = '#fragment' # example |
||||
# Pagy::DEFAULT[:link_extra] = 'data-remote="true"' # example |
||||
# Pagy::DEFAULT[:i18n_key] = 'pagy.item_name' # default |
||||
# Pagy::DEFAULT[:cycle] = true # example |
||||
|
||||
# Extras |
||||
# See https://ddnexus.github.io/pagy/extras |
||||
|
||||
# Backend Extras |
||||
|
||||
# Array extra: Paginate arrays efficiently, avoiding expensive array-wrapping and without overriding |
||||
# See https://ddnexus.github.io/pagy/extras/array |
||||
# require 'pagy/extras/array' |
||||
|
||||
# Calendar extra: Add pagination filtering by calendar time unit (year, quarter, month, week, day) |
||||
# See https://ddnexus.github.io/pagy/extras/calendar |
||||
# require 'pagy/extras/calendar' |
||||
# Default for each unit |
||||
# Pagy::Calendar::Year::DEFAULT[:order] = :asc # Time direction of pagination |
||||
# Pagy::Calendar::Year::DEFAULT[:format] = '%Y' # strftime format |
||||
# |
||||
# Pagy::Calendar::Quarter::DEFAULT[:order] = :asc # Time direction of pagination |
||||
# Pagy::Calendar::Quarter::DEFAULT[:format] = '%Y-Q%q' # strftime format |
||||
# |
||||
# Pagy::Calendar::Month::DEFAULT[:order] = :asc # Time direction of pagination |
||||
# Pagy::Calendar::Month::DEFAULT[:format] = '%Y-%m' # strftime format |
||||
# |
||||
# Pagy::Calendar::Week::DEFAULT[:order] = :asc # Time direction of pagination |
||||
# Pagy::Calendar::Week::DEFAULT[:format] = '%Y-%W' # strftime format |
||||
# |
||||
# Pagy::Calendar::Day::DEFAULT[:order] = :asc # Time direction of pagination |
||||
# Pagy::Calendar::Day::DEFAULT[:format] = '%Y-%m-%d' # strftime format |
||||
# |
||||
# Uncomment the following lines, if you need calendar localization without using the I18n extra |
||||
# module LocalizePagyCalendar |
||||
# def localize(time, opts) |
||||
# ::I18n.l(time, **opts) |
||||
# end |
||||
# end |
||||
# Pagy::Calendar.prepend LocalizePagyCalendar |
||||
|
||||
# Countless extra: Paginate without any count, saving one query per rendering |
||||
# See https://ddnexus.github.io/pagy/extras/countless |
||||
# require 'pagy/extras/countless' |
||||
# Pagy::DEFAULT[:countless_minimal] = false # default (eager loading) |
||||
|
||||
# Elasticsearch Rails extra: Paginate `ElasticsearchRails::Results` objects |
||||
# See https://ddnexus.github.io/pagy/extras/elasticsearch_rails |
||||
# Default :pagy_search method: change only if you use also |
||||
# the searchkick or meilisearch extra that defines the same |
||||
# Pagy::DEFAULT[:elasticsearch_rails_pagy_search] = :pagy_search |
||||
# Default original :search method called internally to do the actual search |
||||
# Pagy::DEFAULT[:elasticsearch_rails_search] = :search |
||||
# require 'pagy/extras/elasticsearch_rails' |
||||
|
||||
# Headers extra: http response headers (and other helpers) useful for API pagination |
||||
# See http://ddnexus.github.io/pagy/extras/headers |
||||
# require 'pagy/extras/headers' |
||||
# Pagy::DEFAULT[:headers] = { page: 'Current-Page', |
||||
# items: 'Page-Items', |
||||
# count: 'Total-Count', |
||||
# pages: 'Total-Pages' } # default |
||||
|
||||
# Meilisearch extra: Paginate `Meilisearch` result objects |
||||
# See https://ddnexus.github.io/pagy/extras/meilisearch |
||||
# Default :pagy_search method: change only if you use also |
||||
# the elasticsearch_rails or searchkick extra that define the same method |
||||
# Pagy::DEFAULT[:meilisearch_pagy_search] = :pagy_search |
||||
# Default original :search method called internally to do the actual search |
||||
# Pagy::DEFAULT[:meilisearch_search] = :ms_search |
||||
# require 'pagy/extras/meilisearch' |
||||
|
||||
# Metadata extra: Provides the pagination metadata to Javascript frameworks like Vue.js, react.js, etc. |
||||
# See https://ddnexus.github.io/pagy/extras/metadata |
||||
# you must require the shared internal extra (BEFORE the metadata extra) ONLY if you need also the :sequels |
||||
# require 'pagy/extras/shared' |
||||
# require 'pagy/extras/metadata' |
||||
# For performance reasons, you should explicitly set ONLY the metadata you use in the frontend |
||||
# Pagy::DEFAULT[:metadata] = %i[scaffold_url page prev next last] # example |
||||
|
||||
# Searchkick extra: Paginate `Searchkick::Results` objects |
||||
# See https://ddnexus.github.io/pagy/extras/searchkick |
||||
# Default :pagy_search method: change only if you use also |
||||
# the elasticsearch_rails or meilisearch extra that defines the same |
||||
# DEFAULT[:searchkick_pagy_search] = :pagy_search |
||||
# Default original :search method called internally to do the actual search |
||||
# Pagy::DEFAULT[:searchkick_search] = :search |
||||
# require 'pagy/extras/searchkick' |
||||
# uncomment if you are going to use Searchkick.pagy_search |
||||
# Searchkick.extend Pagy::Searchkick |
||||
|
||||
# Frontend Extras |
||||
|
||||
# Bootstrap extra: Add nav, nav_js and combo_nav_js helpers and templates for Bootstrap pagination |
||||
# See https://ddnexus.github.io/pagy/extras/bootstrap |
||||
# require 'pagy/extras/bootstrap' |
||||
|
||||
# Bulma extra: Add nav, nav_js and combo_nav_js helpers and templates for Bulma pagination |
||||
# See https://ddnexus.github.io/pagy/extras/bulma |
||||
# require 'pagy/extras/bulma' |
||||
|
||||
# Foundation extra: Add nav, nav_js and combo_nav_js helpers and templates for Foundation pagination |
||||
# See https://ddnexus.github.io/pagy/extras/foundation |
||||
# require 'pagy/extras/foundation' |
||||
|
||||
# Materialize extra: Add nav, nav_js and combo_nav_js helpers for Materialize pagination |
||||
# See https://ddnexus.github.io/pagy/extras/materialize |
||||
# require 'pagy/extras/materialize' |
||||
|
||||
# Navs extra: Add nav_js and combo_nav_js javascript helpers |
||||
# Notice: the other frontend extras add their own framework-styled versions, |
||||
# so require this extra only if you need the unstyled version |
||||
# See https://ddnexus.github.io/pagy/extras/navs |
||||
# require 'pagy/extras/navs' |
||||
|
||||
# Semantic extra: Add nav, nav_js and combo_nav_js helpers for Semantic UI pagination |
||||
# See https://ddnexus.github.io/pagy/extras/semantic |
||||
# require 'pagy/extras/semantic' |
||||
|
||||
# UIkit extra: Add nav helper and templates for UIkit pagination |
||||
# See https://ddnexus.github.io/pagy/extras/uikit |
||||
# require 'pagy/extras/uikit' |
||||
|
||||
# Multi size var used by the *_nav_js helpers |
||||
# See https://ddnexus.github.io/pagy/extras/navs#steps |
||||
# Pagy::DEFAULT[:steps] = { 0 => [2,3,3,2], 540 => [3,5,5,3], 720 => [5,7,7,5] } # example |
||||
|
||||
# Feature Extras |
||||
|
||||
# Gearbox extra: Automatically change the number of items per page depending on the page number |
||||
# See https://ddnexus.github.io/pagy/extras/gearbox |
||||
# require 'pagy/extras/gearbox' |
||||
# set to false only if you want to make :gearbox_extra an opt-in variable |
||||
# Pagy::DEFAULT[:gearbox_extra] = false # default true |
||||
# Pagy::DEFAULT[:gearbox_items] = [15, 30, 60, 100] # default |
||||
|
||||
# Items extra: Allow the client to request a custom number of items per page with an optional selector UI |
||||
# See https://ddnexus.github.io/pagy/extras/items |
||||
# require 'pagy/extras/items' |
||||
# set to false only if you want to make :items_extra an opt-in variable |
||||
# Pagy::DEFAULT[:items_extra] = false # default true |
||||
# Pagy::DEFAULT[:items_param] = :items # default |
||||
# Pagy::DEFAULT[:max_items] = 100 # default |
||||
|
||||
# Overflow extra: Allow for easy handling of overflowing pages |
||||
# See https://ddnexus.github.io/pagy/extras/overflow |
||||
# require 'pagy/extras/overflow' |
||||
# Pagy::DEFAULT[:overflow] = :empty_page # default (other options: :last_page and :exception) |
||||
|
||||
# Support extra: Extra support for features like: incremental, infinite, auto-scroll pagination |
||||
# See https://ddnexus.github.io/pagy/extras/support |
||||
# require 'pagy/extras/support' |
||||
|
||||
# Trim extra: Remove the page=1 param from links |
||||
# See https://ddnexus.github.io/pagy/extras/trim |
||||
# require 'pagy/extras/trim' |
||||
# set to false only if you want to make :trim_extra an opt-in variable |
||||
# Pagy::DEFAULT[:trim_extra] = false # default true |
||||
|
||||
# Standalone extra: Use pagy in non Rack environment/gem |
||||
# See https://ddnexus.github.io/pagy/extras/standalone |
||||
# require 'pagy/extras/standalone' |
||||
# Pagy::DEFAULT[:url] = 'http://www.example.com/subdir' # optional default |
||||
|
||||
# Rails |
||||
# Enable the .js file required by the helpers that use javascript |
||||
# (pagy*_nav_js, pagy*_combo_nav_js, and pagy_items_selector_js) |
||||
# See https://ddnexus.github.io/pagy/extras#javascript |
||||
|
||||
# With the asset pipeline |
||||
# Sprockets need to look into the pagy javascripts dir, so add it to the assets paths |
||||
# Rails.application.config.assets.paths << Pagy.root.join('javascripts') |
||||
|
||||
# I18n |
||||
|
||||
# Pagy internal I18n: ~18x faster using ~10x less memory than the i18n gem |
||||
# See https://ddnexus.github.io/pagy/api/frontend#i18n |
||||
# Notice: No need to configure anything in this section if your app uses only "en" |
||||
# or if you use the i18n extra below |
||||
# |
||||
# Examples: |
||||
# load the "de" built-in locale: |
||||
# Pagy::I18n.load(locale: 'de') |
||||
# |
||||
# load the "de" locale defined in the custom file at :filepath: |
||||
# Pagy::I18n.load(locale: 'de', filepath: 'path/to/pagy-de.yml') |
||||
# |
||||
# load the "de", "en" and "es" built-in locales: |
||||
# (the first passed :locale will be used also as the default_locale) |
||||
# Pagy::I18n.load({ locale: 'de' }, |
||||
# { locale: 'en' }, |
||||
# { locale: 'es' }) |
||||
# |
||||
# load the "en" built-in locale, a custom "es" locale, |
||||
# and a totally custom locale complete with a custom :pluralize proc: |
||||
# (the first passed :locale will be used also as the default_locale) |
||||
# Pagy::I18n.load({ locale: 'en' }, |
||||
# { locale: 'es', filepath: 'path/to/pagy-es.yml' }, |
||||
# { locale: 'xyz', # not built-in |
||||
# filepath: 'path/to/pagy-xyz.yml', |
||||
# pluralize: lambda{ |count| ... } ) |
||||
|
||||
# I18n extra: uses the standard i18n gem which is ~18x slower using ~10x more memory |
||||
# than the default pagy internal i18n (see above) |
||||
# See https://ddnexus.github.io/pagy/extras/i18n |
||||
# require 'pagy/extras/i18n' |
||||
|
||||
# Default i18n key |
||||
# Pagy::DEFAULT[:i18n_key] = 'pagy.item_name' # default |
||||
|
||||
# When you are done setting your own default freeze it, so it will not get changed accidentally |
||||
Pagy::DEFAULT.freeze |
||||
@ -1,19 +0,0 @@
|
||||
require "rails_helper" |
||||
|
||||
RSpec.describe "case_logs/index" do |
||||
let(:in_progress_log) { FactoryBot.create(:case_log, :in_progress) } |
||||
|
||||
context "with a log list" do |
||||
before do |
||||
assign(:case_logs, [in_progress_log]) |
||||
render |
||||
end |
||||
|
||||
it "renders a table for all logs" do |
||||
expect(rendered).to match(/<table class="govuk-table">/) |
||||
expect(rendered).to match(/logs/) |
||||
expect(rendered).to match(in_progress_log.created_at.to_formatted_s(:govuk_date)) |
||||
expect(rendered).to match(in_progress_log.status.humanize) |
||||
end |
||||
end |
||||
end |
||||
Loading…
Reference in new issue