Add a Way to Assign Multiple Volunteers at Once

[CovenantHuman]

What type(s) of user does this feature affect?

• supervisors
• admins

Description Currently, volunteers must be assigned to supervisors one at a time. We would like to make a way for multiple volunteers to be assigned to a supervisor at a time.

Please refer to the Figma file to see how the UI should look and how the UX should function. The below acceptance criteria represent this same behavior in checklist form.

Figma Figma link PS: Log into Figma to leave comments, and Mallory (our design lead) will respond to them!

Acceptance Criteria Table overview

• Assume all table UI and dimensions remain the same unless otherwise noted
• Bottom border of each row spans the table
• Add checkboxes on the left of each row
• Change the “Extra Languages” header to “Additional Languages”
• Move pagination items to the bottom of the table and change all text to “Content 3” text style and update wrap of right pagination item
• Remove “Responsive Data Table” heading
• Change search bar font to “Content 1” text style
• When screen width is 1024px or below, remove the checkbox column and related functionality

Row checkbox functionality

• The default state is that the check box is unselected
• On row hover, shadow appears behind row (see https://demo.plainadmin.com/task for reference)
• On box click, highlight row with color and change checkbox to blue box with white checkmark
• When at least one but not all checkboxes have been clicked, change header checkbox to blue box with white line
• When at least one checkbox has been selected display “Manage Volunteer” button above table (update number and add or remove “s” after “Volunteer” to match number of selected boxes)
• When checkbox on header row is selected, check all checkboxes in the table
• When checkbox on header row is deselected, uncheck all checkboxes in the table
• When any checkboxes are unselected return row to default state

Manage Volunteers Button (On-click)

• When “Manage Volunteers” button is selected display a modal and page backdrop
• On hover of dropdown in modal, outline the dropdown box in colored border
• On click, display names of all supervisors and a “None” option
• On hover in the dropdown list, highlight hovered item in blue
• On click, display a checkmark on the left of selection, close dropdown, and display selection in place of “Choose a supervisor”
• When dropdown is open, after a selection is made, and without hover, selected item returns to original color and continues to display checkmark
• When "Cancel" or "X" is selected in modal, close modal and backdrop and return to original screen while maintaining row selections
• On click of “Confirmation,” close modal, reflect changes in Volunteers table: If "None" is selected from dropdown and confirmed, update each selected Volunteer’s Supervisor to unassigned/empty Otherwise, update Supervisor for each Volunteer to selected Supervisor
• References: Modal reference is “Modal 3” at following link: https://demo.plainadmin.com/modals.html Dropdown reference is on “Selects” card at the following link: https://demo.plainadmin.com/form-elements.html

QA Login Details:
Link to QA site

Login Emails:

• volunteer1@example.com view site as a volunteer
• supervisor1@example.com view site as a supervisor
• casa_admin1@example.com view site as an admin

password for all users: 12345678

[github-actions[bot]]

This issue has been open without changes for a long time! What's up?

[compwron]

This does not seem to be an urgent ask

[JoshDevHub]

I'd like to work on this one.

[elhalvers]

I can work on this : )

[github-actions[bot]]

This issue has been inactive for 268 hours (11.17 days) and will be unassigned after 92 more hours (3.83 days). If you have questions, please

If you are still working on this, comment here to tell the bot to give you more time

[elhalvers]

Still working on this. Finished the feature and have finished the request test. Working on the system test now.

: )

On Sat, Jul 8, 2023 at 5:20 PM github-actions[bot] @.***> wrote:

This issue has been inactive for 268 hours (11.17 days) and will be unassigned after 92 more hours (3.83 days). If you have questions, please

If you are still working on this, comment here to tell the bot to give you more time

— Reply to this email directly, view it on GitHub https://github.com/rubyforgood/casa/issues/2523#issuecomment-1627552856, or unsubscribe https://github.com/notifications/unsubscribe-auth/AR3VCDK25SWQEKPA7F5QRK3XPH2L7ANCNFSM5DMOBHEA . You are receiving this because you were assigned.Message ID: @.***>

[MalloryPriceDesign]

hey @elhalvers, thanks for working on this! @bcastillo32 and I have just finalized the design for this functionality! Please see below for how to implement the UI and let me know if you have any questions!

Bulk Actions: Assign/Unassign Volunteers

Please refer to the Figma file to see how the UI should look and how the UX should function. The below acceptance criteria represent this same behavior in checklist form.

Figma

Figma link PS: Log into Figma to leave comments, and I will respond to them!  

Acceptance Criteria

Table overview

• Assume all table UI and dimensions remain the same unless otherwise noted
• Bottom border of each row spans the table
• Add checkboxes on the left of each row
• Change the “Extra Languages” header to “Additional Languages”
• Move pagination items to the bottom of the table and change all text to “Content 3” text style and update wrap of right pagination item
• Remove “Responsive Data Table” heading
• Change search bar font to “Content 1” text style
• When screen width is 1024px or below, remove the checkbox column and related functionality

  Row checkbox functionality

