Merge pull request #7785 from aignatov-bio/ai-sci-10959-fix-css-for-storage-locations

Fix css for storage locations [SCI-10959]

app/javascript/vue/storage_locations/container.vue

@@ -1,14 +1,6 @@
 <template>
-  <div class="grid w-full h-full gap-6" :class="{ 'grid-cols-2': withGrid }">
-    <div v-if="withGrid">
-      <div class="py-4">
-        <div class="h-11">
-          <button class="btn btn-primary" @click="assignRow" data-e2e="e2e-BT-topToolbar-locations-assignItem">
-            <i class="sn-icon sn-icon-new-task"></i>
-            {{ i18n.t('storage_locations.show.toolbar.assign') }}
-          </button>
-        </div>
-      </div>
+  <div class="grid w-full h-full gap-6" :class="{ 'grid-cols-[auto_1fr]': withGrid }">
+    <div v-if="withGrid" class="max-w-[40vw]">
       <Grid
         :gridSize="gridSize"
         :assignedItems="assignedItems"
@@ -17,7 +9,7 @@
         @select="selectRow"
       />
     </div>
-    <div class="h-full bg-white p-4">
+    <div class="h-full bg-white px-4">
       <DataTable :columnDefs="columnDefs"
                 tableId="StorageLocationsContainer"
                 :dataUrl="dataSource"
