Sucheta Replace the blue square self-scheduler for anyone with 5 or more blue squares (anyone other than Owner/Admin) #1715

sucheta90 · 2023-12-16T21:26:24Z

Description

(PRIORITY HIGH) Jae: (WIP Sucheta ) Replace the blue square self-scheduler for anyone with 5 or more blue squares (anyone other than Owner/Admin)

Related PRs PR1542+614, PR1081
Profile Page>Below Blue Squares
Replace with something that is a different color (not red) that says
Can’t Schedule Time Off
(click to learn why)
This is needed because people with 5 or more blue squares should no longer be on the team and, if they still are, will need an Admin to enter their time off for them
It should account for any future scheduled time off too (see above)
When they click the new button, it should say this if 5 or more blue squares:

*You have X blue squares already and 5 are the maximum allowed per year. Please contact your Administrator if you need to request time off.

Note: Blue squares drop off 1 calendar year after they are issued. *

When they click the new button, it should say this if they have scheduled time off equaling 5 or more blue squares:

*Including your time already requested off, you have used the equivalent of X 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:

Time off request 1
Time off request 2
Etc.

Note: Blue squares drop off 1 calendar year after they are issued. *

Related PRS (if any):

No backend PRs
…

Main changes explained:

Created component:

components > UserProfile > SchedulerExplanationModal

Adds new handler functions to BlueSquareLayout.jsx, that opens modals based on user roles and the number of BlueSquares assigned or scheduled.
The button Schedule Blue Square Reason changes to Can't Schedule Time Off if ((isInfringementMoreThanFive || numberOfReasons >= 5 || (infringementsNum + numberOfReasons >= 5 )) && !(userProfile.role === "Administrator" || userProfile.role === "Owner"))

…

How to test:

check into the current branch
do npm install and ... to run this PR locally
Clear site data/cache
log as (volunteer/ manager/ assistant manager) user
go to dashboard→ View Profile → BlueSquare section →…
If the numbers of BlueSquare are less than 5 the Users with permission to Schedule blueSquares, should see the Schedule Blue Square button. Otherwise, the button changes to Can't Schedule Time Off Click to learn why.
Click on the button to see a modal with an explanation of why scheduling has been disabled.

Screenshots or videos of changes:

Before Change
https://github.com/OneCommunityGlobal/HighestGoodNetworkApp/assets/101291283/159ce01e-da12-4b2a-ac37-86c47a8e26cb

Updated Changes

PR1715_changeRequested.mp4

Note:

Please note nothing has changed for the user role Admin/Owner. Last updated 01/04/2024

…dynamically

…es to reach out to the administrator

…ser to schedule a blue sqaure

… square scheduler button

…etting schedule time offs

… blue squares, if they wanted to add a new blue square

pika-chu11

Hi @sucheta90 , I have tested you PR and it looks good! Great Job!
Here is the test result:

Log is as Volunteer/Mentor/Manager Account:
- Under the Profile -> BlueSquare Section
  - The number of blue squares are more than 5
  - I did see a button "Can't Schedule Time Off" on the BlueSquare Section.
  - I can also see all the reasons why each blue sqaure is being assigned to the user by clicking the "Click to learn why".

Please watch the video for the overview of the test:

PR.1715.mp4

bienzguoa · 2023-12-17T03:29:53Z

Hi @sucheta90, your codes looks good and workable! But I followed the steps to test for this PR, it still showed as "before changes", Is there anything I was wrong? Thanks!

sucheta90 · 2023-12-18T15:15:16Z

Hello @bienzguoa, there are no changes for Administrator and Owner roles. Hence, if you are logged in as an Administrator, which in your case is true (as shown in the picture above), you will still see the "Schedule Blue Square Reason" button. All other roles should see the changes. Let me know if you have questions.

F-Adam-B · 2023-12-19T00:56:28Z

src/components/UserProfile/BlueSquareLayout.jsx

