Fix searching through tree for location and folders [SCI-10816]

app/javascript/vue/projects/modals/move.vue

@@ -98,20 +98,19 @@ export default {
       if (this.query === '') {
         return this.foldersTree;
       }
-      return this.foldersTree.map((folder) => (
+      return this.filteredFoldersTreeHelper(this.foldersTree);
-        {
-          folder: folder.folder,
-          children: folder.children.filter((child) => (
-            child.folder.name.toLowerCase().includes(this.query.toLowerCase())
-          )),
-        }
-      )).filter((folder) => (
-        folder.folder.name.toLowerCase().includes(this.query.toLowerCase())
-        || folder.children.length > 0
-      ));
     },
   },
   methods: {
+    filteredFoldersTreeHelper(foldersTree) {
+      return foldersTree.map(({ folder, children }) => {
+        if (folder.name.toLowerCase().includes(this.query.toLowerCase())) {
+          return { folder, children };
+        }
+        const filteredChildren = this.filteredFoldersTreeHelper(children);
+        return filteredChildren.length ? { folder, children: filteredChildren } : null;
+      }).filter(Boolean);
+    },
     selectFolder(folderId) {
       this.selectedFolderId = folderId;
     },

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

@@ -18,7 +18,7 @@
         <i class="sn-icon sn-icon-projects"></i>
         {{ i18n.t('storage_locations.index.move_modal.search_header') }}
       </div>
-      <MoveTree :storageLocationTrees="filteredStorageLocationTree" :value="selectedStorageLocationId" @selectStorageLocation="selectStorageLocation" />
+      <MoveTree :storageLocationsTree="filteredStorageLocationsTree" :value="selectedStorageLocationId" @selectStorageLocation="selectStorageLocation" />
     </div>
   </div>
 </template>

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

@@ -31,7 +31,7 @@
                 <i class="sn-icon sn-icon-projects"></i>
                 {{ i18n.t('storage_locations.index.move_modal.search_header') }}
               </div>
-              <MoveTree :storageLocationTrees="filteredStorageLocationTree" :value="selectedStorageLocationId" @selectStorageLocation="selectStorageLocation" />
+              <MoveTree :storageLocationsTree="filteredStorageLocationsTree" :value="selectedStorageLocationId" @selectStorageLocation="selectStorageLocation" />
             </div>
           </div>
           <div class="modal-footer">
@@ -63,7 +63,7 @@ export default {
   data() {
     return {
       selectedStorageLocationId: null,
-      storageLocationTree: [],
+      storageLocationsTree: [],
       query: ''
     };
   },

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="pl-6" v-if="storageLocationTrees.length" v-for="storageLocationTree in storageLocationTrees"
+  <div class="pl-6" v-if="storageLocationsTree.length" v-for="storageLocationTree in storageLocationsTree"
        :key="storageLocationTree.storage_location.id">
     <div class="flex items-center">
       <i v-if="storageLocationTree.children.length > 0"
@@ -19,7 +19,7 @@
       </div>
     </div>
     <MoveTree v-if="opendedStorageLocations[storageLocationTree.storage_location.id]"
-              :storageLocationTrees="storageLocationTree.children"
+              :storageLocationsTree="storageLocationTree.children"
               :value="value"
               @selectStorageLocation="$emit('selectStorageLocation', $event)" />
   </div>
@@ -30,7 +30,7 @@ export default {
   name: 'MoveTree',
   emits: ['selectStorageLocation'],
   props: {
-    storageLocationTrees: Array,
+    storageLocationsTree: Array,
     value: Number
   },
   components: {

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

@@ -6,43 +6,43 @@ import {
 
 export default {
   mounted() {
-    axios.get(this.storageLocationTreeUrl).then((response) => {
+    axios.get(this.storageLocationsTreeUrl).then((response) => {
-      this.storageLocationTree = response.data;
+      this.storageLocationsTree = response.data;
     });
   },
   data() {
     return {
       selectedStorageLocationId: null,
-      storageLocationTree: [],
+      storageLocationsTree: [],
       query: ''
     };
   },
   computed: {
-    storageLocationTreeUrl() {
+    storageLocationsTreeUrl() {
       return tree_storage_locations_path({ format: 'json', container: this.container });
     },
-    filteredStorageLocationTree() {
+    filteredStorageLocationsTree() {
       if (this.query === '') {
-        return this.storageLocationTree;
+        return this.storageLocationsTree;
       }
 
-      return this.storageLocationTree.map((storageLocation) => (
+      return this.filteredStorageLocationsTreeHelper(this.storageLocationsTree);
-        {
-          storage_location: storageLocation.storage_location,
-          children: storageLocation.children.filter((child) => (
-            child.storage_location.name.toLowerCase().includes(this.query.toLowerCase())
-          ))
-        }
-      )).filter((storageLocation) => (
-        storageLocation.storage_location.name.toLowerCase().includes(this.query.toLowerCase())
-        || storageLocation.children.length > 0
-      ));
     }
   },
   components: {
     MoveTree
   },
   methods: {
+    filteredStorageLocationsTreeHelper(storageLocationsTree) {
+      return storageLocationsTree.map(({ storage_location, children }) => {
+        if (storage_location.name.toLowerCase().includes(this.query.toLowerCase())) {
+          return { storage_location, children };
+        }
+
+        const filteredChildren = this.filteredStorageLocationsTreeHelper(children);
+        return filteredChildren.length ? { storage_location, children: filteredChildren } : null;
+      }).filter(Boolean);
+    },
     selectStorageLocation(storageLocationId) {
       this.selectedStorageLocationId = storageLocationId;
     }