5.1p / 6.1d MiniDateRangeItem problems (no date, wrong calculation)

[Blama]

Hi Isomorphic,

I have a MiniDateRangeItem for creationDate daterange selection. Now, in order to improve the GUI, I added "yearToDate" and "lastYear", ... shortcuts.
Basically all those shortcuts have problems, even though they should work IMHO.
Tested using v10.1p_2017-04-13 and SNAPSHOT_v11.1d_2017-04-16.

BuiltInDS.java:

package com.smartgwt.sample.client;

import java.util.Date;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.datepicker.client.CalendarUtil;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.DateRange;
import com.smartgwt.client.data.RelativeDate;
import com.smartgwt.client.types.Cursor;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.CanvasItem;
import com.smartgwt.client.widgets.form.fields.MiniDateRangeItem;
import com.smartgwt.client.widgets.form.fields.SpacerItem;
import com.smartgwt.client.widgets.layout.HStack;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS implements EntryPoint {
    private VLayout mainLayout;
    private IButton recreateBtn;

    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        mainLayout = new VLayout(20);
        mainLayout.setWidth100();
        mainLayout.setHeight100();

        recreateBtn = new IButton("Recreate");
        recreateBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                recreate();
            }
        });
        mainLayout.addMember(recreateBtn);
        recreate();
        mainLayout.draw();
    }

    private void recreate() {
        Window w = new Window();
        w.setWidth("95%");
        w.setHeight("95%");
        w.setMembersMargin(0);
        w.setModalMaskOpacity(70);
        w.setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
        w.setTitle("5.1p / 6.1d MiniDateRangeItem problems (no date, wrong calculation)" + w.getTitle());
        w.setShowMinimizeButton(false);
        w.setIsModal(true);
        w.setShowModalMask(true);
        w.centerInPage();

        final DynamicForm df = new DynamicForm();
        df.setColWidths("100", "180");
        df.setDataSource(DataSource.get("supplyItem"));
        MiniDateRangeItem createdAtMDRI = new MiniDateRangeItem("nextShipment");
        createdAtMDRI.setWidth("*");
        MDRIConfiguer mdriConfiguer = new MDRIConfiguer("MDRIConfiguer", createdAtMDRI);
        df.setFields(createdAtMDRI, new SpacerItem(), mdriConfiguer);

        IButton showValue = new IButton("Show value", new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                SC.say(df.getValuesAsAdvancedCriteria() != null ? df.getValuesAsAdvancedCriteria().toJSON() : "no criteria");
            }
        });

        w.addItem(df);
        w.addItem(showValue);
        w.show();
        w.focus();
    }

    private class MDRIConfiguer extends CanvasItem {
        private MiniDateRangeItem createdAtDRI;

        public MDRIConfiguer(String name, final MiniDateRangeItem createdAtDRI) {
            super(name);
            this.createdAtDRI = createdAtDRI;

            setStartRow(false);
            setShowTitle(false);
            setWidth("*");
            setHeight(createdAtDRI.getHeight());

            HStack al = new HStack(5);
            {
                al.addMember(new MyLabel("YTD", new RelativeDate("-0Y"), new RelativeDate("$today")));
                al.addMember(new MyLabel("QTD", new RelativeDate("-0Q"), new RelativeDate("$today")));
                al.addMember(new MyLabel("MTD", new RelativeDate("-0M"), new RelativeDate("$today")));

                Date d = new Date();
                CalendarUtil.addMonthsToDate(d, -12);
                String lastYear = DateTimeFormat.getFormat("yyyy").format(d);

                d = new Date();
                CalendarUtil.addMonthsToDate(d, -3);
                int month0aligned = (new Integer(DateTimeFormat.getFormat("M").format(d)) / 3) + 1;
                String lastQuarter = "Q" + (month0aligned == 0 ? 4 : month0aligned);

                d = new Date();
                CalendarUtil.addMonthsToDate(d, -1);
                String lastMonth = DateTimeFormat.getFormat("MMMM").format(d);

                al.addMember(new MyLabel(lastYear, new RelativeDate("-1Y"), new RelativeDate("-1d[-0Y]"))); // -0Y[-1D] does not work, either
                al.addMember(new MyLabel(lastQuarter, new RelativeDate("-1Q"), new RelativeDate("-1d[-0Q]")));// -0Q[-1D] does not work, either
                al.addMember(new MyLabel(lastMonth, new RelativeDate("-1M"), new RelativeDate("-1d[-0M]")));// -0M[-1D] does not work, either
            }
            setCanvas(al);
        }

        private class MyLabel extends Label {
            public MyLabel(String content, final RelativeDate startRD, final RelativeDate endRD) {
                super();
                setWidth(1);
                setCursor(Cursor.HAND);
                setContents("<span style=\"text-decoration: underline;\">" + content + "</span>");

                addClickHandler(new ClickHandler() {
                    @Override
                    public void onClick(ClickEvent event) {
                        DateRange dr = new DateRange();
                        dr.setRelativeStartDate(startRD);
                        dr.setRelativeEndDate(endRD);
                        createdAtDRI.setValue(dr);
                    }
                });
            }
        }
    }
}

