Peterson impl make profile team code field show existing codes

[peterson337]

Description

This feature is designed to assist the administrator or owner in assigning a team code to a specific user by providing suggestions for codes in use.

Related PRS (if any):

None
…

Main changes explained:

The user profile file has been updated to retrieve the team codes from the database.

The Auto Complete Team Code component is designed to provide automatic suggestions in the input field.
…

How to test:

1. check into current branch
2. do npm install and npm start to run this PR locally
3. Log in as an administrator or owner
4. go to View Profile→ Teams
5. Click on the input field, and a dropdown menu will appear with a spinning spinner. Once the team codes are loaded, the spinner will disappear, and the codes will be displayed. You can close the dropdown menu by clicking outside of it.
6. Once the dropdown menu is open, click on the code or type in the input to find a specific code.
   8.After adding a new code for the user, click the "Save changes" button to assign the team code to the new user.

Screenshots or videos of changes:

Note:

Include the information the reviewers need to know.

[linkhanthtel]

I reviewed your PR and everything worked as expected! Nice work!

2191.mov

[hbodgal]

I was able to see loading spinner and a dropdown with all codes. And even search and filter options. Everything works as required.

[MinSun0814]

There is now a dropdown with suggested input. Works as intended.

[meetpadhiar4]

Hi, I reviewed your PR and it is working as intended. Please refer the video attached.

PR.2191.mov

[peter6866]

Great work on this team code suggestion feature! I followed your testing instructions and was able to successfully:

Test input field:

• The dropdown appeared with a spinner as expected.
• Team codes loaded correctly and the spinner disappeared.
• Closing the dropdown by clicking outside worked as intended.

Select and search:

• Clicking on a code in the dropdown successfully added it.
• Typing in the input filtered the suggestions effectively.
  Save changes:
• After adding a new code, clicking "Save Changes" correctly assigned it to the user.

[JatinAgrawal94]

1. check into current branch
2. Do npm install and npm start to run this PR locally
3. Log in as an administrator or owner
4. Go to View Profile→ Teams
5. Assign and changed team codes.
   This works good. Great work!

PR.2191.mp4

[akshit0211]

This feature is working properly. Good work!

[Sudershhh]

The functionality is working as expected, however the design does not seem to be consistent. Having a substantial gap between the table headers and the input dropdown field OR the dropdown options can have a higher z index to keep it on top, would be good.

[Sarath-3119]

Tested this PR, on clicking the input, searched for a team code from the dropdown, when the right format is entered the drop down filtered based on the search result . ABle to save changes as expected.

[one-community]

The functionality is working as expected, however the design does not seem to be consistent. Having a substantial gap between the table headers and the input dropdown field OR the dropdown options can have a higher z index to keep it on top, would be good.

Yes, I agree. I'd like this to suggest/show as many as possible so I rarely have to scroll.

[Vigneshwar-Muriki]

Tested this PR using an admin account. The dropdown spinner works as expected. After selecting a team code, the spinner disappears. I was able to assign a team code by selecting a team and a message popped up. After clicking the save changes button, another message popped which said the update was saved. Below is the video.

Screen.Recording.2024-07-05.205018.mp4

[Shadhrush5]

Hi, I have reviewed PR 2191 using the following steps:
Checkout branch "Peterson_Impl_Make_Profile_Team_Code_Field_Show_Existing_Codes"
npm install
npm run start:local
Logged in as admin
View Profile -> Teams
Used the scroll bar to select a team code
Saved changes as well.

Screen.Recording.2024-07-11.at.10.34.40.AM.mov

The functionality described works as expected. Great work. Thank you.

[vishavk1992]

I have tested this PR and it works as expected and i was able to assign team code.

PR-2191.mp4

[ZhangPeizhou]

works as expected, well done!

week8_1.mp4

[AnujVakil]

I have tested this PR and working as expected.

[nikhilpittala16]

I have tested the PR and everything works as expected.

[SaiLavanya1]

I've tested the PR #2191, and it worked as expected.
https://www.loom.com/share/25be1f844e6a4bea87c3cb92401b0933

[one-community]

Thank you all, merging!