Bug 23013

Summary: Upgrade DataTables in the staff client
Product: Koha Reporter: Owen Leonard <oleonard>
Component: TemplatesAssignee: Owen Leonard <oleonard>
Status: CLOSED FIXED QA Contact: Martin Renvoize <martin.renvoize>
Severity: enhancement    
Priority: P5 - low CC: jonathan.druart, martin.renvoize
Version: master   
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:
19.11.00
Bug Depends on:    
Bug Blocks: 23493, 24093, 24169, 27082, 27247, 29488    

Description Owen Leonard 2019-05-29 16:18:43 UTC
I would like to upgrade the DataTables plugin used in the staff client. This process will include:

 - A new concatenated, minified version of the
   DataTables components.

 - Removal of the custom "four_button" pagination
   configuration in favor of the built-in "full"
   pagination type.

 - Update style of pagination bars, including 
   some additions to improve responsive behavior.
   Table-specific CSS, including our DataTables CSS,
   is now in a separate file, "_tables.scss" which
   compiled into staff-global.css.
Comment 1 Owen Leonard 2019-06-06 17:22:18 UTC
This is ready for testing, bug Bugzilla rejects the patches because of the size. I've posted the branch here:

https://gitlab.com/koha-dev/koha-dev/tree/bug-23013-datatables-upgrade
Comment 2 Owen Leonard 2019-07-19 12:33:06 UTC
I have rebased the branch on GitLab. I have also put a downloadable patch here in case that helps: https://zivotdesign.com/download/bug-23013.patch
Comment 3 Jonathan Druart 2019-08-05 17:38:23 UTC
On the vendor search: https://snag.gy/dLvxB2.jpg

On the lists page: https://snag.gy/OuBWls.jpg

On the checkouts page:
  - before https://snag.gy/VHtmrw.jpg
  - after https://snag.gy/N26y1d.jpg
We lost the icons (x, v), the color on hover, and the size is not adjusted (see the last one, "Check in select all"
Comment 4 Jonathan Druart 2019-08-05 18:15:23 UTC
I forgot to yarn rebuild!

Now I see:
https://snag.gy/WolMes.jpg
https://snag.gy/l5kxbG.jpg

Which is better, but still a misalignment (minor).
Comment 5 Owen Leonard 2019-08-08 12:21:02 UTC
In my tests there is some minor misalignment which varies between browsers, usually between one and two pixels. The problem is greater if your page zoom has been increased.

I can work on a follow-up, but I hope this can move forward if that's the only problem which has turned up.
Comment 6 Martin Renvoize 2019-08-22 14:17:06 UTC
This is looking pretty solid to me.. I can't find any issues (beyond the tiny misalignment problem Jonathan found)

I'm inclined to jump to PQA, as two QA team members have now taken a look.

What I would love to see if the rowGroup plugin (which only currently appears to be used in the checkouts table with minimal effect) bundled within it too now we're using the DT package builder... but that can wait for a followup bug.
Comment 7 Martin Renvoize 2019-08-22 14:25:45 UTC
Nice work!

Pushed to master for 19.11.00