casa icon indicating copy to clipboard operation
casa copied to clipboard

Add a Way to Assign Multiple Volunteers at Once

Open CovenantHuman opened this issue 3 years ago • 25 comments

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:

password for all users: 12345678

CovenantHuman avatar Sep 03 '21 20:09 CovenantHuman

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

github-actions[bot] avatar Nov 03 '21 01:11 github-actions[bot]

This does not seem to be an urgent ask

compwron avatar Jan 27 '23 19:01 compwron

I'd like to work on this one.

JoshDevHub avatar Apr 24 '23 16:04 JoshDevHub

I can work on this : )

elhalvers avatar Jun 21 '23 15:06 elhalvers

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

github-actions[bot] avatar Jul 09 '23 00:07 github-actions[bot]

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: @.***>

elhalvers avatar Jul 09 '23 01:07 elhalvers

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

MalloryPriceDesign avatar Jul 09 '23 22:07 MalloryPriceDesign

@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)

bcastillo32 avatar Jul 09 '23 22:07 bcastillo32

Thanks @MalloryPriceDesign and @bcastillo32 !! 🥳😄

elhalvers avatar Jul 10 '23 01:07 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! : )

elhalvers avatar Jul 13 '23 16:07 elhalvers

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

bcastillo32 avatar Jul 13 '23 22:07 bcastillo32

🙌 😃

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: @.***>

elhalvers avatar Jul 13 '23 22:07 elhalvers

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

compwron avatar Jul 14 '23 18:07 compwron

This is the same as #4873 ??

It looks like it! : )

elhalvers avatar Jul 15 '23 16:07 elhalvers

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

bcastillo32 avatar Jul 18 '23 00:07 bcastillo32

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

littleforest avatar Jul 28 '23 18:07 littleforest

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

done. I closed the other one.

bcastillo32 avatar Jul 28 '23 18:07 bcastillo32

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.

jamgar avatar Jul 30 '23 12:07 jamgar

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] avatar Aug 10 '23 00:08 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.

github-actions[bot] avatar Aug 15 '23 00:08 github-actions[bot]

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

jamgar avatar Aug 25 '23 12:08 jamgar

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] avatar Sep 05 '23 00:09 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.

github-actions[bot] avatar Sep 10 '23 00:09 github-actions[bot]

Can i take it?

gorangorun avatar Dec 19 '23 07:12 gorangorun

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 :)

bcastillo32 avatar Dec 20 '23 01:12 bcastillo32