@evergis/react 3.1.38 → 3.1.39

package/dist/components/Dashboard/containers/ExportPdfContainer/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ContainerProps } from '../../types';
+export declare const ExportPdfContainer: FC<ContainerProps>;

package/dist/components/Dashboard/containers/registry.d.ts

@@ -27,5 +27,6 @@ export declare const containerComponents: {
     readonly Camera: import('react').FC<import('../types').ContainerProps>;
     readonly AddFeature: import('react').FC<import('../types').ContainerProps>;
     readonly Divider: import('react').FC<import('../types').ContainerProps>;
+    readonly ExportPdf: import('react').FC<import('../types').ContainerProps>;
     readonly default: import('react').FC<import('../types').ContainerProps>;
 };

package/dist/components/Dashboard/hooks/index.d.ts

@@ -4,6 +4,7 @@ export * from './useDashboardHeader';
 export * from './useDataSources';
 export * from './useDiffPage';
 export * from './useExpandableContainers';
+export * from './useExportPdf';
 export * from './useWidgetFilters';
 export * from './useGetConfigLayer';
 export * from './useGlobalContext';

package/dist/components/Dashboard/hooks/useExportPdf.d.ts

@@ -0,0 +1,4 @@
+export declare const useExportPdf: (ids: string[]) => {
+    loading: boolean;
+    onExport: () => Promise<void>;
+};

package/dist/components/Dashboard/types.d.ts

@@ -238,6 +238,7 @@ export declare enum ContainerTemplate {
     Camera = "Camera",
     AddFeature = "AddFeature",
     Slideshow = "Slideshow",
+    ExportPdf = "ExportPdf",
     Divider = "Divider"
 }
 export declare enum HeaderTemplate {

package/dist/index.js

@@ -16,6 +16,8 @@ var signalr = require('@microsoft/signalr');
 var findAnd = require('find-and');
 var MapboxDraw = require('@mapbox/mapbox-gl-draw');
 var turf = require('@turf/turf');
+var jspdf = require('jspdf');
+var html2canvas = require('html2canvas');
 var MapGL = require('react-map-gl/mapbox');
 require('@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css');
 require('mapbox-gl/dist/mapbox-gl.css');
@@ -3377,6 +3379,7 @@ exports.ContainerTemplate = void 0;
     ContainerTemplate["Camera"] = "Camera";
     ContainerTemplate["AddFeature"] = "AddFeature";
     ContainerTemplate["Slideshow"] = "Slideshow";
+    ContainerTemplate["ExportPdf"] = "ExportPdf";
     ContainerTemplate["Divider"] = "Divider";
 })(exports.ContainerTemplate || (exports.ContainerTemplate = {}));
 exports.HeaderTemplate = void 0;
@@ -6004,7 +6007,7 @@ const PagesContainer = React.memo(({ type = exports.WidgetType.Dashboard, noBord
         setSelectedTabId,
         type,
     ]);
-    return (jsxRuntime.jsxs("div", { style: { width }, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: config, type: type, renderElement: renderElement }), jsxRuntime.jsx(Container, { isColumn: isColumn, isMain: true, noBorders: noBorders, children: jsxRuntime.jsx(ContainerChildren, { items: filteredChildren, isMain: true, renderElement: renderElement }) })] }));
+    return (jsxRuntime.jsxs("div", { id: "dashboard-root", style: { width }, children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: config, type: type, renderElement: renderElement }), jsxRuntime.jsx(Container, { isColumn: isColumn, isMain: true, noBorders: noBorders, children: jsxRuntime.jsx(ContainerChildren, { items: filteredChildren, isMain: true, renderElement: renderElement }) })] }));
 });
 
 const TwoColumnsInnerContainer = React.memo(({ renderElement }) => {
@@ -6572,6 +6575,12 @@ const LayersContainer = React.memo(({ type, elementConfig, renderElement }) => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && (jsxRuntime.jsx(LayersContainerWrapper, { style: style, children: jsxRuntime.jsx(LayerTree, { layers: layers, onlyMainTools: true }) }))] }));
 });
 
