Merge pull request #5367 from bcgov/test-rook-AS-FOIMOD-2982

FOIMOD-2982:Comments Tab - Type of Comments (Peer Review, Internal, General) - Fixes and new features added

forms-flow-web/src/components/FOI/FOIRequest/FOIRequest.js

@@ -1030,6 +1030,7 @@ const FOIRequest = React.memo(({ userDetail, openApplicantProfileModal }) => {
     (state) => state.foiRequests.showEventQueue
   );
 
+  //console.log("IAO:::", iaoassignedToList)
   const showRecordsTab = () => {
     return (
       requestState !== StateEnum.intakeinprogress.name &&

forms-flow-web/src/components/FOI/FOIRequest/utils.js

@@ -371,6 +371,7 @@ export const checkValidationError = (
  */
 //Below function will handle beforeunload event
 export const alertUser = (e) => {
+  console.log("alertUser:",e)
   e.preventDefault();
   e.returnValue = "";
 };
@@ -398,6 +399,8 @@ export const shouldDisableFieldForMinistryRequests = (requestStatus) => {
 };
 
 export const handleBeforeUnload = (e) => {
+  console.log("handleBeforeUnload:",e)
+
   alertUser(e);
 };
 

forms-flow-web/src/components/FOI/customComponents/Comments/AddCommentField.js

@@ -26,6 +26,8 @@ import RadioGroup from "@material-ui/core/RadioGroup";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import FormControl from "@material-ui/core/FormControl";
 import Confirm from '../../../../containers/Confirm'
+import CustomizedTooltip from '../Tooltip/MuiTooltip/Tooltip';
+
 
 
 const staticToolbarPlugin = createToolbarPlugin();
@@ -34,18 +36,31 @@ const { Toolbar } = staticToolbarPlugin;
 const { MentionSuggestions } = mentionPlugin
 const plugins = [staticToolbarPlugin, mentionPlugin];
 const AddCommentField = ({ cancellor, parentId, add, fullnameList , restrictedReqTaglist,  //setEditorChange, removeComment and setRemoveComment added to handle Navigate away from Comments tabs 
-  setEditorChange, removeComment, setRemoveComment, isRestricted, isMinistry, setshowaddbox, commentTypes }) => {
+  setEditorChange, removeComment, setRemoveComment, isRestricted, isMinistry, setshowaddbox, commentTypes, commentTypeId, setCommentTypeId }) => {
   let maxcharacterlimit = 1000  
   const [uftext, setuftext] = useState('')
   const [textlength, setTextLength] = useState(1000)
   const [open, setOpen] = useState(false);
+  //console.log("ADD-fullnameList:",fullnameList)
+
   const isCommentTagListLoading = useSelector((state) => state.foiRequests.isCommentTagListLoading);
   let fulluserlist = suggestionList([...fullnameList]).sort(namesort)
+  // console.log("ADD-fulluserlist:",fulluserlist)
+  // console.log("ADD-restrictedReqTaglist:",restrictedReqTaglist)
+
   const [mentionList, setMentionList] = useState(isCommentTagListLoading ? [{name: 'Loading...'}] : isRestricted ? restrictedReqTaglist :fulluserlist);
   const [suggestions, setSuggestions] = useState(mentionList);
   const [editorState, setEditorState] = useState(EditorState.createEmpty())
-  const [commentTypeId, setCommentTypeId] = useState(1);
+
   const [confirmModalOpen, setConfirmModalOpen] = useState(false);
+
+  useEffect(() => {
+    //console.log("Change in useeffect!!",fulluserlist?.length)
+    setMentionList(isCommentTagListLoading ? [{name: 'Loading...'}] : isRestricted ? restrictedReqTaglist :suggestionList([...fulluserlist]).sort(namesort));
+    setSuggestions(isCommentTagListLoading ? [{name: 'Loading...'}] : isRestricted ? restrictedReqTaglist :suggestionList([...fulluserlist]).sort(namesort));
+  }, [fullnameList])
+
+  //console.log("ADD-mentionList:",mentionList)
 
   const onOpenChange = (_open) => {
     setOpen(_open);
@@ -168,6 +183,7 @@ const AddCommentField = ({ cancellor, parentId, add, fullnameList , restrictedRe
 
   const post = () => {
     if (uftext !== '' && uftext.trim().length > 0) {
+      setshowaddbox(false)
       const _mentions = getMentionsOnComment()
       const _editorstateinJSON = JSON.stringify(convertToRaw(editorState.getCurrentContent()))
       setFOILoader(true)    
@@ -193,8 +209,8 @@ const AddCommentField = ({ cancellor, parentId, add, fullnameList , restrictedRe
   })
 
   useEffect(() => {
-    setMentionList(isCommentTagListLoading ? [{name: 'Loading...'}] : isRestricted ? restrictedReqTaglist :suggestionList([...getFullnameList()]).sort(namesort));
-    setSuggestions(isCommentTagListLoading ? [{name: 'Loading...'}] : isRestricted ? restrictedReqTaglist :suggestionList([...getFullnameList()]).sort(namesort));
+    setMentionList(isCommentTagListLoading ? [{name: 'Loading...'}] : isRestricted ? restrictedReqTaglist :suggestionList([...fulluserlist]).sort(namesort));
+    setSuggestions(isCommentTagListLoading ? [{name: 'Loading...'}] : isRestricted ? restrictedReqTaglist :suggestionList([...fulluserlist]).sort(namesort));
   }, [isCommentTagListLoading, restrictedReqTaglist])
 
   let formclass = !parentId ? "parentform form" : "form"
@@ -219,10 +235,18 @@ const AddCommentField = ({ cancellor, parentId, add, fullnameList , restrictedRe
     setConfirmModalOpen(false);
   };
 
+  const tooltipPreview = {
+    "title": "Comment Types",
+    "content": [
+      <div className="toolTipContent">
+        <p>Internal and Peer Review comments are only visible to your team.</p>
+      </div>]
+  };
+
   return (
     <>
       <form className={formclass}>
-        <Grid item xs={12} lg={6}>
+        <Grid item xs={10} lg={4} style={{ position: 'relative' }}>
           <FormControl component="fieldset">
             <RadioGroup
               id="status-options"
@@ -250,7 +274,12 @@ const AddCommentField = ({ cancellor, parentId, add, fullnameList , restrictedRe
             />
             </RadioGroup>
           </FormControl>
+          <div className="commentToolTip">
+              <CustomizedTooltip content={tooltipPreview} position={""} style={{width: '70px'}} />
+              <p className="hideContent" id="commenttype-info">CommentTypeInfo</p>
+          </div>
         </Grid>
+
         <Toolbar>
           {
             (externalProps) => (
@@ -286,7 +315,7 @@ const AddCommentField = ({ cancellor, parentId, add, fullnameList , restrictedRe
 
       </form>
       <div className="inputActions">
-        <div className={'col-lg-10'}>
+        <div className={'col-lg-9'}>
           <span className={textlength > 25 ? "characterlen" : "characterlen textred"}>{textlength} characters remaining</span>
         </div>
         <button
@@ -295,7 +324,7 @@ const AddCommentField = ({ cancellor, parentId, add, fullnameList , restrictedRe
           >
             Cancel
           </button>
-        <div className="col-lg-2"> 
+        <div className="col-lg-3"> 
           {/* paperplanecontainer */}
           <button
             className= "btn-bottom btn btn-save" //"postBtn"

forms-flow-web/src/components/FOI/customComponents/Comments/CommentStructure.js

@@ -27,7 +27,7 @@ import { downloadZip } from "client-zip";
 import { useDispatch } from "react-redux";
 import * as html2pdf from 'html-to-pdf-js';
 import NewCommentIndicator from './NewCommentIndicator';
-import { getCommentLabelFromId } from "../../../../helper/FOI/helper";
+import { getCommentLabelFromId, getCommentTypeIdByName } from "../../../../helper/FOI/helper";
 
 
 const CommentStructure = ({ i, reply, parentId, totalcommentCount, currentIndex, isreplysection, hasAnotherUserComment, 
@@ -293,7 +293,7 @@ const CommentStructure = ({ i, reply, parentId, totalcommentCount, currentIndex,
         </div>
         <div className="userActions">
           <div>
-            {(isEmail || (i.commentTypeId === 1 && actions.userId === i.userId && actions.user)) && (
+            {(isEmail || ((i.commentTypeId !== 2 && i.commentTypeId !== 3) && actions.userId === i.userId && actions.user)) && (
                 <>
                     <IconButton
                     aria-label= "actions"

forms-flow-web/src/components/FOI/customComponents/Comments/DisplayComments.js

@@ -4,14 +4,22 @@ import InputField from './InputField'
 import { ActionContext } from './ActionContext'
 import 'reactjs-popup/dist/index.css'
 import CommentStructure from './CommentStructure'
-import { addToFullnameList, getFullnameList } from '../../../../helper/FOI/helper'
+import { addToFullnameList, getFullnameList, getCommentTypeIdByName, getIAOTagList, getAssignToList, setTeamTagList } from '../../../../helper/FOI/helper'
 
 
 const DisplayComments = ({ comments, bcgovcode, currentUser, iaoassignedToList, ministryAssignedToList, restrictedReqTaglist, isRestricted,
-  setEditorChange, removeComment, setRemoveComment, commentTypes }) => {
+  setEditorChange, removeComment, setRemoveComment, commentTypes,commentTypeId, setCommentTypeId, isMinistry}) => {
 
   const [fullnameList, setFullnameList] = useState(getFullnameList);
 
+
+  console.log("fullnameList:",fullnameList)
+
+  useEffect(() => {
+    console.log("setTeamTagList useeffect", bcgovcode)
+    setTeamTagList(bcgovcode)
+  }, [fullnameList])
+
   const finduserbyuserid = (userId) => {
     let user = fullnameList.find(u => u.username === userId);
     return user && user.fullname ? user.fullname : userId;
@@ -130,7 +138,7 @@ const DisplayComments = ({ comments, bcgovcode, currentUser, iaoassignedToList,
     return (i.replies && i.replies.sort((a, b) => { return a.commentId - b.commentId }) &&
       i.replies.map((a, replyindex) => (
         <div key={a.commentId}>
-          {actions.editArr.filter((id) => id === a.commentId).length !==
+          { fullnameList?.length > 0 && actions.editArr.filter((id) => id === a.commentId).length !==
             0 ? (
             <InputField
               cancellor={a.commentId}
@@ -142,6 +150,12 @@ const DisplayComments = ({ comments, bcgovcode, currentUser, iaoassignedToList,
               isRestricted = {isRestricted}
               //Handles Navigate Away
               setEditorChange={setEditorChange} removeComment={removeComment} setRemoveComment={setRemoveComment}
+              commentTypeId={i.commentTypeId}
+              newCommentTypeId={commentTypeId}
+              setCommentTypeId={setCommentTypeId}
+              commentTypes={commentTypes}
+              isMinistry={isMinistry}
+              bcgovcode={bcgovcode}
             />
           ) : (
             <CommentStructure
@@ -164,7 +178,8 @@ const DisplayComments = ({ comments, bcgovcode, currentUser, iaoassignedToList,
                 handleCancel: actions.handleCancel,
                 edit: false
               })
-            ) : (
+            ) : ( 
+              fullnameList?.length > 0 &&
               <InputField
                 cancellor={a.commentId}
                 parentId={i.commentId}
@@ -175,7 +190,12 @@ const DisplayComments = ({ comments, bcgovcode, currentUser, iaoassignedToList,
                 //Handles Navigate Away
                 setEditorChange={setEditorChange} removeComment={removeComment} setRemoveComment={setRemoveComment}
                 commentTypeId={i.commentTypeId}
-              />
+                newCommentTypeId={commentTypeId}
+                setCommentTypeId={setCommentTypeId}
+                commentTypes={commentTypes}
+                isMinistry={isMinistry}
+                bcgovcode={bcgovcode}
+              />           
             ))}
         </div>
       )))
@@ -189,19 +209,23 @@ const DisplayComments = ({ comments, bcgovcode, currentUser, iaoassignedToList,
           comments.map((i, index) => (
             <>
             <div key={i.commentId} className="commentsection" data-comid={i.commentId} name={index >= limit ? 'commentsectionhidden' : ""} style={index >= limit && !showmorehidden ? { display: 'none' } : { display: 'block' }}>
-              {actions.editArr.filter((id) => id === i.commentId).length !== 0 ? (
+              {fullnameList?.length > 0 && actions.editArr.filter((id) => id === i.commentId).length !== 0 ? (
                 <InputField cancellor={i.commentId} inputvalue={i.text} edit fullnameList={fullnameList} restrictedReqTaglist={restrictedReqTaglist} isRestricted={isRestricted} //Handles Navigate Away
-                  setEditorChange={setEditorChange} removeComment={removeComment} setRemoveComment={setRemoveComment} commentTypeId={i.commentTypeId} />
+                  setEditorChange={setEditorChange} removeComment={removeComment} setRemoveComment={setRemoveComment} 
+                  commentTypeId={i.commentTypeId} newCommentTypeId={commentTypeId} setCommentTypeId={setCommentTypeId} 
+                  commentTypes={commentTypes} isMinistry={isMinistry} bcgovcode={bcgovcode}/>
               ) : (
                 <CommentStructure i={i} handleEdit={() => actions.handleAction} totalcommentCount={gettotalcommentflag(i)} currentIndex={index} c={false} 
                   hasAnotherUserComment={(i.replies && i.replies.filter(r => r.userId !== currentUser.userId).length > 0)} 
                   fullName={getfullName(i.commentTypeId, i.userId)} commentTypes={commentTypes} />
               )}
               {
-                actions.replies.filter((id) => id === i.commentId).length !== 0 &&
+                fullnameList?.length > 0 && actions.replies.filter((id) => id === i.commentId).length !== 0 &&
                 (
                   <InputField cancellor={i.commentId} parentId={i.commentId} fullnameList={fullnameList} restrictedReqTaglist={restrictedReqTaglist} isRestricted={isRestricted} //Handles Navigate Away
-                    setEditorChange={setEditorChange} removeComment={removeComment} setRemoveComment={setRemoveComment} commentTypeId={i.commentTypeId} />
+                    setEditorChange={setEditorChange} removeComment={removeComment} setRemoveComment={setRemoveComment} 
+                    commentTypeId={i.commentTypeId} newCommentTypeId={commentTypeId} setCommentTypeId={setCommentTypeId} 
+                    commentTypes={commentTypes} isMinistry={isMinistry} bcgovcode={bcgovcode}/>
                 )
               }
               <div className="replySection">

forms-flow-web/src/components/FOI/customComponents/Comments/Input.js

@@ -1,13 +1,20 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import AddCommentField from './AddCommentField'
 import { ActionContext } from './ActionContext'
-import { addToFullnameList, getFullnameList } from '../../../../helper/FOI/helper'
+import { addToFullnameList, getFullnameList, setTeamTagList, getIAOTagList,
+  getCommentTypeIdByName, getFullnameTeamList, getAssignToList,getIAOAssignToList } from '../../../../helper/FOI/helper'
 
 const Input = ({ add, bcgovcode, iaoassignedToList, ministryAssignedToList, setEditorChange, removeComment, setRemoveComment,
-  restrictedReqTaglist, isRestricted, isMinistry,setshowaddbox, commentTypes }) => {
+  restrictedReqTaglist, isRestricted, isMinistry,setshowaddbox, commentTypes, commentTypeId,setCommentTypeId }) => {
 
   const [fullnameList, setFullnameList] = useState(getFullnameList());
-
+
+
+  // useEffect(() => {
+  //   console.log("setTeamTagList useeffect")
+  //   setTeamTagList()
+  // }, [])
+
     if (!fullnameList) {
         if (iaoassignedToList.length > 0) {
           addToFullnameList(iaoassignedToList, "iao");
@@ -21,12 +28,27 @@ const Input = ({ add, bcgovcode, iaoassignedToList, ministryAssignedToList, setE
     }
 
 
+  const filterTagList = (commentTypeId) => {
+    console.log("filterTagList in Input.js!!")
+    let tagList= fullnameList;
+    //getIAOAssignToList();
+    if(commentTypeId == getCommentTypeIdByName(commentTypes, "IAO Internal") || 
+        commentTypeId == getCommentTypeIdByName(commentTypes,"IAO Peer Review") )
+      tagList= getIAOTagList("iao");//getAssignToList('iao')?.filter((e) => e.type === 'iao');
+    else if(commentTypeId == getCommentTypeIdByName(commentTypes, "Ministry Internal") || 
+        commentTypeId == getCommentTypeIdByName(commentTypes,"Ministry Peer Review"))
+      tagList = getIAOTagList(bcgovcode);
+    //console.log("tagList:", tagList)
+    return tagList;
+  }
+
   const action = useContext(ActionContext)
   return  (
     restrictedReqTaglist|| fullnameList && fullnameList?.length > 0 ? 
-      <AddCommentField authorImg={action.userImg} main add={add} fullnameList={fullnameList} 
+      <AddCommentField authorImg={action.userImg} main add={add} fullnameList={filterTagList(commentTypeId)} 
         restrictedReqTaglist={restrictedReqTaglist} setEditorChange={setEditorChange} removeComment={removeComment} 
-          setRemoveComment={setRemoveComment} isRestricted={isRestricted} isMinistry={isMinistry} setshowaddbox={setshowaddbox} commentTypes={commentTypes} /> :null
+          setRemoveComment={setRemoveComment} isRestricted={isRestricted} isMinistry={isMinistry} setshowaddbox={setshowaddbox} 
+          commentTypes={commentTypes} commentTypeId={commentTypeId} setCommentTypeId={setCommentTypeId}/> :null
   )
 }