Add inventory items landing page [SCI-9506]

app/assets/javascripts/sitewide/repository_row_card.js

@@ -104,4 +104,8 @@
       }
     }
   });
+
+  $(document).on('turbolinks:load', () => {
+    $('#itemLandingPagelink').trigger('click');
+  });
 }());

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)
 

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
 

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');

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>

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' %>

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:

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',