Search UI for discharge patients

src/components/Facility/DischargedPatientsList.tsx

@@ -1,5 +1,5 @@
 import { Link, navigate } from "raviger";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import CountBlock from "@/CAREUI/display/Count";
@@ -11,13 +11,11 @@ import PaginatedList from "@/CAREUI/misc/PaginatedList";
 
 import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
+import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
 import SortDropdownMenu from "@/components/Common/SortDropdown";
 import Tabs from "@/components/Common/Tabs";
 import { getDiagnosesByIds } from "@/components/Diagnosis/utils";
 import { ICD11DiagnosisModel } from "@/components/Facility/models";
-import PhoneNumberFormField from "@/components/Form/FormFields/PhoneNumberFormField";
-import { FieldChangeEvent } from "@/components/Form/FormFields/Utils";
-import SearchInput from "@/components/Form/SearchInput";
 import {
   DIAGNOSES_FILTER_LABELS,
   DiagnosesFilterKey,
@@ -52,16 +50,79 @@ const DischargedPatientsList = ({
     pathParams: { id: facility_external_id },
   });
 
-  const { qParams, updateQuery, advancedFilter, FilterBadges, updatePage } =
-    useFilters({
-      limit: 12,
-      cacheBlacklist: [
-        "name",
-        "patient_no",
-        "phone_number",
-        "emergency_phone_number",
-      ],
-    });
+  const {
+    qParams,
+    updateQuery,
+    advancedFilter,
+    FilterBadges,
+    updatePage,
+    clearSearch,
+  } = useFilters({
+    limit: 12,
+    cacheBlacklist: [
+      "name",
+      "patient_no",
+      "phone_number",
+      "emergency_phone_number",
+    ],
+  });
+
+  const searchOptions = [
+    {
+      key: "name",
+      label: "Name",
+      type: "text" as const,
+      placeholder: "search_by_patient_name",
+      value: qParams.name || "",
+      shortcutKey: "n",
+    },
+    {
+      key: "patient_no",
+      label: "IP/OP No",
+      type: "text" as const,
+      placeholder: "search_by_patient_no",
+      value: qParams.patient_no || "",
+      shortcutKey: "u",
+    },
+    {
+      key: "phone_number",
+      label: "Phone Number",
+      type: "phone" as const,
+      placeholder: "Search_by_phone_number",
+      value: qParams.phone_number || "",
+      shortcutKey: "p",
+    },
+    {
+      key: "emergency_contact_number",
+      label: "Emergency Contact Phone Number",
+      type: "phone" as const,
+      placeholder: "search_by_emergency_phone_number",
+      value: qParams.emergency_phone_number || "",
+      shortcutKey: "e",
+    },
+  ];
+
+  const handleSearch = useCallback(
+    (key: string, value: string) => {
+      const isValidPhoneNumber = (val: string) =>
+        val.length >= 13 || val === "";
+
+      const updatedQuery = {
+        phone_number:
+          key === "phone_number" && isValidPhoneNumber(value)
+            ? value
+            : undefined,
+        name: key === "name" ? value : undefined,
+        patient_no: key === "patient_no" ? value : undefined,
+        emergency_phone_number:
+          key === "emergency_contact_number" && isValidPhoneNumber(value)
+            ? value
+            : undefined,
+      };
+      updateQuery(updatedQuery);
+    },
+    [updateQuery],
+  );
 
   useEffect(() => {
     if (!qParams.phone_number && phone_number.length >= 13) {
@@ -200,56 +261,11 @@ const DischargedPatientsList = ({
       });
   };
 
-  const queryField = <T,>(name: string, defaultValue?: T) => {
-    return {
-      name,
-      value: qParams[name] || defaultValue,
-      onChange: (e: FieldChangeEvent<T>) => updateQuery({ [e.name]: e.value }),
-      className: "grow w-full mb-2",
-    };
-  };
   const [diagnoses, setDiagnoses] = useState<ICD11DiagnosisModel[]>([]);
   const [phone_number, setPhoneNumber] = useState("");
-  const [phoneNumberError, setPhoneNumberError] = useState("");
   const [emergency_phone_number, setEmergencyPhoneNumber] = useState("");
-  const [emergencyPhoneNumberError, setEmergencyPhoneNumberError] =
-    useState("");
   const [count, setCount] = useState(0);
-
-  const setPhoneNum = (phone_number: string) => {
-    setPhoneNumber(phone_number);
-    if (phone_number.length >= 13) {
-      setPhoneNumberError("");
-      updateQuery({ phone_number });
-      return;
-    }
-
-    if (phone_number === "+91" || phone_number === "") {
-      setPhoneNumberError("");
-      qParams.phone_number && updateQuery({ phone_number: null });
-      return;
-    }
-
-    setPhoneNumberError("Enter a valid number");
-  };
-
-  const setEmergencyPhoneNum = (emergency_phone_number: string) => {
-    setEmergencyPhoneNumber(emergency_phone_number);
-    if (emergency_phone_number.length >= 13) {
-      setEmergencyPhoneNumberError("");
-      updateQuery({ emergency_phone_number });
-      return;
-    }
-
-    if (emergency_phone_number === "+91" || emergency_phone_number === "") {
-      setEmergencyPhoneNumberError("");
-      qParams.emergency_phone_number &&
-        updateQuery({ emergency_phone_number: null });
-      return;
-    }
-
-    setEmergencyPhoneNumberError("Enter a valid number");
-  };
+  const [isLoading, setIsLoading] = useState(false);
 
   return (
     <Page
@@ -281,53 +297,22 @@ const DischargedPatientsList = ({
         </>
       }
     >
-      <div className="manualGrid my-4 mb-[-12px] mt-5 grid-cols-1 gap-3 px-2 sm:grid-cols-4 md:px-0">
-        <div className="mt-2 flex h-full flex-col gap-3 xl:flex-row">
-          <div className="flex-1">
-            <CountBlock
-              text="Discharged Patients"
-              count={count}
-              loading={facilityQuery.loading}
-              icon="d-patient"
-              className="pb-12"
-            />
-          </div>
-        </div>
-        <div className="col-span-3 w-full">
-          <div className="col-span-2 mt-2">
-            <div className="mt-1 md:flex md:gap-4">
-              <SearchInput
-                label="Search by Patient"
-                placeholder="Enter patient name"
-                {...queryField("name")}
-              />
-              <SearchInput
-                label="Search by IP/OP Number"
-                placeholder="Enter IP/OP Number"
-                secondary
-                {...queryField("patient_no")}
-              />
-            </div>
-            <div className="md:flex md:gap-4">
-              <PhoneNumberFormField
-                label="Search by Primary Number"
-                {...queryField("phone_number", "+91")}
-                value={phone_number}
-                onChange={(e) => setPhoneNum(e.value)}
-                error={phoneNumberError}
-                types={["mobile", "landline"]}
-              />
-              <PhoneNumberFormField
-                label="Search by Emergency Number"
-                {...queryField("emergency_phone_number", "+91")}
-                value={emergency_phone_number}
-                onChange={(e) => setEmergencyPhoneNum(e.value)}
-                error={emergencyPhoneNumberError}
-                types={["mobile", "landline"]}
-              />
-            </div>
-          </div>
+      <div className="mt-4 gap-4 lg:gap-16 flex flex-col lg:flex-row lg:items-center">
+        <div id="total-patientcount">
+          <CountBlock
+            text={t("total_patients")}
+            count={count || 0}
+            loading={isLoading}
+            icon="d-patient"
+          />
         </div>
+        <SearchByMultipleFields
+          id="patient-search"
+          options={searchOptions}
+          onSearch={handleSearch}
+          clearSearch={clearSearch}
+          className="w-full"
+        />
       </div>
       <div className="col-span-3 mt-6 flex flex-wrap">
         <FilterBadges
@@ -440,7 +425,10 @@ const DischargedPatientsList = ({
         route={routes.listFacilityDischargedPatients}
         pathParams={{ facility_external_id }}
         query={{ ordering: "-modified_date", ...qParams }}
-        queryCB={(query) => setCount(query.data?.count || 0)}
+        queryCB={(query) => {
+          setCount(query.data?.count || 0);
+          setIsLoading(query.loading);
+        }}
         initialPage={qParams.page}
         onPageChange={updatePage}
       >