Hide location filter unless facility is selected

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;

src/Components/Facility/FacilityUsers.tsx

@@ -1,28 +1,28 @@
 import { lazy, useCallback, useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
+import CountBlock from "../../CAREUI/display/Count";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import { RESULTS_PER_PAGE_LIMIT } from "../../Common/constants";
+import useAuthUser from "../../Common/hooks/useAuthUser";
 import { statusType, useAbortableEffect } from "../../Common/utils";
 import {
   addUserFacility,
-  deleteUserFacility,
-  getUserListFacility,
   deleteUser,
-  getFacilityUsers,
+  deleteUserFacility,
   getAnyFacility,
+  getFacilityUsers,
+  getUserListFacility,
 } from "../../Redux/actions";
-import Pagination from "../Common/Pagination";
-import { USER_TYPES, RESULTS_PER_PAGE_LIMIT } from "../../Common/constants";
-import { FacilityModel } from "../Facility/models";
-import LinkFacilityDialog from "../Users/LinkFacilityDialog";
-import UserDeleteDialog from "../Users/UserDeleteDialog";
 import * as Notification from "../../Utils/Notifications.js";
-import UserDetails from "../Common/UserDetails";
-import UnlinkFacilityDialog from "../Users/UnlinkFacilityDialog";
 import { classNames, isUserOnline, relativeTime } from "../../Utils/utils";
-import CountBlock from "../../CAREUI/display/Count";
-import CareIcon from "../../CAREUI/icons/CareIcon";
+import Pagination from "../Common/Pagination";
+import UserDetails from "../Common/UserDetails";
 import ButtonV2 from "../Common/components/ButtonV2";
 import Page from "../Common/components/Page";
-import useAuthUser from "../../Common/hooks/useAuthUser";
+import { FacilityModel } from "../Facility/models";
+import LinkFacilityDialog from "../Users/LinkFacilityDialog";
+import UnlinkFacilityDialog from "../Users/UnlinkFacilityDialog";
+import UserDeleteDialog from "../Users/UserDeleteDialog";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -273,26 +273,6 @@ export default function FacilityUsers(props: any) {
     loadFacilities(username);
   };
 
-  const showDelete = (user: any) => {
-    const STATE_ADMIN_LEVEL = USER_TYPES.indexOf("StateAdmin");
-    const STATE_READ_ONLY_ADMIN_LEVEL =
-      USER_TYPES.indexOf("StateReadOnlyAdmin");
-    const DISTRICT_ADMIN_LEVEL = USER_TYPES.indexOf("DistrictAdmin");
-    const level = USER_TYPES.indexOf(user.user_type);
-    const currentUserLevel = USER_TYPES.indexOf(authUser.user_type);
-    if (user.is_superuser) return true;
-
-    if (currentUserLevel >= STATE_ADMIN_LEVEL)
-      return user.state_object?.id === authUser.state;
-    if (
-      currentUserLevel < STATE_READ_ONLY_ADMIN_LEVEL &&
-      currentUserLevel >= DISTRICT_ADMIN_LEVEL &&
-      currentUserLevel > level
-    )
-      return facilityData?.district_object_id === authUser.district;
-    return false;
-  };
-
   let userList: any[] = [];
 
   users &&
@@ -340,7 +320,7 @@ export default function FacilityUsers(props: any) {
                       aria-label="Online"
                     ></i>
                   ) : null}
-                  {showDelete(user) && (
+                  {authUser.user_type === "StateAdmin" && (
                     <button
                       type="button"
                       className="focus:ring-blue m-3 w-20 self-end rounded-md border border-red-500 bg-white px-3 py-2 text-center text-sm font-medium leading-4 text-red-700 transition duration-150 ease-in-out hover:text-red-500 hover:shadow focus:border-red-300 focus:outline-none active:bg-gray-50 active:text-red-800"

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;
@@ -71,7 +71,12 @@ const FormField = ({
         )}
       </div>
       <div className={field?.className}>{children}</div>
-      <FieldErrorText error={field?.error} className={field?.errorClassName} />
+      {field?.error && (
+        <FieldErrorText
+          error={field?.error}
+          className={field?.errorClassName}
+        />
+      )}
     </div>
   );
 };

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();
@@ -589,8 +589,8 @@ export default function PatientFilter(props: any) {
         expanded={true}
         className="w-full rounded-md"
       >
-        <div className="grid w-full grid-cols-1 gap-4">
-          <div className="w-full flex-none">
+        <section className="space-y-4">
+          <div>
             <FieldLabel className="text-sm">Facility</FieldLabel>
             <FacilitySelect
               multiple={false}
@@ -600,24 +600,24 @@ 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"
+                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 +633,7 @@ export default function PatientFilter(props: any) {
               )}
             />
           </div>
-          <div className="w-full flex-none">
+          <div className="w-full">
             <FieldLabel className="text-sm">LSG Body</FieldLabel>
             <div className="">
               <AutoCompleteAsync
@@ -653,7 +653,7 @@ export default function PatientFilter(props: any) {
             </div>
           </div>
 
-          <div className="w-full flex-none">
+          <div className="w-full">
             <FieldLabel className="text-sm">District</FieldLabel>
             <DistrictSelect
               multiple={false}
@@ -663,7 +663,7 @@ export default function PatientFilter(props: any) {
               errors={""}
             />
           </div>
-        </div>
+        </section>
       </AccordionV2>
       <AccordionV2
         title={