+
+
+//  This useEffect will check for any changes in the number of infringements
+  useEffect(()=>{


This is my first PR review, so I'm getting up to speed understanding things, so feel free to push back. But is this useEffect necessary? Can you not derive the number of infringements by the length of the infringement array? Additionally, this useEffect is likely throwing a linter error due to the use of the useProfile object. I get you left it empty so it only runs once when the component renders, but the dependancy array should be populated with the userProfile, and if this causes problems it's probably better to not use the effect.

You do have a point. There is already a variable "infringementsNum" initialized at the number of infringements in the userProfile prop (userProfile.infringements.length). This could be used to render modals conditionally too. I believe the major reason to have that useEffect run on first render, is to check if the user is an Admin or the Owner and not render those modals if so.
This is only my second week reviewing PR's just FYI, I could be wrong.

Hi there, @ilyaflaks! Thank you so much for pointing that out. I just wanted to clarify for you, @F-Adam-B, that the reason I added the useEffect hook was because I needed to check for infringements after the component had rendered. The existing code already takes care of checking the user's role for permissions. I really appreciate you taking the time to review my code, and I'm always open to any suggestions you may have. I'm still learning, so any feedback is super valuable to me! Thanks again!

ilyaflaks

I reviewed this PR functionality and the code and everything works for me just as described

"Owner" level account. Can schedule a new blue square reason

Volunteer level account with 7 blue squares can not:

Modal that shows up when I click "Can't Schedule Time Off" button:

Good work!

ilyaflaks · 2023-12-19T22:57:36Z

src/components/UserProfile/BlueSquareLayout.jsx

+
+
+//  This useEffect will check for any changes in the number of infringements
+  useEffect(()=>{


You do have a point. There is already a variable "infringementsNum" initialized at the number of infringements in the userProfile prop (userProfile.infringements.length). This could be used to render modals conditionally too. I believe the major reason to have that useEffect run on first render, is to check if the user is an Admin or the Owner and not render those modals if so.
This is only my second week reviewing PR's just FYI, I could be wrong.

keyunhuangg

Logged in as admin. 'schedule blue square' button is available since have < 5
Logged in as volunteer. Having > 5 blue square leads to cannot schedule anymore. Also the reason to see why is below that as well

Alforoan

I am not sure if it's supposed to be this way, but the user has to refresh for the yellow button and the blue button to appear as can be seen by my video.

pr.review.1715.mp4

one-community · 2023-12-21T19:19:46Z

Please update button and modal text to match this:

…on and added hover, active and focus css styles

…n should open a modal with the explanation

this-journey

Hello! @sucheta90 ! I've reviewed your PR and found that the initial functionality is working such as when logged in as a volunteer with more than 5 blue squares I am getting the yellow button and when logged in as an owner/admin I am still showing the "schedule blue square" button even when the user is beyond 5 squares. I've attached a video below.

Screen.Recording.2023-12-21.at.1.39.07.PM.mov

I start running into a couple things as an owner when deleting squares above 5 to bring the total to 4 or less I have to reload the page to get the schedule blue square button back and as a volunteer it is still allowing me to schedule time off that would take me over the threshold of 5 squares total. I've attached a video here for reference.

Screen.Recording.2023-12-21.at.1.49.44.PM.mov

ljrirene

I tested with volunteer/admin/new volunteer/assistant manager accounts. The "can't schedule" button works here. But when I was trying to schedule a blue square for an active account, no new blue square showed. You can watch the video here. Thank you!

1715.mov

sucheta90 · 2023-12-23T17:38:09Z

Dear @this-journey,

I would like to thank you for taking the time to review the code. I noticed that you pointed out the fact that the system still allows scheduling the Blue square, which will result in having more than 5 squares. I want to clarify that in this PR, it only checks for the existing blue squares and not the ones that will appear in the future. However, I believe that your point is valid and I would like to discuss it with the community. @one-community Please advise.

Thank you.

sucheta90 · 2023-12-23T17:42:23Z

I tested with volunteer/admin/new volunteer/assistant manager accounts. The "can't schedule" button works here. But when I was trying to schedule a blue square for an active account, no new blue square showed. You can watch the video here. Thank you!

1715.mov

Hello @ljrirene,

I believe the reason why the blue square is not assigned could be because the scheduled date is set in the future. I came to this assumption after checking the deployed app. However, to confirm that this is the expected behavior, I will try to recreate the scenario and inform you of the outcome.

Once again, I appreciate your time for reviewing my code.

chappdev2019 · 2023-12-30T19:25:32Z

Hi @sucheta90

I Logged in as volunteer. The initial functionality is working. However, if the page isn't refreshed, the button allows them to continue scheduling without limit. Will await further clarification from Jae on this matter.

2023-12-30.14-23-56-037.mp4

one-community · 2024-01-01T04:37:18Z

Dear @this-journey,

I would like to thank you for taking the time to review the code. I noticed that you pointed out the fact that the system still allows scheduling the Blue square, which will result in having more than 5 squares. I want to clarify that in this PR, it only checks for the existing blue squares and not the ones that will appear in the future. However, I believe that your point is valid and I would like to discuss it with the community. @one-community Please advise.

Thank you.

Great catch! It should not allow them to log more time off than they have available blue squares.

one-community · 2024-01-01T04:38:32Z

Hi @sucheta90

I Logged in as volunteer. The initial functionality is working. However, if the page isn't refreshed, the button allows them to continue scheduling without limit. Will await further clarification from Jae on this matter.

2023-12-30.14-23-56-037.mp4

This is another great catch! It should never allow them to log more weeks off than they have available blue squares.

this-journey

Hi @sucheta90 ! So I started in a volunteer account with more than 5 blue squares already assigned to it and was able to see the yellow button stating that I couldn't request time off .

Then I logged out and logged back in as an owner and deleted that same volunteer users blue squares until I was down to 4, but the yellow button didn't disappear until I reloaded the page. You can see in this photo that there are only 4 squares, but the yellow button is still present.

I then logged out as owner and logged back in as that same volunteer with only 4 blue squares. I was able to schedule time off for 2 subsequent weeks which would've taken my total above the 5 allowed and the yellow button still did not appear even on page reload.

Screen.Recording.2024-01-05.at.9.38.47.AM.mov

sucheta90 · 2024-01-05T18:59:49Z

Hi @sucheta90 ! So I started in a volunteer account with more than 5 blue squares already assigned to it and was able to see the yellow button stating that I couldn't request time off .

Then I logged out and logged back in as an owner and deleted that same volunteer users blue squares until I was down to 4, but the yellow button didn't disappear until I reloaded the page. You can see in this photo that there are only 4 squares, but the yellow button is still present.

I then logged out as owner and logged back in as that same volunteer with only 4 blue squares. I was able to schedule time off for 2 subsequent weeks which would've taken my total above the 5 allowed and the yellow button still did not appear even on page reload.

Screen.Recording.2024-01-05.at.9.38.47.AM.mov

Hi @this-journey, thank you for reviewing the code. However, based on the screenshots and video, it seems that the changes haven't been reflected. To ensure that you have the most recent updates, please execute the following commands in your terminal: git pull origin Sucheta_replace_blue_square_self_scheduler, npm i, and npm run start:local. You can also refer to the updated demo video above. Please let me know if you have any queries.

chappdev2019 · 2024-01-07T01:04:39Z

Hi @sucheta90

Thanks for the updates. Now I am running into this issue: I have four blue squares in 2023 and the message shows that I have used 4 blue squares. It seems my available Blue Squares for 2024 aren't updating correctly.

2024-01-06.19-51-07-171.mp4

Hello @mianmiantea2019. Unfortunately, automatic updating of blue squares for the current year is out of scope for this PR. This PR only checks for any existing blue squares and any existing scheduled vacations. The Owner/ Administrator has permission to delete the existing blue squares. However, to remove the scheduled vacations, the developer has to remove those by going into the database for now.

yuhuimin1996

Hi @sucheta90
I logged in as a volunteer. And I scheduled 5 times off, the Schedule Blue Square Reason button turned into yellow. Good Job! While I didn't see the '+' button to add the blue square.

Haoxiang310 · 2024-01-11T23:26:31Z

I've tested your pr with volunteer role. It seems everything works as expected.
I tested scheduling a blue square of a volunteer user with 4 blue squares and I can see the blue scheduling button:

PR6-.1715.4.blue.square.mov

Then I added a blue square using my owner role, and now the volunteer user have 5 blue squares and cannot see the blue scheduling button, but was able to see the yellow "Can't schedule time off" button:

PR6.1715.5.blue.square.mov

Renanluizssx

hi @sucheta90, It's not displaying the button 'Can't Schedule Time Off. Click to learn why.' I added more than 5 Blue Squares, but the button still reads 'Schedule Blue Square Reason

2024-01-12.18-06-52.mov

pshereen

I tested in the PR with volunteer role with more than 5 blue squares.
And it showed the yellow button as expected.

Sophie-lei

Hi, I tested this PR with the manager role. I noticed that after scheduling a fourth blue square reason and adding one Blue Square, the button changes to yellow with the message 'can't schedule blue square reason.' However, the '+' sign for adding a new blue square remains visible. I'm unsure if this is intended and whether people get that access to add more blue square. Please watch the video for more information.

Screen.Recording.2024-01-13.at.6.26.59.PM.online-video-cutter.com.mp4

sucheta90 · 2024-01-18T17:42:32Z

Hi, I tested this PR with the manager role. I noticed that after scheduling a fourth blue square reason and adding one Blue Square, the button changes to yellow with the message 'can't schedule blue square reason.' However, the '+' sign for adding a new blue square remains visible. I'm unsure if this is intended and whether people get that access to add more blue square. Please watch the video for more information.

Hello @Sophie-lei, thank you so much for taking the time to review the code. This behavior is not intended. I am glad you pointed this out. I will make the change right away!

…to which the + button will rendered

666saofeng

Hi, I tested this PR with a volunteer role. After adding 5 blue squares, users are still able to add more blue squares without closing the modal. The button then changes to yellow and displays the message 'Can't schedule blue square: reason'. I am unsure if this behavior is an issue.

HGN.APP.-.Google.Chrome.2024-01-20.21-42-04.mp4

rusalshrestha98 · 2024-01-21T03:53:57Z

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(response);


Good job commenting this out as it is not a good idea to have console.log() statements in the codebase, but I would just remove it entirely. They are helpful when used in your local development environment, but serves no purpose in the actual app and can even cause security issues. Additionally, it can also be forgotten and cause tech debt to accumulate over time.

Hello @rusalshrestha98, thank you for taking the time to review this PR. I will go ahead and remove the unnecessary logs and try to resolve any conflicts in the branch.

rusalshrestha98 · 2024-01-21T03:56:39Z

src/components/UserProfile/BlueSquareLayout.jsx

@@ -95,17 +158,19 @@ 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);


Please remove log

rusalshrestha98

Remove logs and resolve conflicts

X1aoZhang99

Hi Sucheta,

During my testing of the PR with both the volunteer and manager roles, I encountered an unexpected issue.

I found that after scheduling time off in the modal, the modal does not automatically close. This allows users to keep scheduling as many times as they want, even though the button changes to "Can't Schedule Time Off." If the modal is not closed, users can exceed the limit of 5 times.

Please refer to the video.

Screen.Recording.2024-01-22.at.14.33.25.mov

sucheta90 · 2024-01-24T20:45:38Z

I have created a new PR with the updated code PR1874

sucheta90 added 7 commits December 15, 2023 09:46

Checks for infringements, if more than 5, the button content changes …

1f96578

…dynamically

adds modal functionality showing the number of blue squares and advis…

d953231

…es to reach out to the administrator

commit checks for the counts of blue squares and accordingly allows u…

a58754d

…ser to schedule a blue sqaure

this commit adds a checks user roles and accordingly renders the blue…

58453c6

… square scheduler button

adds handler function and opnes modal to explain the reason for not l…

49cef68

…etting schedule time offs

Implemented checks to see the infringementsAuthorizer has less than 5…

1059daf

… blue squares, if they wanted to add a new blue square

removed unnecessary import form componnet

8bf898d

sucheta90 added the High Priority - Please Review First label Dec 16, 2023

pika-chu11 previously approved these changes Dec 16, 2023

View reviewed changes

F-Adam-B reviewed Dec 19, 2023

View reviewed changes

ilyaflaks previously approved these changes Dec 19, 2023

View reviewed changes

keyunhuangg previously approved these changes Dec 20, 2023

View reviewed changes

Alforoan suggested changes Dec 21, 2023

View reviewed changes

changed content of the new button and removed the link below the butt…

c865196

…on and added hover, active and focus css styles

sucheta90 dismissed stale reviews from keyunhuangg, ilyaflaks, and pika-chu11 via c865196 December 21, 2023 21:21

sucheta90 added 2 commits December 21, 2023 16:24

removed unnecessary imports

492daf3

modified content in SchedulerExplanationModal component and the butto…

2dd3e5c

…n should open a modal with the explanation

this-journey suggested changes Dec 21, 2023

View reviewed changes

ljrirene reviewed Dec 23, 2023

View reviewed changes

removes unused states from BlueSquareLayout.jsx

31849f7

this-journey suggested changes Jan 5, 2024

View reviewed changes

sucheta90 assigned F-Adam-B, ljrirene, chappdev2019, pika-chu11, bienzguoa, this-journey, ilyaflaks and Alforoan Jan 5, 2024

yuhuimin1996 self-requested a review January 11, 2024 01:53

yuhuimin1996 reviewed Jan 11, 2024

View reviewed changes

Renanluizssx reviewed Jan 12, 2024

View reviewed changes

Haoxiang310 requested review from Haoxiang310 and removed request for Haoxiang310 January 13, 2024 02:25

pshereen previously approved these changes Jan 13, 2024

View reviewed changes

Sophie-lei suggested changes Jan 14, 2024

View reviewed changes

adds a check for total infringements and scheduled raesons according …

326ae12

…to which the + button will rendered

sucheta90 dismissed pshereen’s stale review via 326ae12 January 18, 2024 18:28

666saofeng suggested changes Jan 21, 2024

View reviewed changes

rusalshrestha98 reviewed Jan 21, 2024

View reviewed changes

rusalshrestha98 suggested changes Jan 21, 2024

View reviewed changes

X1aoZhang99 suggested changes Jan 22, 2024

View reviewed changes

sucheta90 mentioned this pull request Jan 24, 2024

Sucheta Replace the blue square self-scheduler for anyone with 5 or more blue squares (anyone other than Owner/Admin)- updated #1874

Merged

sucheta90 closed this Jan 24, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sucheta Replace the blue square self-scheduler for anyone with 5 or more blue squares (anyone other than Owner/Admin) #1715

Sucheta Replace the blue square self-scheduler for anyone with 5 or more blue squares (anyone other than Owner/Admin) #1715

sucheta90 commented Dec 16, 2023 •

edited

Loading

pika-chu11 left a comment

bienzguoa commented Dec 17, 2023

sucheta90 commented Dec 18, 2023 •

edited

Loading

F-Adam-B Dec 19, 2023

ilyaflaks Dec 19, 2023

sucheta90 Dec 23, 2023

ilyaflaks left a comment

ilyaflaks Dec 19, 2023

keyunhuangg left a comment

Alforoan left a comment

one-community commented Dec 21, 2023

this-journey left a comment •

edited

Loading

ljrirene left a comment

sucheta90 commented Dec 23, 2023

sucheta90 commented Dec 23, 2023

chappdev2019 commented Dec 30, 2023 •

edited

Loading

one-community commented Jan 1, 2024

one-community commented Jan 1, 2024

this-journey left a comment

sucheta90 commented Jan 5, 2024

chappdev2019 commented Jan 7, 2024 •

edited by sucheta90

Loading

yuhuimin1996 left a comment

Haoxiang310 commented Jan 11, 2024

Renanluizssx left a comment

pshereen left a comment •

edited

Loading

Sophie-lei left a comment

sucheta90 commented Jan 18, 2024

666saofeng left a comment

rusalshrestha98 Jan 21, 2024 •

edited

Loading

sucheta90 Jan 22, 2024

rusalshrestha98 Jan 21, 2024 •

edited

Loading

rusalshrestha98 left a comment

X1aoZhang99 left a comment

sucheta90 commented Jan 24, 2024



		// This useEffect will check for any changes in the number of infringements
		useEffect(()=>{

Sucheta Replace the blue square self-scheduler for anyone with 5 or more blue squares (anyone other than Owner/Admin) #1715

Sucheta Replace the blue square self-scheduler for anyone with 5 or more blue squares (anyone other than Owner/Admin) #1715

Conversation

sucheta90 commented Dec 16, 2023 • edited Loading

Description

Related PRS (if any):

Main changes explained:

How to test:

Screenshots or videos of changes:

Note:

pika-chu11 left a comment

Choose a reason for hiding this comment

bienzguoa commented Dec 17, 2023

sucheta90 commented Dec 18, 2023 • edited Loading

F-Adam-B Dec 19, 2023

Choose a reason for hiding this comment

ilyaflaks Dec 19, 2023

Choose a reason for hiding this comment

sucheta90 Dec 23, 2023

Choose a reason for hiding this comment

ilyaflaks left a comment

Choose a reason for hiding this comment

ilyaflaks Dec 19, 2023

Choose a reason for hiding this comment

keyunhuangg left a comment

Choose a reason for hiding this comment

Alforoan left a comment

Choose a reason for hiding this comment

one-community commented Dec 21, 2023

this-journey left a comment • edited Loading

Choose a reason for hiding this comment

ljrirene left a comment

Choose a reason for hiding this comment

sucheta90 commented Dec 23, 2023

sucheta90 commented Dec 23, 2023

chappdev2019 commented Dec 30, 2023 • edited Loading

one-community commented Jan 1, 2024

one-community commented Jan 1, 2024

this-journey left a comment

Choose a reason for hiding this comment

sucheta90 commented Jan 5, 2024

chappdev2019 commented Jan 7, 2024 • edited by sucheta90 Loading

yuhuimin1996 left a comment

Choose a reason for hiding this comment

Haoxiang310 commented Jan 11, 2024

Renanluizssx left a comment

Choose a reason for hiding this comment

pshereen left a comment • edited Loading

Choose a reason for hiding this comment

Sophie-lei left a comment

Choose a reason for hiding this comment

sucheta90 commented Jan 18, 2024

666saofeng left a comment

Choose a reason for hiding this comment

rusalshrestha98 Jan 21, 2024 • edited Loading

Choose a reason for hiding this comment

sucheta90 Jan 22, 2024

Choose a reason for hiding this comment

rusalshrestha98 Jan 21, 2024 • edited Loading

Choose a reason for hiding this comment

rusalshrestha98 left a comment

Choose a reason for hiding this comment

X1aoZhang99 left a comment

Choose a reason for hiding this comment

sucheta90 commented Jan 24, 2024

sucheta90 commented Dec 16, 2023 •

edited

Loading

sucheta90 commented Dec 18, 2023 •

edited

Loading

this-journey left a comment •

edited

Loading

chappdev2019 commented Dec 30, 2023 •

edited

Loading

chappdev2019 commented Jan 7, 2024 •

edited by sucheta90

Loading

pshereen left a comment •

edited

Loading

rusalshrestha98 Jan 21, 2024 •

edited

Loading

rusalshrestha98 Jan 21, 2024 •

edited

Loading