Bug 31265 - Curbside pickups - improve slots selection
Summary: Curbside pickups - improve slots selection
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Circulation (show other bugs)
Version: unspecified
Hardware: All All
: P5 - low enhancement with 5 votes (vote)
Assignee: Owen Leonard
QA Contact: Martin Renvoize
URL:
Keywords:
Depends on: 30650
Blocks: 32652
  Show dependency treegraph
 
Reported: 2022-07-29 15:02 UTC by Jonathan Druart
Modified: 2023-12-28 20:43 UTC (History)
4 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
22.11.00


Attachments
Bug 31265: Improve time slots selection (1.94 KB, patch)
2022-07-31 07:45 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 31265: Update style of time selection controls (22.10 KB, patch)
2022-08-05 12:11 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 31265: Update style of time selection controls (22.15 KB, patch)
2022-08-07 13:34 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 31265: Use correct reply-to email when sending overdue mails (1.81 KB, patch)
2022-08-07 16:23 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 31265: (QA follow-up) Align time selection controls like other inputs (2.76 KB, patch)
2022-08-09 16:13 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 31265: Update style of time selection controls (22.22 KB, patch)
2022-08-09 16:16 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 31265: (QA follow-up) Align time selection controls like other inputs (2.82 KB, patch)
2022-08-09 16:16 UTC, Martin Renvoize
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Jonathan Druart 2022-07-29 15:02:19 UTC
We should improve the slots selection. Is what is done at the OPAC enough?

Staff: https://snipboard.io/qikxl3.jpg
OPAC : https://snipboard.io/hULe5D.jpg
Comment 1 Katrin Fischer 2022-07-30 13:45:08 UTC
I think it's a little tidier and that improves orientation. But I agree there could be room for more enhancement.

In the OPAC the entries are a little wide, maybe we could center the times as they are padded and have all the same size and decrease the width a little?
Comment 2 Jonathan Druart 2022-07-31 07:45:57 UTC
Created attachment 138405 [details] [review]
Bug 31265: Improve time slots selection
Comment 3 Jonathan Druart 2022-07-31 07:46:34 UTC
I am very bad at that. Owen, could you help me please? :)
Comment 4 Owen Leonard 2022-08-05 12:11:33 UTC
Created attachment 138686 [details] [review]
Bug 31265: Update style of time selection controls

This patch updates the style of the time selection controls so that it
is clearer that they are elements which the user can interact with. The
times are now styled as buttons, and a check-mark icon is added when a
time is selected.

Also changed: Pickup date and notes fields are hidden until a library
has been selected. The count of existing appointments has been removed
in favor of showing the count of available appointments. A tooltip has
been added: "Appointments available: X"

I also changed the way the date selection event is fired. I found that
jQuery's "change" event on the input itself was not reliable for some
reason. I implemented instead an "onClose" event using the flatpickr
instance.

Note: The patch contains some indentation changes.

To test, apply the patch and enable and configure curbside pickups if
necessary. You should have at least two libraries with curbside hours
defined.

- Log in to the OPAC and go to "your curbside pickups."
- Under the "Schedule a pickup" tab you should see only the option to
  select a library.
- When you select a library the "Pickup date" field should appear.
- When you select a date the time-selection buttons and the notes field
  should appear.
- Hovering over a time should trigger the "Appointments available"
  tooltip.
- Clicking a time should cause the "button" to turn green with a
  check-mark icon.
- Submit a pickup request and confirm that it is saved correctly.
- Return to the "Schedule a pickup" form and confirm that selecting the
  same library again triggers a message, "You already have a pickup
  scheduled for this library."
- Select another library and another date.
- Switch your library selection to the library you already have a
  request for. The date, time, and notes fields should be hidden again
  and the same message triggered about already having a pickup
  scheduled.
Comment 5 Katrin Fischer 2022-08-07 13:33:24 UTC
This looks great, thx! Could we think of something similar for the staff interface? (almost feeling greedy :))
Comment 6 Katrin Fischer 2022-08-07 13:34:12 UTC
Created attachment 138747 [details] [review]
Bug 31265: Update style of time selection controls

