Merge pull request #240 from hotosm/feat/user-profile

Feat: Filter owner projects, show project name on task logs and other minor updates
hotosm · Sep 26, 2024 · 83919d4 · 83919d4
2 parents 644be84 + 93813fd
commit 83919d4
Show file tree

Hide file tree

Showing 12 changed files with 87 additions and 23 deletions.
diff --git a/src/frontend/src/api/projects.ts b/src/frontend/src/api/projects.ts
@@ -5,11 +5,12 @@ import { getTaskStates } from '@Services/project';
 import { getUserProfileInfo } from '@Services/common';
 
 export const useGetProjectsListQuery = (
+  projectsFilterByOwner: 'yes' | 'no',
   queryOptions?: Partial<UseQueryOptions>,
 ) => {
   return useQuery({
-    queryKey: ['projects-list'],
-    queryFn: getProjectsList,
+    queryKey: ['projects-list', projectsFilterByOwner],
+    queryFn: () => getProjectsList(projectsFilterByOwner === 'yes'),
     select: (res: any) => res.data,
     ...queryOptions,
   });

diff --git a/src/frontend/src/components/CreateProject/CreateprojectLayout/index.tsx b/src/frontend/src/components/CreateProject/CreateprojectLayout/index.tsx
@@ -164,7 +164,7 @@ const CreateprojectLayout = () => {
       dispatch(resetUploadedAndDrawnAreas());
     },
     onError: err => {
-      toast.error(err.message);
+      toast.error(err?.response?.data?.detail || err?.message || '');
     },
   });
 

