Fixed missing inventory columns on item card [SCI-9469] (#6416)

app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue

@@ -43,7 +43,7 @@
                   </span>
                 </div>
 
-                <div id="dashed-divider" class="flex h-[1px] py-0  border-dashed border-[1px] border-sn-light-grey"></div>
+                <div class="sci-divider"></div>
 
                 <!-- CODE -->
                 <div class="flex flex-col ">
@@ -54,7 +54,7 @@
                   </span>
                 </div>
 
-                <div id="dashed-divider" class="flex h-[1px] py-0  border-dashed border-[1px] border-sn-light-grey"></div>
+                <div class="sci-divider"></div>
 
                 <!-- ADDED ON -->
                 <div class="flex flex-col ">
@@ -66,7 +66,7 @@
                   </span>
                 </div>
 
-                <div id="dashed-divider" class="flex h-[1px] py-0  border-dashed border-[1px] border-sn-light-grey"></div>
+                <div class="sci-divider"></div>
 
                 <!-- ADDED BY -->
                 <div class="flex flex-col ">
@@ -94,16 +94,17 @@
               </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 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"
-                    @closeSidebar="toggleShowHideSidebar(null)" />
-                  <div id="dashed-divider" :class="{ 'hidden': index === customColumns.length - 1 }"
-                    class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey">
-                  </div>
+
+                  <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" @closeSidebar="toggleShowHideSidebar(null)" />
+
+                  <div class="sci-divider" :class="{ 'hidden': index === customColumns?.length - 1 }"></div>
+
                 </div>
               </div>
               <div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
@@ -158,7 +159,7 @@
             <div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px  "></div>
 
             <!-- QR -->
-            <section id="qr-wrapper">
+            <section id="qr-wrapper" ref="QR-label">
               <div class="font-inter text-base font-semibold leading-7 mb-4 mt-0">{{ i18n.t('repositories.item_card.section.qr') }}</div>
               <div class="bar-code-container">
                 <canvas id="bar-code-canvas" class="hidden"></canvas>
@@ -310,16 +311,16 @@ export default {
         data: { my_module_id: this.myModuleId },
         dataType: 'json',
         success: (result) => {
-          this.repositoryRowId = result.id;
-          this.repository = result.repository;
-          this.defaultColumns = result.default_columns;
-          this.customColumns = result.custom_columns;
-          this.dataLoading = false;
-          this.assignedModules = result.assigned_modules;
-          this.actions = result.actions;
-          this.permissions = result.permissions
+          this.repositoryRowId = result?.id
+          this.repository = result?.repository;
+          this.defaultColumns = result?.default_columns;
+          this.customColumns = result?.custom_columns;
+          this.assignedModules = result?.assigned_modules;
+          this.permissions = result?.permissions
+          this.actions = result?.actions;
+          this.dataLoading = false
           this.$nextTick(() => {
-            this.generateBarCode(this.defaultColumns.code);
+            this.generateBarCode(this?.defaultColumns?.code);
           });
         }
       });

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

@@ -6,7 +6,7 @@
     <div v-if="file_name" @mouseover="tooltipShowing = true" @mouseout="tooltipShowing = false"
       class="w-fit cursor-pointer text-sn-science-blue relative">
       <a @click="$emit('closeSidebar')" class="file-preview-link" :id="modalPreviewLinkId" data-no-turbolink="true"
-        data-id="true" data-status="asset-present" :data-preview-url=this.preview_url :href=this.url>
+        data-id="true" data-status="asset-present" :data-preview-url=this?.preview_url :href=this?.url>
         {{ file_name }}
       </a>
       <tooltip-preview v-if="tooltipShowing && medium_preview_url" :id="id" :url="url" :file_name="file_name"
