Skip to content

Commit

Permalink
Added temporary UI for location card
Browse files Browse the repository at this point in the history
  • Loading branch information
@Shelly011s
Shelly011s committed Sep 30, 2024
1 parent dabf8cc commit 9187b41
Showing 1 changed file with 125 additions and 87 deletions.
212 changes: 125 additions & 87 deletions src/Components/Facility/LocationManagement.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,18 @@ 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 {
facilityId: string;
// locationId: string;
}

interface LocationProps extends LocationModel {
facilityId: string;
disabled: boolean;
// locationId: string;
setShowDeletePopup: (e: { open: boolean; name: string; id: string }) => void;
}

Expand Down Expand Up @@ -117,6 +119,7 @@ export default function LocationManagement({ facilityId }: Props) {
<Location
setShowDeletePopup={setShowDeletePopup}
facilityId={facilityId}
// locationId={locationId}
{...item}
disabled={
["DistrictAdmin", "StateAdmin"].includes(authUser.user_type)
Expand Down Expand Up @@ -224,97 +227,132 @@ 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}
// locationId
}: LocationProps) => {
// const { loading, data, refetch } = useQuery(routes.listFacilityBeds, {
// query: {
// facility: facilityId,
// // location: locationId,
// // limit: resultsPerPage,
// // offset: (qParams.page ? qParams.page - 1 : 0) * resultsPerPage,
// },
// });

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">
<div>
<p className="font-semibold">Isolation</p>
<p>8 beds</p>
</div>
<div>
<p className="font-semibold">ICU</p>
<p>5 beds</p>
</div>
<div>
<p className="font-semibold">Oxygen Support</p>
<p> 8 beds</p>
</div>
<div>
<p className="font-semibold">Regular</p>
<p>20 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>
);
);
};

0 comments on commit 9187b41

Please sign in to comment.