Bug 32683

Summary: Convert header search tabs to Bootstrap
Product: Koha Reporter: Owen Leonard <oleonard>
Component: TemplatesAssignee: Owen Leonard <oleonard>
Status: RESOLVED FIXED QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: david, dcook, lucas, testopia
Version: Main   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: Medium patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
23.05.00,22.11.04
Circulation function:
Bug Depends on: 32688    
Bug Blocks: 29226, 33278, 33422, 34493, 36659    
Attachments: Bug 32683: Convert header search tabs to Bootstrap
Screenshot - no title and input box for notices and slips
Bug 32683: Convert header search tabs to Bootstrap
Bug 32683: Convert header search tabs to Bootstrap
Bug 32683: Convert header search tabs to Bootstrap
Bug 32683: Convert header search tabs to Bootstrap
Bug 32683: Convert header search tabs to Bootstrap

Description Owen Leonard 2023-01-19 18:33:20 UTC
The last instance of Bootstrap tabs in Koha's templates are the header search forms in the staff interface. The should be replaced with Bootstrap tabs.
Comment 1 Owen Leonard 2023-01-20 11:55:21 UTC
(In reply to Owen Leonard from comment #0)
> The last instance of Bootstrap tabs

Correction: There is still a set of jQueryUI tabs in the "Recalls awaiting pickup" template (recalls_waiting.tt). Bug 32688.
Comment 2 Owen Leonard 2023-01-20 13:14:16 UTC
Created attachment 145510 [details] [review]
Bug 32683: Convert header search tabs to Bootstrap

This patch updates all search header include files so that they have
Bootstrap tab markup instead of jQueryUI. jQueryUI-related JavaScript is
updated to work with Bootstrap.

To test, apply the patch and rebuild the staff interface CSS. Clear your
browser cache if necessary.

Test that keyboard shortcuts work correctly: Alt-U for circulation,
Alt-R for returns, Alt-W for renewals, and Alt-Q for search. Each
shortcut should either activate the correct search tab (if present on
the page) or redirect you to that page.

Cursor focus should be automatically placed in expanded header search
form, whether it be on page load or when switching tabs.

Test search header forms with additional search options work correctly:
Clicking the "settings" icon should expand the panel with additional
fields.

Test at least one page which uses each include file:

- acquisitions-search.inc
  - Acquisitions and related pages
- adv-search.inc
  - Advanced catalog search
- authorities-search.inc
  - Authorities and related pages
  - Check that the right tab is preselected after each kind of search,
e.g. a search by "Main heading" should return a search results page
where the "Main heading" tab is preselected.
- budgets-admin-search.inc
  - Administration -> Budgets
- cat-search.inc
  - Catalog search results, bibliographic details, etc.
- cataloging-search.inc
  - Cataloging home page and cataloging search results
- checkin-search.inc
  - Circulation -> Check in
- circ-search.inc
  - Circulation -> Check out
- cities-admin-search.inc
  - Administration -> Cities and towns
- contracts-admin-search.inc
  - Acquisitions -> Vendor -> Contracts
- currencies-admin-search.inc
  - Administration -> Currencies
- desks-admin-search.inc
  - Administration -> Desks (must have UseCirculationDesks enabled)
- erm-search.inc
  - ERM (must have ERMModule enabled)
- home-search.inc
  - Staff interface home page
- letters-search.inc
  - Tools -> Notices
- patron-search-header.inc
  - Patron details, patron accounting, etc.
- patrons-admin-search.inc
  - Administratoin -> Patron categories
- prefs-admin-search.inc
  - Administration home page and system preferences
- serials-search.inc
  - Serials and related pages
- suggestions-add-search.inc
  - Not used
- z3950-admin-search.inc
  - Administration -> Z39.50 servers
Comment 3 David Nind 2023-01-22 19:24:55 UTC
Created attachment 145567 [details]
Screenshot - no title and input box for notices and slips

I've worked through all the areas in the test plan (using KTD) - but with so many areas, I'm sure I have missed something...

I think I have identified some issues with ERM and Notices and slips. I have also recorded some other issues I noticed that aren't related to this bug.

ERM
~~~

Before and after the patch is applied: 
- If you click through the sidebar options (Agreements, Packages, and Titles) the header search doesn't change
- If you change the header to another option, for example 'Search titles', then perform a search, the header then goes back to 'Agreement search'

After the patch was applied, I did a yarn build_js

Also, after the patch was applied, the header options don't have the active option underlined.

Notices and slips
~~~~~~~~~~~~~~~~~

There is no name and input box when you click on Notices and slips. See the screenshot.

However, if you click through the options (Check out, Search catalog, then Search notices) it appears. As soon as you click on Notices and slips on the sidebar menu, it disappears again.

Other things I noticed
~~~~~~~~~~~~~~~~~~~~~~

These aren't related to this bug, but if someone can confirm them, I will log separate bugs (if they haven't been logged already):

