[vue][datepicker] Minimal range limits

frontend/express/public/javascripts/countly/vue/components/date.js

@@ -640,6 +640,13 @@
             },
             weekdays: function() {
                 return moment.weekdaysMin();
+            },
+            warnings: function() {
+                if (this.isRange && this.rangeLimits.maxLength && this.rangeLimits.maxLength.length === 2) {
+                    var lengthStr = this.rangeLimits.maxLength[0] + ' ' + CV.i18n('common.buckets.' + this.rangeLimits.maxLength[1]);
+                    return {'maxLength': CV.i18n('common.range-length-limit', lengthStr)};
+                }
+                return {};
             }
         },
         props: {
@@ -714,11 +721,19 @@
                 type: Boolean,
                 default: true,
                 required: false
+            },
+            rangeLimits: {
+                type: Object,
+                default: function() {
+                    return {};
+                },
+                required: false
             }
         },
         data: function() {
             var data = getInitialState(this);
             data.isVisible = false;
+            data.commitTooltip = {};
             return data;
         },
         watch: {
@@ -846,6 +861,7 @@
             },
             handleDropdownHide: function(aborted) {
                 this.abortPicking();
+                this.clearCommitWarning(true);
                 if (aborted) {
                     this.loadValue(this.value);
                 }
@@ -938,15 +954,40 @@
             handleDiscardClick: function() {
                 this.doDiscard();
             },
+            triggerCommitWarning: function(errorType) {
+                var self = this;
+                clearTimeout(self.commitTooltip._timeout);
+                self.commitTooltip = {
+                    show: true,
+                    content: this.warnings[errorType],
+                    trigger: 'manual'
+                };
+                self.commitTooltip._timeout = setTimeout(function() {
+                    self.clearCommitWarning();
+                }, 3000);
+            },
+            clearCommitWarning: function(destroyTimeout) {
+                if (destroyTimeout) {
+                    clearTimeout(this.commitTooltip._timeout);
+                }
+                this.commitTooltip = {};
+            },
             doClose: function() {
                 this.$refs.dropdown.handleClose();
+                this.clearCommitWarning(true);
             },
             doDiscard: function() {
                 this.handleDropdownHide(true);
                 this.doClose();
             },
             doCommit: function(value, isShortcut) {
                 if (value) {
+                    if (this.isRange && this.rangeLimits.maxLength && this.rangeLimits.maxLength.length === 2) {
+                        var allowedMax = moment(this.minDate).add(this.rangeLimits.maxLength[0], this.rangeLimits.maxLength[1]);
+                        if (allowedMax < moment(this.maxDate)) {
+                            return this.triggerCommitWarning('maxLength');
+                        }
+                    }
                     var submittedVal = this.isRange ? value : value[0];
                     var effectiveMinDate = this.isTimePickerEnabled ? this.mergeDateTime(this.minDate, this.minTime) : this.minDate;
                     this.$emit("input", submittedVal);
@@ -962,6 +1003,9 @@
                 }
             }
         },
+        beforeDestroy: function() {
+            this.clearCommitWarning(true);
+        },
         template: CV.T('/javascripts/countly/vue/templates/datepicker.html')
     }));
 

frontend/express/public/javascripts/countly/vue/templates/datepicker.html

@@ -148,9 +148,12 @@
                     </div>
                 </div>
             </div>
+            <div v-if="warnings" class="bu-mt-4 bu-mx-4" style="text-align: right;">
+                <span class="text-medium" v-for="warning in warnings">{{warning}}</span>
+            </div>
             <div class="cly-vue-daterp__commit-section">
                 <el-button @click="handleDiscardClick" class="cly-vue-daterp__cancel-button color-cool-gray-100 bg-warm-gray-20" size="small">{{ i18n("common.cancel") }}</el-button>
-                <el-button @click="handleConfirmClick" class="cly-vue-daterp__confirm-button" type="success" size="small">{{ !isRange ? i18n("common.apply") : i18n("common.apply-range") }}</el-button>
+                <el-button @click="handleConfirmClick" v-tooltip="commitTooltip" class="cly-vue-daterp__confirm-button" type="success" size="small">{{ !isRange ? i18n("common.apply") : i18n("common.apply-range") }}</el-button>
             </div>
         </div>
     </div>

frontend/express/public/localization/dashboard/dashboard.properties

@@ -278,6 +278,7 @@ common.time-period-name.since = since {0}
 common.time-period-name.on = on {0}
 common.time-period-name.range = {0} - {1}
 common.apply-range = Apply Range
+common.range-length-limit = Selected range cannot be longer than {0}.
 
 #taskmanager
 taskmanager.rerun = Rerun

plugins/vue-example/frontend/public/templates/date.html

@@ -2,7 +2,7 @@
     <cly-header title="Date picking"></cly-header>
     <cly-main>
         <cly-section title="Global picker (countlyCommon/period)">
-            <cly-date-picker-g></cly-date-picker-g>
+            <cly-date-picker-g :range-limits="{'maxLength': [10, 'days']}"></cly-date-picker-g>
         </cly-section>
         <cly-section title="Date range">
             <cly-date-picker v-model="selectedDateRange" timestampFormat="ms"></cly-date-picker>