Closed RachL closed 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.
Dears @openfoodfoundation/train-drivers-product-owners, let me introduce you the new datetimepicker : https://flatpickr.js.org/ and its integration inside our product:
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?
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 ;-)
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.
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!
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 😉):
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)
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.
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.
(actually, it's the same: /order_management/reports/bulk_coop/new
, /admin/orders/bulk_management
)
@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.
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?
@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 :)
@Erioldoesdesign, I've made some of the customizations you've suggested. Here it is:
Tell me if you agree with that, or perhaps if there is something to add.
@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
Description
- As a: Enterprise user and super admin - On pages: Our date picker are used in the following pages:
/admin/order_cycles
on ordercycle list but also when creating / editing an order cycle/admin/reports
on each reports filters/admin/orders?q[s]=completed_at+desc
in start / end date filters/admin/orders/bulk_management
in start / end date filters/admin/subscriptions/
when creating or editing a new subscription- I want to be able to do: use a date picker that is not using
jquery-ui-rails
as a dependencyThis 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
to2021-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:
/admin/order_cycles
on ordercycle list but also when creating / editing an order cycle/admin/reports
on each reports filters/admin/orders?q[s]=completed_at+desc
in start / end date filters/admin/orders/bulk_management
in start / end date filters/admin/subscriptions/
when creating or editing a new subscriptionScenario 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