diff --git a/src/frontend/src/components/Dashboard/RequestLogs/index.tsx b/src/frontend/src/components/Dashboard/RequestLogs/index.tsx
@@ -55,8 +55,9 @@ const RequestLogs = () => {
             className="naxatw-flex naxatw-h-fit naxatw-w-full naxatw-items-center naxatw-justify-between naxatw-rounded-xl naxatw-border naxatw-border-gray-300 naxatw-p-3"
           >
             <div>
-              The <strong>Task# {task.project_task_index}</strong> is requested
-              for Mapping
+              The <strong>Task# {task.project_task_index}</strong> from{' '}
+              <strong>{task?.project_name}</strong> project is requested for
+              Mapping.
             </div>
             <div className="naxatw-flex naxatw-w-[172px] naxatw-gap-3">
               <Button

diff --git a/src/frontend/src/components/Dashboard/TaskLogs/TaskLogsTable.tsx b/src/frontend/src/components/Dashboard/TaskLogs/TaskLogsTable.tsx
@@ -12,9 +12,12 @@ const TaskLogsTable = ({ data: taskList }: ITaskLogsTableProps) => {
       <table className="naxatw-w-full naxatw-overflow-hidden naxatw-rounded-lg">
         <thead>
           <tr className="naxatw-bg-red naxatw-text-left naxatw-font-normal naxatw-text-white">
-            <td className="naxatw-w-80 naxatw-border-r-2 naxatw-px-2 naxatw-py-1">
+            <td className="naxatw-w-20 naxatw-border-r-2 naxatw-px-2 naxatw-py-1">
               ID
             </td>
+            <td className="naxatw-min-w-30 naxatw-border-r-2 naxatw-px-2 naxatw-py-1">
+              Project Name
+            </td>
             <td className="naxatw-border-r-2 naxatw-px-2 naxatw-py-1">
               Total task area
             </td>
@@ -33,9 +36,10 @@ const TaskLogsTable = ({ data: taskList }: ITaskLogsTableProps) => {
         <tbody>
           {taskList?.map(task => (
             <tr key={task.task_id}>
-              <td className="naxatw-px-2 naxatw-py-1">
+              <td className="naxatw-line-clamp-1 naxatw-px-2 naxatw-py-1">
                 Task# {task?.project_task_index}
               </td>
+              <td className="naxatw-px-2 naxatw-py-1">{task?.project_name}</td>
               <td className="naxatw-px-2 naxatw-py-1">
                 {Number(task?.task_area)?.toFixed(3)}
               </td>

diff --git a/src/frontend/src/components/Projects/MapSection/VectorLayerWithCluster.tsx b/src/frontend/src/components/Projects/MapSection/VectorLayerWithCluster.tsx
@@ -103,6 +103,15 @@ export default function VectorLayerWithCluster({
         if (map.getLayer(sourceId)) {
           map.removeLayer(sourceId);
         }
+        if (map.getLayer('clusters')) {
+          map.removeLayer('clusters');
+        }
+        if (map.getLayer('unclustered-point')) {
+          map.removeLayer('unclustered-point');
+        }
+        if (map.getLayer('cluster-count')) {
+          map.removeLayer('cluster-count');
+        }
       }
     };
   }, [geojson, map, mapLoaded, sourceId, visibleOnMap]);

diff --git a/src/frontend/src/components/Projects/MapSection/index.tsx b/src/frontend/src/components/Projects/MapSection/index.tsx
@@ -5,6 +5,7 @@ import getBbox from '@turf/bbox';
 import centroid from '@turf/centroid';
 import { FeatureCollection } from 'geojson';
 import { useGetProjectsListQuery } from '@Api/projects';
+import { useTypedSelector } from '@Store/hooks';
 import { useMapLibreGLMap } from '@Components/common/MapLibreComponents';
 import AsyncPopup from '@Components/common/MapLibreComponents/AsyncPopup';
 import BaseLayerSwitcher from '@Components/common/MapLibreComponents/BaseLayerSwitcher';
@@ -13,6 +14,9 @@ import hasErrorBoundary from '@Utils/hasErrorBoundary';
 import VectorLayerWithCluster from './VectorLayerWithCluster';
 
 const ProjectsMapSection = () => {
+  const projectsFilterByOwner = useTypedSelector(
+    state => state.createproject.ProjectsFilterByOwner,
+  );
   const [projectProperties, setProjectProperties] = useState<
     Record<string, any>
   >({});
@@ -27,7 +31,7 @@ const ProjectsMapSection = () => {
     disableRotation: true,
   });
   const { data: projectsList, isLoading }: Record<string, any> =
-    useGetProjectsListQuery({
+    useGetProjectsListQuery(projectsFilterByOwner, {
       select: (data: any) => {
         // find all polygons centroid and set to geojson save to single geojson
         const combinedGeojson = data?.data?.reduce(
@@ -83,13 +87,15 @@ const ProjectsMapSection = () => {
     >
       <BaseLayerSwitcher />
 
-      <VectorLayerWithCluster
-        map={map}
-        visibleOnMap={!isLoading}
-        mapLoaded={isMapLoaded}
-        sourceId="clustered-projects"
-        geojson={projectsList}
-      />
+      {projectsList && (
+        <VectorLayerWithCluster
+          map={map}
+          visibleOnMap={!isLoading}
+          mapLoaded={isMapLoaded}
+          sourceId="clustered-projects"
+          geojson={projectsList}
+        />
+      )}
 
       <AsyncPopup
         map={map as Map}

diff --git a/src/frontend/src/components/Projects/ProjectsHeader/index.tsx b/src/frontend/src/components/Projects/ProjectsHeader/index.tsx
@@ -4,19 +4,42 @@ import { FlexRow } from '@Components/common/Layouts';
 import Switch from '@Components/RadixComponents/Switch';
 import { setCommonState } from '@Store/actions/common';
 import { Button } from '@Components/RadixComponents/Button';
+import { Select } from '@Components/common/FormUI';
+import { setCreateProjectState } from '@Store/actions/createproject';
 
 export default function ProjectsHeader() {
   const dispatch = useTypedDispatch();
   const navigate = useNavigate();
-
   const signedInAs = localStorage.getItem('signedInAs') || 'Project Creator';
-
   const showMap = useTypedSelector(state => state.common.showMap);
+  const projectsFilterByOwner = useTypedSelector(
+    state => state.createproject.ProjectsFilterByOwner,
+  );
 
   return (
     <FlexRow className="naxatw-items-center naxatw-justify-between naxatw-py-3">
       <h5 className="naxatw-font-bold">Projects</h5>
       <FlexRow gap={4} className="naxatw-items-center">
+        <div>
+          <Select
+            placeholder="Select"
+            options={[
+              {
+                label: 'All projects',
+                value: 'no',
+              },
+              { label: 'My Projects', value: 'yes' },
+            ]}
+            labelKey="label"
+            valueKey="value"
+            className="naxatw-w-[100px]"
+            selectedOption={projectsFilterByOwner}
+            onChange={value =>
+              dispatch(setCreateProjectState({ ProjectsFilterByOwner: value }))
+            }
+          />
+        </div>
+
         <FlexRow className="naxatw-items-center naxatw-gap-[10px]">
           <p className="naxatw-text-body-md">Show map</p>
           <Switch
@@ -26,6 +49,7 @@ export default function ProjectsHeader() {
             }}
           />
         </FlexRow>
+
         {signedInAs === 'Project Creator' && (
           <Button
             variant="secondary"

diff --git a/src/frontend/src/services/createproject.ts b/src/frontend/src/services/createproject.ts
@@ -1,7 +1,8 @@
 /* eslint-disable import/prefer-default-export */
 import { authenticated, api } from '.';
 
-export const getProjectsList = () => authenticated(api).get('/projects/');
+export const getProjectsList = (filterByOwner: boolean) =>
+  authenticated(api).get(`/projects/?filter_by_owner=${filterByOwner}`);
 
 export const getProjectDetail = (id: string) =>
   authenticated(api).get(`/projects/${id}`);

diff --git a/src/frontend/src/store/slices/createproject.ts b/src/frontend/src/store/slices/createproject.ts
@@ -23,6 +23,7 @@ export interface CreateProjectState {
   capturedProjectMap: boolean;
   projectMapImage: any;
   imageMergeType: string;
+  ProjectsFilterByOwner: 'yes' | 'no';
 }
 
 const initialState: CreateProjectState = {
@@ -45,6 +46,7 @@ const initialState: CreateProjectState = {
   capturedProjectMap: true,
   projectMapImage: null,
   imageMergeType: 'overlap',
+  ProjectsFilterByOwner: 'no',
 };
 
 const setCreateProjectState: CaseReducer<

diff --git a/src/frontend/src/views/Dashboard/index.tsx b/src/frontend/src/views/Dashboard/index.tsx
@@ -46,7 +46,7 @@ const Dashboard = () => {
     });
 
   return (
-    <section className="naxatw-h-screen-nav naxatw-bg-grey-50 naxatw-px-16 naxatw-pt-8">
+    <section className="naxatw-h-screen-nav naxatw-bg-grey-50 naxatw-px-3 naxatw-pt-8 md:naxatw-px-16">
       <FlexRow className="naxatw-mb-4 naxatw-py-3">
         <h5 className="naxatw-font-bold">Profile</h5>
       </FlexRow>

diff --git a/src/frontend/src/views/IndividualProject/index.tsx b/src/frontend/src/views/IndividualProject/index.tsx
@@ -86,7 +86,7 @@ const IndividualProject = () => {
         {/* <----------- temporary breadcrumb -----------> */}
       </div>
       <div className="naxatw-flex naxatw-flex-col naxatw-gap-6 md:naxatw-flex-row">
-        <div className="naxatw-order-2 naxatw-w-full">
+        <div className="naxatw-order-2 naxatw-w-full naxatw-max-w-[27rem]">
           <Tab
             orientation="row"
             className="naxatw-bg-transparent hover:naxatw-border-b-2 hover:naxatw-border-red"

diff --git a/src/frontend/src/views/Projects/index.tsx b/src/frontend/src/views/Projects/index.tsx
@@ -9,11 +9,21 @@ import ProjectCardSkeleton from '@Components/Projects/ProjectCardSkeleton';
 import { useEffect } from 'react';
 import { getLocalStorageValue } from '@Utils/getLocalStorageValue';
 import hasErrorBoundary from '@Utils/hasErrorBoundary';
+import { setCreateProjectState } from '@Store/actions/createproject';
+import { useDispatch } from 'react-redux';
 
 const Projects = () => {
+  const dispatch = useDispatch();
   const showMap = useTypedSelector(state => state.common.showMap);
+  const projectsFilterByOwner = useTypedSelector(
+    state => state.createproject.ProjectsFilterByOwner,
+  );
+
   // fetch api for projectsList
-  const { data: projectsList, isLoading } = useGetProjectsListQuery();
+  const { data: projectsList, isLoading } = useGetProjectsListQuery(
+    projectsFilterByOwner,
+  );
+
   const { data: userDetails } = useGetUserDetailsQuery();
   const localStorageUserDetails = getLocalStorageValue('userprofile');
 
@@ -23,8 +33,14 @@ const Projects = () => {
     localStorage.setItem('userprofile', userDetailsString as string);
   }, [userDetails, localStorageUserDetails]);
 
+  useEffect(() => {
+    return () => {
+      dispatch(setCreateProjectState({ ProjectsFilterByOwner: 'no' }));
+    };
+  }, [dispatch]);
+
   return (
-    <section className="naxatw-px-16 naxatw-pt-2">
+    <section className="naxatw-px-3 naxatw-pt-2 lg:naxatw-px-16">
       <ProjectsHeader />
       <div className="naxatw-grid naxatw-gap-2 md:naxatw-flex md:naxatw-h-[calc(100vh-8.5rem)]">
         <div
@@ -52,7 +68,7 @@ const Projects = () => {
           )}
         </div>
         {showMap && (
-          <div className="naxatw-h-full naxatw-w-full naxatw-py-2 md:naxatw-h-full md:naxatw-w-1/2">
+          <div className="naxatw-h-[70vh] naxatw-w-full naxatw-py-2 md:naxatw-h-full md:naxatw-w-1/2">
             <ProjectsMapSection />
           </div>
         )}