Merge pull request #7329 from sboursen-scinote/sb_SCI-9506

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,14 @@ class RepositoriesController < ApplicationController
     @repositories = current_team.repositories.archived.where(id: params[:repository_ids])
   end
 
+  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])
+  end
+
   def set_inline_name_editing
     return unless can_manage_repository?(@repository)
 

app/javascript/packs/vue/repository_item_error_sidebar.js

@@ -0,0 +1,12 @@
+/* global */
+
+import PerfectScrollbar from 'vue3-perfect-scrollbar';
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
+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.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="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>
+          <h4 class="font-semibold text-lg">{{ i18n.t('repositories.item_card_errors.item_not_found') }}</h4>
+        </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/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue

@@ -22,7 +22,7 @@
             <i id="close-icon" data-e2e="e2e-BT-itemCard-close" @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-itemCard-print"
                 :data-rows="JSON.stringify([repositoryRowId])"

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 && @repository_row_landing_page %>
+    <a id="itemLandingPagelink" href="<%= repository_repository_row_path(@repository, @repository_row) %>" class="hidden record-info-link"></a>
+  <% 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>
+  <% 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

@@ -2309,6 +2309,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 doesn't exist."
     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',