+const ExportPdfContainer = React.memo(({ elementConfig }) => {
+    const { loading, onExport } = useExportPdf(["dashboard-root"]);
+    const { style } = elementConfig || {};
+    return (jsxRuntime.jsx(Container, { style: style, children: jsxRuntime.jsx(uilibGl.IconButton, { kind: "tools_print", primary: true, disabled: loading, onClick: onExport, children: "\u042D\u043A\u0441\u043F\u043E\u0440\u0442 \u0432 PDF" }) }));
+});
+
 const containerComponents = {
     [exports.ContainerTemplate.DefaultAttributes]: DefaultAttributesContainer,
     [exports.ContainerTemplate.Pages]: PagesContainer,
@@ -6593,6 +6602,7 @@ const containerComponents = {
     [exports.ContainerTemplate.Camera]: CameraContainer,
     [exports.ContainerTemplate.AddFeature]: AddFeatureContainer,
     [exports.ContainerTemplate.Divider]: DividerContainer,
+    [exports.ContainerTemplate.ExportPdf]: ExportPdfContainer,
     default: ContainersGroupContainer,
 };
 
@@ -9086,6 +9096,128 @@ const useExpandableContainers = () => {
     return [expandedContainers, expandContainer];
 };
 
+const useExportPdf = (ids) => {
+    const [loading, setLoading] = React.useState(false);
+    const onExport = React.useCallback(async () => {
+        if (ids.length === 0) {
+            return;
+        }
+        setLoading(true);
+        const pdf = new jspdf.jsPDF("landscape", "pt", "a4", false);
+        for (let i = 0; i < ids.length; i++) {
+            const pageItemContents = document.querySelector(`#${ids[i]}`);
+            const data = await html2canvas(pageItemContents, {
+                scale: 2,
+                windowWidth: 800,
+                onclone: (clonedDocument, clonedElement) => {
+                    clonedDocument.body.style.width = "1920px";
+                    clonedDocument.body.style.height = "1080px";
+                    /* if (!isCoverPage) {
+                      clonedDocument.body.style.background = "#f4f7f9";
+                    }
+          
+                    const pageContainers = clonedElement.querySelectorAll(".export-page-container");
+                    const inputWrappers = clonedElement.querySelectorAll(".page-title-input");
+                    const textareas = clonedElement.querySelectorAll(".report-page-item-textarea");
+                    const datePickerWrappers = clonedElement.querySelectorAll(".report-page-item-datepicker");
+                    const pageBlockContainers = clonedElement.querySelectorAll(".report-page-block-container");
+                    const pageItemTitles = clonedDocument.querySelectorAll(".report-page-item-title");
+          
+                    pageContainers.forEach((element) => {
+                      (element as HTMLDivElement).style.background = isCoverPage ? "transparent" : "#f4f7f9";
+                      (element as HTMLDivElement).style.border = "none";
+                      (element as HTMLDivElement).style.padding = isCoverPage ? "0px" : "3rem 3rem 30rem";
+                      (element as HTMLDivElement).style.margin = isCoverPage ? "0px" : "initial";
+                    });
+          
+                    inputWrappers.forEach((inputWrapper) => {
+                      const input = inputWrapper.querySelector("input");
+                      const div = document.createElement("div");
+          
+                      div.innerText = (input as HTMLInputElement).value;
+          
+                      inputWrapper.replaceWith(div);
+                    });
+          
+                    textareas.forEach((textarea) => {
+                      const div = document.createElement("div");
+          
+                      if ((textarea as HTMLTextAreaElement).classList.contains("report-page-item-comment")) {
+                        if (isCoverPage) {
+                          (div as HTMLDivElement).style.display = "none";
+                        } else {
+                          (div as HTMLDivElement).style.fontSize = "24px";
+                          (div as HTMLDivElement).style.fontWeight = "400";
+                          (div as HTMLDivElement).style.opacity = "0.54";
+                          (div as HTMLDivElement).style.marginTop = "2rem";
+                        }
+                      }
+          
+                      if (isCoverPage) {
+                        if ((textarea as HTMLTextAreaElement).classList.contains("report-page-front-cover-title")) {
+                          (div as HTMLDivElement).style.fontSize = "32px";
+                          (div as HTMLDivElement).style.fontWeight = "300";
+                          (div as HTMLDivElement).style.lineHeight = "normal";
+                        }
+          
+                        if ((textarea as HTMLTextAreaElement).classList.contains("report-page-front-cover-comment")) {
+                          (div as HTMLDivElement).style.fontSize = "16px";
+                          (div as HTMLDivElement).style.fontWeight = "400";
+                          (div as HTMLDivElement).style.opacity = "0.54";
+                          (div as HTMLDivElement).style.lineHeight = "normal";
+                        }
+                      }
+          
+                      div.innerText = (textarea as HTMLTextAreaElement).value;
+          
+                      textarea.replaceWith(div);
+                    });
+          
+                    datePickerWrappers.forEach((inputWrapper) => {
+                      const input = inputWrapper.querySelector("input");
+                      const div = document.createElement("div");
+          
+                      if (isCoverPage) {
+                        (div as HTMLDivElement).style.fontSize = "12px";
+                        (div as HTMLDivElement).style.fontWeight = "400";
+                        (div as HTMLDivElement).style.opacity = "0.54";
+                      }
+          
+                      div.innerText = (input as HTMLInputElement).value;
+          
+                      inputWrapper.replaceWith(div);
+                    });
+          
+                    pageBlockContainers.forEach((element) => {
+                      (element as HTMLDivElement).style.background = "#ffffff";
+                    });
+          
+                    pageItemTitles.forEach((item) => {
+                      if (isCoverPage) {
+                        (item as HTMLDivElement).style.display = "none";
+                      } else {
+                        (item as HTMLDivElement).style.fontSize = "40px";
+                        (item as HTMLDivElement).style.fontWeight = "300";
+                        (item as HTMLDivElement).style.marginBottom = "2rem";
+                      }
+                    });*/
+                },
+            });
+            const img = data.toDataURL("image/png");
+            const imgProperties = pdf.getImageProperties(img);
+            const pdfWidth = pdf.internal.pageSize.getWidth();
+            const pdfHeight = (imgProperties.height * pdfWidth) / imgProperties.width;
+            if (i > 0) {
+                pdf.addPage("a4", "landscape");
+            }
+            pdf.addImage(img, "PNG", 0, 0, pdfWidth, pdfHeight);
+        }
+        pdf.save(`report_${dateFns.format(new Date(), "yyyy-MM-dd_HH:mm:ss")}.pdf`);
+        setLoading(false);
+    }, [ids]);
+    return { loading, onExport };
+};
+
 const getMinMaxFromStringValue = (items, value, current, type) => {
     const valueIndex = items.findIndex(item => item.value === (type === "min" ? value.min : value.max));
     const currentIndex = items.findIndex(item => item.value === (type === "min" ? value.min : value.max));
@@ -10209,6 +10341,7 @@ exports.useDataSources = useDataSources;
 exports.useDebouncedCallback = useDebouncedCallback;
 exports.useDiffPage = useDiffPage;
 exports.useExpandableContainers = useExpandableContainers;
+exports.useExportPdf = useExportPdf;
 exports.useGetConfigLayer = useGetConfigLayer;
 exports.useGlobalContext = useGlobalContext;
 exports.useHeaderRender = useHeaderRender;