Bug 28867

Summary: Use Bootstrap button menu and modal for adding patrons to lists
Product: Koha Reporter: Owen Leonard <oleonard>
Component: PatronsAssignee: Owen Leonard <oleonard>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: david, gmcharlt, kyle.m.hall, kyle
Version: Main   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: Small patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
21.11.00
Bug Depends on: 27725    
Bug Blocks:    
Attachments: Screenshot showing Bootstrap button menu
Bootstrap modal for patron list creation
Bug 28867: Use Bootstrap button menu and modal for adding patrons to lists
Bug 28867: Use Bootstrap button menu and modal for adding patrons to lists
Bug 28867: Use Bootstrap button menu and modal for adding patrons to lists
Bug 28867: (follow-up) Make error message translatable
Bug 28867: Use Bootstrap button menu and modal for adding patrons to lists
Bug 28867: (follow-up) Make error message translatable

Description Owen Leonard 2021-08-16 19:17:57 UTC
Created attachment 123858 [details]
Screenshot showing Bootstrap button menu

I propose to modify the patron search results page so that the controls for adding patrons to a new or existing list are Bootstrap style: A button menu for selecting a patron list, and a modal for entering the name of a new list.

See attached.
Comment 1 Owen Leonard 2021-08-16 19:18:27 UTC
Created attachment 123859 [details]
Bootstrap modal for patron list creation
Comment 2 Owen Leonard 2021-10-06 14:38:05 UTC
Created attachment 125822 [details] [review]
Bug 28867: Use Bootstrap button menu and modal for adding patrons to lists

This patch reworks the controls for adding patrons to a list from the
patron search results page. The <select> is converted to a Bootstrap
dropdown menu, and the list creation form is moved into a Bootstrap
modal.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- In the staff interface, perform a patron search that will return
  multiple results.
- In the toolbar at the top of the search results you should see two
  disabled Bootstrap-styled buttons: "Add to patron list" and "Merge
  selected patrons."
- The "Select all" and "Clear all" links should work to enable and
  disable the toolbar buttons.
- "Clear all" and then check the checkbox next to one of the results.
  The "Add to patron list" button should be enabled.
- Check a second checkbox. The "Merge selected patrons" button should be
  enabled.
- Test the "Add to patron list" button. It should trigger a dropdown
  menu listing existing patrons lists and a "New list" link.
  - Test adding to an exising patron list. It should trigger a message
    at the top of the page which shows a link to that list.
  - Test adding to a new list. It should trigger a Bootstrap modal where
    you can enter the name of the new list.
    - Submitting the list title form should close the modal and trigger
      the display of the message showing how many patrons were added to
      your new list. The link to the new list should be correct.
- Test the "Merge selected patrons" button. It should send the selected
  patrons to the patron merge screen.
