Merge pull request #1240 from NSUWAL123/feat-individual-submission-page

Feat individual submission page
hotosm · Feb 21, 2024 · 535e720 · 535e720
2 parents 68937fd + 84f73f9
commit 535e720
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 19 deletions.
diff --git a/src/frontend/src/components/DialogTaskActions.jsx b/src/frontend/src/components/DialogTaskActions.jsx
@@ -129,7 +129,7 @@ export default function Dialog({ taskId, feature, map, view }) {
             btnType="primary"
             type="submit"
             className="fmtm-font-bold !fmtm-rounded fmtm-text-sm !fmtm-py-2 !fmtm-w-full fmtm-flex fmtm-justify-center"
-            onClick={() => navigate(`/project/${params.id}/tasks/${currentTaskId}`)}
+            onClick={() => navigate(`/project-submissions/${params.id}?tab=table&task_id=${taskId}`)}
           />
         </div>
       )}

diff --git a/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx b/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx
@@ -16,25 +16,32 @@ import Button from '@/components/common/Button';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/common/Dropdown';
 import { ConvertXMLToJOSM, getDownloadProjectSubmission, getDownloadProjectSubmissionJson } from '@/api/task';
 import { Modal } from '../common/Modal';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import filterParams from '@/utilfunctions/filterParams';
 
 type filterType = {
-  task_id: number | null;
-  submitted_by: string;
+  task_id: string | null;
+  submitted_by: string | null;
   review_state: string | null;
   submitted_date: string | null;
 };
 
 const SubmissionsTable = ({ toggleView }) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
   const initialFilterState = {
-    task_id: null,
-    submitted_by: '',
-    review_state: null,
-    submitted_date: null,
+    task_id: searchParams.get('task_id') ? searchParams?.get('task_id') : null,
+    submitted_by: searchParams.get('submitted_by'),
+    review_state: searchParams.get('review_state'),
+    submitted_date: searchParams.get('submitted_date'),
   };
   const [filter, setFilter] = useState<filterType>(initialFilterState);
+
   const { windowSize } = windowDimention();
   const dispatch = CoreModules.useAppDispatch();
   const params = CoreModules.useParams();
+  const navigate = useNavigate();
+
   const encodedId = params.projectId;
   const decodedId = environment.decode(encodedId);
   const submissionFormFields = CoreModules.useAppSelector((state) => state.submission.submissionFormFields);
@@ -50,7 +57,20 @@ const SubmissionsTable = ({ toggleView }) => {
   const downloadSubmissionLoading = CoreModules.useAppSelector((state) => state.task.downloadSubmissionLoading);
   const [numberOfFilters, setNumberOfFilters] = useState<number>(0);
   const [paginationPage, setPaginationPage] = useState<number>(1);
-  const [submittedBy, setSubmittedBy] = useState<string>('');
+  const [submittedBy, setSubmittedBy] = useState<string | null>(null);
+
+  const encodedTaskId = environment.encode(3468);
+
+  useEffect(() => {
+    let count = 0;
+    const filters = Object.keys(filter);
+    filters?.map((fltr) => {
+      if (filter[fltr]) {
+        count = count + 1;
+      }
+    });
+    setNumberOfFilters(count);
+  }, [filter]);
 
   useEffect(() => {
     let count = 0;
@@ -126,7 +146,9 @@ const SubmissionsTable = ({ toggleView }) => {
 
   useEffect(() => {
     const timeoutId = setTimeout(() => {
-      setFilter((prev) => ({ ...prev, submitted_by: submittedBy }));
+      if (submittedBy != null) {
+        setFilter((prev) => ({ ...prev, submitted_by: submittedBy }));
+      }
     }, 500);
     return () => clearTimeout(timeoutId);
   }, [submittedBy, 500]);
@@ -143,7 +165,8 @@ const SubmissionsTable = ({ toggleView }) => {
   };
 
   const clearFilters = () => {
-    setFilter(initialFilterState);
+    setSearchParams({ tab: 'table' });
+    setFilter({ task_id: null, submitted_by: null, review_state: null, submitted_date: null });
   };
 
   function getValueByPath(obj: any, path: string) {
@@ -196,6 +219,11 @@ const SubmissionsTable = ({ toggleView }) => {
     }
   };
 
+  useEffect(() => {
+    const filteredParams = filterParams(filter);
+    setSearchParams({ tab: 'table', ...filteredParams });
+  }, [filter]);
+
   return (
     <div className="">
       <Modal
@@ -243,7 +271,7 @@ const SubmissionsTable = ({ toggleView }) => {
                     value={filter?.task_id?.toString() || null}
                     valueKey="task_id"
                     label="task_id"
-                    onValueChange={(value) => value && setFilter((prev) => ({ ...prev, task_id: +value }))}
+                    onValueChange={(value) => value && setFilter((prev) => ({ ...prev, task_id: value.toString() }))}
                     className="fmtm-text-grey-700 fmtm-text-sm !fmtm-mb-0 fmtm-bg-white"
                   />
                 </div>
@@ -404,7 +432,12 @@ const SubmissionsTable = ({ toggleView }) => {
             rowClassName="updatedRow"
             dataFormat={(row) => (
               <div className="fmtm-w-[7rem] fmtm-overflow-hidden fmtm-truncate fmtm-text-center">
-                <AssetModules.VisibilityOutlinedIcon className="fmtm-text-[#545454]" />{' '}
+                <AssetModules.VisibilityOutlinedIcon
+                  className="fmtm-text-[#545454] hover:fmtm-text-primaryRed"
+                  onClick={() => {
+                    navigate(`/project/${encodedId}/tasks/${encodedTaskId}/submission/${row?.meta?.instanceID}`);
+                  }}
+                />{' '}
                 <span className="fmtm-text-primaryRed fmtm-border-[1px] fmtm-border-primaryRed fmtm-mx-1"></span>{' '}
                 <AssetModules.CheckOutlinedIcon className="fmtm-text-[#545454]" />{' '}
                 <span className="fmtm-text-primaryRed fmtm-border-[1px] fmtm-border-primaryRed fmtm-mx-1"></span>{' '}

diff --git a/src/frontend/src/components/ProjectSubmissions/TaskSubmissions.tsx b/src/frontend/src/components/ProjectSubmissions/TaskSubmissions.tsx
@@ -6,9 +6,11 @@ import AssetModules from '@/shared/AssetModules.js';
 import CoreModules from '@/shared/CoreModules.js';
 import { TaskCardSkeletonLoader } from '@/components/ProjectSubmissions/ProjectSubmissionsSkeletonLoader';
 import { taskInfoType } from '@/models/submission/submissionModel';
+import { useSearchParams } from 'react-router-dom';
 
 const TaskSubmissions = () => {
   const dispatch = CoreModules.useAppDispatch();
+  const [searchParams, setSearchParams] = useSearchParams();
   const taskInfo: taskInfoType[] = CoreModules.useAppSelector((state) => state.task.taskInfo);
   const taskLoading = CoreModules.useAppSelector((state) => state.task.taskLoading);
   const [searchedTaskId, setSearchedTaskId] = useState<string>('');
@@ -52,7 +54,11 @@ const TaskSubmissions = () => {
           </div>
         </div>
         <div className="fmtm-flex fmtm-flex-wrap fmtm-flex-row md:fmtm-flex-col lg:fmtm-flex-row fmtm-justify-between lg:fmtm-items-center fmtm-gap-2">
-          <Button btnText="View Submissions" btnType="primary" onClick={() => {}} />
+          <Button
+            btnText="View Submissions"
+            btnType="primary"
+            onClick={() => setSearchParams({ tab: 'table', task_id: task?.task_id })}
+          />
           <button
             className="fmtm-border-primaryRed fmtm-border-[2px] fmtm-flex fmtm-w-fit fmtm-px-2 fmtm-py-1 fmtm-rounded-md fmtm-items-center fmtm-gap-2 fmtm-bg-white hover:fmtm-bg-gray-100 fmtm-duration-150"
             onClick={() => zoomToTask(task?.task_id)}

diff --git a/src/frontend/src/utilfunctions/filterParams.ts b/src/frontend/src/utilfunctions/filterParams.ts
@@ -0,0 +1,11 @@
+function filterParams(params: {}): {} {
+  const filteredParams = {};
+  Object.keys(params).forEach((key: string) => {
+    if (params[key] !== null && params[key] !== '') {
+      filteredParams[key] = params[key];
+    }
+  });
+  return filteredParams;
+}
+
+export default filterParams;
diff --git a/src/frontend/src/views/ProjectSubmissions.tsx b/src/frontend/src/views/ProjectSubmissions.tsx
@@ -9,15 +9,16 @@ import { ProjectById } from '@/api/Project';
 import environment from '@/environment';
 import { fetchInfoTask } from '@/api/task';
 import { GetProjectDashboard } from '@/api/Project';
+import { useSearchParams } from 'react-router-dom';
 
 const ProjectSubmissions = () => {
   const dispatch = CoreModules.useAppDispatch();
   const params = CoreModules.useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
 
   const encodedId = params.projectId;
   const decodedId = environment.decode(encodedId);
 
-  const [viewBy, setViewBy] = useState<'infographics' | 'table'>('infographics');
   const state = CoreModules.useAppSelector((state) => state.project);
   const projectInfo = CoreModules.useAppSelector((state) => state.project.projectInfo);
 
@@ -51,24 +52,34 @@ const ProjectSubmissions = () => {
     dispatch(GetProjectDashboard(`${import.meta.env.VITE_API_URL}/projects/project_dashboard/${decodedId}`));
   }, []);
 
+  useEffect(() => {
+    if (!searchParams.get('tab')) {
+      setSearchParams({ tab: 'infographics' });
+    }
+  }, []);
+
   const ToggleView = () => (
     <div className="fmtm-flex fmtm-justify-end fmtm-gap-3">
       <div title="Infographics View">
         <AssetModules.GridViewIcon
           style={{ fontSize: '30px' }}
           className={`${
-            viewBy === 'infographics' ? 'fmtm-text-primaryRed' : 'fmtm-text-[#545454]'
+            searchParams.get('tab') === 'infographics' ? 'fmtm-text-primaryRed' : 'fmtm-text-[#545454]'
           } hover:fmtm-text-primaryRed fmtm-cursor-pointer`}
-          onClick={() => setViewBy('infographics')}
+          onClick={() => {
+            setSearchParams({ tab: 'infographics' });
+          }}
         />
       </div>
       <div title="Table View">
         <AssetModules.ListAltIcon
           style={{ fontSize: '30px' }}
           className={`${
-            viewBy === 'table' ? 'fmtm-text-primaryRed' : 'fmtm-text-[#545454]'
+            searchParams.get('tab') === 'table' ? 'fmtm-text-primaryRed' : 'fmtm-text-[#545454]'
           } hover:fmtm-text-primaryRed fmtm-cursor-pointer`}
-          onClick={() => setViewBy('table')}
+          onClick={() => {
+            setSearchParams({ tab: 'table' });
+          }}
         />
       </div>
     </div>
@@ -80,7 +91,7 @@ const ProjectSubmissions = () => {
         <ProjectInfo />
       </div>
       <div className="fmtm-w-full">
-        {viewBy === 'infographics' ? (
+        {searchParams.get('tab') === 'infographics' ? (
           <SubmissionsInfographics toggleView={<ToggleView />} />
         ) : (
           <SubmissionsTable toggleView={<ToggleView />} />