Improves discharged tab switch behaviour (ohcnetwork#7358)

* Show Live/Discharged tab for certain conditions * Ask for facility for other cases * add notification * Update src/Components/Facility/DischargedPatientsList.tsx
AshrafMd-1 · Mar 19, 2024 · 4cea768 · 4cea768
1 parent f00cd02
commit 4cea768
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 34 deletions.
diff --git a/src/Components/Common/components/SwitchTabs.tsx b/src/Components/Common/components/SwitchTabs.tsx
@@ -4,8 +4,8 @@ import { classNames } from "../../../Utils/utils";
 export default function SwitchTabs(props: {
   className?: string;
   isTab2Active: boolean;
-  onClickTab1: () => void;
-  onClickTab2: () => void;
+  onClickTab1?: () => void;
+  onClickTab2?: () => void;
   tab1: ReactNode;
   tab2: ReactNode;
 }) {

diff --git a/src/Components/Facility/DischargedPatientsList.tsx b/src/Components/Facility/DischargedPatientsList.tsx
@@ -1,4 +1,4 @@
-import { Link, useQueryParams } from "raviger";
+import { Link, navigate, useQueryParams } from "raviger";
 import routes from "../../Redux/api";
 import Page from "../Common/components/Page";
 import PaginatedList from "../../CAREUI/misc/PaginatedList";
@@ -11,12 +11,15 @@ import { formatAge } from "../../Utils/utils";
 import { GENDER_TYPES } from "../../Common/constants";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import RecordMeta from "../../CAREUI/display/RecordMeta";
+import { useTranslation } from "react-i18next";
+import SwitchTabs from "../Common/components/SwitchTabs";
 
 const DischargedPatientsList = ({
   facility_external_id,
 }: {
   facility_external_id: string;
 }) => {
+  const { t } = useTranslation();
   const facilityQuery = useQuery(routes.getAnyFacility, {
     pathParams: { id: facility_external_id },
   });
@@ -25,18 +28,27 @@ const DischargedPatientsList = ({
 
   return (
     <Page
-      title="Discharged Patients"
+      title={t("discharged_patients")}
       crumbsReplacements={{
         [facility_external_id]: { name: facilityQuery.data?.name },
       }}
       options={
-        <SearchInput
-          className="mr-4 w-full max-w-md"
-          placeholder="Search by patient name"
-          name="name"
-          value={search.name}
-          onChange={debounce((e) => setSearch({ [e.name]: e.value }), 300)}
-        />
+        <>
+          <SearchInput
+            className="mr-4 w-full max-w-sm"
+            placeholder="Search by patient name"
+            name="name"
+            value={search.name}
+            onChange={debounce((e) => setSearch({ [e.name]: e.value }), 300)}
+          />
+          <SwitchTabs
+            tab1="Live"
+            tab2="Discharged"
+            className="mr-4"
+            onClickTab1={() => navigate("/patients")}
+            isTab2Active
+          />
+        </>
       }
     >
       <PaginatedList
@@ -45,9 +57,9 @@ const DischargedPatientsList = ({
         query={search}
       >
         {() => (
-          <div className="flex flex-col gap-4 p-4">
+          <div className="flex flex-col gap-4 py-4 lg:px-4 lg:py-8">
             <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500">
-              <span>No dischaged patients present in this facility</span>
+              <span>{t("discharged_patients_empty")}</span>
             </PaginatedList.WhenEmpty>
 
             <PaginatedList.WhenLoading>

diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
@@ -103,7 +103,7 @@ export const PatientManager = () => {
   });
   const authUser = useAuthUser();
   const [diagnoses, setDiagnoses] = useState<ICD11DiagnosisModel[]>([]);
-  const [showDialog, setShowDialog] = useState(false);
+  const [showDialog, setShowDialog] = useState<"create" | "list-discharged">();
   const [showDoctors, setShowDoctors] = useState(false);
   const [showDoctorConnect, setShowDoctorConnect] = useState(false);
   const [phone_number, setPhoneNumber] = useState("");
@@ -406,7 +406,9 @@ export const PatientManager = () => {
 
   const { data: permittedFacilities } = useQuery(
     routes.getPermittedFacilities,
-    {}
+    {
+      query: { limit: 1 },
+    }
   );
 
   const LastAdmittedToTypeBadges = () => {
@@ -723,6 +725,9 @@ export const PatientManager = () => {
     };
   };
 
+  const onlyAccessibleFacility =
+    permittedFacilities?.count === 1 ? permittedFacilities.results[0] : null;
+
   return (
     <Page
       title={t("Patients")}
@@ -736,11 +741,9 @@ export const PatientManager = () => {
               onClick={() => {
                 if (qParams.facility)
                   navigate(`/facility/${qParams.facility}/patient`);
-                else if (permittedFacilities?.results.length === 1)
-                  navigate(
-                    `/facility/${permittedFacilities?.results[0].id}/patient`
-                  );
-                else setShowDialog(true);
+                else if (onlyAccessibleFacility)
+                  navigate(`/facility/${onlyAccessibleFacility.id}/patient`);
+                else setShowDialog("create");
               }}
               className="w-full lg:w-fit"
             >
@@ -751,16 +754,33 @@ export const PatientManager = () => {
             </ButtonV2>
           </div>
           <div className="flex w-full flex-col items-center justify-end gap-2 lg:ml-3 lg:w-fit lg:flex-row lg:gap-3">
-            {(authUser.user_type === "StateAdmin" ||
-              authUser.user_type === "StateReadOnlyAdmin") && (
-              <SwitchTabs
-                tab1="Live"
-                tab2="Discharged"
-                onClickTab1={() => updateQuery({ is_active: "True" })}
-                onClickTab2={() => updateQuery({ is_active: "False" })}
-                isTab2Active={tabValue ? true : false}
-              />
-            )}
+            <SwitchTabs
+              tab1="Live"
+              tab2="Discharged"
+              onClickTab1={() => updateQuery({ is_active: "True" })}
+              onClickTab2={() => {
+                // Navigate to dedicated discharged list page if filtered by a facility or user has access only to one facility.
+                const id = qParams.facility || onlyAccessibleFacility?.id;
+                if (id) {
+                  navigate(`facility/${id}/discharged-patients`);
+                  return;
+                }
+
+                if (
+                  authUser.user_type === "StateAdmin" ||
+                  authUser.user_type === "StateReadOnlyAdmin"
+                ) {
+                  updateQuery({ is_active: "False" });
+                  return;
+                }
+
+                Notification.Warn({
+                  msg: "Facility needs to be selected to view discharged patients.",
+                });
+                setShowDialog("list-discharged");
+              }}
+              isTab2Active={!!tabValue}
+            />
             {showDoctorConnect && (
               <ButtonV2
                 id="doctor-connect-patient-button"
@@ -838,12 +858,21 @@ export const PatientManager = () => {
       }
     >
       <FacilitiesSelectDialogue
-        show={showDialog}
+        show={!!showDialog}
         setSelected={(e) => setSelectedFacility(e)}
         selectedFacility={selectedFacility}
-        handleOk={() => navigate(`facility/${selectedFacility.id}/patient`)}
+        handleOk={() => {
+          switch (showDialog) {
+            case "create":
+              navigate(`facility/${selectedFacility.id}/patient`);
+              break;
+            case "list-discharged":
+              navigate(`facility/${selectedFacility.id}/discharged-patients`);
+              break;
+          }
+        }}
         handleCancel={() => {
-          setShowDialog(false);
+          setShowDialog(undefined);
           setSelectedFacility({ name: "" });
         }}
       />

diff --git a/src/Locale/en/Facility.json b/src/Locale/en/Facility.json
@@ -51,5 +51,7 @@
   "last_serviced_on": "Last Serviced On",
   "notes": "Notes",
   "create_asset": "Create Asset",
-  "create_add_more": "Create & Add More"
+  "create_add_more": "Create & Add More",
+  "discharged_patients": "Discharged Patients",
+  "discharged_patients_empty": "No discharged patients present in this facility"
 }