@@ -45,16 +45,16 @@ export default {
     colVal: Object
   },
   created() {
-    this.id = this.colVal.id
-    this.url = this.colVal.url
-    this.preview_url = this.colVal.preview_url
-    this.file_name = this.colVal.file_name
-    this.icon_html = this.colVal.icon_html
-    this.medium_preview_url = this.colVal.medium_preview_url
+    this.id = this?.colVal?.id
+    this.url = this?.colVal?.url
+    this.preview_url = this?.colVal?.preview_url
+    this.file_name = this?.colVal?.file_name
+    this.icon_html = this?.colVal?.icon_html
+    this.medium_preview_url = this?.colVal?.medium_preview_url
   },
   computed: {
     modalPreviewLinkId() {
-      return `modal_link${this.id}`
+      return `modal_link${this?.id}`
     }
   },
 }

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryChecklistValue.vue

@@ -8,17 +8,17 @@
         class="text-sn-dark-grey font-inter text-sm font-normal leading-5 grid grid-rows-2 grid-cols-2 overflow-auto h-12">
         <div v-for="(checklistItem, index) in allChecklistItems" :key="index">
           <div class="sci-checkbox-container">
-            <input type="checkbox" class="sci-checkbox" :value="checklistItem.value" v-model="selectedChecklistItems" />
+            <input type="checkbox" class="sci-checkbox" :value="checklistItem?.value" v-model="selectedChecklistItems" />
             <span class="sci-checkbox-label"></span>
           </div>
-          {{ checklistItem.label }}
+          {{ checklistItem?.label }}
         </div>
       </div>
       <div v-else
         class="text-sn-dark-grey font-inter text-sm font-normal leading-5 h-10 w-[370px] overflow-x-auto flex flex-wrap">
         <div v-for="(checklistItem, index) in allChecklistItems" :key="index">
           <div id="checklist-item" class="flex w-fit h-[18px] break-words mx-1">
-            {{ `${checklistItem.label} |` }}
+            {{ `${checklistItem?.label} |` }}
           </div>
         </div>
       </div>
@@ -47,7 +47,7 @@ export default {
     colVal: Array
   },
   created() {
-    this.allChecklistItems = this.colVal
+    this.allChecklistItems = this?.colVal
   }
 }
 </script>

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

@@ -5,7 +5,7 @@
     </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>{{ 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') }}
@@ -29,8 +29,8 @@ export default {
     colVal: Object
   },
   created() {
-    this.start_time = this.colVal.start_time
-    this.end_time = this.colVal.end_time
+    this.start_time = this?.colVal?.start_time
+    this.end_time = this?.colVal?.end_time
   }
 }
 </script>

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

@@ -5,7 +5,7 @@
     </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>{{ 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') }}
@@ -29,8 +29,8 @@ export default {
     colVal: Object
   },
   created() {
-    this.start_time = this.colVal.start_time
-    this.end_time = this.colVal.end_time
+    this.start_time = this?.colVal?.start_time
+    this.end_time = this?.colVal?.end_time
   }
 }
 </script>

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

@@ -30,10 +30,10 @@ export default {
     colVal: Object
   },
   created() {
-    this.formatted = this.colVal.formatted
-    this.date_formatted = this.colVal.date_formatted
-    this.time_formatted = this.colVal.time_formatted
-    this.formatdatetimeted = this.colVal.datetime
+    this.formatted = this?.colVal?.formatted
+    this.date_formatted = this?.colVal?.date_formatted
+    this.time_formatted = this?.colVal?.time_formatted
+    this.formatdatetimeted = this?.colVal?.datetime
   }
 }
 </script>

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

@@ -28,8 +28,8 @@ export default {
     colVal: Object
   },
   created() {
-    this.formatted = this.colVal.formatted
-    this.datetime = this.colVal.datetime
+    this.formatted = this?.colVal?.formatted
+    this.datetime = this?.colVal?.datetime
   }
 }
 </script>

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryListValue.vue

@@ -28,8 +28,8 @@ export default {
     colVal: Object
   },
   created() {
-    this.id = this.colVal.id
-    this.text = this.colVal.text
+    this.id = this?.colVal?.id
+    this.text = this?.colVal?.text
   }
 }
 </script>

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryStatusValue.vue

