diff --git a/hat/assets/js/apps/Iaso/components/files/pdf/PdfPreview.tsx b/hat/assets/js/apps/Iaso/components/files/pdf/PdfPreview.tsx index 6e6a4d39b4..d1cbb2f3f1 100644 --- 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 = ({ pdfUrl }) => { - const [open, setOpen] = useState(false); // State to manage dialog open/close + const [open, setOpen] = useState(false); + const [numPages, setNumPages] = useState(null); + const [pageNumber, setPageNumber] = useState(1); const { formatMessage } = useSafeIntl(); const handleOpen = () => { @@ -46,6 +86,23 @@ export const PdfPreview: FunctionComponent = ({ 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 ( <> = ({ pdfUrl }) => { open={open} onClose={handleClose} > - - - - + + + } + > + + + - - - + + + changePage(-1)} + disabled={pageNumber <= 1} + size="small" + > + + + + {formatMessage(MESSAGES.pageInfo, { + current: pageNumber, + total: numPages || 0, + })} + + changePage(1)} + disabled={pageNumber >= (numPages || 1)} + size="small" + > + + + + + + + )} diff --git a/hat/assets/js/apps/Iaso/components/files/pdf/messages.ts b/hat/assets/js/apps/Iaso/components/files/pdf/messages.ts index 6f4d8e1605..46f968f0d9 100644 --- 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 index bf270cf2a4..da6c2a22f0 100644 --- 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 index b1347052c6..fffd1faee7 100644 --- 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",