Skip to content

Commit

Permalink
zoom in out functionality added and added responsiveness for mobile s…
Browse files Browse the repository at this point in the history 
…creen
  • Loading branch information
@Coderayush13
Coderayush13 committed Aug 16, 2024
1 parent 72315ed commit 2d0bec3
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 65 deletions.
42 changes: 38 additions & 4 deletions src/CAREUI/misc/PrintPreview.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ReactNode } from "react";
import { ReactNode, useState } from "react";
import ButtonV2 from "../../Components/Common/components/ButtonV2";
import CareIcon from "../icons/CareIcon";
import { classNames } from "../../Utils/utils";
Expand All @@ -11,18 +11,52 @@ type Props = {
title: string;
};

const zoom_values = [
"scale-50",
"scale-75",
"scale-100",
"scale-125",
"scale-150",
"scale-175",
"scale-200",
];

export default function PrintPreview(props: Props) {
const [zoom, setZoom] = useState(2); // Initial zoom index to 'scale-100'

const handleZoomIn = () => {
setZoom((prevZoom) => (prevZoom < zoom_values.length - 1 ? prevZoom + 1 : prevZoom));

Check failure on line 28 in src/CAREUI/misc/PrintPreview.tsx

View workflow job for this annotation

GitHub Actions / lint 

Replace `·(prevZoom·<·zoom_values.length·-·1·?·prevZoom·+·1·:·prevZoom)` with `⏎······prevZoom·<·zoom_values.length·-·1·?·prevZoom·+·1·:·prevZoom,⏎····`
};

const handleZoomOut = () => {
setZoom((prevZoom) => (prevZoom > 0 ? prevZoom - 1 : prevZoom));
};

return (
<Page title={props.title}>
<div className="mx-auto my-8 w-[50rem]">
<div className="top-0 z-20 flex justify-end gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8">
<div className="mx-auto my-8 w-full max-w-[50rem] px-4">
<div className="top-0 z-20 flex justify-between items-center gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8">

Check failure on line 38 in src/CAREUI/misc/PrintPreview.tsx

View workflow job for this annotation

GitHub Actions / lint 

Replace `justify-between·items-center·` with `items-center·justify-between·`
<ButtonV2 disabled={props.disabled} onClick={() => window.print()}>
<CareIcon icon="l-print" className="text-lg" />
Print
</ButtonV2>
<div className="hidden md:flex gap-4"> {/* Hide on mobile, show on medium screens and up */}

Check failure on line 43 in src/CAREUI/misc/PrintPreview.tsx

View workflow job for this annotation

GitHub Actions / lint 

Replace `md:flex·gap-4">` with `gap-4·md:flex">⏎············{"·"}⏎···········`
<ButtonV2 onClick={handleZoomOut} disabled={zoom === 0}>
<CareIcon icon="l-search-minus" className="text-lg" />
Zoom Out
</ButtonV2>
<span>{zoom_values[zoom].split('-')[1]}%</span>

Check failure on line 48 in src/CAREUI/misc/PrintPreview.tsx

View workflow job for this annotation

GitHub Actions / lint 

Replace `'-'` with `"-"`
<ButtonV2 onClick={handleZoomIn} disabled={zoom === zoom_values.length - 1}>

Check failure on line 49 in src/CAREUI/misc/PrintPreview.tsx

View workflow job for this annotation

GitHub Actions / lint 

Replace `·onClick={handleZoomIn}·disabled={zoom·===·zoom_values.length·-·1}` with `⏎··············onClick={handleZoomIn}⏎··············disabled={zoom·===·zoom_values.length·-·1}⏎············`
<CareIcon icon="l-search-plus" className="text-lg" />
Zoom In
</ButtonV2>
</div>
</div>

<div className="bg-white p-10 text-sm shadow-2xl transition-all duration-200 ease-in-out">
<div
className={`bg-white p-10 text-sm shadow-2xl transition-transform duration-200 ease-in-out ${zoom_values[zoom]}`} // Apply zoom scaling
style={{ transform: 'none' }} // This will ensure transform isn't applied during printing

Check failure on line 58 in src/CAREUI/misc/PrintPreview.tsx

View workflow job for this annotation

GitHub Actions / lint 

Replace `'none'` with `"none"`
>
<div
id="section-to-print"
className={classNames("w-full", props.className)}
Expand Down
128 changes: 67 additions & 61 deletions src/Components/Medicine/PrintPreview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,61 +42,62 @@ export default function PrescriptionsPrintPreview() {

return (
<PrintPreview
title={
patient ? `Prescriptions - ${patient.name}` : "Print Prescriptions"
}
title={patient ? `Prescriptions - ${patient.name}` : "Print Prescriptions"}

Check failure on line 45 in src/Components/Medicine/PrintPreview.tsx

View workflow job for this annotation

GitHub Actions / lint 

Replace `patient·?·`Prescriptions·-·${patient.name}`·:·"Print·Prescriptions"` with `⏎········patient·?·`Prescriptions·-·${patient.name}`·:·"Print·Prescriptions"⏎······`
disabled={!(patient && encounter && items)}
>
<div className="mb-3 flex items-center justify-between p-4">
<h3>{encounter?.facility_name}</h3>
<img className="h-10 w-auto" src={main_logo.dark} alt="care logo" />
</div>
<div className="mb-6 grid grid-cols-8 gap-y-1.5 border-2 border-secondary-400 p-2">
<PatientDetail name="Patient" className="col-span-5">
{patient && (
<>
<span className="uppercase">{patient.name}</span> -{" "}
{t(`GENDER__${patient.gender}`)},{" "}
{patientAgeInYears(patient).toString()}yrs
</>
)}
</PatientDetail>
<PatientDetail name="IP/OP No." className="col-span-3">
{encounter?.patient_no}
</PatientDetail>
<div className="mb-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-y-1.5 border-2 border-secondary-400 p-2">

Check failure on line 52 in src/Components/Medicine/PrintPreview.tsx

View workflow job for this annotation

GitHub Actions / lint 

Replace `md:grid-cols-2·lg:grid-cols-4·gap-y-1.5·border-2·border-secondary-400·p-2` with `gap-y-1.5·border-2·border-secondary-400·p-2·md:grid-cols-2·lg:grid-cols-4`
<PatientDetail name="Patient" className="col-span-1 md:col-span-2 lg:col-span-2">

Check failure on line 53 in src/Components/Medicine/PrintPreview.tsx

View workflow job for this annotation

GitHub Actions / lint 

Replace `<PatientDetail·name="Patient"·className="col-span-1·md:col-span-2·lg:col-span-2"` with `······<PatientDetail⏎··········name="Patient"⏎··········className="col-span-1·md:col-span-2·lg:col-span-2"⏎········`
{patient && (

Check failure on line 54 in src/Components/Medicine/PrintPreview.tsx

View workflow job for this annotation

GitHub Actions / lint 

Insert `······`
<>
<span className="uppercase">{patient.name}</span> -{" "}
{t(`GENDER__${patient.gender}`)},{" "}
{patientAgeInYears(patient).toString()}yrs
</>
)}
</PatientDetail>
<PatientDetail name="IP/OP No." className="col-span-1 md:col-span-1 lg:col-span-1">
{encounter?.patient_no}
</PatientDetail>

<PatientDetail
name={
encounter
? `${t(`encounter_suggestion__${encounter.suggestion}`)} on`
: ""
}
className="col-span-5"
>
{formatDate(encounter?.encounter_date)}
</PatientDetail>
<PatientDetail name="Bed" className="col-span-3">
{encounter?.current_bed?.bed_object.location_object?.name}
{" - "}
{encounter?.current_bed?.bed_object.name}
</PatientDetail>
<PatientDetail
name={
encounter
? `${t(`encounter_suggestion__${encounter.suggestion}`)} on`
: ""
}
className="col-span-1 md:col-span-2 lg:col-span-2"
>
{formatDate(encounter?.encounter_date)}
</PatientDetail>
<PatientDetail name="Bed" className="col-span-1 md:col-span-1 lg:col-span-1">
{encounter?.current_bed?.bed_object.location_object?.name}
{" - "}
{encounter?.current_bed?.bed_object.name}
</PatientDetail>

<PatientDetail name="Allergy to medication" className="col-span-1 md:col-span-2 lg:col-span-4">
{patient?.allergies ?? "None"}
</PatientDetail>
</div>

<PatientDetail name="Allergy to medication" className="col-span-8">
{patient?.allergies ?? "None"}
</PatientDetail>
</div>

<PrescriptionsTable items={normalPrescriptions} />
<PrescriptionsTable items={normalPrescriptions}/>
<PrescriptionsTable items={prnPrescriptions} prn />

<div className="pt-12">
<p className="font-medium text-secondary-800">
<div className="pt-12 px-4">
<p className="font-medium text-secondary-800 text-base">
Sign of the Consulting Doctor
</p>
<PatientDetail name="Name of the Consulting Doctor">
{encounter?.treating_physician_object &&
formatName(encounter?.treating_physician_object)}
</PatientDetail>
<div className="w-full">
<PatientDetail name="Name of the Consulting Doctor">
{encounter?.treating_physician_object &&
formatName(encounter?.treating_physician_object)}
</PatientDetail>
</div>
<p className="pt-6 text-center text-xs font-medium text-secondary-700">
Generated on: {formatDateTime(new Date())}
</p>
Expand All @@ -106,6 +107,8 @@ export default function PrescriptionsPrintPreview() {
authorized the same by affixing signature.
</p>
</div>


</PrintPreview>
);
}
Expand Down Expand Up @@ -150,31 +153,34 @@ const PrescriptionsTable = ({
}

if (!items.length) {
return;
return <div>No prescriptions available</div>; // Add a fallback message for empty items
}

return (
<table className="mb-8 mt-4 w-full border-collapse border-2 border-secondary-400">
<caption className="mb-2 caption-top text-lg font-bold">
{prn && "PRN"} Prescriptions
</caption>
<thead className="border-b-2 border-secondary-400 bg-secondary-50">
<tr>
<th className="max-w-52 p-1">Medicine</th>
<th className="p-1">Dosage</th>
<th className="p-1">Directions</th>
<th className="max-w-32 p-1">Notes / Instructions</th>
</tr>
</thead>
<tbody className="border-b-2 border-secondary-400">
{items.map((item) => (
<PrescriptionEntry key={item.id} obj={item} />
))}
</tbody>
</table>
<div className="overflow-x-auto">
<table className="mb-8 mt-4 w-full max-w-full border-collapse border-2 border-secondary-400">
<caption className="mb-2 caption-top text-lg font-bold">
{prn && "PRN"} Prescriptions
</caption>
<thead className="border-b-2 border-secondary-400 bg-secondary-50">
<tr>
<th className="p-2 text-left text-sm md:text-base">Medicine</th>
<th className="p-2 text-left text-sm md:text-base">Dosage</th>
<th className="p-2 text-left text-sm md:text-base">Directions</th>
<th className="p-2 text-left text-sm md:text-base">Notes / Instructions</th>
</tr>
</thead>
<tbody className="border-b-2 border-secondary-400">
{items.map((item) => (
<PrescriptionEntry key={item.id} obj={item} />
))}
</tbody>
</table>
</div>
);
};


const PrescriptionEntry = ({ obj }: { obj: Prescription }) => {
const { t } = useTranslation();
const medicine = obj.medicine_object;
Expand Down

0 comments on commit 2d0bec3

Please sign in to comment.