@movalib/movalib-commons 1.55.5 → 1.55.7

package/PV_README.md

@@ -4,7 +4,7 @@
 
 # 2. publish this movalib commons lib (public)
 
-### `npm login`
+### `npm login` // if you have token in .npmrc this commande is useless
 ### `npm publish --access=public`
 
 # 3. publish this movalib commons lib (private)

package/dist/src/components/QrCodePLVContainer/PLVComponent.d.ts

@@ -13,4 +13,7 @@ type PLVComponentProps = {
 export declare class PLVComponent extends React.Component<PLVComponentProps> {
     render(): import("react/jsx-runtime").JSX.Element;
 }
+export declare class PLVComponentV2 extends React.Component<PLVComponentProps> {
+    render(): import("react/jsx-runtime").JSX.Element;
+}
 export {};

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

@@ -29,7 +29,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PLVComponent = exports.PrintSize = void 0;
+exports.PLVComponentV2 = exports.PLVComponent = exports.PrintSize = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var react_1 = __importDefault(require("react"));
@@ -138,8 +138,22 @@ var PLVComponent = /** @class */ (function (_super) {
     return PLVComponent;
 }(react_1.default.Component));
 exports.PLVComponent = PLVComponent;
+var PLVComponentV2 = /** @class */ (function (_super) {
+    __extends(PLVComponentV2, _super);
+    function PLVComponentV2() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PLVComponentV2.prototype.render = function () {
+        return ((0, jsx_runtime_1.jsx)("div", __assign({ 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',
+            } }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ container: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)("img", { src: this.props.url, style: { display: 'block', width: '100%', height: '100%', objectFit: 'cover' } }) })) })) })));
+    };
+    return PLVComponentV2;
+}(react_1.default.Component));
+exports.PLVComponentV2 = PLVComponentV2;
 // CSS pour cacher le contenu à l'écran mais le rendre imprimable
-var css = "\n    .highlight {\n        background-color: #BCD46C; /* Couleur de surlignage */\n        margin: 4px 4px; /* Espacement autour du texte surlign\u00E9 */\n        padding-left : 8px;\n        padding-right: 8px;\n        font-weight: 500;\n        color: white;\n    }\n    .not-highlight {\n        margin: 4px 4px; /* Espacement autour du texte surlign\u00E9 */\n        padding-left : 8px;\n        padding-right: 8px;\n        color: #BCD46C;\n    }\n\n  .printable-content {\n    visibility: hidden;\n    position: absolute;\n    left: -10000px;\n    top: -10000px;\n  }\n  @media print {\n    .printable-content {\n      visibility: visible;\n      position: static;\n    }\n  }\n";
+var css = "\nbody {\n      margin: 0;\n    }\n    .highlight {\n        background-color: #BCD46C; /* Couleur de surlignage */\n        margin: 4px 4px; /* Espacement autour du texte surlign\u00E9 */\n        padding-left : 8px;\n        padding-right: 8px;\n        font-weight: 500;\n        color: white;\n    }\n    .not-highlight {\n        margin: 4px 4px; /* Espacement autour du texte surlign\u00E9 */\n        padding-left : 8px;\n        padding-right: 8px;\n        color: #BCD46C;\n    }\n\n  .printable-content {\n    margin: 0;\n    padding: 0;\n    visibility: hidden;\n    position: absolute;\n    left: -10000px;\n    top: -10000px;\n\n  }\n  @media print {\n    body {\n      margin: 0;\n    }\n    .printable-content {\n      margin: 0;\n      padding: 0;\n      visibility: visible;\n      position: static;\n    }\n  }\n";
 var styleSheet = document.createElement('style');
 styleSheet.innerText = css;
 document.head.appendChild(styleSheet);

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

@@ -10,6 +10,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -58,19 +81,26 @@ require("../../style/QRCode.css");
 var html2canvas_1 = __importDefault(require("html2canvas"));
 var qr_code_styling_1 = __importDefault(require("qr-code-styling"));
 var react_1 = require("react");
+var react_to_print_1 = require("react-to-print");
 var DownloadedQRCode_1 = require("../../DownloadedQRCode");
 var leaf_yellow_small_png_1 = __importDefault(require("../../assets/images/leaf_yellow_small.png"));
 var Tools_1 = require("../../helpers/Tools");
 var pdf_lib_1 = require("pdf-lib");
-var DialogPrint_1 = require("../../utils/DialogPrint");
+var PLVComponent_1 = require("./PLVComponent");
+var pdfjsLib = __importStar(require("pdfjs-dist"));
+pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.mjs';
 var QrCodePLVContainer = function (_a) {
     var data = _a.data;
     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);
