From 8f9ea0e7497fabd60c07b18ed48295234fd2d9ad Mon Sep 17 00:00:00 2001
From: sboursen-scinote <soufiane@scinote.net>
Date: Wed, 20 Mar 2024 09:30:39 +0100
Subject: [PATCH 1/2] Add inventory items landing page [SCI-9506]

---
 .../sitewide/repository_row_card.js           |  4 ++
 app/controllers/repositories_controller.rb    |  8 +++
 app/controllers/repository_rows_controller.rb |  2 +
 .../vue/repository_item_error_sidebar.js      | 14 +++++
 .../RepositoryItemErrorSidebar.vue            | 51 +++++++++++++++++++
 app/views/repositories/show.html.erb          | 10 ++++
 config/locales/en.yml                         |  2 +
 config/webpack/webpack.config.js              |  1 +
 8 files changed, 92 insertions(+)
 create mode 100644 app/javascript/packs/vue/repository_item_error_sidebar.js
 create mode 100644 app/javascript/vue/repository_item_sidebar/RepositoryItemErrorSidebar.vue

diff --git a/app/assets/javascripts/sitewide/repository_row_card.js b/app/assets/javascripts/sitewide/repository_row_card.js
index d575a8814..18fa9cc9d 100644
--- a/app/assets/javascripts/sitewide/repository_row_card.js
+++ b/app/assets/javascripts/sitewide/repository_row_card.js
@@ -104,4 +104,8 @@
       }
     }
   });
+
+  $(document).on('turbolinks:load', () => {
+    $('#itemLandingPagelink').trigger('click');
+  });
 }());
diff --git a/app/controllers/repositories_controller.rb b/app/controllers/repositories_controller.rb
index 2f28cb65e..eeef99cdd 100644
--- a/app/controllers/repositories_controller.rb
+++ b/app/controllers/repositories_controller.rb
@@ -25,6 +25,7 @@ class RepositoriesController < ApplicationController
   before_action :check_create_permissions, only: %i(create_modal create)
   before_action :check_copy_permissions, only: %i(copy_modal copy)
   before_action :set_inline_name_editing, only: %i(show)
+  before_action :load_repository_row, only: %i(show)
   before_action :set_breadcrumbs_items, only: %i(index show)
 
   layout 'fluid'
@@ -470,6 +471,13 @@ class RepositoriesController < ApplicationController
     @repositories = current_team.repositories.archived.where(id: params[:repository_ids])
   end
 
+  def load_repository_row
+    @repository_row = nil
+    return if params[:row_id].blank?
+
+    @repository_row = @repository.repository_rows.find_by(id: params[:row_id])
+  end
+
   def set_inline_name_editing
     return unless can_manage_repository?(@repository)
 
diff --git a/app/controllers/repository_rows_controller.rb b/app/controllers/repository_rows_controller.rb
index a9c8b11e1..236001f8a 100644
--- a/app/controllers/repository_rows_controller.rb
+++ b/app/controllers/repository_rows_controller.rb
@@ -45,6 +45,8 @@ class RepositoryRowsController < ApplicationController
   def show
     respond_to do |format|
       format.html do
+        return redirect_to repository_path(@repository, row_id: @repository_row.id) if params[:show_card].present?
+
         redirect_to repository_path(@repository)
       end
 
