Fix wrong placeholders for item card fields in edit mode [SCI-9615] (#6553)

* Fix wrong placeholders for item card fields in edit mode [SCI-9615]

* Refactor date time range className [SCI-9615]

app/javascript/vue/repository_item_sidebar/customColumns.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="customColumns?.length > 0" class="flex flex-col gap-4 w-[350px] h-auto">
+  <div v-if="permissions && customColumns?.length > 0" class="flex flex-col gap-4 w-[350px] h-auto">
     <div v-for="(column, index) in customColumns" :key="column.id" class="flex flex-col gap-4 w-[350px] h-auto relative">
       <component
         :is="column.data_type"
@@ -15,6 +15,7 @@
         :updatePath="updatePath"
         :optionsPath="column.options_path"
         :inArchivedRepositoryRow="inArchivedRepositoryRow"
+        :canEdit="permissions.can_manage && !inArchivedRepositoryRow"
         :editingField="editingField"
         @setEditingField="editingField = $event"
         @update="update"

app/javascript/vue/repository_item_sidebar/repository_values/DateTimeRange.vue

@@ -1,10 +1,12 @@
 <template>
   <div>
     <div
+      @click="enableEdit"
       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 }`"
+      class="text-sn-dark-grey font-inter text-sm font-normal leading-5 w-full rounded relative"
+      :class="editableClassName"
     >
-      <div v-if="dateType === 'date'" @click="enableEdit" class="p-2">
+      <div v-if="dateType === 'date'">
         <div v-if="isEditing || values?.datetime" ref="edit">
           <DateTimePicker
             @change="formatDateTime($event)"
@@ -15,10 +17,10 @@
           />
         </div>
         <div v-else ref="view" >
-          {{ i18n.t('repositories.item_card.repository_date_value.no_date') }}
+          {{ i18n.t(`repositories.item_card.repository_date_value.${canEdit ? 'placeholder' : 'no_date'}`) }}
         </div>
       </div>
-      <div v-else-if="dateType === 'dateRange'" @click="enableEdit" class="p-2">
+      <div v-else-if="dateType === 'dateRange'">
         <div v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)" ref="edit" class="w-full flex align-center">
           <div>
             <DateTimePicker
@@ -43,10 +45,10 @@
           </div>
         </div>
         <div v-else ref="view" >
-          {{ i18n.t('repositories.item_card.repository_date_range_value.no_date_range') }}
+          {{ i18n.t(`repositories.item_card.repository_date_range_value.${canEdit ? 'placeholder' : 'no_date_range'}`) }}
         </div>
       </div>
-      <div v-if="dateType === 'dateTime'"  @click="enableEdit" class="p-2">
+      <div v-if="dateType === 'dateTime'">
         <div v-if="isEditing || values?.datetime" ref="edit" class="w-full">
           <DateTimePicker
             @change="formatDateTime"
@@ -58,10 +60,10 @@
           />
         </div>
         <div v-else ref="view" >
-          {{ i18n.t('repositories.item_card.repository_date_time_value.no_date_time') }}
+          {{ i18n.t(`repositories.item_card.repository_date_time_value.${canEdit ? 'placeholder' : 'no_date_time'}`) }}
         </div>
       </div>
-      <div v-else-if="dateType === 'dateTimeRange'"  @click="enableEdit" class="p-2">
+      <div v-else-if="dateType === 'dateTimeRange'">
         <div v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)" ref="edit" class="w-full flex">
           <div>
             <DateTimePicker
@@ -90,10 +92,10 @@
           </div>
         </div>
         <div v-else ref="view" >
-          {{ i18n.t('repositories.item_card.repository_date_time_range_value.no_date_time_range') }}
+          {{ i18n.t(`repositories.item_card.repository_date_time_range_value.${canEdit ? 'placeholder' : 'no_date_time_range'}`) }}
         </div>
       </div>
-      <div v-else-if="dateType === 'time'" @click="enableEdit" class="p-2">
+      <div v-else-if="dateType === 'time'">
         <div v-if="isEditing || values?.datetime" ref="edit">
           <DateTimePicker
             @change="formatDateTime"
@@ -105,10 +107,10 @@
           />
         </div>
         <div v-else ref="view">
-          {{ i18n.t('repositories.item_card.repository_time_value.no_time') }}
+          {{ i18n.t(`repositories.item_card.repository_time_value.${ canEdit ? 'placeholder' : 'no_time'}`) }}
         </div>
       </div>
-      <div v-else-if="dateType === 'timeRange'" @click="enableEdit" class="p-2">
+      <div v-else-if="dateType === 'timeRange'">
         <div v-if="isEditing || (timeFrom?.datetime && timeTo?.datetime)" ref="edit" class="w-full flex">
           <div>
             <DateTimePicker
@@ -133,7 +135,7 @@
           </div>
         </div>
         <div v-else ref="view">
-          {{ i18n.t('repositories.item_card.repository_time_range_value.no_time_range') }}
+          {{ i18n.t(`repositories.item_card.repository_time_range_value.${canEdit ? 'placeholder' : 'no_time_range'}`) }}
         </div>
       </div>
       <span class="absolute right-2 top-1.5" v-if="values.reminder">
@@ -181,6 +183,17 @@
       startTime: null,
       endTime: null,
       editingField: false,
+      canEdit: { type: Boolean, default: false }
+
+    },
+    computed: {
+      editableClassName() {
+        const className = 'border-solid border-[1px] p-2 sci-cursor-edit'
+        if (this.canEdit && this.errorMessage) return `${className} border-sn-delete-red`;
+        if (this.canEdit && this.isEditing) return `${className} border-sn-science-blue`;
+        if (this.canEdit) return `${className} border-sn-light-grey hover:border-sn-sleepy-grey`;
+        return ''
+      }
     }, 
     mounted() {
       this.cellUpdatePath = this.updatePath;

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryAssetValue.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="repository-asset-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
-    <div class="flex flex-row items-center font-inter text-sm font-semibold leading-5 truncate justify-between" :title="colName">
+    <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"
@@ -11,8 +11,8 @@
         {{ file_name }}
       </a>
     </div>
-    <div>
-      <a v-if="!file_name && (!uploading || error) && permissions?.can_manage && !inArchivedRepositoryRow "
+    <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"> 
         {{ i18n.t('repositories.item_card.repository_asset_value.add_asset') }}
       </a>
@@ -29,14 +29,14 @@
               :preview_url="preview_url" :icon_html="icon_html" :medium_preview_url="medium_preview_url">
             </tooltip-preview>
           </div>
-          <div v-if="permissions?.can_manage && !inArchivedRepositoryRow" class="flex whitespace-nowrap gap-4 pl-4">
+          <div v-if="canEdit" class="flex whitespace-nowrap gap-4 pl-4">
             <a class="btn-text-link font-normal" @click="openFileChooser"> {{ i18n.t('general.replace') }} </a>
             <a class="btn-text-link font-normal" @click="clearFile"> {{ i18n.t('general.delete') }} </a>
           </div>
         </div>
       </div>
-      <div v-else-if="!error" class="flex flex-row items-center text-sn-dark-grey font-inter text-sm font-normal leading-5 justify-between">
-        {{ i18n.t('repositories.item_card.repository_asset_value.no_asset') }}
+      <div v-else-if="!error" class="flex flex-row items-center text-sn-grey font-inter text-sm font-normal leading-5 justify-between">
+        {{ i18n.t(`repositories.item_card.repository_asset_value.${canEdit ? 'placeholder' : 'no_asset'}`) }}
       </div>
     </div>
     <div v-else class="bg-sn-light-grey h-1 w-full rounded-sm">
@@ -79,7 +79,7 @@ export default {
     permissions: Object,
     actions: Object,
     updatePath: String,
-    inArchivedRepositoryRow: Boolean,
+    canEdit: { type: Boolean, default: false }
   },
   created() {
     if (!this.colVal) return

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateRangeValue.vue

@@ -10,6 +10,7 @@
       :colVal="colVal"
       :colId="colId"
       :updatePath="updatePath"
+      :canEdit="canEdit"
       :editingField="editingField"
       @setEditingField="$emit('setEditingField', $event)"
     />
@@ -28,7 +29,8 @@ import DateTimeRange from './DateTimeRange.vue';
       colName: String,
       colVal: null,
       updatePath: null,
-      editingField: null
+      editingField: null,
+      canEdit: { type: Boolean, default: false },
     }
   }
 </script>

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateTimeRangeValue.vue

@@ -3,7 +3,17 @@
     <div class="font-inter text-sm font-semibold leading-5 truncate" :title="colName">
       {{ colName }}
     </div>
-    <DateTimeRange :editingField="editingField" @setEditingField="$emit('setEditingField', $event)" dateType="dateTimeRange" :startTime="colVal?.start_time" :endTime="colVal?.end_time" :colVal="colVal" :colId="colId" :updatePath="updatePath" />
+    <DateTimeRange
+      :editingField="editingField"
+      @setEditingField="$emit('setEditingField', $event)"
+      dateType="dateTimeRange"
+      :startTime="colVal?.start_time"
+      :endTime="colVal?.end_time"
+      :colVal="colVal"
+      :colId="colId"
+      :updatePath="updatePath"
+      :canEdit="canEdit"
+    />
   </div>
 </template>
 
@@ -19,7 +29,8 @@
       colName: String,
       colVal: Object,
       updatePath: null,
-      editingField: null
+      editingField: null,
+      canEdit: { type: Boolean, default: false }
     }
   }
 </script>

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateTimeValue.vue

@@ -3,7 +3,15 @@
     <div class="font-inter text-sm font-semibold leading-5 truncate" :title="colName">
       {{ colName }}
     </div>
-    <DateTimeRange :editingField="editingField" @setEditingField="$emit('setEditingField', $event)" dateType="dateTime" :colVal="colVal" :colId="colId" :updatePath="updatePath" />
+    <DateTimeRange
+      :editingField="editingField"
+      @setEditingField="$emit('setEditingField', $event)"
+      dateType="dateTime"
+      :colVal="colVal"
+      :colId="colId"
+      :updatePath="updatePath"
+      :canEdit="canEdit"
+    />
   </div>
 </template>
 
@@ -19,7 +27,8 @@
       colName: String,
       colVal: Object,
       updatePath: String,
-      editingField: null
+      editingField: null,
+      canEdit: { type: Boolean, default: false }
     }
   }
 </script>

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryDateValue.vue

@@ -3,7 +3,16 @@
     <div class="font-inter text-sm font-semibold leading-5 truncate" :title="colName">
       {{ colName }}
     </div>
-    <DateTimeRange :editingField="editingField" @setEditingField="$emit('setEditingField', $event)" dateType="date" :colVal="colVal" :colId="colId" :updatePath="updatePath" :dataType="data_type" />
+    <DateTimeRange
+      :editingField="editingField"
+      @setEditingField="$emit('setEditingField', $event)"
+      dateType="date"
+      :colVal="colVal"
+      :colId="colId"
+      :updatePath="updatePath"
+      :dataType="data_type"
+      :canEdit="canEdit"
+    />
   </div>
 </template>
 
@@ -19,7 +28,8 @@ export default {
     colName: String,
     colVal: null,
     updatePath: null,
-    editingField: null
+    editingField: null,
+    canEdit: { type: Boolean, default: false }
   }
 }
 </script>

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryNumberValue.vue

@@ -71,7 +71,7 @@ export default {
   },
   data() {
     return {
-      expandable: true,
+      expandable: false,
       collapsed: true
     };
   },

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStockValue.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="repository-stock-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
-    <div class="font-inter text-sm font-semibold leading-5 relative">
+    <div class="font-inter text-sm font-semibold leading-5 relative h-[20px]">
       <span class="truncate w-full inline-block pr-[50px]" :title="colName">{{ colName }}</span>
       <a style="text-decoration: none;" class="absolute right-0 btn-text-link font-normal export-consumption-button"
         v-if="permissions?.can_export_repository_stock === true && values?.stock_formatted" :data-rows="JSON.stringify([repositoryRowId])"
@@ -18,10 +18,10 @@
       <div v-if="values?.stock_formatted" :data-manage-stock-url="values?.stock_url" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 stock-value">
         {{ values.stock_formatted }}
       </div>
-      <div v-else :data-manage-stock-url="values?.stock_url" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 stock-value">
-        {{ i18n.t('repositories.item_card.repository_stock_value.no_stock') }}
+      <div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5 stock-value">
+        {{ i18n.t(`repositories.item_card.repository_stock_value.${canEdit ? 'placeholder' : 'no_stock'}`) }}
       </div>
-      <span class="absolute right-2 reminder" :class="{ 'top-1.5': permissions?.can_manage, 'top-0': !permissions?.can_manage, hidden: !values?.reminder }">
+      <span class="absolute right-2 reminder" :class="{ 'top-1.5': canEdit, 'top-0': !canEdit, hidden: !values?.reminder }">
         <Reminder :value="values" />
       </span>
     </a>
@@ -38,8 +38,8 @@
     computed: {
       editableClassName() {
         const className = 'border-solid border-[1px] p-2 manage-repository-stock-value-link sci-cursor-edit'
-        if (this.permissions.can_manage && this.isEditing) return `${className} border-sn-science-blue`;
-        if (this.permissions.can_manage) return `${className} border-sn-light-grey hover:border-sn-sleepy-grey`;
+        if (this.canEdit && this.isEditing) return `${className} border-sn-science-blue`;
+        if (this.canEdit) return `${className} border-sn-light-grey hover:border-sn-sleepy-grey`;
         return ''
       }
     }, 
@@ -60,7 +60,8 @@
       repositoryId: Number,
       repositoryRowId: null,
       permissions: null,
-      actions: null, 
+      canEdit: { type: Boolean, default: false },
+      actions: null
     },
     mounted() {
       this.values = this.colVal || {};

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTextValue.vue

@@ -41,7 +41,7 @@
       >
         {{ colVal?.edit }}
       </div>
-      <div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5 px-4 py-2">
+      <div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
         {{ i18n.t("repositories.item_card.repository_text_value.no_text") }}
       </div>
     </div>

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTimeRangeValue.vue

@@ -3,7 +3,17 @@
     <div class="font-inter text-sm font-semibold leading-5 truncate" :title="colName">
       {{ colName }}
     </div>
-    <DateTimeRange :editingField="editingField" @setEditingField="$emit('setEditingField', $event)" dateType="timeRange" :startTime="colVal?.start_time" :endTime="colVal?.end_time" :colVal="colVal" :colId="colId" :updatePath="updatePath" />
+    <DateTimeRange
+      :editingField="editingField"
+      @setEditingField="$emit('setEditingField', $event)"
+      dateType="timeRange"
+      :startTime="colVal?.start_time"
+      :endTime="colVal?.end_time"
+      :colVal="colVal"
+      :colId="colId"
+      :updatePath="updatePath"
+      :canEdit="canEdit"
+    />
   </div>
 </template>
 
@@ -18,7 +28,8 @@
       colName: String,
       colVal: Object,
       updatePath: null,
-      editingField: null
+      editingField: null,
+      canEdit: { type: Boolean, default: false }
     }
   }
 </script>

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryTimeValue.vue

@@ -3,7 +3,15 @@
     <div class="font-inter text-sm font-semibold leading-5 truncate" :title="colName">
       {{ colName }}
     </div>
-    <DateTimeRange :editingField="editingField" @setEditingField="$emit('setEditingField', $event)" dateType="time" :colVal="colVal" :colId="colId" :updatePath="updatePath" />
+    <DateTimeRange
+      :editingField="editingField"
+      @setEditingField="$emit('setEditingField', $event)"
+      dateType="time"
+      :colVal="colVal"
+      :colId="colId"
+      :updatePath="updatePath"
+      :canEdit="canEdit"
+    />
   </div>
 </template>
 
@@ -18,7 +26,8 @@
       colName: String,
       colVal: Object,
       updatePath: null,
-      editingField: null
+      editingField: null,
+      canEdit: { type: Boolean, default: false }
     }
 }
 </script>

config/locales/en.yml

@@ -2258,12 +2258,14 @@ en:
       no_custom_columns_label: "No custom columns"
       repository_time_range_value:
         no_time_range: 'No time range'
+        placeholder: 'Enter time range'
       repository_text_value:
         collapse: 'Collapse'
         expand: 'Expand'
         no_text: 'No content'
         placeholder: 'Enter text'
       repository_stock_value:
+        placeholder: 'Enter stock'
         no_stock: 'No stock'
       repository_status_value:
         no_status: 'No selection'
@@ -2271,27 +2273,33 @@ en:
         collapse: 'Collapse'
         expand: 'Expand'
         no_number: 'No number'
-        placeholder: 'Enter text'
+        placeholder: 'Enter number'
       repository_list_value:
         no_list: 'No selection'
       repository_date_value:
         no_date: 'No date'
+        placeholder: 'Enter date'
       repository_date_time_value:
         no_date_time: 'No date and time'
+        placeholder: 'Enter date and time'
       repository_date_time_range_value:
         no_date_time_range: 'No date and time range'
+        placeholder: 'Enter date & time range'
       repository_date_range_value:
         no_date_range: 'No date range'
+        placeholder: 'Enter date range'
       repository_checklist_value:
         no_checklist: 'No selection'
       repository_asset_value:
         no_asset: 'No file'
+        placeholder: 'Enter asset'
         add_asset: 'Add file'
         errors:
           upload_failed_general: 'Upload failed. Something went wrong, please try again'
           file_too_big: 'Upload failed. File size must be less than %{file_size} MB.'
       repository_time_value:
         no_time: 'No time'
+        placeholder: 'Enter time'
       expand: 'Expand'
       collapse: 'Collapse'
       dropdown_placeholder: 'Select'