Merge pull request #7855 from aignatov-bio/ai-sci-11047-add-sorting-to-list-of-locations

Add repository item card to storage container [SCI-11048]

app/javascript/packs/vue/storage_locations_container.js

@@ -7,4 +7,4 @@ const app = createApp();
 app.component('StorageLocationsContainer', StorageLocationsContainer);
 app.config.globalProperties.i18n = window.I18n;
 app.use(PerfectScrollbar);
-mountWithTurbolinks(app, '#StorageLocationsContainer');
+window.StorageLocationsContainer = mountWithTurbolinks(app, '#StorageLocationsContainer');

app/javascript/vue/repository_item_sidebar/Title.vue

@@ -3,7 +3,7 @@
     :characterMinLimit="0" :allowBlank="false" :smartAnnotation="false"
     :preventLeavingUntilFilled="true"
     :attributeName="`${i18n.t('repositories.item_card.header_title')}`" :singleLine="true"
-    @editingEnabled="editingName = true" @editingDisabled="editingName = false" @update="updateName" @delete="handleDelete"></inline-edit>
+    @editingEnabled="editingName = true" @editingDisabled="editingName = false" @update="updateName"></inline-edit>
   <h4 v-else class="item-name my-auto truncate text-xl" :title="computedName">
     {{ computedName }}
   </h4>

app/javascript/vue/repository_item_sidebar/locations.vue

@@ -22,7 +22,9 @@
           <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) }}
-              <i v-if="repositoryRow.permissions.can_manage" class="sn-icon sn-icon-unlink-italic-s cursor-pointer"></i>
+              <i v-if="repositoryRow.permissions.can_manage"
+                 @click="unassignRow(location.id, position.id)"
+                 class="sn-icon sn-icon-unlink-italic-s cursor-pointer"></i>
             </div>
           </div>
         </div>
@@ -41,8 +43,11 @@
 
 <script>
 import AssignModal from '../storage_locations/modals/assign.vue';
+import axios from '../../packs/custom_axios.js';
+
 import {
-  storage_location_path
+  storage_location_path,
+  unassign_rows_storage_location_path
 } from '../../routes.js';
 
 export default {
@@ -71,6 +76,15 @@ export default {
     },
     numberToLetter(number) {
       return String.fromCharCode(96 + number);
+    },
+    unassignRow(locationId, rowId) {
+      axios.post(unassign_rows_storage_location_path({ id: locationId }), { ids: [rowId] })
+        .then(() => {
+          this.$emit('reloadRow');
+          if (window.StorageLocationsContainer) {
+            window.StorageLocationsContainer.$refs.container.reloadingTable = true;
+          }
+        });
     }
   }
 };

app/javascript/vue/storage_locations/container.vue

@@ -63,6 +63,7 @@ import AssignModal from './modals/assign.vue';
 import ImportModal from './modals/import.vue';
 import ConfirmationModal from '../shared/confirmation_modal.vue';
 import RemindersRender from './renderers/reminders.vue';
+import ItemNameRenderer from './renderers/item_name_renderer.vue';
 
 export default {
   name: 'StorageLocationsContainer',
@@ -72,7 +73,8 @@ export default {
     AssignModal,
     ConfirmationModal,
     RemindersRender,
-    ImportModal
+    ImportModal,
+    ItemNameRenderer
   },
   props: {
     canManage: {
@@ -144,7 +146,7 @@ export default {
         field: 'row_name',
         headerName: this.i18n.t('storage_locations.show.table.row_name'),
         sortable: true,
-        cellRenderer: this.rowNameRenderer
+        cellRenderer: ItemNameRenderer
       },
       {
         field: 'stock',
@@ -182,16 +184,8 @@ export default {
     }
   },
   methods: {
-    rowNameRenderer(params) {
-      const { row_name: rowName, hidden } = params.data;
-      if (hidden) {
-        return `
-          <span class="text-sn-grey-700">
-            <i class="sn-icon sn-icon-locked-task"></i> ${this.i18n.t('storage_locations.show.hidden')}
-          </span>
-        `;
-      }
-      return rowName;
+    updateTable() {
+      this.reloadingTable = true;
     },
     handleTableReload(items) {
       this.reloadingTable = false;

app/javascript/vue/storage_locations/renderers/item_name_renderer.vue

@@ -0,0 +1,26 @@
+<template>
+  <span>
+    <span v-if="params.data.hidden" class="text-sn-grey-700">
+      <i class="sn-icon sn-icon-locked-task"></i>
+      {{ i18n.t('storage_locations.show.hidden') }}
+    </span>
+    <a
+      :href="params.data.row_url"
+      class="record-info-link"
+      :title="params.data.row_name"
+    >
+      {{ params.data.row_name }}
+    </a>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'ItemNameRenderer',
+  props: {
+    params: {
+      required: true
+    }
+  }
+};
+</script>

app/serializers/lists/storage_location_repository_row_serializer.rb

@@ -6,7 +6,7 @@ module Lists
     include Rails.application.routes.url_helpers
 
     attributes :created_by, :created_on, :position, :row_id, :row_name, :hidden, :position_formatted, :stock,
-               :have_reminders, :reminders_url
+               :have_reminders, :reminders_url, :row_url
 
     def row_id
       object.repository_row.code
@@ -38,6 +38,10 @@ module Lists
       end
     end
 
+    def row_url
+      repository_repository_row_path(object.repository_row.repository, object.repository_row)
+    end
+
     def hidden
       !can_read_repository?(object.repository_row.repository)
     end

app/views/storage_locations/show.html.erb

@@ -11,6 +11,7 @@
     <div class="content-body" data-e2e="e2e-CO-storageLocations-box">
       <div id="StorageLocationsContainer" class="fixed-content-body">
         <storage-locations-container
+          ref="container"
           actions-url="<%= actions_toolbar_storage_location_storage_location_repository_rows_path(@storage_location) %>"
           data-source="<%= storage_location_storage_location_repository_rows_path(@storage_location)  %>"
           :can-manage="<%= can_manage_storage_location?(@storage_location) %>"