Comment 3 David Nind 2021-10-17 17:29:50 UTC
Patch no longer applies 8-(...

Applying: Bug 28867: Use Bootstrap button menu and modal for adding patrons to lists
Using index info to reconstruct a base tree...
M	koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
M	koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt
M	koha-tmpl/intranet-tmpl/prog/en/modules/members/tables/members_results.tt
Falling back to patching base and 3-way merge...
Auto-merging koha-tmpl/intranet-tmpl/prog/en/modules/members/tables/members_results.tt
CONFLICT (content): Merge conflict in koha-tmpl/intranet-tmpl/prog/en/modules/members/tables/members_results.tt
Auto-merging koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt
Auto-merging koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
error: Failed to merge in the changes.
Patch failed at 0001 Bug 28867: Use Bootstrap button menu and modal for adding patrons to lists
Comment 4 Owen Leonard 2021-10-18 15:42:49 UTC
Created attachment 126445 [details] [review]
Bug 28867: Use Bootstrap button menu and modal for adding patrons to lists

This patch reworks the controls for adding patrons to a list from the
patron search results page. The <select> is converted to a Bootstrap
dropdown menu, and the list creation form is moved into a Bootstrap
modal.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- In the staff interface, perform a patron search that will return
  multiple results.
- In the toolbar at the top of the search results you should see two
  disabled Bootstrap-styled buttons: "Add to patron list" and "Merge
  selected patrons."
- The "Select all" and "Clear all" links should work to enable and
  disable the toolbar buttons.
- "Clear all" and then check the checkbox next to one of the results.
  The "Add to patron list" button should be enabled.
- Check a second checkbox. The "Merge selected patrons" button should be
  enabled.
- Test the "Add to patron list" button. It should trigger a dropdown
  menu listing existing patrons lists and a "New list" link.
  - Test adding to an exising patron list. It should trigger a message
    at the top of the page which shows a link to that list.
  - Test adding to a new list. It should trigger a Bootstrap modal where
    you can enter the name of the new list.
    - Submitting the list title form should close the modal and trigger
      the display of the message showing how many patrons were added to
      your new list. The link to the new list should be correct.
- Test the "Merge selected patrons" button. It should send the selected
  patrons to the patron merge screen.
Comment 5 David Nind 2021-10-18 19:39:56 UTC
Created attachment 126452 [details] [review]
Bug 28867: Use Bootstrap button menu and modal for adding patrons to lists

This patch reworks the controls for adding patrons to a list from the
patron search results page. The <select> is converted to a Bootstrap
dropdown menu, and the list creation form is moved into a Bootstrap
modal.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- In the staff interface, perform a patron search that will return
  multiple results.
- In the toolbar at the top of the search results you should see two
  disabled Bootstrap-styled buttons: "Add to patron list" and "Merge
  selected patrons."
- The "Select all" and "Clear all" links should work to enable and
  disable the toolbar buttons.
- "Clear all" and then check the checkbox next to one of the results.
  The "Add to patron list" button should be enabled.
- Check a second checkbox. The "Merge selected patrons" button should be
  enabled.
- Test the "Add to patron list" button. It should trigger a dropdown
  menu listing existing patrons lists and a "New list" link.
  - Test adding to an exising patron list. It should trigger a message
    at the top of the page which shows a link to that list.
  - Test adding to a new list. It should trigger a Bootstrap modal where
    you can enter the name of the new list.
    - Submitting the list title form should close the modal and trigger
      the display of the message showing how many patrons were added to
      your new list. The link to the new list should be correct.
- Test the "Merge selected patrons" button. It should send the selected
  patrons to the patron merge screen.

Signed-off-by: David Nind <david@davidnind.com>
Comment 6 Katrin Fischer 2021-10-18 21:10:21 UTC
There is an untranslatable error message that I am not sure how to trigger, otherwise this appears to work really nicely:

                error: function() {
                    alert("an error occurred");
Comment 7 Owen Leonard 2021-10-19 11:12:42 UTC
Created attachment 126482 [details] [review]
Bug 28867: (follow-up) Make error message translatable
Comment 8 Katrin Fischer 2021-10-19 21:21:57 UTC
Created attachment 126550 [details] [review]
Bug 28867: Use Bootstrap button menu and modal for adding patrons to lists

This patch reworks the controls for adding patrons to a list from the
patron search results page. The <select> is converted to a Bootstrap
dropdown menu, and the list creation form is moved into a Bootstrap
modal.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- In the staff interface, perform a patron search that will return
  multiple results.
- In the toolbar at the top of the search results you should see two
  disabled Bootstrap-styled buttons: "Add to patron list" and "Merge
  selected patrons."
- The "Select all" and "Clear all" links should work to enable and
  disable the toolbar buttons.
- "Clear all" and then check the checkbox next to one of the results.
  The "Add to patron list" button should be enabled.
- Check a second checkbox. The "Merge selected patrons" button should be
  enabled.
- Test the "Add to patron list" button. It should trigger a dropdown
  menu listing existing patrons lists and a "New list" link.
  - Test adding to an exising patron list. It should trigger a message
    at the top of the page which shows a link to that list.
  - Test adding to a new list. It should trigger a Bootstrap modal where
    you can enter the name of the new list.
    - Submitting the list title form should close the modal and trigger
      the display of the message showing how many patrons were added to
      your new list. The link to the new list should be correct.
- Test the "Merge selected patrons" button. It should send the selected
  patrons to the patron merge screen.

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 9 Katrin Fischer 2021-10-19 21:22:01 UTC
Created attachment 126551 [details] [review]
Bug 28867: (follow-up) Make error message translatable

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 10 Jonathan Druart 2021-10-21 10:24:56 UTC
Pushed to master for 21.11, thanks to everybody involved!