Kt 2021 11 pagination

meinberlin/apps/budgeting/api.py

@@ -1,5 +1,6 @@
 from rest_framework import mixins
 from rest_framework import viewsets
+from rest_framework.pagination import PageNumberPagination
 
 from adhocracy4.api.mixins import ModuleMixin
 from adhocracy4.api.permissions import ViewSetRulesPermission
@@ -8,11 +9,24 @@
 from .serializers import ProposalSerializer
 
 
+# To be changed to a more general IdeaPagination, when using
+# pagination via rest api for more idea lists
+class BudgetPagination(PageNumberPagination):
+    page_size = 15
+
+    def get_paginated_response(self, data):
+        response = super(BudgetPagination, self).get_paginated_response(data)
+        response.data['page_size'] = self.page_size
+        response.data['page_count'] = self.page.paginator.num_pages
+        return response
+
+
 class ProposalViewSet(ModuleMixin,
                       mixins.ListModelMixin,
                       viewsets.GenericViewSet,
                       ):
 
+    pagination_class = BudgetPagination
     serializer_class = ProposalSerializer
     permission_classes = (ViewSetRulesPermission,)
 

meinberlin/apps/budgeting/assets/BudgetingProposalList.jsx

@@ -1,23 +1,51 @@
 import React, { useEffect, useState } from 'react'
 import { BudgetingProposalListItem } from './BudgetingProposalListItem'
+import { Pagination } from './Pagination'
 
 export const BudgetingProposalList = (props) => {
-  const [proposals, setProposals] = useState([])
-  useEffect(() => {
-    fetch(props.proposals_api_url)
+  const [data, setData] = useState([])
+  const [meta, setMeta] = useState()
+
+  const fetchProposals = (newIndex) => {
+    const pageNumber = newIndex || 1
+    const url = `${props.proposals_api_url}?page=${pageNumber}`
+    fetch(url)
       .then(resp => resp.json())
-      .then(json => setProposals(json))
-  }, [])
+      .then(json => {
+        setData(json.results)
+        setMeta({
+          current_page: pageNumber,
+          page_count: json.page_count,
+          is_paginated: json.page_count > 1,
+          previous: json.previous,
+          next: json.next
+        })
+      })
+      .catch(error => console.log(error))
+  }
+
+  const onPaginate = (selectedPage) => {
+    fetchProposals(selectedPage)
+  }
+
+  useEffect(fetchProposals, [])
+
   return (
     <div className="l-wrapper">
       <div className="l-center-8">
         <ul className="u-list-reset">
-          {proposals.map((proposal, idx) =>
+          {data.map((proposal, idx) =>
             <BudgetingProposalListItem
               key={`budgeting-proposal-${idx}`}
               proposal={proposal}
             />)}
         </ul>
+        {meta?.is_paginated &&
+          <Pagination
+            currPageIndex={meta.current_page}
+            pageCount={meta.page_count}
+            onPaginate={newUrl => onPaginate(newUrl)}
+          />}
       </div>
     </div>
   )

meinberlin/apps/budgeting/assets/Pagination.jest.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { render, fireEvent, screen } from '@testing-library/react'
+import { Pagination } from './Pagination'
+
+test('clicking on page 2 returns value of 2', () => {
+  const onPageChangedFn = jest.fn()
+  render(
+    <Pagination
+      currPageIndex={1}
+      pageCount={3}
+      onPaginate={selPage => onPageChangedFn(selPage)}
+    />
+  )
+  const pageButton2 = screen.getByText('2')
+  fireEvent.click(pageButton2)
+  expect(onPageChangedFn).toHaveBeenCalledWith(2)
+})

meinberlin/apps/budgeting/assets/Pagination.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import django from 'django'
+
+export const Pagination = (props) => {
+  const {
+    currPageIndex,
+    pageCount
+  } = props
+
+  // Creating an Array from single digit, example: 5 = [0,1,2,3,4]
+  // and map to start by 1
+  const pages = [...Array(pageCount).keys()].map(n => n + 1)
+
+  return (
+    <nav aria-label={django.gettext('Page navigation')}>
+      <ul className="pagination">
+        {pages.map(num => (
+          <li
+            key={`page-${num}`}
+            className={
+              num === currPageIndex
+                ? 'pagination-item active'
+                : 'pagination-item'
+              }
+          >
+            <button onClick={() => props.onPaginate(num)}>
+              {num}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}

meinberlin/apps/budgeting/templates/meinberlin_budgeting/proposal_list.html

@@ -1,5 +1,5 @@
 {% extends extends %}
-{% load i18n discovery_tags static maps_tags %}
+{% load i18n discovery_tags static maps_tags react_proposals %}
 
 {% block extra_js %}
     <script type="text/javascript" src="{% static 'a4maps_display_points.js' %}"></script>
@@ -40,6 +40,7 @@
         </div>
     {% else %}
         <div class="module-content--light">
+            {% react_proposals view.module %}
             <div class="l-wrapper">
                 <div class="l-center-8">
                     {% if object_list.count > 0 %}

meinberlin/assets/scss/components/_pagination.scss

@@ -10,7 +10,8 @@
     float: left;
     display: inline-block;
 
-    a {
+    a,
+    button {
         display: inline-block;
         min-width: 1.4em + 2 * 0.5em;
         margin-right: -1px;
@@ -25,7 +26,8 @@
         }
     }
 
-    &.active a {
+    &.active a,
+    &.active button {
         background-color: $link-color;
         color: contrast-color($link-color);
         border-color: $link-color;

meinberlin/config/settings/base.py

@@ -539,3 +539,4 @@
     'BLUEPRINTS': 'meinberlin.apps.dashboard.blueprints.blueprints'}
 
 A4_ACTIONS_PHASE_ENDS_HOURS = 48
+