@@ -3,7 +3,8 @@
     <div class="font-inter text-sm font-semibold leading-5">
       {{ colName }}
     </div>
-    <div v-if="status && icon" class="flex flex-row items-center text-sn-dark-grey font-inter text-sm font-normal leading-5 ">
+    <div v-if="status && icon"
+      class="flex flex-row items-center text-sn-dark-grey font-inter text-sm font-normal leading-5 ">
       <div v-html="parseEmoji(icon)" class="flex mr-1.5 h-6"></div>
       {{ status }}
     </div>
@@ -33,9 +34,9 @@ export default {
     colVal: Object
   },
   created() {
-    this.id = this.colVal.id
-    this.icon = this.colVal.icon
-    this.status = this.colVal.status
+    this.id = this?.colVal?.id
+    this.icon = this?.colVal?.icon
+    this.status = this?.colVal?.status
   },
   methods: {
     parseEmoji(content) {

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

@@ -2,18 +2,15 @@
   <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">
       <span>{{ colName }}</span>
-      <a style="text-decoration: none;"
-        class="absolute right-0 text-sn-science-blue visited:text-sn-science-blue hover:text-sn-science-blue 
+      <a style="text-decoration: none;" class="absolute right-0 text-sn-science-blue visited:text-sn-science-blue hover:text-sn-science-blue
                font-inter text-sm font-normal cursor-pointer export-consumption-button"
-        v-if="permissions?.can_export_repository_stock === true"
-        :data-rows="JSON.stringify([repositoryRowId])"
-        :data-object-id="repositoryId"
-      >
+        v-if="permissions?.can_export_repository_stock === true" :data-rows="JSON.stringify([repositoryRowId])"
+        :data-object-id="repositoryId">
         {{ i18n.t('repositories.item_card.stock_export') }}
       </a>
     </div>
-    <div v-if="colVal.stock_formatted" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
-      {{ colVal.stock_formatted }}
+    <div v-if="colVal?.stock_formatted" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
+      {{ colVal?.stock_formatted }}
     </div>
     <div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
       {{ i18n.t('repositories.item_card.repository_stock_value.no_stock') }}
@@ -41,9 +38,9 @@ export default {
     permissions: null
   },
   created() {
-    this.stock_formatted = this.colVal.stock_formatted
-    this.stock_amount = this.colVal.stock_amount
-    this.low_stock_threshold = this.colVal.low_stock_threshold
+    this.stock_formatted = this?.colVal?.stock_formatted
+    this.stock_amount = this?.colVal?.stock_amount
+    this.low_stock_threshold = this?.colVal?.low_stock_threshold
   }
 }
 </script>

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

@@ -28,8 +28,8 @@ export default {
     colVal: Object
   },
   created() {
-    this.edit = this.colVal.edit
-    this.view = this.colVal.view
+    this.edit = this?.colVal?.edit
+    this.view = this?.colVal?.view
   }
 }
 </script>

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

@@ -5,7 +5,7 @@
     </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>{{ 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') }}
@@ -29,8 +29,8 @@ export default {
     colVal: Object
   },
   created() {
-    this.start_time = this.colVal.start_time
-    this.end_time = this.colVal.end_time
+    this.start_time = this?.colVal?.start_time
+    this.end_time = this?.colVal?.end_time
   }
 }
 </script>

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

@@ -30,8 +30,8 @@ export default {
     }
   },
   created() {
-    this.formatted = this.colVal.formatted
-    this.datetime = this.colVal.datetime
+    this.formatted = this?.colVal?.formatted
+    this.datetime = this?.colVal?.datetime
   }
 }
 </script>

app/javascript/vue/repository_item_sidebar/repository_values/ScrollSpy.vue

@@ -14,8 +14,8 @@
     </div>
     <div id="highlight-container" class="w-[1px] h-[130px] flex flex-col justify-evenly bg-sn-light-grey">
       <div v-for="(itemObj, index) in itemsToCreate" :key="index">
