From 76077f671c40ffc7c1a556e8a02402ec84dc29b3 Mon Sep 17 00:00:00 2001
From: freshavocado7 <nikidimitriou97@gmail.com>
Date: Fri, 12 Apr 2024 16:24:51 +0200
Subject: [PATCH] feat: Add print button for content

---
 frontend/src/components/InstanceView.jsx | 35 +++++++++++++++++++++---
 frontend/src/index.css                   |  6 +++-
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/InstanceView.jsx b/frontend/src/components/InstanceView.jsx
index 79a7c60..d1e41e9 100644
--- a/frontend/src/components/InstanceView.jsx
+++ b/frontend/src/components/InstanceView.jsx
@@ -4,11 +4,13 @@
 import React, { useEffect, useRef, useState } from "react";
 import { SVGDisplay } from "./SVGDisplay";
 import { Spinner } from "./Spinner";
+import { Button } from "./Button";
 
 export const InstanceView = ({ templateName, objectID, endpoint }) => {
     const [details, setDetails] = useState([]);
     const [loading, setLoading] = useState(true);
     const contentRef = useRef(null);
+    const [isHovering, setIsHovering] = useState(false);
 
     useEffect(() => {
         setLoading(true);
@@ -41,7 +43,8 @@ export const InstanceView = ({ templateName, objectID, endpoint }) => {
                 });
                 setDetails(contentItems);
                 setLoading(false);
-                if (contentRef.current) contentRef.current.scrollIntoView();
+                if (contentRef.current)
+                    contentRef.current.scrollIntoView();
             })
             .catch((error) => {
                 setLoading(false);
@@ -57,16 +60,40 @@ export const InstanceView = ({ templateName, objectID, endpoint }) => {
     return (
         <div
             ref={contentRef}
-            className="html-content bg-white shadow-lg dark:shadow-white text-gray-700 mx-auto md:my-8 p-8 md:w-[210mm] max-w-full max-h-full overflow-auto print:shadow-none print:m-0 print:p-0 print:bg-transparent"
+            className={`html-content bg-white shadow-lg dark:shadow-white text-gray-700 mx-auto md:my-8 p-8 md:w-[210mm] max-w-full max-h-full overflow-auto print:shadow-none print:m-0 print:p-0 print:bg-transparent relative box-border border-4 ${
+                isHovering
+                    ? "border-grey-700 shadow-md z-50"
+                    : "border-transparent"
+            }`}
+            onMouseEnter={() => setIsHovering(true)}
+            onMouseLeave={() => setIsHovering(false)}
         >
+            {isHovering && (
+                <Button
+                    style={{
+                        position: "absolute",
+                        top: 0,
+                        right: 0,
+                        margin: "1rem",
+                        padding: "0.5rem",
+                    }}
+                    onClick={() => window.print()}
+                >
+                    Print Content
+                </Button>
+            )}
             {details.map((item, idx) => {
                 if (item.type === "SVGDisplay") {
-                    return <SVGDisplay key={idx} content={item.content} />;
+                    return (
+                        <SVGDisplay key={idx} content={item.content} />
+                    );
                 } else {
                     return (
                         <div
                             key={idx}
-                            dangerouslySetInnerHTML={{ __html: item.content }}
+                            dangerouslySetInnerHTML={{
+                                __html: item.content,
+                            }}
                         />
                     );
                 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 52157cd..732e972 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -118,6 +118,10 @@ ul {
   }
   .print\\:hidden {
     display: none !important;
-}
+  }
+  .html-content {
+    border: none !important;
+    box-shadow: none !important;
+  }
   @page  { margin: 15mm; }   
 }