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, useMemo,
useRef, useRef,
useState, useState,
forwardRef
} from "react"; } from "react";
import LoadingSpinner from "../Spinners/LoadingSpinner"; import LoadingSpinner from "../Spinners/LoadingSpinner";
import profile from "../../assets/images/profile-info-profile.png"; import profile from "../../assets/images/profile-info-profile.png";
import qrSample from "../../assets/images/qr-sample.png";
import usersService from "../../services/UsersService"; import usersService from "../../services/UsersService";
import FamilyTasks from "./FamilyTasks"; import FamilyTasks from "./FamilyTasks";
import QRCode from "react-qr-code";
import { useReactToPrint } from "react-to-print";
export default function FamilyManageTabs({ export default function FamilyManageTabs({
className, className,
@@ -78,6 +80,12 @@ export default function FamilyManageTabs({
familyManageHandler(); familyManageHandler();
}, [tab]); }, [tab]);
const accountRef = useRef();
// to handle printing
const useHandlePrint = useReactToPrint({
content: () => accountRef.current,
});
return ( return (
<div <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] ${ 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" && ( {name === "Account" && (
<Account familyDetails={familyDetails} /> <>
<Account
familyDetails={familyDetails}
myRef={accountRef}
handlePrint={useHandlePrint}
/>
</>
)} )}
{name === "Profile" && <Profile />} {name === "Profile" && <Profile />}
</> </>
@@ -217,37 +231,12 @@ function ProfileInfo({
); );
} }
function Account({ familyDetails }) { const Account = forwardRef(({ familyDetails, myRef, handlePrint }) => {
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();
};
};
return ( 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="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 items-center justify-around h-[380px]">
<div className="flex flex-col"> <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"> <p className="text-xl tracking-wide mb-[15px] text-center font-bold text-dark-gray dark:text-white">
Scan the code from mobile app Scan the code from mobile app
</p> </p>
<img <QRCode
src={qrSample} size={256}
alt="qr-sample" style={{ height: "auto", maxWidth: "100%", width: "100%" }}
className="h-[200px] w-[200px]" value={`${familyDetails?.username}`}
viewBox={`0 0 256 256`}
/> />
</div> </div>
</div> </div>
@@ -286,7 +276,7 @@ function Account({ familyDetails }) {
</div> </div>
</div> </div>
); );
} })
function Profile() { function Profile() {
return <>Profile</>; return <>Profile</>;