From 1ff3e4317116f4358b5e36ad68c91f3925bc614b Mon Sep 17 00:00:00 2001
From: Gregor Lasnibat <gregor@scinote.net>
Date: Mon, 20 Nov 2023 13:24:59 +0100
Subject: [PATCH] (fix) Item card behavior in cases of error states [SCI-9683]

---
 .../vue/repository_item_sidebar/Title.vue     |  1 +
 .../mixins/date_time_range.js                 | 10 ++-
 .../repository_values/DateTimeRange.vue       | 80 +++++++++++++++++--
 .../RepositoryAssetValue.vue                  | 12 +--
 app/javascript/vue/shared/inline_edit.vue     | 24 +++++-
 config/locales/en.yml                         |  2 +
 6 files changed, 107 insertions(+), 22 deletions(-)

diff --git a/app/javascript/vue/repository_item_sidebar/Title.vue b/app/javascript/vue/repository_item_sidebar/Title.vue
index d28538233..2a5689751 100644
--- a/app/javascript/vue/repository_item_sidebar/Title.vue
+++ b/app/javascript/vue/repository_item_sidebar/Title.vue
@@ -1,6 +1,7 @@
 <template>
   <inline-edit v-if="editable" class="item-name my-auto text-xl font-semibold" :value="name" :characterLimit="255"
     :characterMinLimit="0" :allowBlank="false" :smartAnnotation="false"
+    :preventLeavingUntilFilled="true"
     :attributeName="`${i18n.t('repositories.item_card.header_title')}`" :singleLine="true"
     @editingEnabled="editingName = true" @editingDisabled="editingName = false" @update="updateName" @delete="handleDelete"></inline-edit>
   <h4 v-else class="item-name my-auto truncate text-xl" :title="name">
diff --git a/app/javascript/vue/repository_item_sidebar/mixins/date_time_range.js b/app/javascript/vue/repository_item_sidebar/mixins/date_time_range.js
index fed95eacf..3c8f60550 100644
--- a/app/javascript/vue/repository_item_sidebar/mixins/date_time_range.js
+++ b/app/javascript/vue/repository_item_sidebar/mixins/date_time_range.js
@@ -6,7 +6,7 @@ export default {
   },
   computed: {
     borderColor() {
-      if (this.errorMessage) return 'border-sn-delete-red'; 
+      if (this.errorMessage) return 'border-sn-delete-red';
       if (this.isEditing) return 'border-sn-science-blue';
       return 'border-sn-light-grey hover:border-sn-sleepy-grey';
     },
@@ -91,7 +91,6 @@ export default {
         default:
           break;
       }
-          
       this.params = defaultParams;
     },
     formatDateTime(date, field = null) {
@@ -121,6 +120,11 @@ export default {
       this.params = params;
     },
     dateValue(date) {
+      const typesThatCantBeEmpty = ['dateRange', 'dateTimeRange'];
+      if (date && (date.currentTarget === null) && typesThatCantBeEmpty.includes(this.dateType)) {
+        this.errorMessage = I18n.t('repositories.item_card.date_time.errors.select_valid_value');
+        return;
+      }
       if(date) return new Date(date)
       return new Date()
     },
@@ -165,4 +169,4 @@ export default {
       this.saveChange();
     }
   },
-}; 
+};
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/DateTimeRange.vue b/app/javascript/vue/repository_item_sidebar/repository_values/DateTimeRange.vue
index e35d699c6..50b5284ca 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/DateTimeRange.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/DateTimeRange.vue
@@ -1,11 +1,15 @@
 <template>
   <div>
+    <div ref="dateTimeRangeOverlay"
+         class="fixed top-0 left-0 right-0 bottom-0 bg-transparent z-[999] hidden">
+    </div>
     <div
       @click="enableEdit"
       v-click-outside="validateAndSave"
       class="text-sn-dark-grey font-inter text-sm font-normal leading-5 w-full rounded relative"
       :class="editableClassName"
     >
+      <!-- DATE -->
       <div v-if="dateType === 'date'">
         <div v-if="isEditing || values?.datetime" ref="edit">
           <DateTimePicker
@@ -21,6 +25,8 @@
           {{ i18n.t(`repositories.item_card.repository_date_value.${canEdit ? 'placeholder' : 'no_date'}`) }}
         </div>
       </div>
