From bdc40f4c04ba2068d1e262e3385cd5a1b163f330 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=B1nar=20Gen=C3=A7?= <gncpin@hotmail.com>
Date: Tue, 28 Jan 2025 10:10:07 +0300
Subject: [PATCH] [SER-2207] User can create journey with past time.

If "isFuture" prop is true, disable past time slots when the date is selected is today.
ref: https://element.eleme.io/#/en-US/component/time-picker#timepicker
---
 .../countly/vue/components/date.js            | 41 ++++++++++++++++++-
 .../countly/vue/templates/datepicker.html     |  2 +-
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/frontend/express/public/javascripts/countly/vue/components/date.js b/frontend/express/public/javascripts/countly/vue/components/date.js
index bd85afaab8e..6a6ee62bfb0 100644
--- a/frontend/express/public/javascripts/countly/vue/components/date.js
+++ b/frontend/express/public/javascripts/countly/vue/components/date.js
@@ -1660,9 +1660,48 @@
                 type: Boolean,
                 default: true,
                 required: false
+            },
+            minDateValue: {
+                type: Date
+            },
+            isFuture: {
+                type: Boolean,
+                default: false
+            }
+        },
+        computed: {
+            pickerOptions() {
+                const defaultRange = { selectableRange: '00:00:00 - 23:59:00' };
+
+                if (!this.minDateValue) {
+                    return defaultRange;
+                }
+
+                const now = moment();
+                const minDateMoment = moment(this.minDateValue);
+                const isToday = minDateMoment.isSame(now, 'day');
+
+                if (this.isFuture && isToday) {
+                    return {
+                        selectableRange: `${now.format('HH:mm:ss')} - 23:59:00`
+                    };
+                }
+
+                return defaultRange;
             }
         },
-        template: '<el-time-picker :append-to-body="appendToBody" :style="{\'width\': width + \'px\'}" class="cly-vue-time-picker" v-bind="$attrs" v-on="$listeners" :format="format" :clearable="clearable"></el-time-picker>'
+        template: `
+                <el-time-picker
+                    :append-to-body="appendToBody"
+                    :clearable="clearable"
+                    :format="format"
+                    :picker-options="pickerOptions"
+                    :style="{\'width\': width + \'px\'}"
+                    class="cly-vue-time-picker"
+                    v-bind="$attrs"
+                    v-on="$listeners"
+                >
+                </el-time-picker>`
     });
 
 
diff --git a/frontend/express/public/javascripts/countly/vue/templates/datepicker.html b/frontend/express/public/javascripts/countly/vue/templates/datepicker.html
index 448b929c7ec..7e7971bb3ed 100644
--- a/frontend/express/public/javascripts/countly/vue/templates/datepicker.html
+++ b/frontend/express/public/javascripts/countly/vue/templates/datepicker.html
@@ -207,7 +207,7 @@
                         <span class="text-medium">{{i18n('common.time')}}</span>
                     </div>
                     <div>
-                        <cly-time-picker align="right" :width="100" v-model="minTime"></cly-time-picker>
+                        <cly-time-picker align="right" :width="100" v-model="minTime" :min-date-value="minDate" :is-future="isFuture"></cly-time-picker>
                     </div>
                 </div>
             </div>