From 6bc04d7d7a587be7097055678a54cc4d7de89312 Mon Sep 17 00:00:00 2001 From: Jeffrin Jojo <135723871+Jeffrin2005@users.noreply.github.com> Date: Thu, 6 Feb 2025 14:30:02 +0530 Subject: [PATCH 1/2] Fix: Facility Organization Dropdown (#10104) --- public/locale/en.json | 2 + src/components/ui/autocomplete.tsx | 16 +- .../FacilityOrganizationSelector.tsx | 180 ++++++++---------- 3 files changed, 92 insertions(+), 106 deletions(-) diff --git a/public/locale/en.json b/public/locale/en.json index 12a3f1c63a8..7e45f14d80f 100644 --- a/public/locale/en.json +++ b/public/locale/en.json @@ -1059,6 +1059,7 @@ "has_child_locations": "Has child locations", "has_domestic_healthcare_support": "Has domestic healthcare support?", "has_sari": "Has SARI (Severe Acute Respiratory illness)?", + "has_sub_departments": "Has sub-departments", "health-profile": "Health Profile", "health_profile": "Health Profile", "hearing": "We are hearing you...", @@ -1908,6 +1909,7 @@ "select_site": "Select site", "select_skills": "Select and add some skills", "select_status": "Select Status", + "select_sub_department": "Select sub-department", "select_time": "Select time", "select_time_slot": "Select time slot", "select_user": "Select user", diff --git a/src/components/ui/autocomplete.tsx b/src/components/ui/autocomplete.tsx index e9b4942d3b5..8e960e0db6c 100644 --- a/src/components/ui/autocomplete.tsx +++ b/src/components/ui/autocomplete.tsx @@ -52,6 +52,7 @@ export default function Autocomplete({ "data-cy": dataCy, }: AutocompleteProps) { const [open, setOpen] = React.useState(false); + const isMobile = useBreakpoints({ default: true, sm: false }); const commandContent = ( @@ -124,26 +125,23 @@ export default function Autocomplete({ ); } + const selectedOption = options.find((option) => option.value === value); + return ( diff --git a/src/pages/Facility/settings/organizations/components/FacilityOrganizationSelector.tsx b/src/pages/Facility/settings/organizations/components/FacilityOrganizationSelector.tsx index b9c32974a82..d2044e1abca 100644 --- a/src/pages/Facility/settings/organizations/components/FacilityOrganizationSelector.tsx +++ b/src/pages/Facility/settings/organizations/components/FacilityOrganizationSelector.tsx @@ -1,12 +1,11 @@ -import { useQuery } from "@tanstack/react-query"; +import { useQueries, useQuery } from "@tanstack/react-query"; +import { Building } from "lucide-react"; import { useState } from "react"; import { useTranslation } from "react-i18next"; import CareIcon from "@/CAREUI/icons/CareIcon"; import Autocomplete from "@/components/ui/autocomplete"; -import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; import { Label } from "@/components/ui/label"; import routes from "@/Utils/request/api"; @@ -40,47 +39,40 @@ export default function FacilityOrganizationSelector( const [selectedOrganization, setSelectedOrganization] = useState(null); - const { data: getAllOrganizations } = useQuery({ + const { data: rootOrganizations } = useQuery({ queryKey: ["organizations-root"], queryFn: query(routes.facilityOrganization.list, { pathParams: { facilityId }, - queryParams: { - parent: "", - }, + queryParams: { parent: "" }, }), }); - const { data: currentLevelOrganizations } = useQuery<{ - results: FacilityOrganization[]; - }>({ - queryKey: [ - "organizations-current", - selectedLevels[selectedLevels.length - 1]?.id, - ], - queryFn: query(routes.facilityOrganization.list, { - pathParams: { facilityId }, - queryParams: { - parent: selectedLevels[selectedLevels.length - 1]?.id, - }, - }), - enabled: selectedLevels.length > 0, + const organizationQueries = useQueries({ + queries: selectedLevels.map((level, _index) => ({ + queryKey: ["organizations", level.id], + queryFn: query(routes.facilityOrganization.list, { + pathParams: { facilityId }, + queryParams: { parent: level.id }, + }), + enabled: !!level.id, + })), }); const handleLevelChange = (value: string, level: number) => { - const orgList = - level === 0 - ? getAllOrganizations?.results - : currentLevelOrganizations?.results; + let orgList: FacilityOrganization[] | undefined; + + if (level === 0) { + orgList = rootOrganizations?.results; + } else if (level - 1 < organizationQueries.length) { + orgList = organizationQueries[level - 1].data?.results; + } const selectedOrg = orgList?.find((org) => org.id === value); if (!selectedOrg) return; - const newLevels = selectedLevels.slice(0, level); newLevels.push(selectedOrg); setSelectedLevels(newLevels); setSelectedOrganization(selectedOrg); - - // Always update the selected value, regardless of children onChange(selectedOrg.id); }; @@ -104,92 +96,86 @@ export default function FacilityOrganizationSelector( onChange(lastOrg.id); } else { setSelectedOrganization(null); + onChange(""); + } + }; + + const renderOrganizationLevel = (level: number) => { + let orgList: FacilityOrganization[] | undefined; + + if (level === 0) { + orgList = rootOrganizations?.results; + } else if (level - 1 < organizationQueries.length) { + orgList = organizationQueries[level - 1].data?.results; } + + const getDropdownLabel = () => { + if (level < selectedLevels.length) { + return selectedLevels[level].name; + } + return level === 0 ? t("select_department") : t("select_sub_department"); + }; + + return ( +
+ {level > 0 && ( + + )} +
+
+ handleLevelChange(value, level)} + placeholder={getDropdownLabel()} + /> +
+ {level > 0 && level < selectedLevels.length && ( +
handleEdit(level)} + > + +
+ )} +
+
+ ); }; return ( <> -