Merge pull request #308 from hotosm/feat/manual-popup-fire

Feat: fire popup manually
hotosm · Oct 27, 2024 · df54740 · df54740
2 parents abb334e + 57d5633
commit df54740
Show file tree

Hide file tree

Showing 12 changed files with 149 additions and 31 deletions.
diff --git a/src/frontend/src/components/IndividualProject/Contributions/TableSection/index.tsx b/src/frontend/src/components/IndividualProject/Contributions/TableSection/index.tsx
@@ -56,7 +56,16 @@ const contributionsDataColumns = [
   },
 ];
 
-export default function TableSection({ isFetching }: { isFetching: boolean }) {
+interface ITableSectionProps {
+  isFetching: boolean;
+  // eslint-disable-next-line no-unused-vars
+  handleTableRowClick: (rowData: any) => {};
+}
+
+export default function TableSection({
+  isFetching,
+  handleTableRowClick,
+}: ITableSectionProps) {
   const { id } = useParams();
   const tasksData = useTypedSelector(state => state.project.tasksData);
 
@@ -82,6 +91,7 @@ export default function TableSection({ isFetching }: { isFetching: boolean }) {
           task_state: curr?.state,
           assets_url: selectedAssetsDetails?.assets_url,
           image_count: selectedAssetsDetails?.image_count,
+          task_id: curr?.id,
         },
       ];
     }, []);
@@ -96,6 +106,7 @@ export default function TableSection({ isFetching }: { isFetching: boolean }) {
       data={taskDataForTable as Record<string, any>[]}
       withPagination={false}
       loading={isFetching || isUrlFetching}
+      handleTableRowClick={handleTableRowClick}
     />
   );
 }
diff --git a/src/frontend/src/components/IndividualProject/Contributions/index.tsx b/src/frontend/src/components/IndividualProject/Contributions/index.tsx
@@ -1,10 +1,22 @@
 import TableSection from './TableSection';
 
