37761 – Tabs on curbside_pickups.tt page not styled right after Bootstrap 5 update

Bug 37761 - Tabs on curbside_pickups.tt page not styled right after Bootstrap 5 update

Summary: Tabs on curbside_pickups.tt page not styled right after Bootstrap 5 update

Status:	Signed Off

Alias:	None

Product:	Koha
Classification:	Unclassified
Component:	Staff interface (show other bugs)
Version:	Main
Hardware:	All All

Importance:	P5 - low minor
Assignee:	Owen Leonard
QA Contact:	Testopia

URL:
Keywords:

Depends on:	35402
Blocks:	32890
	Show dependency tree / graph

Reported:	2024-08-28 14:49 UTC by Lucas Gass (lukeg)
Modified:	2024-11-27 07:51 UTC (History)
CC List:	5 users (show)

See Also:
Change sponsored?:	---
Patch complexity:	Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:	This fixes the curbside pickups page (Circulation > Holds and bookings > Curbside pickups) so that the tabs are correctly styled (instead of plain links), and the automatic refresh works as expected (you stay on the currently selected tab). (This is related to the OPAC and staff interface Bootstrap 5 upgrade in Koha 24.11.)
Version(s) released in:
Circulation function:

Attachments
Bug 37761: Fixed styling of Tabs on curbside_pickups.tt page (4.08 KB, patch) 2024-08-28 16:18 UTC, Eric Garcia	Details \| Diff \| Splinter Review
Bug 37761: Use tab WRAPPER for circulation curbside pickups tabs (23.80 KB, patch) 2024-08-28 16:55 UTC, Owen Leonard	Details \| Diff \| Splinter Review
Bug 37761: Use tab WRAPPER for circulation curbside pickups tabs (23.79 KB, patch) 2024-09-04 13:05 UTC, Owen Leonard	Details \| Diff \| Splinter Review
Bug 37761: Use tab WRAPPER for circulation curbside pickups tabs (23.86 KB, patch) 2024-09-04 13:52 UTC, Jonathan Druart	Details \| Diff \| Splinter Review
Bug 37761: Use tab WRAPPER for circulation curbside pickups tabs (23.80 KB, patch) 2024-09-05 17:02 UTC, Owen Leonard	Details \| Diff \| Splinter Review
Bug 37761: Fix redirection on the tabs and buttons (10.21 KB, patch) 2024-09-12 16:04 UTC, Sukhmandeep	Details \| Diff \| Splinter Review
Bug 37761: Use tab WRAPPER for circulation curbside pickups tabs (23.80 KB, patch) 2024-11-16 07:15 UTC, Jonathan Druart	Details \| Diff \| Splinter Review
Bug 37761: Fix redirection on the tabs and buttons (10.21 KB, patch) 2024-11-16 07:15 UTC, Jonathan Druart	Details \| Diff \| Splinter Review
Bug 37761: Add focus on patron search when on the tab (1.03 KB, patch) 2024-11-16 07:15 UTC, Jonathan Druart	Details \| Diff \| Splinter Review
Bug 37761: Use tab WRAPPER for circulation curbside pickups tabs (23.85 KB, patch) 2024-11-27 07:40 UTC, David Nind	Details \| Diff \| Splinter Review
Bug 37761: Fix redirection on the tabs and buttons (10.25 KB, patch) 2024-11-27 07:40 UTC, David Nind	Details \| Diff \| Splinter Review
Bug 37761: Add focus on patron search when on the tab (1.08 KB, patch) 2024-11-27 07:41 UTC, David Nind	Details \| Diff \| Splinter Review
Show Obsolete (9) View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.

Description Lucas Gass (lukeg) 2024-08-28 14:49:00 UTC

To recreate:

- Enable the CurbsidePickup system preference if necessary.
- Properly testing requires testing data. You can run this command to
  REPLACE your curbside pickup data with sample data:

  bash <(curl -s https://gitlab.com/-/snippets/2572579/raw/main/test_curbside_pickups.sh)

- Go to Circulation -> Curbside pickups.
- Look at the tabs above each table, no style. (To be staged, Staged & ready, etc )

Comment 1 Eric Garcia 2024-08-28 16:18:13 UTC Comment hidden (obsolete)

Created attachment 170828 [details] [review]
Bug 37761: Fixed styling of Tabs on curbside_pickups.tt page

To test:
- Enable the CurbsidePickup system preference if necessary.
- Properly testing requires testing data. You can run this command to
  REPLACE your curbside pickup data with sample data:

  bash <(curl -s https://gitlab.com/-/snippets/2572579/raw/main/test_curbside_pickups.sh)

- Go to Circulation -> Curbside pickups.
- Look at the tabs above each table, no style. (To be staged, Staged & ready, etc )

Apply patch and notice each tab has the correct style.

Comment 2 Owen Leonard 2024-08-28 16:50:01 UTC

Sorry we were both working on this at the same time. I have a patch ready which converts the tabs to use WRAPPER syntax which I think is the correct long-term solution.

Comment 3 Owen Leonard 2024-08-28 16:55:24 UTC Comment hidden (obsolete)

Created attachment 170833 [details] [review]
Bug 37761: Use tab WRAPPER for circulation curbside pickups tabs

The tabs on Circulation -> Curbside pickups look broken because they
were not updated to use the tab WRAPPER markup. This patch revises the
template so that the tabs look correct and makes additional changes to
ensure that the correct tab is preselected.

To test:
- Apply the patch and enable the CurbsidePickup system preference if
  necessary.
- Properly testing requires testing data. You can run this command to
  REPLACE your curbside pickup data with sample data:

  bash <(curl -s https://gitlab.com/-/snippets/2572579/raw/main/test_curbside_pickups.sh)

- Go to Circulation -> Curbside pickups.
- Confirm that the tabs look correct. The first tab should be active
  by default.
- Confirm that the right content is displayed when you click each tab.
- Under the "Schedule pickup" tab, search for a patron.
- After you submit the search the page should reload and the "Schedule
  pickup" tab should be open.

Sponsored-by: Athens County Public Libraries

Comment 4 Jonathan Druart 2024-09-04 13:01:26 UTC

CONFLICT (content): Merge conflict in koha-tmpl/intranet-tmpl/prog/en/modules/circ/curbside_pickups.tt

Comment 5 Owen Leonard 2024-09-04 13:05:39 UTC Comment hidden (obsolete)

Created attachment 171023 [details] [review]
Bug 37761: Use tab WRAPPER for circulation curbside pickups tabs

The tabs on Circulation -> Curbside pickups look broken because they
were not updated to use the tab WRAPPER markup. This patch revises the
template so that the tabs look correct and makes additional changes to
ensure that the correct tab is preselected.

To test:
- Apply the patch and enable the CurbsidePickup system preference if
  necessary.
- Properly testing requires testing data. You can run this command to
  REPLACE your curbside pickup data with sample data:

  bash <(curl -s https://gitlab.com/-/snippets/2572579/raw/main/test_curbside_pickups.sh)

- Go to Circulation -> Curbside pickups.
- Confirm that the tabs look correct. The first tab should be active
  by default.
- Confirm that the right content is displayed when you click each tab.
- Under the "Schedule pickup" tab, search for a patron.
- After you submit the search the page should reload and the "Schedule
  pickup" tab should be open.

Sponsored-by: Athens County Public Libraries

Comment 6 Jonathan Druart 2024-09-04 13:52:40 UTC Comment hidden (obsolete)

Created attachment 171029 [details] [review]
Bug 37761: Use tab WRAPPER for circulation curbside pickups tabs

The tabs on Circulation -> Curbside pickups look broken because they
were not updated to use the tab WRAPPER markup. This patch revises the
template so that the tabs look correct and makes additional changes to
ensure that the correct tab is preselected.

To test:
- Apply the patch and enable the CurbsidePickup system preference if
  necessary.
- Properly testing requires testing data. You can run this command to
  REPLACE your curbside pickup data with sample data:

  bash <(curl -s https://gitlab.com/-/snippets/2572579/raw/main/test_curbside_pickups.sh)

- Go to Circulation -> Curbside pickups.
- Confirm that the tabs look correct. The first tab should be active
  by default.
- Confirm that the right content is displayed when you click each tab.
- Under the "Schedule pickup" tab, search for a patron.
- After you submit the search the page should reload and the "Schedule
  pickup" tab should be open.

Sponsored-by: Athens County Public Libraries

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

Comment 7 Jonathan Druart 2024-09-04 13:58:24 UTC

Hum actually found a bug. If you auto refresh you want to stay on the tab you were.
To recreate:
click the "patron is outside" tab
Tick refresh every 3 seconds
=> The page refreshes positioned on the first tab.

The expected behaviour is to stay on the "patron is outside" tab.

Comment 8 Owen Leonard 2024-09-05 17:02:55 UTC

Created attachment 171098 [details] [review]
Bug 37761: Use tab WRAPPER for circulation curbside pickups tabs

The tabs on Circulation -> Curbside pickups look broken because they
were not updated to use the tab WRAPPER markup. This patch revises the
template so that the tabs look correct and makes additional changes to
ensure that the correct tab is preselected.

To test:
- Apply the patch and enable the CurbsidePickup system preference if
  necessary.
- Properly testing requires testing data. You can run this command to
  REPLACE your curbside pickup data with sample data:

  bash <(curl -s https://gitlab.com/-/snippets/2572579/raw/main/test_curbside_pickups.sh)

- Go to Circulation -> Curbside pickups.
- Confirm that the tabs look correct. The first tab should be active
  by default.
- Confirm that the right content is displayed when you click each tab.
- Under the "Schedule pickup" tab, search for a patron.
- After you submit the search the page should reload and the "Schedule
  pickup" tab should be open.

Sponsored-by: Athens County Public Libraries

Comment 9 Olivier Vezina 2024-09-06 21:34:28 UTC

Everything is working fine except the schedule pickup tab. When searching for a patron the page does refresh but it sends me back to the To be staged tab instead of staying on the Schedule Pickup tab.

Comment 10 Sukhmandeep 2024-09-12 16:04:56 UTC

Created attachment 171415 [details] [review]
Bug 37761: Fix redirection on the tabs and buttons

To test:
- Apply the patch and enable the CurbsidePickup system preference if
  necessary.
- Properly testing requires testing data. You can run this command to
  REPLACE your curbside pickup data with sample data:

  bash <(curl -s https://gitlab.com/-/snippets/2572579/raw/main/test_curbside_pickups.sh)

- Go to Circulation -> Curbside pickups.
- Confirm that the tabs look correct. The first tab should be active
  by default.
- Confirm that the right content is displayed when you click each tab.
- Under the "Schedule pickup" tab, search for a patron.
- After you submit the search the page should reload and the "Schedule
  pickup" tab should be open.
- Go on each tab and try each button to verify you're staying on the
  same tab.

Comment 11 Sukhmandeep 2024-09-12 16:27:08 UTC

I ran into some odd behaviour while working on the patch. After you search in the "Schedule Pickup" tab and submit, the system keeps you on the same tab, which is fine. But here’s where it gets strange: once you press a button in a tab or use the refresh button under "Curbside Pickups," that tab becomes the new reference point. So if you refresh the page with your browser (not the in-app refresh button), it always takes you back to that tab.

Here’s how you can recreate this issue:

- After testing the patch in the "Schedule Pickup" tab, go to the "Stage & Ready" tab.
- Click any button within this tab (Patron has arrived, Mark as delivered or Mark as to be staged).
- Switch to another tab, like "Patron is Outside."
- Refresh the browser(not the refresh button under curbside pickups). You’ll find yourself back on the "Stage & Ready" tab.

You can see something similar with the refresh button under "Curbside Pickups":

- After testing the patch in the "Schedule Pickup" tab, go to the "Stage & Ready" tab.
- Click the refresh button under "Curbside Pickups."
- Switch to a different tab, like "To Be Staged."
- Refresh the browser. You’ll end up back on the "Stage & Ready" tab.

In both cases, once you press a button or use the refresh button, the tab you’re on becomes the new reference point.

Comment 12 Jonathan Druart 2024-09-23 10:01:29 UTC

439                                                     <a title="Search for another patron" href="/cgi-bin/koha/circ/curbside_pickups.pl?tab=schedule-pickup"><i class="fa fa-search"></i></a>

I am expecting tab to be suffixed with _panel here

Comment 13 Jonathan Druart 2024-09-23 10:03:10 UTC Comment hidden (obsolete)

528             $('#schedule-pickup-tab').on('click', function() {
529                 $('#input-patron-cardnumber').focus();
530             }); 

This is not working.

Comment 14 Jonathan Druart 2024-09-23 10:04:29 UTC Comment hidden (obsolete)

(In reply to Jonathan Druart from comment #13)
> 528             $('#schedule-pickup-tab').on('click', function() {
> 529                 $('#input-patron-cardnumber').focus();
> 530             }); 
> 
> This is not working.

Actually broken by bug 30965.

Comment 15 Jonathan Druart 2024-09-23 10:06:57 UTC Comment hidden (obsolete)

(In reply to Jonathan Druart from comment #14)
> (In reply to Jonathan Druart from comment #13)
> > 528             $('#schedule-pickup-tab').on('click', function() {
> > 529                 $('#input-patron-cardnumber').focus();
> > 530             }); 
> > 
> > This is not working.
> 
> Actually broken by bug 30965.

Reported on bug 37983.

Comment 16 Jonathan Druart 2024-09-23 10:14:03 UTC

I guess we also need that:

+            [% IF tab == 'schedule-pickup_panel' %]
+                $('#find-patron').focus();
+            [% END %]

But with bug 37983 I am not sure how to order the change, as the first patch from 37983 will need to be backported and this one will need to be adjusted for backport :-/

Comment 17 Jonathan Druart 2024-11-16 07:15:27 UTC

Created attachment 174643 [details] [review]
Bug 37761: Use tab WRAPPER for circulation curbside pickups tabs

The tabs on Circulation -> Curbside pickups look broken because they
were not updated to use the tab WRAPPER markup. This patch revises the
template so that the tabs look correct and makes additional changes to
ensure that the correct tab is preselected.

To test:
- Apply the patch and enable the CurbsidePickup system preference if
  necessary.
- Properly testing requires testing data. You can run this command to
  REPLACE your curbside pickup data with sample data:

  bash <(curl -s https://gitlab.com/-/snippets/2572579/raw/main/test_curbside_pickups.sh)

- Go to Circulation -> Curbside pickups.
- Confirm that the tabs look correct. The first tab should be active
  by default.
- Confirm that the right content is displayed when you click each tab.
- Under the "Schedule pickup" tab, search for a patron.
- After you submit the search the page should reload and the "Schedule
  pickup" tab should be open.

Sponsored-by: Athens County Public Libraries

Comment 18 Jonathan Druart 2024-11-16 07:15:30 UTC

Created attachment 174644 [details] [review]
Bug 37761: Fix redirection on the tabs and buttons

To test:
- Apply the patch and enable the CurbsidePickup system preference if
  necessary.
- Properly testing requires testing data. You can run this command to
  REPLACE your curbside pickup data with sample data:

  bash <(curl -s https://gitlab.com/-/snippets/2572579/raw/main/test_curbside_pickups.sh)

- Go to Circulation -> Curbside pickups.
- Confirm that the tabs look correct. The first tab should be active
  by default.
- Confirm that the right content is displayed when you click each tab.
- Under the "Schedule pickup" tab, search for a patron.
- After you submit the search the page should reload and the "Schedule
  pickup" tab should be open.
- Go on each tab and try each button to verify you're staying on the
  same tab.

Comment 19 Jonathan Druart 2024-11-16 07:15:32 UTC

Created attachment 174645 [details] [review]
Bug 37761: Add focus on patron search when on the tab

Comment 20 David Nind 2024-11-27 07:40:55 UTC

Created attachment 174997 [details] [review]
Bug 37761: Use tab WRAPPER for circulation curbside pickups tabs

The tabs on Circulation -> Curbside pickups look broken because they
were not updated to use the tab WRAPPER markup. This patch revises the
template so that the tabs look correct and makes additional changes to
ensure that the correct tab is preselected.

To test:
- Apply the patch and enable the CurbsidePickup system preference if
  necessary.
- Properly testing requires testing data. You can run this command to
  REPLACE your curbside pickup data with sample data:

  bash <(curl -s https://gitlab.com/-/snippets/2572579/raw/main/test_curbside_pickups.sh)

- Go to Circulation -> Curbside pickups.
- Confirm that the tabs look correct. The first tab should be active
  by default.
- Confirm that the right content is displayed when you click each tab.
- Under the "Schedule pickup" tab, search for a patron.
- After you submit the search the page should reload and the "Schedule
  pickup" tab should be open.

Sponsored-by: Athens County Public Libraries
Signed-off-by: David Nind <david@davidnind.com>

Comment 21 David Nind 2024-11-27 07:40:58 UTC

Created attachment 174998 [details] [review]
Bug 37761: Fix redirection on the tabs and buttons

To test:
- Apply the patch and enable the CurbsidePickup system preference if
  necessary.
- Properly testing requires testing data. You can run this command to
  REPLACE your curbside pickup data with sample data:

  bash <(curl -s https://gitlab.com/-/snippets/2572579/raw/main/test_curbside_pickups.sh)

- Go to Circulation -> Curbside pickups.
- Confirm that the tabs look correct. The first tab should be active
  by default.
- Confirm that the right content is displayed when you click each tab.
- Under the "Schedule pickup" tab, search for a patron.
- After you submit the search the page should reload and the "Schedule
  pickup" tab should be open.
- Go on each tab and try each button to verify you're staying on the
  same tab.

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

Comment 22 David Nind 2024-11-27 07:41:01 UTC

Created attachment 174999 [details] [review]
Bug 37761: Add focus on patron search when on the tab

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