Fix assign modal storage locations item card interactions [SCI-11141]

app/helpers/storage_locations_helper.rb

@@ -1,5 +1,7 @@
 module StorageLocationsHelper
   def storage_locations_placeholder
+    return if StorageLocation.storage_locations_enabled?
+
     "<div class=\"p-4 rounded bg-sn-super-light-blue\">
       #{I18n.t('storage_locations.storage_locations_disabled')}
     </div>"

app/javascript/vue/repository_item_sidebar/locations.vue

@@ -7,7 +7,10 @@
         {{ i18n.t('repositories.locations.assign') }}
       </button>
     </div>
-    <template v-if="repositoryRow.storage_locations.enabled" v-for="(location, index) in repositoryRow.storage_locations.locations" :key="location.id">
+    <div class="mb-4">
+      <div v-html="repositoryRow.storage_locations.placeholder"></div>
+    </div>
+    <template v-for="(location, index) in repositoryRow.storage_locations.locations" :key="location.id">
       <div>
         <div class="sci-divider my-4" v-if="index > 0"></div>
         <div class="flex gap-2 mb-3">
@@ -30,14 +33,12 @@
         </div>
       </div>
     </template>
-    <div v-else>
-      <div v-html="repositoryRow.storage_locations.placeholder"></div>
-    </div>
     <Teleport to="body">
       <AssignModal
         v-if="openAssignModal"
         assignMode="assign"
         :selectedRow="repositoryRow.id"
+        :selectedRowName="repositoryRow.default_columns.name"
         @close="openAssignModal = false; $emit('reloadRow'); reloadStorageLocations()"
       ></AssignModal>
       <ConfirmationModal

app/javascript/vue/storage_locations/modals/assign.vue

@@ -10,12 +10,18 @@
             <h4 v-if="selectedPosition" class="modal-title truncate !block">
               {{ i18n.t(`storage_locations.show.assign_modal.selected_position_title`, { position: formattedPosition }) }}
             </h4>
+            <h4 v-else-if="selectedRow && selectedRowName" class="modal-title truncate !block">
+              {{ i18n.t(`storage_locations.show.assign_modal.selected_row_title`) }}
+            </h4>
             <h4 v-else class="modal-title truncate !block">
               {{ i18n.t(`storage_locations.show.assign_modal.${assignMode}_title`) }}
             </h4>
           </div>
           <div class="modal-body">
-            <p class="mb-4">
+            <p v-if="selectedRow && selectedRowName" class="mb-4">
+              {{ i18n.t(`storage_locations.show.assign_modal.selected_row_description`, { name: selectedRowName }) }}
+            </p>
+            <p v-else class="mb-4">
               {{ i18n.t(`storage_locations.show.assign_modal.${assignMode}_description`) }}
             </p>
             <RowSelector v-if="!selectedRow" @change="this.rowId = $event" class="mb-4"></RowSelector>
