Bug 28867 - Use Bootstrap button menu and modal for adding patrons to lists
Summary: Use Bootstrap button menu and modal for adding patrons to lists
Status: RESOLVED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Patrons (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on: 27725
Blocks:
  Show dependency treegraph
 
Reported: 2021-08-16 19:17 UTC by Owen Leonard
Modified: 2021-10-22 15:44 UTC (History)
4 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Text to go in the release notes:
Version(s) released in:
21.11.00


Attachments
Screenshot showing Bootstrap button menu (141.79 KB, image/png)
2021-08-16 19:17 UTC, Owen Leonard
Details
Bootstrap modal for patron list creation (138.90 KB, image/png)
2021-08-16 19:18 UTC, Owen Leonard
Details
Bug 28867: Use Bootstrap button menu and modal for adding patrons to lists (19.56 KB, patch)
2021-10-06 14:38 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 28867: Use Bootstrap button menu and modal for adding patrons to lists (18.43 KB, patch)
2021-10-18 15:42 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 28867: Use Bootstrap button menu and modal for adding patrons to lists (18.48 KB, patch)
2021-10-18 19:39 UTC, David Nind
Details | Diff | Splinter Review
Bug 28867: (follow-up) Make error message translatable (946 bytes, patch)
2021-10-19 11:12 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 28867: Use Bootstrap button menu and modal for adding patrons to lists (18.55 KB, patch)
2021-10-19 21:21 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 28867: (follow-up) Make error message translatable (1003 bytes, patch)
2021-10-19 21:22 UTC, Katrin Fischer
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
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!