diff --git a/Gemfile b/Gemfile index 65fc882d1..e08f126a0 100644 --- a/Gemfile +++ b/Gemfile @@ -59,6 +59,8 @@ gem "redis" # Receive exceptions and configure alerts gem "sentry-rails" gem "sentry-ruby" +# Pagination +gem "pagy" group :development, :test do # Check gems for known vulnerabilities diff --git a/Gemfile.lock b/Gemfile.lock index b95c524e9..b09b5b1da 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -266,6 +266,8 @@ GEM childprocess (>= 0.6.3, < 5) iniparse (~> 1.4) rexml (~> 3.2) + pagy (5.10.1) + activesupport paper_trail (12.3.0) activerecord (>= 5.2) request_store (~> 1.1) @@ -486,6 +488,7 @@ DEPENDENCIES listen (~> 3.3) notifications-ruby-client overcommit (>= 0.37.0) + pagy paper_trail paper_trail-globalid pg (~> 1.1) diff --git a/app/controllers/case_logs_controller.rb b/app/controllers/case_logs_controller.rb index f635826bc..1f84d7a15 100644 --- a/app/controllers/case_logs_controller.rb +++ b/app/controllers/case_logs_controller.rb @@ -1,11 +1,13 @@ class CaseLogsController < ApplicationController + include Pagy::Backend + skip_before_action :verify_authenticity_token, if: :json_api_request? before_action :authenticate, if: :json_api_request? before_action :authenticate_user!, unless: :json_api_request? before_action :find_resource, except: %i[create index edit] def index - @case_logs = current_user.case_logs + @pagy, @case_logs = pagy(current_user.case_logs) end def create diff --git a/app/frontend/styles/_pagination.scss b/app/frontend/styles/_pagination.scss new file mode 100644 index 000000000..39b3aee4e --- /dev/null +++ b/app/frontend/styles/_pagination.scss @@ -0,0 +1,134 @@ +// https://github.com/alphagov/govuk-frontend/blob/add-pagination-prototype/src/govuk/components/pagination/_index.scss +.govuk-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%; + } + } +} + +.govuk-pagination__list { + margin: 0 govuk-spacing(-3); + padding: 0; + list-style: none; + + @include govuk-media-query($from: tablet) { + display: inline-block; + margin-bottom: 0; + } +} + +.govuk-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; + } +} + +.govuk-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 +.govuk-pagination__item--current, +.govuk-pagination__item--divider, +.govuk-pagination__item--prev, +.govuk-pagination__item--next, +.govuk-pagination__item:nth-child(2), +.govuk-pagination__item:nth-last-child(2) { + @include govuk-media-query($until: tablet) { + display: inline-block; + } +} + +.govuk-pagination__item--current, +.govuk-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; +} + +.govuk-pagination__item--divider { + margin: 0 govuk-spacing(-4); + padding-right: 0; + padding-left: 0; + color: $govuk-secondary-text-colour; + pointer-events: none; +} + +.govuk-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; + + .govuk-pagination__link-label { + @include govuk-font($size: 16, $weight: "regular"); + display: block; + padding-left: 32px; + text-decoration: underline; + } + + &:hover .govuk-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"); + } +} + +.govuk-pagination__icon { + fill: currentColor; +} + +.govuk-pagination__item--prev .govuk-pagination__link, +.govuk-pagination__item--next .govuk-pagination__link { + padding: govuk-spacing(2) govuk-spacing(3); + font-weight: bold; +} + +.govuk-pagination__item--prev .govuk-pagination__icon { + margin-right: govuk-spacing(2); +} + +.govuk-pagination__item--next .govuk-pagination__icon { + margin-left: govuk-spacing(2); +} diff --git a/app/frontend/styles/application.scss b/app/frontend/styles/application.scss index 6b1d9cc81..17a5a97cf 100644 --- a/app/frontend/styles/application.scss +++ b/app/frontend/styles/application.scss @@ -22,6 +22,7 @@ $govuk-global-styles: true; @import "table-group"; @import "task-list"; @import "template"; +@import "pagination"; @import "panel"; // Turbo diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 1e8f2a07d..b3982623a 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -1,4 +1,6 @@ module ApplicationHelper + include Pagy::Frontend + def browser_title(title, *resources) if resources.any? { |r| r.present? && r.errors.present? } "Error: #{[title, t('service_name'), 'GOV.UK'].select(&:present?).join(' - ')}" diff --git a/app/views/case_logs/index.html.erb b/app/views/case_logs/index.html.erb index 64cfc7146..89cafabf5 100644 --- a/app/views/case_logs/index.html.erb +++ b/app/views/case_logs/index.html.erb @@ -11,4 +11,5 @@ <% if @case_logs.present? %> <%= render partial: "log_list", locals: { case_logs: @case_logs, title: "Logs" } %> + <%== render partial: 'pagy/nav', locals: {pagy: @pagy} %> <% end %> diff --git a/app/views/pagy/_nav.html.erb b/app/views/pagy/_nav.html.erb new file mode 100644 index 000000000..eaca449a8 --- /dev/null +++ b/app/views/pagy/_nav.html.erb @@ -0,0 +1,31 @@ +<% link = pagy_link_proc(pagy) -%> + diff --git a/config/initializers/pagy.rb b/config/initializers/pagy.rb new file mode 100644 index 000000000..896a19196 --- /dev/null +++ b/config/initializers/pagy.rb @@ -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