+
+      <!-- DATE RANGE -->
       <div v-else-if="dateType === 'dateRange'">
         <div v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)" ref="edit" class="w-full flex align-center">
           <div>
@@ -38,12 +44,12 @@
           <div>
             <DateTimePicker
               :disabled="!canEdit"
-            @change="formatDateTime($event, 'end_time')"
-            :selectorId="`DatePickerEnd${colId}`"
-            :dateOnly="true"
-            :defaultValue="dateValue(timeTo?.datetime)"
-            :standAlone="true"
-            :dateClassName="hasMonthText() ? 'w-[135px]' : 'ml-2 w-[90px]'"
+              @change="formatDateTime($event, 'end_time')"
+              :selectorId="`DatePickerEnd${colId}`"
+              :dateOnly="true"
+              :defaultValue="dateValue(timeTo?.datetime)"
+              :standAlone="true"
+              :dateClassName="hasMonthText() ? 'w-[135px]' : 'ml-2 w-[90px]'"
             />
           </div>
         </div>
@@ -51,6 +57,8 @@
           {{ i18n.t(`repositories.item_card.repository_date_range_value.${canEdit ? 'placeholder' : 'no_date_range'}`) }}
         </div>
       </div>
+
+      <!-- DATE-TIME -->
       <div v-if="dateType === 'dateTime'">
         <div v-if="isEditing || values?.datetime" ref="edit" class="w-full">
           <DateTimePicker
@@ -67,6 +75,8 @@
           {{ i18n.t(`repositories.item_card.repository_date_time_value.${canEdit ? 'placeholder' : 'no_date_time'}`) }}
         </div>
       </div>
+
+      <!-- DATE-TIME RANGE -->
       <div v-else-if="dateType === 'dateTimeRange'">
         <div v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)" ref="edit" class="w-full flex">
           <div>
@@ -101,6 +111,8 @@
           {{ i18n.t(`repositories.item_card.repository_date_time_range_value.${canEdit ? 'placeholder' : 'no_date_time_range'}`) }}
         </div>
       </div>
+
+      <!-- TIME -->
       <div v-else-if="dateType === 'time'">
         <div v-if="isEditing || values?.datetime" ref="edit">
           <DateTimePicker
@@ -117,6 +129,8 @@
           {{ i18n.t(`repositories.item_card.repository_time_value.${ canEdit ? 'placeholder' : 'no_time'}`) }}
         </div>
       </div>
+
+      <!-- TIME RANGE -->
       <div v-else-if="dateType === 'timeRange'">
         <div v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)" ref="edit" class="w-full flex">
           <div>
@@ -207,6 +221,47 @@
         return ''
       }
     },
+    methods: {
+      showOverlay() {
+        const overlay = this.$refs.dateTimeRangeOverlay;
+        overlay.classList.remove('hidden');
+      },
+      hideOverlay() {
+        const overlay = this.$refs.dateTimeRangeOverlay;
+        overlay.classList.add('hidden');
+      },
+      bringCalendarToFront() {
+        const calendarEl = document.querySelector('.dp__instance_calendar');
+        calendarEl.classList.add('z-[9999]');
+      },
+      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');
+      },
+      focusClearedInput() {
+        const firstInput = $(this.$refs.edit)?.find('input')[0];
+        const secondInput = $(this.$refs.edit)?.find('input')[1];
+
+        // first is empty
+        if (!firstInput.value) {
+          firstInput.focus();
+          firstInput.click();
+        }
+        // second is empty
+        if (!secondInput.value) {
+          secondInput.focus();
+          secondInput.click();
+        }
+
+        this.preventBodyScrolling();
+        this.showOverlay();
+        this.bringCalendarToFront();
+      },
+    },
     mounted() {
       this.cellUpdatePath = this.updatePath;
       this.values = this.colVal || {};
@@ -225,7 +280,18 @@
         this.$nextTick(() => {
           $(this.$refs.edit)?.find('input')[0]?.focus();
         })
-      }
+      },
+      errorMessage(newVal) {
+        if (newVal !== null) {
+          this.$nextTick(() => {
+            this.focusClearedInput();
+          });
+        }
+        if (newVal === null) {
+          this.hideOverlay();
+          this.allowBodyScrolling();
+        }
+      },
     }
   }
 </script>
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryAssetValue.vue b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryAssetValue.vue
index 73947d84a..3005f9423 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryAssetValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryAssetValue.vue
@@ -3,17 +3,9 @@
     <div class="font-inter text-sm font-semibold leading-5 truncate" :title="colName">
       {{ colName }}
     </div>
