From e3b8c59f903b37cc18408740883096d683c7411c Mon Sep 17 00:00:00 2001
From: JORGE <egrojmonroy@gmail.com>
Date: Tue, 3 Dec 2024 16:28:42 -0400
Subject: [PATCH] [TM-1535] add loader of polygons

---
 .../components/PolygonReviewAside/index.tsx   |  2 ++
 .../PolygonReviewTab/components/Polygons.tsx  | 22 ++++++++++++++-----
 .../ResourceTabs/PolygonReviewTab/index.tsx   | 13 +++++++++--
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonReviewAside/index.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonReviewAside/index.tsx
index 9dbf3c45a..9e2c3088e 100644
--- a/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonReviewAside/index.tsx
+++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonReviewAside/index.tsx
@@ -8,6 +8,7 @@ interface SitePolygonReviewAsideProps {
   setPolygonFromMap?: any;
   refresh?: () => void;
   mapFunctions: any;
+  totalPolygons?: number;
 }
 
 const SitePolygonReviewAside = (props: SitePolygonReviewAsideProps) => (
@@ -18,6 +19,7 @@ const SitePolygonReviewAside = (props: SitePolygonReviewAsideProps) => (
       setPolygonFromMap={props?.setPolygonFromMap}
       refresh={props?.refresh}
       mapFunctions={props?.mapFunctions}
+      totalPolygons={props?.totalPolygons}
     />
   </Stack>
 );
diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons.tsx
index 3da5858e1..deffea75c 100644
--- a/src/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons.tsx
+++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons.tsx
@@ -1,5 +1,6 @@
 import { Box, LinearProgress } from "@mui/material";
 import React, { useEffect, useRef, useState } from "react";
+import { When } from "react-if";
 
 import Button from "@/components/elements/Button/Button";
 import Drawer from "@/components/elements/Drawer/Drawer";
@@ -41,6 +42,7 @@ export interface IPolygonProps {
   setPolygonFromMap?: any;
   refresh?: () => void;
   mapFunctions: any;
+  totalPolygons?: number;
 }
 
 export const polygonData = [
@@ -63,13 +65,13 @@ const Polygons = (props: IPolygonProps) => {
   const context = useSitePolygonData();
   const contextMapArea = useMapAreaContext();
   const reloadSiteData = context?.reloadSiteData;
+  const sitePolygonData = context?.sitePolygonData;
   const { setIsUserDrawingEnabled, setSelectedPolygonsInCheckbox, selectedPolygonsInCheckbox } = contextMapArea;
   const [openCollapseAll, setOpenCollapseAll] = useState(false);
 
   useEffect(() => {
     setPolygonMenu(props.menu);
   }, [props.menu]);
-
   useEffect(() => {
     if (polygonFromMap?.isOpen) {
       const newSelectedPolygon = polygonMenu.find(polygon => polygon.uuid === polygonFromMap.uuid);
@@ -201,6 +203,7 @@ const Polygons = (props: IPolygonProps) => {
     setSelectedPolygonsInCheckbox(checkedUuids);
   };
 
+  const polygonSitePolygonCount = sitePolygonData?.length ?? 0;
   return (
     <div>
       <Drawer isOpen={isOpenPolygonDrawer} setIsOpen={setIsOpenPolygonDrawer} setPolygonFromMap={setPolygonFromMap}>
@@ -234,10 +237,19 @@ const Polygons = (props: IPolygonProps) => {
         </div>
       </div>
       <div className="mb-4 flex flex-col gap-1">
-        123 of 678 polygons loaded
-        <Box sx={{ width: "100%" }}>
-          <LinearProgress variant="determinate" value={80} sx={{ borderRadius: 5 }} />
-        </Box>
+        <When condition={props.totalPolygons ?? 0 > 0}>
+          <Text variant="text-14-semibold" className="text-darkCustom">
+            <span className="font-bold">{polygonSitePolygonCount}</span> of{" "}
+            <span className="font-bold">{props.totalPolygons}</span> polygons
+          </Text>
+          <Box sx={{ width: "100%" }}>
+            <LinearProgress
+              variant="determinate"
+              value={(polygonSitePolygonCount / (props.totalPolygons ?? 1)) * 100}
+              sx={{ borderRadius: 5 }}
+            />
+          </Box>
+        </When>
       </div>
       <div ref={containerRef} className="flex max-h-[150vh] flex-col gap-2 overflow-auto">
         {polygonMenu.map(item => (
diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx
index 4449c95c5..bb079552e 100644
--- a/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx
+++ b/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx
@@ -96,7 +96,8 @@ const PolygonReviewAside: FC<{
   setPolygonFromMap: any;
   refresh?: () => void;
   mapFunctions: any;
-}> = ({ type, data, polygonFromMap, setPolygonFromMap, refresh, mapFunctions }) => {
+  totalPolygons?: number;
+}> = ({ type, data, polygonFromMap, setPolygonFromMap, refresh, mapFunctions, totalPolygons }) => {
   switch (type) {
     case "sites":
       return (
@@ -106,6 +107,7 @@ const PolygonReviewAside: FC<{
           setPolygonFromMap={setPolygonFromMap}
           mapFunctions={mapFunctions}
           refresh={refresh}
+          totalPolygons={totalPolygons}
         />
       );
     default:
@@ -165,7 +167,13 @@ const PolygonReviewTab: FC<IProps> = props => {
     storePolygon(geojson, record, refetch, setPolygonFromMap, refreshEntity);
   };
   const mapFunctions = useMap(onSave);
-  const { data: sitePolygonData, refetch, polygonCriteriaMap, loading } = useLoadCriteriaSite(record.uuid, "sites");
+  const {
+    data: sitePolygonData,
+    refetch,
+    polygonCriteriaMap,
+    loading,
+    total
+  } = useLoadCriteriaSite(record.uuid, "sites");
 
   const { data: modelFilesData } = useGetV2MODELUUIDFiles<GetV2MODELUUIDFilesResponse>({
     pathParams: { model: "sites", uuid: record.uuid }
@@ -759,6 +767,7 @@ const PolygonReviewTab: FC<IProps> = props => {
               setPolygonFromMap={setPolygonFromMap}
               mapFunctions={mapFunctions}
               refresh={refetch}
+              totalPolygons={total}
             />
           </Grid>
         </Grid>