Add storage grid interactions [SCI-10922]

app/javascript/vue/shared/datatable/table.vue

@@ -580,8 +580,11 @@ export default {
         this.gridApi.forEachNode((node) => {
           if (this.selectedRows.find((row) => row.id === node.data.id)) {
             node.setSelected(true);
+          } else {
+            node.setSelected(false);
           }
         });
+        this.$emit('selectionChanged', this.selectedRows);
       }
     },
     setSelectedRows(e) {
@@ -594,6 +597,7 @@ export default {
       } else {
         this.selectedRows = this.selectedRows.filter((row) => row.id !== e.data.id);
       }
+      this.$emit('selectionChanged', this.selectedRows);
     },
     emitAction(action) {
       this.$emit(action.name, action, this.selectedRows);
@@ -605,6 +609,7 @@ export default {
     clickCell(e) {
       if (e.column.colId !== 'rowMenu' && e.column.userProvidedColDef.notSelectable !== true) {
         e.node.setSelected(true);
+        this.$emit('selectionChanged', this.selectedRows);
       }
     },
     applyFilters(filters) {

app/javascript/vue/storage_locations/container.vue

@@ -9,7 +9,13 @@
           </button>
         </div>
       </div>
-      <Grid :gridSize="gridSize" :assignedItems="assignedItems" @assign="assignRowToPosition"/>
+      <Grid
+        :gridSize="gridSize"
+        :assignedItems="assignedItems"
+        :selectedItems="selectedItems"
+        @assign="assignRowToPosition"
+        @select="selectRow"
+      />
     </div>
     <div class="h-full bg-white p-4">
       <DataTable :columnDefs="columnDefs"
@@ -24,6 +30,7 @@
                 @move="moveRow"
                 @unassign="unassignRows"
                 @tableReloaded="handleTableReload"
+                @selectionChanged="selectedItems = $event"
       />
     </div>
     <Teleport to="body">
@@ -93,6 +100,7 @@ export default {
       objectToMove: null,
       moveToUrl: null,
       assignedItems: [],
+      selectedItems: [],
       openAssignModal: false,
       assignToPosition: null,
       assignToContainer: null,
@@ -106,6 +114,7 @@ export default {
     paginationMode() {
       return this.withGrid ? 'none' : 'pages';
     },
+
     columnDefs() {
       const columns = [{
         field: 'position',
@@ -161,6 +170,14 @@ export default {
       this.reloadingTable = false;
       this.assignedItems = items;
     },
+    selectRow(row) {
+      if (this.$refs.table.selectedRows.includes(row)) {
+        this.$refs.table.selectedRows = this.$refs.table.selectedRows.filter((r) => r !== row);
+      } else {
+        this.$refs.table.selectedRows.push(row);
+      }
+      this.$refs.table.restoreSelection();
+    },
     assignRow() {
       this.openAssignModal = true;
       this.rowIdToMove = null;

app/javascript/vue/storage_locations/grid.vue

@@ -25,13 +25,21 @@
           >
             <div
               class="h-full w-full rounded-full items-center flex justify-center"
-              @click="assignRow(cell.row, cell.column)"
+              @click="assignRow(cell)"
               :class="{
-                'bg-sn-background-green': cellIsOccupied(cell.row, cell.column),
-                'bg-white cursor-pointer': !cellIsOccupied(cell.row, cell.column)
+                'bg-sn-background-green': cellIsOccupied(cell),
+                'bg-sn-grey-100': cellIsHidden(cell),
+                'bg-white': cellIsAvailable(cell),
+                'bg-white border-sn-science-blue border-solid border-[1px]': cellIsSelected(cell),
+                'cursor-pointer': !cellIsHidden(cell)
               }"
             >
-              {{ rowsList[cell.row] }}{{ columnsList[cell.column] }}
+              <template v-if="cellIsHidden(cell)">
+                <i class="sn-icon sn-icon-locked-task"></i>
+              </template>
+              <template v-else>
+                {{ rowsList[cell.row] }}{{ columnsList[cell.column] }}
+              </template>
             </div>
           </div>
         </div>
@@ -51,6 +59,10 @@ export default {
     assignedItems: {
       type: Array,
       default: () => []
+    },
+    selectedItems: {
+      type: Array,
+      default: () => []
     }
   },
   mounted() {
@@ -79,14 +91,32 @@ export default {
     }
   },
   methods: {
-    cellIsOccupied(row, column) {
-      return this.assignedItems.some((item) => item.position[0] === row + 1 && item.position[1] === column + 1);
+    cellObject(cell) {
+      return this.assignedItems.find((item) => item.position[0] === cell.row + 1 && item.position[1] === cell.column + 1);
     },
-    assignRow(row, column) {
-      if (this.cellIsOccupied(row, column)) {
+    cellIsOccupied(cell) {
+      return this.cellObject(cell) && !this.cellObject(cell)?.hidden;
+    },
+    cellIsHidden(cell) {
+      return this.cellObject(cell)?.hidden;
+    },
+    cellIsSelected(cell) {
+      return this.selectedItems.some((item) => item.position[0] === cell.row + 1 && item.position[1] === cell.column + 1);
+    },
+    cellIsAvailable(cell) {
+      return !this.cellIsOccupied(cell) && !this.cellIsHidden(cell);
+    },
+    assignRow(cell) {
+      if (this.cellIsOccupied(cell)) {
+        this.$emit('select', this.cellObject(cell));
         return;
       }
-      this.$emit('assign', [row + 1, column + 1]);
+
+      if (this.cellIsHidden(cell)) {
+        return;
+      }
+
+      this.$emit('assign', [cell.row + 1, cell.column + 1]);
     },
     handleScroll() {
       this.$refs.columnsContainer.scrollLeft = this.$refs.cellsContainer.scrollLeft;

app/serializers/lists/storage_location_repository_row_serializer.rb

@@ -2,18 +2,20 @@
 
 module Lists
   class StorageLocationRepositoryRowSerializer < ActiveModel::Serializer
-    attributes :created_by, :created_on, :position, :row_id, :row_name
+    include Canaid::Helpers::PermissionsHelper
+
+    attributes :created_by, :created_on, :position, :row_id, :row_name, :hidden
 
     def row_id
-      object.repository_row.id
+      object.repository_row.id unless hidden
     end
 
     def row_name
-      object.repository_row.name
+      object.repository_row.name unless hidden
     end
 
     def created_by
-      object.created_by.full_name
+      object.created_by.full_name unless hidden
     end
 
     def created_on
@@ -23,5 +25,9 @@ module Lists
     def position
       object.metadata['position']
     end
+
+    def hidden
+      !can_read_repository?(object.repository_row.repository)
+    end
   end
 end