Problems:

• YTD: DateRange looks OK in the DynamicForm, but if calling getValuesAsAdvancedCriteria() via the button, it returns null. Reason: From-value has a validation error, if you click the calendar icon.
• QTD: DateRange looks OK in the DynamicForm, but if calling getValuesAsAdvancedCriteria() via the button, it returns null. Reason: From-value has a validation error, if you click the calendar icon.
• MTD: From-value is wrong. Like above it should be Apr, 1st.
• 2016: To-value should be 2016-12-31. From-value has a validation error, if you click the calendar icon.
• Q1: To-value should be 2017-03-31. From-value has a validation error, if you click the calendar icon.
• March: From-value should be 2017-03-01. To-value should be 2017-03-31.

The wrong values are according to the docs as I understand them:

...eg, +1d[+1W] indicates "plus one day from the end of NEXT week".

So -1d[-0Y] should be "minus one day from the beginning of THIS year".

Best regards
Blama

[Isomorphic]

A few things here:

1) the RelativeDateItem UI doesn't support editing RelativeDateStrings that contain a qualifier (the internal relative-string in square brackets). When you set such a value, the framework is supposed to convert it to an absolute date to use as the value and discard the relative string - there was a bug in this code, and it's been fixed for tomorrow's builds.

As of tomorrow, things will work as you expect - but relative-strings you pass in this way will be discarded and their absolute equivalent applied to the items, as was supposed to happen already.

2) You could create your own criteria-based ranges, as in this sample

3) You could run your RelativeDateStrings through DateUtil.getAbsoluteDate() before passing them to your DateRange

[Blama]

Hi Isomorphic,

thanks for the answer, I'll have a look at RecentDateRangeItem, I did not notice it before.
But in general the conversion to absolute dates is fine for me, so I'll retest tomorrow.

Best regards
Blama

[Blama]

Hi Isomorphic,

now retesting with v11.1p_2017-08-16:

• YTD: Ok
• QTD: Ok
• MTD: Not Ok (From: 08/17/2017, To: Today) // From should be 08/01/2017
• 2016: Ok
• Q2: Ok
• July: Not Ok (From: 07/17/2017, To: 07/31/2017) // From should be 07/01/2017

Best regards
Blama

[Isomorphic]

We did just make a couple of internal tweaks to deal with potential issues in this case - you can test those out tomorrow.

However, it may not be necessary to wait - For days, weeks and months, the control defaults to rounding to the nearest day (like a lower case -0m[+0D], the end of today, whereas -0M[+0D] would be the end of the first day of this month).

Were you aware of RelativeDateItem.setRangeRoundingGranuality()?

You can use that so specify that for "next month" type strings, you want to round to the month, not the day

If you still see the same issues, please try it again with tomorrow's build, and show your latest code if it comes to that.

In fact, if you want to share the latest relative strings you're using for these latest tests, we can test them out anyway.

[Blama]

Hi Isomorphic,

thanks for fixing it, I will retest. You can see the testcases in #1. Remaining issues were with:

al.addMember(new MyLabel("MTD", new RelativeDate("-0M"), new RelativeDate("$today")));
al.addMember(new MyLabel(lastMonth, new RelativeDate("-1M"), new RelativeDate("-1d[-0M]")));

