gunaseelan/cavinid
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert button labels to Download Digital & Print Bulk Orders and auto-generate both PNG & PDF formats together

Browse Source
This commit is contained in:
Gunaseelan P
2026-09-24 14:48:59 +05:30
parent 6f14a018e6
commit dbdc953d98
1 changed files with 51 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+50 -26
View File
@@ -321,19 +321,21 @@ export default function App() {
saveAs(blob, "sample_employees.csv"); saveAs(blob, "sample_employees.csv");
}; };
const handleDownloadSingle = async (format: "png" | "pdf" = "png") => { const handleDownloadSingleBoth = async () => {
if (!cardRef.current) return; if (!cardRef.current) return;
setIsGenerating(true); setIsGenerating(true);
try { try {
const dataUrl = await toPng(cardRef.current, { pixelRatio: 3 }); const dataUrl = await toPng(cardRef.current, { pixelRatio: 3 });
if (format === "png") {
const link = document.createElement("a"); // 1. Download PNG Image
link.download = `${currentEmployee.name || "ID"}_${currentRegion.name}.png`; const link = document.createElement("a");
link.href = dataUrl; link.download = `${currentEmployee.name || "ID"}_${currentRegion.name}.png`;
link.click(); link.href = dataUrl;
} else { link.click();
// PDF Export (Standard portrait card format 54mm x 85.6mm)
// 2. Download PDF Document (Standard portrait card format 54mm x 85.6mm)
setTimeout(() => {
const pdf = new jsPDF({ const pdf = new jsPDF({
orientation: "portrait", orientation: "portrait",
unit: "mm", unit: "mm",
@@ -341,7 +343,8 @@ export default function App() {
}); });
pdf.addImage(dataUrl, "PNG", 0, 0, 54, 85.6); pdf.addImage(dataUrl, "PNG", 0, 0, 54, 85.6);
pdf.save(`${currentEmployee.name || "ID"}_${currentRegion.name}.pdf`); pdf.save(`${currentEmployee.name || "ID"}_${currentRegion.name}.pdf`);
} }, 300);
logCreation(currentEmployee.unitId, 1); logCreation(currentEmployee.unitId, 1);
} catch (err) { } catch (err) {
console.error("Error generating card:", err); console.error("Error generating card:", err);
@@ -1099,46 +1102,67 @@ export default function App() {
> >
Next Next
</button> </button>
{isBatchMode ? (
<div className="mt-8 flex flex-wrap justify-center gap-3 sm:gap-4">
<button <button
onClick={() => generateBulkZip("png")} onClick={() => {
disabled={isGenerating} const idx = employees.findIndex(
className="px-5 py-3 bg-slate-800 rounded-lg shadow-lg border border-slate-900 text-sm font-bold text-white flex items-center gap-2 disabled:opacity-75 hover:bg-slate-900 transition-colors" (e) => e.id === currentEmployee.id,
);
if (idx > 0) setCurrentEmployee(employees[idx - 1]);
}}
disabled={
employees.findIndex((e) => e.id === currentEmployee.id) ===
0
}
className="px-4 py-3 bg-white rounded-lg shadow-sm border border-slate-300 text-sm font-bold text-slate-700 disabled:opacity-50"
> >
<Download className="w-4 h-4" />{" "} Prev
{isGenerating ? "Exporting..." : "Export All (PNG ZIP)"}
</button> </button>
<div className="px-4 py-3 bg-white rounded-lg shadow-sm border border-slate-300 text-sm font-bold text-slate-700">
{employees.findIndex((e) => e.id === currentEmployee.id) + 1}{" "}
of {employees.length}
</div>
<button <button
onClick={() => generateBulkZip("pdf")} onClick={() => {
disabled={isGenerating} const idx = employees.findIndex(
className="px-5 py-3 bg-red-600 rounded-lg shadow-lg border border-red-700 text-sm font-bold text-white flex items-center gap-2 disabled:opacity-75 hover:bg-red-700 transition-colors" (e) => e.id === currentEmployee.id,
);
if (idx < employees.length - 1)
setCurrentEmployee(employees[idx + 1]);
}}
disabled={
employees.findIndex((e) => e.id === currentEmployee.id) ===
employees.length - 1
}
className="px-4 py-3 bg-white rounded-lg shadow-sm border border-slate-300 text-sm font-bold text-slate-700 disabled:opacity-50"
> >
<Download className="w-4 h-4" />{" "} Next
{isGenerating ? "Exporting..." : "Export All (PDF ZIP)"}
</button> </button>
<button <button
onClick={() => generateBulkZip("both")} onClick={() => generateBulkZip("both")}
disabled={isGenerating} disabled={isGenerating}
className="px-5 py-3 bg-blue-700 rounded-lg shadow-lg border border-blue-800 text-sm font-bold text-white flex items-center gap-2 disabled:opacity-75 hover:bg-blue-800 transition-colors" className="px-6 py-3 bg-blue-700 rounded-lg shadow-lg border border-blue-800 text-sm font-bold text-white flex items-center gap-2 disabled:opacity-75"
> >
<Download className="w-4 h-4" />{" "} <Download className="w-4 h-4" />{" "}
{isGenerating ? "Exporting..." : "Export All (PNG + PDF ZIP)"} {isGenerating ? "Generating ZIP..." : "Export All (ZIP)"}
</button> </button>
</div> </div>
) : ( ) : (
<div className="mt-8 flex flex-wrap justify-center gap-3 sm:gap-4"> <div className="mt-8 flex flex-wrap justify-center gap-3 sm:gap-4">
<button <button
onClick={() => handleDownloadSingle("png")} onClick={handleDownloadSingleBoth}
disabled={isGenerating} disabled={isGenerating}
className="px-6 py-3 bg-white rounded-lg shadow-sm border border-slate-300 text-sm font-bold text-slate-700 flex items-center gap-2 hover:bg-slate-50 transition-colors disabled:opacity-70" className="px-6 py-3 bg-white rounded-lg shadow-sm border border-slate-300 text-sm font-bold text-slate-700 flex items-center gap-2 hover:bg-slate-50 transition-colors disabled:opacity-70"
> >
<Download className="w-4 h-4" /> Download PNG <Download className="w-4 h-4" /> Download Digital
</button> </button>
<button <button
onClick={() => handleDownloadSingle("pdf")} onClick={() => generateBulkZip("both")}
disabled={isGenerating} disabled={isGenerating}
className="px-6 py-3 bg-red-600 rounded-lg shadow-lg border border-red-700 text-sm font-bold text-white flex items-center gap-2 hover:bg-red-700 transition-colors disabled:opacity-70" className="px-6 py-3 bg-blue-700 rounded-lg shadow-lg border border-blue-800 text-sm font-bold text-white flex items-center gap-2 hover:bg-blue-800 transition-colors disabled:opacity-70"
> >
<Download className="w-4 h-4" /> Download PDF <Users className="w-4 h-4" /> Print Bulk Orders
</button> </button>
</div> </div>
)} )}