-
Notifications
You must be signed in to change notification settings - Fork 516
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
replace useDispatch with useQuery and request in FacilityCard, Facili…
…lyHome and FacilityUsers (#6575) * replace useDispatch with useQuery and request in facilityCard, facilityHome and facilityUsers * remove delete model and let useQuery handel delete response * remove unused useStates variables in FacilityUsers * replace useState variables with useQuery variables and also replaced useEffect with useQuery * handle loading states * Implemented a dedicated component for the triage table in FacilityHome * Implemented a dedicated component for the doctor list in FacilityHome * implemeted a dedicated component for bed capacity in facility home * remove trailing slash * Removed unused fire requests * Fix deleting bed and doctor capacity bug and remove redundant code * fix doctor capacity total count bug --------- Co-authored-by: Rithvik Nishad <[email protected]>
- Loading branch information
1 parent
5cde457
commit 4da37ba
Showing
9 changed files
with
529 additions
and
528 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| import { useState } from "react"; | ||
| import { getBedTypes } from "../../Common/constants"; | ||
| import routes from "../../Redux/api"; | ||
| import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor"; | ||
| import useQuery from "../../Utils/request/useQuery"; | ||
| import DialogModal from "../Common/Dialog"; | ||
| import ButtonV2 from "../Common/components/ButtonV2"; | ||
| import { BedCapacity } from "./BedCapacity"; | ||
| import BedTypeCard from "./BedTypeCard"; | ||
| import useConfig from "../../Common/hooks/useConfig"; | ||
|
|
||
| export const FacilityBedCapacity = (props: any) => { | ||
| const [bedCapacityModalOpen, setBedCapacityModalOpen] = useState(false); | ||
| const config = useConfig(); | ||
|
|
||
| const capacityQuery = useQuery(routes.getCapacity, { | ||
| pathParams: { facilityId: props.facilityId }, | ||
| }); | ||
|
|
||
| let capacityList: any = null; | ||
| if (!capacityQuery.data || !capacityQuery.data.results.length) { | ||
| capacityList = ( | ||
| <h5 className="mt-4 flex w-full items-center justify-center rounded-lg bg-white p-4 text-xl font-bold text-gray-500 shadow"> | ||
| No Bed Types Found | ||
| </h5> | ||
| ); | ||
| } else { | ||
| const totalBedCount = capacityQuery.data.results.reduce( | ||
| (acc, x) => acc + (x.total_capacity ? x.total_capacity : 0), | ||
| 0 | ||
| ); | ||
| const totalOccupiedBedCount = capacityQuery.data.results.reduce( | ||
| (acc, x) => acc + (x.current_capacity ? x.current_capacity : 0), | ||
| 0 | ||
| ); | ||
|
|
||
| capacityList = ( | ||
| <div className="mt-4 grid w-full gap-7 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"> | ||
| <BedTypeCard | ||
| label="Total Beds" | ||
| used={totalOccupiedBedCount} | ||
| total={totalBedCount} | ||
| handleUpdate={() => { | ||
| return; | ||
| }} | ||
| /> | ||
| {getBedTypes(config).map((x) => { | ||
| const res = capacityQuery.data?.results.find((data) => { | ||
| return data.room_type === x.id; | ||
| }); | ||
| if ( | ||
| res && | ||
| res.current_capacity !== undefined && | ||
| res.total_capacity !== undefined | ||
| ) { | ||
| const removeCurrentBedType = (bedTypeId: number | undefined) => { | ||
| if (capacityQuery.data !== undefined) { | ||
| capacityQuery.data.results.filter((i) => i.id !== bedTypeId); | ||
| capacityQuery.refetch(); | ||
| } | ||
| }; | ||
| return ( | ||
| <BedTypeCard | ||
| facilityId={props.facilityId} | ||
| bedCapacityId={res.id} | ||
| key={`bed_${res.id}`} | ||
| room_type={res.room_type} | ||
| label={x.text} | ||
| used={res.current_capacity} | ||
| total={res.total_capacity} | ||
| lastUpdated={res.modified_date} | ||
| removeBedType={removeCurrentBedType} | ||
| handleUpdate={() => { | ||
| capacityQuery.refetch(); | ||
| }} | ||
| /> | ||
| ); | ||
| } | ||
| })} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div> | ||
| <div className="mt-5 rounded bg-white p-3 shadow-sm md:p-6"> | ||
| <div className="justify-between md:flex md:border-b md:pb-2"> | ||
| <div className="mb-2 text-xl font-semibold">Bed Capacity</div> | ||
| <ButtonV2 | ||
| className="w-full md:w-auto" | ||
| onClick={() => setBedCapacityModalOpen(true)} | ||
| authorizeFor={NonReadOnlyUsers} | ||
| > | ||
| <i className="fas fa-bed mr-2 text-white" /> | ||
| Add More Bed Types | ||
| </ButtonV2> | ||
| </div> | ||
| <div>{capacityList}</div> | ||
| </div> | ||
|
|
||
| {bedCapacityModalOpen && ( | ||
| <DialogModal | ||
| show={bedCapacityModalOpen} | ||
| onClose={() => setBedCapacityModalOpen(false)} | ||
| title="Add Bed Capacity" | ||
| className="max-w-md md:min-w-[600px]" | ||
| > | ||
| <BedCapacity | ||
| facilityId={props.facilityId} | ||
| handleClose={() => setBedCapacityModalOpen(false)} | ||
| handleUpdate={async () => { | ||
| capacityQuery.refetch(); | ||
| }} | ||
| /> | ||
| </DialogModal> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| import { useState } from "react"; | ||
| import { DOCTOR_SPECIALIZATION } from "../../Common/constants"; | ||
| import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor"; | ||
| import ButtonV2 from "../Common/components/ButtonV2"; | ||
| import DialogModal from "../Common/Dialog"; | ||
| import { DoctorCapacity } from "./DoctorCapacity"; | ||
| import useQuery from "../../Utils/request/useQuery"; | ||
| import routes from "../../Redux/api"; | ||
| import { DoctorModal } from "./models"; | ||
| import DoctorsCountCard from "./DoctorsCountCard"; | ||
| import { DoctorIcon } from "../TeleIcu/Icons/DoctorIcon"; | ||
|
|
||
| export const FacilityDoctorList = (props: any) => { | ||
| const [doctorCapacityModalOpen, setDoctorCapacityModalOpen] = useState(false); | ||
| const [totalDoctors, setTotalDoctors] = useState(0); | ||
|
|
||
| const doctorQuery = useQuery(routes.listDoctor, { | ||
| pathParams: { facilityId: props.facilityId }, | ||
| onResponse: ({ res, data }) => { | ||
| if (res?.ok && data) { | ||
| let totalCount = 0; | ||
| data.results.map((doctor: DoctorModal) => { | ||
| if (doctor.count) { | ||
| totalCount += doctor.count; | ||
| } | ||
| }); | ||
| setTotalDoctors(totalCount); | ||
| } | ||
| }, | ||
| }); | ||
|
|
||
| let doctorList: any = null; | ||
| if (!doctorQuery.data || !doctorQuery.data.results.length) { | ||
| doctorList = ( | ||
| <h5 className="flex w-full items-center justify-center rounded-lg bg-white p-4 text-xl font-bold text-gray-500 shadow"> | ||
| No Doctors Found | ||
| </h5> | ||
| ); | ||
| } else { | ||
| doctorList = ( | ||
| <div className="mt-4 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"> | ||
| {/* Total Doctors Count Card */} | ||
| <div className="w-full"> | ||
| <div className="flex h-full flex-col rounded-sm border border-primary-500 bg-primary-100 shadow-sm"> | ||
| <div className="flex flex-1 items-center justify-start gap-3 px-4 py-6"> | ||
| <div className="rounded-full bg-primary-500 p-4"> | ||
| <DoctorIcon className="h-5 w-5 fill-current text-white" /> | ||
| </div> | ||
| <div> | ||
| <div className="text-sm font-medium text-[#808080]"> | ||
| Total Doctors | ||
| </div> | ||
| <h2 className="mt-2 text-xl font-bold">{totalDoctors}</h2> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| {doctorQuery.data.results.map((data: DoctorModal) => { | ||
| const removeCurrentDoctorData = (doctorId: number | undefined) => { | ||
| if (doctorQuery.data !== undefined) { | ||
| doctorQuery.data?.results.filter( | ||
| (i: DoctorModal) => i.id !== doctorId | ||
| ); | ||
| doctorQuery.refetch(); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <DoctorsCountCard | ||
| facilityId={props.facilityId} | ||
| key={`bed_${data.id}`} | ||
| handleUpdate={async () => { | ||
| doctorQuery.refetch(); | ||
| }} | ||
| {...data} | ||
| removeDoctor={removeCurrentDoctorData} | ||
| /> | ||
| ); | ||
| })} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div> | ||
| <div className="mt-5 rounded bg-white p-3 shadow-sm md:p-6"> | ||
| <div className="justify-between md:flex md:pb-2"> | ||
| <div className="mb-2 text-xl font-bold">Doctors List</div> | ||
| <ButtonV2 | ||
| className="w-full md:w-auto" | ||
| onClick={() => setDoctorCapacityModalOpen(true)} | ||
| disabled={doctorList.length === DOCTOR_SPECIALIZATION.length} | ||
| authorizeFor={NonReadOnlyUsers} | ||
| > | ||
| <i className="fas fa-user-md mr-2 text-white" /> | ||
| Add Doctor Types | ||
| </ButtonV2> | ||
| </div> | ||
| <div className="mt-4">{doctorList}</div> | ||
| </div> | ||
|
|
||
| {doctorCapacityModalOpen && ( | ||
| <DialogModal | ||
| show={doctorCapacityModalOpen} | ||
| onClose={() => setDoctorCapacityModalOpen(false)} | ||
| title="Add Doctor Capacity" | ||
| className="max-w-md md:min-w-[600px]" | ||
| > | ||
| <DoctorCapacity | ||
| facilityId={props.facilityId} | ||
| handleClose={() => setDoctorCapacityModalOpen(false)} | ||
| handleUpdate={async () => { | ||
| doctorQuery.refetch(); | ||
| }} | ||
| /> | ||
| </DialogModal> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; |
Oops, something went wrong.