I did not see RelativeDateItem.setRangeRoundingGranuality(), but will look into it.

Best regards
Blama

[Isomorphic]

Yes, both of those will work with tomorrow's builds.

Note that, once you've called setRangeRoundingGranuality() as discussed previously, "last month", for example, will just be "-1M" for both start and end dates, when used in a RelativeDateItem - or a call to getAbsoluteDate() that passes the rangePosition parameter.

"-1M" for start and end will result in the beginning and end of last month. What the RDI will actually produce is "-1m[-0M]" -- "one month ago, rounded to the beginning of the month"

[Blama]

Hi Isomorphic,

using v11.1p_2017-08-20 the testcase from #1 now is behaving worse than before.

• YTD: Ok
• QTD: Ok
• MTD: 08/21/2017 - today (expected: 08/01/2017 - today)
• 2016: 01/01/2016 - 12/30/2017 (expected: 01/01/2016 - 12/31/2016)
• Q2: 04/01/2017 - 09/29/2017 (expected: 04/01/2017 - 09/30/2017)
• July: 07/21/2017 - 08/30/2017 (expected: 07/01/2017 - 07/31/2017)

Best regards
Blama

[Isomorphic]

Did you call setRangeRoundingGranuality()?

[Blama]

No, I just used the same sample, as you said in #7 that the two remaining erroneous should be working.

Best regards
Blama

[Isomorphic]

We are testing with these relative ranges, and we see no issues with them:

var ranges = [
    { start: "-0Y", end: "$today", title: "YTD" },
    { start: "-0Q", end: "$today", title: "QTD" },
    { start: "-0M", end: "$today", title: "MTD" },
    { start: "-1Y", end: "-1Y", title: "Last Year" },
// it actually doesn't matter if you use + or - 1M for either value here, because it will get rounded anyway,according to rangePosition (start or end)
    { start: "-1M", end: "-1M", title: "Last Month" },
    { start: "-0M", end: "+0M", title: "This Month" }
];

Note that, with the latest framework builds and the call to setRangeRoundingGranuality(), you will see, for example, MTD as "n months ago" and "0" selected in the UI widgets - and the dates to the right are correct, our testing.

[Isomorphic]

Note that, with the relativeStrings we just posted,we do see a problem if we don't set up the range-rounding granularity.

However, if you use these relativeStrings instead, you should see things work as you expect.

var ranges = [
    { start: "-0Y", end: "$today", title: "YTD" },
    { start: "-0Q", end: "$today", title: "QTD" },
    { start: "-1Y", end: "-1Y", title: "Last Year" },
    // you can force rounding *without* calling setRangeRoundingGranularity() with these strings - these will correctly produce absolute dates
    { start: "-0M[-0M]", end: "$today", title: "MTD" },
    { start: "-1M[-0M]", end: "-1M[+0M]", title: "Last Month" },
    { start: "-0M[-0M]", end: "-0M[+0M]", title: "This Month" }
];

For clarity, these work because a string like "-0M" is editable in the RDI, since there's an "n months ago" option, and the string equates to "0 months ago" - in this case, rounding is controlled by the rangeRoundingGranularity.

Whereas, if you pass a qualifier, which is not supported by the RDI, the string is run through getAbsoluteDate() and rounded according to the item's rangePosition.

[Blama]

Hi Isomorphic,

I'll look into rangeRoundingGranularity() once I need to configure the options for the item. For now, I'm fine with the 6 buttons from the sample and the default in the Dropdown.

Those six buttons are working now as expected with this adjusted code:

package com.smartgwt.sample.client;

