From 4651ae534d61d836409b1559eb497041e190ae85 Mon Sep 17 00:00:00 2001 From: hamed <15238-genius.ha@users.noreply.drupalcode.org> Date: Wed, 19 Nov 2025 10:34:02 +0330 Subject: [PATCH] refactor: implement PDF download functionality for appointment details in DetailLg and DetailSm components --- .../turns/isTurnsDetails/ButtonData.js | 14 +++++- .../sidebars/turns/isTurnsDetails/DetailLg.js | 47 +++++++++++++++++-- .../sidebars/turns/isTurnsDetails/DetailSm.js | 44 +++++++++++++++-- 3 files changed, 96 insertions(+), 9 deletions(-) diff --git a/components/dashboard/userAccount/sidebars/turns/isTurnsDetails/ButtonData.js b/components/dashboard/userAccount/sidebars/turns/isTurnsDetails/ButtonData.js index 2190757..d1d8f6a 100644 --- a/components/dashboard/userAccount/sidebars/turns/isTurnsDetails/ButtonData.js +++ b/components/dashboard/userAccount/sidebars/turns/isTurnsDetails/ButtonData.js @@ -2,10 +2,20 @@ import { Button } from "@mui/material"; import ModalDeleteComment from "./modal"; import EditTurnsD from "@/components/icons/EditTurnsD"; import ArrowLeftD from "@/components/icons/ArrowLeftD"; +import DownloadD from "@/components/icons/DownloadD"; -function ButtonData({ loading }) { +function ButtonData({ loading, onDownload }) { return (
+ {/*
- + */} ); } diff --git a/components/dashboard/userAccount/sidebars/turns/isTurnsDetails/DetailLg.js b/components/dashboard/userAccount/sidebars/turns/isTurnsDetails/DetailLg.js index 4bd3e10..1dad4eb 100644 --- a/components/dashboard/userAccount/sidebars/turns/isTurnsDetails/DetailLg.js +++ b/components/dashboard/userAccount/sidebars/turns/isTurnsDetails/DetailLg.js @@ -6,13 +6,51 @@ import DownloadD from "@/components/icons/DownloadD"; import LocationClinic from "@/components/icons/LocationClinic"; import RoutingC from "@/components/icons/RoutingC"; import { Button } from "@mui/material"; -import React from "react"; +import React, { useRef } from "react"; import { convertTimestampToJalali, convertTimestampToTime } from "@/helper"; +import html2canvas from "html2canvas"; +import jsPDF from "jspdf"; function DetailLg({ appointmentData, loading }) { + const detailsRef = useRef(null); + + const handleDownloadPDF = async () => { + if (!detailsRef.current) return; + + try { + const canvas = await html2canvas(detailsRef.current, { + scale: 2, + useCORS: true, + logging: false, + backgroundColor: '#ffffff', + }); + + const imgData = canvas.toDataURL("image/png"); + const pdf = new jsPDF({ + orientation: "portrait", + unit: "mm", + format: "a4", + }); + + const pdfWidth = pdf.internal.pageSize.getWidth(); + const pdfHeight = pdf.internal.pageSize.getHeight(); + + const imgWidth = pdfWidth * 0.9; // 90% of page width + const imgHeight = (canvas.height * imgWidth) / canvas.width; + + // Center horizontally and vertically + const xPosition = (pdfWidth - imgWidth) / 2; + const yPosition = (pdfHeight - imgHeight) / 2; + + pdf.addImage(imgData, "PNG", xPosition, yPosition, imgWidth, imgHeight); + pdf.save(`appointment_${appointmentData?.uuid || Date.now()}.pdf`); + } catch (error) { + console.error("Error generating PDF:", error); + } + }; return ( -
+
@@ -94,9 +132,10 @@ function DetailLg({ appointmentData, loading }) { - + */}
); } diff --git a/components/dashboard/userAccount/sidebars/turns/isTurnsDetails/DetailSm.js b/components/dashboard/userAccount/sidebars/turns/isTurnsDetails/DetailSm.js index 8db8c49..48e4c3e 100644 --- a/components/dashboard/userAccount/sidebars/turns/isTurnsDetails/DetailSm.js +++ b/components/dashboard/userAccount/sidebars/turns/isTurnsDetails/DetailSm.js @@ -1,14 +1,52 @@ import RoutingC from "@/components/icons/RoutingC"; import { Button } from "@mui/material"; -import React from "react"; +import React, { useRef } from "react"; import ButtonData from "./ButtonData"; import TextLoading from "@/app/component/loading/Text"; import { convertTimestampToJalali } from "@/helper"; +import html2canvas from "html2canvas"; +import jsPDF from "jspdf"; function DetailSm({ appointmentData, loading }) { + const detailsRef = useRef(null); + + const handleDownloadPDF = async () => { + if (!detailsRef.current) return; + + try { + const canvas = await html2canvas(detailsRef.current, { + scale: 2, + useCORS: true, + logging: false, + backgroundColor: '#ffffff', + }); + + const imgData = canvas.toDataURL("image/png"); + const pdf = new jsPDF({ + orientation: "portrait", + unit: "mm", + format: "a4", + }); + + const pdfWidth = pdf.internal.pageSize.getWidth(); + const pdfHeight = pdf.internal.pageSize.getHeight(); + + const imgWidth = pdfWidth * 0.9; // 90% of page width + const imgHeight = (canvas.height * imgWidth) / canvas.width; + + // Center horizontally and vertically + const xPosition = (pdfWidth - imgWidth) / 2; + const yPosition = (pdfHeight - imgHeight) / 2; + + pdf.addImage(imgData, "PNG", xPosition, yPosition, imgWidth, imgHeight); + pdf.save(`appointment_${appointmentData?.uuid || Date.now()}.pdf`); + } catch (error) { + console.error("Error generating PDF:", error); + } + }; return ( -
+
@@ -78,7 +116,7 @@ function DetailSm({ appointmentData, loading }) {

- +
); }