Improve District filter in User Management (#7353)

* Improve District filter in User Management * Fix Cypress * Fix cypress * Fix input selectors in UserSearch.ts * Fix input selectors in UserSearch.ts * Update district_id to district in UserSearch.ts * Add district validation when state is selected * Refactor code to use searchAndSelectOption function for selecting state and district * Refactor UserFilter component * Update element selectors in UserSearch.ts
ohcnetwork · Mar 12, 2024 · a7f82d6 · a7f82d6
1 parent eef782a
commit a7f82d6
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 46 deletions.
diff --git a/cypress/e2e/users_spec/user_homepage.cy.ts b/cypress/e2e/users_spec/user_homepage.cy.ts
@@ -28,6 +28,7 @@ describe("User Homepage", () => {
     userPage.typeInFirstName("Dev");
     userPage.typeInLastName("Doctor");
     userPage.selectRole("Doctor");
+    userPage.selectState("Kerala");
     userPage.selectDistrict("Ernakulam");
     userPage.typeInPhoneNumber(phone_number);
     userPage.typeInAltPhoneNumber(alt_phone_number);

diff --git a/cypress/pageobject/Users/UserSearch.ts b/cypress/pageobject/Users/UserSearch.ts
@@ -29,7 +29,7 @@ export class UserPage {
       .and("include", "phone_number=%2B919876543219")
       .and("include", "alt_phone_number=%2B919876543219")
       .and("include", "user_type=Doctor")
-      .and("include", "district_id=7");
+      .and("include", "district=7");
   }
 
   checkUsernameText(username: string) {
@@ -62,9 +62,12 @@ export class UserPage {
     cy.get("[role='option']").contains(role).click();
   }
 
+  selectState(state: string) {
+    cy.searchAndSelectOption("#state input", state);
+  }
+
   selectDistrict(district: string) {
-    cy.get("input[name='district']").click().type(district);
-    cy.get("[role='option']").contains(district).click();
+    cy.searchAndSelectOption("#district input", district);
   }
 
   typeInPhoneNumber(phone: string) {

diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx
@@ -1,6 +1,6 @@
 import dayjs from "dayjs";
 import { navigate } from "raviger";
-import { lazy, useState } from "react";
+import { lazy, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import CountBlock from "../../CAREUI/display/Count";
 import CareIcon from "../../CAREUI/icons/CareIcon";
@@ -73,8 +73,7 @@ export default function ManageUsers() {
   const [weeklyHoursError, setWeeklyHoursError] = useState<string>("");
 
   const extremeSmallScreenBreakpoint = 320;
-  const isExtremeSmallScreen =
-    width <= extremeSmallScreenBreakpoint ? true : false;
+  const isExtremeSmallScreen = width <= extremeSmallScreenBreakpoint;
 
   const {
     data: userListData,
@@ -92,15 +91,24 @@ export default function ManageUsers() {
       phone_number: qParams.phone_number,
       alt_phone_number: qParams.alt_phone_number,
       user_type: qParams.user_type,
-      district_id: qParams.district_id,
+      district_id: qParams.district,
     },
   });
 
+  useEffect(() => {
+    if (!qParams.state && qParams.district) {
+      advancedFilter.removeFilters(["district"]);
+    }
+    if (!qParams.district && qParams.state) {
+      advancedFilter.removeFilters(["state"]);
+    }
+  }, [advancedFilter, qParams]);
+
   const { data: districtData, loading: districtDataLoading } = useQuery(
     routes.getDistrict,
     {
-      prefetch: !!qParams.district_id,
-      pathParams: { id: qParams.district_id },
+      prefetch: !!qParams.district,
+      pathParams: { id: qParams.district },
     }
   );
 
@@ -535,8 +543,8 @@ export default function ManageUsers() {
             badge("Role", "user_type"),
             value(
               "District",
-              "district_id",
-              qParams.district_id ? districtData?.name || "" : ""
+              "district",
+              qParams.district ? districtData?.name || "" : ""
             ),
           ]}
         />

diff --git a/src/Components/Users/UserFilter.tsx b/src/Components/Users/UserFilter.tsx
@@ -1,4 +1,3 @@
-import DistrictSelect from "../Facility/FacilityFilter/DistrictSelect";
 import { parsePhoneNumber } from "../../Utils/utils";
 import TextFormField from "../Form/FormFields/TextFormField";
 import SelectMenuV2 from "../Form/SelectMenuV2";
@@ -7,8 +6,10 @@ import { USER_TYPE_OPTIONS } from "../../Common/constants";
 import useMergeState from "../../Common/hooks/useMergeState";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
 import FiltersSlideover from "../../CAREUI/interactive/FiltersSlideover";
-import useQuery from "../../Utils/request/useQuery";
-import routes from "../../Redux/api";
+import DistrictAutocompleteFormField from "../Common/DistrictAutocompleteFormField";
+import StateAutocompleteFormField from "../Common/StateAutocompleteFormField";
+import { useTranslation } from "react-i18next";
+import * as Notify from "../../Utils/Notifications";
 
 const parsePhoneNumberForFilterParam = (phoneNumber: string) => {
   if (!phoneNumber) return "";
@@ -18,55 +19,58 @@ const parsePhoneNumberForFilterParam = (phoneNumber: string) => {
 };
 
 export default function UserFilter(props: any) {
+  const { t } = useTranslation();
   const { filter, onChange, closeFilter, removeFilters } = props;
   const [filterState, setFilterState] = useMergeState({
     first_name: filter.first_name || "",
     last_name: filter.last_name || "",
     phone_number: filter.phone_number || "+91",
     alt_phone_number: filter.alt_phone_number || "+91",
     user_type: filter.user_type || "",
-    district_id: filter.district_id || "",
-    district_ref: null,
+    district: filter.district || "",
+    state: filter.state || "",
   });
 
-  const setDistrict = (selected: any) => {
-    const filterData: any = { ...filterState };
-    filterData["district_ref"] = selected;
-    filterData["district_id"] = (selected || {}).id;
-    setFilterState(filterData);
-  };
-
   const applyFilter = () => {
     const {
       first_name,
       last_name,
       phone_number,
       alt_phone_number,
       user_type,
-      district_id,
+      district,
+      state,
     } = filterState;
     const data = {
       first_name: first_name || "",
       last_name: last_name || "",
       phone_number: parsePhoneNumberForFilterParam(phone_number),
       alt_phone_number: parsePhoneNumberForFilterParam(alt_phone_number),
       user_type: user_type || "",
-      district_id: district_id || "",
+      district: district || "",
+      state: district ? state || "" : "",
     };
+    if (state && !district) {
+      Notify.Warn({
+        msg: "District is required when state is selected",
+      });
+      return;
+    }
     onChange(data);
   };
 
-  useQuery(routes.getDistrict, {
-    prefetch: !!filter.district_id,
-    pathParams: { id: filter.district_id },
-    onResponse: (result) => {
-      if (!result || !result.data || !result.res) return;
-      setFilterState({ district_ref: result.data });
-    },
-  });
+  const handleChange = ({ name, value }: any) => {
+    if (name === "state" && !value)
+      setFilterState({ ...filterState, state: value, district: undefined });
+    else setFilterState({ ...filterState, [name]: value });
+  };
 
-  const handleChange = ({ name, value }: any) =>
-    setFilterState({ ...filterState, [name]: value });
+  const field = (name: string) => ({
+    name,
+    label: t(name),
+    value: filterState[name],
+    onChange: handleChange,
+  });
 
   return (
     <FiltersSlideover
@@ -107,17 +111,13 @@ export default function UserFilter(props: any) {
         />
       </div>
 
-      <div className="w-full flex-none">
-        <FieldLabel>District</FieldLabel>
-        <DistrictSelect
-          multiple={false}
-          name="district"
-          selected={filterState.district_ref}
-          setSelected={setDistrict}
-          errors={""}
-        />
-      </div>
-      <div className="-mb-4">
+      <StateAutocompleteFormField {...field("state")} errorClassName="hidden" />
+      <DistrictAutocompleteFormField
+        errorClassName="hidden"
+        {...field("district")}
+        state={filterState.state}
+      />
+      <div>
         <PhoneNumberFormField
           label="Phone Number"
           name="phone_number"