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

Bed management UI enhancement #8839

Merged
merged 5 commits into from
Oct 22, 2024
Merged

Bed management UI enhancement #8839

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
73a68b5
Bed enhancement
Jacobjeevan Oct 18, 2024
04927bd
adjusted bed description length
Jacobjeevan Oct 21, 2024
2af86a3
bed desc changes
Jacobjeevan Oct 21, 2024
07575eb
test fix
Jacobjeevan Oct 21, 2024
98a57de
spacing and mobile view optimization
Jacobjeevan Oct 21, 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
272 changes: 140 additions & 132 deletions src/Components/Facility/BedManagement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { useState } from "react";
import ButtonV2 from "../Common/components/ButtonV2";
import { BedModel } from "./models";
import { ReactElement } from "react";
import * as Notification from "../../Utils/Notifications.js";
import { LOCATION_BED_TYPES } from "../../Common/constants";
import BedDeleteDialog from "./BedDeleteDialog";
Expand All @@ -14,6 +13,8 @@ import useQuery from "../../Utils/request/useQuery";
import useFilters from "../../Common/hooks/useFilters";
import useAuthUser from "../../Common/hooks/useAuthUser";
import Loading from "@/Components/Common/Loading";
import PaginatedList from "@/CAREUI/misc/PaginatedList";
import { useTranslation } from "react-i18next";
interface BedManagementProps {
facilityId: string;
locationId: string;
Expand All @@ -30,17 +31,16 @@ interface BedRowProps {
isOccupied: boolean;
}

const BedRow = (props: BedRowProps) => {
const {
id,
facilityId,
name,
description,
triggerRerender,
locationId,
bedType,
isOccupied,
} = props;
const BedCard = ({
id,
facilityId,
name,
description,
triggerRerender,
locationId,
bedType,
isOccupied,
}: BedRowProps) => {
const [bedData, setBedData] = useState<{
show: boolean;
name: string;
Expand All @@ -52,11 +52,21 @@ const BedRow = (props: BedRowProps) => {
name,
});
};
const { t } = useTranslation();

const allowedUser = ["DistrictAdmin", "StateAdmin"].includes(
authUser.user_type,
);

const getDesc = () => {
if (description) {
return description.length > 100
? description.slice(0, 100) + "..."
: description;
}
return "-";
};
Jacobjeevan marked this conversation as resolved.
Show resolved Hide resolved

const handleDeleteConfirm = async () => {
const { res } = await request(routes.deleteFacilityBed, {
pathParams: { external_id: id },
Expand All @@ -80,19 +90,17 @@ const BedRow = (props: BedRowProps) => {
handleCancel={handleDeleteCancel}
handleOk={handleDeleteConfirm}
/>
<div
key={id}
className="w-full items-center justify-between border-b py-4 lg:flex"
>
<div className="mt-2 space-y-2 px-4 lg:w-3/4">
<div className="flex flex-col sm:flex-row">
<p
className="inline break-words text-xl capitalize"
id="view-bed-name"
>
{name}
</p>{" "}
&nbsp;
<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 flex-col items-start justify-between gap-2">
<div>
<p
className="inline break-words text-xl capitalize"
id="view-bed-name"
>
{name}
</p>
</div>
<div id="view-bedbadges">
{LOCATION_BED_TYPES.find((item) => item.id === bedType) && (
<p className="mb-1 inline-flex w-fit items-center rounded-md bg-blue-100 px-2.5 py-0.5 text-sm font-medium capitalize leading-5 text-blue-800">
Expand All @@ -108,45 +116,53 @@ const BedRow = (props: BedRowProps) => {
: "bg-primary-100 text-primary-600"
} mb-1 ml-1 inline-flex w-fit items-center rounded-md px-2.5 py-0.5 text-sm font-medium capitalize leading-5`}
>
{isOccupied ? "Occupied" : "Vacant"}
{isOccupied ? t("occupied") : t("vacant")}
</p>
</div>
</div>
<p className="break-all">{description}</p>
</div>
<div className="mt-4 flex flex-col gap-2 lg:mt-0 lg:flex-row">
<ButtonV2
id="edit-bed-button"
href={`/facility/${facilityId}/location/${locationId}/beds/${id}/update`}
authorizeFor={NonReadOnlyUsers}
className="w-full lg:w-auto"
variant="secondary"
border
ghost
>
<CareIcon icon="l-pen" className="text-lg" />
Edit
</ButtonV2>
<ButtonV2
id="delete-bed-button"
onClick={() => handleDelete(name, id)}
authorizeFor={AuthorizeFor(["DistrictAdmin", "StateAdmin"])}
variant="danger"
border
ghost
className="w-full lg:w-auto"
tooltip={
!allowedUser
? "Contact your admin to delete the bed"
: isOccupied
? "Bed is occupied"
: undefined
}
tooltipClassName=" text-xs w-full lg:w-auto"
<p
className="my-3 break-all text-sm font-medium text-secondary-700"
id="view-bed-description"
>
<CareIcon icon="l-trash-alt" className="text-lg" />
Delete
</ButtonV2>
{getDesc()}
</p>
</div>

<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-bed-button"
href={`/facility/${facilityId}/location/${locationId}/beds/${id}/update`}
authorizeFor={NonReadOnlyUsers}
variant="secondary"
border
className="w-full"
>
<CareIcon icon="l-pen" className="text-lg" />
{t("edit")}
</ButtonV2>
</div>
<div className="w-full md:w-1/2">
<ButtonV2
id="delete-bed-button"
onClick={() => handleDelete(name, id)}
authorizeFor={AuthorizeFor(["DistrictAdmin", "StateAdmin"])}
variant="secondary"
border
className="w-full"
tooltip={
!allowedUser
? "Contact your admin to delete the bed"
: isOccupied
? "Bed is occupied"
: undefined
}
tooltipClassName=" text-xs w-full lg:w-auto"
>
<CareIcon icon="l-trash" className="text-lg" />
{t("delete")}
</ButtonV2>
</div>
</div>
</div>
</>
Expand All @@ -155,9 +171,8 @@ const BedRow = (props: BedRowProps) => {

export const BedManagement = (props: BedManagementProps) => {
const { facilityId, locationId } = props;
let bed: ReactElement | null = null;
let BedList: ReactElement[] | ReactElement = [];
const { qParams, Pagination, resultsPerPage } = useFilters({});
const { qParams, resultsPerPage } = useFilters({});
const { t } = useTranslation();

const { data: location } = useQuery(routes.getFacilityAssetLocation, {
pathParams: {
Expand All @@ -166,77 +181,70 @@ export const BedManagement = (props: BedManagementProps) => {
},
});

const { loading, data, refetch } = useQuery(routes.listFacilityBeds, {
query: {
facility: facilityId,
location: locationId,
limit: resultsPerPage,
offset: (qParams.page ? qParams.page - 1 : 0) * resultsPerPage,
},
});

if (data?.results.length) {
BedList = data.results.map((bedItem: BedModel) => (
<BedRow
id={bedItem.id ?? ""}
facilityId={facilityId ?? ""}
name={bedItem.name ?? ""}
description={bedItem.description ?? ""}
bedType={bedItem.bed_type ?? ""}
triggerRerender={refetch}
key={locationId ?? ""}
locationId={locationId ?? ""}
isOccupied={bedItem.is_occupied ?? false}
/>
));
} else if (data?.results.length === 0) {
BedList = (
<p className="flex w-full justify-center bg-white p-5 text-center text-2xl font-bold text-secondary-500">
No beds available in this location
</p>
);
}

bed = (
<>
<div className="mt-5 flex grow flex-wrap bg-white p-4">{BedList}</div>
{Boolean(data?.count && data.count > 0) && (
<div className="mt-4 flex w-full justify-center">
<Pagination totalCount={data?.count ?? 0} />
</div>
)}
</>
);

if (loading) {
return <Loading />;
}

return (
<Page
title="Bed Management"
crumbsReplacements={{
[facilityId]: { name: location?.facility?.name },
[locationId]: {
name: location?.name,
uri: `/facility/${facilityId}/location`,
},
<PaginatedList
route={routes.listFacilityBeds}
pathParams={{ facility_external_id: facilityId }}
query={{
facility: facilityId,
location: locationId,
limit: resultsPerPage,
offset: (qParams.page ? qParams.page - 1 : 0) * resultsPerPage,
}}
backUrl={`/facility/${facilityId}/location/${locationId}`}
>
<div className="container mx-auto px-4 py-2 sm:px-8">
<div className="flex justify-end">
<ButtonV2
id="add-new-bed"
href={`/facility/${facilityId}/location/${locationId}/beds/add`}
authorizeFor={NonReadOnlyUsers}
>
<CareIcon icon="l-plus" className="text-lg" />
Add New Bed(s)
</ButtonV2>
</div>
{bed}
</div>
</Page>
{({ refetch }) => (
<Page
title="Bed Management"
crumbsReplacements={{
[facilityId]: { name: location?.facility?.name },
[locationId]: {
name: location?.name,
uri: `/facility/${facilityId}/location`,
},
}}
backUrl={`/facility/${facilityId}/location/${locationId}`}
>
<div className="container mx-auto px-4 py-2 sm:px-8">
<div className="flex justify-end">
<ButtonV2
id="add-new-bed"
href={`/facility/${facilityId}/location/${locationId}/beds/add`}
authorizeFor={NonReadOnlyUsers}
>
<CareIcon icon="l-plus" className="text-lg" />
{t("add_new_beds")}
</ButtonV2>
</div>
<div className="w-full @container">
<PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-secondary-200 bg-white p-5 text-center text-2xl font-bold text-secondary-500">
<span>{t("no_beds_available")}</span>
</PaginatedList.WhenEmpty>

<PaginatedList.WhenLoading>
<Loading />
</PaginatedList.WhenLoading>
<PaginatedList.Items<BedModel> className="my-8 grid gap-3 @4xl:grid-cols-3 @6xl:grid-cols-4">
{(bedItem: BedModel) => (
<BedCard
id={bedItem.id ?? ""}
facilityId={facilityId ?? ""}
name={bedItem.name ?? ""}
description={bedItem.description ?? ""}
bedType={bedItem.bed_type ?? ""}
triggerRerender={refetch}
key={locationId ?? ""}
locationId={locationId ?? ""}
isOccupied={bedItem.is_occupied ?? false}
/>
)}
</PaginatedList.Items>
</div>
<div className="flex w-full items-center justify-center">
<PaginatedList.Paginator hideIfSinglePage />
</div>
</div>
</Page>
)}
</PaginatedList>
);
};
4 changes: 4 additions & 0 deletions src/Locale/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,6 +224,7 @@
"add_beds": "Add Bed(s)",
"add_details_of_patient": "Add Details of Patient",
"add_location": "Add Location",
"add_new_beds": "Add New Bed(s)",
Copy link
Member

Choose a reason for hiding this comment

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

could've been improved with https://www.i18next.com/translation-function/plurals#languages-with-multiple-plurals

"add_new_user": "Add New User",
"add_notes": "Add notes",
"add_policy": "Add Insurance Policy",
Expand Down Expand Up @@ -694,6 +695,7 @@
"no": "No",
"no_attachments_found": "This communication has no attachments.",
"no_bed_types_found": "No Bed Types found",
"no_beds_available": "No beds available",
"no_changes": "No changes",
"no_changes_made": "No changes made",
"no_consultation_updates": "No consultation updates",
Expand Down Expand Up @@ -735,6 +737,7 @@
"nutrition": "Nutrition",
"occupancy": "Occupancy",
"occupation": "Occupation",
"occupied": "Occupied",
"on": "On",
"ongoing_medications": "Ongoing Medications",
"open": "Open",
Expand Down Expand Up @@ -1032,6 +1035,7 @@
"user_management": "User Management",
"username": "Username",
"users": "Users",
"vacant": "Vacant",
"vehicle_preference": "Vehicle preference",
"vendor_name": "Vendor Name",
"video_conference_link": "Video Conference Link",
Expand Down
Loading