[TM-1533] indeterminate progress (#726)

* [TM-1533] add indeterminate progress bar until all polygons are loaded * [TM-1533] fix shadow in crads and text line height --------- Co-authored-by: cesarLima1 <[email protected]>
wri · Dec 4, 2024 · 7a8b51b · 7a8b51b
1 parent d5ac48e
commit 7a8b51b
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 28 deletions.
diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonItem.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonItem.tsx
@@ -77,15 +77,15 @@ const PolygonItem = ({
       {...props}
       className={classNames(
         className,
-        "flex flex-col rounded-lg border-2 border-grey-350 bg-white p-2 hover:border-primary"
+        "flex flex-col rounded-lg border-2 border-grey-350 bg-white p-2  shadow-monitored hover:border-primary"
       )}
     >
       <div className="flex items-center justify-between gap-2">
         <Checkbox name="" checked={isChecked} onClick={handleCheckboxClick} />
         <div className="min-h-11 min-w-11">
           <Icon
             name={IconNames[imageStatus as keyof typeof IconNames]}
-            className=" h-11 w-11 rounded-lg bg-neutral-300"
+            className="h-11 w-11 rounded-lg bg-neutral-300"
           />
         </div>
         <div className="flex flex-1 flex-col justify-between gap-2 overflow-hidden">

diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/Polygons.tsx
@@ -251,7 +251,7 @@ const Polygons = (props: IPolygonProps) => {
           </Box>
         </When>
       </div>
-      <div ref={containerRef} className="flex max-h-[150vh] flex-col gap-2 overflow-auto">
+      <div ref={containerRef} className="-m-2 flex max-h-[150vh] flex-col gap-2 overflow-auto p-2">
         {polygonMenu.map(item => (
           <div key={item.id}>
             <PolygonItem

diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx
@@ -1,8 +1,11 @@
 import { Grid, Stack } from "@mui/material";
+import Box from "@mui/material/Box";
+import LinearProgress from "@mui/material/LinearProgress";
 import { useT } from "@transifex/react";
 import { LngLatBoundsLike } from "mapbox-gl";
 import { FC, useEffect, useState } from "react";
 import { TabbedShowLayout, TabProps, useShowContext } from "react-admin";
+import { Else, If, Then } from "react-if";
 
 import ModalApprove from "@/admin/components/extensive/Modal/ModalApprove";
 import Button from "@/components/elements/Button/Button";
@@ -605,13 +608,13 @@ const PolygonReviewTab: FC<IProps> = props => {
           <Grid xs={9}>
             <Stack gap={4} className="pl-8 pt-9">
               <div className="flex flex-col items-start gap-3">
-                <div className="mb-2 flex w-full gap-2 rounded-xl bg-white p-3 shadow-monitored">
+                <div className="mb-2 flex w-full gap-2 rounded-xl border-2 border-grey-350 bg-white p-3 shadow-monitored">
                   <div className="w-40 lg:w-48">
                     <Text variant="text-14" className="flex items-center gap-1 text-darkCustom">
                       Site Status
                       <Icon name={IconNames.IC_INFO} className="h-3.5 w-3.5 text-darkCustom" />
                     </Text>
-                    <Text variant="text-14-bold" className="text-black">
+                    <Text variant="text-14-bold" className="leading-[normal] text-black">
                       {record?.readable_status}
                     </Text>
                   </div>
@@ -620,7 +623,16 @@ const PolygonReviewTab: FC<IProps> = props => {
                       Polygon Overview
                       <Icon name={IconNames.IC_INFO} className="h-3.5 w-3.5 text-darkCustom" />
                     </Text>
-                    <LinearProgressBarMonitored data={dataPolygonOverview} />
+                    <If condition={sitePolygonData.length < total}>
+                      <Then>
+                        <Box sx={{ width: "100%" }}>
+                          <LinearProgress sx={{ borderRadius: 5 }} />
+                        </Box>
+                      </Then>
+                      <Else>
+                        <LinearProgressBarMonitored data={dataPolygonOverview} />
+                      </Else>
+                    </If>
                   </div>
                 </div>
                 <div className="min-w-[450px] flex-[18]">
@@ -670,14 +682,6 @@ const PolygonReviewTab: FC<IProps> = props => {
                     </Button>
                   </div>
                 </div>
-                {/* <div className="mt-4 min-w-[310px] flex-[11] rounded-lg border border-grey-750 p-4">
-                  <Text variant="text-14" className="mb-3 text-blueCustom-250">
-                    Site Status
-                  </Text>
-                  <div className="w-full h-fit">
-                    <SitePolygonStatus statusLabel={record.readable_status} />
-                  </div>
-                </div> */}
               </div>
               <MapContainer
                 record={record}

diff --git a/src/components/elements/ProgressBar/LinearProgressBar/LineProgressBarMonitored.tsx b/src/components/elements/ProgressBar/LinearProgressBar/LineProgressBarMonitored.tsx
@@ -53,21 +53,26 @@ const LinearProgressBarMonitored = ({ data }: LinearProgressBarMonitoredProps) =
       >
         <TooltipLineProgressBarMonitored value={tooltipValue} label={statusHover} />
       </div>
-      {data.map((item, index) => (
-        <div key={index} style={{ width: totalCount > 0 ? `${(item.count / totalCount) * 100}%` : "0%" }}>
-          <div
-            className={classNames(
-              "h-[6px] w-full cursor-pointer rounded-sm hover:shadow-item-monitored lg:h-[8px] wide:h-[10px]",
-              colorBg[item.status]
+      {data.map((item, index) => {
+        const percentage = totalCount > 0 ? (item.count / totalCount) * 100 : 0;
+        return (
+          <div key={index} style={{ width: `${percentage}%` }}>
+            <div
+              className={classNames(
+                "h-[6px] w-full cursor-pointer rounded-sm hover:shadow-item-monitored lg:h-[8px] wide:h-[10px]",
+                colorBg[item.status]
+              )}
+              onMouseEnter={e => openTooltip(e, item)}
+              onMouseLeave={exitTooltip}
+            />
+            {percentage > 10 && (
+              <Text variant="text-12" className="pt-1 text-darkCustom-300">
+                {item.status}
+              </Text>
             )}
-            onMouseEnter={e => openTooltip(e, item)}
-            onMouseLeave={exitTooltip}
-          />
-          <Text variant="text-12" className="pt-1 text-darkCustom-300">
-            {item.status}
-          </Text>
-        </div>
-      ))}
+          </div>
+        );
+      })}
     </div>
   );
 };