Update mapper workflow (#2043)

* fix(main): update helper text * fix(exploreProjectCard): navigate to mapper if mobile device else project page * fix(projectDetailsV2): remove start mapping button * fix(environment): update action text * feat(assetModules): add sync icon * feat(projectDetailsV2): sync status button add to update entity status * fix(projectDetailsV2): remove qrcode component * fix(mapControlComponent): fix map control alignment
hotosm · Dec 31, 2024 · 1d6bf1d · 1d6bf1d
1 parent f28296e
commit 1d6bf1d
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 33 deletions.
diff --git a/src/frontend/src/components/ProjectDetailsV2/MapControlComponent.tsx b/src/frontend/src/components/ProjectDetailsV2/MapControlComponent.tsx
@@ -76,7 +76,7 @@ const MapControlComponent = ({ map, projectName, pmTileLayerUrl }: mapControlCom
   };
 
   return (
-    <div className="fmtm-absolute fmtm-top-4 sm:fmtm-top-[14.5rem] fmtm-right-3 fmtm-z-[99] fmtm-flex fmtm-flex-col fmtm-gap-4">
+    <div className="fmtm-absolute fmtm-top-4  fmtm-right-3 fmtm-z-[99] fmtm-flex fmtm-flex-col fmtm-gap-4">
       {btnList.map((btn) => (
         <Tooltip title={btn.title} placement="left" key={btn.title}>
           <div

diff --git a/src/frontend/src/components/home/ExploreProjectCard.tsx b/src/frontend/src/components/home/ExploreProjectCard.tsx
@@ -6,7 +6,6 @@ import { projectType } from '@/models/home/homeModel';
 import CoreModules from '@/shared/CoreModules';
 import AssetModules from '@/shared/AssetModules';
 import { useAppSelector } from '@/types/reduxTypes';
-import Button from '@/components/common/Button';
 
 //Explore Project Card Model to be rendered in home view
 export default function ExploreProjectCard({ data }: { data: projectType }) {
@@ -20,9 +19,14 @@ export default function ExploreProjectCard({ data }: { data: projectType }) {
       onClick={() => {
         const project: projectType = data;
         dispatch(HomeActions.SetSelectedProject(project));
-        navigate(`/project/${data.id}`);
+        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+        if (isMobile) {
+          window.location.href = `/mapnow/${data.id}`;
+        } else {
+          navigate(`/project/${data.id}`);
+        }
       }}
-      className="hover:fmtm-bg-red-50 hover:fmtm-shadow-xl fmtm-duration-500 fmtm-rounded-lg fmtm-border-[1px] fmtm-border-solid fmtm-border-[#706E6E] fmtm-bg-white fmtm-p-4 fmtm-max-h-fit"
+      className="hover:fmtm-bg-red-50 hover:fmtm-shadow-xl fmtm-duration-500 fmtm-rounded-lg fmtm-border-[1px] fmtm-border-solid fmtm-border-[#706E6E] fmtm-bg-white fmtm-p-4 fmtm-max-h-fit fmtm-cursor-pointer"
     >
       <div className="fmtm-flex fmtm-flex-col fmtm-justify-between fmtm-h-full">
         <div>
@@ -87,19 +91,6 @@ export default function ExploreProjectCard({ data }: { data: projectType }) {
           {/* Contribution Progress Bar */}
           <CustomizedProgressBar data={data} height={7} />
         </div>
-        {/* Start Mapping Button */}
-        <Button
-          btnText="Start Mapping"
-          btnType="secondary"
-          type="submit"
-          className="fmtm-font-bold !fmtm-rounded fmtm-text-sm !fmtm-py-2 !fmtm-w-full fmtm-flex fmtm-justify-center fmtm-uppercase fmtm-mt-4"
-          onClick={(e) => {
-            // Prevent card click
-            e.stopPropagation();
-            // Redirect without opening new tab
-            window.location.href = `/mapnow/${data.id}`;
-          }}
-        />{' '}
       </div>
     </div>
   );

diff --git a/src/frontend/src/environment.ts b/src/frontend/src/environment.ts
@@ -12,7 +12,7 @@ export default {
   tasksStatus: [
     {
       label: 'UNLOCKED_TO_MAP',
-      action: [{ key: 'Start Mapping', value: 'MAP', btnBG: 'red' }],
+      action: [{ key: 'Assign To Mapper', value: 'MAP', btnBG: 'red' }],
       btnBG: 'red',
     },
     {

diff --git a/src/frontend/src/shared/AssetModules.js b/src/frontend/src/shared/AssetModules.js
@@ -90,6 +90,7 @@ import {
   ChevronLeft as ChevronLeftIcon,
   RotateLeft as RotateLeftIcon,
   RotateRight as RotateRightIcon,
+  Sync as SyncIcon,
 } from '@mui/icons-material';
 import LockPng from '@/assets/images/lock.png';
 import RedLockPng from '@/assets/images/red-lock.png';
@@ -190,4 +191,5 @@ export default {
   ChevronLeftIcon,
   RotateLeftIcon,
   RotateRightIcon,
+  SyncIcon,
 };
diff --git a/src/frontend/src/views/ProjectDetailsV2.tsx b/src/frontend/src/views/ProjectDetailsV2.tsx
@@ -34,9 +34,7 @@ import { useAppSelector } from '@/types/reduxTypes';
 import Comments from '@/components/ProjectDetailsV2/Comments';
 import { Geolocation } from '@/utilfunctions/Geolocation';
 import Instructions from '@/components/ProjectDetailsV2/Instructions';
-import { CustomCheckbox } from '@/components/common/Checkbox';
 import useDocumentTitle from '@/utilfunctions/useDocumentTitle';
-import QrcodeComponent from '@/components/QrcodeComponent';
 
 const ProjectDetailsV2 = () => {
   useDocumentTitle('Project Details');
@@ -67,6 +65,7 @@ const ProjectDetailsV2 = () => {
   const taskModalStatus = CoreModules.useAppSelector((state) => state.project.taskModalStatus);
   const authDetails = CoreModules.useAppSelector((state) => state.login.authDetails);
   const entityOsmMap = useAppSelector((state) => state?.project?.entityOsmMap);
+  const entityOsmMapLoading = useAppSelector((state) => state?.project?.entityOsmMapLoading);
 
   useEffect(() => {
     if (state.projectInfo.name) {
@@ -247,8 +246,12 @@ const ProjectDetailsV2 = () => {
     }
   }, [taskModalStatus]);
 
-  useEffect(() => {
+  const getEntityStatusList = () => {
     dispatch(GetEntityStatusList(`${import.meta.env.VITE_API_URL}/projects/${projectId}/entities/statuses`));
+  };
+
+  useEffect(() => {
+    getEntityStatusList();
   }, []);
 
   return (
@@ -455,7 +458,7 @@ const ProjectDetailsV2 = () => {
                 popupId="locked-popup"
                 className="fmtm-w-[235px]"
               />
-              <div className="fmtm-absolute fmtm-bottom-20 sm:fmtm-bottom-3 fmtm-left-3 fmtm-z-50 fmtm-rounded-lg">
+              <div className="fmtm-absolute fmtm-bottom-20 md:fmtm-bottom-3 fmtm-left-3 fmtm-z-50">
                 <Button
                   btnText="BASEMAPS"
                   icon={<AssetModules.BoltIcon className="!fmtm-text-xl" />}
@@ -466,20 +469,20 @@ const ProjectDetailsV2 = () => {
                   className="!fmtm-text-sm !fmtm-pr-2 fmtm-bg-white"
                 />
               </div>
-              <div className="fmtm-absolute fmtm-bottom-20 sm:fmtm-bottom-5 fmtm-right-3 fmtm-z-50 fmtm-h-fit">
+              <div className="fmtm-absolute fmtm-bottom-20 md:fmtm-bottom-3 fmtm-right-3 fmtm-z-50">
                 <Button
-                  btnText="START MAPPING"
-                  icon={<AssetModules.LocationOnIcon className="!fmtm-text-xl" />}
+                  btnText="SYNC STATUS"
+                  icon={
+                    <AssetModules.SyncIcon className={`!fmtm-text-xl ${entityOsmMapLoading && 'fmtm-animate-spin'}`} />
+                  }
                   onClick={() => {
-                    window.location.href = `${window.location.origin}/mapnow/${projectId}`;
+                    if (entityOsmMapLoading) return;
+                    getEntityStatusList();
                   }}
-                  btnType="primary"
-                  className="!fmtm-text-sm !fmtm-pr-2"
+                  btnType="other"
+                  className={`!fmtm-text-sm !fmtm-pr-2 fmtm-bg-white ${entityOsmMapLoading && 'fmtm-cursor-not-allowed'}`}
                 />
               </div>
-              <div className="fmtm-absolute fmtm-right-0 fmtm-top-0 fmtm-z-50 fmtm-hidden sm:fmtm-block">
-                <QrcodeComponent />
-              </div>
               <MapControlComponent
                 map={map}
                 projectName={state?.projectInfo?.name || ''}

diff --git a/src/mapper/src/lib/components/map/main.svelte b/src/mapper/src/lib/components/map/main.svelte
@@ -464,8 +464,8 @@
 
 	<!-- Help text for user on first load -->
 	{#if projectSetupStep === projectSetupStepEnum['task_selection']}
-		<div class="absolute top-7 w-fit bg-[#F097334D] z-10 left-[50%] translate-x-[-50%] p-1">
-			<p class="uppercase font-barlow-medium text-base">please select a task / feature for mapping</p>
+		<div class="absolute top-7 bg-[#F097334D] min-w-[14rem] z-10 left-[50%] translate-x-[-50%] p-1">
+			<p class="uppercase font-barlow-medium text-base">click on a task to select a feature for mapping</p>
 		</div>
 	{/if}