From b515c626aa45bcb00fd5c1fdff356f7d66dd01de Mon Sep 17 00:00:00 2001
From: Sujit <sujit.naxa@gmail.com>
Date: Wed, 31 Jul 2024 17:55:19 +0545
Subject: [PATCH 1/7] feat: add image loading feature on `vectorLayer`
 component

---
 .../MapLibreComponents/Layers/VectorLayer.ts  | 22 +++++++++++++++++++
 .../common/MapLibreComponents/types/index.ts  |  2 ++
 2 files changed, 24 insertions(+)

diff --git a/src/frontend/src/components/common/MapLibreComponents/Layers/VectorLayer.ts b/src/frontend/src/components/common/MapLibreComponents/Layers/VectorLayer.ts
index d752c670..f1fd6b65 100644
--- a/src/frontend/src/components/common/MapLibreComponents/Layers/VectorLayer.ts
+++ b/src/frontend/src/components/common/MapLibreComponents/Layers/VectorLayer.ts
@@ -1,6 +1,7 @@
 /* eslint-disable no-param-reassign */
 import { useEffect, useMemo, useRef } from 'react';
 import { MapMouseEvent } from 'maplibre-gl';
+import { v4 as uuidv4 } from 'uuid';
 import { IVectorLayer } from '../types';
 
 export default function VectorLayer({
@@ -12,6 +13,8 @@ export default function VectorLayer({
   layerOptions,
   onFeatureSelect,
   visibleOnMap = true,
+  hasImage = false,
+  image,
 }: IVectorLayer) {
   const sourceId = useMemo(() => id.toString(), [id]);
   const hasInteractions = useRef(false);
@@ -42,6 +45,25 @@ export default function VectorLayer({
         layout: {},
         ...layerOptions,
       });
+
+      if (hasImage) {
+        const imageId = uuidv4();
+        map.loadImage(image, (error, img: any) => {
+          if (error) throw error;
+          // Add the loaded image to the style's sprite with the ID 'kitten'.
+          map.addImage(imageId, img);
+        });
+        map.addLayer({
+          id: imageId,
+          type: 'symbol',
+          source: sourceId,
+          layout: {
+            'icon-image': imageId,
+            'icon-size': 1,
+            'icon-overlap': 'always',
+          },
+        });
+      }
     } else if (map.getLayer(sourceId)) {
       map.removeLayer(sourceId);
     }
diff --git a/src/frontend/src/components/common/MapLibreComponents/types/index.ts b/src/frontend/src/components/common/MapLibreComponents/types/index.ts
index 4643b68e..374614f1 100644
--- a/src/frontend/src/components/common/MapLibreComponents/types/index.ts
+++ b/src/frontend/src/components/common/MapLibreComponents/types/index.ts
@@ -45,6 +45,8 @@ export interface IVectorLayer extends ILayer {
   geojson: GeojsonType | null;
   interactions?: string[];
   onFeatureSelect?: (properties: Record<string, any>) => void;
+  hasImage?: boolean;
+  image: any;
 }
 
 type InteractionsType = 'hover' | 'select';

From 9240136ee286cfa244b342b11513ce48e9439b52 Mon Sep 17 00:00:00 2001
From: Sujit <sujit.naxa@gmail.com>
Date: Wed, 31 Jul 2024 18:02:17 +0545
Subject: [PATCH 2/7] fix: map loading state delayed issue

set loading state to true on `load` event of  map instance insted of map instance saved on state
---
 .../common/MapLibreComponents/useMapLibreGLMap/index.ts       | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/frontend/src/components/common/MapLibreComponents/useMapLibreGLMap/index.ts b/src/frontend/src/components/common/MapLibreComponents/useMapLibreGLMap/index.ts
index 54ae8a1b..481faf67 100644
--- a/src/frontend/src/components/common/MapLibreComponents/useMapLibreGLMap/index.ts
+++ b/src/frontend/src/components/common/MapLibreComponents/useMapLibreGLMap/index.ts
@@ -22,6 +22,10 @@ export default function useMapLibreGLMap({
       ...mapOptions,
     });
     setMap(mapInstance);
+
+    mapInstance.on('load', () => {
+      setIsMapLoaded(true);
+    });
     // return () => mapInstance.setTarget(undefined);
   }, []); // eslint-disable-line
 

