From 553617f7f4c1faa807a67386ab548be1e7735b67 Mon Sep 17 00:00:00 2001
From: Nishit Suwal <81785002+NSUWAL123@users.noreply.github.com>
Date: Thu, 18 Jul 2024 13:39:20 +0545
Subject: [PATCH] feat(frontend): add user to task popup (#1670)

* fix(taskSelectionPopup): task locked username add if task is lockedForMapping

* fix(dialogTaskActions): popup border UI fix
---
 .../src/components/DialogTaskActions.tsx      | 61 +++++++++----------
 .../ProjectDetailsV2/TaskSelectionPopup.tsx   |  3 +
 2 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/src/frontend/src/components/DialogTaskActions.tsx b/src/frontend/src/components/DialogTaskActions.tsx
index 8d44c6f016..cd5288c36c 100755
--- a/src/frontend/src/components/DialogTaskActions.tsx
+++ b/src/frontend/src/components/DialogTaskActions.tsx
@@ -161,42 +161,41 @@ export default function Dialog({ taskId, feature }: dialogPropType) {
         }
         className=""
       />
-      {list_of_task_status?.length > 0 && (
+      {list_of_task_status?.length > 0 && checkIfTaskAssignedOrNot && (
         <div
           className={`fmtm-grid fmtm-border-t-[1px] fmtm-p-2 sm:fmtm-p-5 ${
             list_of_task_status?.length === 1 ? 'fmtm-grid-cols-1' : 'fmtm-grid-cols-2'
           }`}
         >
-          {checkIfTaskAssignedOrNot &&
-            list_of_task_status?.map((data, index) => {
-              return list_of_task_status?.length != 0 ? (
-                <Button
-                  btnId={data.value}
-                  key={index}
-                  onClick={(e) => {
-                    if (
-                      data.key === 'Mark as fully mapped' &&
-                      currentTaskInfo &&
-                      currentTaskInfo?.submission_count < currentTaskInfo?.feature_count
-                    ) {
-                      setToggleMappedConfirmationModal(true);
-                    } else {
-                      handleOnClick(e);
-                    }
-                  }}
-                  disabled={loading}
-                  btnText={data.key.toUpperCase()}
-                  btnType={data.btnBG === 'red' ? 'primary' : 'other'}
-                  className={`fmtm-font-bold !fmtm-rounded fmtm-text-sm !fmtm-py-2 !fmtm-w-full fmtm-flex fmtm-justify-center ${
-                    data.btnBG === 'gray'
-                      ? '!fmtm-bg-[#4C4C4C] hover:!fmtm-bg-[#5f5f5f] fmtm-text-white hover:!fmtm-text-white !fmtm-border-none'
-                      : data.btnBG === 'transparent'
-                        ? '!fmtm-bg-transparent !fmtm-text-primaryRed !fmtm-border-none !fmtm-w-fit fmtm-mx-auto hover:!fmtm-text-red-700'
-                        : ''
-                  }`}
-                />
-              ) : null;
-            })}
+          {list_of_task_status?.map((data, index) => {
+            return list_of_task_status?.length != 0 ? (
+              <Button
+                btnId={data.value}
+                key={index}
+                onClick={(e) => {
+                  if (
+                    data.key === 'Mark as fully mapped' &&
+                    currentTaskInfo &&
+                    currentTaskInfo?.submission_count < currentTaskInfo?.feature_count
+                  ) {
+                    setToggleMappedConfirmationModal(true);
+                  } else {
+                    handleOnClick(e);
+                  }
+                }}
+                disabled={loading}
+                btnText={data.key.toUpperCase()}
+                btnType={data.btnBG === 'red' ? 'primary' : 'other'}
+                className={`fmtm-font-bold !fmtm-rounded fmtm-text-sm !fmtm-py-2 !fmtm-w-full fmtm-flex fmtm-justify-center ${
+                  data.btnBG === 'gray'
+                    ? '!fmtm-bg-[#4C4C4C] hover:!fmtm-bg-[#5f5f5f] fmtm-text-white hover:!fmtm-text-white !fmtm-border-none'
+                    : data.btnBG === 'transparent'
+                      ? '!fmtm-bg-transparent !fmtm-text-primaryRed !fmtm-border-none !fmtm-w-fit fmtm-mx-auto hover:!fmtm-text-red-700'
+                      : ''
+                }`}
+              />
+            ) : null;
+          })}
         </div>
       )}
       {task_status !== 'READY' && task_status !== 'LOCKED_FOR_MAPPING' && (
diff --git a/src/frontend/src/components/ProjectDetailsV2/TaskSelectionPopup.tsx b/src/frontend/src/components/ProjectDetailsV2/TaskSelectionPopup.tsx
index 0cd127de9b..df7e13b5e9 100644
--- a/src/frontend/src/components/ProjectDetailsV2/TaskSelectionPopup.tsx
+++ b/src/frontend/src/components/ProjectDetailsV2/TaskSelectionPopup.tsx
@@ -96,6 +96,9 @@ const TaskSelectionPopup = ({ taskId, body, feature }: TaskSelectionPopupPropTyp
         <div className="fmtm-flex fmtm-flex-col fmtm-gap-2 fmtm-p-3 sm:fmtm-p-5">
           <h4 className="fmtm-text-lg fmtm-font-bold">Task: {selectedTask.index}</h4>
           <p className="fmtm-text-base fmtm-text-[#757575]">Status: {task_status}</p>
+          {selectedTask?.locked_by_username && (
+            <p className="fmtm-text-base fmtm-text-[#757575]">Locked By: {selectedTask?.locked_by_username}</p>
+          )}
         </div>
         {checkIfTaskAssignedOrNot && task_status !== 'LOCKED_FOR_MAPPING' && (
           <QrcodeComponent qrcode={qrcode} projectId={currentProjectId} taskIndex={selectedTask.index} />