hide location filter if facility is not selected (#6688)

* make error optional and render only when required * fix markup and remove unnecessary tw classes * hide location filter if facility is not selected * revert changes to error component
ohcnetwork · Nov 29, 2023 · f5bc741 · f5bc741
1 parent 8f76361
commit f5bc741
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 46 deletions.
diff --git a/src/Components/Common/LocationSelect.tsx b/src/Components/Common/LocationSelect.tsx
@@ -7,7 +7,7 @@ interface LocationSelectProps {
   name: string;
   disabled?: boolean;
   margin?: string;
-  errors: string;
+  errors?: string;
   className?: string;
   searchAll?: boolean;
   multiple?: boolean;

diff --git a/src/Components/Form/FormFields/FormField.tsx b/src/Components/Form/FormFields/FormField.tsx
@@ -1,6 +1,6 @@
+import { classNames } from "../../../Utils/utils";
 import { FieldError } from "../FieldValidators";
 import { FormFieldBaseProps } from "./Utils";
-import { classNames } from "../../../Utils/utils";
 
 type LabelProps = {
   id?: string | undefined;

diff --git a/src/Components/Patient/PatientFilter.tsx b/src/Components/Patient/PatientFilter.tsx
@@ -1,40 +1,40 @@
-import { useEffect, useCallback } from "react";
-import { FacilitySelect } from "../Common/FacilitySelect";
-import AutoCompleteAsync from "../Form/AutoCompleteAsync";
+import dayjs from "dayjs";
+import { navigate } from "raviger";
+import { useCallback, useEffect } from "react";
+import { useDispatch } from "react-redux";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import FiltersSlideover from "../../CAREUI/interactive/FiltersSlideover";
 import {
-  GENDER_TYPES,
-  FACILITY_TYPES,
-  DISEASE_STATUS,
-  PATIENT_FILTER_CATEGORIES,
   ADMITTED_TO,
   DISCHARGE_REASONS,
+  DISEASE_STATUS,
+  FACILITY_TYPES,
+  GENDER_TYPES,
+  PATIENT_FILTER_CATEGORIES,
 } from "../../Common/constants";
+import useConfig from "../../Common/hooks/useConfig";
+import useMergeState from "../../Common/hooks/useMergeState";
 import {
   getAllLocalBody,
   getAnyFacility,
   getDistrict,
 } from "../../Redux/actions";
-import { useDispatch } from "react-redux";
-import { navigate } from "raviger";
+import { dateQueryString } from "../../Utils/utils";
+import { DateRange } from "../Common/DateRangeInputV2";
+import { FacilitySelect } from "../Common/FacilitySelect";
+import { LocationSelect } from "../Common/LocationSelect";
+import AccordionV2 from "../Common/components/AccordionV2";
 import DistrictSelect from "../Facility/FacilityFilter/DistrictSelect";
-import SelectMenuV2 from "../Form/SelectMenuV2";
+import AutoCompleteAsync from "../Form/AutoCompleteAsync";
+import DateRangeFormField from "../Form/FormFields/DateRangeFormField";
+import { FieldLabel } from "../Form/FormFields/FormField";
 import TextFormField from "../Form/FormFields/TextFormField";
 import {
   FieldChangeEvent,
   FieldChangeEventHandler,
 } from "../Form/FormFields/Utils";
-import { FieldLabel } from "../Form/FormFields/FormField";
 import MultiSelectMenuV2 from "../Form/MultiSelectMenuV2";
-import DateRangeFormField from "../Form/FormFields/DateRangeFormField";
-import { DateRange } from "../Common/DateRangeInputV2";
-import CareIcon from "../../CAREUI/icons/CareIcon";
-import useMergeState from "../../Common/hooks/useMergeState";
-import useConfig from "../../Common/hooks/useConfig";
-import FiltersSlideover from "../../CAREUI/interactive/FiltersSlideover";
-import AccordionV2 from "../Common/components/AccordionV2";
-import { dateQueryString } from "../../Utils/utils";
-import dayjs from "dayjs";
-import { LocationSelect } from "../Common/LocationSelect";
+import SelectMenuV2 from "../Form/SelectMenuV2";
 
 const getDate = (value: any) =>
   value && dayjs(value).isValid() && dayjs(value).toDate();
@@ -587,10 +587,10 @@ export default function PatientFilter(props: any) {
           </h1>
         }
         expanded={true}
-        className="w-full rounded-md"
+        className="rounded-md"
       >
-        <div className="grid w-full grid-cols-1 gap-4">
-          <div className="w-full flex-none">
+        <div className="space-y-4">
+          <div>
             <FieldLabel className="text-sm">Facility</FieldLabel>
             <FacilitySelect
               multiple={false}
@@ -600,24 +600,25 @@ export default function PatientFilter(props: any) {
               setSelected={(obj) => setFacility(obj, "facility")}
             />
           </div>
-          <div className="w-full flex-none">
-            <FieldLabel className="text-sm">Location</FieldLabel>
-            <LocationSelect
-              disabled={!filterState.facility}
-              name="facility"
-              selected={filterState.last_consultation_current_bed__location}
-              multiple={false}
-              errors=""
-              facilityId={filterState.facility}
-              setSelected={(selected) =>
-                setFilterState({
-                  ...filterState,
-                  last_consultation_current_bed__location: selected,
-                })
-              }
-            />
-          </div>
-          <div className="-mt-6 w-full flex-none">
+          {filterState.facility && (
+            <div>
+              <FieldLabel className="text-sm">Location</FieldLabel>
+              <LocationSelect
+                name="facility"
+                errorClassName="hidden"
+                selected={filterState.last_consultation_current_bed__location}
+                multiple={false}
+                facilityId={filterState.facility}
+                setSelected={(selected) =>
+                  setFilterState({
+                    ...filterState,
+                    last_consultation_current_bed__location: selected,
+                  })
+                }
+              />
+            </div>
+          )}
+          <div>
             <FieldLabel className="text-sm">Facility type</FieldLabel>
             <SelectMenuV2
               placeholder="Show all"
@@ -633,7 +634,7 @@ export default function PatientFilter(props: any) {
               )}
             />
           </div>
-          <div className="w-full flex-none">
+          <div>
             <FieldLabel className="text-sm">LSG Body</FieldLabel>
             <div className="">
               <AutoCompleteAsync
@@ -653,7 +654,7 @@ export default function PatientFilter(props: any) {
             </div>
           </div>
 
-          <div className="w-full flex-none">
+          <div>
             <FieldLabel className="text-sm">District</FieldLabel>
             <DistrictSelect
               multiple={false}