IMPROVEMENT: Preset Ranges

[IbrahimHd]

Hi,

First of all, I really appreciate the great work you are doing in this tool! I would like to suggest implementing a preset ranges something like:

• Today
• This Week
• This Month
• This Quarter
• Last 30 days
• Last 15 days
• Month to date
• Year to date

That will be really useful. Do you think that feasible and can be done in the soon future? (Actually I have no good experience to contribute on this :-( ) Thanks a lot.

[g1eb]

Nice, thanks for the suggestion! I agree that it would be useful to have some presets :)

Ultimately this comes down to the common trade-off in minimalistic and clean design vs. functionality. We will need to find a way to integrate preset selection into the current design.

Maybe we can start with a few of your suggestions and work our way up. Which ones would be most important for you to have?

[IbrahimHd]

Thank you for accepting my suggestion! I think the below ranges are much more in common:

• This Week
• This Month
• This Quarter
• Last Week
• Last Month
• Last Quarter
• Month to date

The implementation using moment.js is like this:

'This Week': [moment().startOf('week'), moment().endOf('week')],
'Last Week': [moment().subtract(1, 'week').startOf('week'), moment().subtract(1, 'week').endOf('week')],
'Month to date': [moment().subtract(29, 'days'), moment()],

I would suggest if this can be accessible for customization through an api: options.ranges = {'This Week':[...], 'Last Week':[...], ...}

I really appreciate your work!

[g1eb]

Yeah, I totally agree with you.

Implementing multiple options for predefined ranges into the current design can be rather complicated. Especially taking into account diversity of the ranges that could be used. On the other hand, providing an api with presets is much better solution.

Since your request is rather specific (using ranges such as this week/month/quarter and last week/month/quarter) maybe the best fit for now is to implement these options in your app and change start and end date attributes of the directive on user input?

As an example, if you put these options in a dropdown you can bind an on-change listener to switch start and end dates of the datetime-range directive accordingly. Would that work as a solution for you? I would love to help you with this if you want :)

[IbrahimHd]

Dear Gleb,

Thanks for your feedback.

Actually it works using "on-change" listener but it will be much more elegant if it is integrated as an api. In terms of UI design, I would suggest the following:

I think the "pre-defined ranges" can be set as an option by itself, something like show-ranges="true|false"

Sorry if I'm adding extra work for you, but I really love those excited features!

[IbrahimHd]

I think this will be much more sleek:

do you agree with this?

[g1eb]

Allright, I will see what I can do! :)

I'm not sure when I get to this exactly but I will notify you as soon as it's done.

[IbrahimHd]

that's really nice from you!

[g1eb]

Hi! I've added optional preset ranges to the directive. Let me know what you think :)

[IbrahimHd]

Thanks a lot Gleb for your prompt response! The implemented "preset ranges" works fine, however there are some points:

1. I think the look of the list needs improvement ( personally, I suggest the last screenshot I sent, that with clickable [ . . . ] )
2. The layout gets broken when the calendar is open (see below screenshot)
3. Could you please add an action to Close the datetime_range interface on preset selection

screenshot: (broken layout)

THANKS A LOT!

[g1eb]

Wow! What happened to your styles there? That's not how it's supposed to look and I can't reproduce that broken layout.

Anyhow, if you prefer preset options to show up in a list on click the dots without opening edit popover I can totally make that happen :)

Check it out in v.0.2.6

[IbrahimHd]

Hi Gleb,

I checked out the update preset and it looks great 👍 Just few points:

1. on-close and on-change are not fired on selection
2. like the main edit menu, it will be great if the preset menu auto close on clicking outside
3. for the button:
   • I think 5 dots are enough for the button ;-)
   • get it a bit closer to the main body of the range
   • place the list just after the main body of the range (no need to keep the btn visible as menu can be closed by clicking outside or pressing esc key)

Sorry for my long comment :-)

[g1eb]

No worries, thanks for your feedback!

I've included it in the latest release v.0.2.8 :)

[IbrahimHd]

Thanks Gleb 👍

Sorry, one more issue... on preset selection the directive updated in the UI but does not gives the selected preset Start & End, it returns the initial ones. However it works fine when the same present selected again.

Your action is highly appreciated!

[g1eb]

Ah yes, the good old angular timing issue, thanks for finding that one! I've fixed that in v0.2.10 :)

[IbrahimHd]

Thanks a lot Gleb!

One more issue, hope this will be the last one :) OnChange is fired even when selecting the same preset range, which means nothing changed.

Appreciated!

[g1eb]

Good point! I've refactored callback functionality to fix this. Check (v.0.2.11)

[IbrahimHd]

Good job 👍