Skip to content

Commit

Permalink
Merge branch 'develop' into issues/9043/sidebar-collapse-test
Browse files Browse the repository at this point in the history
  • Loading branch information
Alok authored Nov 11, 2024
2 parents eb07939 + 25c8e0b commit 287e353
Show file tree
Hide file tree
Showing 3 changed files with 216 additions and 54 deletions.
2 changes: 1 addition & 1 deletion .env
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,4 @@ ESLINT_NO_DEV_ERRORS=true
CARE_CDN_URL="https://egov-s3-facility-10bedicu.s3.amazonaws.com https://egov-s3-patient-data-10bedicu.s3.amazonaws.com http://localhost:4566"
REACT_ALLOWED_LOCALES="en,hi,ta,ml,mr,kn"

REACT_ENABLED_APPS=""
REACT_ENABLED_APPS=""
1 change: 1 addition & 0 deletions public/locale/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -487,6 +487,7 @@
"consultation_not_filed_description": "Please file a consultation for this patient to continue.",
"consultation_notes": "General Instructions (Advice)",
"consultation_updates": "Consultation updates",
"contact_info": "Contact Info",
"contact_number": "Contact Number",
"contact_person": "Name of Contact Person at Facility",
"contact_person_at_the_facility": "Contact person at the current facility",
Expand Down
267 changes: 214 additions & 53 deletions src/components/Shifting/ShiftingList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import careConfig from "@careConfig";
import { navigate } from "raviger";
import { useState } from "react";
import { useTranslation } from "react-i18next";
Expand All @@ -13,15 +14,16 @@ import Page from "@/components/Common/Page";
import { ShiftingModel } from "@/components/Facility/models";
import SearchInput from "@/components/Form/SearchInput";
import BadgesList from "@/components/Shifting/ShiftingBadges";
import ShiftingBlock from "@/components/Shifting/ShiftingBlock";
import { formatFilter } from "@/components/Shifting/ShiftingCommons";
import ListFilter from "@/components/Shifting/ShiftingFilters";

import useAuthUser from "@/hooks/useAuthUser";
import useFilters from "@/hooks/useFilters";

import routes from "@/Utils/request/api";
import request from "@/Utils/request/request";
import useQuery from "@/Utils/request/useQuery";
import { formatDateTime } from "@/Utils/utils";

