@movalib/movalib-commons 1.55.5 → 1.55.7

package/src/components/QrCodePLVContainer/PLVComponent.tsx

@@ -179,8 +179,35 @@ export class PLVComponent extends React.Component<PLVComponentProps> {
   }
 }
 
+
+
+export class PLVComponentV2 extends React.Component<PLVComponentProps> {
+  render() {
+    return (
+      <div
+        className='printable-content'
+        style={{
+          width:
+            this.props.printSize === PrintSize.A4 ? '210mm' : this.props.printSize === PrintSize.A3 ? '297mm' : '0mm',
+          height:
+            this.props.printSize === PrintSize.A4 ? '297mm' : this.props.printSize === PrintSize.A3 ? '420mm' : '0mm',
+        }}
+      >
+       <Grid container>
+          <Grid item xs={12}>
+            <img src={this.props.url} style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover' }}  />
+          </Grid>
+        </Grid>
+      </div>
+    );
+  }
+}
+
 // CSS pour cacher le contenu à l'écran mais le rendre imprimable
 const css = `
+body {
+      margin: 0;
+    }
     .highlight {
         background-color: #BCD46C; /* Couleur de surlignage */
         margin: 4px 4px; /* Espacement autour du texte surligné */
@@ -197,13 +224,21 @@ const css = `
     }
 
   .printable-content {
+    margin: 0;
+    padding: 0;
     visibility: hidden;
     position: absolute;
     left: -10000px;
     top: -10000px;
+
   }
   @media print {
+    body {
+      margin: 0;
+    }
     .printable-content {
+      margin: 0;
+      padding: 0;
       visibility: visible;
       position: static;
     }

package/src/components/QrCodePLVContainer/QrCodePLVContainer.tsx

@@ -2,6 +2,7 @@ import { DocumentScanner, QrCode2 } from '@mui/icons-material';
 import {
   Box,
   Button,
+  CircularProgress,
   FormControl,
   Grid,
   InputLabel,
@@ -20,21 +21,24 @@ import { useReactToPrint } from 'react-to-print';
 import { DownloadedQRCode } from '../../DownloadedQRCode';
 import QRCodeImage from '../../assets/images/leaf_yellow_small.png';
 import { flexCenter } from '../../helpers/Tools';
-import { PLVComponent, PrintSize } from './PLVComponent';
 import { PDFDocument } from 'pdf-lib';
-import { openDialogPrint } from '../../utils/DialogPrint';
+import { PLVComponentV2, PrintSize } from './PLVComponent';
+import * as pdfjsLib from 'pdfjs-dist';
+pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.mjs';
 
 type SelectChoice = null | 'A3' | 'A4' | 'QR_Headless' | 'QR_Google';
-
 export const QrCodePLVContainer = ({ data }: { data: string }) => {
   const [selectedChoice, setSelectedChoice] = useState<SelectChoice>(null);
+  const [urlA4, setUrlA4] = useState<string>('');
+  const [urlA3, setUrlA3] = useState<string>('');
+  const [isReady, setIsReady] = useState(false);
 
   const qrCodeRef = useRef<HTMLDivElement>(null);
   const theme = useTheme();
-
+  const PLVrefA4 = useRef<PLVComponentV2>(null);
+  const PLVrefA3 = useRef<PLVComponentV2>(null);
   //si sur l'impression des PLV en A4 ou A3 le Qrcode est flou, 
   //il faut modifier la width et height, imageSize du qrCodeOptions et mettre les mêmes valeurs que dans le optionQrcode de la fonction printPLV
-  //
   const qrCodeOptions: Options = useMemo(
     () => ({
       width: 300,
@@ -79,6 +83,24 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
       qrCode.append(qrCodeRef.current);
     }
   }, [qrCode]);
+
+  useEffect(() => {
+    const urlA4 = printPLV('A4').then((url) => {
+      setUrlA4(url);
+    });
+    const urlA3 = printPLV('A3').then((url) => {
+      setUrlA3(url);
+    });
+  }, [data]);
+
+  useEffect(() => {
+    if (PLVrefA4.current || PLVrefA3.current) {
+      setIsReady(true);
+    } else {
+      setIsReady(false);
+    }
+  }, [PLVrefA4.current, PLVrefA3.current]); 
+
   async function printPLV(format: string) {
     // Chemin du fichier PDF
    const pdfUrl = `/Movalib_${format}.pdf`;
@@ -97,7 +119,7 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
     const qrImage = await pdfDoc.embedPng(qrImageBytes!);
 
     const pages = pdfDoc.getPages();
-    const firstPage = pages[0]; // Ajouter le QR code à la première page
+    const firstPage = pages[0];
     const { width, height } = firstPage.getSize();
 
     let optionQrcode = {};
@@ -126,8 +148,38 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
     const blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
     const url = URL.createObjectURL(blob);
 
-    // Ouvrir la page d'impression
-    openDialogPrint(url);
+    // étape nécesssaire pour utiliser reactToPrint pour pouvoir nommer le document
+    // reactToPrint fonctionne uniquement avec le HTML
+    // donc il faut convertir le PDF en image
+    // puis convertir l'image en URL
+    // et enfin integrer l'image dans le HTML via la balise <img>
+  
+
+    // Convertir le PDF en image
+    const loadingTask = pdfjsLib.getDocument(url);
+    const pdf = await loadingTask.promise;
+  
+    // Récupérer la première page
+    const page = await pdf.getPage(1);
+  
+    // Créer un canvas pour afficher la page
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+  
+    const viewport = page.getViewport({ scale: 4});
+    canvas.width = viewport.width;
+    canvas.height = viewport.height;
+  
+    // Rendu de la page dans le canvas
+    const renderContext = {
+      canvasContext: context!,
+      viewport: viewport,
+    };
+    await page.render(renderContext).promise;
+  
+    // Convertir le canvas en URL d'image (data URL)
+    const imageUrl = canvas.toDataURL('image/png');
+    return imageUrl;
   }
 
   const downloadQRCodeHeadless = useCallback(() => {
@@ -176,13 +228,23 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
   const onChangeSelectedChoice: SelectProps<SelectChoice>['onChange'] = (e) => {
     setSelectedChoice(e.target.value as SelectChoice);
   };
+  
+  const printA3PLV = useReactToPrint({
+    content: () => PLVrefA3.current,
+    documentTitle: 'Movalib_PLV_A3',
+  });
+
+  const printA4PLV = useReactToPrint({
+    content: () => PLVrefA4.current,
+    documentTitle: 'Movalib_PLV_A4',
+  });
 
   const onClickDownload = useMemo(() => {
     switch (selectedChoice) {
       case 'A3':
-        return () => {printPLV('A3')};
+        return printA3PLV;
       case 'A4':
-        return () => {printPLV('A4')};
+        return printA4PLV;
       case 'QR_Headless':
         return downloadQRCodeHeadless;
       case 'QR_Google':
@@ -190,9 +252,12 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
       default:
         return () => {};
     }
-  }, [selectedChoice, downloadQRCodeHeadless, downloadQrCodeWithCTA]);
+  }, [selectedChoice, downloadQRCodeHeadless, downloadQrCodeWithCTA, printA3PLV, printA4PLV]);
   return (
     <Box display='flex' flexDirection='column' alignItems='center' gap='24px'>
+      {urlA4 && <PLVComponentV2 ref={PLVrefA4} url={urlA4} printSize={PrintSize.A4} />}
+      {urlA3 &&<PLVComponentV2 ref={PLVrefA3} url={urlA3} printSize={PrintSize.A3} />}
+
       <Grid container justifyContent='center' alignItems='center'>
         <Grid item xs={7}>
           <FormControl fullWidth size='small'>
@@ -212,15 +277,21 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
           </FormControl>
         </Grid>
         <Grid item xs={4} marginLeft={3}>
+
+        {(selectedChoice === 'A3' || selectedChoice === 'A4') && !isReady ? (
+          <CircularProgress />
+        ) : (
           <Button
             startIcon={selectedChoice === 'A3' || selectedChoice === 'A4' ? <DocumentScanner /> : <QrCode2 />}
             onClick={onClickDownload}
             variant='outlined'
-            disabled={!selectedChoice}
+            disabled={!selectedChoice || ((selectedChoice === 'A3' || selectedChoice === 'A4') && !isReady)}
             sx={{ color: darken(theme.palette.primary.main, 0.2), borderRadius: '10rem' }}
           >
             {selectedChoice === 'A3' || selectedChoice === 'A4' ? 'Imprimer' : 'Télécharger'}
-          </Button>
+            </Button>
+        )}
+
         </Grid>
       </Grid>
       <div id='qr-code-container' style={flexCenter}>

package/src/helpers/ApiHelper.ts

@@ -7,7 +7,6 @@ export const API_BASE_URL = process.env.REACT_APP_API_URL || 'https://localhost:
 type APISuccess<T> = {
     success: true;
     data: T;
-    location: string
 };
 
 type APIError = {
@@ -21,8 +20,8 @@ type APIError = {
 export type APIResponse<T> = {
     success: boolean,
     data?: T,
-    error?: string,
-    location?: string | null
+    error?: string
+
 }
 
 export type APIRequest = {
@@ -36,7 +35,7 @@ function handleError(error: Error): APIResponse<null>  {
     let msg = error.message.includes('fetch') ? "Connexion impossible" : error.message;
     return {
         success: false,
-        error: msg,
+        error: msg
     };
 }
 
@@ -45,8 +44,6 @@ function handleResponse(response: Response): Promise<APIResponse<any>> {
     const contentType = response.headers.get("content-type");
     const isJson = contentType && contentType.includes("application/json");
     const dataPromise = isJson ? response.json() : response.text();
-    const location = response.headers.get('Location');
-
 
     return dataPromise.then(data => {
 
@@ -70,7 +67,7 @@ function handleResponse(response: Response): Promise<APIResponse<any>> {
             return { success: false, error: errorMsg };
         }
 
-        return { success: true, data, location: location };
+        return { success: true, data };
     });
 }
 

package/src/utils/DialogPrint.tsx

@@ -1,4 +1,5 @@
 export function openDialogPrint(url: string) {
+    // Créer un iframe pour charger le document Blob => url
     const iframe = document.createElement('iframe');
         iframe.style.position = 'absolute';
         iframe.style.width = '0px';
@@ -10,7 +11,7 @@ export function openDialogPrint(url: string) {
     iframe.onload = () => {
       iframe?.contentWindow?.print();
     };
-    // Supprimer l'iframe une fois l'impression terminée
+    // Supprimer l'iframe une fois lque la dialog est fermer
     iframe.onclose = () => {
       document.body.removeChild(iframe);
       URL.revokeObjectURL(url);