Web Client - Columns Can't be Resized on the Fly

[Jennifer Pringle]

Evergreen 3.1

We've had multiple requests from our libraries asking to be able to re-size columns on the fly like they could in the xul client.

If you hover over the edge of a column the drag icon does currently appear. Nothing happens when you try to drag the column edge.

One scenario that has come up a few times is when an item has a long title and staff need to see the full title (usually in Items Out). Staff are finding the current procedure time consuming compared to simply dragging the edge of the column.

Procedure in Web Client:
1. Go to Column Picker
2. Select Manage Column Widths
3. Expanding the Title field
4. Viewing the full title
5. Shrink the Title field (so info in other columns can still be read)
6. Go to Column Picker
7. Select Save Columns

[Remington Steed (rjs7)]

If quicker column-resizing is hard to achieve, hover-over tooltips could help in this scenario:

- Bug #1740412 (for tooltips on all grids)

- Bug #1772206 (adds tooltips for a specific case; though we probably need a generic solution built into egGrid, as Galen mentions on bug #1721144)

[Remington Steed (rjs7)]

We should probably remove the code that causes the mouse cursor "move" and "resize" icons, since those functions aren't supported yet:

staff/css/style.css.tt2
408: cursor: move;
428: cursor: col-resize;
434: cursor: w-resize;
437: cursor: e-resize;

[Jennifer Pringle (jpringle-u)]

I agree with Remington that the code that causes it to look like you can move and resize columns should be removed until that functionality is available. Part of the issue currently is that staff get frustrated because the mouse makes it look like they can resize and then it doesn't work.

[Terran McCanna (tmccanna)]

+1 to Jennifer & Remington

The hover-over that is now available is very helpful, but it is still confusing to staff that the cursor changes so that it looks like the columns can be resized by dragging when they cannot.

[Elaine Hardy (ehardy)]

I agree that the code should be removed until you can actually resize the columns

[Ruth Frasur Davis (redavis)]

Not sure if this is applicable, but this seems to point toward resizable table columns being supported. That said, our current columns are resizable, and I'm not sure this would address the "click and drag" resizability discussed in the ticket.

https://levelup.gitconnected.com/create-resizable-table-columns-with-angular-directives-a9e0f5c1cbf7

[Ruth Frasur Davis (redavis)]

It does mention dragability (as opposed to dragonability which would be pretty cool).

[Kyle Huckins (khuckins)]

The link Ruth provided is very useful, with a caveat - the eg Grid is designed to be reliant on divs, rather than using HTML tables. I have a WIP branch here that's beginning to implement draggability in the grid, and shifts the grid over to tables:
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/khuckins/lp1778311-web-column-on-the-fly-resizing

Moving things over to using HTML tables is proving tricky, as to get draggable resizing to play nicely, there will be a few tweaks needed to apply to the structure of the grid - shifting some parts from the header and body into the grid proper. This link goes into one of the pitfalls that can happen with Angular components and HTML grids: https://medium.com/javascript-everyday/when-to-use-an-attribute-selector-for-angular-components-7e788ba1bfe7

I'm unsure if dragged size changes would be savable, but I believe the switch to HTML tables will be worth it - an added benefit would be easing the ability to add screenreader support.

[Kyle Huckins (khuckins)]

I've pushed a cleaned up version of the above branch here: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/khuckins/lp1778311-web-column-on-the-fly-resizing-v2

The grid now uses HTML tables, and the resize works - though not in the way that might be expected. The current behavior resizes the entire grid. It's partially compatible with saving grid configurations. Changes made by resizing on-the-fly won't save (they don't affect the columns flex, and there doesn't appear to be a way to hook a watcher up to element-level resizing), but the column width manager is no longer broken.

Adding a needsdiscussion tag, as this feels a little too experimental for a pullrequest, but definitely needs eyes on it - I'm running out of ideas on how to better handle this.

[Terran McCanna (tmccanna)]

I've installed this on a test server, but I'm having trouble determining how to test this. Is this change applied to all eg2 grids? I'm not seeing any difference in the interface.

[Elaine Hardy (ehardy)]

I don't see any difference either. I checked holdins view, item table, and item status and don't see a way to resize on the fly in any of them.

[Elaine Hardy (ehardy)]

I don't need the on the fly resize to be saveable. I used it to see, and copy, all of the call numbers, barcodes, in Holdings view that were abbreviated in the column display

[Terran McCanna (tmccanna)]

Removing pullrequest tag for the time being. If there is a way for users to test it, please including testing instructions.

[Stephanie Leary (stephanieleary)]

Noting that the revised grid branch proposed on Bug #1615781 includes column resizing.