Merge pull request #1146 from research-software-directory/1098-page-c…

…ounts Pagination ranges
research-software-directory · Mar 22, 2024 · 3a76ed3 · 3a76ed3
2 parents 7790e25 + 52832f0
commit 3a76ed3
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 15 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -110,7 +110,7 @@ services:
       # dockerfile to use for build
       dockerfile: Dockerfile
     # update version number to correspond to frontend/package.json
-    image: rsd/frontend:2.8.1
+    image: rsd/frontend:2.8.2
     environment:
       # it uses values from .env file
       - POSTGREST_URL

diff --git a/frontend/components/organisation/projects/search/OrgSearchProjectSection.tsx b/frontend/components/organisation/projects/search/OrgSearchProjectSection.tsx
@@ -1,7 +1,8 @@
+// SPDX-FileCopyrightText: 2023 - 2024 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 dv4all
+// SPDX-FileCopyrightText: 2024 Ewan Cahen (Netherlands eScience Center) <[email protected]>
 //
 // SPDX-License-Identifier: Apache-2.0
 
@@ -15,6 +16,7 @@ import useQueryChange from '../useQueryChange'
 import {useState} from 'react'
 import OrgProjectFiltersModal from '../filters/OrgProjectFiltersModal'
 import useProjectParams from '../useProjectParams'
