Merge pull request #1793 from BLSQ/POLIO-1726-prevview-pdf-multipages

POLIO-1726: pdf preview pagination
BLSQ · Nov 13, 2024 · 7e3364c · 7e3364c
2 parents 8b8d7d3 + 94974a2
commit 7e3364c
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 24 deletions.
diff --git a/hat/assets/js/apps/Iaso/components/files/pdf/PdfPreview.tsx b/hat/assets/js/apps/Iaso/components/files/pdf/PdfPreview.tsx
@@ -1,13 +1,16 @@
+import { NavigateBefore, NavigateNext } from '@mui/icons-material';
 import {
+    Box,
     Button,
     Dialog,
     DialogActions,
     DialogContent,
     IconButton,
 } from '@mui/material';
-import { useSafeIntl } from 'bluesquare-components';
+import { LoadingSpinner, useSafeIntl } from 'bluesquare-components';
 import React, { FunctionComponent, useCallback, useState } from 'react';
 import { Document, Page, pdfjs } from 'react-pdf';
+import { SxStyles } from '../../../types/general';
 import PdfSvgComponent from '../../svg/PdfSvgComponent';
 import MESSAGES from './messages';
 
@@ -24,8 +27,45 @@ type PdfPreviewProps = {
     pdfUrl?: string;
 };
 
+const styles: SxStyles = {
+    dialogContent: {
+        px: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: 2,
+        height: '80vh',
+        overflow: 'auto',
+    },
+    documentContainer: {
+        display: 'flex',
+        justifyContent: 'center',
+        width: '100%',
+        position: 'relative',
+    },
+    dialogActions: {
+        flexDirection: 'column',
+        paddingBottom: 2,
+    },
+    pageControls: {
+        display: 'flex',
+        gap: '1rem',
+        alignItems: 'center',
+        width: '100%',
+        justifyContent: 'center',
+    },
+    dialogActionsButtons: {
+        display: 'flex',
+        gap: '1rem',
+        justifyContent: 'flex-end',
+        width: '100%',
+    },
+};
+
 export const PdfPreview: FunctionComponent<PdfPreviewProps> = ({ pdfUrl }) => {
-    const [open, setOpen] = useState(false); // State to manage dialog open/close
+    const [open, setOpen] = useState(false);
+    const [numPages, setNumPages] = useState<number | null>(null);
+    const [pageNumber, setPageNumber] = useState(1);
 
     const { formatMessage } = useSafeIntl();
     const handleOpen = () => {
@@ -46,6 +86,23 @@ export const PdfPreview: FunctionComponent<PdfPreviewProps> = ({ pdfUrl }) => {
             link.click();
         }
     }, [pdfUrl]);
