@movalib/movalib-commons 1.55.6 → 1.55.7

package/dist/src/components/QrCodePLVContainer/QrCodePLVContainer.js

@@ -94,6 +94,7 @@ var QrCodePLVContainer = function (_a) {
     var _b = (0, react_1.useState)(null), selectedChoice = _b[0], setSelectedChoice = _b[1];
     var _c = (0, react_1.useState)(''), urlA4 = _c[0], setUrlA4 = _c[1];
     var _d = (0, react_1.useState)(''), urlA3 = _d[0], setUrlA3 = _d[1];
+    var _e = (0, react_1.useState)(false), isReady = _e[0], setIsReady = _e[1];
     var qrCodeRef = (0, react_1.useRef)(null);
     var theme = (0, material_1.useTheme)();
     var PLVrefA4 = (0, react_1.useRef)(null);
@@ -147,6 +148,14 @@ var QrCodePLVContainer = function (_a) {
             setUrlA3(url);
         });
     }, [data]);
+    (0, react_1.useEffect)(function () {
+        if (PLVrefA4.current || PLVrefA3.current) {
+            setIsReady(true);
+        }
+        else {
+            setIsReady(false);
+        }
+    }, [PLVrefA4.current, PLVrefA3.current]);
     function printPLV(format) {
         return __awaiter(this, void 0, void 0, function () {
             var pdfUrl, response, existingPdfBytes, pdfDoc, qrCodeBlob, qrImageBytes, qrImage, pages, firstPage, _a, width, height, optionQrcode, modifiedPdfBytes, blob, url, loadingTask, pdf, page, canvas, context, viewport, renderContext, imageUrl;
@@ -208,7 +217,7 @@ var QrCodePLVContainer = function (_a) {
                         page = _b.sent();
                         canvas = document.createElement('canvas');
                         context = canvas.getContext('2d');
-                        viewport = page.getViewport({ scale: 1.5 });
+                        viewport = page.getViewport({ scale: 4 });
                         canvas.width = viewport.width;
                         canvas.height = viewport.height;
                         renderContext = {
@@ -283,7 +292,7 @@ var QrCodePLVContainer = function (_a) {
                 return function () { };
         }
     }, [selectedChoice, downloadQRCodeHeadless, downloadQrCodeWithCTA, printA3PLV, printA4PLV]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '24px' }, { children: [urlA4 && (0, jsx_runtime_1.jsx)(PLVComponent_1.PLVComponentV2, { ref: PLVrefA4, url: urlA4, printSize: PLVComponent_1.PrintSize.A4 }), urlA3 && (0, jsx_runtime_1.jsx)(PLVComponent_1.PLVComponentV2, { ref: PLVrefA3, url: urlA3, printSize: PLVComponent_1.PrintSize.A3 }), (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true, justifyContent: 'center', alignItems: 'center' }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 7 }, { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ fullWidth: true, size: 'small' }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, __assign({ id: 'qrcode-plv-select' }, { children: "Choisissez votre support" })), (0, jsx_runtime_1.jsxs)(material_1.Select, __assign({ labelId: 'qrcode-plv-select', label: 'Choisissez votre support', id: 'qrcode-plv-select', onChange: onChangeSelectedChoice, value: selectedChoice }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 'A4' }, { children: "\uD83E\uDDFE\u00A0\u00A0PLV format A4" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 'A3' }, { children: "\uD83E\uDDFE\u00A0\u00A0PLV format A3" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 'QR_Google' }, { children: "QR Code format GoogleMyBusiness" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 'QR_Headless' }, { children: "QR Code seul" }))] }))] })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 4, marginLeft: 3 }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ startIcon: selectedChoice === 'A3' || selectedChoice === 'A4' ? (0, jsx_runtime_1.jsx)(icons_material_1.DocumentScanner, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.QrCode2, {}), onClick: onClickDownload, variant: 'outlined', disabled: !selectedChoice, sx: { color: (0, material_1.darken)(theme.palette.primary.main, 0.2), borderRadius: '10rem' } }, { children: selectedChoice === 'A3' || selectedChoice === 'A4' ? 'Imprimer' : 'Télécharger' })) }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ id: 'qr-code-container', style: Tools_1.flexCenter }, { children: (0, jsx_runtime_1.jsx)("div", { ref: qrCodeRef, style: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '24px' }, { children: [urlA4 && (0, jsx_runtime_1.jsx)(PLVComponent_1.PLVComponentV2, { ref: PLVrefA4, url: urlA4, printSize: PLVComponent_1.PrintSize.A4 }), urlA3 && (0, jsx_runtime_1.jsx)(PLVComponent_1.PLVComponentV2, { ref: PLVrefA3, url: urlA3, printSize: PLVComponent_1.PrintSize.A3 }), (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true, justifyContent: 'center', alignItems: 'center' }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 7 }, { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ fullWidth: true, size: 'small' }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, __assign({ id: 'qrcode-plv-select' }, { children: "Choisissez votre support" })), (0, jsx_runtime_1.jsxs)(material_1.Select, __assign({ labelId: 'qrcode-plv-select', label: 'Choisissez votre support', id: 'qrcode-plv-select', onChange: onChangeSelectedChoice, value: selectedChoice }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 'A4' }, { children: "\uD83E\uDDFE\u00A0\u00A0PLV format A4" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 'A3' }, { children: "\uD83E\uDDFE\u00A0\u00A0PLV format A3" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 'QR_Google' }, { children: "QR Code format GoogleMyBusiness" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 'QR_Headless' }, { children: "QR Code seul" }))] }))] })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 4, marginLeft: 3 }, { children: (selectedChoice === 'A3' || selectedChoice === 'A4') && !isReady ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(material_1.Button, __assign({ startIcon: selectedChoice === 'A3' || selectedChoice === 'A4' ? (0, jsx_runtime_1.jsx)(icons_material_1.DocumentScanner, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.QrCode2, {}), onClick: onClickDownload, variant: 'outlined', disabled: !selectedChoice || ((selectedChoice === 'A3' || selectedChoice === 'A4') && !isReady), sx: { color: (0, material_1.darken)(theme.palette.primary.main, 0.2), borderRadius: '10rem' } }, { children: selectedChoice === 'A3' || selectedChoice === 'A4' ? 'Imprimer' : 'Télécharger' }))) }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ id: 'qr-code-container', style: Tools_1.flexCenter }, { children: (0, jsx_runtime_1.jsx)("div", { ref: qrCodeRef, style: {
                         height: '300px',
                         width: '300px',
                         maxWidth: '300px !important',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.55.6",
+  "version": "1.55.7",
   "description": "Bibliothèque d'objets communs à l'ensemble des projets React de Movalib",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/QrCodePLVContainer/QrCodePLVContainer.tsx

@@ -2,6 +2,7 @@ import { DocumentScanner, QrCode2 } from '@mui/icons-material';
 import {
   Box,
   Button,
+  CircularProgress,
   FormControl,
   Grid,
   InputLabel,
@@ -30,6 +31,7 @@ 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();
@@ -91,6 +93,14 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
     });
   }, [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`;
@@ -156,7 +166,7 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
     const canvas = document.createElement('canvas');
     const context = canvas.getContext('2d');
   
-    const viewport = page.getViewport({ scale: 1.5 });
+    const viewport = page.getViewport({ scale: 4});
     canvas.width = viewport.width;
     canvas.height = viewport.height;
   
@@ -267,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}>