-        <div :id="itemObj.id" class="w-[5px] h-[28px] rounded-[11px]"
-          :class="{ 'bg-sn-science-blue relative left-[-2px]': itemObj.id === selectedNavIndicator }"></div>
+        <div :id="itemObj?.id" class="w-[5px] h-[28px] rounded-[11px]"
+          :class="{ 'bg-sn-science-blue relative left-[-2px]': itemObj?.id === selectedNavIndicator }"></div>
       </div>
     </div>
   </div>
@@ -62,13 +62,13 @@ export default {
       let refToScrollTo
       const targetId = e.target.id
 
-      const foundObj = this.itemsToCreate.find((obj) => obj.textId === targetId)
+      const foundObj = this.itemsToCreate.find((obj) => obj?.textId === targetId)
       if (!foundObj) return
 
       refToScrollTo = foundObj.label
-      this.selectedNavText = foundObj.textId
-      this.selectedNavIndicator = foundObj.id
-      const sectionLabels = this.itemsToCreate.map((obj) => obj.label)
+      this.selectedNavText = foundObj?.textId
+      this.selectedNavIndicator = foundObj?.id
+      const sectionLabels = this.itemsToCreate.map((obj) => obj?.label)
       const labelsToUnhighlight = sectionLabels.filter((i) => i !== refToScrollTo)
 
       // scrolling to desired section

app/javascript/vue/repository_item_sidebar/repository_values/TooltipPreview.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <img :src="this.medium_preview_url" @load="onImageLoaded($event)"
-      class="absolute bg-sn-light-grey text-sn-black rounded pointer-events-none flex shadow-lg"
-      :class="{ hidden: !showImage, 'top-0 transform -translate-y-full': showTop }"/>
+    <img :src="this?.medium_preview_url" @load="onImageLoaded($event)"
+      class="absolute bg-sn-light-grey text-sn-black rounded pointer-events-none flex shadow-lg z-10"
+      :class="{ hidden: !showImage, 'top-0 transform -translate-y-full': showTop }" />
   </div>
 </template>
 
@@ -39,7 +39,7 @@ export default {
         (rect.bottom + height) <=
         (window.innerHeight || document.documentElement.clientHeight)
       );
-}
+    }
 
   }
 }

app/views/repository_rows/show.json.jbuilder

@@ -27,11 +27,17 @@ json.default_columns do
   json.added_by @repository_row.created_by&.full_name
   json.archived @repository_row.archived?
 end
+
 json.custom_columns do
-  json.array! @repository_row.repository_cells do |repository_cell|
-    json.merge!(**serialize_repository_cell_value(
-      repository_cell, @repository.team, @repository, reminders_enabled: @reminders_present
-    ), **repository_cell.repository_column.as_json(only: %i(id name data_type)))
+  json.array! @repository_row.repository.repository_columns.each do |repository_column|
+    repository_cell = @repository_row.repository_cells.find_by(repository_column: repository_column)
+    if repository_cell
+      json.merge! **serialize_repository_cell_value(repository_cell, @repository.team, @repository, reminders_enabled: @reminders_present).merge(
+        **repository_cell.repository_column.as_json(only: %i(id name data_type))
+      )
+    else
+      json.merge! repository_column.as_json(only: %i(id name data_type))
+    end
   end
 end
 

config/locales/en.yml

@@ -2267,12 +2267,12 @@ en:
         no_list: 'No selection'
       repository_date_value:
         no_date: 'No date'
-      repositoy_date_time_value:
-        no_date_time: 'No date & time'
+      repository_date_time_value:
+        no_date_time: 'No date and time'
       repository_date_time_range_value:
-        no_date_time_range: 'No date & time range'
+        no_date_time_range: 'No date and time range'
       repository_date_range_value:
-        no_date_range_value: 'No date range'
+        no_date_range: 'No date range'
       repository_checklist_value:
         no_checklist: 'No selection'
       repository_asset_value: