diff --git a/forms-flow-web/src/components/FOI/FOIRequest/FOIRequest.js b/forms-flow-web/src/components/FOI/FOIRequest/FOIRequest.js index 8a6ae0ec4..665bd3f53 100644 --- a/forms-flow-web/src/components/FOI/FOIRequest/FOIRequest.js +++ b/forms-flow-web/src/components/FOI/FOIRequest/FOIRequest.js @@ -258,7 +258,7 @@ const FOIRequest = React.memo(({ userDetail }) => { const [redactedSections, setRedactedSections] = useState(""); const [isMCFPersonal, setIsMCFPersonal] = useState(bcgovcode.replaceAll('"', '') == "MCF" && requestDetails.requestType == FOI_COMPONENT_CONSTANTS.REQUEST_TYPE_PERSONAL); const {oipcData, addOIPC, removeOIPC, updateOIPC} = useOIPCHook(); - const [showOIPCDetails, setShowOIPCDetails] = useState(requestDetails.isoipcreview); + const [showOIPCDetails, setShowOIPCDetails] = useState(requestDetails.oipcData?.length > 0); useEffect(() => { if (window.location.href.indexOf("comments") > -1) { @@ -649,6 +649,18 @@ const FOIRequest = React.memo(({ userDetail }) => { setAssignedToValue(value); }; + const oipcSectionRef = React.useRef(null); + const handleOipcReviewFlagChange = (isSelected) => { + setShowOIPCDetails(isSelected); + oipcSectionRef.current.scrollIntoView(); + //timeout to allow react state to update after setState call + if (isSelected) { + setTimeout(() => { + oipcSectionRef.current.scrollIntoView(); + }, (10)); + } + } + //handle email validation const [validation, setValidation] = React.useState({}); const handleEmailValidation = (validationObj) => { @@ -1122,6 +1134,8 @@ const FOIRequest = React.memo(({ userDetail }) => { userDetail={userDetail} disableInput={disableInput} isAddRequest={isAddRequest} + handleOipcReviewFlagChange={handleOipcReviewFlagChange} + showOipcReviewFlag={requestState.toLowerCase() !== StateEnum.intakeinprogress.name.toLowerCase()} /> {(isAddRequest || requestState === StateEnum.unopened.name) && ( @@ -1237,6 +1251,7 @@ const FOIRequest = React.memo(({ userDetail }) => { divisions={requestDetails.divisions} /> )} +
{showOIPCDetails && requestState && requestState.toLowerCase() !== StateEnum.intakeinprogress.name.toLowerCase() && ( { /** * Header of Review request in the UI @@ -287,11 +289,14 @@ const FOIRequestHeader = React.memo( type="oipcreview" requestDetails={requestDetails} isActive={requestDetails.isoipcreview} + handleSelect={handleOipcReviewFlagChange} + showFlag={showOipcReviewFlag} />
diff --git a/forms-flow-web/src/components/FOI/FOIRequest/MinistryReview/MinistryReview.js b/forms-flow-web/src/components/FOI/FOIRequest/MinistryReview/MinistryReview.js index 6b779db48..4071f7ae0 100644 --- a/forms-flow-web/src/components/FOI/FOIRequest/MinistryReview/MinistryReview.js +++ b/forms-flow-web/src/components/FOI/FOIRequest/MinistryReview/MinistryReview.js @@ -62,6 +62,8 @@ import { UnsavedModal } from "../../customComponents"; import { DISABLE_GATHERINGRECORDS_TAB } from "../../../../constants/constants"; import _ from "lodash"; import { MinistryNeedsScanning } from "../../../../constants/FOI/enum"; +import OIPCDetails from "../OIPCDetails/Index"; +import useOIPCHook from "../OIPCDetails/oipcHook"; const useStyles = makeStyles((theme) => ({ root: { @@ -108,6 +110,8 @@ const MinistryReview = React.memo(({ userDetail }) => { const [_currentrequestStatus, setcurrentrequestStatus] = React.useState(""); const [_tabStatus, settabStatus] = React.useState(requestState); + const {oipcData, addOIPC, removeOIPC, updateOIPC} = useOIPCHook(); + const [showOIPCDetails, setShowOIPCDetails] = useState(requestDetails.oipcData?.length > 0); //gets the request detail from the store const IsDivisionalCoordinator = () => { return userDetail?.role?.includes("DivisionalCoordinator"); @@ -582,6 +586,18 @@ const MinistryReview = React.memo(({ userDetail }) => { (state) => state.foiRequests.showEventQueue ); + const oipcSectionRef = React.useRef(null); + const handleOipcReviewFlagChange = (isSelected) => { + setShowOIPCDetails(isSelected); + oipcSectionRef.current.scrollIntoView(); + //timeout to allow react state to update after setState call + if (isSelected) { + setTimeout(() => { + oipcSectionRef.current.scrollIntoView(); + }, (10)); + } + } + return !isLoading && requestDetails && Object.keys(requestDetails).length !== 0 && @@ -752,6 +768,7 @@ const MinistryReview = React.memo(({ userDetail }) => { setSaveMinistryRequestObject } ministryAssigneeValue={ministryAssignedToValue} + handleOipcReviewFlagChange={handleOipcReviewFlagChange} /> @@ -767,6 +784,15 @@ const MinistryReview = React.memo(({ userDetail }) => { /> {divisionsBox} {/* */} +
+ {showOIPCDetails && requestState && requestState.toLowerCase() !== StateEnum.intakeinprogress.name.toLowerCase() && ( + + )} { const { requestId, ministryId } = useParams(); const _requestDetails = requestDetails; @@ -108,11 +109,13 @@ const RequestHeader = React.memo(({ type="oipcreview" requestDetails={requestDetails} isActive={requestDetails.isoipcreview} + handleSelect={handleOipcReviewFlagChange} /> console.log('selected')} />
); diff --git a/forms-flow-web/src/components/FOI/customComponents/RequestFlag.js b/forms-flow-web/src/components/FOI/customComponents/RequestFlag.js index abfc21310..1109fe8b4 100644 --- a/forms-flow-web/src/components/FOI/customComponents/RequestFlag.js +++ b/forms-flow-web/src/components/FOI/customComponents/RequestFlag.js @@ -1,6 +1,5 @@ import { useState } from "react"; import "./requestflag.scss"; - import OutlinedInput from "@material-ui/core/OutlinedInput"; import MenuItem from "@material-ui/core/MenuItem"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -15,17 +14,12 @@ import CloseIcon from "@material-ui/icons/Close"; import IconButton from "@material-ui/core/IconButton"; import TextField from "@mui/material/TextField"; import { useParams } from "react-router-dom"; -import { saveRequestDetails } from "../../../apiManager/services/FOI/foiRequestServices"; -import { toast } from "react-toastify"; import { useDispatch } from "react-redux"; -import { - fetchFOIRequestDetailsWrapper, -} from "../../../apiManager/services/FOI/foiRequestServices"; //Types are: //oipcreview //phasedrelease -const RequestFlag = ({ isActive, type, requestDetails }) => { +const RequestFlag = ({ isActive, type, handleSelect, showFlag = true }) => { const [isSelected, setIsSelected] = useState(isActive || false); const [modalOpen, setModalOpen] = useState(false); const [modalHeading, setModalHeading] = useState(""); @@ -133,7 +127,12 @@ const RequestFlag = ({ isActive, type, requestDetails }) => { } const handleValueChange = (e) => { - setModalOpen(true); + setIsSelected(e.target.value); + if (type == "oipcreview" && !isActive) { + handleSelect(e.target.value) + } else { + setModalOpen(true); + } if (e.target.value == true) { setModalHeading(modalHeadingActive); @@ -144,7 +143,6 @@ const RequestFlag = ({ isActive, type, requestDetails }) => { setModalMessage(modalMessageInactive); setModalDescription(modalDescriptionInactive); } - setIsSelected(e.target.value); }; const handleClose = () => { @@ -154,61 +152,10 @@ const RequestFlag = ({ isActive, type, requestDetails }) => { const handleSave = (e) => { setModalOpen(false); - saveOipcReviewStatus(); - }; - - const saveOipcReviewStatus = () => { - let updatedRequestDetails; - if (type == "oipcreview") { - updatedRequestDetails = { - ...requestDetails, - isoipcreview: isSelected, - }; - } else if (type == "phasedrelease") { - updatedRequestDetails = { - ...requestDetails, - isphasedrelease: isSelected, - }; - } - //dispatch loader - dispatch( - saveRequestDetails( - updatedRequestDetails, - -2, //not an add request - requestId, - ministryId, - (err, res) => { - if (!err) { - toast.success("The OIPC review status has been successfully updated.", { - position: "top-right", - autoClose: 3000, - hideProgressBar: true, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - }); - dispatch(fetchFOIRequestDetailsWrapper(requestId, ministryId)); - } else { - toast.error( - "Temporarily unable to update the OIPC review status. Please try again in a few minutes.", - { - position: "top-right", - autoClose: 3000, - hideProgressBar: true, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - } - ); - setIsSelected(isActive || false); - } - } - ) - ); + handleSelect(isSelected); }; + if (!showFlag) return <>; return ( <>