export default function ListView() {
const {
Expand All @@ -31,19 +33,31 @@ export default function ListView() {
FilterBadges,
advancedFilter,
resultsPerPage,
} = useFilters({ cacheBlacklist: ["patient_name"], limit: 12 });
} = useFilters({ cacheBlacklist: ["patient_name"] });

const [modalFor, setModalFor] = useState<ShiftingModel>();
const [modalFor, setModalFor] = useState<{
externalId: string | undefined;
loading: boolean;
}>({
externalId: undefined,
loading: false,
});

const authUser = useAuthUser();
const { t } = useTranslation();

const handleTransferComplete = async (shift?: ShiftingModel) => {
if (!shift) return;
await request(routes.completeTransfer, {
pathParams: { externalId: shift.external_id },
});
navigate(
`/facility/${shift.assigned_facility}/patient/${shift.patient}/consultation`,
);
const handleTransferComplete = async (shift: ShiftingModel) => {
setModalFor({ ...modalFor, loading: true });
try {
await request(routes.completeTransfer, {
pathParams: { externalId: shift.external_id },
});
navigate(
`/facility/${shift.assigned_facility}/patient/${shift.patient}/consultation`,
);
} catch (error) {
setModalFor({ externalId: undefined, loading: false });
}
};

const {
Expand All @@ -53,7 +67,6 @@ export default function ListView() {
} = useQuery(routes.listShiftRequests, {
query: formatFilter({
...qParams,
limit: resultsPerPage,
offset: (qParams.page ? qParams.page - 1 : 0) * resultsPerPage,
}),
});
Expand All @@ -62,42 +75,173 @@ export default function ListView() {
if (loading) {
return <Loading />;
}

if (!data || data.length === 0) {
if (data && !data.length) {
return (
<div className="flex h-[calc(100vh-200px)] items-center justify-center">
<div className="text-2xl font-bold text-secondary-600">
{t("no_patients_to_show")}
</div>
<div className="mt-64 flex flex-1 justify-center text-secondary-600">
{t("no_patients_to_show")}
</div>
);
}

return (
<div>
<div className="mb-5 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{data.map((shift, i) => (
<div
key={i}
className="rounded-lg border border-secondary-300 bg-white"
>
<ShiftingBlock
onTransfer={() => setModalFor(shift)}
shift={shift}
/>
return data.map((shift: ShiftingModel) => (
<div
key={`shift_${shift.id}`}
className="w-full border-b-2 border-gray-100"
>
<div className="border-3 mx-3 flex grid w-full gap-1 overflow-hidden bg-white p-4 shadow sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-5">
<div className="col-span-1 px-2 text-left">
<div className="text-sm font-bold capitalize">
{shift.patient_object.name}
</div>
<div className="text-xs font-semibold capitalize">
{shift.patient_object.age}
</div>
</div>

<div className="col-span-1 flex flex-col px-2 text-left">
<div className="phone number">
<dt
title={t("phone_number")}
className="flex items-center text-sm font-medium leading-5 text-secondary-500"
>
<CareIcon icon="l-mobile-android" className="mr-2" />
<dd className="text-sm font-bold leading-5 text-secondary-900">
{shift.patient_object.phone_number || ""}
</dd>
</dt>
</div>
))}
<div className="address mt-1">
<dt
title={t("patient_address")}
className="flex items-center text-sm font-medium leading-5 text-secondary-500"
>
<CareIcon icon="l-home" className="mr-2" />
<dd className="font-xs leading-5 text-secondary-900">
{shift.patient_object.address || "--"}
</dd>
</dt>
</div>
</div>

<div className="col-span-1 flex flex-col px-3 text-left">
<div className="3xl:flex-row mb-2 flex gap-2 sm:flex-row md:flex-row lg:flex-col xl:flex-row 2xl:flex-row">
<dt
title={t("shifting_status")}
className={`mt-1 flex h-5 shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-medium leading-4 ${
shift.status === "COMPLETED"
? "bg-sky-200"
: "bg-yellow-200 text-yellow-500"
}`}
>
<CareIcon icon="l-truck" className="mr-2" />
<dd className="text-sky-600">{shift.status}</dd>
</dt>

<div>
{shift.emergency && (
<span className="inline-block shrink-0 rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium leading-4 text-red-800">
{t("emergency")}
</span>
)}
</div>
</div>

<div className="text-center">
<dt
title={t("last_modified")}
className={"flex items-center text-sm font-medium leading-5"}
>
<CareIcon icon="l-stopwatch" className="mr-1" />
<dd className="text-xs font-medium leading-5">
{formatDateTime(shift.modified_date) || "--"}
</dd>
</dt>
</div>
</div>

<div className="col-span-1 text-left">
<dt
title={t("origin_facility")}
className="flex items-center text-left text-sm font-medium leading-5 text-secondary-500"
>
<CareIcon icon="l-plane-departure" className="mr-2" />
<dd className="text-sm font-bold leading-5 text-secondary-900">
{shift.origin_facility_object?.name}
</dd>
</dt>

{careConfig.wartimeShifting && (
<dt
title={t("shifting_approving_facility")}
className="flex items-center text-left text-sm font-medium leading-5 text-secondary-500"
>
<CareIcon icon="l-user-check" className="mr-2" />
<dd className="text-sm font-bold leading-5 text-secondary-900">
{shift.shifting_approving_facility_object?.name}
</dd>
</dt>
)}

<dt
title={t("assigned_facility")}
className="flex items-center text-left text-sm font-medium leading-5 text-secondary-500"
>
<CareIcon icon="l-plane-arrival" className="mr-2" />
<dd className="text-sm font-bold leading-5 text-secondary-900">
{shift.assigned_facility_external ||
shift.assigned_facility_object?.name ||
t("yet_to_be_decided")}
</dd>
</dt>
</div>
<div className="col-span-1 mt-2 flex flex-col text-left">
<ButtonV2
onClick={(_) => navigate(`/shifting/${shift.external_id}`)}
variant="secondary"
border
className="w-full"
>
<CareIcon icon="l-eye" className="mr-2" /> {t("all_details")}
</ButtonV2>
{shift.status === "COMPLETED" && shift.assigned_facility && (
<div className="mt-2">
<ButtonV2
className="w-full"
disabled={
!shift.patient_object.allow_transfer ||
!(
["DistrictAdmin", "StateAdmin"].includes(
authUser.user_type,
) ||
authUser.home_facility_object?.id ===
shift.assigned_facility
)
}
onClick={() =>
setModalFor({
externalId: shift.external_id,
loading: false,
})
}
>
{t("transfer_to_receiving_facility")}
</ButtonV2>
<ConfirmDialog
title={t("confirm_transfer_complete")}
description={t("mark_transfer_complete_confirmation")}
action="Confirm"
show={modalFor.externalId === shift.external_id} // Check the externalId here
onClose={() =>
setModalFor({ externalId: undefined, loading: false })
}
onConfirm={() => handleTransferComplete(shift)}
/>
</div>
)}
</div>
</div>
<ConfirmDialog
title={t("confirm_transfer_complete")}
description={t("mark_transfer_complete_confirmation")}
action="Confirm"
show={!!modalFor}
onClose={() => setModalFor(undefined)}
onConfirm={() => handleTransferComplete(modalFor)}
/>
</div>
);
));
};

return (
Expand All @@ -118,29 +262,28 @@ export default function ListView() {
breadcrumbs={false}
options={
<>
<div className="md:px-4">
<div className="md:px-4"></div>

<div className="mt-2 flex w-full flex-col items-center justify-between gap-2 pt-2 xl:flex-row">
<SearchInput
name="patient_name"
value={qParams.patient_name}
onChange={(e) => updateQuery({ [e.name]: e.value })}
placeholder={t("search_patient")}
/>
</div>
<div className="w-32">
{/* dummy div to align space as per board view */}
</div>
<div className="flex w-full flex-col gap-2 lg:w-fit lg:flex-row lg:gap-4">

<div className="mt-2 flex w-full flex-col gap-2 lg:w-fit lg:flex-row lg:gap-4">
<AdvancedFilterButton
onClick={() => advancedFilter.setShow(true)}
/>
<ButtonV2
className="py-[11px]"
onClick={() => navigate("/shifting/board", { query: qParams })}
>
<CareIcon icon="l-list-ul" className="rotate-90" />
{t("board_view")}
</ButtonV2>

<AdvancedFilterButton
onClick={() => advancedFilter.setShow(true)}
/>
</div>
</>
}
Expand All @@ -151,9 +294,9 @@ export default function ListView() {
<Loading />
) : (
<div>
<div className="-mb-4 mr-2 mt-4 flex justify-end">
<div className="-mb-2 mr-2 mt-2 flex justify-end">
<button
className="text-xs hover:text-blue-800"
className="text-sm hover:text-blue-800"
onClick={() => fetchData()}
>
<CareIcon
Expand All @@ -164,8 +307,26 @@ export default function ListView() {
{t("refresh_list")}
</button>
</div>

{showShiftingCardList(shiftData?.results || [])}
<div>
<div className="mx-5 mt-5 grid w-full gap-2 border-b-2 border-gray-100 p-4 text-sm font-medium sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-5">
<div className="col-span-1 uppercase sm:text-center md:text-center lg:block lg:text-left">
{t("patients")}
</div>
<div className="col-span-1 hidden text-left uppercase sm:hidden md:hidden lg:block">
{t("contact_info")}
</div>
<div className="col-span-1 hidden text-left uppercase sm:hidden md:hidden lg:block">
{t("consent__status")}
</div>
<div className="col-span-1 hidden text-left uppercase sm:hidden md:hidden lg:block">
{t("facilities")}
</div>
<div className="col-span-1 hidden text-left uppercase sm:hidden md:hidden lg:block">
{t("LOG_UPDATE_FIELD_LABEL__action")}
</div>
</div>
<div>{showShiftingCardList(shiftData?.results || [])}</div>
</div>

<div>
<Pagination totalCount={shiftData?.count || 0} />
Expand Down

0 comments on commit 287e353

Please sign in to comment.