From 158cedcf52f0b57b08a7838f13a9581681f12cb2 Mon Sep 17 00:00:00 2001
From: Sujit <sujit.naxa@gmail.com>
Date: Wed, 31 Jul 2024 22:54:29 +0545
Subject: [PATCH 3/7] feat: add button hide props on map popup component

---
 .../common/MapLibreComponents/AsyncPopup/index.tsx        | 8 ++++++--
 .../components/common/MapLibreComponents/types/index.ts   | 1 +
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/common/MapLibreComponents/AsyncPopup/index.tsx b/src/frontend/src/components/common/MapLibreComponents/AsyncPopup/index.tsx
index e51aea64..e4e464da 100644
--- a/src/frontend/src/components/common/MapLibreComponents/AsyncPopup/index.tsx
+++ b/src/frontend/src/components/common/MapLibreComponents/AsyncPopup/index.tsx
@@ -24,6 +24,7 @@ export default function AsyncPopup({
   isLoading = false,
   onClose,
   buttonText = 'View More',
+  hideButton = false,
 }: IAsyncPopup) {
   const [properties, setProperties] = useState<Record<string, any> | null>(
     null,
@@ -68,7 +69,10 @@ export default function AsyncPopup({
   if (!properties) return <div />;
 
   return (
-    <div ref={popupRef} className="naxatw-w-[17.5rem] naxatw-px-3">
+    <div
+      ref={popupRef}
+      className={`naxatw-w-[17.5rem] naxatw-px-3 ${hideButton ? 'naxatw-pb-3' : ''}`}
+    >
       <div className="naxatw-flex naxatw-items-center naxatw-justify-between naxatw-py-2">
         {isLoading ? (
           <Skeleton className="naxatw-my-3 naxatw-h-4 naxatw-w-1/2 naxatw-rounded-md naxatw-bg-grey-100 naxatw-shadow-sm" />
@@ -86,7 +90,7 @@ export default function AsyncPopup({
         </span>
       </div>
       <div dangerouslySetInnerHTML={{ __html: popupHTML }} />
-      {!isLoading && (
+      {!isLoading && !hideButton && (
         <div className="naxatw-flex naxatw-items-center naxatw-p-3">
           <Button
             className="naxatw-mx-auto naxatw-bg-red naxatw-font-primary naxatw-text-white"
diff --git a/src/frontend/src/components/common/MapLibreComponents/types/index.ts b/src/frontend/src/components/common/MapLibreComponents/types/index.ts
index 374614f1..b3bd9bc2 100644
--- a/src/frontend/src/components/common/MapLibreComponents/types/index.ts
+++ b/src/frontend/src/components/common/MapLibreComponents/types/index.ts
@@ -67,6 +67,7 @@ export interface IAsyncPopup {
   isLoading?: boolean;
   onClose?: () => void;
   buttonText?: string;
+  hideButton?: boolean;
 }
 
 export type DrawModeTypes = DrawMode | null | undefined;

From 5c2edd012f027968a5699f046117afa14ebe3a55 Mon Sep 17 00:00:00 2001
From: Sujit <sujit.naxa@gmail.com>
Date: Wed, 31 Jul 2024 23:01:14 +0545
Subject: [PATCH 4/7] feat(project-creation): set tasks style and popup message
 as per task staus on map

---
 src/frontend/src/assets/images/lock.png       | Bin 0 -> 337 bytes
 .../IndividualProject/MapSection/index.tsx    | 145 +++++++++++-------
 2 files changed, 88 insertions(+), 57 deletions(-)
 create mode 100644 src/frontend/src/assets/images/lock.png

diff --git a/src/frontend/src/assets/images/lock.png b/src/frontend/src/assets/images/lock.png
new file mode 100644
index 0000000000000000000000000000000000000000..30f68fa1e9466e805bf71f64c03946fe303b3fde
GIT binary patch
literal 337
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9F5he4R}c>anMprB-l
zYeY$Kep*R+Vo@qXd3m{BW?pu2a$-TMUVc&f>~}U&Kt=aFT^vI^I^RyU<~!uT<8oi&
z9RsVlmlR7nXL>_6qkCdMgV0<}gV1l&TRcR1OnUdqowmNV?o5y6#ub(-nd&dKUOwF8
zaVxacV6#r6Z~~`X_gB`Bd%0~J`68^X`z1Hbz4YLfQmjh(hdY&C&F$T5ly**i{?3y3
z={Ao^JN>05x1Z9T)pFv6u7F3rUl(IWmt2p?{|{kb7Cehf_PBcX-NE-J6Rvo1om;lc
z`AAB2`{rlg&-h&B-MOgn{jUa2sRz&AysuvLZvQe@9p#M-Id;nYE-ze-()jAyJ7&!P
g%fGMjrfmh|+Wl|0?Mn{g1^Sf1)78&qol`;+0I+3=J^%m!

literal 0
HcmV?d00001

diff --git a/src/frontend/src/components/IndividualProject/MapSection/index.tsx b/src/frontend/src/components/IndividualProject/MapSection/index.tsx
index fbca9d8a..5875dc91 100644
--- a/src/frontend/src/components/IndividualProject/MapSection/index.tsx
+++ b/src/frontend/src/components/IndividualProject/MapSection/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 /* eslint-disable no-unused-vars */
 import { useParams } from 'react-router-dom';
 import { useCallback, useEffect, useState } from 'react';
@@ -11,15 +12,15 @@ import AsyncPopup from '@Components/common/MapLibreComponents/AsyncPopup';
 import getBbox from '@turf/bbox';
 import { FeatureCollection } from 'geojson';
 import { LngLatBoundsLike, Map } from 'maplibre-gl';
-import PopupUI from '@Components/common/MapLibreComponents/PopupUI';
+// import PopupUI from '@Components/common/MapLibreComponents/PopupUI';
 import { setProjectState } from '@Store/actions/project';
 import { useGetTaskStatesQuery } from '@Api/projects';
+import DTMLogo from '@Assets/images/lock.png';
 
 export default function MapSection() {
   const { id } = useParams();
   const dispatch = useTypedDispatch();
-
-  const [tasksBoundaryLayer, setTasksBoundaryLayer] = useState<Record<
+  const [taskStatusObj, setTaskStatusObj] = useState<Record<
     string,
     any
   > | null>(null);
@@ -42,10 +43,8 @@ export default function MapSection() {
     enabled: !!tasksData,
   });
 
-  // create combined geojson from individual tasks from the API
   useEffect(() => {
-    if (!map || !tasksData) return;
-
+    if (!map || !taskStates) return;
     // @ts-ignore
     const taskStatus: Record<string, any> = taskStates?.reduce(
       (acc: Record<string, any>, task: Record<string, any>) => {
@@ -54,45 +53,47 @@ export default function MapSection() {
       },
       {},
     );
-    const features = tasksData?.map(taskObj => {
-      return {
-        type: 'Feature',
-        geometry: { ...taskObj.outline_geojson.geometry },
-        properties: {
-          ...taskObj.outline_geojson.properties,
-          state: taskStatus?.[`${taskObj.id}`] || null,
-        },
-      };
-    });
-    const taskBoundariesFeatcol = {
-      type: 'FeatureCollection',
-      SRID: {
-        type: 'name',
-        properties: {
-          name: 'EPSG:3857',
-        },
-      },
-      features,
-    };
-    setTasksBoundaryLayer(taskBoundariesFeatcol);
-  }, [map, taskStates, tasksData]);
+    setTaskStatusObj(taskStatus);
+  }, [map, taskStates]);
 
   // zoom to layer in the project area
   useEffect(() => {
-    if (!tasksBoundaryLayer) return;
-    const bbox = getBbox(tasksBoundaryLayer as FeatureCollection);
+    if (!tasksData) return;
+    const tasksCollectiveGeojson = tasksData?.reduce(
+      (acc, curr) => {
+        return {
+          ...acc,
+          features: [...acc.features, curr.outline_geojson],
+        };
+      },
+      {
+        type: 'FeatureCollection',
+        features: [],
+      },
+    );
+    const bbox = getBbox(tasksCollectiveGeojson as FeatureCollection);
     map?.fitBounds(bbox as LngLatBoundsLike, { padding: 25 });
-  }, [map, tasksBoundaryLayer]);
-
-  const getPopUpButtonText = (taskState: string) => {
-    if (taskState === 'UNLOCKED_FOR_MAP') return 'Request for Mapping';
-    if (taskState === '') return '';
-    return 'nothing';
-  };
+  }, [map, tasksData]);
 
-  const getPopupUI = useCallback((properties: Record<string, any>) => {
-    return <h6>This task is available for mapping</h6>;
-  }, []);
+  const getPopupUI = useCallback(
+    (properties: Record<string, any>) => {
+      const status = taskStatusObj?.[properties?.id];
+      const popupText = (taskStatus: string) => {
+        switch (taskStatus) {
+          case 'UNLOCKED_TO_MAP':
+            return 'This task is available for mapping';
+          case 'REQUEST_FOR_MAPPING':
+            return 'This task is Requested for mapping';
+          case 'LOCKED_FOR_MAPPING':
+            return 'This task is locked for mapping';
+          default:
+            return 'This Task is completed';
+        }
+      };
+      return <h6>{popupText(status)}</h6>;
+    },
+    [taskStatusObj],
+  );
 
   return (
     <MapContainer
@@ -103,23 +104,52 @@ export default function MapSection() {
         height: '100%',
       }}
     >
-      {tasksBoundaryLayer && (
-        <VectorLayer
-          map={map as Map}
-          id="tasks-layer"
-          visibleOnMap={!!tasksBoundaryLayer}
-          geojson={tasksBoundaryLayer as GeojsonType}
-          interactions={['feature']}
-          layerOptions={{
-            type: 'fill',
-            paint: {
-              'fill-color': '#328ffd',
-              'fill-outline-color': '#484848',
-              'fill-opacity': 0.5,
-            },
-          }}
-        />
-      )}
+      {tasksData &&
+        tasksData?.map((task: Record<string, any>) => {
+          return (
+            <VectorLayer
+              key={task?.id}
+              map={map as Map}
+              id={`tasks-layer-${task?.id}`}
+              visibleOnMap={task?.id && taskStatusObj}
+              geojson={task.outline_geojson as GeojsonType}
+              interactions={['feature']}
+              layerOptions={
+                taskStatusObj?.[`${task?.id}`] === 'LOCKED_FOR_MAPPING'
+                  ? {
+                      type: 'fill',
+                      paint: {
+                        'fill-color': '#98BBC8',
+                        'fill-outline-color': '#484848',
+                        'fill-opacity': 0.6,
+                      },
+                    }
+                  : taskStatusObj?.[`${task?.id}`] === 'TASK_COMPLETED'
+                    ? {
+                        type: 'fill',
+                        paint: {
+                          'fill-color': '#176149',
+                          'fill-outline-color': '#484848',
+                          'fill-opacity': 0.5,
+                        },
+                      }
+                    : {
+                        type: 'fill',
+                        paint: {
+                          'fill-color': '#ffffff',
+                          'fill-outline-color': '#484848',
+                          'fill-opacity': 0.4,
+                        },
+                      }
+              }
+              hasImage={
+                taskStatusObj?.[`${task?.id}`] === 'LOCKED_FOR_MAPPING' || false
+              }
+              image={DTMLogo}
+            />
+          );
+        })}
+
       <AsyncPopup
         map={map as Map}
         popupUI={getPopupUI}
@@ -127,6 +157,7 @@ export default function MapSection() {
         fetchPopupData={(properties: Record<string, any>) => {
           dispatch(setProjectState({ selectedTaskId: properties.id }));
         }}
+        hideButton={taskStatusObj?.[selectedTaskId] !== 'UNLOCKED_TO_MAP'}
         buttonText="Lock Task"
       />
       <BaseLayerSwitcher />

From ed11850e5e0dcaba73a2b5587edd4ea11bc61efb Mon Sep 17 00:00:00 2001
From: Sujit <sujit.naxa@gmail.com>
Date: Thu, 1 Aug 2024 10:02:46 +0545
Subject: [PATCH 5/7] fix: issue on task status post

header content type set to application/json instend of form data
---
 src/frontend/src/services/project.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/services/project.ts b/src/frontend/src/services/project.ts
index ea173685..6d58acc3 100644
--- a/src/frontend/src/services/project.ts
+++ b/src/frontend/src/services/project.ts
@@ -4,8 +4,9 @@ import { authenticated, api } from '.';
 export const getTaskStates = (projectId: string) =>
   api.get(`/tasks/states/${projectId}`);
 
-export const postTaskStatus = (
-  projectId: string,
-  taskId: string,
-  data: Record<string, any>,
-) => authenticated(api).post(`/tasks/event/${projectId}/${taskId}`, data);
+export const postTaskStatus = (payload: Record<string, any>) => {
+  const { projectId, taskId, data } = payload;
+  return authenticated(api).post(`/tasks/event/${projectId}/${taskId}`, data, {
+    headers: { 'Content-Type': 'application/json' },
+  });
+};

From f9b99fc544bff80fd6571557f734d59ead1ab80e Mon Sep 17 00:00:00 2001
From: Sujit <sujit.naxa@gmail.com>
Date: Thu, 1 Aug 2024 10:05:48 +0545
Subject: [PATCH 6/7] feat(projects): make request for  mapping task

---
 .../IndividualProject/MapSection/index.tsx    | 60 +++++++++++++++----
 1 file changed, 47 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/components/IndividualProject/MapSection/index.tsx b/src/frontend/src/components/IndividualProject/MapSection/index.tsx
index 5875dc91..48b493a3 100644
--- a/src/frontend/src/components/IndividualProject/MapSection/index.tsx
+++ b/src/frontend/src/components/IndividualProject/MapSection/index.tsx
@@ -12,10 +12,12 @@ import AsyncPopup from '@Components/common/MapLibreComponents/AsyncPopup';
 import getBbox from '@turf/bbox';
 import { FeatureCollection } from 'geojson';
 import { LngLatBoundsLike, Map } from 'maplibre-gl';
-// import PopupUI from '@Components/common/MapLibreComponents/PopupUI';
 import { setProjectState } from '@Store/actions/project';
 import { useGetTaskStatesQuery } from '@Api/projects';
 import DTMLogo from '@Assets/images/lock.png';
+import { postTaskStatus } from '@Services/project';
+import { useMutation } from '@tanstack/react-query';
+import { toast } from 'react-toastify';
 
 export default function MapSection() {
   const { id } = useParams();
@@ -43,6 +45,20 @@ export default function MapSection() {
     enabled: !!tasksData,
   });
 
+  const { mutate: lockTask } = useMutation<any, any, any, unknown>({
+    mutationFn: postTaskStatus,
+    onSuccess: (res: any) => {
+      toast.success('Task Requested for Mapping');
+      setTaskStatusObj({
+        ...taskStatusObj,
+        [res.data.task_id]: 'REQUEST_FOR_MAPPING',
+      });
+    },
+    onError: (err: any) => {
+      toast.error(err.message);
+    },
+  });
+
   useEffect(() => {
     if (!map || !taskStates) return;
     // @ts-ignore
@@ -95,6 +111,14 @@ export default function MapSection() {
     [taskStatusObj],
   );
 
+  const handleTaskLockClick = () => {
+    lockTask({
+      projectId: id,
+      taskId: selectedTaskId,
+      data: { event: 'request' },
+    });
+  };
+
   return (
     <MapContainer
       map={map}
@@ -110,7 +134,7 @@ export default function MapSection() {
             <VectorLayer
               key={task?.id}
               map={map as Map}
-              id={`tasks-layer-${task?.id}`}
+              id={`tasks-layer-${task?.id}-${taskStatusObj?.[task?.id]}`}
               visibleOnMap={task?.id && taskStatusObj}
               geojson={task.outline_geojson as GeojsonType}
               interactions={['feature']}
@@ -124,23 +148,32 @@ export default function MapSection() {
                         'fill-opacity': 0.6,
                       },
                     }
-                  : taskStatusObj?.[`${task?.id}`] === 'TASK_COMPLETED'
+                  : taskStatusObj?.[`${task?.id}`] === 'REQUEST_FOR_MAPPING'
                     ? {
                         type: 'fill',
                         paint: {
-                          'fill-color': '#176149',
-                          'fill-outline-color': '#484848',
-                          'fill-opacity': 0.5,
-                        },
-                      }
-                    : {
-                        type: 'fill',
-                        paint: {
-                          'fill-color': '#ffffff',
+                          'fill-color': '#F3C5C5',
                           'fill-outline-color': '#484848',
-                          'fill-opacity': 0.4,
+                          'fill-opacity': 0.9,
                         },
                       }
+                    : taskStatusObj?.[`${task?.id}`] === 'TASK_COMPLETED'
+                      ? {
+                          type: 'fill',
+                          paint: {
+                            'fill-color': '#176149',
+                            'fill-outline-color': '#484848',
+                            'fill-opacity': 0.5,
+                          },
+                        }
+                      : {
+                          type: 'fill',
+                          paint: {
+                            'fill-color': '#ffffff',
+                            'fill-outline-color': '#484848',
+                            'fill-opacity': 0.4,
+                          },
+                        }
               }
               hasImage={
                 taskStatusObj?.[`${task?.id}`] === 'LOCKED_FOR_MAPPING' || false
@@ -159,6 +192,7 @@ export default function MapSection() {
         }}
         hideButton={taskStatusObj?.[selectedTaskId] !== 'UNLOCKED_TO_MAP'}
         buttonText="Lock Task"
+        handleBtnClick={() => handleTaskLockClick()}
       />
       <BaseLayerSwitcher />
     </MapContainer>

From 08fef7204a243c30cbd889bb269b099438923149 Mon Sep 17 00:00:00 2001
From: Sujit <sujit.naxa@gmail.com>
Date: Thu, 1 Aug 2024 10:37:54 +0545
Subject: [PATCH 7/7] style(project-map): update style of task requested for
 maping and unlocked for validate on map

---
 .../src/components/IndividualProject/MapSection/index.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/IndividualProject/MapSection/index.tsx b/src/frontend/src/components/IndividualProject/MapSection/index.tsx
index 48b493a3..8dedc669 100644
--- a/src/frontend/src/components/IndividualProject/MapSection/index.tsx
+++ b/src/frontend/src/components/IndividualProject/MapSection/index.tsx
@@ -154,10 +154,10 @@ export default function MapSection() {
                         paint: {
                           'fill-color': '#F3C5C5',
                           'fill-outline-color': '#484848',
-                          'fill-opacity': 0.9,
+                          'fill-opacity': 0.7,
                         },
                       }
-                    : taskStatusObj?.[`${task?.id}`] === 'TASK_COMPLETED'
+                    : taskStatusObj?.[`${task?.id}`] === 'UNLOCKED_TO_VALIDATE'
                       ? {
                           type: 'fill',
                           paint: {