Merge pull request #7779 from aignatov-bio/ai-sci-10924-add-actions-to-item-cards-locations

Add assign action to item cards locations [SCI-10924]

app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue

@@ -315,7 +315,7 @@
                 <div v-if="!repository?.is_snapshot" id="divider" class="bg-sn-light-grey flex px-8 items-center self-stretch h-px  "></div>
                 <!-- Locations -->
                 <section v-if="!repository?.is_snapshot" id="locations-section" ref="locationsSectionRef">
-                  <Locations :repositoryRow="repositoryRow" :repository="repository" />
+                  <Locations :repositoryRow="repositoryRow" :repository="repository" @reloadRow="reload" />
                 </section>
                 <div v-if="!repository?.is_snapshot" id="divider" class="bg-sn-light-grey flex px-8 items-center self-stretch h-px  "></div>
 

app/javascript/vue/repository_item_sidebar/locations.vue

@@ -2,7 +2,8 @@
   <div v-if="repositoryRow">
     <div class="flex items-center gap-4">
       <h4>{{ i18n.t('repositories.locations.title', { count: repositoryRow.storage_locations.locations.length }) }}</h4>
-      <button v-if="repositoryRow.permissions.can_manage && repositoryRow.storage_locations.enabled" class="btn btn-light">
+      <button v-if="repositoryRow.permissions.can_manage && repositoryRow.storage_locations.enabled"
+              @click="openAssignModal = true" class="btn btn-light ml-auto">
         {{ i18n.t('repositories.locations.assign') }}
       </button>
     </div>
@@ -12,8 +13,11 @@
         <div class="flex items-center gap-2 mb-3">
           {{ i18n.t('repositories.locations.container') }}:
           <a :href="containerUrl(location.id)">{{ location.name }}</a>
+          <span v-if="location.metadata.display_type !== 'grid'">
+            ({{ location.positions.length }})
+          </span>
         </div>
-        <div class="flex items-center gap-2 flex-wrap">
+        <div v-if="location.metadata.display_type === 'grid'" class="flex items-center gap-2 flex-wrap">
           <div v-for="(position) in location.positions" :key="position.id">
             <div v-if="position.metadata.position" class="flex items-center font-sm gap-1 uppercase bg-sn-grey-300 rounded pl-1.5 pr-2">
               {{ formatPosition(position.metadata.position) }}
@@ -23,10 +27,19 @@
         </div>
       </div>
     </template>
+    <Teleport to="body">
+      <AssignModal
+        v-if="openAssignModal"
+        assignMode="assign"
+        :selectedRow="repositoryRow.id"
+        @close="openAssignModal = false; $emit('reloadRow')"
+      ></AssignModal>
+    </Teleport>
   </div>
 </template>
 
 <script>
+import AssignModal from '../storage_locations/modals/assign.vue';
 import {
   storage_location_path
 } from '../../routes.js';
@@ -37,6 +50,14 @@ export default {
     repositoryRow: Object,
     repository: Object
   },
+  components: {
+    AssignModal
+  },
+  data() {
+    return {
+      openAssignModal: false
+    };
+  },
   methods: {
     containerUrl(id) {
       return storage_location_path(id);
@@ -48,7 +69,7 @@ export default {
       return '';
     },
     numberToLetter(number) {
-      return String.fromCharCode(97 + number);
+      return String.fromCharCode(96 + number);
     }
   }
 };

app/javascript/vue/storage_locations/container.vue

@@ -41,7 +41,6 @@
         :selectedPosition="assignToPosition"
         :selectedRow="rowIdToMove"
         :cellId="cellIdToUnassign"
-        :withGrid="withGrid"
         @close="openAssignModal = false; this.reloadingTable = true"
       ></AssignModal>
       <ConfirmationModal

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

@@ -18,7 +18,7 @@
             <RowSelector v-if="!selectedRow" @change="this.rowId = $event" class="mb-4"></RowSelector>
             <ContainerSelector v-if="!selectedContainer" @change="this.containerId = $event"></ContainerSelector>
             <PositionSelector
-              v-if="containerId && !selectedPosition && withGrid"
+              v-if="containerId && !selectedPosition"
               :key="containerId"
               :selectedContainerId="containerId"
               @change="this.position = $event"></PositionSelector>
@@ -56,7 +56,6 @@ export default {
     selectedContainer: Number,
     cellId: Number,
     selectedPosition: Array,
-    withGrid: Boolean,
     assignMode: String
   },
   mixins: [modalMixin],

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-2 gap-4 mb-4">
+  <div v-if="availablePositions" class="grid grid-cols-2 gap-4 mb-4">
     <div class="">
       <div class="sci-label">{{ i18n.t(`storage_locations.show.assign_modal.row`) }}</div>
       <SelectDropdown
@@ -39,12 +39,14 @@ export default {
     axios.get(this.positionsUrl)
       .then((response) => {
         this.availablePositions = response.data.positions;
-        this.$nextTick(() => {
-          [[this.selectedRow]] = this.availableRows;
+        if (this.availablePositions) {
           this.$nextTick(() => {
-            [[this.selectedColumn]] = this.availableColumns;
+            [[this.selectedRow]] = this.availableRows;
+            this.$nextTick(() => {
+              [[this.selectedColumn]] = this.availableColumns;
+            });
           });
-        });
+        }
       });
   },
   watch: {

app/models/repository_row.rb

@@ -178,10 +178,11 @@ class RepositoryRow < ApplicationRecord
   def grouped_storage_locations
     storage_location_repository_rows.joins(:storage_location).group(:storage_location_id).select(
       "storage_location_id as id,
+       (ARRAY_AGG(storage_locations.metadata))[1] as metadata,
        MAX(storage_locations.name) as name,
        jsonb_agg(jsonb_build_object(
-         'id', storage_location_repository_rows.id, 'metadata',
-         storage_location_repository_rows.metadata)
+         'id', storage_location_repository_rows.id,
+         'metadata', storage_location_repository_rows.metadata)
        ) as positions").as_json
   end
 

app/views/reports/templates/scinote_template/footer.html.erb

@@ -2,7 +2,7 @@
   .print-footer {
     line-height: 50px;
     font-size: 13px;
-    padding-right: 30px; 
+    padding-right: 30px;
     text-align: right;
     width: 100%;
   }