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

Show bed number on location card #8675

Closed
wants to merge 3 commits into from
Closed

Show bed number on location card #8675

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9187b41
Added temporary UI for location card
Shelly011s Sep 30, 2024
f695dff
Added query calls
Shelly011s Sep 30, 2024
537f986
Merge branch 'develop' into issues/8131/show-bed-number-on-location
Shelly011s Sep 30, 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
208 changes: 121 additions & 87 deletions src/Components/Facility/LocationManagement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import ButtonV2, { Cancel } from "../Common/components/ButtonV2";
import AuthorizeFor, { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
import CareIcon from "../../CAREUI/icons/CareIcon";
import Page from "../Common/components/Page";
import { LOCATION_BED_TYPES } from "../../Common/constants";
import routes from "../../Redux/api";
import PaginatedList from "../../CAREUI/misc/PaginatedList";
import { LocationModel } from "./models";
Expand All @@ -13,7 +14,7 @@ import ConfirmDialog from "../Common/ConfirmDialog";
import DialogModal from "../Common/Dialog";
import Uptime from "../Common/Uptime";
import useAuthUser from "../../Common/hooks/useAuthUser";

import useQuery from "../../Utils/request/useQuery";
const Loading = lazy(() => import("../Common/Loading"));

interface Props {
Expand Down Expand Up @@ -224,97 +225,130 @@ const Location = ({
disabled,
setShowDeletePopup,
facilityId,
}: LocationProps) => (
<div className="flex h-full w-full flex-col rounded border border-secondary-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400">
<div className="flex-1">
<div className="flex w-full items-start justify-between gap-2">
<div className="flex items-end gap-3">
<p className="break-all text-xl font-medium" id="view-location-name">
{name}
</p>
<div
className="mt-2 h-fit rounded-full border-2 border-primary-500 bg-primary-100 px-3 py-[3px]"
id="location-type"
>
<p className="text-xs font-bold text-primary-500">
{location_type}
}: LocationProps) => {
const { loading, data } = useQuery(routes.listFacilityBeds, {
query: {
facility: facilityId,
location: id,
},
});
let bedCountsByType: Record<string, number> = {};

if (!loading && data?.results?.length) {
bedCountsByType = data.results.reduce(
(acc: Record<string, number>, bed: any) => {
acc[bed.bed_type] = (acc[bed.bed_type] ?? 0) + 1;
return acc;
},
{},
);
}

return (
<div className="flex h-full w-full flex-col rounded border border-gray-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400">
<div className="flex-1">
<div className="flex w-full items-start justify-between gap-2">
<div className="flex items-start gap-3">
<p
className="break-all text-xl font-medium"
id="view-location-name"
>
{name}
</p>
<div
className="mt-2 h-fit rounded-full border-2 border-primary-500 bg-primary-100 px-3 py-[3px]"
id="location-type"
>
<p className="text-xs font-bold text-primary-500">
{location_type}
</p>
</div>
</div>
</div>
</div>
<p
className="mt-3 break-all text-sm font-medium text-secondary-700"
id="view-location-description"
>
{description || "-"}
</p>
<p className="mt-3 text-sm font-semibold text-secondary-700">
Middleware Address:
</p>
<p
className="mt-1 break-all font-mono text-sm font-bold text-secondary-700"
id="view-location-middleware"
>
{middleware_address || "-"}
</p>
<Uptime
route={routes.listFacilityAssetLocationAvailability}
params={{ external_id: id, facility_external_id: facilityId }}
header={
<p className="mt-3 text-sm font-semibold text-secondary-700">
Middleware Uptime
</p>
}
centerInfoPanel
/>
</div>

<ButtonV2
id="manage-bed-button"
variant="secondary"
border
className="mt-3 w-full"
href={`location/${id}/beds`}
>
<CareIcon icon="l-bed" className="text-lg" />
Manage Beds
</ButtonV2>
<div className="mt-2 flex w-full flex-col gap-2 md:flex-row">
<div className="w-full md:w-1/2">
<ButtonV2
id="edit-location-button"
variant="secondary"
border
className="w-full"
href={`location/${id}/update`}
authorizeFor={NonReadOnlyUsers}
<p
className="mt-3 break-all text-sm font-medium text-gray-700"
id="view-location-description"
>
<CareIcon icon="l-pen" className="text-lg" />
Edit
</ButtonV2>
</div>
<div className="w-full md:w-1/2">
<ButtonV2
authorizeFor={AuthorizeFor(["DistrictAdmin", "StateAdmin"])}
id="delete-location-button"
variant="secondary"
border
className="w-full"
tooltip={disabled ? "Contact your admin to delete the location" : ""}
tooltipClassName=" text-xs w-full lg:w-auto"
onClick={() =>
setShowDeletePopup({ open: true, name: name ?? "", id: id ?? "" })
}
{description || "-"}
</p>
<p className="mt-3 text-sm font-semibold text-gray-700">
Middleware Address:
</p>
<p
className="mt-1 break-all font-mono text-sm font-bold text-gray-700"
id="view-location-middleware"
>
<CareIcon icon="l-trash" className="text-lg" />
Delete
</ButtonV2>
{middleware_address || "-"}
</p>
<Uptime
route={routes.listFacilityAssetLocationAvailability}
params={{ external_id: id, facility_external_id: facilityId }}
header={
<p className="mt-3 text-sm font-semibold text-gray-700">
Middleware Uptime
</p>
}
centerInfoPanel
/>
</div>
<p className="mt-3 text-sm font-semibold text-gray-700">Beds</p>
<div className="grid grid-cols-4 gap-3 rounded-md bg-gray-100 p-3 text-center text-sm text-gray-700">
{LOCATION_BED_TYPES.map((type) => (
<div key={type.id}>
<p className="font-semibold">{type.name}</p>
<p>{bedCountsByType[type.id] || 0} beds</p>
</div>
))}
</div>
<ButtonV2
id="manage-bed-button"
variant="secondary"
border
className="mt-3 w-full"
href={`location/${id}/beds`}
>
<CareIcon icon="l-bed" className="text-lg" />
Manage Beds
</ButtonV2>
<div className="mt-2 flex w-full flex-col gap-2 md:flex-row">
<div className="w-full md:w-1/2">
<ButtonV2
id="edit-location-button"
variant="secondary"
border
className="w-full"
href={`location/${id}/update`}
authorizeFor={NonReadOnlyUsers}
>
<CareIcon icon="l-pen" className="text-lg" />
Edit
</ButtonV2>
</div>
<div className="w-full md:w-1/2">
<ButtonV2
authorizeFor={AuthorizeFor(["DistrictAdmin", "StateAdmin"])}
id="delete-location-button"
variant="secondary"
border
className="w-full"
tooltip={
disabled ? "Contact your admin to delete the location" : ""
}
tooltipClassName=" text-xs w-full lg:w-auto"
onClick={() =>
setShowDeletePopup({ open: true, name: name ?? "", id: id ?? "" })
}
>
<CareIcon icon="l-trash" className="text-lg" />
Delete
</ButtonV2>
</div>
</div>
</div>

<div className="mt-3 flex items-center justify-between gap-4 text-sm font-medium text-secondary-700">
<RecordMeta time={created_date} prefix="Created:" />
<RecordMeta time={modified_date} prefix="Modified:" />
<div className="mt-3 flex items-center justify-between gap-4 text-sm font-medium text-gray-700">
<RecordMeta time={created_date} prefix="Created:" />
<RecordMeta time={modified_date} prefix="Modified:" />
</div>
</div>
</div>
);
);
};
Loading