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

Enhance Patient Search UI with Smart Component.. #8725

Closed
wants to merge 2 commits into from
Closed

Enhance Patient Search UI with Smart Component.. #8725

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
178c4ac
Fix: Facility page view in mobile phones ..
Oct 2, 2024
1ab675b
Add a better search UI for patients index page..
Oct 5, 2024
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
9 changes: 5 additions & 4 deletions src/Components/Facility/FacilityCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,12 +68,12 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
)}
</Link>

<div className="flex h-fit w-full flex-col flex-wrap justify-between md:h-full">
<div className="mx-auto flex h-fit w-full max-w-full flex-col flex-wrap justify-between md:h-full lg:max-w-3xl">
<div className="w-full p-4">
<div className="flex gap-5">
<div className="flex flex-col gap-5 sm:flex-row">
<Link
href={`/facility/${facility.id}`}
className="group relative z-0 hidden h-[150px] min-h-[150px] w-[150px] min-w-[150px] items-center justify-center self-stretch rounded-md bg-secondary-300 min-[425px]:flex"
className="group relative z-0 hidden h-[150px] min-h-[150px] w-[150px] min-w-[150px] items-center justify-center rounded-md bg-secondary-300 sm:flex"
>
{(facility.read_cover_image_url && (
<img
Expand All @@ -100,7 +100,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
>
<Link
href={`/facility/${facility.id}`}
className="float-left text-xl font-bold capitalize text-inherit hover:text-inherit"
className="text-xl font-bold capitalize text-inherit hover:text-inherit"
>
{facility.name}
</Link>
Expand All @@ -109,6 +109,7 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
href={`/facility/${facility.id}/cns`}
border
ghost
className="mt-2 sm:mt-0"
>
<CareIcon
icon="l-monitor-heart-rate"
Expand Down
20 changes: 12 additions & 8 deletions src/Components/Form/FormFields/FormField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,19 @@ type ErrorProps = {

export const FieldErrorText = (props: ErrorProps) => {
return (
<span
className={classNames(
"error-text ml-1 mt-2 text-xs font-medium tracking-wide text-danger-500 transition-opacity duration-300",
props.error ? "opacity-100" : "opacity-0",
props.className,
<>
{props.error && (
<span
className={classNames(
"error-text ml-1 mt-2 text-xs font-medium tracking-wide text-danger-500 transition-opacity duration-300",
props.error ? "opacity-100" : "opacity-0",
props.className,
)}
>
{props.error}
</span>
)}
>
{props.error}
</span>
</>
);
};

Expand Down
88 changes: 33 additions & 55 deletions src/Components/Patient/ManagePatients.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@ const Loading = lazy(() => import("../Common/Loading"));
interface TabPanelProps {
children?: ReactNode;
dir?: string;
index: any;
value: any;
index: number | string;
value: number | string;
}

function TabPanel(props: TabPanelProps) {
Expand Down Expand Up @@ -90,12 +90,7 @@ export const PatientManager = () => {
resultsPerPage,
} = useFilters({
limit: 12,
cacheBlacklist: [
"name",
"patient_no",
"phone_number",
"emergency_phone_number",
],
cacheBlacklist: ["name", "patient_no", "phone_number"],
});
const [selectedFacility, setSelectedFacility] = useState<FacilityModel>({
name: "",
Expand All @@ -106,9 +101,9 @@ export const PatientManager = () => {
const [showDoctors, setShowDoctors] = useState(false);
const [phone_number, setPhoneNumber] = useState("");
const [phoneNumberError, setPhoneNumberError] = useState("");
const [emergency_phone_number, setEmergencyPhoneNumber] = useState("");
const [emergencyPhoneNumberError, setEmergencyPhoneNumberError] =
useState("");
const searchByValues = ["phoneNumber", "uhid", "patientName"] as const;
const [searchBy, setSearchBy] =
useState<(typeof searchByValues)[number]>("phoneNumber");

const setPhoneNum = (phone_number: string) => {
setPhoneNumber(phone_number);
Expand All @@ -127,24 +122,6 @@ export const PatientManager = () => {
setPhoneNumberError("Enter a valid number");
};

const setEmergencyPhoneNum = (emergency_phone_number: string) => {
setEmergencyPhoneNumber(emergency_phone_number);
if (emergency_phone_number.length >= 13) {
setEmergencyPhoneNumberError("");
updateQuery({ emergency_phone_number });
return;
}

if (emergency_phone_number === "+91" || emergency_phone_number === "") {
setEmergencyPhoneNumberError("");
qParams.emergency_phone_number &&
updateQuery({ emergency_phone_number: null });
return;
}

setEmergencyPhoneNumberError("Enter a valid number");
};

const tabValue =
qParams.last_consultation__new_discharge_reason ||
qParams.is_active === "False"
Expand All @@ -162,9 +139,6 @@ export const PatientManager = () => {
phone_number: qParams.phone_number
? parsePhoneNumber(qParams.phone_number)
: undefined,
emergency_phone_number: qParams.emergency_phone_number
? parsePhoneNumber(qParams.emergency_phone_number)
: undefined,
local_body: qParams.lsgBody || undefined,
facility: qParams.facility,
facility_type: qParams.facility_type || undefined,
Expand Down Expand Up @@ -334,9 +308,6 @@ export const PatientManager = () => {
if (!params.phone_number) {
setPhoneNumber("+91");
}
if (!params.emergency_phone_number) {
setEmergencyPhoneNumber("+91");
}
},
});

Expand Down Expand Up @@ -978,22 +949,16 @@ export const PatientManager = () => {
</div>
<div className="col-span-3 w-full">
<div className="mt-2">
<div className="mb-4 mt-1 md:flex md:gap-4">
{searchBy === "patientName" && (
<SearchInput
label="Search by Patient"
placeholder="Enter patient name"
{...queryField("name")}
className="w-full grow"
/>
<SearchInput
label="Search by IP/OP Number"
placeholder="Enter IP/OP Number"
secondary
{...queryField("patient_no")}
className="w-full grow"
/>
</div>
<div className="mb-4 md:flex md:gap-4">
)}

{searchBy === "phoneNumber" && (
<PhoneNumberFormField
label="Search by Primary Number"
{...queryField("phone_number", "+91")}
Expand All @@ -1003,16 +968,30 @@ export const PatientManager = () => {
types={["mobile", "landline"]}
className="w-full grow"
/>
<PhoneNumberFormField
label="Search by Emergency Number"
{...queryField("emergency_phone_number", "+91")}
value={emergency_phone_number}
onChange={(e) => setEmergencyPhoneNum(e.value)}
error={emergencyPhoneNumberError}
types={["mobile", "landline"]}
className="w-full"
)}

{searchBy === "uhid" && (
<SearchInput
label="Search by IP/OP Number"
placeholder="Enter IP/OP Number"
secondary
{...queryField("patient_no")}
className="w-full grow"
/>
</div>
)}
</div>
<div className="flex gap-4 px-6 pt-6">
{["Phone Number", "UHID", "Name"].map((searchByTag, i) => (
<button
key={searchByTag}
className={`rounded px-2 py-1 ${searchBy === searchByValues[i] ? "bg-primary-500 text-white" : "bg-gray-200"}`}
onClick={() => {
setSearchBy(searchByValues[i]);
}}
>
{searchByTag}
</button>
))}
</div>
</div>
</div>
Expand Down Expand Up @@ -1046,7 +1025,6 @@ export const PatientManager = () => {
ordering,
}) => [
phoneNumber("Primary number", "phone_number"),
phoneNumber("Emergency number", "emergency_phone_number"),
badge("Patient name", "name"),
badge("IP/OP number", "patient_no"),
...dateRange("Modified", "modified_date"),
Expand Down
Loading