Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

zoom in out functionality added and added responsiveness for mobile s… #8336

Closed
wants to merge 1 commit into from
Closed

zoom in out functionality added and added responsiveness for mobile s… #8336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 38 additions & 4 deletions src/CAREUI/misc/PrintPreview.tsx
View file
Open in desktop
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 @@
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,61 +42,62 @@

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>
Comment on lines +52 to +84
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ayushpatil2122 Like already mentioned in the issue, let's not make the print preview child responsive based on screen size. This would mean, the print output could differ on different screen size than what was shown in the preview.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sorry i will fix that

</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">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's not make changes to things that were not asked in the issue.

Suggested change
<p className="font-medium text-secondary-800 text-base">
<p className="font-medium text-secondary-800">

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 @@
authorized the same by affixing signature.
</p>
</div>


</PrintPreview>
);
}
Expand Down Expand Up @@ -150,31 +153,34 @@
}

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
return <div>No prescriptions available</div>; // Add a fallback message for empty items
return <div>No prescriptions available</div>;

}

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">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why was this made scrollable? Print preview content should not be scrollable within the paper view.

<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
Loading