-    <div v-if="file_name" @mouseover="tooltipShowing = true" @mouseout="tooltipShowing = false"
-      class="w-full cursor-pointer  relative">
-      <a class="w-full inline-block file-preview-link truncate hover:no-underline hover:text-sn-science-blue text-sn-science-blue"
-        :id="modalPreviewLinkId" data-no-turbolink="true" data-id="true" data-status="asset-present"
-        :data-preview-url=this?.preview_url :href=this?.url>
-        {{ file_name }}
-      </a>
-    </div>
     <div class="w-fit absolute right-0 top-7">
       <a v-if="!file_name && (!uploading || error) && canEdit "
-         class="btn-text-link font-normal" @click="openFileChooser"> 
+         class="btn-text-link font-normal" @click="openFileChooser">
         {{ i18n.t('repositories.item_card.repository_asset_value.add_asset') }}
       </a>
     </div>
@@ -124,7 +116,7 @@ export default {
       }
 
       const upload = new ActiveStorage.DirectUpload(file,
-                                                    this.actions.direct_file_upload_path, 
+                                                    this.actions.direct_file_upload_path,
                                                     {
                                                       directUploadWillStoreFileWithXHR: (request) => {
                                                         request.upload.addEventListener('progress', (e) => {
diff --git a/app/javascript/vue/shared/inline_edit.vue b/app/javascript/vue/shared/inline_edit.vue
index d88246d67..9fa5c7f0d 100644
--- a/app/javascript/vue/shared/inline_edit.vue
+++ b/app/javascript/vue/shared/inline_edit.vue
@@ -73,7 +73,8 @@
       smartAnnotation: { type: Boolean, default: false },
       editOnload: { type: Boolean, default: false },
       defaultValue: { type: String, default: '' },
-      singleLine: { type: Boolean, default: true }
+      singleLine: { type: Boolean, default: true },
+      preventLeavingUntilFilled: { type: Boolean, default: false }
     },
     data() {
       return {
@@ -117,7 +118,11 @@
         return this.newValue === this.defaultValue;
       },
       error() {
-        if(!this.allowBlank && this.isBlank) {
+        if (!this.allowBlank && this.isBlank) {
+          if (this.preventLeavingUntilFilled) {
+            this.addPreventFromLeaving(document.body);
+          }
+
           return this.i18n.t('inline_edit.errors.blank', { attribute: this.attributeName })
         }
         if(this.characterLimit && this.newValue.length > this.characterLimit) {
@@ -141,10 +146,25 @@
           )
         }
 
+        this.removePreventFromLeaving(document.body);
         return false
       }
     },
     methods: {
+      removePreventFromLeaving(domEl) {
+        domEl.removeEventListener('click', this.preventClicks, true);
+        domEl.removeEventListener('mousedown', this.preventClicks, true);
+        domEl.removeEventListener('mouseup', this.preventClicks, true);
+      },
+      addPreventFromLeaving(domEl) {
+        domEl.addEventListener('click', this.preventClicks, true);
+        domEl.addEventListener('mousedown', this.preventClicks, true);
+        domEl.addEventListener('mouseup', this.preventClicks, true);
+      },
+      preventClicks(event) {
+        event.stopPropagation();
+        event.preventDefault();
+      },
       handleAutofocus() {
         if (this.autofocus || !this.placeholder && this.isBlank || this.editOnload && this.isBlank) {
           this.enableEdit();
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 3fcef4ce8..bc424ed43 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2308,6 +2308,8 @@ en:
         errors:
           set_all_or_none: 'Needs to set both or none'
           not_valid_range: 'Range is not valid.'
+          select_valid_value: 'Select a valid date or date-time value'
+          browser_alert_message: 'You have made some changes, are you sure you want to leave this page?'
     highlight_component:
       information_label: 'Information'
       custom_columns_label: 'Custom columns'