+
+    const onDocumentLoadSuccess = ({
+        numPages: nextNumPages,
+    }: {
+        numPages: number;
+    }) => {
+        setNumPages(nextNumPages);
+        setPageNumber(1);
+    };
+
+    const changePage = (offset: number) => {
+        setPageNumber(prevPageNumber => {
+            const newPageNumber = prevPageNumber + offset;
+            return Math.min(Math.max(1, newPageNumber), numPages || 1);
+        });
+    };
+
     return (
         <>
             <IconButton
@@ -62,29 +119,53 @@ export const PdfPreview: FunctionComponent<PdfPreviewProps> = ({ pdfUrl }) => {
                     open={open}
                     onClose={handleClose}
                 >
-                    <DialogContent
-                        sx={{
-                            px: 0,
-                            display: 'flex',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        <Document file={pdfUrl}>
-                            <Page
-                                pageNumber={1}
-                                width={880}
-                                renderTextLayer={false}
-                                renderAnnotationLayer={false}
-                            />
-                        </Document>
+                    <DialogContent sx={styles.dialogContent}>
+                        <Box sx={styles.documentContainer}>
+                            <Document
+                                file={pdfUrl}
+                                onLoadSuccess={onDocumentLoadSuccess}
+                                loading={<LoadingSpinner fixed={false} />}
+                            >
+                                <Page
+                                    pageNumber={pageNumber}
+                                    width={880}
+                                    renderTextLayer={false}
+                                    renderAnnotationLayer={false}
+                                />
+                            </Document>
+                        </Box>
                     </DialogContent>
-                    <DialogActions>
-                        <Button onClick={handleDownload} color="primary">
-                            {formatMessage(MESSAGES.download)}
-                        </Button>
-                        <Button onClick={handleClose} color="primary">
-                            {formatMessage(MESSAGES.close)}
-                        </Button>
+                    <DialogActions sx={styles.dialogActions}>
+                        <Box sx={styles.pageControls}>
+                            <IconButton
+                                onClick={() => changePage(-1)}
+                                disabled={pageNumber <= 1}
+                                size="small"
+                            >
+                                <NavigateBefore />
+                            </IconButton>
+                            <Box>
+                                {formatMessage(MESSAGES.pageInfo, {
+                                    current: pageNumber,
+                                    total: numPages || 0,
+                                })}
+                            </Box>
+                            <IconButton
+                                onClick={() => changePage(1)}
+                                disabled={pageNumber >= (numPages || 1)}
+                                size="small"
+                            >
+                                <NavigateNext />
+                            </IconButton>
+                        </Box>
+                        <Box sx={styles.dialogActionsButtons}>
+                            <Button onClick={handleDownload} color="primary">
+                                {formatMessage(MESSAGES.download)}
+                            </Button>
+                            <Button onClick={handleClose} color="primary">
+                                {formatMessage(MESSAGES.close)}
+                            </Button>
+                        </Box>
                     </DialogActions>
                 </Dialog>
             )}

diff --git a/hat/assets/js/apps/Iaso/components/files/pdf/messages.ts b/hat/assets/js/apps/Iaso/components/files/pdf/messages.ts
@@ -13,6 +13,10 @@ const MESSAGES = defineMessages({
         defaultMessage: 'Download',
         id: 'iaso.label.download',
     },
+    pageInfo: {
+        defaultMessage: 'Page {current} of {total}',
+        id: 'iaso.label.pageInfo',
+    },
 });
 
 export default MESSAGES;
diff --git a/hat/assets/js/apps/Iaso/domains/app/translations/en.json b/hat/assets/js/apps/Iaso/domains/app/translations/en.json
@@ -627,6 +627,7 @@
     "iaso.label.orgUnitsTypes": "Org unit types",
     "iaso.label.origin": "Origin",
     "iaso.label.others": "Others",
+    "iaso.label.pageInfo": "Page {current} of {total}",
     "iaso.label.pages": "Embedded links",
     "iaso.label.parameters": "Parameters",
     "iaso.label.parameterValue": "Parameter Value",
@@ -649,6 +650,7 @@
     "iaso.label.planning": "Planning",
     "iaso.label.planningList": "Planning list",
     "iaso.label.polio": "Polio",
+    "iaso.label.previous": "Previous",
     "iaso.label.project": "Project",
     "iaso.label.project.featureFlags": "Project feature flags",
     "iaso.label.project.qrCodeError": "Can't load project QR code",

diff --git a/hat/assets/js/apps/Iaso/domains/app/translations/fr.json b/hat/assets/js/apps/Iaso/domains/app/translations/fr.json
@@ -627,6 +627,7 @@
     "iaso.label.orgUnitsTypes": "Types d'unités d'org.",
     "iaso.label.origin": "Origine",
     "iaso.label.others": "Autres",
+    "iaso.label.pageInfo": "Page {current} de {total}",
     "iaso.label.pages": "Liens intégrés",
     "iaso.label.parameters": "Paramètres",
     "iaso.label.parameterValue": "Valeur du paramètre",
@@ -649,6 +650,7 @@
     "iaso.label.planning": "Planning",
     "iaso.label.planningList": "Liste des plannings",
     "iaso.label.polio": "Polio",
+    "iaso.label.previous": "Précédent",
     "iaso.label.project": "Projet",
     "iaso.label.project.featureFlags": "Options du projet",
     "iaso.label.project.qrCodeError": "Erreur de chargement du code QR du projet",