feat(frontend): working submission comments to submission page (#1709)

* fix(submissionDetails): display start, end, today date, deviceid seperately above * fix(accordion): add seperator props * fix(submissionDetails): use accordion to display nested values, code refactor * fix(submissionTable): change submission taskId key * fix(submissionsTable): redirect to submission instance page with taskUId * fix(submission): pass taskUId while reviewStateModal dispatch * feat(assetModules): calendar icon add * fix(submissionComments): submission comments component add * fix(submissionDetails): fix UI, submissionComments component add * feat(updateReviewStatusModal): add comments api integration * fix(projectInfo): fix index access * fix(submissionService): remove clear reviewStatusState & loading state remove from service * fix(comments): filter task comments only * fix(submissionComments): display msg if no comments * fix(submissionDetails): text size change * fix(submissionDetails): style fixes
hotosm · Jul 29, 2024 · 9d08533 · 9d08533
1 parent c6b4951
commit 9d08533
Show file tree

Hide file tree

Showing 11 changed files with 299 additions and 146 deletions.
diff --git a/src/frontend/src/api/SubmissionService.ts b/src/frontend/src/api/SubmissionService.ts
@@ -89,16 +89,6 @@ export const UpdateReviewStateService: Function = (url: string) => {
         dispatch(SubmissionActions.UpdateReviewStateLoading(true));
         const response = await CoreModules.axios.post(url);
         dispatch(SubmissionActions.UpdateSubmissionTableDataReview(response.data));
-        dispatch(
-          SubmissionActions.SetUpdateReviewStatusModal({
-            toggleModalStatus: false,
-            projectId: null,
-            instanceId: null,
-            taskId: null,
-            reviewState: '',
-          }),
-        );
-        dispatch(SubmissionActions.UpdateReviewStateLoading(false));
       } catch (error) {
         dispatch(
           CommonActions.SetSnackBar({

diff --git a/src/frontend/src/components/ProjectDetailsV2/Comments.tsx b/src/frontend/src/components/ProjectDetailsV2/Comments.tsx
@@ -29,6 +29,9 @@ const Comments = () => {
       return task?.index == selectedTask;
     })?.[0],
   };
+  const filteredProjectCommentsList = projectCommentsList?.filter(
+    (comment) => !comment?.action_text?.includes('-SUBMISSION_INST-'),
+  );
 
   useEffect(() => {
     dispatch(GetProjectComments(`${import.meta.env.VITE_API_URL}/tasks/${currentStatus?.id}/history/?comment=true`));
@@ -72,9 +75,9 @@ const Comments = () => {
           </div>
         ) : (
           <div>
-            {projectCommentsList?.length > 0 ? (
+            {filteredProjectCommentsList?.length > 0 ? (
               <div className="fmtm-flex fmtm-flex-col fmtm-gap-4 fmtm-mb-1">
-                {projectCommentsList?.map((projectComment, i) => (
+                {filteredProjectCommentsList?.map((projectComment, i) => (
                   <div
                     key={i}
                     className="fmtm-flex fmtm-w-full fmtm-gap-4 fmtm-px-2 fmtm-border-b fmtm-border-[#e9e9e9] sm:fmtm-border-white fmtm-pb-3"

diff --git a/src/frontend/src/components/ProjectSubmissions/ProjectInfo.tsx b/src/frontend/src/components/ProjectSubmissions/ProjectInfo.tsx
@@ -96,7 +96,7 @@ const ProjectInfo = ({ entities }) => {
         <div className="fmtm-w-full fmtm-overflow-x-scroll scrollbar fmtm-pb-1 md:fmtm-pb-0 md:fmtm-overflow-x-visible">
           {projectDetailsLoading || submissionContributorsLoading || entityOsmMapLoading ? (
             <div className="fmtm-w-full fmtm-flex sm:fmtm-justify-center fmtm-gap-5">
-              {Array.from({ length: 3 }).map((i) => (
+              {Array.from({ length: 3 }).map((_, i) => (
                 <CoreModules.Skeleton key={i} className="!fmtm-w-[12.5rem] fmtm-h-[6.25rem] !fmtm-rounded-xl" />
               ))}
             </div>

diff --git a/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx b/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx
@@ -57,6 +57,10 @@ const SubmissionsTable = ({ toggleView }) => {
   const projectInfo = useAppSelector((state) => state.project.projectInfo);
   const josmEditorError = useAppSelector((state) => state.task.josmEditorError);
   const downloadSubmissionLoading = useAppSelector((state) => state.task.downloadSubmissionLoading);
+  const projectTaskBoundries = useAppSelector((state) => state.project.projectTaskBoundries);
+  const projectIndex = projectTaskBoundries.findIndex((project) => project.id == +projectId);
+  const taskList = projectTaskBoundries[projectIndex]?.taskBoundries;
+
   const [numberOfFilters, setNumberOfFilters] = useState<number>(0);
   const [paginationPage, setPaginationPage] = useState<number>(1);
   const [submittedBy, setSubmittedBy] = useState<string | null>(null);
@@ -430,31 +434,35 @@ const SubmissionsTable = ({ toggleView }) => {
             dataField="Actions"
             headerClassName="updatedHeader !fmtm-sticky fmtm-right-0 fmtm-shadow-[-10px_0px_20px_0px_rgba(0,0,0,0.1)] fmtm-text-center"
             rowClassName="updatedRow !fmtm-sticky fmtm-right-0 fmtm-bg-white fmtm-shadow-[-10px_0px_20px_0px_rgba(0,0,0,0.1)]"
-            dataFormat={(row) => (
-              <div className="fmtm-w-[5rem] fmtm-overflow-hidden fmtm-truncate fmtm-text-center">
-                <AssetModules.VisibilityOutlinedIcon
-                  className="fmtm-text-[#545454] hover:fmtm-text-primaryRed"
-                  onClick={() => {
-                    navigate(`/project/${projectId}/tasks/${row?.phonenumber}/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] hover:fmtm-text-primaryRed"
-                  onClick={() => {
-                    dispatch(
-                      SubmissionActions.SetUpdateReviewStatusModal({
-                        toggleModalStatus: true,
-                        instanceId: row?.meta?.instanceID,
-                        taskId: row?.task_id,
-                        projectId: projectId,
-                        reviewState: row?.__system?.reviewState,
-                      }),
-                    );
-                  }}
-                />
-              </div>
-            )}
+            dataFormat={(row) => {
+              const taskUId = taskList?.find((task) => task?.index == row?.task_id)?.id;
+              return (
+                <div className="fmtm-w-[5rem] fmtm-overflow-hidden fmtm-truncate fmtm-text-center">
+                  <AssetModules.VisibilityOutlinedIcon
+                    className="fmtm-text-[#545454] hover:fmtm-text-primaryRed"
+                    onClick={() => {
+                      navigate(`/project/${projectId}/tasks/${taskUId}/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] hover:fmtm-text-primaryRed"
+                    onClick={() => {
+                      dispatch(
+                        SubmissionActions.SetUpdateReviewStatusModal({
+                          toggleModalStatus: true,
+                          instanceId: row?.meta?.instanceID,
+                          taskId: row?.task_id,
+                          projectId: projectId,
+                          reviewState: row?.__system?.reviewState,
+                          taskUId: taskUId,
+                        }),
+                      );
+                    }}
+                  />
+                </div>
+              );
+            }}
           />
         </Table>
       )}

diff --git a/src/frontend/src/components/ProjectSubmissions/UpdateReviewStatusModal.tsx b/src/frontend/src/components/ProjectSubmissions/UpdateReviewStatusModal.tsx
@@ -7,6 +7,7 @@ import { UpdateReviewStateService } from '@/api/SubmissionService';
 import TextArea from '../common/TextArea';
 import Button from '../common/Button';
 import { useAppSelector } from '@/types/reduxTypes';
+import { PostProjectComments } from '@/api/Project';
 
 const reviewList: reviewListType[] = [
   {
@@ -41,22 +42,48 @@ const UpdateReviewStatusModal = () => {
     setReviewStatus(updateReviewStatusModal.reviewState);
   }, [updateReviewStatusModal.reviewState]);
 
-  const handleStatusUpdate = () => {
+  const handleStatusUpdate = async () => {
     if (!updateReviewStatusModal.instanceId || !updateReviewStatusModal.projectId || !updateReviewStatusModal.taskId) {
       return;
     }
 
     if (!reviewStatus) {
       setError('Review state needs to be selected.');
-      return;
+    } else if (updateReviewStatusModal.reviewState !== reviewStatus) {
+      await dispatch(
+        UpdateReviewStateService(
+          `${import.meta.env.VITE_API_URL}/submission/update_review_state?project_id=${
+            updateReviewStatusModal.projectId
+          }&task_id=${parseInt(updateReviewStatusModal.taskId)}&instance_id=${
+            updateReviewStatusModal.instanceId
+          }&review_state=${reviewStatus}`,
+        ),
+      );
+    }
+    if (noteComments.trim().length > 0) {
+      await dispatch(
+        PostProjectComments(
+          `${import.meta.env.VITE_API_URL}/tasks/task-comments/?project_id=${updateReviewStatusModal?.projectId}`,
+          {
+            task_id: updateReviewStatusModal?.taskUId,
+            project_id: updateReviewStatusModal?.projectId,
+            comment: `${updateReviewStatusModal?.instanceId}-SUBMISSION_INST-${noteComments}`,
+          },
+        ),
+      );
+      setNoteComments('');
     }
     dispatch(
-      UpdateReviewStateService(
-        `${import.meta.env.VITE_API_URL}/submission/update_review_state?project_id=${updateReviewStatusModal.projectId}&task_id=${parseInt(
-          updateReviewStatusModal.taskId,
-        )}&instance_id=${updateReviewStatusModal.instanceId}&review_state=${reviewStatus}`,
-      ),
+      SubmissionActions.SetUpdateReviewStatusModal({
+        toggleModalStatus: false,
+        projectId: null,
+        instanceId: null,
+        taskId: null,
+        reviewState: '',
+        taskUId: null,
+      }),
     );
+    dispatch(SubmissionActions.UpdateReviewStateLoading(false));
   };
 
   return (
@@ -106,6 +133,7 @@ const UpdateReviewStatusModal = () => {
                     instanceId: null,
                     taskId: null,
                     reviewState: '',
+                    taskUId: null,
                   }),
                 );
               }}
@@ -131,6 +159,7 @@ const UpdateReviewStatusModal = () => {
             instanceId: null,
             taskId: null,
             reviewState: '',
+            taskUId: null,
           }),
         );
       }}

diff --git a/src/frontend/src/components/SubmissionInstance/SubmissionComments.tsx b/src/frontend/src/components/SubmissionInstance/SubmissionComments.tsx
@@ -0,0 +1,55 @@
+import { useAppSelector } from '@/types/reduxTypes';
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import AssetModules from '@/shared/AssetModules';
+import CoreModules from '@/shared/CoreModules';
+
+const SubmissionComments = () => {
+  const params = useParams();
+  const submissionInstanceId = params.instanceId;
+
+  const taskCommentsList = useAppSelector((state) => state?.project?.projectCommentsList);
+  const filteredTaskCommentsList = taskCommentsList
+    ?.filter((comment) => comment?.action_text.includes('-SUBMISSION_INST-'))
+    .filter((comment) => comment.action_text.split('-SUBMISSION_INST-')[0] === submissionInstanceId);
+  const taskGetCommentsLoading = useAppSelector((state) => state?.project?.projectGetCommentsLoading);
+
+  return (
+    <div className="fmtm-bg-white fmtm-rounded-xl fmtm-p-6">
+      <h4 className="fmtm-font-bold fmtm-text-[#555] fmtm-text-xl fmtm-mb-[0.625rem]">Comments</h4>
+      {taskGetCommentsLoading ? (
+        <div>
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div
+              key={i}
+              className="fmtm-flex fmtm-flex-col fmtm-gap-1 fmtm-py-[0.875rem] fmtm-border-b fmtm-border-[#D4D4D4]"
+            >
+              <div className="fmtm-flex fmtm-justify-between">
+                <CoreModules.Skeleton className="!fmtm-w-[6rem] fmtm-h-6" />
+                <CoreModules.Skeleton className="!fmtm-w-[6rem] fmtm-h-4" />
+              </div>
+              <CoreModules.Skeleton className="!fmtm-w-full fmtm-h-5" />
+            </div>
+          ))}
+        </div>
+      ) : filteredTaskCommentsList?.length > 0 ? (
+        filteredTaskCommentsList?.map((comment) => (
+          <div className="fmtm-py-[0.875rem] fmtm-border-b fmtm-border-[#D4D4D4] fmtm-flex fmtm-flex-col fmtm-gap-2">
+            <div className="fmtm-flex fmtm-justify-between fmtm-items-center">
+              <p className="fmtm-text-base fmtm-font-bold fmtm-text-[#555]">{comment?.username}</p>
+              <div className="fmtm-flex fmtm-items-center fmtm-gap-1">
+                <AssetModules.CalendarTodayOutlinedIcon style={{ fontSize: '12px' }} className="fmtm-text-[#D73F37]" />
+                <p className="fmtm-text-xs fmtm-text-[#555]">{comment?.action_date?.split('T')[0]}</p>
+              </div>
+            </div>
+            <p className="fmtm-text-[#555] fmtm-text-sm">{comment?.action_text?.split('-SUBMISSION_INST-')[1]}</p>
+          </div>
+        ))
+      ) : (
+        <p className="fmtm-text-center fmtm-py-5 fmtm-text-xl fmtm-text-gray-400">No Comments!</p>
+      )}
+    </div>
+  );
+};
+
+export default SubmissionComments;
diff --git a/src/frontend/src/components/common/Accordion.tsx b/src/frontend/src/components/common/Accordion.tsx
@@ -10,6 +10,7 @@ interface IAccordion {
   onToggle: any;
   description?: string;
   disableHeaderClickToggle?: boolean;
+  hasSeperator?: boolean;
 }
 
 export default function Accordion({
@@ -21,6 +22,7 @@ export default function Accordion({
   onToggle,
   description,
   disableHeaderClickToggle,
+  hasSeperator = true,
 }: IAccordion) {
   const [collapsed, setCollapsed] = useState(isCollapsed);
 
@@ -34,7 +36,7 @@ export default function Accordion({
         <div
           className={`fmtm-flex fmtm-items-center fmtm-justify-between
             fmtm-w-full fmtm-font-bold fmtm-gap-3 fmtm-cursor-pointer fmtm-text-2xl fmtm-py-[0px] sm:fmtm-py-1  fmtm-border-[#929DB3] ${
-              collapsed ? 'fmtm-border-b-[0px]' : 'fmtm-border-b-[2px]'
+              collapsed || (!collapsed && !hasSeperator) ? 'fmtm-border-b-[0px]' : 'fmtm-border-b-[2px]'
             }`}
           onClick={() => {
             if (disableHeaderClickToggle) return;

diff --git a/src/frontend/src/shared/AssetModules.js b/src/frontend/src/shared/AssetModules.js
@@ -85,6 +85,7 @@ import {
   IntegrationInstructions as IntegrationInstructionsIcon,
   QrCode2Outlined as QrCode2OutlinedIcon,
   BarChart as BarChartIcon,
+  CalendarTodayOutlined as CalendarTodayOutlinedIcon,
 } from '@mui/icons-material';
 import LockPng from '@/assets/images/lock.png';
 import RedLockPng from '@/assets/images/red-lock.png';
@@ -180,4 +181,5 @@ export default {
   IntegrationInstructionsIcon,
   QrCode2OutlinedIcon,
   BarChartIcon,
+  CalendarTodayOutlinedIcon,
 };
diff --git a/src/frontend/src/store/slices/SubmissionSlice.ts b/src/frontend/src/store/slices/SubmissionSlice.ts
@@ -27,6 +27,7 @@ const initialState: SubmissionStateTypes = {
     taskId: null,
     projectId: null,
     reviewState: '',
+    taskUId: null,
   },
   updateReviewStateLoading: false,
 };

diff --git a/src/frontend/src/store/types/ISubmissions.ts b/src/frontend/src/store/types/ISubmissions.ts
@@ -24,4 +24,5 @@ type updateReviewStatusModal = {
   taskId: string | null;
   projectId: number | null;
   reviewState: string;
+  taskUId: string | null;
 };