feat(ui): show progress indicator for unfinished subsectors in list

Open-Earth-Foundation · Apr 8, 2024 · dae5d19 · dae5d19
1 parent 92c2fd2
commit dae5d19
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 13 deletions.
diff --git a/app/src/app/[lng]/[inventory]/data/[step]/page.tsx b/app/src/app/[lng]/[inventory]/data/[step]/page.tsx
@@ -29,7 +29,9 @@ import {
   Button,
   Card,
   Center,
+  CircularProgress,
   Flex,
+  HStack,
   Heading,
   Icon,
   IconButton,
@@ -819,18 +821,34 @@ export default function AddDataSteps({
                 onClick={() => onSubsectorClick(subSector)}
                 key={subSector.subsectorId}
               >
-                <Flex direction="row" className="space-x-4 items-center h-full">
-                  <Icon
-                    as={
-                      subSector.completed ? MdOutlineCheckCircle : DataAlertIcon
-                    }
-                    boxSize={8}
-                    color={
-                      subSector.completed
-                        ? "interactive.tertiary"
-                        : "sentiment.warningDefault"
-                    }
-                  />
+                <HStack align="center" height="120px" justify="space-between">
+                  {subSector.completedCount > 0 &&
+                  subSector.completedCount < subSector.totalCount ? (
+                    <CircularProgress
+                      size="36px"
+                      thickness="12px"
+                      mr="4"
+                      color="interactive.secondary"
+                      trackColor="background.neutral"
+                      value={
+                        (subSector.completedCount / subSector.totalCount) * 100
+                      }
+                    />
+                  ) : (
+                    <Icon
+                      as={
+                        subSector.completed
+                          ? MdOutlineCheckCircle
+                          : DataAlertIcon
+                      }
+                      boxSize={9}
+                      color={
+                        subSector.completed
+                          ? "interactive.tertiary"
+                          : "sentiment.warningDefault"
+                      }
+                    />
+                  )}
                   <Stack w="full">
                     <Heading size="xs" noOfLines={3} maxWidth="200px">
                       {t(nameToI18NKey(subSector.subsectorName!))}
@@ -851,7 +869,7 @@ export default function AddDataSteps({
                       />
                     }
                   />
-                </Flex>
+                </HStack>
               </Card>
             ))
           )}

diff --git a/app/src/app/[lng]/[inventory]/data/[step]/types.d.ts b/app/src/app/[lng]/[inventory]/data/[step]/types.d.ts
@@ -119,6 +119,8 @@ type DataSourceData = {
 
 type SubSectorWithRelations = SubSectorAttributes & {
   completed: boolean;
+  completedCount: number;
+  totalCount: number;
   scope: ScopeAttributes;
   subCategories: SubCategoryAttributes[];
 };