From d638cf2d0222728c6ed2ee938fa8c8b126a395cd Mon Sep 17 00:00:00 2001 From: Simon Whatley Date: Fri, 13 Dec 2024 11:42:32 +0000 Subject: [PATCH 1/5] Add govukPagination component --- app/views/layout.njk | 1 + 1 file changed, 1 insertion(+) diff --git a/app/views/layout.njk b/app/views/layout.njk index 8dcb16c0a..473c949d2 100755 --- a/app/views/layout.njk +++ b/app/views/layout.njk @@ -19,6 +19,7 @@ {% from "govuk/components/inset-text/macro.njk" import govukInsetText %} {% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %} {% from "govuk/components/panel/macro.njk" import govukPanel %} +{% from "govuk/components/pagination/macro.njk" import govukPagination %} {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %} {% from "govuk/components/radios/macro.njk" import govukRadios %} {% from "govuk/components/select/macro.njk" import govukSelect %} From fedf41a68c53e4b6d77eb39c5f689efd2b66e297 Mon Sep 17 00:00:00 2001 From: Simon Whatley Date: Fri, 13 Dec 2024 11:42:46 +0000 Subject: [PATCH 2/5] Use govukPagination component --- app/views/_includes/pagination.njk | 59 ++++++++++++++---------------- 1 file changed, 27 insertions(+), 32 deletions(-) diff --git a/app/views/_includes/pagination.njk b/app/views/_includes/pagination.njk index 5159f2f4d..f00504fcb 100644 --- a/app/views/_includes/pagination.njk +++ b/app/views/_includes/pagination.njk @@ -1,35 +1,30 @@ +{# TODO: make pagination dynamic #} +

+ Showing 1 to 100 of 346 results +

- -{% set pagination = { - from: 1, - to: 100, - count: count or 346, +{{ govukPagination({ + previous: { + href: "?page=" + (page-1) + } if page > 1, next: { - text: 'Next', - href: '?page=' + 2 - }, - items: [{ - text: '1', - href: '?page=1', - selected: true - }, { - text: '2', - href: '?page=2', - selected: false - }, { - text: '3', - href: '?page=3' - }] -} %} - -{{ mojPagination({ - results: { - from: pagination.from, - to: pagination.to, - count: pagination.count - }, - previous: pagination.previous, - next: pagination.next, - items: pagination.items, - classes: 'govuk-!-margin-bottom-3' + href: "?page=" + (page+1) + } if page < 3, + items: [ + { + number: 1, + href: "?page=1", + current: true if page == 1 + }, + { + number: 2, + href: "?page=2", + current: true if page == 2 + }, + { + number: 3, + href: "?page=3", + current: true if page == 3 + } + ] }) }} From fba16c7e577d424720befdba603ba16b644efbb8 Mon Sep 17 00:00:00 2001 From: Simon Whatley Date: Fri, 13 Dec 2024 11:42:57 +0000 Subject: [PATCH 3/5] Add page to res.locals --- app/routes.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/routes.js b/app/routes.js index 206b46b46..63a5c7f6a 100755 --- a/app/routes.js +++ b/app/routes.js @@ -18,6 +18,10 @@ router.all('*', (req, res, next) => { res.locals.referrer = req.query.referrer.split(',') } + if (req.query?.page) { + res.locals.page = req.query.page + } + // Only search by the query if there is one // (and get "undefined" instead of "{}" if there is no query) const hasQuery = !_.isEmpty(req.query) From 6c46548b77d335fc66dc19b1e39c407b0078cad3 Mon Sep 17 00:00:00 2001 From: Simon Whatley Date: Fri, 13 Dec 2024 11:44:42 +0000 Subject: [PATCH 4/5] Remove MOJ pagination component --- app/assets/sass/application.scss | 1 - .../sass/overrides/_moj-pagination.scss | 26 ------------------- app/views/layout.njk | 1 - 3 files changed, 28 deletions(-) delete mode 100644 app/assets/sass/overrides/_moj-pagination.scss diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss index aa6e61834..de812dd2d 100755 --- a/app/assets/sass/application.scss +++ b/app/assets/sass/application.scss @@ -61,7 +61,6 @@ $govuk-assets-path: "/dist/govuk/assets/"; @import "overrides/govuk-tag"; @import "overrides/moj-button-menu"; @import "overrides/moj-filter"; -@import "overrides/moj-pagination"; @import "overrides/moj-primary-navigation"; @import "overrides/status-grid"; @import "overrides/summary-card"; diff --git a/app/assets/sass/overrides/_moj-pagination.scss b/app/assets/sass/overrides/_moj-pagination.scss deleted file mode 100644 index 2952cc133..000000000 --- a/app/assets/sass/overrides/_moj-pagination.scss +++ /dev/null @@ -1,26 +0,0 @@ -//// -/// @group helpers/moj-pagination -//// -/// Removed margin to stop pagination overflowing container -/// Todo: investigate why this happens - -.moj-pagination { - margin-right: 0; - margin-left: 0; -} - -.moj-pagination__list { - padding-left: 0; - - .moj-pagination__item:first-of-type { - padding-left: 0; - } -} - -.moj-pagination__results { - padding-left: 0; - @include govuk-media-query($from: desktop) { - padding-right: 0; - padding-left: inherit; - } -} diff --git a/app/views/layout.njk b/app/views/layout.njk index 473c949d2..99af4f023 100755 --- a/app/views/layout.njk +++ b/app/views/layout.njk @@ -53,7 +53,6 @@ {# moj components #} {%- from "moj/components/filter/macro.njk" import mojFilter -%} {%- from "moj/components/button-menu/macro.njk" import mojButtonMenu -%} -{%- from "moj/components/pagination/macro.njk" import mojPagination -%} {%- from "moj/components/primary-navigation/macro.njk" import mojPrimaryNavigation -%} {% block head %} From 5bceb96fa495af06fdd514ea68ae387b444792ad Mon Sep 17 00:00:00 2001 From: Simon Whatley Date: Fri, 13 Dec 2024 11:54:12 +0000 Subject: [PATCH 5/5] Update previous/next numbering --- app/routes.js | 2 ++ app/views/_includes/pagination.njk | 8 ++++++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/app/routes.js b/app/routes.js index 63a5c7f6a..2be9b50eb 100755 --- a/app/routes.js +++ b/app/routes.js @@ -20,6 +20,8 @@ router.all('*', (req, res, next) => { if (req.query?.page) { res.locals.page = req.query.page + res.locals.nextPage = parseInt(req.query.page) + 1 + res.locals.prevPage = parseInt(req.query.page) - 1 } // Only search by the query if there is one diff --git a/app/views/_includes/pagination.njk b/app/views/_includes/pagination.njk index f00504fcb..947452251 100644 --- a/app/views/_includes/pagination.njk +++ b/app/views/_includes/pagination.njk @@ -3,12 +3,16 @@ Showing 1 to 100 of 346 results

+{% if not page %} + {% set page = 1 %} +{% endif %} + {{ govukPagination({ previous: { - href: "?page=" + (page-1) + href: "?page=" + prevPage } if page > 1, next: { - href: "?page=" + (page+1) + href: "?page=" + nextPage } if page < 3, items: [ {