-export default function Contributions({ isFetching }: { isFetching: boolean }) {
+interface IContributionsProps {
+  isFetching: boolean;
+  // eslint-disable-next-line no-unused-vars
+  handleTableRowClick: (rowData: any) => {};
+}
+
+export default function Contributions({
+  isFetching,
+  handleTableRowClick,
+}: IContributionsProps) {
   return (
     <section className="naxatw-py-5">
       <div className="mt-2">
-        <TableSection isFetching={isFetching} />
+        <TableSection
+          isFetching={isFetching}
+          handleTableRowClick={handleTableRowClick}
+        />
       </div>
     </section>
   );

diff --git a/src/frontend/src/components/IndividualProject/MapSection/index.tsx b/src/frontend/src/components/IndividualProject/MapSection/index.tsx
@@ -1,15 +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,
-  useGetUserDetailsQuery,
-} from '@Api/projects';
+import { useGetTaskStatesQuery, useGetUserDetailsQuery } from '@Api/projects';
 import lock from '@Assets/images/lock.png';
 import BaseLayerSwitcherUI from '@Components/common/BaseLayerSwitcher';
 import { useMapLibreGLMap } from '@Components/common/MapLibreComponents';
@@ -53,6 +48,9 @@ const MapSection = ({ projectData }: { projectData: Record<string, any> }) => {
   );
   const tasksData = useTypedSelector(state => state.project.tasksData);
   const projectArea = useTypedSelector(state => state.project.projectArea);
+  const taskClickedOnTable = useTypedSelector(
+    state => state.project.taskClickedOnTable,
+  );
 
   const { data: taskStates } = useGetTaskStatesQuery(id as string, {
     enabled: !!tasksData,
@@ -305,6 +303,11 @@ const MapSection = ({ projectData }: { projectData: Record<string, any> }) => {
           feature?.source?.includes('tasks-layer')
         }
         fetchPopupData={(properties: Record<string, any>) => {
+          dispatch(
+            setProjectState({
+              taskClickedOnTable: null,
+            }),
+          );
           dispatch(setProjectState({ selectedTaskId: properties.id }));
           setLockedUser({
             id: properties?.locked_user_id || userDetails?.id || '',
@@ -338,6 +341,16 @@ const MapSection = ({ projectData }: { projectData: Record<string, any> }) => {
         }
         secondaryButtonText="Unlock Task"
         handleSecondaryBtnClick={() => handleTaskUnLockClick()}
+        // trigger from popup outside
+        openPopupFor={taskClickedOnTable}
+        popupCoordinate={taskClickedOnTable?.centroidCoordinates}
+        onClose={() =>
+          dispatch(
+            setProjectState({
+              taskClickedOnTable: null,
+            }),
+          )
+        }
       />
       <Legend />
     </MapContainer>

diff --git a/src/frontend/src/components/IndividualProject/Tasks/TableSection/index.tsx b/src/frontend/src/components/IndividualProject/Tasks/TableSection/index.tsx
@@ -1,27 +1,28 @@
+import { useMemo } from 'react';
 import DataTable from '@Components/common/DataTable';
 import { useTypedSelector } from '@Store/hooks';
-import { useMemo } from 'react';
 
 const tasksDataColumns = [
   {
     header: 'ID',
     accessorKey: 'id',
   },
-  // {
-  //   header: 'Flight Time',
-  //   accessorKey: 'flight_time',
-  // },
   {
     header: 'Task Area in km²',
     accessorKey: 'task_area',
   },
-  // {
-  //   header: 'Status',
-  //   accessorKey: 'status',
-  // },
 ];
 
-export default function TableSection({ isFetching }: { isFetching: boolean }) {
+interface ITableSectionProps {
+  isFetching: boolean;
+  // eslint-disable-next-line no-unused-vars
+  handleTableRowClick: (rowData: any) => {};
+}
+
+export default function TableSection({
+  isFetching,
+  handleTableRowClick,
+}: ITableSectionProps) {
   const tasksData = useTypedSelector(state => state.project.tasksData);
 
   const taskDataForTable = useMemo(() => {
@@ -34,6 +35,7 @@ export default function TableSection({ isFetching }: { isFetching: boolean }) {
           id: `Task# ${curr?.project_task_index}`,
           flight_time: curr?.flight_time || '-',
           task_area: Number(curr?.task_area)?.toFixed(3),
+          task_id: curr?.id,
           // status: curr?.state,
         },
       ];
@@ -49,6 +51,7 @@ export default function TableSection({ isFetching }: { isFetching: boolean }) {
       data={taskDataForTable as Record<string, any>[]}
       withPagination={false}
       loading={isFetching}
+      handleTableRowClick={handleTableRowClick}
     />
   );
 }
diff --git a/src/frontend/src/components/IndividualProject/Tasks/index.tsx b/src/frontend/src/components/IndividualProject/Tasks/index.tsx
@@ -3,7 +3,16 @@
 // import { FlexRow } from '@Components/common/Layouts';
 import TableSection from './TableSection';
 
-export default function Tasks({ isFetching }: { isFetching: boolean }) {
+interface ITasksProps {
+  isFetching: boolean;
+  // eslint-disable-next-line no-unused-vars
+  handleTableRowClick: (rowData: any) => {};
+}
+
+export default function Tasks({
+  isFetching,
+  handleTableRowClick,
+}: ITasksProps) {
   return (
     <section className="naxatw-py-5">
       {/* <FlexRow className="naxatw-w-full naxatw-justify-between">
@@ -24,7 +33,10 @@ export default function Tasks({ isFetching }: { isFetching: boolean }) {
         </div>
       </FlexRow> */}
       <div className="naxatw-mt-2">
-        <TableSection isFetching={isFetching} />
+        <TableSection
+          isFetching={isFetching}
+          handleTableRowClick={handleTableRowClick}
+        />
       </div>
     </section>
   );

diff --git a/src/frontend/src/components/common/DataTable/index.tsx b/src/frontend/src/components/common/DataTable/index.tsx
@@ -50,6 +50,7 @@ interface DataTableProps {
   useQueryOptions?: Record<string, any>;
   data?: Record<string, any>[];
   loading?: boolean;
+  handleTableRowClick?: any;
 }
 
 const defaultPaginationState = {
@@ -73,6 +74,7 @@ export default function DataTable({
   useQueryOptions,
   data,
   loading,
+  handleTableRowClick,
 }: DataTableProps) {
   const [sorting, setSorting] = useState<ColumnSort[]>([]);
   const debouncedValue = useDebounceListener(searchInput || '', 800);
@@ -233,6 +235,10 @@ export default function DataTable({
               <TableRow
                 key={row.id}
                 data-state={row.getIsSelected() && 'selected'}
+                onClick={() => {
+                  handleTableRowClick?.(row?.original);
+                }}
+                className={`${handleTableRowClick ? 'naxatw-cursor-pointer' : ''} `}
               >
                 {row.getVisibleCells().map(cell => (
                   <TableCell key={cell.id}>

diff --git a/src/frontend/src/components/common/MapLibreComponents/AsyncPopup/index.tsx b/src/frontend/src/components/common/MapLibreComponents/AsyncPopup/index.tsx
@@ -30,11 +30,14 @@ export default function AsyncPopup({
   secondaryButtonText = '',
   handleSecondaryBtnClick,
   showPopup = (_clickedFeature: Record<string, any>) => true,
+  openPopupFor,
+  popupCoordinate,
 }: IAsyncPopup) {
   const [properties, setProperties] = useState<Record<string, any> | null>(
     null,
   );
   const popupRef = useRef(null);
+  const [coordinates, setCoordinates] = useState<any>(null);
   const [popupHTML, setPopupHTML] = useState<string>('');
 
   useEffect(() => {
@@ -61,7 +64,8 @@ export default function AsyncPopup({
             },
       );
 
-      popup.setLngLat(e.lngLat);
+      setCoordinates(e.lngLat);
+      // popup.setLngLat(e.lngLat);
     }
     map.on('click', displayPopup);
   }, [map, getCoordOnProperties, showPopup]);
@@ -72,18 +76,26 @@ export default function AsyncPopup({
   }, [map, properties]); // eslint-disable-line
 
   useEffect(() => {
-    if (!map || !properties || !popupUI || !popupRef.current) return;
+    if (!map || !properties || !popupUI || !popupRef.current || !coordinates)
+      return;
     const htmlString = renderToString(popupUI(properties));
     popup.setDOMContent(popupRef.current).addTo(map);
     setPopupHTML(htmlString);
-  }, [map, popupUI, properties]);
+    popup.setLngLat(coordinates);
+  }, [map, popupUI, properties, coordinates]);
 
   const onPopupClose = () => {
     popup.remove();
     onClose?.();
     setProperties(null);
   };
 
+  useEffect(() => {
+    if (!map || !openPopupFor || !popupCoordinate) return;
+    setProperties(openPopupFor);
+    setCoordinates(popupCoordinate);
+  }, [map, openPopupFor, popupCoordinate]);
+
   if (!properties) return <div />;
 
   return (

diff --git a/src/frontend/src/components/common/MapLibreComponents/types/index.ts b/src/frontend/src/components/common/MapLibreComponents/types/index.ts
@@ -86,6 +86,8 @@ export interface IAsyncPopup {
   hasSecondaryButton?: boolean;
   secondaryButtonText?: string;
   handleSecondaryBtnClick?: (properties: Record<string, any>) => void;
+  openPopupFor?: Record<string, any> | null;
+  popupCoordinate?: number[];
 }
 
 export type DrawModeTypes = DrawMode | null | undefined;

diff --git a/src/frontend/src/components/common/UserProfile/index.tsx b/src/frontend/src/components/common/UserProfile/index.tsx
@@ -7,17 +7,27 @@ import { useNavigate } from 'react-router-dom';
 import UserAvatar from '@Components/common/UserAvatar';
 import { toast } from 'react-toastify';
 import { getLocalStorageValue } from '@Utils/getLocalStorageValue';
+import { useGetUserDetailsQuery } from '@Api/projects';
 
 export default function UserProfile() {
   const [toggle, setToggle] = useState(false);
   const navigate = useNavigate();
   const userProfile = getLocalStorageValue('userprofile');
   const role = localStorage.getItem('signedInAs');
 
+  const { data: userDetails }: Record<string, any> = useGetUserDetailsQuery({
+    enabled: !!(userProfile?.role && role),
+  });
+
   useEffect(() => {
-    if (!userProfile || userProfile?.role?.includes(role)) return;
+    if (
+      !userProfile ||
+      userProfile?.role?.includes(role) ||
+      userDetails?.role?.includes(role)
+    )
+      return;
     navigate('/complete-profile');
-  }, [userProfile, role, navigate]);
+  }, [userProfile, role, navigate, userDetails]);
 
   const settingOptions = [
     {

diff --git a/src/frontend/src/store/slices/project.ts b/src/frontend/src/store/slices/project.ts
@@ -7,13 +7,15 @@ export interface ProjectState {
   tasksData: Record<string, any>[] | null;
   projectArea: Record<string, any> | null;
   selectedTaskId: string;
+  taskClickedOnTable: Record<string, any> | null;
 }
 
 const initialState: ProjectState = {
   individualProjectActiveTab: 'tasks',
   tasksData: null,
   projectArea: null,
   selectedTaskId: '',
+  taskClickedOnTable: null,
 };
 
 const setProjectState: CaseReducer<