• The default state is that the check box is unselected
• On row hover, shadow appears behind row (see https://demo.plainadmin.com/task for reference)
• On box click, highlight row with color and change checkbox to blue box with white checkmark
• When at least one but not all checkboxes have been clicked, change header checkbox to blue box with white line
• When at least one checkbox has been selected display “Manage Volunteer” button above table (update number and add or remove “s” after “Volunteer” to match number of selected boxes)
• When checkbox on header row is selected, check all checkboxes in the table
• When checkbox on header row is deselected, uncheck all checkboxes in the table
• When any checkboxes are unselected return row to default state  

Manage Volunteers Button (On-click)

• When “Manage Volunteers” button is selected display a modal and page backdrop
• On hover of dropdown in modal, outline the dropdown box in colored border
• On click, display names of all supervisors and a “None” option
• On hover in the dropdown list, highlight hovered item in blue
• On click, display a checkmark on the left of selection, close dropdown, and display selection in place of “Choose a supervisor”
• When dropdown is open, after a selection is made, and without hover, selected item returns to original color and continues to display checkmark
• When "Cancel" or "X" is selected in modal, close modal and backdrop and return to original screen while maintaining row selections
• On click of “Confirmation,” close modal, reflect changes in Volunteers table:
• If "None" is selected from dropdown and confirmed, update each selected Volunteer’s Supervisor to unassigned/empty
• Otherwise, update Supervisor for each Volunteer to selected Supervisor
• References:
  • Modal reference is “Modal 3” at following link: https://demo.plainadmin.com/modals.html
  • Dropdown reference is on “Selects” card at the following link: https://demo.plainadmin.com/form-elements.html

[bcastillo32]

@MalloryPriceDesign these look great! @elhalvers and/or @ShamiTomita please refer to the designs and acceptance criteria and reach out if you have any questions :)

I created a new issue a while back before I saw this one (https://github.com/rubyforgood/casa/issues/4873)

[elhalvers]

Thanks @MalloryPriceDesign and @bcastillo32 !! 🥳😄

[elhalvers]

I am adding @jamgar to help with this issue/project. James is also with AOL and has been doing some awesome CASA work! @ShamiTomita and I have been selected as the junior leads to build the Rails World Conference app which will take a bit of my active attention and focus so I am happy to bring on James for additional help on this! : )

[bcastillo32]

@elhalvers great! @jamgar happy to continue working with you! :)

[elhalvers]

🙌 😃

On Thu, Jul 13, 2023 at 3:10 PM Brando @.***> wrote:

@elhalvers https://github.com/elhalvers great! @jamgar https://github.com/jamgar happy to continue working with you! :)

— Reply to this email directly, view it on GitHub https://github.com/rubyforgood/casa/issues/2523#issuecomment-1634983188, or unsubscribe https://github.com/notifications/unsubscribe-auth/AR3VCDOMXNGCBSHIKAEQ5HLXQBW6TANCNFSM5DMOBHEA . You are receiving this because you were mentioned.Message ID: @.***>

[compwron]

This is the same as https://github.com/rubyforgood/casa/issues/4873 ??

[elhalvers]

This is the same as #4873 ??

It looks like it! : )

[bcastillo32]

yes, they are the same. I didn't find this one when I made #4873

[littleforest]

@bcastillo32 can you close one of these tickets? Not sure which one is better described.

[bcastillo32]

@bcastillo32 can you close one of these tickets? Not sure which one is better described.

done. I closed the other one.

[jamgar]

Update: Making progress on this. I had a blocker with not knowing JQuery Datatable which is used to give the table sort/filter capabilities. They have a checkbox extension that I added to give the functionality for select/unselect all.

[github-actions[bot]]

This issue has been inactive for 252 hours (10.50 days) and will be unassigned after 108 more hours (4.50 days). If you have questions, please

If you are still working on this, comment here to tell the bot to give you more time

[github-actions[bot]]

This issue has been inactive for 372 hours (15.50 days) and is past the limit of 360 hours (15.00 days) so is being unassigned.You’ve just been unassigned from this ticket due to inactivity – but feel free to pick it back up (or a new one!) in the future! Thank you again for your contribution to this project.

[jamgar]

Hi @bcastillo32 this is completed with one exception, which is I could not get the box shadow to work on hover of row. Instead I added a background color change on hover so we could get this feature completed. Any attempt to get the correct shadow effect was not working. I am not sure why but suspect that the way the tables are being created it is taking precedence on the styles. The project is using jquery datatables plugin which auto generates the tables on page request. As a side note, what I have found durning my research is that under normal circumstances adding box shadow to a table element can be a bit of a hack. If this is a hard set requirement then I would recommend opening another issue to address just the that style so that someone with CSS ninja skills :D can help.

Please see PR https://github.com/rubyforgood/casa/pull/5144

[github-actions[bot]]

This issue has been inactive for 251 hours (10.46 days) and will be unassigned after 109 more hours (4.54 days). If you have questions, please

If you are still working on this, comment here to tell the bot to give you more time

[github-actions[bot]]

This issue has been inactive for 371 hours (15.46 days) and is past the limit of 360 hours (15.00 days) so is being unassigned.You’ve just been unassigned from this ticket due to inactivity – but feel free to pick it back up (or a new one!) in the future! Thank you again for your contribution to this project.

[gorangorun]

Can i take it?

[bcastillo32]

Can i take it?

Hi @gorangorun we have a PR for this already bu thank you for the offer - we have some other tickets that could use some love :)

[schoork]

I think this has been solved.