feat(procedure): 🚀 add pagination

Signed-off-by: Manuel Ruck <[email protected]>

.vscode/settings.json

@@ -25,5 +25,6 @@
   "[ignore]": {
     "editor.defaultFormatter": "foxundermoon.shell-format"
   },
-  "conventionalCommits.scopes": ["push-send-queued"]
+  "conventionalCommits.scopes": ["push-send-queued"],
+  "CodeGPT.apiKey": "OpenAI"
 }

bundestag.io/admin/src/app/list/_components/pagination-navigation.tsx

@@ -0,0 +1,13 @@
+import Link from 'next/link';
+
+export const PaginationNavigation = ({ currentPage, totalPages }) => (
+  <div>
+    <Link href={`?page=${currentPage - 1}`} passHref>
+      <button disabled={currentPage === 1}>Previous</button>
+    </Link>
+    <span>{`Page ${currentPage} of ${totalPages}`}</span>
+    <Link href={`?page=${currentPage + 1}`} passHref>
+      <button disabled={currentPage === totalPages}>Next</button>
+    </Link>
+  </div>
+);

bundestag.io/admin/src/app/list/past/page.tsx

@@ -1,16 +1,47 @@
 import Entry from '../_components/entry';
 import { IProcedure } from '@democracy-deutschland/bundestagio-common';
 import { unstable_noStore as noStore } from 'next/cache';
+import Link from 'next/link';
+import { PaginationNavigation } from '../_components/pagination-navigation';
+
+const ITEMS_PER_PAGE = 10;
 
 export const dynamic = 'force-dynamic';
 
