From a46e2a449c55811c605885664a4497813038b59d Mon Sep 17 00:00:00 2001
From: Vedat Can Keklik <vcankeklik@gmail.com>
Date: Mon, 14 Mar 2022 21:00:16 +0300
Subject: [PATCH 1/3] [vue][date-picker] Minimal rangeLimits

---
 .../javascripts/countly/vue/components/date.js      | 13 +++++++++++++
 .../vue-example/frontend/public/templates/date.html |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/express/public/javascripts/countly/vue/components/date.js b/frontend/express/public/javascripts/countly/vue/components/date.js
index bcf6c699190..bbcaf61b2c4 100644
--- a/frontend/express/public/javascripts/countly/vue/components/date.js
+++ b/frontend/express/public/javascripts/countly/vue/components/date.js
@@ -714,6 +714,13 @@
                 type: Boolean,
                 default: true,
                 required: false
+            },
+            rangeLimits: {
+                type: Object,
+                default: function() {
+                    return {};
+                },
+                required: false
             }
         },
         data: function() {
@@ -947,6 +954,12 @@
             },
             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;
+                        }
+                    }
                     var submittedVal = this.isRange ? value : value[0];
                     var effectiveMinDate = this.isTimePickerEnabled ? this.mergeDateTime(this.minDate, this.minTime) : this.minDate;
                     this.$emit("input", submittedVal);
diff --git a/plugins/vue-example/frontend/public/templates/date.html b/plugins/vue-example/frontend/public/templates/date.html
index 306c952957e..e3b8e68ea55 100644
--- a/plugins/vue-example/frontend/public/templates/date.html
+++ b/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>

From 3cb2009f3ee72819c51bef9e3e66d4a6badd316f Mon Sep 17 00:00:00 2001
From: Vedat Can Keklik <vcankeklik@gmail.com>
Date: Mon, 14 Mar 2022 22:02:54 +0300
Subject: [PATCH 2/3] [vue][date] Limit warning

---
 .../javascripts/countly/vue/components/date.js       | 12 +++++++++++-
 .../countly/vue/templates/datepicker.html            |  3 +++
 .../localization/dashboard/dashboard.properties      |  1 +
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/frontend/express/public/javascripts/countly/vue/components/date.js b/frontend/express/public/javascripts/countly/vue/components/date.js
index bbcaf61b2c4..ad263c3d5bb 100644
--- a/frontend/express/public/javascripts/countly/vue/components/date.js
+++ b/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: {
@@ -945,6 +952,9 @@
             handleDiscardClick: function() {
                 this.doDiscard();
             },
+            triggerCommitWarning: function(/*errorType*/) {
+                //this.warnings[errorType];
+            },
             doClose: function() {
                 this.$refs.dropdown.handleClose();
             },
@@ -957,7 +967,7 @@
                     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;
+                            return this.triggerCommitWarning('maxLength');
                         }
                     }
                     var submittedVal = this.isRange ? value : value[0];
diff --git a/frontend/express/public/javascripts/countly/vue/templates/datepicker.html b/frontend/express/public/javascripts/countly/vue/templates/datepicker.html
index a6c9f4e540f..2072c3c86de 100644
--- a/frontend/express/public/javascripts/countly/vue/templates/datepicker.html
+++ b/frontend/express/public/javascripts/countly/vue/templates/datepicker.html
@@ -148,6 +148,9 @@
                     </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>
diff --git a/frontend/express/public/localization/dashboard/dashboard.properties b/frontend/express/public/localization/dashboard/dashboard.properties
index 9eace53b4c4..a0072e79ee1 100644
--- a/frontend/express/public/localization/dashboard/dashboard.properties
+++ b/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

From c8bba37c258e2e53ac376a7c413e954732113a7f Mon Sep 17 00:00:00 2001
From: vck <vcankeklik@gmail.com>
Date: Tue, 15 Mar 2022 15:32:56 +0300
Subject: [PATCH 3/3] [vue][date] Range limit warning tooltip

---
 .../countly/vue/components/date.js            | 25 +++++++++++++++++--
 .../countly/vue/templates/datepicker.html     |  2 +-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/frontend/express/public/javascripts/countly/vue/components/date.js b/frontend/express/public/javascripts/countly/vue/components/date.js
index ad263c3d5bb..d6a5366d310 100644
--- a/frontend/express/public/javascripts/countly/vue/components/date.js
+++ b/frontend/express/public/javascripts/countly/vue/components/date.js
@@ -733,6 +733,7 @@
         data: function() {
             var data = getInitialState(this);
             data.isVisible = false;
+            data.commitTooltip = {};
             return data;
         },
         watch: {
@@ -860,6 +861,7 @@
             },
             handleDropdownHide: function(aborted) {
                 this.abortPicking();
+                this.clearCommitWarning(true);
                 if (aborted) {
                     this.loadValue(this.value);
                 }
@@ -952,11 +954,27 @@
             handleDiscardClick: function() {
                 this.doDiscard();
             },
-            triggerCommitWarning: function(/*errorType*/) {
-                //this.warnings[errorType];
+            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);
@@ -985,6 +1003,9 @@
                 }
             }
         },
+        beforeDestroy: function() {
+            this.clearCommitWarning(true);
+        },
         template: CV.T('/javascripts/countly/vue/templates/datepicker.html')
     }));
 
diff --git a/frontend/express/public/javascripts/countly/vue/templates/datepicker.html b/frontend/express/public/javascripts/countly/vue/templates/datepicker.html
index 2072c3c86de..3dcab9aa81c 100644
--- a/frontend/express/public/javascripts/countly/vue/templates/datepicker.html
+++ b/frontend/express/public/javascripts/countly/vue/templates/datepicker.html
@@ -153,7 +153,7 @@
             </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>