+    var PLVrefA3 = (0, react_1.useRef)(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
-    //
     var qrCodeOptions = (0, react_1.useMemo)(function () { return ({
         width: 300,
         height: 300,
@@ -110,9 +140,25 @@ var QrCodePLVContainer = function (_a) {
             qrCode.append(qrCodeRef.current);
         }
     }, [qrCode]);
+    (0, react_1.useEffect)(function () {
+        var urlA4 = printPLV('A4').then(function (url) {
+            setUrlA4(url);
+        });
+        var urlA3 = printPLV('A3').then(function (url) {
+            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;
+            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;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
@@ -162,9 +208,27 @@ var QrCodePLVContainer = function (_a) {
                         modifiedPdfBytes = _b.sent();
                         blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
                         url = URL.createObjectURL(blob);
-                        // Ouvrir la page d'impression
-                        (0, DialogPrint_1.openDialogPrint)(url);
-                        return [2 /*return*/];
+                        loadingTask = pdfjsLib.getDocument(url);
+                        return [4 /*yield*/, loadingTask.promise];
+                    case 8:
+                        pdf = _b.sent();
+                        return [4 /*yield*/, pdf.getPage(1)];
+                    case 9:
+                        page = _b.sent();
+                        canvas = document.createElement('canvas');
+                        context = canvas.getContext('2d');
+                        viewport = page.getViewport({ scale: 4 });
+                        canvas.width = viewport.width;
+                        canvas.height = viewport.height;
+                        renderContext = {
+                            canvasContext: context,
+                            viewport: viewport,
+                        };
+                        return [4 /*yield*/, page.render(renderContext).promise];
+                    case 10:
+                        _b.sent();
+                        imageUrl = canvas.toDataURL('image/png');
+                        return [2 /*return*/, imageUrl];
                 }
             });
         });
@@ -206,12 +270,20 @@ var QrCodePLVContainer = function (_a) {
     var onChangeSelectedChoice = function (e) {
         setSelectedChoice(e.target.value);
     };
+    var printA3PLV = (0, react_to_print_1.useReactToPrint)({
+        content: function () { return PLVrefA3.current; },
+        documentTitle: 'Movalib_PLV_A3',
+    });
+    var printA4PLV = (0, react_to_print_1.useReactToPrint)({
+        content: function () { return PLVrefA4.current; },
+        documentTitle: 'Movalib_PLV_A4',
+    });
     var onClickDownload = (0, react_1.useMemo)(function () {
         switch (selectedChoice) {
             case 'A3':
-                return function () { printPLV('A3'); };
+                return printA3PLV;
             case 'A4':
-                return function () { printPLV('A4'); };
+                return printA4PLV;
             case 'QR_Headless':
                 return downloadQRCodeHeadless;
             case 'QR_Google':
@@ -219,8 +291,8 @@ var QrCodePLVContainer = function (_a) {
             default:
                 return function () { };
         }
-    }, [selectedChoice, downloadQRCodeHeadless, downloadQrCodeWithCTA]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '24px' }, { children: [(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: {
+    }, [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: (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/dist/src/helpers/ApiHelper.d.ts

@@ -4,7 +4,6 @@ export type APIResponse<T> = {
     success: boolean;
     data?: T;
     error?: string;
-    location?: string | null;
 };
 export type APIRequest = {
     url: string;

package/dist/src/helpers/ApiHelper.js

@@ -12,14 +12,13 @@ function handleError(error) {
     var msg = error.message.includes('fetch') ? "Connexion impossible" : error.message;
     return {
         success: false,
-        error: msg,
+        error: msg
     };
 }
 function handleResponse(response) {
     var contentType = response.headers.get("content-type");
     var isJson = contentType && contentType.includes("application/json");
     var dataPromise = isJson ? response.json() : response.text();
-    var location = response.headers.get('Location');
     return dataPromise.then(function (data) {
         if (!response.ok) {
             Logger_1.default.error(data);
@@ -40,7 +39,7 @@ function handleResponse(response) {
             }
             return { success: false, error: errorMsg };
         }
-        return { success: true, data: data, location: location };
+        return { success: true, data: data };
     });
 }
 /**

package/dist/src/utils/DialogPrint.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.openDialogPrint = void 0;
 function openDialogPrint(url) {
+    // Créer un iframe pour charger le document Blob => url
     var iframe = document.createElement('iframe');
     iframe.style.position = 'absolute';
     iframe.style.width = '0px';
@@ -13,7 +14,7 @@ function openDialogPrint(url) {
         var _a;
         (_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.print();
     };
-    // Supprimer l'iframe une fois l'impression terminée
+    // Supprimer l'iframe une fois lque la dialog est fermer
     iframe.onclose = function () {
         document.body.removeChild(iframe);
         URL.revokeObjectURL(url);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.55.5",
+  "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",
@@ -18,7 +18,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.11.16",
+    "@mui/icons-material": "^5.11.17",
     "@mui/lab": "^5.0.0-alpha.134",
     "@mui/material": "^5.13.5",
     "@mui/x-date-pickers": "^6.9.1",
@@ -31,6 +31,7 @@
     "html2canvas": "^1.4.1",
     "js-cookie": "^3.0.5",
     "pdf-lib": "^1.17.1",
+    "pdfjs-dist": "^4.6.82",
     "qr-code-styling": "^1.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -47,6 +48,7 @@
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.4",
+    "@types/pdfjs-dist": "^2.10.377",
     "@types/react-input-mask": "^3.0.5",
     "html-webpack-plugin": "^5.5.3",
     "ts-loader": "^9.4.4",