Item card datetime picker final version [SCI-9741]

app/javascript/vue/repository_item_sidebar/repository_values/date_time_component.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="flex flex-col gap-2">
-    <DateTimePicker :defaultValue="defaultStartDate" @change="updateStartDate" :mode="mode" :clearable="true"/>
-    <DateTimePicker :defaultValue="defaultEndDate" v-if="range" @change="updateEndDate" :mode="mode" :clearable="true"/>
+    <DateTimePicker :defaultValue="defaultStartDate" @closed="update" @change="updateStartDate" :mode="mode" :placeholder="placeholder" :clearable="true"/>
+    <div v-if="range" class="w-0.5 h-3 bg-sn-grey mx-auto"></div> <!-- divider -->
+    <DateTimePicker :defaultValue="defaultEndDate" @closed="update" v-if="range" @change="updateEndDate" :placeholder="placeholder" :mode="mode" :clearable="true"/>
+    <div class="text-xs text-sn-delete-red" v-if="error">{{ error }}</div>
   </div>
 </template>
 
@@ -19,6 +21,9 @@
       return {
         startDate: null,
         endDate: null,
+        error: null,
+        defaultStartDate: null,
+        defaultEndDate: null
       }
     },
     props: {
@@ -36,51 +41,76 @@
       } else {
         if (this.colVal.datetime) this.startDate = new Date(this.colVal.datetime)
       }
-    },
-    watch: {
+
+      this.defaultStartDate = this.startDate;
+      this.defaultEndDate = this.endDate;
     },
     computed: {
-      defaultStartDate() {
-        if (this.range && this.colVal.start_time) {
-          return new Date(this.colVal.start_time.datetime)
-        } else if (this.colVal.datetime) {
-          return new Date(this.colVal.datetime)
-        }
-      },
-      defaultEndDate() {
-        if (this.range && this.colVal.end_time) {
-          return new Date(this.colVal.end_time.datetime)
-        }
-      },
       value: {
         get () {
           if (this.range) {
-            if (!this.startDate && !this.endDate) return null;
-            if (!(this.startDate instanceof Date)) return null;
-            if (!(this.endDate instanceof Date)) return null;
+            if (!(this.startDate instanceof Date) && !(this.endDate instanceof Date)) return null;
 
             return  {
                       start_time: this.formatDate(this.startDate),
                       end_time: this.formatDate(this.endDate)
-                    }
+                    };
           } else {
             if (!(this.startDate instanceof Date)) return null;
-            return this.formatDate(this.startDate)
+
+            return this.formatDate(this.startDate);
           }
         },
       },
+      placeholder() {
+        switch (this.mode) {
+          case 'date':
+            return this.i18n.t('repositories.item_card.repository_date_value.placeholder');
+          case 'time':
+            return this.i18n.t('repositories.item_card.repository_time_value.placeholder');
+          case 'datetime':
+            return this.i18n.t('repositories.item_card.repository_date_time_value.placeholder');
+        }
+      }
     },
     methods: {
       updateStartDate(date) {
-        this.startDate = date
-        this.update()
+        this.startDate = date;
+        if (!(this.startDate instanceof Date)) this.update();
       },
       updateEndDate(date) {
-        this.endDate = date
-        this.update()
+        this.endDate = date;
+        if (!(this.endDate instanceof Date)) this.update();
+      },
+      validateValue() {
+        this.error = null;
+        // Date is not changed
+        if (this.defaultStartDate == this.startDate && this.defaultEndDate == this.endDate) return false;
+
+        if (this.range) {
+          // Both empty
+          if (!(this.startDate instanceof Date) && !(this.endDate instanceof Date)) return true;
+
+          // One empty
+          if (!(this.startDate instanceof Date) || !(this.endDate instanceof Date)) {
+            this.error = this.i18n.t('repositories.item_card.date_time.errors.not_valid_range')
+            return false;
+          }
+
+          // Start date is after end date
+          if (this.startDate > this.endDate) {
+            this.error = this.i18n.t('repositories.item_card.date_time.errors.not_valid_range')
+            return false;
+          }
+        }
+
+        return true
       },
       update() {
         const params = {}
+
+        if (!this.validateValue()) return;
+
         params[this.colId] = this.value
         $.ajax({
           method: 'PUT',
@@ -88,6 +118,8 @@
           dataType: 'json',
           data: { repository_cells: params },
           success: () => {
+            this.defaultStartDate = this.startDate;
+            this.defaultEndDate = this.endDate;
             if ($('.dataTable')[0]) $('.dataTable').DataTable().ajax.reload(null, false);
           }
         });

app/javascript/vue/shared/date_time_picker.vue

@@ -5,6 +5,8 @@
       :class="{
         'only-time': mode == 'time',
       }"
+      @closed="closedHandler"
+      @cleared="clearedHandler"
       v-model="compDatetime"
       :teleport="teleport"
       :no-today="true"
@@ -91,7 +93,7 @@
     watch: {
       defaultValue: function () {
         this.datetime = this.defaultValue;
-        if (this.defaultValue) {
+        if (this.defaultValue instanceof Date) {
           this.time = {
             hours: this.defaultValue.getHours(),
             minutes: this.defaultValue.getMinutes()
@@ -103,7 +105,7 @@
 
           this.time = null;
 
-          if (this.datetime) {
+          if (this.datetime instanceof Date) {
           this.time = {
             hours: this.datetime.getHours(),
             minutes: this.datetime.getMinutes()
@@ -186,6 +188,12 @@
       close() {
         this.$refs.datetimePicker.closeMenu();
       },
+      closedHandler() {
+        this.$emit('closed');
+      },
+      clearedHandler() {
+        this.$emit('cleared');
+      }
     }
   }
 </script>