@@ -56,6 +62,7 @@ export default {
   name: 'NewProjectModal',
   props: {
     selectedRow: Number,
+    selectedRowName: String,
     selectedContainer: Number,
     cellId: Number,
     selectedPosition: Array,

app/javascript/vue/storage_locations/modals/assign/container_selector.vue

@@ -1,29 +1,33 @@
 <template>
-  <div>
-    <div class="mb-4">
-      <div class="sci-input-container-v2 left-icon">
-        <input type="text"
-                v-model="query"
-                class="sci-input-field"
-                ref="input"
-                autofocus="true"
-                :placeholder=" i18n.t('storage_locations.index.move_modal.placeholder.find_storage_locations')" />
-        <i class="sn-icon sn-icon-search"></i>
+  <div v-if="dataLoaded">
+    <div v-if="storageLocationsTree.length > 0">
+      <div class="mb-4">
+        <div class="sci-input-container-v2 left-icon">
+          <input type="text"
+                  v-model="query"
+                  class="sci-input-field"
+                  ref="input"
+                  autofocus="true"
+                  :placeholder=" i18n.t('storage_locations.index.move_modal.placeholder.find_storage_locations')" />
+          <i class="sn-icon sn-icon-search"></i>
+        </div>
+      </div>
+      <div class="max-h-80 overflow-y-auto">
+        <div class="p-2 flex items-center gap-2 cursor-pointer text-sn-blue hover:bg-sn-super-light-grey"
+              @click="selectStorageLocation(null)"
+              :class="{'!bg-sn-super-light-blue': selectedStorageLocationId == null}">
+          <i class="sn-icon sn-icon-projects"></i>
+          {{ i18n.t('storage_locations.index.move_modal.search_header') }}
+        </div>
+        <MoveTree
+          :storageLocationsTree="filteredStorageLocationsTree"
+          :moveMode="moveMode"
+          :value="selectedStorageLocationId"
+          @selectStorageLocation="selectStorageLocation" />
+
       </div>
     </div>
-    <div class="max-h-80 overflow-y-auto">
-      <div class="p-2 flex items-center gap-2 cursor-pointer text-sn-blue hover:bg-sn-super-light-grey"
-            @click="selectStorageLocation(null)"
-            :class="{'!bg-sn-super-light-blue': selectedStorageLocationId == null}">
-        <i class="sn-icon sn-icon-projects"></i>
-        {{ i18n.t('storage_locations.index.move_modal.search_header') }}
-      </div>
-      <MoveTree
-        :storageLocationsTree="filteredStorageLocationsTree"
-        :moveMode="moveMode"
-        :value="selectedStorageLocationId"
-        @selectStorageLocation="selectStorageLocation" />
-    </div>
+    <div v-else class="py-2 text-sn-dark-grey" v-html="i18n.t('storage_locations.index.move_modal.no_results')"></div>
   </div>
 </template>
 

app/javascript/vue/storage_locations/modals/assign/position_selector.vue

@@ -63,15 +63,23 @@ export default {
       return available_positions_storage_location_path(this.selectedContainerId);
     },
     availableRows() {
+      if (!this.availablePositions) {
+        return [];
+      }
+
       return Object.keys(this.availablePositions).map((row) => [row, this.convertNumberToLetter(row)]);
     },
     availableColumns() {
+      if (!this.availablePositions) {
+        return [];
+      }
+
       return (this.availablePositions[this.selectedRow] || []).map((col) => [col, col]);
     }
   },
   data() {
     return {
-      availablePositions: {},
+      availablePositions: null,
       selectedRow: null,
       selectedColumn: null
     };

app/javascript/vue/storage_locations/modals/move_tree_mixin.js

@@ -8,13 +8,15 @@ export default {
   mounted() {
     axios.get(this.storageLocationsTreeUrl).then((response) => {
       this.storageLocationsTree = response.data;
+      this.dataLoaded = true;
     });
   },
   data() {
     return {
       selectedStorageLocationId: null,
       storageLocationsTree: [],
-      query: ''
+      query: '',
+      dataLoaded: false
     };
   },
   computed: {

config/locales/en.yml

@@ -2692,10 +2692,12 @@ en:
         button: 'Unassign'
       assign_modal:
         selected_position_title: 'Assign to position %{position}'
+        selected_row_title: 'Assign new location'
         assign_title: 'Assign position'
         move_title: 'Move item'
         assign_description: 'Select an item to assign it to a location.'
         move_description: 'Select a new location for your item.'
+        selected_row_description: "Select a location for the item %{name}."
         assign_action: 'Assign'
         move_action: 'Move'
         row: 'Row'
@@ -2772,6 +2774,7 @@ en:
         title: 'Move %{name}'
         description: 'Select where you want to move %{name}.'
         search_header: 'Locations'
+        no_results: "You haven't created any storage locations and boxes yet.<br> Go to <b>Inventories > Locations</b> and create your location structure first to assign items to locations."
         success_flash: "You have successfully moved the selected location/box to another location."
         error_flash: "An error occurred. The selected location/box has not been moved."
         placeholder: