From 41fc2699141a3d446d5d72f2982beedf4f5afcef Mon Sep 17 00:00:00 2001 From: Rishith25 Date: Wed, 26 Feb 2025 23:39:58 +0530 Subject: [PATCH 1/8] feat: Enhance location selection with search functionality --- src/components/Location/LocationSearch.tsx | 15 +++++- .../QuestionTypes/LocationQuestion.tsx | 4 +- .../Facility/settings/devices/DevicesList.tsx | 53 +++++++++++++++---- 3 files changed, 60 insertions(+), 12 deletions(-) diff --git a/src/components/Location/LocationSearch.tsx b/src/components/Location/LocationSearch.tsx index 288a283773e..221fe28cd79 100644 --- a/src/components/Location/LocationSearch.tsx +++ b/src/components/Location/LocationSearch.tsx @@ -2,6 +2,8 @@ import { useQuery } from "@tanstack/react-query"; import { useState } from "react"; import { useTranslation } from "react-i18next"; +import CareIcon from "@/CAREUI/icons/CareIcon"; + import { Command, CommandEmpty, @@ -22,7 +24,7 @@ import locationApi from "@/types/location/locationApi"; interface LocationSearchProps { facilityId: string; mode?: "kind" | "instance"; - onSelect: (location: LocationList) => void; + onSelect: (location: LocationList | null) => void; disabled?: boolean; value?: LocationList | null; } @@ -55,6 +57,17 @@ export function LocationSearch({ aria-expanded={open} > {value?.name || "Select location..."} + {value && ( + + )} diff --git a/src/components/Questionnaire/QuestionTypes/LocationQuestion.tsx b/src/components/Questionnaire/QuestionTypes/LocationQuestion.tsx index 9f809b6ed52..91ceffde270 100644 --- a/src/components/Questionnaire/QuestionTypes/LocationQuestion.tsx +++ b/src/components/Questionnaire/QuestionTypes/LocationQuestion.tsx @@ -84,9 +84,9 @@ export function LocationQuestion({ ); }; - const handleLocationSelect = (location: LocationList) => { + const handleLocationSelect = (location: LocationList | null) => { setSelectedLocation(location); - handleUpdateAssociation({ location: location.id }); + handleUpdateAssociation({ location: location?.id }); }; return ( diff --git a/src/pages/Facility/settings/devices/DevicesList.tsx b/src/pages/Facility/settings/devices/DevicesList.tsx index 2eaa341f6b7..2efa0190b55 100644 --- a/src/pages/Facility/settings/devices/DevicesList.tsx +++ b/src/pages/Facility/settings/devices/DevicesList.tsx @@ -7,14 +7,17 @@ import CareIcon from "@/CAREUI/icons/CareIcon"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; +import { Input } from "@/components/ui/input"; import PageTitle from "@/components/Common/PageTitle"; import Pagination from "@/components/Common/Pagination"; import { CardGridSkeleton } from "@/components/Common/SkeletonLoading"; +import { LocationSearch } from "@/components/Location/LocationSearch"; import query from "@/Utils/request/query"; import DeviceCard from "@/pages/Facility/settings/devices/components/DeviceCard"; import deviceApi from "@/types/device/deviceApi"; +import { LocationList } from "@/types/location/location"; interface Props { facilityId: string; @@ -23,33 +26,65 @@ interface Props { export default function DevicesList({ facilityId }: Props) { const { t } = useTranslation(); const [page, setPage] = useState(1); + const [searchQuery, setSearchQuery] = useState(""); + const [selectedLocation, setSelectedLocation] = useState( + null, + ); const limit = 12; const { data, isLoading } = useQuery({ - queryKey: ["devices", facilityId, page, limit], + queryKey: [ + "devices", + facilityId, + page, + limit, + searchQuery, + selectedLocation, + ], queryFn: query.debounced(deviceApi.list, { pathParams: { facility_id: facilityId }, queryParams: { offset: (page - 1) * limit, limit, + name: searchQuery || undefined, + location: selectedLocation?.id || undefined, }, }), }); return (
-
+
- - +
+
+ { + setSearchQuery(e.target.value); + setPage(1); + }} + className="w-full border border-gray-300 rounded-lg px-4 py-2 shadow-sm focus:ring-2 focus:ring-primary focus:border-primary" + /> +
+
+ +
+ +
{isLoading ? ( From b93543fd1b55c1b31a65d13bcf1e7766260bcd45 Mon Sep 17 00:00:00 2001 From: Rishith25 Date: Thu, 27 Feb 2025 10:00:13 +0530 Subject: [PATCH 2/8] update queryParams --- src/pages/Facility/settings/devices/DevicesList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Facility/settings/devices/DevicesList.tsx b/src/pages/Facility/settings/devices/DevicesList.tsx index 2efa0190b55..57c7372338b 100644 --- a/src/pages/Facility/settings/devices/DevicesList.tsx +++ b/src/pages/Facility/settings/devices/DevicesList.tsx @@ -47,7 +47,7 @@ export default function DevicesList({ facilityId }: Props) { queryParams: { offset: (page - 1) * limit, limit, - name: searchQuery || undefined, + registered_name: searchQuery || undefined, location: selectedLocation?.id || undefined, }, }), From 01960b95081b480e218dede43e72cb336f3815b2 Mon Sep 17 00:00:00 2001 From: Rishith25 Date: Thu, 27 Feb 2025 12:23:11 +0530 Subject: [PATCH 3/8] fix: Update location search message and rename location parameter --- src/components/Location/LocationSearch.tsx | 2 +- src/pages/Facility/settings/devices/DevicesList.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Location/LocationSearch.tsx b/src/components/Location/LocationSearch.tsx index 221fe28cd79..cd0f033700a 100644 --- a/src/components/Location/LocationSearch.tsx +++ b/src/components/Location/LocationSearch.tsx @@ -78,7 +78,7 @@ export function LocationSearch({ className="outline-none border-none ring-0 shadow-none" onValueChange={setSearch} /> - No locations found. + {t("no_locations_found")} {locations?.results.map((location) => ( Date: Thu, 27 Feb 2025 22:49:03 +0530 Subject: [PATCH 4/8] refactor: replace button with Button component in LocationSearch and update DevicesList to use useFilters for pagination and search --- src/components/Location/LocationSearch.tsx | 7 +-- .../Facility/settings/devices/DevicesList.tsx | 44 +++++++++---------- 2 files changed, 24 insertions(+), 27 deletions(-) diff --git a/src/components/Location/LocationSearch.tsx b/src/components/Location/LocationSearch.tsx index b999adf109b..dd1fe0d855d 100644 --- a/src/components/Location/LocationSearch.tsx +++ b/src/components/Location/LocationSearch.tsx @@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next"; import CareIcon from "@/CAREUI/icons/CareIcon"; +import { Button } from "@/components/ui/button"; import { Command, CommandEmpty, @@ -59,15 +60,15 @@ export function LocationSearch({ > {stringifyNestedObject(value || { name: "" }) || "Select location..."} {value && ( - + )}
diff --git a/src/pages/Facility/settings/devices/DevicesList.tsx b/src/pages/Facility/settings/devices/DevicesList.tsx index 7d41e728b55..4aefa739a3c 100644 --- a/src/pages/Facility/settings/devices/DevicesList.tsx +++ b/src/pages/Facility/settings/devices/DevicesList.tsx @@ -10,10 +10,11 @@ import { Card, CardContent } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import PageTitle from "@/components/Common/PageTitle"; -import Pagination from "@/components/Common/Pagination"; import { CardGridSkeleton } from "@/components/Common/SkeletonLoading"; import { LocationSearch } from "@/components/Location/LocationSearch"; +import useFilters from "@/hooks/useFilters"; + import query from "@/Utils/request/query"; import DeviceCard from "@/pages/Facility/settings/devices/components/DeviceCard"; import deviceApi from "@/types/device/deviceApi"; @@ -25,30 +26,30 @@ interface Props { export default function DevicesList({ facilityId }: Props) { const { t } = useTranslation(); - const [page, setPage] = useState(1); - const [searchQuery, setSearchQuery] = useState(""); const [selectedLocation, setSelectedLocation] = useState( null, ); - const limit = 12; + const { qParams, updateQuery, Pagination, resultsPerPage } = useFilters({ + limit: 12, + cacheBlacklist: ["search_text", "current_location"], + }); const { data, isLoading } = useQuery({ queryKey: [ "devices", facilityId, - page, - limit, - searchQuery, + qParams, + resultsPerPage, selectedLocation, ], queryFn: query.debounced(deviceApi.list, { pathParams: { facility_id: facilityId }, queryParams: { - offset: (page - 1) * limit, - limit, - registered_name: searchQuery || undefined, + search_text: qParams.search_text, current_location: selectedLocation?.id || undefined, + limit: resultsPerPage, + offset: (qParams.page - 1) * resultsPerPage, }, }), }); @@ -63,10 +64,9 @@ export default function DevicesList({ facilityId }: Props) {
{ - setSearchQuery(e.target.value); - setPage(1); + updateQuery({ search_text: e.target.value }); }} className="w-full border border-gray-300 rounded-lg px-4 py-2 shadow-sm focus:ring-2 focus:ring-primary focus:border-primary" /> @@ -74,7 +74,12 @@ export default function DevicesList({ facilityId }: Props) {
{ + updateQuery({ + current_location: location?.id || undefined, + }); + setSelectedLocation(location); + }} value={selectedLocation} />
@@ -106,16 +111,7 @@ export default function DevicesList({ facilityId }: Props) { )}
- {data && data.count > limit && ( -
- setPage(page)} - defaultPerPage={limit} - cPage={page} - /> -
- )} +
)} From 9d74521dbf9d40f9fbf001574c4cb8f4e897aaf1 Mon Sep 17 00:00:00 2001 From: Rishith25 Date: Thu, 27 Feb 2025 23:06:24 +0530 Subject: [PATCH 5/8] simplify queryKey in DevicesList component --- src/pages/Facility/settings/devices/DevicesList.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/pages/Facility/settings/devices/DevicesList.tsx b/src/pages/Facility/settings/devices/DevicesList.tsx index 4aefa739a3c..00ba31cd4a3 100644 --- a/src/pages/Facility/settings/devices/DevicesList.tsx +++ b/src/pages/Facility/settings/devices/DevicesList.tsx @@ -36,13 +36,7 @@ export default function DevicesList({ facilityId }: Props) { }); const { data, isLoading } = useQuery({ - queryKey: [ - "devices", - facilityId, - qParams, - resultsPerPage, - selectedLocation, - ], + queryKey: ["devices", facilityId, qParams, resultsPerPage], queryFn: query.debounced(deviceApi.list, { pathParams: { facility_id: facilityId }, queryParams: { From 169fd5825d6f8b920c7764353c9de591339167a5 Mon Sep 17 00:00:00 2001 From: Rishith25 Date: Wed, 5 Mar 2025 12:37:42 +0530 Subject: [PATCH 6/8] Add hover effect to LocationSearch button --- src/components/Location/LocationSearch.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Location/LocationSearch.tsx b/src/components/Location/LocationSearch.tsx index dd1fe0d855d..508ccdc28a7 100644 --- a/src/components/Location/LocationSearch.tsx +++ b/src/components/Location/LocationSearch.tsx @@ -66,6 +66,7 @@ export function LocationSearch({ onSelect(null); }} variant="ghost" + className="hover:bg-transparent" > From 550b56002f34ffbf5e5d0e968fc0cbf1a4a00acc Mon Sep 17 00:00:00 2001 From: Rishith25 Date: Fri, 7 Mar 2025 13:50:47 +0530 Subject: [PATCH 7/8] Update current_location query parameter in DevicesList --- src/pages/Facility/settings/devices/DevicesList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Facility/settings/devices/DevicesList.tsx b/src/pages/Facility/settings/devices/DevicesList.tsx index 00ba31cd4a3..5e538f3d71f 100644 --- a/src/pages/Facility/settings/devices/DevicesList.tsx +++ b/src/pages/Facility/settings/devices/DevicesList.tsx @@ -41,7 +41,7 @@ export default function DevicesList({ facilityId }: Props) { pathParams: { facility_id: facilityId }, queryParams: { search_text: qParams.search_text, - current_location: selectedLocation?.id || undefined, + current_location: qParams.current_location, limit: resultsPerPage, offset: (qParams.page - 1) * resultsPerPage, }, From 010199f80220c929225fdebc667ff1d9c34ab7e3 Mon Sep 17 00:00:00 2001 From: Rishith25 Date: Mon, 10 Mar 2025 11:43:29 +0530 Subject: [PATCH 8/8] style: Improve LocationSearch component styling and placeholder text --- src/components/Location/LocationSearch.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/Location/LocationSearch.tsx b/src/components/Location/LocationSearch.tsx index 508ccdc28a7..b1473dccc27 100644 --- a/src/components/Location/LocationSearch.tsx +++ b/src/components/Location/LocationSearch.tsx @@ -54,11 +54,13 @@ export function LocationSearch({
- {stringifyNestedObject(value || { name: "" }) || "Select location..."} + {stringifyNestedObject(value || { name: "" }) || ( + Select location... + )} {value && (
- +