Prompt user if task area is not fully mapped on mark complete

.all-contributorsrc

@@ -3,9 +3,7 @@
   "projectOwner": "hotosm",
   "repoType": "github",
   "repoHost": "https://github.com",
-  "files": [
-    "README.md"
-  ],
+  "files": ["README.md"],
   "imageSize": 100,
   "badgeTemplate": "[![All Contributors](https://img.shields.io/badge/HOTOSM-Thanks%20for%20contributing!-red/github/all-contributors/hotosm/FMTM?color=red&style=flat-square)](#contributors)",
   "commit": true,
@@ -16,224 +14,154 @@
       "name": "Ivan Gayton",
       "avatar_url": "https://avatars.githubusercontent.com/u/5991943?v=4",
       "profile": "http://ivangayton.net",
-      "contributions": [
-        "projectManagement",
-        "code",
-        "review",
-        "ideas"
-      ]
+      "contributions": ["projectManagement", "code", "review", "ideas"]
     },
     {
       "login": "robsavoye",
       "name": "Rob Savoye",
       "avatar_url": "https://avatars.githubusercontent.com/u/71342768?v=4",
       "profile": "https://www.hotosm.org",
-      "contributions": [
-        "maintenance",
-        "mentoring",
-        "code",
-        "review",
-        "ideas"
-      ]
+      "contributions": ["maintenance", "mentoring", "code", "review", "ideas"]
     },
     {
       "login": "spwoodcock",
       "name": "Sam",
       "avatar_url": "https://avatars.githubusercontent.com/u/78538841?v=4",
       "profile": "https://github.com/spwoodcock",
-      "contributions": [
-        "code",
-        "review",
-        "infra",
-        "ideas",
-        "maintenance"
-      ]
+      "contributions": ["code", "review", "infra", "ideas", "maintenance"]
     },
     {
       "login": "varun2948",
       "name": "Deepak Pradhan (Varun)",
       "avatar_url": "https://avatars.githubusercontent.com/u/37866666?v=4",
       "profile": "https://github.com/varun2948",
-      "contributions": [
-        "code",
-        "ideas",
-        "maintenance"
-      ]
+      "contributions": ["code", "ideas", "maintenance"]
     },
     {
       "login": "nrjadkry",
       "name": "Niraj Adhikari",
       "avatar_url": "https://avatars.githubusercontent.com/u/41701707?v=4",
       "profile": "https://github.com/nrjadkry",
-      "contributions": [
-        "code",
-        "ideas",
-        "maintenance"
-      ]
+      "contributions": ["code", "ideas", "maintenance"]
     },
     {
       "login": "krtonga",
       "name": "krtonga",
       "avatar_url": "https://avatars.githubusercontent.com/u/7307817?v=4",
       "profile": "https://github.com/krtonga",
-      "contributions": [
-        "code",
-        "doc",
-        "tool",
-        "ideas"
-      ]
+      "contributions": ["code", "doc", "tool", "ideas"]
     },
     {
       "login": "petya-kangalova",
       "name": "Petya ",
       "avatar_url": "https://avatars.githubusercontent.com/u/98902727?v=4",
       "profile": "https://www.hotosm.org/people/petya-kangalova/",
-      "contributions": [
-        "doc",
-        "eventOrganizing",
-        "ideas"
-      ]
+      "contributions": ["doc", "eventOrganizing", "ideas"]
     },
     {
       "login": "Sujanadh",
       "name": "Sujan Adhikari",
       "avatar_url": "https://avatars.githubusercontent.com/u/109404840?v=4",
       "profile": "https://github.com/Sujanadh",
-      "contributions": [
-        "code",
-        "maintenance"
-      ]
+      "contributions": ["code", "maintenance"]
     },
     {
       "login": "Mudi-business",
       "name": "Mohamed Bakari Mohamed",
       "avatar_url": "https://avatars.githubusercontent.com/u/52991565?v=4",
       "profile": "http://zanrevenue.org",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "NSUWAL123",
       "name": "Nishit Suwal",
       "avatar_url": "https://avatars.githubusercontent.com/u/81785002?v=4",
       "profile": "https://github.com/NSUWAL123",
-      "contributions": [
-        "code",
-        "maintenance"
-      ]
+      "contributions": ["code", "maintenance"]
     },
     {
       "login": "biomassives",
       "name": "G. Willson",
       "avatar_url": "https://avatars.githubusercontent.com/u/4379874?v=4",
       "profile": "https://www.scdhub.org",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "JoltCode",
       "name": "JoltCode",
       "avatar_url": "https://avatars.githubusercontent.com/u/46378904?v=4",
       "profile": "https://github.com/JoltCode",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "neelimagoogly",
       "name": "Neelima Mohanty",
       "avatar_url": "https://avatars.githubusercontent.com/u/97789856?v=4",
       "profile": "https://github.com/neelimagoogly",
-      "contributions": [
-        "doc"
-      ]
+      "contributions": ["doc"]
     },
     {
       "login": "Ndacyayisenga-droid",
       "name": "Tayebwa Noah",
       "avatar_url": "https://avatars.githubusercontent.com/u/58124613?v=4",
       "profile": "https://github.com/Ndacyayisenga-droid",
-      "contributions": [
-        "doc"
-      ]
+      "contributions": ["doc"]
     },
     {
       "login": "mohammadareeb95",
       "name": "Mohammad Areeb",
       "avatar_url": "https://avatars.githubusercontent.com/u/77102111?v=4",
       "profile": "https://github.com/mohammadareeb95",
-      "contributions": [
-        "doc"
-      ]
+      "contributions": ["doc"]
     },
     {
       "login": "AugustHottie",
       "name": "AugustHottie",
       "avatar_url": "https://avatars.githubusercontent.com/u/96122635?v=4",
       "profile": "https://github.com/AugustHottie",
-      "contributions": [
-        "doc"
-      ]
+      "contributions": ["doc"]
     },
     {
       "login": "Balofire",
       "name": "Ahmeed Etti-Balogun",
       "avatar_url": "https://avatars.githubusercontent.com/u/102294666?v=4",
       "profile": "https://github.com/Balofire",
-      "contributions": [
-        "doc"
-      ]
+      "contributions": ["doc"]
     },
     {
       "login": "Roseford",
       "name": "Uju",
       "avatar_url": "https://avatars.githubusercontent.com/u/75838716?v=4",
       "profile": "https://github.com/Roseford",
-      "contributions": [
-        "doc"
-      ]
+      "contributions": ["doc"]
     },
     {
       "login": "cordovez",
       "name": "JC CorMan",
       "avatar_url": "https://avatars.githubusercontent.com/u/75356640?v=4",
       "profile": "https://www.el-cordovez.com",
-      "contributions": [
-        "doc"
-      ]
+      "contributions": ["doc"]
     },
     {
       "login": "Prajwalism",
       "name": "Prajwal Khadgi",
       "avatar_url": "https://avatars.githubusercontent.com/u/123072058?v=4",
       "profile": "https://github.com/Prajwalism",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     },
     {
       "login": "manjitapandey",
       "name": "Manjita Pandey",
       "avatar_url": "https://avatars.githubusercontent.com/u/97273021?v=4",
       "profile": "https://github.com/manjitapandey",
-      "contributions": [
-        "bug",
-        "doc",
-        "ideas"
-      ]
+      "contributions": ["bug", "doc", "ideas"]
     },
     {
       "login": "susmina94",
       "name": "Susmina_Manandhar",
       "avatar_url": "https://avatars.githubusercontent.com/u/108750444?v=4",
       "profile": "https://github.com/susmina94",
-      "contributions": [
-        "doc",
-        "ideas",
-        "bug"
-      ]
+      "contributions": ["doc", "ideas", "bug"]
     }
   ],
   "contributorsPerLine": 7,