-export default async function Page() {
+async function getData(page: number = 1): Promise<{ procedures: IProcedure[]; count: number }> {
+  const limit = ITEMS_PER_PAGE;
+
+  console.log(
+    'getData',
+    page,
+    `${process.env.PROCEDURES_SERVER_URL}/procedures/list/past?limit=${limit}&offset=${page}`,
+  );
+  const res = await fetch(`${process.env.PROCEDURES_SERVER_URL}/procedures/list/past?limit=${limit}&page=${page}`, {
+    headers: {
+      'Cache-Control': 'no-cache',
+      cache: 'no-store',
+    },
+  });
+
+  if (!res.ok) {
+    throw new Error('Fehler beim Abrufen der Daten');
+  }
+
+  return res.json();
+}
+
+export default async function Page({ searchParams }: { searchParams: { page?: string } }) {
   noStore();
-  const data = await getData();
+  const currentPage = searchParams.page ? parseInt(searchParams.page, 10) : 1; // Standardwert ist Seite 1
+  const { procedures, count } = await getData(currentPage);
+  const totalPages = Math.ceil(count / ITEMS_PER_PAGE); // Berechne die Gesamtseitenzahl basierend auf der Anzahl der Elemente
+
   return (
     <>
       <h1>Past procedures</h1>
-      {data.map((procedure) => (
+      <PaginationNavigation currentPage={currentPage} totalPages={totalPages} />
+
+      {procedures.map((procedure) => (
         <Entry
           key={procedure.id}
           title={procedure.title}
@@ -21,21 +52,8 @@ export default async function Page() {
           }))}
         />
       ))}
+
+      <PaginationNavigation currentPage={currentPage} totalPages={totalPages} />
     </>
   );
 }
-
-async function getData(): Promise<IProcedure[]> {
-  const res = await fetch(`${process.env.PROCEDURES_SERVER_URL}/procedures/list/past`, {
-    headers: {
-      'Cache-Control': 'no-cache',
-      cache: 'no-store',
-    },
-  });
-
-  if (!res.ok) {
-    throw new Error('Fehler beim Abrufen der Daten');
-  }
-
-  return res.json();
-}

bundestag.io/admin/src/app/list/upcoming/page.tsx

@@ -1,16 +1,48 @@
 import Entry from '../_components/entry';
 import { IProcedure } from '@democracy-deutschland/bundestagio-common';
 import { unstable_noStore as noStore } from 'next/cache';
+import Link from 'next/link';
+import { PaginationNavigation } from '../_components/pagination-navigation';
+
+const ITEMS_PER_PAGE = 10;
 
 export const dynamic = 'force-dynamic';
 
-export default async function Page() {
+async function getData(page: number = 1): Promise<{ procedures: IProcedure[]; count: number }> {
+  const limit = ITEMS_PER_PAGE;
+
+  console.log(
+    'getData',
+    page,
+    `${process.env.PROCEDURES_SERVER_URL}/procedures/list/upcoming?limit=${limit}&offset=${page}`,
+  );
+  const res = await fetch(`${process.env.PROCEDURES_SERVER_URL}/procedures/list/upcoming?limit=${limit}&page=${page}`, {
+    headers: {
+      'Cache-Control': 'no-cache',
+      cache: 'no-store',
+    },
+  });
+
+  if (!res.ok) {
+    throw new Error('Fehler beim Abrufen der Daten');
+  }
+
+  return res.json();
+}
+
+export default async function Page({ searchParams }: { searchParams: { page?: string } }) {
   noStore();
-  const data = await getData();
+  const currentPage = searchParams.page ? parseInt(searchParams.page, 10) : 1; // Standardwert ist Seite 1
+  const { procedures, count } = await getData(currentPage);
+  const totalPages = Math.ceil(count / ITEMS_PER_PAGE); // Berechne die Gesamtseitenzahl basierend auf der Anzahl der Elemente
+
   return (
     <>
       <h1>Upcoming procedures</h1>
-      {data.map((procedure) => (
+
+      <PaginationNavigation currentPage={currentPage} totalPages={totalPages} />
+
+      {procedures.map((procedure) => (
         <Entry
           key={procedure.id}
           title={procedure.title}
@@ -21,21 +53,8 @@ export default async function Page() {
           }))}
         />
       ))}
+
+      <PaginationNavigation currentPage={currentPage} totalPages={totalPages} />
     </>
   );
 }
-
-async function getData(): Promise<IProcedure[]> {
-  const res = await fetch(`${process.env.PROCEDURES_SERVER_URL}/procedures/list/upcoming`, {
-    headers: {
-      'Cache-Control': 'no-cache',
-      cache: 'no-store',
-    },
-  });
-
-  if (!res.ok) {
-    throw new Error('Fehler beim Abrufen der Daten');
-  }
-
-  return res.json();
-}

services/procedures/bruno/environments/localhost.bru

@@ -1,3 +1,3 @@
 vars {
-  url: http://localhost:3000
+  url: http://localhost:3006
 }

services/procedures/bruno/findAll.bru

@@ -11,6 +11,6 @@ get {
 }
 
 assert {
-  res.body.procedureId: isString 
+  res.body.procedures[0].procedureId: isString
   res.status: eq 200
 }

services/procedures/bruno/pastProcedures.bru

@@ -5,12 +5,16 @@ meta {
 }
 
 get {
-  url: {{url}}/procedures/list/past
+  url: {{url}}/procedures/list/past?limit=2
   body: none
   auth: none
 }
 
+params:query {
+  limit: 2
+}
+
 assert {
-  res.body[0].procedureId: isString
+  res.body.count: gt 0
   res.status: eq 200
 }

services/procedures/bruno/upcomingProcedures.bru

@@ -5,12 +5,17 @@ meta {
 }
 
 get {
-  url: {{url}}/procedures/list/upcoming
+  url: {{url}}/procedures/list/upcoming?limit=1&page=2
   body: none
   auth: none
 }
 
+params:query {
+  limit: 1
+  page: 2
+}
+
 assert {
-  res.body[0].procedureId: isString
+  res.body.procedures[0].procedureId: isString
   res.status: eq 200
 }

services/procedures/garden.yml

@@ -32,7 +32,7 @@ spec:
         sourcePath: src
         mode: one-way
     overrides:
-      - command: [pnpm, --filter, procedures, run, garden:dev]
+      - command: [pnpm, --filter, procedures, run, dev]
   patchResources:
     - name: procedures
       kind: Deployment

services/procedures/src/decorators/pagination.ts

@@ -0,0 +1,14 @@
+import { createParamDecorator, ExecutionContext } from '@nestjs/common';
+
+export const Pagination = createParamDecorator(
+  (data: unknown, ctx: ExecutionContext) => {
+    const request = ctx.switchToHttp().getRequest();
+    const { page = 1, limit = 10 } = request.query;
+
+    // Ensure valid pagination values
+    const validPage = Math.max(1, parseInt(page));
+    const validLimit = Math.min(Math.max(1, parseInt(limit)), 100); // Max limit of 100
+
+    return { page: validPage, limit: validLimit };
+  },
+);