import java.util.Date;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.datepicker.client.CalendarUtil;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.DateRange;
import com.smartgwt.client.data.RelativeDate;
import com.smartgwt.client.types.Cursor;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.CanvasItem;
import com.smartgwt.client.widgets.form.fields.MiniDateRangeItem;
import com.smartgwt.client.widgets.form.fields.SpacerItem;
import com.smartgwt.client.widgets.layout.HStack;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS implements EntryPoint {
    private VLayout mainLayout;
    private IButton recreateBtn;

    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        mainLayout = new VLayout(20);
        mainLayout.setWidth100();
        mainLayout.setHeight100();

        recreateBtn = new IButton("Recreate");
        recreateBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                recreate();
            }
        });
        mainLayout.addMember(recreateBtn);
        recreate();
        mainLayout.draw();
    }

    private void recreate() {
        Window w = new Window();
        w.setWidth("95%");
        w.setHeight("95%");
        w.setMembersMargin(0);
        w.setModalMaskOpacity(70);
        w.setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
        w.setTitle("5.1p / 6.1d MiniDateRangeItem problems (no date, wrong calculation)" + w.getTitle());
        w.setShowMinimizeButton(false);
        w.setIsModal(true);
        w.setShowModalMask(true);
        w.centerInPage();

        {
            final DynamicForm df = new DynamicForm();
            df.setColWidths("100", "380");
            df.setDataSource(DataSource.get("supplyItem"));
            MiniDateRangeItem createdAtMDRI = new MiniDateRangeItem("nextShipment");
            createdAtMDRI.setHeight(28);
            createdAtMDRI.setWidth("*");
            MDRIConfiguer mdriConfiguer = new MDRIConfiguer("MDRIConfiguer", createdAtMDRI);
            df.setFields(createdAtMDRI, new SpacerItem(), mdriConfiguer);

            IButton showValue = new IButton("Show value", new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                    SC.say(df.getValuesAsAdvancedCriteria() != null ? df.getValuesAsAdvancedCriteria().toJSON() : "no criteria");
                }
            });

            w.addItem(df);
            w.addItem(showValue);
        }

        w.show();
        w.focus();
    }

    private class MDRIConfiguer extends CanvasItem {
        private MiniDateRangeItem createdAtDRI;

        public MDRIConfiguer(String name, final MiniDateRangeItem createdAtDRI) {
            super(name);
            this.createdAtDRI = createdAtDRI;

            setStartRow(false);
            setShowTitle(false);
            setWidth("*");
            setHeight(createdAtDRI.getHeight());

            HStack al = new HStack(5);
            {
                al.addMember(new MyLabel("YTD", new RelativeDate("-0Y[-0Y]"), new RelativeDate("$today")));
                al.addMember(new MyLabel("QTD", new RelativeDate("-0Q[-0Q]"), new RelativeDate("$today")));
                al.addMember(new MyLabel("MTD", new RelativeDate("-0M[-0M]"), new RelativeDate("$today")));

                Date d = new Date();
                CalendarUtil.addMonthsToDate(d, -12);
                String lastYear = DateTimeFormat.getFormat("yyyy").format(d);

                d = new Date();
                CalendarUtil.addMonthsToDate(d, -3);
                int month0aligned = (new Integer(DateTimeFormat.getFormat("M").format(d)) / 3) + 1;
                String lastQuarter = "Q" + (month0aligned == 0 ? 4 : month0aligned);

                d = new Date();
                CalendarUtil.addMonthsToDate(d, -1);
                String lastMonth = DateTimeFormat.getFormat("MMMM").format(d);

                al.addMember(new MyLabel(lastYear, new RelativeDate("-1Y[-0Y]"), new RelativeDate("-1Y[+0Y]")));
                al.addMember(new MyLabel(lastQuarter, new RelativeDate("-1Q[-0Q]"), new RelativeDate("-1Q[+0Q]")));
                al.addMember(new MyLabel(lastMonth, new RelativeDate("-1M[-0M]"), new RelativeDate("-1M[+0M]")));
            }
            setCanvas(al);
        }

        private class MyLabel extends Label {
            public MyLabel(String content, final RelativeDate startRD, final RelativeDate endRD) {
                super();
                setWidth(1);
                setCursor(Cursor.HAND);
                setContents("<span style=\"text-decoration: underline;\">" + content + "</span>");

                addClickHandler(new ClickHandler() {
                    @Override
                    public void onClick(ClickEvent event) {
                        DateRange dr = new DateRange();
                        dr.setRelativeStartDate(startRD);
                        dr.setRelativeEndDate(endRD);
                        createdAtDRI.setValue(dr);
                    }
                });
            }
        }
    }
}

Thank a lot & Best regards
Blama