WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

added qr code and print function

Browse Source
This commit is contained in:
Ebube
2023-05-31 05:53:31 +01:00
parent abb2329795
commit 03da0e211b
1 changed files with 27 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FamilyAcc/FamilyManageTabs.jsx
+27 -37
View File
@@ -4,12 +4,14 @@ import React, {
useMemo,
useRef,
useState,
forwardRef
} from "react";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import profile from "../../assets/images/profile-info-profile.png";
import qrSample from "../../assets/images/qr-sample.png";
import usersService from "../../services/UsersService";
import FamilyTasks from "./FamilyTasks";
import QRCode from "react-qr-code";
import { useReactToPrint } from "react-to-print";
export default function FamilyManageTabs({
className,
@@ -78,6 +80,12 @@ export default function FamilyManageTabs({
familyManageHandler();
}, [tab]);
const accountRef = useRef();
// to handle printing
const useHandlePrint = useReactToPrint({
content: () => accountRef.current,
});
return (
<div
className={`update-table w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
@@ -138,7 +146,13 @@ export default function FamilyManageTabs({
/>
)}
{name === "Account" && (
<Account familyDetails={familyDetails} />
<>
<Account
familyDetails={familyDetails}
myRef={accountRef}
handlePrint={useHandlePrint}
/>
</>
)}
{name === "Profile" && <Profile />}
</>
@@ -217,37 +231,12 @@ function ProfileInfo({
);
}
function Account({ familyDetails }) {
const handlePrint = () => {
const printableContent = `
<html>
<head>
<style>
/* Add your desired styles here */
</style>
</head>
<body>
<div class"update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow"></div>
<h1>Family member details</h1>
<p>Username: ${familyDetails?.username}</p>
<p>Password: ${familyDetails?.pin}</p>
<img src="${qrSample}" alt="QR Code" />
</body>
</html>
`;
const printWindow = window.open('', '', 'width=800,height=700');
printWindow.document.open();
printWindow.document.write(printableContent);
printWindow.document.close();
printWindow.onload = () => {
printWindow.print();
};
};
const Account = forwardRef(({ familyDetails, myRef, handlePrint }) => {
return (
<div className="w-full lg:min-h-[500px] h-full flex flex-col items-center justify-center">
<div
className="w-full lg:min-h-[500px] h-full flex flex-col items-center justify-center"
ref={myRef}
>
<div className="update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow ">
<div className="flex items-center justify-around h-[380px]">
<div className="flex flex-col">
@@ -271,10 +260,11 @@ function Account({ familyDetails }) {
<p className="text-xl tracking-wide mb-[15px] text-center font-bold text-dark-gray dark:text-white">
Scan the code from mobile app
</p>
<img
src={qrSample}
alt="qr-sample"
className="h-[200px] w-[200px]"
<QRCode
size={256}
style={{ height: "auto", maxWidth: "100%", width: "100%" }}
value={`${familyDetails?.username}`}
viewBox={`0 0 256 256`}
/>
</div>
</div>
@@ -286,7 +276,7 @@ function Account({ familyDetails }) {
</div>
</div>
);
}
})
function Profile() {
return <>Profile</>;