[TM-1535] loader count polygons (#722)

* [TM-1535] add loaded * [TM-1534] add indeterminate linear loader for polygon validation data * [TM-1535] fix style of linear progress bar * [TM-1535] add loader of polygons --------- Co-authored-by: cesarLima1 <[email protected]>
wri · Dec 4, 2024 · aba7591 · aba7591
1 parent 2b45c64
commit aba7591
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 3 deletions.
diff --git 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
@@ -1,4 +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";
@@ -40,6 +42,7 @@ export interface IPolygonProps {
   setPolygonFromMap?: any;
   refresh?: () => void;
   mapFunctions: any;
+  totalPolygons?: number;
 }
 
 export const polygonData = [
@@ -62,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);
@@ -200,6 +203,7 @@ const Polygons = (props: IPolygonProps) => {
     setSelectedPolygonsInCheckbox(checkedUuids);
   };
 
+  const polygonSitePolygonCount = sitePolygonData?.length ?? 0;
   return (
     <div>
       <Drawer isOpen={isOpenPolygonDrawer} setIsOpen={setIsOpenPolygonDrawer} setPolygonFromMap={setPolygonFromMap}>
@@ -232,6 +236,21 @@ const Polygons = (props: IPolygonProps) => {
           </Button>
         </div>
       </div>
+      <div className="mb-4 flex flex-col gap-1">
+        <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 => (
           <div key={item.id}>

diff --git 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>