Feat: Show project status and task status on map and project cards (#272

) * fix(update-userProfile): update background color * feat(dashboard): show user role * feat(projects): Show status on project card * feat(dashboard): update UI and pass other project details on project card props * feat(dashboard): show slug on project card * feat(project-details): add new status on legend * feat(project-details): show skeleton on project data fetching * feat(project-details): fill different color for completed task and image uploaded task show go to task button * feat(project-details): show loader on table * feat(dashboard): make logs table responsive * feat: add Status chip component * feat(project-dashboard): show complete status on project card * feat: fill circle color code from properties on VectorLayerWithCluster component * feat(project-description): add different color code as per project status on properties of projects geojson * feat: reduce table height * feat(project-details): image processing status text update * fix(project-details): available tasks not showing on table behave the task not having state as available tasks --------- Co-authored-by: Sujit <[email protected]>
hotosm · Oct 9, 2024 · 20ab8a5 · 20ab8a5
1 parent a26a517
commit 20ab8a5
Show file tree

Hide file tree

Showing 16 changed files with 165 additions and 59 deletions.
diff --git a/src/frontend/src/components/Dashboard/DashboardSidebar/index.tsx b/src/frontend/src/components/Dashboard/DashboardSidebar/index.tsx
@@ -6,15 +6,17 @@ import hasErrorBoundary from '@Utils/hasErrorBoundary';
 
 const DashboardSidebar = () => {
   const navigate = useNavigate();
-
   const userDetails = getLocalStorageValue('userprofile');
+  const role = localStorage.getItem('signedInAs');
   return (
     <FlexColumn className="w-naxatw-w-full naxatw-items-center naxatw-rounded-lg naxatw-border naxatw-border-grey-400 naxatw-bg-white naxatw-p-2.5 md:naxatw-min-h-[37.188rem]">
       <Flex className="naxatw-h-20 naxatw-w-20 naxatw-items-center naxatw-justify-center naxatw-overflow-hidden naxatw-rounded-full naxatw-bg-grey-600">
         <img src={userDetails?.profile_img} alt="profile" />
       </Flex>
       <h5 className="mt-2.5">{userDetails?.name}</h5>
+      <p className="naxatw-py-1 naxatw-text-body-sm">{role}</p>
       <p className="naxatw-text-body-sm">{userDetails?.email_address}</p>
+
       <Button
         leftIcon="edit"
         className="naxatw-mt-8 naxatw-border naxatw-border-red !naxatw-text-red"
@@ -35,6 +37,10 @@ const DashboardSidebar = () => {
             {userDetails?.email_address}
           </p>
         </FlexRow>
+        <FlexRow className="naxatw-justify-center naxatw-gap-1 md:naxatw-justify-normal">
+          <p className="md:naxatw-min-w-[30%]">Role</p>:
+          <p className="naxatw-break-words md:naxatw-min-w-[65%]">{role}</p>
+        </FlexRow>
       </FlexColumn>
     </FlexColumn>
   );

diff --git a/src/frontend/src/components/Dashboard/TaskLogs/TaskLogsTable.tsx b/src/frontend/src/components/Dashboard/TaskLogs/TaskLogsTable.tsx
@@ -8,29 +8,29 @@ interface ITaskLogsTableProps {
 const TaskLogsTable = ({ data: taskList }: ITaskLogsTableProps) => {
   const navigate = useNavigate();
   return (
-    <div className="flex">
-      <table className="naxatw-w-full naxatw-overflow-hidden naxatw-rounded-lg">
-        <thead>
+    <div className="flex scrollbar naxatw-max-h-[calc(100vh-22rem)] naxatw-overflow-y-auto">
+      <table className="naxatw-relative naxatw-w-full naxatw-rounded-lg">
+        <thead className="">
           <tr className="naxatw-bg-red naxatw-text-left naxatw-font-normal naxatw-text-white">
-            <td className="naxatw-w-20 naxatw-border-r-2 naxatw-px-2 naxatw-py-1">
+            <td className="naxatw-sticky naxatw-top-0 naxatw-w-20 naxatw-border-r-2 naxatw-bg-red naxatw-px-2 naxatw-py-1">
               ID
             </td>
-            <td className="naxatw-min-w-30 naxatw-border-r-2 naxatw-px-2 naxatw-py-1">
+            <td className="naxatw-min-w-30 naxatw-sticky naxatw-top-0 naxatw-border-r-2 naxatw-bg-red naxatw-px-2 naxatw-py-1">
               Project Name
             </td>
-            <td className="naxatw-border-r-2 naxatw-px-2 naxatw-py-1">
+            <td className="naxatw-sticky naxatw-top-0 naxatw-border-r-2 naxatw-bg-red naxatw-px-2 naxatw-py-1">
               Total task area
             </td>
             {/* <td className="naxatw-border-r-2 naxatw-px-2 naxatw-py-1">
               Est.flight time
             </td> */}
-            <td className="naxatw-border-r-2 naxatw-px-2 naxatw-py-1">
+            <td className="naxatw-sticky naxatw-top-0 naxatw-border-r-2 naxatw-bg-red naxatw-px-2 naxatw-py-1">
               Created Date
             </td>
-            <td className="naxatw-border-r-2 naxatw-px-2 naxatw-py-1">
+            <td className="naxatw-sticky naxatw-top-0 naxatw-border-r-2 naxatw-bg-red naxatw-px-2 naxatw-py-1">
               Status
             </td>
-            <td className="naxatw-w-12" />
+            <td className="naxatw-sticky naxatw-top-0 naxatw-w-12 naxatw-border-r-2 naxatw-bg-red naxatw-px-2 naxatw-py-1" />
           </tr>
         </thead>
         <tbody>

diff --git a/src/frontend/src/components/IndividualProject/Contributions/TableSection/index.tsx b/src/frontend/src/components/IndividualProject/Contributions/TableSection/index.tsx
@@ -54,7 +54,7 @@ const contributionsDataColumns = [
   },
 ];
 
-export default function TableSection() {
+export default function TableSection({ isFetching }: { isFetching: boolean }) {
   const tasksData = useTypedSelector(state => state.project.tasksData);
 
   const taskDataForTable = useMemo(() => {
@@ -82,6 +82,7 @@ export default function TableSection() {
       }}
       data={taskDataForTable as Record<string, any>[]}
       withPagination={false}
+      loading={isFetching}
     />
   );
 }
diff --git a/src/frontend/src/components/IndividualProject/Contributions/index.tsx b/src/frontend/src/components/IndividualProject/Contributions/index.tsx
@@ -1,10 +1,10 @@
 import TableSection from './TableSection';
 
-export default function Contributions() {
+export default function Contributions({ isFetching }: { isFetching: boolean }) {
   return (
     <section className="naxatw-py-5">
       <div className="mt-2">
-        <TableSection />
+        <TableSection isFetching={isFetching} />
       </div>
     </section>
   );

diff --git a/src/frontend/src/components/IndividualProject/MapSection/Legend.tsx b/src/frontend/src/components/IndividualProject/MapSection/Legend.tsx
@@ -22,6 +22,10 @@ const Legend = () => {
             <div className="naxatw-h-5 naxatw-w-5 naxatw-bg-[#ACD2C4]" />
             <div className="naxatw-text-sm">Finished Tasks</div>
           </div>
+          <div className="naxatw-flex naxatw-gap-2">
+            <div className="naxatw-h-5 naxatw-w-5 naxatw-bg-[#9C77B2] naxatw-opacity-60" />
+            <div className="naxatw-text-sm">Image Processing</div>
+          </div>
           <div className="naxatw-flex naxatw-gap-2">
             <div className="naxatw-h-5 naxatw-w-5 naxatw-bg-[#F3C5C5]" />
             <div className="naxatw-text-sm">Requested Tasks</div>

diff --git a/src/frontend/src/components/IndividualProject/MapSection/index.tsx b/src/frontend/src/components/IndividualProject/MapSection/index.tsx
@@ -1,5 +1,10 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable no-unused-vars */
+import { useCallback, useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { LngLatBoundsLike, Map } from 'maplibre-gl';
+import { FeatureCollection } from 'geojson';
+import { toast } from 'react-toastify';
 import {
   useGetProjectsDetailQuery,
   useGetTaskStatesQuery,
@@ -19,14 +24,9 @@ import { useTypedDispatch, useTypedSelector } from '@Store/hooks';
 import { useMutation } from '@tanstack/react-query';
 import getBbox from '@turf/bbox';
 import hasErrorBoundary from '@Utils/hasErrorBoundary';
-import { FeatureCollection } from 'geojson';
-import { LngLatBoundsLike, Map } from 'maplibre-gl';
-import { useCallback, useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import { toast } from 'react-toastify';
 import Legend from './Legend';
 
-const MapSection = () => {
+const MapSection = ({ projectData }: { projectData: Record<string, any> }) => {
   const { id } = useParams();
   const navigate = useNavigate();
   const dispatch = useTypedDispatch();
@@ -39,10 +39,6 @@ const MapSection = () => {
   );
   const { data: userDetails }: Record<string, any> = useGetUserDetailsQuery();
 
-  const { data: projectData }: Record<string, any> = useGetProjectsDetailQuery(
-    id as string,
-  );
-
   const { map, isMapLoaded } = useMapLibreGLMap({
     mapOptions: {
       zoom: 5,
@@ -143,8 +139,11 @@ const MapSection = () => {
             return `This task is locked for mapping ${properties.locked_user_name ? `by ${userDetails?.id === properties?.locked_user_id ? 'you' : properties?.locked_user_name}` : ''}`;
           case 'UNFLYABLE_TASK':
             return 'This task is not flyable';
-          case 'COMPLETED':
-            return 'This Task is completed';
+          case 'IMAGE_UPLOADED':
+            return `This task's Images has been uploaded ${properties.locked_user_name ? `by ${userDetails?.id === properties?.locked_user_id ? 'you' : properties?.locked_user_name}` : ''}`;
+          case 'IMAGE_PROCESSED':
+            return `This task is completed ${properties.locked_user_name ? `by ${userDetails?.id === properties?.locked_user_id ? 'you' : properties?.locked_user_name}` : ''}`;
+
           default:
             return '';
         }
@@ -263,14 +262,32 @@ const MapSection = () => {
                             'fill-opacity': 0.5,
                           },
                         }
-                      : {
-                          type: 'fill',
-                          paint: {
-                            'fill-color': '#ffffff',
-                            'fill-outline-color': '#484848',
-                            'fill-opacity': 0.5,
-                          },
-                        }
+                      : taskStatusObj?.[`${task?.id}`] === 'IMAGE_UPLOADED'
+                        ? {
+                            type: 'fill',
+                            paint: {
+                              'fill-color': '#9C77B2',
+                              'fill-outline-color': '#484848',
+                              'fill-opacity': 0.5,
+                            },
+                          }
+                        : taskStatusObj?.[`${task?.id}`] === 'IMAGE_PROCESSED'
+                          ? {
+                              type: 'fill',
+                              paint: {
+                                'fill-color': '#ACD2C4',
+                                'fill-outline-color': '#484848',
+                                'fill-opacity': 0.5,
+                              },
+                            }
+                          : {
+                              type: 'fill',
+                              paint: {
+                                'fill-color': '#ffffff',
+                                'fill-outline-color': '#484848',
+                                'fill-opacity': 0.5,
+                              },
+                            }
               }
               hasImage={
                 taskStatusObj?.[`${task?.id}`] === 'LOCKED_FOR_MAPPING' || false
@@ -299,7 +316,9 @@ const MapSection = () => {
             !taskStatusObj?.[selectedTaskId] ||
             taskStatusObj?.[selectedTaskId] === 'UNLOCKED_TO_MAP' ||
             (taskStatusObj?.[selectedTaskId] === 'LOCKED_FOR_MAPPING' &&
-              lockedUser?.id === userDetails?.id)
+              lockedUser?.id === userDetails?.id) ||
+            taskStatusObj?.[selectedTaskId] === 'IMAGE_UPLOADED' ||
+            taskStatusObj?.[selectedTaskId] === 'IMAGE_PROCESSED'
           )
         }
         buttonText={

diff --git a/src/frontend/src/components/IndividualProject/Tasks/TableSection/index.tsx b/src/frontend/src/components/IndividualProject/Tasks/TableSection/index.tsx
@@ -21,14 +21,13 @@ const tasksDataColumns = [
   // },
 ];
 
-export default function TableSection() {
+export default function TableSection({ isFetching }: { isFetching: boolean }) {
   const tasksData = useTypedSelector(state => state.project.tasksData);
 
   const taskDataForTable = useMemo(() => {
     if (!tasksData) return [];
     return tasksData?.reduce((acc: any, curr: any) => {
-      if (!(curr?.state === '' || curr?.state === 'UNLOCKED_TO_MAP'))
-        return acc;
+      if (!(!curr?.state || curr?.state === 'UNLOCKED_TO_MAP')) return acc;
       return [
         ...acc,
         {
@@ -49,6 +48,7 @@ export default function TableSection() {
       }}
       data={taskDataForTable as Record<string, any>[]}
       withPagination={false}
+      loading={isFetching}
     />
   );
 }
diff --git a/src/frontend/src/components/IndividualProject/Tasks/index.tsx b/src/frontend/src/components/IndividualProject/Tasks/index.tsx
@@ -3,7 +3,7 @@
 // import { FlexRow } from '@Components/common/Layouts';
 import TableSection from './TableSection';
 
-export default function Tasks() {
+export default function Tasks({ isFetching }: { isFetching: boolean }) {
   return (
     <section className="naxatw-py-5">
       {/* <FlexRow className="naxatw-w-full naxatw-justify-between">
@@ -24,7 +24,7 @@ export default function Tasks() {
         </div>
       </FlexRow> */}
       <div className="naxatw-mt-2">
-        <TableSection />
+        <TableSection isFetching={isFetching} />
       </div>
     </section>
   );

diff --git a/src/frontend/src/components/Projects/MapSection/VectorLayerWithCluster.tsx b/src/frontend/src/components/Projects/MapSection/VectorLayerWithCluster.tsx
@@ -59,7 +59,7 @@ export default function VectorLayerWithCluster({
       source: sourceId,
       filter: ['!', ['has', 'point_count']],
       paint: {
-        'circle-color': '#11b4da',
+        'circle-color': ['get', 'colorCode'],
         'circle-radius': 8,
         'circle-stroke-width': 1,
         'circle-stroke-color': '#fff',

diff --git a/src/frontend/src/components/Projects/MapSection/index.tsx b/src/frontend/src/components/Projects/MapSection/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { LngLatBoundsLike, Map } from 'maplibre-gl';
@@ -41,6 +42,12 @@ const ProjectsMapSection = ({ projectList }: { projectList: any }) => {
                 id: current?.id,
                 name: current?.name,
                 slug: current?.slug,
+                colorCode:
+                  current?.status === 'not-started'
+                    ? '#808080'
+                    : current?.status === 'completed'
+                      ? '#028a0f'
+                      : '#11b4da',
               },
             },
           ],
@@ -55,10 +62,16 @@ const ProjectsMapSection = ({ projectList }: { projectList: any }) => {
   }, [projectList]);
 
   useEffect(() => {
-    if (!projectsGeojson || !projectsGeojson?.features?.length) return;
+    if (
+      !projectsGeojson ||
+      !projectsGeojson?.features?.length ||
+      !map ||
+      !isMapLoaded
+    )
+      return;
     const bbox = getBbox(projectsGeojson as FeatureCollection);
     map?.fitBounds(bbox as LngLatBoundsLike, { padding: 100, duration: 500 });
-  }, [projectsGeojson, map]);
+  }, [projectsGeojson, map, isMapLoaded]);
 
   const getPopupUI = useCallback(() => {
     return (

diff --git a/src/frontend/src/components/Projects/ProjectCard/index.tsx b/src/frontend/src/components/Projects/ProjectCard/index.tsx
@@ -1,18 +1,27 @@
+/* eslint-disable no-nested-ternary */
+import StatusChip from '@Components/common/Chip/StatusChip';
 import { useNavigate } from 'react-router-dom';
 
 interface IProjectCardProps {
   id: number;
   title: string;
   description: string;
   imageUrl: string | null;
+  totalTasks: number;
+  status: string;
+  slug: string;
+  completedTask: number;
 }
 
 export default function ProjectCard({
   id,
   title,
   description,
-
   imageUrl,
+  totalTasks,
+  status,
+  slug,
+  completedTask,
 }: IProjectCardProps) {
   const navigate = useNavigate();
   const onProjectCardClick = () => {
@@ -23,9 +32,9 @@ export default function ProjectCard({
     <div
       role="presentation"
       onClick={onProjectCardClick}
-      className="!naxatw-col-span-1 naxatw-cursor-pointer naxatw-rounded-md naxatw-border naxatw-border-grey-400 naxatw-p-[0.625rem] naxatw-transition-all naxatw-duration-300 naxatw-ease-in-out hover:-naxatw-translate-y-1 hover:naxatw-scale-100 hover:naxatw-shadow-xl"
+      className="naxatw-relative !naxatw-col-span-1 naxatw-cursor-pointer naxatw-rounded-md naxatw-border naxatw-border-grey-400 naxatw-p-[0.625rem] naxatw-transition-all naxatw-duration-300 naxatw-ease-in-out hover:-naxatw-translate-y-1 hover:naxatw-scale-100 hover:naxatw-shadow-xl"
     >
-      <p className="naxatw-flex naxatw-h-[10rem] naxatw-w-full naxatw-items-center naxatw-justify-center naxatw-bg-grey-50">
+      <p className="naxatw-flex naxatw-h-[10rem] naxatw-w-full naxatw-items-center naxatw-justify-center naxatw-overflow-hidden naxatw-rounded-lg naxatw-bg-grey-50">
         {imageUrl ? (
           <img
             src={imageUrl}
@@ -38,13 +47,39 @@ export default function ProjectCard({
           </i>
         )}
       </p>
-      <p className="naxatw-mt-2 naxatw-line-clamp-1 naxatw-text-body-sm">
-        #{id}
-      </p>
+      <div className="naxatw-flex naxatw-items-center naxatw-justify-between naxatw-py-2">
+        <p className="naxatw-mt-2 naxatw-line-clamp-1 naxatw-flex-grow naxatw-text-body-sm">
+          ID:#{slug}
+        </p>
+        <div className="naxatw-flex naxatw-w-20 naxatw-items-center naxatw-justify-end">
+          {status === 'not-started' ? (
+            <StatusChip color="#808080" text={status} />
+          ) : status === 'ongoing' ? (
+            <StatusChip color="#417EC9" text={status} />
+          ) : (
+            <StatusChip color="#028a0f" text={status} />
+          )}
+        </div>
+      </div>
       <p className="naxatw-line-clamp-1 naxatw-text-body-btn naxatw-text-grey-800">
         {title}
       </p>
       <p className="naxatw-line-clamp-2 naxatw-text-body-sm">{description}</p>
+      <div className="naxatw-absolute naxatw-bottom-2 naxatw-left-0 naxatw-w-full naxatw-px-3 naxatw-py-1">
+        <div className="naxatw-flex naxatw-items-end naxatw-justify-start naxatw-px-1">
+          <p className="naxatw-font-semibold naxatw-text-red">
+            {completedTask}
+          </p>{' '}
+          <p>/</p>
+          <p>{totalTasks}</p> <p className="naxatw-pl-2">Tasks Completed</p>
+        </div>
+        <div className="naxatw-h-1 naxatw-w-full naxatw-overflow-hidden naxatw-rounded-xl naxatw-bg-gray-200">
+          <div
+            className="naxatw-h-1 naxatw-bg-red"
+            style={{ width: `${(completedTask / totalTasks) * 100}%` }}
+          />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/frontend/src/components/RadixComponents/Table.tsx b/src/frontend/src/components/RadixComponents/Table.tsx
@@ -5,7 +5,7 @@ const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="scrollbar naxatw-h-[70vh] naxatw-overflow-auto">
+  <div className="scrollbar naxatw-h-[65vh] naxatw-overflow-auto">
     <table
       ref={ref}
       className={cn(