Add edit feature for item card date fields [SCI-9416] (#6431)

2024-09-20 23:16:15 +08:00 · 2023-10-23 19:57:12 +01:00 · 2023-10-23 19:57:12 +01:00 · cedb0cc023
parent 849743a410
commit cedb0cc023
16 changed files with 540 additions and 217 deletions
--- a/app/javascript/packs/vue/repository_search.js
+++ b/app/javascript/packs/vue/repository_search.js
@ -1,11 +1,9 @@
 import TurbolinksAdapter from 'vue-turbolinks';
 import Vue from 'vue/dist/vue.esm';
 import RepositorySearchContainer from '../../vue/repository_search/container.vue';
-import outsideClick from './directives/outside_click';

 Vue.use(TurbolinksAdapter);
 Vue.prototype.i18n = window.I18n;
-Vue.directive('click-outside', outsideClick);

 window.initRepositorySearch = () => {
  window.RepositorySearchComponent = new Vue({
--- a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
+++ b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
@ -116,18 +116,13 @@
                  {{ i18n.t('repositories.item_card.custom_columns_label') }}
                </div>
                <div v-if="customColumns?.length > 0" class="flex flex-col gap-4 w-[350px] h-auto">
-                  <div v-for="(column, index) in customColumns" class="flex flex-col gap-4 w-[350px] h-auto relative">
-                    <span class="absolute right-2 top-6" v-if="column?.value?.reminder === true">
-                      <Reminder :value="column?.value" :valueType="column?.value_type" />
-                    </span>
-
-                    <component :is="column.data_type" :key="index" :data_type="column.data_type" :colId="column.id"
-                      :colName="column.name" :colVal="column.value" :repositoryRowId="repositoryRowId"
-                      :repositoryId="repository.id" :permissions="permissions" />
-
-                    <div class="sci-divider" :class="{ 'hidden': index === customColumns?.length - 1 }"></div>
-
-                  </div>
+                  <CustomColumns
+                    :customColumns="customColumns"
+                    :repositoryRowId="repositoryRowId"
+                    :repositoryId="repository.id"
+                    :permissions="permissions"
+                    :updatePath="updatePath"
+                  />
                </div>
                <div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
                  {{ i18n.t('repositories.item_card.no_custom_columns_label') }}
@ -228,44 +223,19 @@
 </template>

 <script>
-import RepositoryStockValue from './repository_values/RepositoryStockValue.vue';
-import RepositoryTextValue from './repository_values/RepositoryTextValue.vue';
-import RepositoryNumberValue from './repository_values/RepositoryNumberValue.vue';
-import RepositoryAssetValue from './repository_values/RepositoryAssetValue.vue';
-import RepositoryListValue from './repository_values/RepositoryListValue.vue';
-import RepositoryChecklistValue from './repository_values/RepositoryChecklistValue.vue';
-import RepositoryStatusValue from './repository_values/RepositoryStatusValue.vue';
-import RepositoryDateTimeValue from './repository_values/RepositoryDateTimeValue.vue';
-import RepositoryDateTimeRangeValue from './repository_values/RepositoryDateTimeRangeValue.vue';
-import RepositoryDateValue from './repository_values/RepositoryDateValue.vue';
-import RepositoryDateRangeValue from './repository_values/RepositoryDateRangeValue.vue';
-import RepositoryTimeRangeValue from './repository_values/RepositoryTimeRangeValue.vue'
-import RepositoryTimeValue from './repository_values/RepositoryTimeValue.vue'
 import ScrollSpy from './repository_values/ScrollSpy.vue';
-import Reminder from './reminder.vue'
+import CustomColumns from './customColumns.vue';

 export default {
  name: 'RepositoryItemSidebar',
  components: {
-    Reminder,
-    RepositoryStockValue,
-    RepositoryTextValue,
-    RepositoryNumberValue,
-    RepositoryAssetValue,
-    RepositoryListValue,
-    RepositoryChecklistValue,
-    RepositoryStatusValue,
-    RepositoryDateTimeValue,
-    RepositoryDateTimeRangeValue,
-    RepositoryDateValue,
-    RepositoryDateRangeValue,
-    RepositoryTimeRangeValue,
-    RepositoryTimeValue,
+    CustomColumns,
    'scroll-spy': ScrollSpy
  },
  data() {
    return {
      currentItemUrl: null,
+      updatePath: null,
      dataLoading: false,
      repositoryRowId: null,
      repository: null,
@ -351,6 +321,7 @@ export default {
        success: (result) => {
          this.repositoryRowId = result.id;
          this.repository = result.repository;
+          this.updatePath = result.update_path;
          this.defaultColumns = result.default_columns;
          this.customColumns = result.custom_columns;
          this.assignedModules = result.assigned_modules;
--- a/app/javascript/vue/repository_item_sidebar/customColumns.vue
+++ b/app/javascript/vue/repository_item_sidebar/customColumns.vue
@ -0,0 +1,68 @@
+<template>
+  <div v-if="customColumns?.length > 0" class="flex flex-col gap-4 w-[350px] h-auto">
+    <div v-for="(column, index) in customColumns" class="flex flex-col gap-4 w-[350px] h-auto relative">
+      <component
+        :is="column.data_type"
+        :key="index"
+        :data_type="column.data_type"
+        :colId="column.id"
+        :colName="column.name"
+        :colVal="column.value"
+        :repositoryRowId="repositoryRowId"
+        :repositoryId="repositoryId"
+        :permissions="permissions"
+        :updatePath="updatePath"
+        :editingField="editingField"
+        @setEditingField="editingField = $event"
+      />
+      <div class="sci-divider" :class="{ 'hidden': index === customColumns?.length - 1 }"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import RepositoryStockValue from './repository_values/RepositoryStockValue.vue';
+  import RepositoryTextValue from './repository_values/RepositoryTextValue.vue';
+  import RepositoryNumberValue from './repository_values/RepositoryNumberValue.vue';
+  import RepositoryAssetValue from './repository_values/RepositoryAssetValue.vue';
+  import RepositoryListValue from './repository_values/RepositoryListValue.vue';
+  import RepositoryChecklistValue from './repository_values/RepositoryChecklistValue.vue';
+  import RepositoryStatusValue from './repository_values/RepositoryStatusValue.vue';
+  import RepositoryDateTimeValue from './repository_values/RepositoryDateTimeValue.vue';
+  import RepositoryDateTimeRangeValue from './repository_values/RepositoryDateTimeRangeValue.vue';
+  import RepositoryDateValue from './repository_values/RepositoryDateValue.vue';
+  import RepositoryDateRangeValue from './repository_values/RepositoryDateRangeValue.vue';
+  import RepositoryTimeRangeValue from './repository_values/RepositoryTimeRangeValue.vue'
+  import RepositoryTimeValue from './repository_values/RepositoryTimeValue.vue'
+
+  export default {
+    components: {
+      RepositoryStockValue,
+      RepositoryTextValue,
+      RepositoryNumberValue,
+      RepositoryAssetValue,
+      RepositoryListValue,
+      RepositoryChecklistValue,
+      RepositoryStatusValue,
+      RepositoryDateTimeValue,
+      RepositoryDateTimeRangeValue,
+      RepositoryDateValue,
+      RepositoryDateRangeValue,
+      RepositoryTimeRangeValue,
+      RepositoryTimeValue
+    },
+    name: 'CustomColumns',
+    props: {
+      customColumns: [],
+      permissions: null,
+      updatePath: null,
+      repositoryRowId: null,
+      repositoryId: null
+    },
+    data() {
+      return {
+        editingField: null
+      }
+    }
+  }
+</script>
--- a/app/javascript/vue/repository_item_sidebar/mixins/date_time_range.js
+++ b/app/javascript/vue/repository_item_sidebar/mixins/date_time_range.js
@ -0,0 +1,123 @@
+export default {
+  data() {
+    return {
+      isSaving: null,
+    };
+  },
+  computed: {
+    borderColor() {
+      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';
+    },
+    isEditable() {
+      return this.isEditing && this.editingField === this.dateType
+    }
+  },
+  methods: {
+    enableEdit() {
+      this.isEditing = true
+      this.$emit('setEditingField', this.dateType)
+    },
+    saveChange() {
+      if (!this.isEditing || this.isSaving || !this.params || (this.params && !Object.keys(this.params).includes(this.colId?.toString()))) {
+        Object.assign(this.$data, {
+          isEditing: false, isSaving: false, errorMessage: null,
+        });
+        return;
+      };
+      
+      Object.assign(this.$data, { isSaving: true, errorMessage: null });
+      const $this = this;
+      $.ajax({
+        method: 'PUT',
+        url: $this.cellUpdatePath,
+        dataType: 'json',
+        data: { repository_cells: $this.params },
+        success: () => {
+          Object.assign($this.$data, {
+            isEditing: false, isSaving: false,
+          });
+        }
+      });
+    },
+    setParams() {
+      let defaultParams = this.params ? this.params : { [this.colId]: {} };
+      switch (true) {
+        case ['date', 'dateTime', 'time'].includes(this.dateType):
+          defaultParams[this.colId] = this.values?.datetime;
+          break;
+        case ['dateRange', 'dateTimeRange', 'timeRange'].includes(this.dateType):
+          defaultParams[this.colId]['start_time'] = this.timeFrom?.datetime;
+          defaultParams[this.colId]['end_time'] = this.timeTo?.datetime;
+          break;
+        default:
+          break;
+      }
+          
+      this.params = defaultParams;
+    },
+    formatDateTime(date, field = null) {
+      let params = this.params && this.params[this.colId] ? this.params : { [this.colId]: {} };
+      let timeFrom = this.timeFrom || {};
+      let timeTo = this.timeTo || {};
+      switch (true) {
+        case ['date', 'dateTime', 'time'].includes(this.dateType):
+          params[this.colId] = date;
+          this.values['datetime'] = date;
+          break;
+        case ['dateRange', 'dateTimeRange', 'timeRange'].includes(this.dateType):
+          if (field === 'start_time') {
+            timeFrom['datetime'] = date;
+          }
+          if (field === 'end_time'){
+            timeTo['datetime'] = date;
+          }
+          params[this.colId][field] = date;
+          break;
+        default:
+          break;
+      }
+      this.timeFrom = timeFrom;
+      this.timeTo = timeTo;
+      this.params = params;
+    },
+    dateValue(date) {
+      if(date) return new Date(date)
+      return new Date()
+    },
+    hasMonthText(){
+      $('body').data('datetime-picker-format').match(/MMM/)
+    },
+    validateAndSave() {
+      this.errorMessage = null;
+      switch (true) {
+        case ['date', 'dateTime', 'time'].includes(this.dateType):
+          // To do
+          break;
+        case ['dateRange', 'dateTimeRange', 'timeRange'].includes(this.dateType):
+          if(this.params && this.params[this.colId]) {
+            if((!this.params[this.colId].start_time && this.params[this.colId].end_time) ||
+              (this.params[this.colId].start_time && !this.params[this.colId].end_time)) {
+              this.errorMessage = I18n.t('repositories.item_card.date_time.errors.not_valid_range');
+              return;
+            }
+            if (this.params[this.colId].start_time && this.params[this.colId].end_time &&
+                this.params[this.colId].start_time.getTime() && this.params[this.colId].end_time.getTime()) {
+              if(this.params[this.colId].start_time.getTime() > this.params[this.colId].end_time.getTime()) {
+                this.errorMessage = I18n.t('repositories.item_card.date_time.errors.not_valid_range');
+                return
+              }
+            }
+            if (!this.params[this.colId].start_time && !this.params[this.colId].end_time) {
+              this.params = { [this.colId]: null }
+            }
+          }
+          break;
+        default:
+          break;
+      }
+      this.saveChange();
+    }
+  },
+}; 
--- a/app/javascript/vue/repository_item_sidebar/reminder.vue
+++ b/app/javascript/vue/repository_item_sidebar/reminder.vue
@ -10,7 +10,6 @@
  export default {
    name: 'Reminder',
    props: {
-      valueType: null,
      value: null
    },
    computed: {
--- a/app/javascript/vue/repository_item_sidebar/repository_values/DateTimeRange.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/DateTimeRange.vue
@ -0,0 +1,203 @@
+<template>
+  <div>
+    <div 
+      v-click-outside="{ handler: 'validateAndSave', exclude: ['edit', 'view'] }"
+      :class="`border-solid border-[1px] text-sn-dark-grey font-inter text-sm font-normal leading-5 w-full rounded relative sci-cursor-edit ${ borderColor }`"
+    >
+      <div v-if="dateType === 'date'" @click="enableEdit" class="p-2">
+        <div v-if="isEditing || values?.datetime" ref="edit">
+          <DateTimePicker
+            @change="formatDateTime($event)"
+            :selectorId="`DatePicker${colId}`"
+            :dateOnly="true"
+            :defaultValue="dateValue(values?.datetime)"
+            :standAlone="true"
+          />
+        </div>
+        <div v-else ref="view" >
+          {{ i18n.t('repositories.item_card.repository_date_value.no_date') }}
+        </div>
+      </div>
+      <div v-else-if="dateType === 'dateRange'" @click="enableEdit" class="p-2">
+        <div v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)" ref="edit" class="w-full flex align-center">
+          <div>
+            <DateTimePicker
+              @change="formatDateTime($event, 'start_time')"
+              :selectorId="`DatePickerStart${colId}`"
+              :dateOnly="true"
+              :defaultValue="dateValue(timeFrom?.datetime)"
+              :standAlone="true"
+              :dateClassName="hasMonthText() ? 'w-[135px]' : 'w-[90px]'"
+            />
+          </div>
+          <span class="mr-3">-</span>
+          <div>
+            <DateTimePicker
+            @change="formatDateTime($event, 'end_time')"
+            :selectorId="`DatePickerEnd${colId}`"
+            :dateOnly="true"
+            :defaultValue="dateValue(timeTo?.datetime)"
+            :standAlone="true"
+            :dateClassName="hasMonthText() ? 'w-[135px]' : 'w-[90px]'"
+            />
+          </div>
+        </div>
+        <div v-else ref="view" >
+          {{ i18n.t('repositories.item_card.repository_date_range_value.no_date_range') }}
+        </div>
+      </div>
+      <div v-if="dateType === 'dateTime'"  @click="enableEdit" class="p-2">
+        <div v-if="isEditing || values?.datetime" ref="edit" class="w-full">
+          <DateTimePicker
+            @change="formatDateTime"
+            :selectorId="`DatePicker${colId}`"
+            :defaultValue="dateValue(values?.datetime)"
+            :standAlone="true"
+            :dateClassName="hasMonthText() ? 'w-[135px]' : 'w-[90px]'"
+            timeClassName="w-11"
+          />
+        </div>
+        <div v-else ref="view" >
+          {{ i18n.t('repositories.item_card.repository_date_time_value.no_date_time') }}
+        </div>
+      </div>
+      <div v-else-if="dateType === 'dateTimeRange'"  @click="enableEdit" class="p-2">
+        <div v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)" ref="edit" class="w-full flex">
+          <div>
+            <DateTimePicker
+              @change="formatDateTime($event, 'start_time')"
+              :selectorId="`DatePickerStart${colId}`"
+              :defaultValue="dateValue(timeFrom?.datetime)"
+              :timeOnly="false"
+              :dateOnly="false"
+              :standAlone="true"
+              :dateClassName="hasMonthText() ? 'w-[135px]' : 'w-[90px]'"
+              timeClassName="w-11"
+            />
+          </div>
+          <span class="mx-1">-</span>
+          <div>
+            <DateTimePicker
+              @change="formatDateTime($event, 'end_time')"
+              :selectorId="`DatePickerEnd${colId}`"
+              :defaultValue="dateValue(timeTo?.datetime)"
+              :timeOnly="false"
+              :dateOnly="false"
+              :standAlone="true"
+              :dateClassName="hasMonthText() ? 'w-[135px]' : 'w-[90px]'"
+              timeClassName="w-11"
+            />
+          </div>
+        </div>
+        <div v-else ref="view" >
+          {{ i18n.t('repositories.item_card.repository_date_time_range_value.no_date_time_range') }}
+        </div>
+      </div>
+      <div v-else-if="dateType === 'time'" @click="enableEdit" class="p-2">
+        <div v-if="isEditing || values?.datetime" ref="edit">
+          <DateTimePicker
+            @change="formatDateTime"
+            :selectorId="`DatePicker${colId}`"
+            :timeOnly="true"
+            :defaultValue="dateValue(values?.datetime)"
+            :standAlone="true"
+            timeClassName="w-11"
+          />
+        </div>
+        <div v-else ref="view">
+          {{ i18n.t('repositories.item_card.repository_time_value.no_time') }}
+        </div>
+      </div>
+      <div v-else-if="dateType === 'timeRange'" @click="enableEdit" class="p-2">
+        <div v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)" ref="edit" class="w-full flex">
+          <div>
+            <DateTimePicker
+              @change="formatDateTime($event, 'start_time')"
+              :selectorId="`DatePickerStart${colId}`"
+              :timeOnly="true"
+              :defaultValue="dateValue(timeFrom?.datetime)"
+              :standAlone="true"
+              timeClassName="w-11"
+            />
+          </div>
+          <span class="mx-1">-</span>
+          <div>
+            <DateTimePicker
+              @change="formatDateTime($event, 'end_time')"
+              :selectorId="`DatePickerEnd${colId}`"
+              :timeOnly="true"
+              :defaultValue="dateValue(timeTo?.datetime)"
+              :standAlone="true"
+              timeClassName="w-11"
+            />
+          </div>
+        </div>
+        <div v-else ref="view">
+          {{ i18n.t('repositories.item_card.repository_time_range_value.no_time_range') }}
+        </div>
+      </div>
+      <span class="absolute right-2 top-1.5" v-if="values.reminder">
+        <Reminder :value="values" />
+      </span>
+    </div>
+    <div class="text-sn-delete-red text-xs w-full " :class="{ visible: errorMessage, invisible: !errorMessage }">
+      {{ errorMessage }}
+    </div>
+  </div>
+</template>
+
+<script>
+  import outsideClick from './../../../packs/vue/directives/outside_click';
+  import date_time_range from './../mixins/date_time_range';
+  import DateTimePicker from '../../shared/date_time_picker.vue';
+  import Reminder from './../reminder.vue';
+
+  export default {
+    name: 'DateTimeRange',
+    mixins: [date_time_range],
+    components: { 
+      DateTimePicker,
+      Reminder
+    },
+    directives: {
+      'click-outside': outsideClick
+    },
+    data() {
+      return {
+        values: {},
+        errorMessage: null,
+        params: null,
+        cellUpdatePath: null,
+        timeFrom: null,
+        timeTo: null,
+        isEditing: false
+      }
+    },
+    props: {
+      dateType: String,
+      colVal: null,
+      colId: null,
+      updatePath: null,
+      startTime: null,
+      endTime: null,
+      editingField: false,
+    },
+    mounted() {
+      this.cellUpdatePath = this.updatePath;
+      this.values = this.colVal || {};
+      this.timeFrom = this.startTime
+      this.timeTo = this.endTime
+      this.errorMessage = null;
+      this.setParams();
+    },
+    watch: {
+      isEditing(newValue) {
+        if (!newValue) return;
+        // Focus input field to open date picker
+        this.$nextTick(() => {
+          $(this.$refs.edit)?.find('input')[0]?.focus();
+        })
+      }
+    }
+  }
+</script>
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateRangeValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateRangeValue.vue
@ -3,36 +3,32 @@
    <div class="font-inter text-sm font-semibold leading-5 truncate">
      {{ colName }}
    </div>
-    <div v-if="start_time?.formatted && end_time?.formatted"
-      class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">
-      <div>{{ start_time?.formatted }} - {{ end_time?.formatted }}</div>
-    </div>
-    <div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
-      {{ i18n.t('repositories.item_card.repository_date_range_value.no_date_range') }}
-    </div>
+    <DateTimeRange
+      dateType="dateRange"
+      :startTime="colVal?.start_time"
+      :endTime="colVal?.end_time"
+      :colVal="colVal"
+      :colId="colId"
+      :updatePath="updatePath"
+      :editingField="editingField"
+      @setEditingField="$emit('setEditingField', $event)"
+    />
  </div>
 </template>

 <script>
-export default {
-  name: 'RepositoryDateRangeValue',
-  data() {
-    return {
-      start_time: null,
-      end_time: null
-    }
-  },
-  props: {
-    data_type: String,
-    colId: Number,
-    colName: String,
-    colVal: Object
-  },
-  created() {
-    if (!this.colVal) return
+import DateTimeRange from './DateTimeRange.vue';

-    this.start_time = this.colVal.start_time
-    this.end_time = this.colVal.end_time
+  export default {
+    name: 'RepositoryDateRangeValue',
+    components: { DateTimeRange },
+    props: {
+      data_type: String,
+      colId: Number,
+      colName: String,
+      colVal: null,
+      updatePath: null,
+      editingField: null
+    }
  }
-}
 </script>
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateTimeRangeValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateTimeRangeValue.vue
@ -3,36 +3,23 @@
    <div class="font-inter text-sm font-semibold leading-5 truncate">
      {{ colName }}
    </div>
-    <div v-if="start_time?.formatted && end_time?.formatted"
-      class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">
-      <div>{{ start_time?.formatted }} - {{ end_time?.formatted }}</div>
-    </div>
-    <div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
-      {{ i18n.t('repositories.item_card.repository_date_time_range_value.no_date_time_range') }}
-    </div>
+    <DateTimeRange :editingField="editingField" @setEditingField="$emit('setEditingField', $event)" dateType="dateTimeRange" :startTime="colVal?.start_time" :endTime="colVal?.end_time" :colVal="colVal" :colId="colId" :updatePath="updatePath" />
  </div>
 </template>

 <script>
-export default {
-  name: 'RepositoryDateTimeRangeValue',
-  data() {
-    return {
-      start_time: null,
-      end_time: null
-    }
-  },
-  props: {
-    data_type: String,
-    colId: Number,
-    colName: String,
-    colVal: Object
-  },
-  created() {
-    if (!this.colVal) return
+  import DateTimeRange from './DateTimeRange.vue';

-    this.start_time = this.colVal.start_time
-    this.end_time = this.colVal.end_time
+  export default {
+    name: 'RepositoryDateTimeRangeValue',
+    components: { DateTimeRange },
+    props: {
+      data_type: String,
+      colId: Number,
+      colName: String,
+      colVal: Object,
+      updatePath: null,
+      editingField: null
+    }
  }
-}
 </script>
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateTimeValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateTimeValue.vue
@ -3,39 +3,23 @@
    <div class="font-inter text-sm font-semibold leading-5 truncate">
      {{ colName }}
    </div>
-    <div v-if="formatted" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">
-      <div>{{ formatted }}</div>
-    </div>
-    <div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
-      {{ i18n.t('repositories.item_card.repository_date_time_value.no_date_time') }}
-    </div>
+    <DateTimeRange :editingField="editingField" @setEditingField="$emit('setEditingField', $event)" dateType="dateTime" :colVal="colVal" :colId="colId" :updatePath="updatePath" />
  </div>
 </template>

 <script>
-export default {
-  name: 'RepositoryDateTimeValue',
-  data() {
-    return {
-      formatted: null,
-      date_formatted: null,
-      time_formatted: null,
-      datetime: null
-    }
-  },
-  props: {
-    data_type: String,
-    colId: Number,
-    colName: String,
-    colVal: Object
-  },
-  created() {
-    if (!this.colVal) return
+  import DateTimeRange from './DateTimeRange.vue';

-    this.formatted = this.colVal.formatted
-    this.date_formatted = this.colVal.date_formatted
-    this.time_formatted = this.colVal.time_formatted
-    this.formatdatetimeted = this.colVal.datetime
+  export default {
+    name: 'RepositoryDateTimeValue',
+    components: { DateTimeRange },
+    props: {
+      data_type: String,
+      colId: Number,
+      colName: String,
+      colVal: Object,
+      updatePath: String,
+      editingField: null
+    }
  }
-}
 </script>
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateValue.vue
@ -3,35 +3,23 @@
    <div class="font-inter text-sm font-semibold leading-5 truncate">
      {{ colName }}
    </div>
-    <div v-if="formatted" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">
-      <div>{{ formatted }}</div>
-    </div>
-    <div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
-      {{ i18n.t('repositories.item_card.repository_date_value.no_date') }}
-    </div>
+    <DateTimeRange :editingField="editingField" @setEditingField="$emit('setEditingField', $event)" dateType="date" :colVal="colVal" :colId="colId" :updatePath="updatePath" :dataType="data_type" />
  </div>
 </template>

 <script>
+  import DateTimeRange from './DateTimeRange.vue';
+
 export default {
  name: 'RepositoryDateValue',
-  data() {
-    return {
-      formatted: null,
-      datetime: null
-    }
-  },
+  components: { DateTimeRange },
  props: {
    data_type: String,
    colId: Number,
    colName: String,
-    colVal: Object
-  },
-  created() {
-    if (!this.colVal) return
-
-    this.formatted = this.colVal.formatted
-    this.datetime = this.colVal.datetime
+    colVal: null,
+    updatePath: null,
+    editingField: null
  }
 }
 </script>
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTimeRangeValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTimeRangeValue.vue
@ -3,36 +3,22 @@
    <div class="font-inter text-sm font-semibold leading-5 truncate">
      {{ colName }}
    </div>
-    <div v-if="start_time?.formatted && end_time?.formatted"
-      class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">
-      <div>{{ start_time?.formatted }} - {{ end_time?.formatted }}</div>
-    </div>
-    <div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">{{
-      i18n.t('repositories.item_card.repository_time_range_value.no_time_range') }}
-    </div>
+    <DateTimeRange :editingField="editingField" @setEditingField="$emit('setEditingField', $event)" dateType="timeRange" :startTime="colVal?.start_time" :endTime="colVal?.end_time" :colVal="colVal" :colId="colId" :updatePath="updatePath" />
  </div>
 </template>

 <script>
-export default {
-  name: 'RepositoryTimeRangeValue',
-  data() {
-    return {
-      start_time: null,
-      end_time: null
+  import DateTimeRange from './DateTimeRange.vue';
+  export default {
+    name: 'RepositoryTimeRangeValue',
+    components: { DateTimeRange },
+    props: {
+      data_type: String,
+      colId: Number,
+      colName: String,
+      colVal: Object,
+      updatePath: null,
+      editingField: null
    }
-  },
-  props: {
-    data_type: String,
-    colId: Number,
-    colName: String,
-    colVal: Object
-  },
-  created() {
-    if (!this.colVal) return
-
-    this.start_time = this.colVal.start_time
-    this.end_time = this.colVal.end_time
  }
-}
 </script>
--- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTimeValue.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTimeValue.vue
@ -3,37 +3,22 @@
    <div class="font-inter text-sm font-semibold leading-5 truncate">
      {{ colName }}
    </div>
-    <div v-if="formatted" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">
-      <div>
-        {{ formatted }}
-      </div>
-    </div>
-    <div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
-      {{ i18n.t('repositories.item_card.repository_time_value.no_time') }}
-    </div>
+    <DateTimeRange :editingField="editingField" @setEditingField="$emit('setEditingField', $event)" dateType="time" :colVal="colVal" :colId="colId" :updatePath="updatePath" />
  </div>
 </template>

 <script>
-export default {
-  name: 'RepositoryTimeValue',
-  props: {
-    data_type: String,
-    colId: Number,
-    colName: String,
-    colVal: Object
-  },
-  data() {
-    return {
-      formatted: null,
-      datetime: null
+  import DateTimeRange from './DateTimeRange.vue';
+  export default {
+    name: 'RepositoryTimeValue',
+    components: { DateTimeRange },
+    props: {
+      data_type: String,
+      colId: Number,
+      colName: String,
+      colVal: Object,
+      updatePath: null,
+      editingField: null
    }
-  },
-  created() {
-    if (!this.colVal) return
-
-    this.formatted = this.colVal.formatted
-    this.datetime = this.colVal.datetime
-  }
 }
 </script>
--- a/app/javascript/vue/repository_search/container.vue
+++ b/app/javascript/vue/repository_search/container.vue
@ -35,8 +35,12 @@
 </template>

 <script>
+import outsideClick from '../../packs/vue/directives/outside_click';
 export default {
  name: 'RepositorySearchContainer',
+  directives: {
+    'click-outside': outsideClick
+  },
  data() {
    return {
      barcodeSearchOpened: false,
--- a/app/javascript/vue/shared/date_picker.vue
+++ b/app/javascript/vue/shared/date_picker.vue
@ -1,13 +1,22 @@
 <template>
-  <div class="datepicker sci-input-container right-icon">
-      <input
-        @change="update"
-        type="datetime"
-        class="form-control calendar-input sci-input-field"
-        :id="this.selectorId"
-        :placeholder="placeholder || 'dd/mm/yyyy'"
-      />
-      <i class="sn-icon sn-icon-calendar"></i>
+  <div v-if="!standAlone" class="datepicker sci-input-container right-icon">
+    <input
+      @change="update"
+      type="datetime"
+      class="form-control calendar-input sci-input-field"
+      :id="this.selectorId"
+      :placeholder="placeholder || 'dd/mm/yyyy'"
+    />
+    <i class="sn-icon sn-icon-calendar"></i>
+  </div>
+  <div :class="className" v-else>
+    <input
+      @input="update"
+      type="datetime"
+      class='inline-block m-0 p-0 w-full border-none shadow-none outline-none'
+      :id="this.selectorId"
+      :placeholder="placeholder || 'dd/mm/yyyy'"
+    />
  </div>
 </template>

@ -20,7 +29,9 @@
      placeholder: { type: String },
      selectorId: { type: String, required: true },
      useCurrent: { type: Boolean, default: true },
-      defaultValue: { type: Date, default: null }
+      defaultValue: { type: Date, default: null },
+      standAlone: { type: Boolean, default: false, required: false },
+      className: { type: String, default: '' }
    },
    mounted() {
      $("#" + this.selectorId).datetimepicker(
@ -33,10 +44,11 @@
        }
        );
      $("#" + this.selectorId).on('dp.change', (e) => this.update(e.date))
+      if (this.isValidDate(this.defaultValue)) this.update(moment(this.defaultValue));
    },
    methods: {
      update(value) {
-        this.$emit('change', (value._isAMomentObject) ? value.toDate() : '');
+        this.$emit('change', (value?._isAMomentObject) ? value.toDate() : '');
      },
      isValidDate(date) {
        return (date instanceof Date) && !isNaN(date.getTime());
--- a/app/javascript/vue/shared/date_time_picker.vue
+++ b/app/javascript/vue/shared/date_time_picker.vue
@ -1,16 +1,20 @@
 <template>
-  <div class="date-time-picker grow">
+  <div class="date-time-picker" :class="{ 'grow': !standAlone, 'flex': standAlone}">
    <DatePicker v-if="!timeOnly"
      @change="updateDate"
      :placeholder="placeholder"
      :selectorId="`${this.selectorId}_Date`"
      :defaultValue="defaultValue"
+      :standAlone="standAlone"
+      :className="dateClassName"
    />
    <TimePicker v-if="!dateOnly"
      @change="updateTime"
      :placeholder="placeholder"
      :selectorId="`${this.selectorId}_Time`"
      :defaultValue="getTime(defaultValue)"
+      :standAlone="standAlone"
+      :className="timeClassName"
    />
  </div>
 </template>
@ -26,7 +30,10 @@
      timeOnly: { type: Boolean, default: false },
      selectorId: { type: String, required: true },
      defaultValue: { type: Date, required: false },
-      placeholder: { type: String }
+      placeholder: { type: String },
+      standAlone: { type: Boolean, default: false, required: false },
+      dateClassName: { type: String, default: '' },
+      timeClassName: { type: String, default: '' }
    },
    data() {
      return {
--- a/app/javascript/vue/shared/time_picker.vue
+++ b/app/javascript/vue/shared/time_picker.vue
@ -1,14 +1,24 @@
 <template>
-  <div class="sci-input-container time-container right-icon">
+  <div v-if="!standAlone" class="sci-input-container time-container right-icon">
    <input class="time-part sci-input-field"
-           @input="update"
-           :id="this.selectorId"
-           type="text"
-           data-mask-type="time"
-           v-model="value"
-           placeholder="HH:mm"/>
+      @input="update"
+      :id="this.selectorId"
+      type="text"
+      data-mask-type="time"
+      v-model="value"
+      placeholder="HH:mm"/>
    <i class="sn-icon sn-icon-created"></i>
  </div>
+  <span v-else :class="className">
+    <input class="time-part sci-input-field w-full inline-block m-0 p-0 border-none shadow-none outline-none"
+      @input="update"
+      :id="this.selectorId"
+      type="text"
+      data-mask-type="time"
+      v-model="value"
+      placeholder="HH:mm"
+    />
+  </span>
 </template>

 <script>
@ -16,7 +26,9 @@
    name: 'TimePicker',
    props: {
      selectorId: { type: String, required: true },
-      defaultValue: { type: String, required: false }
+      defaultValue: { type: String, required: false },
+      standAlone: { type: Boolean, default: true, required: false },
+      className: { type: String, default: '', required: false }
    },
    data() {
      return {