diff --git a/app/javascript/packs/vue/repository_item_error_sidebar.js b/app/javascript/packs/vue/repository_item_error_sidebar.js
new file mode 100644
index 000000000..b300655c9
--- /dev/null
+++ b/app/javascript/packs/vue/repository_item_error_sidebar.js
@@ -0,0 +1,14 @@
+/* global */
+
+import PerfectScrollbar from 'vue3-perfect-scrollbar';
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
+import { vOnClickOutside } from '@vueuse/components';
+import { mountWithTurbolinks } from './helpers/turbolinks.js';
+import RepositoryItemErrorSidebar from '../../vue/repository_item_sidebar/RepositoryItemErrorSidebar.vue';
+
+const app = createApp({});
+app.component('RepositoryItemErrorSidebar', RepositoryItemErrorSidebar);
+app.use(PerfectScrollbar);
+app.directive('click-outside', vOnClickOutside);
+app.config.globalProperties.i18n = window.I18n;
+mountWithTurbolinks(app, '#repositoryItemErrorSidebar');
diff --git a/app/javascript/vue/repository_item_sidebar/RepositoryItemErrorSidebar.vue b/app/javascript/vue/repository_item_sidebar/RepositoryItemErrorSidebar.vue
new file mode 100644
index 000000000..178a0a0f8
--- /dev/null
+++ b/app/javascript/vue/repository_item_sidebar/RepositoryItemErrorSidebar.vue
@@ -0,0 +1,51 @@
+<template>
+  <transition enter-from-class="translate-x-full w-0"
+              enter-active-class="transition-all ease-sharp duration-[588ms]"
+              leave-active-class="transition-all ease-sharp duration-[588ms]"
+              leave-to-class="translate-x-full w-0"
+              v-click-outside="close">
+    <div ref="wrapper" v-if="isShowing"
+      class='items-sidebar-wrapper bg-white gap-2.5 self-stretch rounded-tl-4 rounded-bl-4 sn-shadow-menu-lg h-full w-[565px]'>
+
+      <div class="w-full h-full pl-6 bg-white flex flex-col">
+        <div class="sticky top-0 right-0 bg-white flex z-50 flex-col h-[78px] pt-6">
+          <div class="header flex w-full h-[30px] pr-6">
+            <i id="close-icon" @click="close"
+              class="sn-icon sn-icon-close ml-auto cursor-pointer my-auto mx-0"></i>
+          </div>
+          <div id="divider" class="w-500 bg-sn-light-grey flex items-center self-stretch h-px mt-6 mr-6"></div>
+        </div>
+        <div class="flex flex-col flex-1 justify-center items-center gap-1">
+          <i class="sn-icon sn-icon-alert-warning text-sn-alert-passion"></i>
+          <span class="font-semibold leading-5">{{ i18n.t('repositories.item_card_errors.item_not_found') }}</span>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { vOnClickOutside } from '@vueuse/components';
+
+export default {
+  name: 'RepositoryItemErrorSidebar',
+  directives: {
+    'click-outside': vOnClickOutside
+  },
+  data() {
+    return {
+      isShowing: false
+    };
+  },
+  mounted() {
+    this.isShowing = true;
+  },
+  methods: {
+    close() {
+      this.$nextTick(() => {
+        this.isShowing = false;
+      });
+    }
+  }
+};
+</script>
diff --git a/app/views/repositories/show.html.erb b/app/views/repositories/show.html.erb
index 53c02ff6f..677f9d774 100644
--- a/app/views/repositories/show.html.erb
+++ b/app/views/repositories/show.html.erb
@@ -50,6 +50,15 @@
   <div class="toolbar-filter-buttons" style="display:none">
   </div>
 
+  <!-- Inventory Item landing page link-->
+  <% if @repository_row %>
+    <a id="itemLandingPagelink" href="<%= repository_repository_row_path(@repository, @repository_row) %>" class="hidden record-info-link"></a>
+  <% else %>
+    <div id="repositoryItemErrorSidebar" data-behaviour="vue" class="fixed top-0 right-0 h-full z-[2039]">
+      <repository-item-error-sidebar />
+    </div>
+  <% end %>
+
 
 
   <%= render partial: "repositories/repository_table",
@@ -84,6 +93,7 @@
 <%= javascript_include_tag 'vue_repository_search' %>
 <%= javascript_include_tag 'repositories/repository_datatable' %>
 <%= javascript_include_tag "repositories/show" %>
+<%= javascript_include_tag "vue_components_repository_item_error_sidebar" %>
 <%= javascript_include_tag 'inputmask' %>
 <%= javascript_include_tag 'emoji_button' %>
 <%= javascript_include_tag 'pdf_js' %>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 15ae3b7cd..a69032d00 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2267,6 +2267,8 @@ en:
       invalid_arguments: "Can't find %{key}"
     my_module_assigned_snapshot_service:
       invalid_arguments: "Can't find %{key}"
+    item_card_errors:
+      item_not_found: "Inventory item you're looking for was deleted."
     item_card:
       add_relationship_button_text: "Add"
       repository_item_relationships_modal:
