fix: remove add org btn, redirect for submissions page (#1332)

* fix taskSectionPopup: redirect to submissionsPage on btn file btn click * fix createNewProject: remove organization add button besides organization list * fix submissionDetail: nav link route add to submission instance page * fix projectModel: remove organisation from types
hotosm · Mar 8, 2024 · 9eb57a3 · 9eb57a3
1 parent 3b4cc1c
commit 9eb57a3
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 20 deletions.
diff --git a/src/frontend/src/components/ProjectDetailsV2/TaskSectionPopup.tsx b/src/frontend/src/components/ProjectDetailsV2/TaskSectionPopup.tsx
@@ -5,6 +5,7 @@ import { ProjectActions } from '@/store/slices/ProjectSlice';
 import environment from '@/environment';
 import { ProjectFilesById } from '@/api/Files';
 import QrcodeComponent from '@/components/QrcodeComponent';
+import { useNavigate } from 'react-router-dom';
 
 type TaskSectionPopupPropType = {
   taskId: number | null;
@@ -14,6 +15,7 @@ type TaskSectionPopupPropType = {
 
 const TaskSectionPopup = ({ taskId, body, feature }: TaskSectionPopupPropType) => {
   const dispatch = CoreModules.useAppDispatch();
+  const navigate = useNavigate();
   const [task_status, set_task_status] = useState('READY');
   const taskModalStatus = CoreModules.useAppSelector((state) => state.project.taskModalStatus);
   const params = CoreModules.useParams();
@@ -69,12 +71,13 @@ const TaskSectionPopup = ({ taskId, body, feature }: TaskSectionPopupPropType) =
           className="hover:fmtm-text-primaryRed"
           onClick={() => {
             dispatch(ProjectActions.ToggleGenerateMbTilesModalStatus(true));
+            dispatch(ProjectActions.ToggleTaskModalStatus(false));
           }}
         />
         <AssetModules.DescriptionOutlinedIcon
           style={{ width: '20px' }}
           className="hover:fmtm-text-primaryRed"
-          onClick={() => {}}
+          onClick={() => navigate(`/project-submissions/${params.id}?tab=table&task_id=${taskId}`)}
         />
         <AssetModules.CloseIcon
           style={{ width: '20px' }}

diff --git a/src/frontend/src/components/ProjectSubmissions/ProjectInfo.tsx b/src/frontend/src/components/ProjectSubmissions/ProjectInfo.tsx
@@ -48,18 +48,22 @@ const ProjectInfo = () => {
 
   return (
     <div className="fmtm-w-full sm:fmtm-ml-2 fmtm-border-b-[1px] fmtm-border-gray-300 fmtm-pb-10">
-      <div className="fmtm-pb-4">
-        <p className="fmtm-text-[#706E6E] fmtm-text-base">
-          <span
-            className="hover:fmtm-text-primaryRed fmtm-cursor-pointer fmtm-duration-200"
-            onClick={() => navigate(`/project_details/${encodedId}`)}
-          >
-            {projectInfo?.title}{' '}
-          </span>
-          <span> &gt; </span>
-          <span className="fmtm-text-black">Dashboard</span>
-        </p>
-      </div>
+      {projectDashboardLoading ? (
+        <CoreModules.Skeleton style={{ width: '150px' }} className="fmtm-mb-1" />
+      ) : (
+        <div className="fmtm-pb-4">
+          <p className="fmtm-text-[#706E6E] fmtm-text-base">
+            <span
+              className="hover:fmtm-text-primaryRed fmtm-cursor-pointer fmtm-duration-200"
+              onClick={() => navigate(`/project_details/${encodedId}`)}
+            >
+              {projectInfo?.title}{' '}
+            </span>
+            <span> &gt; </span>
+            <span className="fmtm-text-black">Dashboard</span>
+          </p>
+        </div>
+      )}
       <div className=" fmtm-flex fmtm-flex-col xl:fmtm-flex-row fmtm-w-full sm:fmtm-items-center fmtm-gap-10 fmtm-mt-3">
         {projectDashboardLoading ? (
           <CoreModules.Skeleton className="!fmtm-w-full sm:!fmtm-w-[30rem] 2xl:!fmtm-w-[34rem] !fmtm-h-[8rem] !fmtm-rounded-xl" />

diff --git a/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx b/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx
@@ -9,8 +9,6 @@ import useForm from '@/hooks/useForm';
 import CreateProjectValidation from '@/components/createnewproject/validation/CreateProjectValidation';
 import Button from '@/components/common/Button';
 import { CommonActions } from '@/store/slices/CommonSlice';
-import AssetModules from '@/shared/AssetModules.js';
-import { createPopup } from '@/utilfunctions/createPopup';
 import { CustomSelect } from '@/components/common/Select';
 import { OrganisationService } from '@/api/CreateProjectService';
 import { CustomCheckbox } from '@/components/common/Checkbox';
@@ -182,10 +180,6 @@ const ProjectDetailsForm = ({ flag }) => {
                   setSelectedOrganisation(value);
                 }}
               />
-              <AssetModules.AddIcon
-                className="fmtm-bg-red-600 fmtm-text-white fmtm-rounded-full fmtm-mb-[0.15rem] hover:fmtm-bg-red-700 hover:fmtm-cursor-pointer fmtm-ml-5 fmtm-mt-9"
-                onClick={() => createPopup('Create Organization', 'createOrganisation?popup=true')}
-              />
             </div>
             {errors.organisation_id && (
               <p className="fmtm-form-error fmtm-text-red-600 fmtm-text-sm fmtm-py-1">{errors.organisation_id}</p>

diff --git a/src/frontend/src/models/project/projectModel.ts b/src/frontend/src/models/project/projectModel.ts
@@ -79,7 +79,6 @@ export type projectDashboardDetailTypes = {
   total_submission: number | null;
   total_contributors: number | null;
   last_active: string;
-  organisation: string;
 };
 
 export type projectTaskBoundriesType = {

diff --git a/src/frontend/src/views/SubmissionDetails.tsx b/src/frontend/src/views/SubmissionDetails.tsx
@@ -8,10 +8,12 @@ import Button from '@/components/common/Button';
 import { SubmissionActions } from '@/store/slices/SubmissionSlice';
 import UpdateReviewStatusModal from '@/components/ProjectSubmissions/UpdateReviewStatusModal';
 import { useAppSelector } from '@/types/reduxTypes';
+import { useNavigate } from 'react-router-dom';
 
 const SubmissionDetails = () => {
   const dispatch = CoreModules.useAppDispatch();
   const params = CoreModules.useParams();
+  const navigate = useNavigate();
   const encodedProjectId = params.projectId;
   const decodedProjectId = environment.decode(encodedProjectId);
   const taskId = params.taskId;
@@ -114,6 +116,29 @@ const SubmissionDetails = () => {
   return (
     <div className="fmtm-bg-gray-100 fmtm-box-border fmtm-border-[1px] fmtm-border-t-white fmtm-border-t-[0px] fmtm-px-[1.5rem] md:fmtm-px-[3.5rem] fmtm-py-[1.5rem] md:fmtm-py-[2rem]">
       <UpdateReviewStatusModal />
+      {projectDashboardLoading ? (
+        <CoreModules.Skeleton style={{ width: '250px' }} className="fmtm-mb-1" />
+      ) : (
+        <div className="fmtm-pb-4">
+          <p className="fmtm-text-[#706E6E] fmtm-text-base">
+            <span
+              className="hover:fmtm-text-primaryRed fmtm-cursor-pointer fmtm-duration-200"
+              onClick={() => navigate(`/project_details/${encodedProjectId}`)}
+            >
+              {projectDashboardDetail?.project_name_prefix}
+            </span>
+            <span> &gt; </span>
+            <span
+              className="hover:fmtm-text-primaryRed fmtm-cursor-pointer fmtm-duration-200"
+              onClick={() => navigate(`/project-submissions/${encodedProjectId}?tab=table`)}
+            >
+              Dashboard
+            </span>
+            <span> &gt; </span>
+            <span className="fmtm-text-black">Submissions</span>
+          </p>
+        </div>
+      )}
       <div className="fmtm-flex fmtm-flex-col xl:fmtm-flex-row">
         <div>
           {projectDashboardLoading ? (