Group beds, fetch children on expand only

ohcnetwork · Mar 6, 2025 · 4e69990 · 4e69990
1 parent 056cabf
commit 4e69990
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 12 deletions.
diff --git a/public/locale/en.json b/public/locale/en.json
@@ -486,6 +486,7 @@
   "bed_type__300": "Oxygen Supported Bed",
   "bed_type__400": "Isolation Bed",
   "bed_type__500": "Others",
+  "beds": "Beds",
   "before": "before",
   "begin_clinical_encounter": "Begin a new clinical encounter for {{patientName}}. Select the appropriate encounter type, status, and priority to ensure proper documentation and care delivery.",
   "beta": "beta",

diff --git a/src/pages/Facility/locations/LocationList.tsx b/src/pages/Facility/locations/LocationList.tsx
@@ -233,6 +233,7 @@ function LocationTreeNode({
       },
       pageSize: 100,
     }),
+    enabled: isExpanded, // Only fetch when the node is expanded
   });
 
   return (
@@ -375,7 +376,7 @@ function LocationCard({ location, onClick }: ChildLocationCardProps) {
 
       <div className="p-4">
         <p className="text-sm text-gray-600 mb-3 line-clamp-2">
-          {location.description || t("no_description")}
+          {location.description}
         </p>
 
         <div className="flex justify-between text-sm">
@@ -439,15 +440,15 @@ function SelectedLocationChildren({
       selectedLocationId,
       "full",
       currentPage,
-      searchQuery, // Add search query to cache key
+      searchQuery,
     ],
     queryFn: query(locationApi.list, {
       pathParams: { facility_id: facilityId },
       queryParams: {
         parent: selectedLocationId,
         limit: ITEMS_PER_PAGE,
         offset: (currentPage - 1) * ITEMS_PER_PAGE,
-        name: searchQuery, // Add search parameter to API call
+        name: searchQuery,
       },
     }),
     enabled: !!selectedLocationId,
@@ -475,18 +476,62 @@ function SelectedLocationChildren({
     );
   }
 
+  // Group locations by type (bed vs non-bed)
+  const { bedLocations, nonBedLocations } = children.results.reduce(
+    (acc, location) => {
+      if (location.form === "bd") {
+        acc.bedLocations.push(location);
+      } else {
+        acc.nonBedLocations.push(location);
+      }
+      return acc;
+    },
+    {
+      bedLocations: [] as LocationListType[],
+      nonBedLocations: [] as LocationListType[],
+    },
+  );
+
   return (
     <>
-      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
-        {children.results.map((child) => (
-          <ChildLocationCard
-            key={child.id}
-            location={child}
-            onClick={() => onSelect(child)}
-            facilityId={facilityId}
-          />
-        ))}
+      <div className="space-y-8">
+        {/* Non-bed locations */}
+        {nonBedLocations.length > 0 && (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium text-gray-700">
+              {t("locations")}
+            </h3>
+            <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
+              {nonBedLocations.map((location) => (
+                <ChildLocationCard
+                  key={location.id}
+                  location={location}
+                  onClick={() => onSelect(location)}
+                  facilityId={facilityId}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Bed locations */}
+        {bedLocations.length > 0 && (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium text-gray-700">{t("beds")}</h3>
+            <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
+              {bedLocations.map((location) => (
+                <ChildLocationCard
+                  key={location.id}
+                  location={location}
+                  onClick={() => onSelect(location)}
+                  facilityId={facilityId}
+                />
+              ))}
+            </div>
+          </div>
+        )}
       </div>
+
       <div className="flex w-full items-center justify-center mt-4">
         <div
           className={cn(