- Z39.50/SRU servers administration: Both before and after the patch I don't get any search results for any content in any of the columns, such as the target, database, hostname/port.

- Acquisitions - vendor contract search: I get an error trace (both before and after the patch is applied): 
  . Go to Acquisitions > search for a vendor
  . Click on contracts
  . Use the search in the header
  . Error trace:

    Can't call method "name" on an undefined value at /kohadevbox/koha/admin/aqcontract.pl line 54

         in (eval) at /kohadevbox/koha/admin/aqcontract.pl line 54

            51:     }
            52: );
            53: 
            54: $template->param(
            55:     contractnumber => $contractnumber,
            56:     booksellerid   => $booksellerid,
            57:     booksellername => $bookseller->name,
    .....

Also, I wasn't aware of the shortcuts before - they are great!
Comment 4 Owen Leonard 2023-01-23 12:17:26 UTC Comment hidden (obsolete)
Comment 5 David Nind 2023-01-24 19:05:06 UTC
For ERM, should the search option change if you are in a different area (Agreements, Packages, and Titles)?
Comment 6 Owen Leonard 2023-01-25 12:02:16 UTC
(In reply to David Nind from comment #5)
> For ERM, should the search option change if you are in a different area

Sorry to have left this question unanswered! It doesn't work that way in master, but it probably should. So, a separate bug I think.
Comment 7 David Nind 2023-01-25 17:20:02 UTC Comment hidden (obsolete)
Comment 8 David Nind 2023-01-25 17:52:34 UTC
(In reply to Owen Leonard from comment #6)
> Sorry to have left this question unanswered! It doesn't work that way in
> master, but it probably should. So, a separate bug I think.

I've added Bug 32728 - ERM - Search header should change to match the section you are in.
Comment 9 Owen Leonard 2023-02-07 18:06:37 UTC
Created attachment 146352 [details] [review]
Bug 32683: Convert header search tabs to Bootstrap

This patch updates all search header include files so that they have
Bootstrap tab markup instead of jQueryUI. jQueryUI-related JavaScript is
updated to work with Bootstrap.

To test, apply the patch and rebuild the staff interface CSS. Clear your
browser cache if necessary.

Test that keyboard shortcuts work correctly: Alt-U for circulation,
Alt-R for returns, Alt-W for renewals, and Alt-Q for search. Each
shortcut should either activate the correct search tab (if present on
the page) or redirect you to that page.

Cursor focus should be automatically placed in expanded header search
form, whether it be on page load or when switching tabs.

Test search header forms with additional search options work correctly:
Clicking the "settings" icon should expand the panel with additional
fields.

Test at least one page which uses each include file:

- acquisitions-search.inc
  - Acquisitions and related pages
- adv-search.inc
  - Advanced catalog search
- authorities-search.inc
  - Authorities and related pages
  - Check that the right tab is preselected after each kind of search,
e.g. a search by "Main heading" should return a search results page
where the "Main heading" tab is preselected.
- budgets-admin-search.inc
  - Administration -> Budgets
- cat-search.inc
  - Catalog search results, bibliographic details, etc.
- cataloging-search.inc
  - Cataloging home page and cataloging search results
- checkin-search.inc
  - Circulation -> Check in
- circ-search.inc
  - Circulation -> Check out
- cities-admin-search.inc
  - Administration -> Cities and towns
- contracts-admin-search.inc
  - Acquisitions -> Vendor -> Contracts
- currencies-admin-search.inc
  - Administration -> Currencies
- desks-admin-search.inc
  - Administration -> Desks (must have UseCirculationDesks enabled)
- erm-search.inc
  - ERM (must have ERMModule enabled)
- home-search.inc
  - Staff interface home page
- letters-search.inc
  - Tools -> Notices
- patron-search-header.inc
  - Patron details, patron accounting, etc.
- patrons-admin-search.inc
  - Administratoin -> Patron categories
- prefs-admin-search.inc
  - Administration home page and system preferences
- serials-search.inc
  - Serials and related pages
- suggestions-add-search.inc
  - Not used
- z3950-admin-search.inc
  - Administration -> Z39.50 servers

Signed-off-by: David Nind <david@davidnind.com>
Comment 10 Owen Leonard 2023-03-03 13:11:09 UTC
Created attachment 147691 [details] [review]
Bug 32683: Convert header search tabs to Bootstrap

This patch updates all search header include files so that they have
Bootstrap tab markup instead of jQueryUI. jQueryUI-related JavaScript is
updated to work with Bootstrap.

To test, apply the patch and rebuild the staff interface CSS. Clear your
browser cache if necessary.

Test that keyboard shortcuts work correctly: Alt-U for circulation,
Alt-R for returns, Alt-W for renewals, and Alt-Q for search. Each
shortcut should either activate the correct search tab (if present on
the page) or redirect you to that page.

Cursor focus should be automatically placed in expanded header search
form, whether it be on page load or when switching tabs.

Test search header forms with additional search options work correctly:
Clicking the "settings" icon should expand the panel with additional
fields.

Test at least one page which uses each include file:

- acquisitions-search.inc
  - Acquisitions and related pages
- adv-search.inc
  - Advanced catalog search
- authorities-search.inc
  - Authorities and related pages
  - Check that the right tab is preselected after each kind of search,
e.g. a search by "Main heading" should return a search results page
where the "Main heading" tab is preselected.
- budgets-admin-search.inc
  - Administration -> Budgets
- cat-search.inc
  - Catalog search results, bibliographic details, etc.
- cataloging-search.inc
  - Cataloging home page and cataloging search results
- checkin-search.inc
  - Circulation -> Check in
- circ-search.inc
  - Circulation -> Check out
- cities-admin-search.inc
  - Administration -> Cities and towns
- contracts-admin-search.inc
  - Acquisitions -> Vendor -> Contracts
- currencies-admin-search.inc
  - Administration -> Currencies
- desks-admin-search.inc
  - Administration -> Desks (must have UseCirculationDesks enabled)
- erm-search.inc
  - ERM (must have ERMModule enabled)
- home-search.inc
  - Staff interface home page
- letters-search.inc
  - Tools -> Notices
- patron-search-header.inc
  - Patron details, patron accounting, etc.
- patrons-admin-search.inc
  - Administratoin -> Patron categories
- prefs-admin-search.inc
  - Administration home page and system preferences
- serials-search.inc
  - Serials and related pages
- suggestions-add-search.inc
  - Not used
- z3950-admin-search.inc
  - Administration -> Z39.50 servers

Signed-off-by: David Nind <david@davidnind.com>
Comment 11 Katrin Fischer 2023-03-04 13:06:04 UTC
Created attachment 147751 [details] [review]
Bug 32683: Convert header search tabs to Bootstrap

This patch updates all search header include files so that they have
Bootstrap tab markup instead of jQueryUI. jQueryUI-related JavaScript is
updated to work with Bootstrap.

To test, apply the patch and rebuild the staff interface CSS. Clear your
browser cache if necessary.

Test that keyboard shortcuts work correctly: Alt-U for circulation,
Alt-R for returns, Alt-W for renewals, and Alt-Q for search. Each
shortcut should either activate the correct search tab (if present on
the page) or redirect you to that page.

Cursor focus should be automatically placed in expanded header search
form, whether it be on page load or when switching tabs.

Test search header forms with additional search options work correctly:
Clicking the "settings" icon should expand the panel with additional
fields.

Test at least one page which uses each include file:

- acquisitions-search.inc
  - Acquisitions and related pages
- adv-search.inc
  - Advanced catalog search
- authorities-search.inc
  - Authorities and related pages
  - Check that the right tab is preselected after each kind of search,
e.g. a search by "Main heading" should return a search results page
where the "Main heading" tab is preselected.
- budgets-admin-search.inc
  - Administration -> Budgets
- cat-search.inc
  - Catalog search results, bibliographic details, etc.
- cataloging-search.inc
  - Cataloging home page and cataloging search results
- checkin-search.inc
  - Circulation -> Check in
- circ-search.inc
  - Circulation -> Check out
- cities-admin-search.inc
  - Administration -> Cities and towns
- contracts-admin-search.inc
  - Acquisitions -> Vendor -> Contracts
- currencies-admin-search.inc
  - Administration -> Currencies
- desks-admin-search.inc
  - Administration -> Desks (must have UseCirculationDesks enabled)
- erm-search.inc
  - ERM (must have ERMModule enabled)
- home-search.inc
  - Staff interface home page
- letters-search.inc
  - Tools -> Notices
- patron-search-header.inc
  - Patron details, patron accounting, etc.
- patrons-admin-search.inc
  - Administratoin -> Patron categories
- prefs-admin-search.inc
  - Administration home page and system preferences
- serials-search.inc
  - Serials and related pages
- suggestions-add-search.inc
  - Not used
- z3950-admin-search.inc
  - Administration -> Z39.50 servers

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 12 Tomás Cohen Arazi (tcohen) 2023-03-10 15:03:44 UTC
Pushed to master for 23.05.

Nice work everyone, thanks!
Comment 13 Matt Blenkinsop 2023-03-13 11:12:33 UTC
Nice work everyone!

Pushed to stable for 22.11.x
Comment 14 Lucas Gass (lukeg) 2023-04-14 16:33:27 UTC
Enhancement will not be backpoted to 22.05.x