This patch updates the style of the time selection controls so that it
is clearer that they are elements which the user can interact with. The
times are now styled as buttons, and a check-mark icon is added when a
time is selected.

Also changed: Pickup date and notes fields are hidden until a library
has been selected. The count of existing appointments has been removed
in favor of showing the count of available appointments. A tooltip has
been added: "Appointments available: X"

I also changed the way the date selection event is fired. I found that
jQuery's "change" event on the input itself was not reliable for some
reason. I implemented instead an "onClose" event using the flatpickr
instance.

Note: The patch contains some indentation changes.

To test, apply the patch and enable and configure curbside pickups if
necessary. You should have at least two libraries with curbside hours
defined.

- Log in to the OPAC and go to "your curbside pickups."
- Under the "Schedule a pickup" tab you should see only the option to
  select a library.
- When you select a library the "Pickup date" field should appear.
- When you select a date the time-selection buttons and the notes field
  should appear.
- Hovering over a time should trigger the "Appointments available"
  tooltip.
- Clicking a time should cause the "button" to turn green with a
  check-mark icon.
- Submit a pickup request and confirm that it is saved correctly.
- Return to the "Schedule a pickup" form and confirm that selecting the
  same library again triggers a message, "You already have a pickup
  scheduled for this library."
- Select another library and another date.
- Switch your library selection to the library you already have a
  request for. The date, time, and notes fields should be hidden again
  and the same message triggered about already having a pickup
  scheduled.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 8 Martin Renvoize 2022-08-09 15:51:19 UTC
This is certainly an improvement in my mind.. but it still feels a little out of place.. 

Shouldn't the 'Select a time' label be left aligned with the other form labels and the select options be aligned with the other inputs?
Comment 9 Martin Renvoize 2022-08-09 15:51:45 UTC
https://snipboard.io/RbwMJa.jpg
Comment 10 Owen Leonard 2022-08-09 16:13:49 UTC
Created attachment 138927 [details] [review]
Bug 31265: (QA follow-up) Align time selection controls like other inputs
Comment 11 Martin Renvoize 2022-08-09 16:16:53 UTC
Created attachment 138928 [details] [review]
Bug 31265: Update style of time selection controls

This patch updates the style of the time selection controls so that it
is clearer that they are elements which the user can interact with. The
times are now styled as buttons, and a check-mark icon is added when a
time is selected.

Also changed: Pickup date and notes fields are hidden until a library
has been selected. The count of existing appointments has been removed
in favor of showing the count of available appointments. A tooltip has
been added: "Appointments available: X"

I also changed the way the date selection event is fired. I found that
jQuery's "change" event on the input itself was not reliable for some
reason. I implemented instead an "onClose" event using the flatpickr
instance.

Note: The patch contains some indentation changes.

To test, apply the patch and enable and configure curbside pickups if
necessary. You should have at least two libraries with curbside hours
defined.

- Log in to the OPAC and go to "your curbside pickups."
- Under the "Schedule a pickup" tab you should see only the option to
  select a library.
- When you select a library the "Pickup date" field should appear.
- When you select a date the time-selection buttons and the notes field
  should appear.
- Hovering over a time should trigger the "Appointments available"
  tooltip.
- Clicking a time should cause the "button" to turn green with a
  check-mark icon.
- Submit a pickup request and confirm that it is saved correctly.
- Return to the "Schedule a pickup" form and confirm that selecting the
  same library again triggers a message, "You already have a pickup
  scheduled for this library."
- Select another library and another date.
- Switch your library selection to the library you already have a
  request for. The date, time, and notes fields should be hidden again
  and the same message triggered about already having a pickup
  scheduled.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 12 Martin Renvoize 2022-08-09 16:16:57 UTC
Created attachment 138929 [details] [review]
Bug 31265: (QA follow-up) Align time selection controls like other inputs

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 13 Martin Renvoize 2022-08-09 16:17:32 UTC
Beautiful, passing QA
Comment 14 Tomás Cohen Arazi 2022-08-09 16:37:18 UTC
Pushed to master for 22.11.

Nice work everyone, thanks!