src/frontend/src/components/DialogTaskActions.jsx

@@ -8,15 +8,19 @@ import { task_priority_str } from '@/types/enums';
 import Button from '@/components/common/Button';
 import { useNavigate } from 'react-router-dom';
 import { GetProjectTaskActivity } from '@/api/Project';
+import { Modal } from '@/components/common/Modal';
 
 export default function Dialog({ taskId, feature, map, view }) {
   const navigate = useNavigate();
   const projectInfo = CoreModules.useAppSelector((state) => state.project.projectInfo);
   const taskBoundaryData = CoreModules.useAppSelector((state) => state.project.projectTaskBoundries);
   const authDetails = CoreModules.useAppSelector((state) => state.login.authDetails);
   const loading = CoreModules.useAppSelector((state) => state.common.loading);
+  const taskInfo = CoreModules.useAppSelector((state) => state.task.taskInfo);
   const [list_of_task_status, set_list_of_task_status] = useState([]);
   const [task_status, set_task_status] = useState('READY');
+  const [currentTaskInfo, setCurrentTaskInfo] = useState();
+  const [toggleMappedConfirmationModal, setToggleMappedConfirmationModal] = useState(false);
 
   const geojsonStyles = MapStyles();
   const dispatch = CoreModules.useAppDispatch();
@@ -32,9 +36,19 @@ export default function Dialog({ taskId, feature, map, view }) {
   const projectTaskActivityList = CoreModules.useAppSelector((state) => state?.project?.projectTaskActivity);
 
   useEffect(() => {
-    dispatch(GetProjectTaskActivity(`${import.meta.env.VITE_API_URL}/tasks/${taskId}/history/?comment=false`));
+    if (taskId) {
+      dispatch(GetProjectTaskActivity(`${import.meta.env.VITE_API_URL}/tasks/${taskId}/history/?comment=false`));
+    }
   }, [taskId]);
 
+  useEffect(() => {
+    if (taskInfo?.length === 0) return;
+    const currentTaskInfo = taskInfo?.filter((task) => taskId === task?.task_id);
+    if (currentTaskInfo?.[0]) {
+      setCurrentTaskInfo(currentTaskInfo?.[0]);
+    }
+  }, [taskId, taskInfo]);
+
   useEffect(() => {
     if (projectIndex != -1) {
       const currentStatus = projectTaskActivityList.length > 0 ? projectTaskActivityList[0].status : 'READY';
@@ -94,6 +108,46 @@ export default function Dialog({ taskId, feature, map, view }) {
 
   return (
     <div className="fmtm-flex fmtm-flex-col">
+      <Modal
+        onOpenChange={(openStatus) => setToggleMappedConfirmationModal(openStatus)}
+        open={toggleMappedConfirmationModal}
+        description={
+          <div className="fmtm-flex fmtm-flex-col fmtm-gap-10">
+            <div>
+              <h5 className="fmtm-text-lg">
+                You have only mapped{' '}
+                <span className="fmtm-text-primaryRed fmtm-font-bold">
+                  {currentTaskInfo?.submission_count}/{currentTaskInfo?.feature_count}
+                </span>{' '}
+                features in the task area. <br /> Are you sure you wish to mark this task as complete?
+              </h5>
+            </div>
+            <div className="fmtm-flex fmtm-gap-4 fmtm-items-center fmtm-justify-end">
+              <Button
+                btnText="CONTINUE MAPPING"
+                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={() => {
+                  setToggleMappedConfirmationModal(false);
+                }}
+              />
+              <Button
+                btnId="MAPPED"
+                onClick={(e) => {
+                  handleOnClick(e);
+                  setToggleMappedConfirmationModal(false);
+                }}
+                disabled={loading}
+                btnText="MARK AS FULLY MAPPED"
+                btnType="other"
+                className={`fmtm-font-bold !fmtm-rounded fmtm-text-sm !fmtm-py-2 !fmtm-w-full fmtm-flex fmtm-justify-center !fmtm-bg-[#4C4C4C] hover:!fmtm-bg-[#5f5f5f] fmtm-text-white hover:!fmtm-text-white !fmtm-border-none`}
+              />
+            </div>
+          </div>
+        }
+        className=""
+      />
       {list_of_task_status?.length > 0 && (
         <div
           className={`fmtm-grid fmtm-border-t-[1px] fmtm-p-2 sm:fmtm-p-5 ${
@@ -106,7 +160,16 @@ export default function Dialog({ taskId, feature, map, view }) {
                 <Button
                   btnId={data.value}
                   key={index}
-                  onClick={handleOnClick}
+                  onClick={(e) => {
+                    if (
+                      data.key === 'Mark as fully mapped' &&
+                      currentTaskInfo?.submission_count < currentTaskInfo?.feature_count
+                    ) {
+                      setToggleMappedConfirmationModal(true);
+                    } else {
+                      handleOnClick(e);
+                    }
+                  }}
                   disabled={loading}
                   btnText={data.key.toUpperCase()}
                   btnType={data.btnBG === 'red' ? 'primary' : 'other'}

src/frontend/src/components/common/Modal.tsx

@@ -18,7 +18,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fmtm-fixed fmtm-inset-0 fmtm-z-50 fmtm-bg-black fmtm-opacity-80 fmtm-backdrop-blur-sm data-[state=open]:fmtm-animate-in data-[state=closed]:fmtm-animate-out data-[state=closed]:fmtm-fade-out-0 data-[state=open]:fmtm-fade-in-0',
+      'fmtm-fixed fmtm-inset-0 fmtm-bg-black fmtm-opacity-80 fmtm-backdrop-blur-sm data-[state=open]:fmtm-animate-in data-[state=closed]:fmtm-animate-out data-[state=closed]:fmtm-fade-out-0 data-[state=open]:fmtm-fade-in-0 fmtm-z-[99998]',
       className,
     )}
     {...props}
@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fmtm-fixed fmtm-left-[50%] fmtm-top-[50%] fmtm-z-50 fmtm-grid fmtm-w-full fmtm-max-w-lg fmtm-translate-x-[-50%] fmtm-translate-y-[-50%] fmtm-gap-4 fmtm-border fmtm-bg-white fmtm-p-6 fmtm-shadow-lg fmtm-duration-200 data-[state=open]:fmtm-animate-in data-[state=closed]:fmtm-animate-out data-[state=closed]:fmtm-fade-out-0 data-[state=open]:fmtm-fade-in-0 data-[state=closed]:fmtm-zoom-out-95 data-[state=open]:fmtm-zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:fmtm-slide-in-from-left-1/2 data-[state=open]:fmtm-slide-in-from-top-[48%] fmtm-sm:rounded-lg fmtm-md:w-full',
+        'fmtm-fixed fmtm-left-[50%] fmtm-top-[50%]  fmtm-grid fmtm-w-full fmtm-max-w-lg fmtm-translate-x-[-50%] fmtm-translate-y-[-50%] fmtm-gap-4 fmtm-border fmtm-bg-white fmtm-p-6 fmtm-shadow-lg fmtm-duration-200 data-[state=open]:fmtm-animate-in data-[state=closed]:fmtm-animate-out data-[state=closed]:fmtm-fade-out-0 data-[state=open]:fmtm-fade-in-0 data-[state=closed]:fmtm-zoom-out-95 data-[state=open]:fmtm-zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:fmtm-slide-in-from-left-1/2 data-[state=open]:fmtm-slide-in-from-top-[48%] fmtm-sm:rounded-lg fmtm-md:w-full fmtm-z-[99999]',
         className,
       )}
       {...props}