@@ -148,15 +140,13 @@ export default {
     toolbarActions() {
       const left = [];
 
-      if (!this.withGrid) {
-        left.push({
-          name: 'assign',
-          icon: 'sn-icon sn-icon-new-task',
-          label: this.i18n.t('storage_locations.show.toolbar.assign'),
-          type: 'emit',
-          buttonStyle: 'btn btn-primary'
-        });
-      }
+      left.push({
+        name: 'assign',
+        icon: 'sn-icon sn-icon-new-task',
+        label: this.i18n.t('storage_locations.show.toolbar.assign'),
+        type: 'emit',
+        buttonStyle: 'btn btn-primary'
+      });
 
       return {
         left,

app/javascript/vue/storage_locations/grid.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="grid grid-cols-[1.5rem_auto] grid-rows-[1.5rem_auto] overflow-hidden">
     <div class="z-10 bg-sn-super-light-grey"></div>
-    <div ref="columnsContainer" class="overflow-x-hidden overflow-y-scroll">
+    <div ref="columnsContainer" class="overflow-x-hidden">
       <div :style="{'width': `${columnsList.length * 54}px`}">
         <div v-for="column in columnsList" :key="column" class="uppercase float-left flex items-center justify-center w-[54px] ">
           <span>{{ column }}</span>
         </div>
       </div>
     </div>
-    <div ref="rowContainer" class="overflow-y-hidden overflow-x-scroll max-h-[70vh]">
+    <div ref="rowContainer" class="overflow-y-hidden max-h-[70vh]">
       <div v-for="row in rowsList" :key="row" class="uppercase flex items-center justify-center h-[54px]">
         <span>{{ row }}</span>
       </div>
     </div>
-    <div ref="cellsContainer" class="overflow-scroll max-h-[70vh]">
+    <div ref="cellsContainer" class="overflow-hidden max-h-[70vh] relative">
       <div class="grid" :style="{
         'grid-template-columns': `repeat(${columnsList.length}, 1fr)`,
         'width': `${columnsList.length * 54}px`
@@ -49,6 +49,7 @@
 </template>
 
 <script>
+/* global PerfectScrollbar */
 export default {
   name: 'StorageLocationsGrid',
   props: {
@@ -65,9 +66,15 @@ export default {
       default: () => []
     }
   },
+  data() {
+    return {
+      scrollBar: null
+    };
+  },
   mounted() {
     this.$refs.cellsContainer.addEventListener('scroll', this.handleScroll);
     window.addEventListener('resize', this.handleScroll);
+    this.scrollBar = new PerfectScrollbar(this.$refs.cellsContainer, { wheelSpeed: 0.5, minScrollbarLength: 20 });
   },
   beforeUnmount() {
     this.$refs.cellsContainer.removeEventListener('scroll', this.handleScroll);
@@ -122,6 +129,10 @@ export default {
       this.$refs.columnsContainer.scrollLeft = this.$refs.cellsContainer.scrollLeft;
       this.$refs.rowContainer.scrollTop = this.$refs.cellsContainer.scrollTop;
 
+      if (this.$refs.cellsContainer.scrollLeft > this.$refs.columnsContainer.scrollLeft) {
+        this.$refs.cellsContainer.scrollLeft = this.$refs.columnsContainer.scrollLeft;
+      }
+
       if (this.$refs.rowContainer.scrollTop > 0) {
         this.$refs.columnsContainer.style.boxShadow = '0px 0px 20px 0px rgba(16, 24, 40, 0.20)';
       } else {

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

@@ -18,7 +18,11 @@
         <i class="sn-icon sn-icon-projects"></i>
         {{ i18n.t('storage_locations.index.move_modal.search_header') }}
       </div>
-      <MoveTree :storageLocationsTree="filteredStorageLocationsTree" :value="selectedStorageLocationId" @selectStorageLocation="selectStorageLocation" />
+      <MoveTree
+        :storageLocationsTree="filteredStorageLocationsTree"
+        :moveMode="moveMode"
+        :value="selectedStorageLocationId"
+        @selectStorageLocation="selectStorageLocation" />
     </div>
   </div>
 </template>
@@ -31,7 +35,8 @@ export default {
   mixins: [MoveTreeMixin],
   data() {
     return {
-      container: true
+      container: true,
+      moveMode: 'containers'
     };
   },
   watch: {

app/javascript/vue/storage_locations/modals/move.vue

@@ -31,7 +31,11 @@
                 <i class="sn-icon sn-icon-projects"></i>
                 {{ i18n.t('storage_locations.index.move_modal.search_header') }}
               </div>
-              <MoveTree :storageLocationsTree="filteredStorageLocationsTree" :value="selectedStorageLocationId" @selectStorageLocation="selectStorageLocation" />
+              <MoveTree
+                :storageLocationsTree="filteredStorageLocationsTree"
+                :moveMode="moveMode"
+                :value="selectedStorageLocationId"
+                @selectStorageLocation="selectStorageLocation" />
             </div>
           </div>
           <div class="modal-footer">
@@ -64,7 +68,8 @@ export default {
     return {
       selectedStorageLocationId: null,
       storageLocationsTree: [],
-      query: ''
+      query: '',
+      moveMode: 'locations'
     };
   },
   methods: {

app/javascript/vue/storage_locations/modals/move_tree.vue

@@ -8,10 +8,14 @@
          @click="opendedStorageLocations[storageLocationTree.storage_location.id] = !opendedStorageLocations[storageLocationTree.storage_location.id]"
          class="sn-icon p-2 pr-1 cursor-pointer"></i>
       <i v-else class="sn-icon sn-icon-up p-2 pr-1 opacity-0"></i>
-      <div @click="$emit('selectStorageLocation', storageLocationTree.storage_location.id)"
-           class="cursor-pointer flex items-center pl-1 flex-1 gap-2
-                text-sn-blue hover:bg-sn-super-light-grey"
-          :class="{'!bg-sn-super-light-blue': storageLocationTree.storage_location.id == value}">
+      <div @click="selectStorageLocation(storageLocationTree)"
+           class="flex items-center pl-1 flex-1 gap-2"
+           :class="{
+             '!bg-sn-super-light-blue': storageLocationTree.storage_location.id == value,
+             'text-sn-blue cursor-pointer hover:bg-sn-super-light-grey': (
+               moveMode === 'locations' || storageLocationTree.storage_location.container
+             )
+          }">
         <i v-if="storageLocationTree.storage_location.container" class="sn-icon sn-icon-item"></i>
         <div class="flex-1 truncate p-2 pl-0" :title="storageLocationTree.storage_location.name">
           {{ storageLocationTree.storage_location.name }}
@@ -21,6 +25,7 @@
     <MoveTree v-if="opendedStorageLocations[storageLocationTree.storage_location.id]"
               :storageLocationsTree="storageLocationTree.children"
               :value="value"
+              :moveMode="moveMode"
               @selectStorageLocation="$emit('selectStorageLocation', $event)" />
   </div>
 </template>
@@ -31,7 +36,8 @@ export default {
   emits: ['selectStorageLocation'],
   props: {
     storageLocationsTree: Array,
-    value: Number
+    value: Number,
+    moveMode: String
   },
   components: {
     MoveTree: () => import('./move_tree.vue')
@@ -40,6 +46,13 @@ export default {
     return {
       opendedStorageLocations: {}
     };
+  },
+  methods: {
+    selectStorageLocation(storageLocationTree) {
+      if (this.moveMode === 'locations' || storageLocationTree.storage_location.container) {
+        this.$emit('selectStorageLocation', storageLocationTree.storage_location.id);
+      }
+    }
   }
 };
 </script>

config/locales/en.yml

@@ -2680,6 +2680,7 @@ en:
     container: 'box'
     location: 'location'
     show:
+      hidden: "Private item"
       table:
         position: "Position"
         reminders: "Reminders"