(fix) Item card behavior in cases of error states vol. 2 [SCI-9792] (#6813)

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

@@ -1,4 +1,7 @@
 <template>
+  <div ref="dateTimeRangeOverlay"
+         class="fixed top-0 left-0 right-0 bottom-0 bg-transparent z-[99] hidden">
+    </div>
   <div class="flex gap-1">
     <div class="text-sm font-bold truncate" :title="colName">
       {{ colName }}
@@ -27,11 +30,11 @@
     <template v-else>
       <div>
         <span class="text-xs capitalize" v-if="range">{{  i18n.t('general.from') }}</span>
-        <DateTimePicker :defaultValue="defaultStartDate" @closed="update" @change="updateStartDate" :mode="mode" :placeholder="placeholder" :clearable="true"/>
+        <DateTimePicker :defaultValue="defaultStartDate" @closed="update" @change="updateStartDate" :mode="mode" :placeholder="placeholder" :clearable="true" ref="dateTimePickerFrom"/>
       </div>
       <div>
         <span class="text-xs capitalize" v-if="range">{{  i18n.t('general.to') }}</span>
-        <DateTimePicker :defaultValue="defaultEndDate" @closed="update" v-if="range" @change="updateEndDate" :placeholder="placeholder" :mode="mode" :clearable="true"/>
+        <DateTimePicker :defaultValue="defaultEndDate" @closed="update" v-if="range" @change="updateEndDate" :placeholder="placeholder" :mode="mode" :clearable="true" ref="dateTimePickerTo"/>
       </div>
       <div class="text-xs text-sn-delete-red" v-if="error">{{ error }}</div>
     </template>
@@ -55,6 +58,8 @@
         error: null,
         defaultStartDate: null,
         defaultEndDate: null,
+        fromPicker: null,
+        toPicker: null
       }
     },
     inject: ['reloadRepoItemSidebar'],
@@ -78,9 +83,21 @@
       this.defaultStartDate = this.startDate;
       this.defaultEndDate = this.endDate;
     },
+    mounted() {
+      this.fromPicker = this.$refs.dateTimePickerFrom;
+      this.toPicker = this.$refs.dateTimePickerTo;
+      document.addEventListener('click', this.logClick);
+      document.addEventListener('keydown', this.handleKeyDown);
+    },
+    beforeUnmount() {
+      this.fromPicker = null;
+      this.toPicker = null;
+      document.removeEventListener('click', this.logClick);
+      document.removeEventListener('keydown', this.handleKeyDown);
+    },
     computed: {
       value: {
-        get () {
+        get() {
           if (this.range) {
             if (!(this.startDate instanceof Date) && !(this.endDate instanceof Date)) return null;
 
@@ -189,6 +206,71 @@
         const mins = date.getMinutes();
         return `${y}/${m}/${d} ${hours}:${mins}`;
       },
-    }
+      showOverlay() {
+        const overlay = this.$refs.dateTimeRangeOverlay;
+        overlay.classList.remove('hidden');
+      },
+      hideOverlay() {
+        const overlay = this.$refs.dateTimeRangeOverlay;
+        overlay.classList.add('hidden');
+      },
+      preventBodyScrolling() {
+        document.body.classList.add('overflow-hidden');
+        document.body.classList.remove('overflow-auto');
+      },
+      allowBodyScrolling() {
+        document.body.classList.remove('overflow-hidden');
+        document.body.classList.add('overflow-auto');
+      },
+      bringCalendarToFront() {
+        const calendarEl = document.querySelector('.dp__instance_calendar');
+        calendarEl.classList.add('z-[9999]');
+      },
+      focusClearedInput() {
+        if (!this.fromPicker.datetime) {
+          const fromInput = this.fromPicker.$el.querySelector('input');
+          fromInput.focus();
+          fromInput.click();
+        }
+        if (!this.toPicker.datetime) {
+          const toInput = this.toPicker.$el.querySelector('input');
+          toInput.focus();
+          toInput.click();
+        }
+
+        this.preventBodyScrolling();
+        this.showOverlay();
+        this.$nextTick(() => {
+          this.bringCalendarToFront();
+        });
+      },
+      logClick() {
+        if (this.error) this.focusClearedInput();
+      },
+      handleKeyDown(event) {
+        if (event.key === 'Escape' || (event.ctrlKey && event.key === 'z')) {
+          if (this.startDate === null && this.fromPicker) {
+            this.startDate = this.defaultStartDate;
+            this.fromPicker.datetime = this.defaultStartDate;
+            this.error = null;
+          }
+          if (this.endDate === null && this.toPicker) {
+            this.endDate = this.defaultEndDate;
+            this.toPicker.datetime = this.defaultEndDate;
+            this.error = null;
+          }
+        }
+      },
+    },
+    watch: {
+      error(newVal) {
+        if (newVal !== null) {
+          this.focusClearedInput();
+        } else {
+          this.hideOverlay();
+          this.allowBodyScrolling();
+        }
+      }
+    },
   }
 </script>