feat: added pagination to servizio cards in UO (#678)

* feat: added pagination to servizio cards in UO * fix: better syntaxis + lodash range function * fix: code rework for optimization * chore: fixed release.md * chore: removed unused import
RedTurtle · May 20, 2024 · 4abefd5 · 4abefd5
1 parent a223f33
commit 4abefd5
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 3 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -45,6 +45,7 @@
 
 ### Migliorie
 
+- Se il CT UO è collegato a più di 4 servizi, le card dei servizi collegati verranno divise in diverse pagine navigabili da uno strumento di paginazione per rendere lo scorrimento della pagina più semplice.
 - Cambiato il layout delle immagini all'interno del blocco Griglia.
 - Migliorata la visualizzazione delle parole evidenziate nella pagina di Ricerca.
 

diff --git a/src/components/ItaliaTheme/Pagination/Pagination.jsx b/src/components/ItaliaTheme/Pagination/Pagination.jsx
@@ -81,6 +81,9 @@ class Pagination extends Component {
       totalPages,
     });
 
+    const inactivePrevButton = activePage === 1;
+    const inactiveForwButton = activePage === this.props.totalPages;
+
     return (
       <Pager
         className="justify-content-center mt-5"
@@ -96,6 +99,8 @@ class Pagination extends Component {
                   onClick={this.handleItemClick}
                   type={type}
                   ellipsisItem={ellipsisItem}
+                  isPrevButtonInactive={inactivePrevButton}
+                  isForwButtonInactive={inactiveForwButton}
                 >
                   {value}
                 </PaginationItem>

diff --git a/src/components/ItaliaTheme/Pagination/PaginationItem.jsx b/src/components/ItaliaTheme/Pagination/PaginationItem.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import cx from 'classnames';
 import _ from 'lodash';
 import keyboardKey from 'keyboard-key';
 import PropTypes from 'prop-types';
@@ -50,6 +51,9 @@ class PaginationItem extends Component {
       'nextItem',
       'lastItem',
     ]),
+
+    isPrevButtonInactive: PropTypes.bool,
+    isForwButtonInactive: PropTypes.bool,
   };
 
   handleClick = (e) => {
@@ -63,7 +67,15 @@ class PaginationItem extends Component {
   };
 
   render() {
-    const { active, type, children, intl, ellipsisItem } = this.props;
+    const {
+      active,
+      type,
+      children,
+      intl,
+      ellipsisItem,
+      isPrevButtonInactive,
+      isForwButtonInactive,
+    } = this.props;
     const disabled = this.props.disabled || type === 'ellipsisItem';
     return (
       <PagerItem disabled={disabled}>
@@ -79,6 +91,7 @@ class PaginationItem extends Component {
                 icon="it-chevron-left"
                 style={{ ariaHidden: true }}
                 color="primary"
+                className={cx({ disabled: isPrevButtonInactive })}
                 title={intl.formatMessage(messages.prevPage)}
               />
 
@@ -93,6 +106,7 @@ class PaginationItem extends Component {
                 icon="it-chevron-right"
                 style={{ ariaHidden: true }}
                 color="primary"
+                className={cx({ disabled: isForwButtonInactive })}
                 title={intl.formatMessage(messages.nextPage)}
               />
               <span className="visually-hidden">

diff --git a/src/components/ItaliaTheme/View/UOView/UOServices.jsx b/src/components/ItaliaTheme/View/UOView/UOServices.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import {
   Row,
@@ -9,6 +9,7 @@ import {
   CardTitle,
   CardText,
 } from 'design-react-kit';
+import { Pagination } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { UniversalLink } from '@plone/volto/components';
 
 const messages = defineMessages({
@@ -18,9 +19,35 @@ const messages = defineMessages({
   },
 });
 
+//* Pagination **/
+const divideServicesIntoBatches = (arr, batchSize) => {
+  const batches = [];
+  for (let i = 0; i < arr.length; i += batchSize) {
+    batches.push(arr.slice(i, i + batchSize));
+  }
+  return batches;
+};
+
 const UOServices = ({ content }) => {
   const intl = useIntl();
 
+  const [currentPage, setCurrentPage] = useState(1);
+  const bSize = 4;
+
+  //* Calcolo numero pagine
+
+  const servizi_offerti =
+    content.servizi_offerti === undefined || content.servizi_offerti === null
+      ? []
+      : content.servizi_offerti;
+
+  const pageNumbers = Math.ceil(servizi_offerti.length / bSize);
+
+  const onPaginationChange = (activePage) => {
+    const current = activePage?.children ?? 1;
+    setCurrentPage(current);
+  };
+
   return content?.servizi_offerti?.length > 0 ? (
     <section
       id={'servizi_offerti'}
@@ -30,7 +57,9 @@ const UOServices = ({ content }) => {
         {intl.formatMessage(messages.servizi_offerti)}
       </h2>
       <Row className="card-wrapper card-teaser-wrapper align-items-stretch">
-        {content?.servizi_offerti?.map((servizio, i) => (
+        {divideServicesIntoBatches(content?.servizi_offerti, bSize)[
+          currentPage - 1
+        ]?.map((servizio, i) => (
           <Col xs="12" lg="6">
             <Card className="shadow rounded card-big-io-comune p-3 my-3">
               <CardBody>
@@ -46,6 +75,13 @@ const UOServices = ({ content }) => {
           </Col>
         ))}
       </Row>
+      <div className="pagination-wrapper">
+        <Pagination
+          activePage={currentPage}
+          totalPages={pageNumbers}
+          onPageChange={(e, { activePage }) => onPaginationChange(activePage)}
+        />
+      </div>
     </section>
   ) : null;
 };

diff --git a/src/theme/ItaliaTheme/Components/_pager.scss b/src/theme/ItaliaTheme/Components/_pager.scss
@@ -19,3 +19,13 @@
     }
   }
 }
+
+.pagination-wrapper {
+  li.page-item {
+    button.page-link {
+      .icon.icon-primary.disabled {
+        fill: $gray-600 !important;
+      }
+    }
+  }
+}