+import {getPageRange} from '~/utils/pagination'
 
 type SearchSectionProps = {
   // search?: string | null
@@ -63,7 +65,7 @@ export default function OrganisationSearchProjectSection({
       </div>
       <div className="flex justify-between items-center px-1 py-2">
         <div className="text-sm opacity-70">
-          Page {page ?? 1} of {count} results
+          {getPageRange(rows, page, count)}
         </div>
         {smallScreen === true &&
           <Button

diff --git a/frontend/components/organisation/software/search/OrgSearchSoftwareSection.tsx b/frontend/components/organisation/software/search/OrgSearchSoftwareSection.tsx
@@ -1,7 +1,8 @@
+// SPDX-FileCopyrightText: 2023 - 2024 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 dv4all
+// SPDX-FileCopyrightText: 2024 Ewan Cahen (Netherlands eScience Center) <[email protected]>
 //
 // SPDX-License-Identifier: Apache-2.0
 
@@ -15,6 +16,7 @@ import ViewToggleGroup, {ProjectLayoutType} from '~/components/projects/overview
 import useQueryChange from '~/components/organisation/projects/useQueryChange'
 import OrgSoftwareFiltersModal from '../filters/OrgSoftwareFiltersModal'
 import useSoftwareParams from '../filters/useSoftwareParams'
+import {getPageRange} from '~/utils/pagination'
 
 type SearchSectionProps = {
   // search?: string | null
@@ -63,7 +65,7 @@ export default function OrgSearchSoftwareSection({
       </div>
       <div className="flex justify-between items-center px-1 py-2">
         <div className="text-sm opacity-70">
-          Page {page ?? 1} of {count} results
+          {getPageRange(rows, page, count)}
         </div>
         {smallScreen === true &&
           <Button

diff --git a/frontend/components/profile/projects/ProfileSearchProjects.tsx b/frontend/components/profile/projects/ProfileSearchProjects.tsx
@@ -1,12 +1,14 @@
+// SPDX-FileCopyrightText: 2023 - 2024 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
-// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
+// SPDX-FileCopyrightText: 2024 Ewan Cahen (Netherlands eScience Center) <[email protected]>
 //
 // SPDX-License-Identifier: Apache-2.0
 
 import {ProjectLayoutType} from '~/components/projects/overview/search/ViewToggleGroup'
 import useQueryChange from '~/components/organisation/projects/useQueryChange'
 import useProjectParams from '~/components/organisation/projects/useProjectParams'
 import ProfileSearchPanel from '~/components/profile/ProfileSearchPanel'
+import {getPageRange} from '~/utils/pagination'
 
 type ProfileSearchSoftware = {
   count: number
@@ -41,7 +43,7 @@ export default function ProfileSearchProjects({
       />
       <div className="flex justify-between items-center px-1 py-2">
         <div className="text-sm opacity-70">
-          Page {page ?? 1} of {count} results
+          {getPageRange(rows, page, count)}
         </div>
       </div>
     </section>

diff --git a/frontend/components/profile/software/ProfileSearchSoftware.tsx b/frontend/components/profile/software/ProfileSearchSoftware.tsx
@@ -1,12 +1,14 @@
+// SPDX-FileCopyrightText: 2023 - 2024 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
-// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
+// SPDX-FileCopyrightText: 2024 Ewan Cahen (Netherlands eScience Center) <[email protected]>
 //
 // SPDX-License-Identifier: Apache-2.0
 
 import {ProjectLayoutType} from '~/components/projects/overview/search/ViewToggleGroup'
 import useQueryChange from '~/components/organisation/projects/useQueryChange'
 import useSoftwareParams from '~/components/organisation/software/filters/useSoftwareParams'
 import ProfileSearchPanel from '~/components/profile/ProfileSearchPanel'
+import {getPageRange} from '~/utils/pagination'
 
 type ProfileSearchSoftware = {
   count: number
@@ -41,7 +43,7 @@ export default function ProfileSearchSoftware({
       />
       <div className="flex justify-between items-center px-1 py-2">
         <div className="text-sm opacity-70">
-          Page {page ?? 1} of {count} results
+          {getPageRange(rows, page, count)}
         </div>
       </div>
     </section>

diff --git a/frontend/components/projects/overview/search/ProjectSearchSection.tsx b/frontend/components/projects/overview/search/ProjectSearchSection.tsx
@@ -1,7 +1,8 @@
+// SPDX-FileCopyrightText: 2023 - 2024 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 dv4all
+// SPDX-FileCopyrightText: 2024 Ewan Cahen (Netherlands eScience Center) <[email protected]>
 //
 // SPDX-License-Identifier: Apache-2.0
 
@@ -12,6 +13,7 @@ import SearchInput from '~/components/search/SearchInput'
 import SelectRows from '~/components/software/overview/search/SelectRows'
 import ViewToggleGroup, {ProjectLayoutType} from './ViewToggleGroup'
 import useProjectOverviewParams from '../useProjectOverviewParams'
+import {getPageRange} from '~/utils/pagination'
 
 type SearchSectionProps = {
   page: number
@@ -51,7 +53,7 @@ export default function ProjectSearchSection({
       </div>
       <div className="flex justify-between items-center px-1 py-2">
         <div className="text-sm opacity-70">
-          Page {page ?? 1} of {count} results
+          {getPageRange(rows, page, count)}
         </div>
         {smallScreen === true &&
           <Button

diff --git a/frontend/components/software/overview/search/SoftwareSearchSection.tsx b/frontend/components/software/overview/search/SoftwareSearchSection.tsx
@@ -1,7 +1,8 @@
+// SPDX-FileCopyrightText: 2023 - 2024 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 dv4all
+// SPDX-FileCopyrightText: 2024 Ewan Cahen (Netherlands eScience Center) <[email protected]>
 //
 // SPDX-License-Identifier: Apache-2.0
 
@@ -12,6 +13,7 @@ import SearchInput from '~/components/search/SearchInput'
 import ViewToggleGroup, {LayoutType} from './ViewToggleGroup'
 import SelectRows from './SelectRows'
 import useSoftwareOverviewParams from '../useSoftwareOverviewParams'
+import {getPageRange} from '~/utils/pagination'
 
 type SearchSectionProps = {
   page: number
@@ -51,7 +53,7 @@ export default function SoftwareSearchSection({
       </div>
       <div className="flex justify-between items-center px-1 py-2">
         <div className="text-sm opacity-70">
-          Page {page ?? 1} of {count} results
+          {getPageRange(rows, page, count)}
         </div>
         {smallScreen === true &&
           <Button

diff --git a/frontend/pages/software/index.tsx b/frontend/pages/software/index.tsx
@@ -1,7 +1,8 @@
+// SPDX-FileCopyrightText: 2023 - 2024 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 dv4all
+// SPDX-FileCopyrightText: 2024 Ewan Cahen (Netherlands eScience Center) <[email protected]>
 //
 // SPDX-License-Identifier: Apache-2.0
 
@@ -63,7 +64,7 @@ type SoftwareOverviewProps = {
 }
 
 const pageTitle = `Software | ${app.title}`
-const pageDesc = 'The list of research software registerd in the Research Software Directory.'
+const pageDesc = 'The list of research software registered in the Research Software Directory.'
 
 export default function SoftwareOverviewPage({
   search, keywords,

diff --git a/frontend/utils/pagination.ts b/frontend/utils/pagination.ts
@@ -0,0 +1,12 @@
+// SPDX-FileCopyrightText: 2024 Ewan Cahen (Netherlands eScience Center) <[email protected]>
+// SPDX-FileCopyrightText: 2024 Netherlands eScience Center
+//
+// SPDX-License-Identifier: Apache-2.0
+
+export function getPageRange(rows: number, page: number, total: number): string {
+  if (page <= 0) {
+    page = 1
+  }
+
+  return `${(page - 1) * rows + 1}-${Math.min(total, page * rows)} of ${total}`
+}