search

openfoodfoundation / openfoodnetwork

Connect suppliers, distributors and consumers to trade local produce.
https://www.openfoodnetwork.org
GNU Affero General Public License v3.0
1.11k stars 719 forks source link

As an enterprise manager, I can use a new date picker #6664

Closed RachL closed 3 years ago

RachL commented 3 years ago

Description

- As a: Enterprise user and super admin - On pages: Our date picker are used in the following pages:

- I want to be able to do: use a date picker that is not using jquery-ui-rails as a dependency

This new date picker must:

✅ Select both date and time ✅ Is already or can be translated ✅ Allow the option in the future to add custom shortcuts such “next month” (as discussed here) ✔️ Currently the date picker has the option to select NOW/TODAY. It could be nice to keep it. ✔️ Only if super easy with the new one, it would be nice to improve the selection of the end date. Currently let's say I want to select a time between January the 21st to January the 22nd I have to select: 2021-01-21 00:00 to 2021-01-23 00:00. Selecting the 23rd ensures that the 22nd is fully selected. So for the end date it's important that if I select the 22 date, it actually does cover the 22nd completely automatically. However for the start date, the current behavior (starting at midnight) is correct.

Legend: ✅ : Must have ✔️ : Nice to have

Acceptance Criteria & Tests

See description for must have criterias, plus:

Scenario 1 As a simple producer

We need to make sure selecting dates ends up with correct results on all the following pages:

Scenario 2 As a multi-producer hub

Repeat same tests as scenario 1

Scenario 3 As a super admin

Repeat same tests as scenario 2

Previous discussions

https://github.com/openfoodfoundation/openfoodnetwork/pull/6482

Especially this comment has all the history: https://github.com/openfoodfoundation/openfoodnetwork/pull/6482#issuecomment-758102380

Todo

RachL commented 3 years ago

@jibees in the "what should be tested" section of your PR, don't hesitate to adapt the criterias I've listed according to the "nice to have" that will really be possible with the new one.

jibees commented 3 years ago

Dears @openfoodfoundation/train-drivers-product-owners, let me introduce you the new datetimepicker : https://flatpickr.js.org/ and its integration inside our product:

Capture d’écran 2021-01-14 à 16 55 59

I wonder if it's necessary to customize the design of this component to better match our design? With absolutely no effort, we can apply a different theme, that you can see here: https://flatpickr.js.org/themes/ Of course, with more effort we can customize. What do you think?

RachL commented 3 years ago

For myself I don't think I have a preference. As changing the template seems easy, it's also something we can do in iteration 2 or when we work on other UI bits of the admin. I wouldn't customize anything ourselves at this stage.

One comment on the AM/PM system: it made me realize that currently we have the 24 hours mode included for all instances.

As this seems configurable with this date picker, maybe we will want to create an issue in order for instance managers to be able to configure this in their general instance settings. If it's not too complex. Otherwise I guess we must forget this comment :)

Also @jibees the date format in the field seems weird? Maybe you've noticed already ;-) image

jibees commented 3 years ago

Also @jibees the date format in the field seems weird? Maybe you've noticed already ;-)

Yes, this is the very beginning, and there are a lot of bugs, but I wanted to show you the datetimepicker early to have this kind of discussions about design and/or UX.

Erioldoesdesign commented 3 years ago

Firstly, I read 'Native DateTime Input' and 'mobile' support and I am so happy!!!! 😄

re. styling we're kind of in the process of doing a UI uplift piece in the product list part of OFN that I can take you through in our chat catch up.

Generally theres a few things I can list here that'll align with the UI uplift more:

I'm a little concerned some click hit areas are small - for the drop down month and year select this is a very 'precise' mouse click so (as always) I'm worried about accessibility!

But this is an improvement so we can consider accessibility improvements at a later date when we can focus on that subject 👍

great work JB!

jibees commented 3 years ago

Dears @openfoodfoundation/train-drivers-product-owners, I've a bunch of questions (which may concerns only the admin/order_cycles page, but this is where I am now 😉):

Capture d’écran 2021-01-15 à 11 15 25

The default behavior with flatpickrjs is a non-editable input and clicking on it directly opens the widget (you can see the basic example here: https://flatpickr.js.org/examples/#basic)

RachL commented 3 years ago

Is it something you want to keep?

I think it leads to mistakes. I used it once to copy-paste a date, but that was because the hour selector was not working. IMO if the selector works smoothly, editing the field is not necessary. @Erioldoesdesign is there a case where editing the field is an accessibility best pratice?

Is it normal behaviour to select a date in the past for order_cycle?

I'm afraid this is used quite often to quickly open an order cycle if you don't have the NOW option. Also I don't know if this questions applies to the date picker in the reports, but overthere a past date needs to be selected all the time.

jibees commented 3 years ago

In the page /admin/orders there is a date range picker (see screenshot below) which is actually composed with two datepicker. I assume it can be possible to use the flatpickr widget with the date range option (as shown here: https://flatpickr.js.org/examples/#range-calendar) Obviously, this is more work, but I think it makes sense.

Capture d’écran 2021-01-15 à 15 09 04

(actually, it's the same: /order_management/reports/bulk_coop/new, /admin/orders/bulk_management)

RachL commented 3 years ago

@jibees fro muser point of vue, the most important is to be able to select a date range. So if it's easier to do it with one datepicker only go for it.

jibees commented 3 years ago

Currently, selecting a new date on /admin/order_cycles/ (and maybe elsewhere), change the time to 00:00 whatever the previous hour was. Is it a behavior we want to keep or having the preselecting hour the same as the previous is a more accurate behavior?

RachL commented 3 years ago

@jibees what do you mean by "previous hour" ? The current hour?

Especially when filtering order or reports, it's important that the dates get "included" but maybe it's easier if we call each other quickly on this one :)

jibees commented 3 years ago

@Erioldoesdesign, I've made some of the customizations you've suggested. Here it is:

Capture d’écran 2021-01-20 à 16 02 43

Tell me if you agree with that, or perhaps if there is something to add.

Erioldoesdesign commented 3 years ago

@jibees looks good to me!

At some point in the future, we'll look at the colours used in the back office admin side and the front end shopper side and see if colours need to match or not.

for your info (you may already know) I got this link from Maikel re. the front end shop colours: https://github.com/openfoodfoundation/openfoodnetwork/blob/master/app/assets/stylesheets/darkswarm/branding.scss