From 1f965784569814af689052f4544838935c9fa468 Mon Sep 17 00:00:00 2001 From: Sucheta Mukherjee Date: Fri, 15 Dec 2023 09:46:02 -0500 Subject: [PATCH 01/15] Checks for infringements, if more than 5, the button content changes dynamically --- .vscode/settings.json | 4 ++-- .../UserProfile/BlueSquareLayout.jsx | 18 +++++++++++++++++- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index e4553a44f7..7f1d20d615 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -12,7 +12,7 @@ "eslint.alwaysShowStatus": true, "editor.tabSize": 2, "editor.codeActionsOnSave": { - "source.fixAll.eslint": true + "source.fixAll.eslint": "explicit" }, "files.exclude": { "**/.classpath": true, @@ -20,4 +20,4 @@ "**/.settings": true, "**/.factorypath": true } -} \ No newline at end of file +} diff --git a/src/components/UserProfile/BlueSquareLayout.jsx b/src/components/UserProfile/BlueSquareLayout.jsx index 56f3cfdcca..33536932ac 100644 --- a/src/components/UserProfile/BlueSquareLayout.jsx +++ b/src/components/UserProfile/BlueSquareLayout.jsx @@ -124,8 +124,22 @@ const BlueSquareLayout = props => { + {/* This is just a test - by Sucheta */}
+ {userProfile?.infringements.length > 5 ? + <>

click to learn why

+ {/* */} + + : + } + +
{show && ( From d9532315f01fa02f7530d824911ca5c712f5b85b Mon Sep 17 00:00:00 2001 From: Sucheta Mukherjee Date: Fri, 15 Dec 2023 15:02:09 -0500 Subject: [PATCH 02/15] adds modal functionality showing the number of blue squares and advises to reach out to the administrator --- .../UserProfile/BlueSquareLayout.jsx | 49 ++++++++++++++++--- .../StopSelfSchedulerModal.css | 0 .../StopSelfSchedulerModal.jsx | 29 +++++++++++ 3 files changed, 71 insertions(+), 7 deletions(-) create mode 100644 src/components/UserProfile/StopSelfSchedulerModal/StopSelfSchedulerModal.css create mode 100644 src/components/UserProfile/StopSelfSchedulerModal/StopSelfSchedulerModal.jsx diff --git a/src/components/UserProfile/BlueSquareLayout.jsx b/src/components/UserProfile/BlueSquareLayout.jsx index 33536932ac..0a89e5bf02 100644 --- a/src/components/UserProfile/BlueSquareLayout.jsx +++ b/src/components/UserProfile/BlueSquareLayout.jsx @@ -5,7 +5,8 @@ import './UserProfile.scss'; import './UserProfileEdit/UserProfileEdit.scss'; import { Button } from 'react-bootstrap'; import ScheduleReasonModal from './ScheduleReasonModal/ScheduleReasonModal'; -import { useState } from 'react'; +import StopSelfSchedulerModal from './StopSelfSchedulerModal/StopSelfSchedulerModal.jsx'; +import { useState, useEffect } from 'react'; import { useReducer } from 'react'; import Spinner from 'react-bootstrap/Spinner'; import { addReason, patchReason } from 'actions/reasonsActions'; @@ -49,8 +50,12 @@ const BlueSquareLayout = props => { }; const { userProfile, handleUserProfile, handleBlueSquare, canEdit } = props; + const { privacySettings } = userProfile; + const [infringementsNum, setInfringementsNum] = useState(userProfile.infringements.length) + const [isInfringementMoreThanFive, setIsInfringementMoreThanFive] = useState(false); const [show, setShow] = useState(false); + const [showInfoModal, setShowInfoModal]= useState(false); const [reason, setReason] = useState(''); const [date, setDate] = useState( moment @@ -77,6 +82,25 @@ const BlueSquareLayout = props => { setShow(false); }, []); + const openInfoModal = useCallback(() => { + setShowInfoModal(true); + }, []); + + const closeInfoModal = useCallback(() => { + setShowInfoModal(false); + }, []); +// This useEffect will check for any changes in the number of infringements + useEffect(()=>{ + const checkInfringementCount = ()=>{ + if(userProfile.infringements.length > 5){ + setIsInfringementMoreThanFive(true) + } + else{ + setIsInfringementMoreThanFive(false) + } + } + checkInfringementCount(); + },[]); const handleSubmit = async event => { event.preventDefault(); @@ -124,20 +148,23 @@ const BlueSquareLayout = props => { - {/* This is just a test - by Sucheta */} + {/* Replaces Schedule Blue Square button when there are more than 5 blue squares - by Sucheta */}
- {userProfile?.infringements.length > 5 ? + {isInfringementMoreThanFive ? <>

click to learn why

- {/* */} : } - -
+ {isInfringementMoreThanFive && showInfoModal && + ( + + )} {show && ( + + + Can Not Schedule Time Off + + + +

You currently possess {infringementsNum} blue squares, with an annual limit of 5. If you require time off, kindly reach out to your Administrator.

+

Note: Blue squares expire after 1 calendar year from their issuance date.

+ + + + + + + + ); +} + +export default StopSelfSchedulerModal; \ No newline at end of file From a58754d7e4286ea223d2d89a160d7ee27c3b9306 Mon Sep 17 00:00:00 2001 From: Sucheta Mukherjee Date: Fri, 15 Dec 2023 15:31:56 -0500 Subject: [PATCH 03/15] commit checks for the counts of blue squares and accordingly allows user to schedule a blue sqaure --- src/components/UserProfile/BlueSquareLayout.jsx | 6 ++++-- .../StopSelfSchedulerModal/StopSelfSchedulerModal.jsx | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/UserProfile/BlueSquareLayout.jsx b/src/components/UserProfile/BlueSquareLayout.jsx index 0a89e5bf02..5d74464871 100644 --- a/src/components/UserProfile/BlueSquareLayout.jsx +++ b/src/components/UserProfile/BlueSquareLayout.jsx @@ -13,6 +13,7 @@ import { addReason, patchReason } from 'actions/reasonsActions'; import moment from 'moment-timezone'; import { Modal } from 'react-bootstrap'; import { boxStyle } from 'styles'; +import { color } from 'd3'; const BlueSquareLayout = props => { const fetchingReducer = (state, action) => { @@ -155,7 +156,7 @@ const BlueSquareLayout = props => {

click to learn why

+ +

(click to learn why)

: -

(click to learn why)

+

Click to learn why

: + + + + ); +} + +export default SchedulerExplanationModal; \ No newline at end of file From 49cef68de181ae520edab01b8d11c61c7e894e44 Mon Sep 17 00:00:00 2001 From: Sucheta Mukherjee Date: Fri, 15 Dec 2023 18:25:09 -0500 Subject: [PATCH 05/15] adds handler function and opnes modal to explain the reason for not letting schedule time offs --- .../UserProfile/BlueSquareLayout.jsx | 34 +++++++++++++++---- .../SchedulerExplanationModal.jsx | 17 +++++++--- 2 files changed, 41 insertions(+), 10 deletions(-) diff --git a/src/components/UserProfile/BlueSquareLayout.jsx b/src/components/UserProfile/BlueSquareLayout.jsx index ce71f180d5..73ffda88c6 100644 --- a/src/components/UserProfile/BlueSquareLayout.jsx +++ b/src/components/UserProfile/BlueSquareLayout.jsx @@ -6,6 +6,7 @@ import './UserProfileEdit/UserProfileEdit.scss'; import { Button } from 'react-bootstrap'; import ScheduleReasonModal from './ScheduleReasonModal/ScheduleReasonModal'; import StopSelfSchedulerModal from './StopSelfSchedulerModal/StopSelfSchedulerModal.jsx'; +import SchedulerExplanationModal from './SchedulerExplanationModal/SchedulerExplanationModal'; import { useState, useEffect } from 'react'; import { useReducer } from 'react'; import Spinner from 'react-bootstrap/Spinner'; @@ -57,6 +58,7 @@ const BlueSquareLayout = props => { const [isInfringementMoreThanFive, setIsInfringementMoreThanFive] = useState(false); const [show, setShow] = useState(false); const [showInfoModal, setShowInfoModal]= useState(false); + const [showExplanation, setShowExplanation]= useState(false); const [reason, setReason] = useState(''); const [date, setDate] = useState( moment @@ -74,7 +76,7 @@ const BlueSquareLayout = props => { errorCode: null, isSet: false, }); - + const handleOpen = useCallback(() => { setShow(true); }, []); @@ -83,13 +85,24 @@ const BlueSquareLayout = props => { setShow(false); }, []); - const openInfoModal = useCallback(() => { + // This handler is used for Info Modal, that open when button "Can't Schedule Time Off" is clicked + const openInfoModal = useCallback(() => { setShowInfoModal(true); }, []); - +// This handler is used to close Info Modal, const closeInfoModal = useCallback(() => { setShowInfoModal(false); }, []); + // This handler is used for Explanation Modal, that open when Click to learn why is clicked + const openExplanationModal = useCallback(() => { + setShowExplanation(true); + }, []); +// This handler is used to close Info Modal, + const closeExplanationModal = useCallback(() => { + setShowExplanation(false); + }, []); + + // This useEffect will check for any changes in the number of infringements useEffect(()=>{ const checkInfringementCount = ()=>{ @@ -97,7 +110,7 @@ const BlueSquareLayout = props => { setIsInfringementMoreThanFive(false); return }else{ - if(userProfile.infringements.length > 5){ + if(userProfile.infringements.length >= 5){ setIsInfringementMoreThanFive(true) } else{ @@ -172,7 +185,7 @@ const BlueSquareLayout = props => { 'Can\'t Schedule Time Off' )} -

Click to learn why

+

Click to learn why

: } + {isInfringementMoreThanFive && showExplanation && ( + + + + )} {isInfringementMoreThanFive && showInfoModal && ( Please Refer To The Explanation - -

You currently possess {infringementsNum} blue squares, with an annual limit of 5. If you require time off, kindly reach out to your Administrator.

-

Note: Blue squares expire after 1 calendar year from their issuance date.

+ +

Including your time already requested off, you have used the equivalent of {infringementsNum} blue squares. 5 is the maximum allowed per year.

+

+ Please remove a time-off request below or contact your Administrator if you need to request time off in addition to what is listed here:

+
    {infringements.map((el,index)=>{ + return
  1. {el.description}
    2. + })}
+ + +

Note: Blue squares expire after 1 calendar year from their issuance date.

+ From 1059daf41804d9941cff37b0d31e02b965177847 Mon Sep 17 00:00:00 2001 From: Sucheta Mukherjee Date: Sat, 16 Dec 2023 15:23:59 -0500 Subject: [PATCH 06/15] Implemented checks to see the infringementsAuthorizer has less than 5 blue squares, if they wanted to add a new blue square --- src/components/UserProfile/BlueSquareLayout.jsx | 2 +- src/components/UserProfile/BlueSquares/BlueSquare.jsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/UserProfile/BlueSquareLayout.jsx b/src/components/UserProfile/BlueSquareLayout.jsx index 73ffda88c6..23be3eb4ff 100644 --- a/src/components/UserProfile/BlueSquareLayout.jsx +++ b/src/components/UserProfile/BlueSquareLayout.jsx @@ -167,7 +167,7 @@ const BlueSquareLayout = props => { ) : null} - + {/* Replaces Schedule Blue Square button when there are more than 5 blue squares - by Sucheta */}
{isInfringementMoreThanFive ? diff --git a/src/components/UserProfile/BlueSquares/BlueSquare.jsx b/src/components/UserProfile/BlueSquares/BlueSquare.jsx index 595e14b6d1..94a023aa7e 100644 --- a/src/components/UserProfile/BlueSquares/BlueSquare.jsx +++ b/src/components/UserProfile/BlueSquares/BlueSquare.jsx @@ -8,7 +8,7 @@ import { formatDateFromDescriptionString } from 'utils/formatDateFromDescription const BlueSquare = (props) => { const isInfringementAuthorizer = props.hasPermission('infringementAuthorizer'); const canPutUserProfileImportantInfo = props.hasPermission('putUserProfileImportantInfo'); - const { blueSquares, handleBlueSquare } = props; + const { blueSquares, handleBlueSquare, isInfringementMoreThanFive } = props; return (
@@ -52,7 +52,7 @@ const BlueSquare = (props) => { : null}
- {isInfringementAuthorizer && ( + {isInfringementAuthorizer && !isInfringementMoreThanFive &&(
{ handleBlueSquare(true, 'addBlueSquare', ''); From 8bf898d434c1ffacf70e6a232afb992f1a27a093 Mon Sep 17 00:00:00 2001 From: Sucheta Mukherjee Date: Sat, 16 Dec 2023 16:33:59 -0500 Subject: [PATCH 07/15] removed unnecessary import form componnet --- src/components/UserProfile/BlueSquareLayout.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/UserProfile/BlueSquareLayout.jsx b/src/components/UserProfile/BlueSquareLayout.jsx index 23be3eb4ff..1a6c9db33f 100644 --- a/src/components/UserProfile/BlueSquareLayout.jsx +++ b/src/components/UserProfile/BlueSquareLayout.jsx @@ -14,7 +14,7 @@ import { addReason, patchReason } from 'actions/reasonsActions'; import moment from 'moment-timezone'; import { Modal } from 'react-bootstrap'; import { boxStyle } from 'styles'; -import { color } from 'd3'; + const BlueSquareLayout = props => { const fetchingReducer = (state, action) => { From c86519647a41f6cb880991d44849406951bc1a6c Mon Sep 17 00:00:00 2001 From: Sucheta Mukherjee Date: Thu, 21 Dec 2023 16:20:51 -0500 Subject: [PATCH 08/15] changed content of the new button and removed the link below the button and added hover, active and focus css styles --- src/components/UserProfile/BlueSquareLayout.jsx | 17 +++++++++++++---- src/components/UserProfile/UserProfile.scss | 16 ++++++++++++++++ 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/src/components/UserProfile/BlueSquareLayout.jsx b/src/components/UserProfile/BlueSquareLayout.jsx index 1a6c9db33f..a92b78324c 100644 --- a/src/components/UserProfile/BlueSquareLayout.jsx +++ b/src/components/UserProfile/BlueSquareLayout.jsx @@ -14,6 +14,8 @@ import { addReason, patchReason } from 'actions/reasonsActions'; import moment from 'moment-timezone'; import { Modal } from 'react-bootstrap'; import { boxStyle } from 'styles'; +import { color } from 'd3'; +import { fonts } from 'pdfmake/build/pdfmake'; const BlueSquareLayout = props => { @@ -173,19 +175,26 @@ const BlueSquareLayout = props => { {isInfringementMoreThanFive ? <> -

Click to learn why

+ {/*

Click to learn why

*/} :
diff --git a/src/components/UserProfile/BlueSquareLayout.jsx b/src/components/UserProfile/BlueSquareLayout.jsx index 4763ef3c17..e4289b8222 100644 --- a/src/components/UserProfile/BlueSquareLayout.jsx +++ b/src/components/UserProfile/BlueSquareLayout.jsx @@ -86,14 +86,7 @@ const BlueSquareLayout = props => { setShow(false); }, []); - // This handler is used for Info Modal, that open when button "Can't Schedule Time Off" is clicked - const openInfoModal = useCallback(() => { - setShowInfoModal(true); - }, []); -// This handler is used to close Info Modal, - const closeInfoModal = useCallback(() => { - setShowInfoModal(false); - }, []); + // This handler is used for Explanation Modal, that open when Click to learn why is clicked const openExplanationModal = useCallback(() => { setShowExplanation(true); diff --git a/src/components/UserProfile/ScheduleReasonModal/ScheduleReasonModal.jsx b/src/components/UserProfile/ScheduleReasonModal/ScheduleReasonModal.jsx index e783fda4cd..8d3f90fb98 100644 --- a/src/components/UserProfile/ScheduleReasonModal/ScheduleReasonModal.jsx +++ b/src/components/UserProfile/ScheduleReasonModal/ScheduleReasonModal.jsx @@ -29,7 +29,7 @@ const ScheduleReasonModal = ({ const initialFetching = async () => { fetchDispatch({ type: 'FETCHING_STARTED' }); const response = await getReasonByDate(userId, date); - console.log(response); + console.log("This is the response from ScheduleReasonModal.jsx",response); if (response.status !== 200) { fetchDispatch({ type: 'ERROR', From 855a92a04df8852dd3512ddee9d390c005308bb2 Mon Sep 17 00:00:00 2001 From: Sucheta Mukherjee Date: Tue, 2 Jan 2024 20:05:14 -0500 Subject: [PATCH 12/15] adds a function to check for previously scheduled reasons for blueSquares --- src/actions/reasonsActions.js | 11 ++++++ .../UserProfile/BlueSquareLayout.jsx | 36 ++++++++++++++++--- .../ScheduleReasonModal.jsx | 2 +- 3 files changed, 43 insertions(+), 6 deletions(-) diff --git a/src/actions/reasonsActions.js b/src/actions/reasonsActions.js index 3e1a74346c..073966dfe6 100644 --- a/src/actions/reasonsActions.js +++ b/src/actions/reasonsActions.js @@ -30,3 +30,14 @@ export async function patchReason(userId, reasonData) { return {message: error.response.data.message, errorCode: error.response.data.message, status: error.response.status} } } + + // gets all scheduled reasons +export async function getAllReasons(userId){ + try{ + const url = ENDPOINTS.GETALLUSERREASONS(userId); + const response = await axios.get(url); + return Promise.resolve(response) + }catch(error){ + return {message: error.response.data.message, errorCode:error.response.data.message, status: error.repsonse.status} + } +} \ No newline at end of file diff --git a/src/components/UserProfile/BlueSquareLayout.jsx b/src/components/UserProfile/BlueSquareLayout.jsx index e4289b8222..c8fe5c6610 100644 --- a/src/components/UserProfile/BlueSquareLayout.jsx +++ b/src/components/UserProfile/BlueSquareLayout.jsx @@ -10,10 +10,16 @@ import SchedulerExplanationModal from './SchedulerExplanationModal/SchedulerExpl import { useState, useEffect } from 'react'; import { useReducer } from 'react'; import Spinner from 'react-bootstrap/Spinner'; -import { addReason, patchReason } from 'actions/reasonsActions'; +import { addReason, patchReason, getAllReasons } from 'actions/reasonsActions'; import moment from 'moment-timezone'; import { Modal } from 'react-bootstrap'; import { boxStyle } from 'styles'; +import { ENDPOINTS } from 'utils/URL'; +import axios from 'axios'; +import { dispatch } from 'd3'; +import { set } from 'lodash'; + + @@ -58,8 +64,8 @@ const BlueSquareLayout = props => { const [infringementsNum, setInfringementsNum] = useState(userProfile.infringements.length) const [isInfringementMoreThanFive, setIsInfringementMoreThanFive] = useState(false); const [show, setShow] = useState(false); - // const [showInfoModal, setShowInfoModal]= useState(false); const [showExplanation, setShowExplanation]= useState(false); + const [allreasons, setAllReasons]= useState(""); const [reason, setReason] = useState(''); const [date, setDate] = useState( moment @@ -95,8 +101,9 @@ const BlueSquareLayout = props => { const closeExplanationModal = useCallback(() => { setShowExplanation(false); }, []); - - + + + // This useEffect will check for any changes in the number of infringements useEffect(()=>{ const checkInfringementCount = ()=>{ @@ -113,9 +120,28 @@ const BlueSquareLayout = props => { } } + // checks for blueSquare scheduled reasons + const checkReasons = async ()=>{ + fetchDispatch({type: 'FETCHING_STARTED'}) + const response = await getAllReasons(userProfile._id); + if (response.status !== 200) { + fetchDispatch({ + type: 'ERROR', + payload: { message: response.message, errorCode: response.errorCode }, + }); + } else { + // console.log(response.data) + fetchDispatch({ type: 'SUCCESS' }); + setAllReasons(response.data) + } + } + checkReasons(); checkInfringementCount(); },[]); - + console.log("This is all reason", allreasons); + // console.log(infringementsNum); + // console.log(parseInt(userProfile.infringements.length) + parseInt(allreasons.reasons.length)); + const handleSubmit = async event => { event.preventDefault(); if (fetchState.isSet && IsReasonUpdated) { //if reason already exists and if it is changed by the user diff --git a/src/components/UserProfile/ScheduleReasonModal/ScheduleReasonModal.jsx b/src/components/UserProfile/ScheduleReasonModal/ScheduleReasonModal.jsx index 8d3f90fb98..e783fda4cd 100644 --- a/src/components/UserProfile/ScheduleReasonModal/ScheduleReasonModal.jsx +++ b/src/components/UserProfile/ScheduleReasonModal/ScheduleReasonModal.jsx @@ -29,7 +29,7 @@ const ScheduleReasonModal = ({ const initialFetching = async () => { fetchDispatch({ type: 'FETCHING_STARTED' }); const response = await getReasonByDate(userId, date); - console.log("This is the response from ScheduleReasonModal.jsx",response); + console.log(response); if (response.status !== 200) { fetchDispatch({ type: 'ERROR', From 1e87dbd586a030d67e22e4f451a4803ca18565f2 Mon Sep 17 00:00:00 2001 From: Sucheta Mukherjee Date: Wed, 3 Jan 2024 16:56:52 -0500 Subject: [PATCH 13/15] adds checks for scheduled reasons, shows blue square reasons and the scheduled time off reasons --- src/actions/reasonsActions.js | 2 +- .../UserProfile/BlueSquareLayout.jsx | 125 +++++++++--------- .../ScheduleReasonModal.jsx | 2 +- .../SchedulerExplanationModal.jsx | 22 +-- 4 files changed, 75 insertions(+), 76 deletions(-) diff --git a/src/actions/reasonsActions.js b/src/actions/reasonsActions.js index 073966dfe6..b093b53e6e 100644 --- a/src/actions/reasonsActions.js +++ b/src/actions/reasonsActions.js @@ -31,7 +31,7 @@ export async function patchReason(userId, reasonData) { } } - // gets all scheduled reasons + // gets all scheduled reasons - Sucheta export async function getAllReasons(userId){ try{ const url = ENDPOINTS.GETALLUSERREASONS(userId); diff --git a/src/components/UserProfile/BlueSquareLayout.jsx b/src/components/UserProfile/BlueSquareLayout.jsx index c8fe5c6610..c7e9456f10 100644 --- a/src/components/UserProfile/BlueSquareLayout.jsx +++ b/src/components/UserProfile/BlueSquareLayout.jsx @@ -14,13 +14,6 @@ import { addReason, patchReason, getAllReasons } from 'actions/reasonsActions'; import moment from 'moment-timezone'; import { Modal } from 'react-bootstrap'; import { boxStyle } from 'styles'; -import { ENDPOINTS } from 'utils/URL'; -import axios from 'axios'; -import { dispatch } from 'd3'; -import { set } from 'lodash'; - - - const BlueSquareLayout = props => { @@ -66,6 +59,8 @@ const BlueSquareLayout = props => { const [show, setShow] = useState(false); const [showExplanation, setShowExplanation]= useState(false); const [allreasons, setAllReasons]= useState(""); + const [numberOfReasons, setNumberOfReasons] = useState(""); + const [addsReason, setAddsReason] = useState(false); // this flag will be set to true, each time a scheduled reason has been added - sucheta const [reason, setReason] = useState(''); const [date, setDate] = useState( moment @@ -102,7 +97,31 @@ const BlueSquareLayout = props => { setShowExplanation(false); }, []); - + + // checks for blueSquare scheduled reasons + useEffect(()=>{ + let isMounted = true; + const checkReasons = async ()=>{ + fetchDispatch({type: 'FETCHING_STARTED'}) + const response = await getAllReasons(userProfile._id); + if (response.status !== 200) { + fetchDispatch({ + type: 'ERROR', + payload: { message: response.message, errorCode: response.errorCode }, + }); + } else { + fetchDispatch({ type: 'SUCCESS' }); + if (isMounted){ + setAllReasons(response.data.reasons) + setNumberOfReasons(response.data.reasons.length); + } + + } + } + checkReasons() + return () => isMounted = false; + + }, [addsReason]) // This useEffect will check for any changes in the number of infringements useEffect(()=>{ @@ -120,27 +139,8 @@ const BlueSquareLayout = props => { } } - // checks for blueSquare scheduled reasons - const checkReasons = async ()=>{ - fetchDispatch({type: 'FETCHING_STARTED'}) - const response = await getAllReasons(userProfile._id); - if (response.status !== 200) { - fetchDispatch({ - type: 'ERROR', - payload: { message: response.message, errorCode: response.errorCode }, - }); - } else { - // console.log(response.data) - fetchDispatch({ type: 'SUCCESS' }); - setAllReasons(response.data) - } - } - checkReasons(); checkInfringementCount(); },[]); - console.log("This is all reason", allreasons); - // console.log(infringementsNum); - // console.log(parseInt(userProfile.infringements.length) + parseInt(allreasons.reasons.length)); const handleSubmit = async event => { event.preventDefault(); @@ -167,9 +167,11 @@ const BlueSquareLayout = props => { }); } else { fetchDispatch({ type: 'SUCCESS' }); + setAddsReason(true); } } setIsReasonUpdated(false); + setAddsReason(false); }; if (canEdit) { @@ -188,35 +190,33 @@ const BlueSquareLayout = props => {
- {/* Replaces Schedule Blue Square button when there are more than 5 blue squares - by Sucheta */} + {/* Replaces Schedule Blue Square button when there are more than 5 blue squares or scheduled reasons - by Sucheta */}
- {isInfringementMoreThanFive ? - <> - - {/*

Click to learn why

*/} - - : + : } + + }
- {isInfringementMoreThanFive && showExplanation && ( + {(isInfringementMoreThanFive || numberOfReasons >= 5 || (infringementsNum + numberOfReasons >= 5 )) && showExplanation && ( )} - {/* {isInfringementMoreThanFive && showInfoModal && - ( - - )} */} {show && ( { fetchDispatch({ type: 'FETCHING_STARTED' }); const response = await getReasonByDate(userId, date); - console.log(response); + // console.log(response); if (response.status !== 200) { fetchDispatch({ type: 'ERROR', diff --git a/src/components/UserProfile/SchedulerExplanationModal/SchedulerExplanationModal.jsx b/src/components/UserProfile/SchedulerExplanationModal/SchedulerExplanationModal.jsx index 6375b139f1..860d65e7e4 100644 --- a/src/components/UserProfile/SchedulerExplanationModal/SchedulerExplanationModal.jsx +++ b/src/components/UserProfile/SchedulerExplanationModal/SchedulerExplanationModal.jsx @@ -2,8 +2,7 @@ import Button from 'react-bootstrap/Button'; import Modal from 'react-bootstrap/Modal'; import { boxStyle } from 'styles'; -function SchedulerExplanationModal({infringementsNum,handleClose, infringements}) { - +function SchedulerExplanationModal({infringementsNum,handleClose, infringements, reasons}) { return (
Please Refer To The Explanation - + {/*

You have {infringementsNum} blue squares already and 5 is the maximum allowed per year. Please contact your Administrator if you need to request time off

*/} -

Including your time already requested off, you have used the equivalent of {infringementsNum} blue squares. 5 is the maximum allowed per year. Please remove a time-off request below or contact your Administrator if you need to request time off in addition to what is listed here: -

-
    {infringements.map((el,index)=>{ - return
  1. {el.description}
    2. - })}
+

Including your time already requested off, you have used the equivalent of {infringementsNum} blue squares and {reasons.length} schedule time offs. 5 is the maximum allowed per year. Please remove a time-off request below or contact your Administrator if you need to request time off in addition to what is listed here: +

+ {infringements && <>
INFRINGEMENTS
    {infringements.map((el,index)=>{ + return
  1. {el.description}
    2. + })}
} + {reasons && <> +
SCHEDULED REASONS
+
    + {reasons.map((el,index)=>{ + return
  • {new Date(el.date).toLocaleDateString()} - {el.reason}
    • })} +
+ }

Note: Blue squares expire after 1 calendar year from their issuance date.

From 7f33d9ea7dc1f6c41642bcf81b32eb7c1467b280 Mon Sep 17 00:00:00 2001 From: Sucheta Mukherjee Date: Thu, 4 Jan 2024 14:06:07 -0500 Subject: [PATCH 14/15] adds dependency to useEffect hook in BlueSquareLayout.jsx, function checkInfringements --- .../UserProfile/BlueSquareLayout.jsx | 15 +++++++-------- .../SchedulerExplanationModal.jsx | 4 ++-- src/components/UserProfile/UserProfile.jsx | 19 ++++++++++++++++--- 3 files changed, 25 insertions(+), 13 deletions(-) diff --git a/src/components/UserProfile/BlueSquareLayout.jsx b/src/components/UserProfile/BlueSquareLayout.jsx index c7e9456f10..6d2f9f169d 100644 --- a/src/components/UserProfile/BlueSquareLayout.jsx +++ b/src/components/UserProfile/BlueSquareLayout.jsx @@ -122,26 +122,25 @@ const BlueSquareLayout = props => { return () => isMounted = false; }, [addsReason]) - -// This useEffect will check for any changes in the number of infringements + useEffect(()=>{ const checkInfringementCount = ()=>{ + setInfringementsNum(userProfile.infringements.length) if(userProfile.role === "Administrator" || userProfile.role === "Owner"){ setIsInfringementMoreThanFive(false); return }else{ - if(userProfile.infringements.length >= 5){ + if(infringementsNum >= 5){ setIsInfringementMoreThanFive(true) } else{ setIsInfringementMoreThanFive(false) } } - } checkInfringementCount(); - },[]); - + },[userProfile]); + const handleSubmit = async event => { event.preventDefault(); if (fetchState.isSet && IsReasonUpdated) { //if reason already exists and if it is changed by the user @@ -159,7 +158,7 @@ const BlueSquareLayout = props => { } else { //add/create reason fetchDispatch({ type: 'FETCHING_STARTED' }); const response = await addReason(userProfile._id, { date: date, message: reason }); - console.log(response); + // console.log(response); if (response.status !== 200) { fetchDispatch({ type: 'ERROR', @@ -193,7 +192,7 @@ const BlueSquareLayout = props => { {/* Replaces Schedule Blue Square button when there are more than 5 blue squares or scheduled reasons - by Sucheta */}
{ - isInfringementMoreThanFive || numberOfReasons >= 5 || (infringementsNum + numberOfReasons >= 5 ) ? <> + ((isInfringementMoreThanFive || numberOfReasons >= 5 || (infringementsNum + numberOfReasons >= 5 )) && !(userProfile.role === "Administrator" || userProfile.role === "Owner") )? <>
- + {/* Replaces Schedule Blue Square button when there are more than 5 blue squares or scheduled reasons - by Sucheta */}
{ diff --git a/src/components/UserProfile/BlueSquares/BlueSquare.jsx b/src/components/UserProfile/BlueSquares/BlueSquare.jsx index 94a023aa7e..51e1501273 100644 --- a/src/components/UserProfile/BlueSquares/BlueSquare.jsx +++ b/src/components/UserProfile/BlueSquares/BlueSquare.jsx @@ -8,7 +8,7 @@ import { formatDateFromDescriptionString } from 'utils/formatDateFromDescription const BlueSquare = (props) => { const isInfringementAuthorizer = props.hasPermission('infringementAuthorizer'); const canPutUserProfileImportantInfo = props.hasPermission('putUserProfileImportantInfo'); - const { blueSquares, handleBlueSquare, isInfringementMoreThanFive } = props; + const { blueSquares, handleBlueSquare, isInfringementMoreThanFive, numberOfReasons, infringementsNum } = props; return (
@@ -52,7 +52,7 @@ const BlueSquare = (props) => { : null}
- {isInfringementAuthorizer && !isInfringementMoreThanFive &&( + {isInfringementAuthorizer && (!(infringementsNum >= 5 || numberOfReasons >= 5 || (infringementsNum + numberOfReasons >= 5 ))) && (
{ handleBlueSquare(true, 'addBlueSquare', '');