diff --git a/config/webpack/webpack.config.js b/config/webpack/webpack.config.js
index 07ac72a33..71e970e2b 100644
--- a/config/webpack/webpack.config.js
+++ b/config/webpack/webpack.config.js
@@ -39,6 +39,7 @@ const entryList = {
   vue_navigation_top_menu: './app/javascript/packs/vue/navigation/top_menu.js',
   vue_navigation_navigator: './app/javascript/packs/vue/navigation/navigator.js',
   vue_components_repository_item_sidebar: './app/javascript/packs/vue/repository_item_sidebar.js',
+  vue_components_repository_item_error_sidebar: './app/javascript/packs/vue/repository_item_error_sidebar.js',
   vue_components_action_toolbar: './app/javascript/packs/vue/action_toolbar.js',
   vue_components_open_vector_editor: './app/javascript/packs/vue/open_vector_editor.js',
   vue_navigation_breadcrumbs: './app/javascript/packs/vue/navigation/breadcrumbs.js',

From d3e5b66d67cedf5926dc46c0185b101690bca0bf Mon Sep 17 00:00:00 2001
From: sboursen-scinote <soufiane@scinote.net>
Date: Tue, 16 Apr 2024 11:51:04 +0200
Subject: [PATCH 2/2] Change error message wording and update logic [SCI-9506]

- Landing page is /repositories/:repository_id?landing_page=true&row_id=:repository_row_id
---
 app/controllers/repositories_controller.rb           |  1 +
 app/controllers/repository_rows_controller.rb        |  2 --
 .../packs/vue/repository_item_error_sidebar.js       |  2 --
 .../RepositoryItemErrorSidebar.vue                   |  4 ++--
 .../RepositoryItemSidebar.vue                        | 12 ++++++------
 app/views/repositories/show.html.erb                 |  4 ++--
 config/locales/en.yml                                |  2 +-
 7 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/app/controllers/repositories_controller.rb b/app/controllers/repositories_controller.rb
index eeef99cdd..113f5e80d 100644
--- a/app/controllers/repositories_controller.rb
+++ b/app/controllers/repositories_controller.rb
@@ -473,6 +473,7 @@ class RepositoriesController < ApplicationController
 
   def load_repository_row
     @repository_row = nil
+    @repository_row_landing_page = true if params[:landing_page].present?
     return if params[:row_id].blank?
 
     @repository_row = @repository.repository_rows.find_by(id: params[:row_id])
diff --git a/app/controllers/repository_rows_controller.rb b/app/controllers/repository_rows_controller.rb
index 236001f8a..a9c8b11e1 100644
--- a/app/controllers/repository_rows_controller.rb
+++ b/app/controllers/repository_rows_controller.rb
@@ -45,8 +45,6 @@ class RepositoryRowsController < ApplicationController
   def show
     respond_to do |format|
       format.html do
-        return redirect_to repository_path(@repository, row_id: @repository_row.id) if params[:show_card].present?
-
         redirect_to repository_path(@repository)
       end
 
diff --git a/app/javascript/packs/vue/repository_item_error_sidebar.js b/app/javascript/packs/vue/repository_item_error_sidebar.js
index b300655c9..ebe9a4c41 100644
--- a/app/javascript/packs/vue/repository_item_error_sidebar.js
+++ b/app/javascript/packs/vue/repository_item_error_sidebar.js
@@ -2,13 +2,11 @@
 
 import PerfectScrollbar from 'vue3-perfect-scrollbar';
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
-import { vOnClickOutside } from '@vueuse/components';
 import { mountWithTurbolinks } from './helpers/turbolinks.js';
 import RepositoryItemErrorSidebar from '../../vue/repository_item_sidebar/RepositoryItemErrorSidebar.vue';
 
 const app = createApp({});
 app.component('RepositoryItemErrorSidebar', RepositoryItemErrorSidebar);
 app.use(PerfectScrollbar);
-app.directive('click-outside', vOnClickOutside);
 app.config.globalProperties.i18n = window.I18n;
 mountWithTurbolinks(app, '#repositoryItemErrorSidebar');
diff --git a/app/javascript/vue/repository_item_sidebar/RepositoryItemErrorSidebar.vue b/app/javascript/vue/repository_item_sidebar/RepositoryItemErrorSidebar.vue
index 178a0a0f8..989b08331 100644
--- a/app/javascript/vue/repository_item_sidebar/RepositoryItemErrorSidebar.vue
+++ b/app/javascript/vue/repository_item_sidebar/RepositoryItemErrorSidebar.vue
@@ -13,11 +13,11 @@
             <i id="close-icon" @click="close"
               class="sn-icon sn-icon-close ml-auto cursor-pointer my-auto mx-0"></i>
           </div>
-          <div id="divider" class="w-500 bg-sn-light-grey flex items-center self-stretch h-px mt-6 mr-6"></div>
+          <div id="divider" class="bg-sn-light-grey flex items-center self-stretch h-px mt-6 mr-6"></div>
         </div>
         <div class="flex flex-col flex-1 justify-center items-center gap-1">
           <i class="sn-icon sn-icon-alert-warning text-sn-alert-passion"></i>
-          <span class="font-semibold leading-5">{{ i18n.t('repositories.item_card_errors.item_not_found') }}</span>
+          <h4 class="font-semibold text-lg">{{ i18n.t('repositories.item_card_errors.item_not_found') }}</h4>
         </div>
       </div>
     </div>
diff --git a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
index df6c923b7..353555ac2 100644
--- a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
+++ b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
@@ -22,7 +22,7 @@
             <i id="close-icon" @click="toggleShowHideSidebar(null)"
               class="sn-icon sn-icon-close ml-auto cursor-pointer my-auto mx-0"></i>
           </div>
-          <div id="divider" class="w-500 bg-sn-light-grey flex items-center self-stretch h-px mt-6 mr-6"></div>
+          <div id="divider" class="bg-sn-light-grey flex items-center self-stretch h-px mt-6 mr-6"></div>
         </div>
 
         <div ref="bodyWrapper" id="body-wrapper" class="overflow-y-auto overflow-x-hidden h-[calc(100%-78px)] pt-6 ">
@@ -122,7 +122,7 @@
                 </div>
               </section>
 
-              <div id="divider" class="w-500 bg-sn-light-grey flex items-center self-stretch h-px "></div>
+              <div id="divider" class="bg-sn-light-grey flex items-center self-stretch h-px "></div>
 
               <!-- CUSTOM COLUMNS, RELATIONSHIPS, ASSIGNED, QR CODE -->
               <div id="custom-col-assigned-qr-wrapper" class="flex flex-col gap-6">
@@ -138,7 +138,7 @@
                     :permissions="permissions" :updatePath="updatePath" :actions="actions" @update="update" />
                 </section>
 
-                <div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px"></div>
+                <div id="divider" class="bg-sn-light-grey flex px-8 items-center self-stretch h-px"></div>
 
                 <!-- RELATIONSHIPS -->
                 <section v-if="!repository?.is_snapshot" id="relationships-section" class="flex flex-col" ref="relationshipsSectionRef">
@@ -241,7 +241,7 @@
                   </div>
                 </section>
 
-                <div v-if="!repository?.is_snapshot" id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px"></div>
+                <div v-if="!repository?.is_snapshot" id="divider" class="bg-sn-light-grey flex px-8 items-center self-stretch h-px"></div>
 
                 <!-- ASSIGNED -->
                 <section v-if="!repository?.is_snapshot" id="assigned-section" class="flex flex-col" ref="assignedSectionRef">
@@ -292,7 +292,7 @@
                   </div>
                 </section>
 
-                <div v-if="!repository?.is_snapshot" id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px  "></div>
+                <div v-if="!repository?.is_snapshot" id="divider" class="bg-sn-light-grey flex px-8 items-center self-stretch h-px  "></div>
 
                 <!-- QR -->
                 <section id="qr-section" ref="QR-label">
@@ -318,7 +318,7 @@
           <!-- BOTTOM -->
           <div id="bottom" v-show="!dataLoading && !loadingError" class="h-[100px] flex flex-col justify-end mt-4 mr-6"
             :class="{ 'pb-6': customColumns?.length }">
-            <div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px mb-6"></div>
+            <div id="divider" class="bg-sn-light-grey flex px-8 items-center self-stretch h-px mb-6"></div>
             <div id="bottom-button-wrapper" class="flex h-10 justify-end">
               <button type="button" class="btn btn-primary print-label-button" data-e2e="e2e-BT-repoItemSB-print"
                 :data-rows="JSON.stringify([repositoryRowId])"
diff --git a/app/views/repositories/show.html.erb b/app/views/repositories/show.html.erb
index 677f9d774..78699964e 100644
--- a/app/views/repositories/show.html.erb
+++ b/app/views/repositories/show.html.erb
@@ -51,9 +51,9 @@
   </div>
 
   <!-- Inventory Item landing page link-->
-  <% if @repository_row %>
+  <% if @repository_row && @repository_row_landing_page %>
     <a id="itemLandingPagelink" href="<%= repository_repository_row_path(@repository, @repository_row) %>" class="hidden record-info-link"></a>
-  <% else %>
+  <% elsif @repository_row_landing_page %>
     <div id="repositoryItemErrorSidebar" data-behaviour="vue" class="fixed top-0 right-0 h-full z-[2039]">
       <repository-item-error-sidebar />
     </div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index a69032d00..a14fb99d1 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2268,7 +2268,7 @@ en:
     my_module_assigned_snapshot_service:
       invalid_arguments: "Can't find %{key}"
     item_card_errors:
-      item_not_found: "Inventory item you're looking for was deleted."
+      item_not_found: "Inventory item you're looking for doesn't exist."
     item_card:
       add_relationship_button_text: "Add"
       repository_item_relationships_modal: