Bug 27403

Summary: Enable fixedHeader for Datatables
Product: Koha Reporter: Jonathan Druart <jonathan.druart>
Component: TemplatesAssignee: Jonathan Druart <jonathan.druart>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: andrew, caroline.cyr-la-rose, cbrannon, fridolin.somers, lucas
Version: unspecified   
Hardware: All   
OS: All   
See Also: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=20212
Change sponsored?: --- Patch complexity: Trivial patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
21.05.00
Circulation function:
Bug Depends on:    
Bug Blocks: 27467, 27605, 27682    
Attachments: Bug 27403: Add fixedHeader to Datatables
Bug 27403: Add fixedHeader to Datatables
Bug 27403: Add fixedHeader to Datatables
Bug 27403: Add fixedHeader to Datatables
Bug 27403: (follow-up) Make basket toolbar and table header work together
Bug 27403: Disable fixedHeader on itemsearch
Bug 27403: (follow-up) Make basket toolbar and table header work together
Bug 27403: Possible item search fix
Bug 27403: Add fixedHeader to Datatables
Bug 27403: Disable fixedHeader on itemsearch
Bug 27403: (follow-up) Make basket toolbar and table header work together
Floating header checkout bleed on holds tab

Description Jonathan Druart 2021-01-12 09:25:26 UTC
This is a nice Datatables plugin that we should enable on our tables.
Comment 1 Jonathan Druart 2021-01-12 09:27:12 UTC
Created attachment 115055 [details] [review]
Bug 27403: Add fixedHeader to Datatables

That's a great plugin to have fixed header.

Test plan:
On the cities table or the patron search table confirm that the header
is floating is you scroll down
Comment 2 Lucas Gass (lukeg) 2021-01-12 19:03:02 UTC
Works well in both Chrome and Firefox, this will save a lot of confusion when looking at larger tables.
Comment 3 Lucas Gass (lukeg) 2021-01-12 19:03:29 UTC
Created attachment 115098 [details] [review]
Bug 27403: Add fixedHeader to Datatables

That's a great plugin to have fixed header.

Test plan:
On the cities table or the patron search table confirm that the header
is floating is you scroll down

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 4 Lucas Gass (lukeg) 2021-01-12 19:07:07 UTC
*** Bug 27417 has been marked as a duplicate of this bug. ***
Comment 5 Katrin Fischer 2021-01-17 16:21:54 UTC
This appears to work quite well, but can you please add a note about the new plugin to the About page?

Small thing: for a table like our current circulation conditions it's possible that the header line will hide the row with the input fields when scrolling down. Not sure this should be a blocker really - the feature is nice and people just need to scroll up a bit again.
Comment 6 Jonathan Druart 2021-01-19 12:14:09 UTC
Created attachment 115314 [details] [review]
Bug 27403: Add fixedHeader to Datatables

That's a great plugin to have fixed header.

Test plan:
On the cities table or the patron search table confirm that the header
is floating is you scroll down
Comment 7 Jonathan Druart 2021-01-19 12:14:50 UTC
Sooo, actually we don't need to add the dataTables.fixedHeader.min.js file, the feature exists in the datatables.min.js file we embed.
Comment 8 Owen Leonard 2021-01-19 14:08:04 UTC
Created attachment 115323 [details] [review]
Bug 27403: Add fixedHeader to Datatables

That's a great plugin to have fixed header.

Test plan:
On the cities table or the patron search table confirm that the header
is floating is you scroll down

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 9 Owen Leonard 2021-01-19 14:08:06 UTC
Created attachment 115324 [details] [review]
Bug 27403: (follow-up) Make basket toolbar and table header work together

The fixed header option for DataTables does the same thing that the
hcSticky jQuery plugin does for us on toolbars, so I've gone through the
templates looking for places they might conflict.

On the acquisitions basket page we can add a special class,
"fh-fixedHeader," to the sticky toolbar to tell DataTables that the
table header should float *below* the toolbar.

To test, apply the patch and go to Acquisitions.

- Locate a vendor and a basket for that vendor with multiple orders.
- Adjust the browse window height if necessary to trigger vertical
  scrolling.
- Confirm that as you scroll down the toolbar (with buttons "Add to
  basket," "Edit basket," etc) sticks to the top of the browser window.
- Confirm that as you continue to scroll, the table header sticks below
  the floating toolbar.
Comment 10 Owen Leonard 2021-01-19 14:14:14 UTC
(In reply to Owen Leonard from comment #9)
> I've gone through the
> templates looking for places they might conflict.

The only other instance I found was on the item search page, where there is some strange behavior. To reproduce:

1. Submit an item search that will return multiple results.
2. After the results have loaded, click the "Edit search" button.
3. As you scroll down, the toolbar sticks to the top of the browser window but then the table header jumps into view before the table of results has scrolled into view.
Comment 11 Jonathan Druart 2021-01-19 15:21:34 UTC
Created attachment 115333 [details] [review]
Bug 27403: Disable fixedHeader on itemsearch

It does not work.
Comment 12 Jonathan Druart 2021-01-19 15:22:15 UTC
Thanks for the follow-up, Owen!

I have no idea about what's happening on the item search view so I am suggesting to simply disable fixedHeader on this page.
Comment 13 Lucas Gass (lukeg) 2021-01-29 00:32:28 UTC
Created attachment 116004 [details] [review]
Bug 27403: (follow-up) Make basket toolbar and table header work together

The fixed header option for DataTables does the same thing that the
hcSticky jQuery plugin does for us on toolbars, so I've gone through the
templates looking for places they might conflict.

On the acquisitions basket page we can add a special class,
"fh-fixedHeader," to the sticky toolbar to tell DataTables that the
table header should float *below* the toolbar.

To test, apply the patch and go to Acquisitions.

- Locate a vendor and a basket for that vendor with multiple orders.
- Adjust the browse window height if necessary to trigger vertical
  scrolling.
- Confirm that as you scroll down the toolbar (with buttons "Add to
  basket," "Edit basket," etc) sticks to the top of the browser window.
- Confirm that as you continue to scroll, the table header sticks below
  the floating toolbar.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 14 Lucas Gass (lukeg) 2021-01-29 00:34:53 UTC
(In reply to Jonathan Druart from comment #12)
> Thanks for the follow-up, Owen!
> 
> I have no idea about what's happening on the item search view so I am
> suggesting to simply disable fixedHeader on this page.

I think why this acts weird is because when you 'Edit search' we show the #item-search-block but the DataTable still thinks it is in the original location even though it has moved down on the page.
You can use destory(), I think to make this work
Comment 15 Lucas Gass (lukeg) 2021-01-29 00:41:09 UTC
Created attachment 116005 [details] [review]
Bug 27403: Possible item search fix

1. Submit an item search that will return multiple results.
2. After the results have loaded, click the "Edit search" button.
3. As you scroll down, the toolbar sticks to the top of the browser window but then the table header jumps into view before the table of results has scrolled into view.
4. Apply this patch and try again, the table header should not act weird.
5. Make sure all the dataTable controls still work
Comment 16 Owen Leonard 2021-02-08 16:29:48 UTC
(In reply to Lucas Gass from comment #15)
> Created attachment 116005 [details] [review] [review]
> Bug 27403: Possible item search fix

This works at first but after clicking the "Edit search" button the DataTable doesn't work correctly. The configuration looks broken and not all results are accessible.

I'm changing this to "Signed off" because I think the the follow-up which disables the feature on the item search page is acceptable.
Comment 17 Lucas Gass (lukeg) 2021-02-08 16:31:37 UTC
(In reply to Owen Leonard from comment #16)
> (In reply to Lucas Gass from comment #15)
> > Created attachment 116005 [details] [review] [review] [review]
> > Bug 27403: Possible item search fix
> 
> This works at first but after clicking the "Edit search" button the
> DataTable doesn't work correctly. The configuration looks broken and not all
> results are accessible.
> 
> I'm changing this to "Signed off" because I think the the follow-up which
> disables the feature on the item search page is acceptable.

Sounds good! I'm obsoleting my patch in that case.
Comment 18 Katrin Fischer 2021-02-08 20:57:47 UTC
I've checked:
- inventory
- patron search
- item search (deactivated)
- batch checkouts from patron account
- list of checkouts in patron account
- MARC bibliographic framework structure
- Authorised value categories

Of course there are more... but these all look ok. I am ready to PQA.
Comment 19 Katrin Fischer 2021-02-08 21:00:26 UTC
Also acq baskets are ok!
Comment 20 Katrin Fischer 2021-02-08 21:01:33 UTC
Created attachment 116524 [details] [review]
Bug 27403: Add fixedHeader to Datatables

That's a great plugin to have fixed header.

Test plan:
On the cities table or the patron search table confirm that the header
is floating is you scroll down

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 21 Katrin Fischer 2021-02-08 21:01:37 UTC
Created attachment 116525 [details] [review]
Bug 27403: Disable fixedHeader on itemsearch

It does not work.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 22 Katrin Fischer 2021-02-08 21:01:41 UTC
Created attachment 116526 [details] [review]
Bug 27403: (follow-up) Make basket toolbar and table header work together

The fixed header option for DataTables does the same thing that the
hcSticky jQuery plugin does for us on toolbars, so I've gone through the
templates looking for places they might conflict.

On the acquisitions basket page we can add a special class,
"fh-fixedHeader," to the sticky toolbar to tell DataTables that the
table header should float *below* the toolbar.

To test, apply the patch and go to Acquisitions.

- Locate a vendor and a basket for that vendor with multiple orders.
- Adjust the browse window height if necessary to trigger vertical
  scrolling.
- Confirm that as you scroll down the toolbar (with buttons "Add to
  basket," "Edit basket," etc) sticks to the top of the browser window.
- Confirm that as you continue to scroll, the table header sticks below
  the floating toolbar.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 23 Jonathan Druart 2021-02-09 08:50:10 UTC
Pushed to master for 21.05, thanks to everybody involved!
Comment 24 Fridolin Somers 2021-02-12 14:47:14 UTC
Enhancement not pushed to 20.11.x
Comment 25 Christopher Brannon 2021-12-16 20:47:55 UTC
If this is the same feature, I think we are seeing some issues with orphaned column headers and bleed over from other tabs (like seeing the checkout headers on the holds tab though part of the scrolling).
Comment 26 Jonathan Druart 2021-12-17 09:25:32 UTC
(In reply to Christopher Brannon from comment #25)
> If this is the same feature, I think we are seeing some issues with orphaned
> column headers and bleed over from other tabs (like seeing the checkout
> headers on the holds tab though part of the scrolling).

Hi Christopher, can you detail a bit more? Which Koha version? On which view are you seeing that? /circulation.pl?borrowernumber=5 on the "X checkout(s)" tab?
Comment 27 Christopher Brannon 2021-12-17 16:04:19 UTC
Created attachment 128685 [details]
Floating header checkout bleed on holds tab

When on the holds tab in circulation.pl or moremember.pl, when you scroll down and just switch over to the floating header, the checkouts header appears on top of the holds header for a little bit until you scroll down further.  I have seen this demonstrated on other systems, and have seen other tabs bleed over as well.
Comment 28 Christopher Brannon 2021-12-17 16:12:17 UTC
Ignore the comment about the orphaned column header.  We hide a particular column through css (because it can't be turned off) and it was showing up in the floating toolbar.
Comment 29 Christopher Brannon 2021-12-17 16:13:21 UTC
The other issue (checkout header appearing on the holds tab) still exists.