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

This commit is contained in:
Andrej 2024-08-01 16:42:33 +02:00
parent c544168115
commit 351aed9520
5 changed files with 33 additions and 34 deletions

View file

@ -98,20 +98,19 @@ export default {
if (this.query === '') {
return this.foldersTree;
}
return this.foldersTree.map((folder) => (
{
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
));
return this.filteredFoldersTreeHelper(this.foldersTree);
},
},
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;
},

View file

@ -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>

View file

@ -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: ''
};
},

View file

@ -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: {

View file

@ -6,43 +6,43 @@ import {
export default {
mounted() {
axios.get(this.storageLocationTreeUrl).then((response) => {
this.storageLocationTree = response.data;
axios.get(this.storageLocationsTreeUrl).then((response) => {
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) => (
{
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
));
return this.filteredStorageLocationsTreeHelper(this.storageLocationsTree);
}
},
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;
}