mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-10-03 10:24:30 +08:00
Fix searching through tree for location and folders [SCI-10816]
This commit is contained in:
parent
c544168115
commit
351aed9520
5 changed files with 33 additions and 34 deletions
|
@ -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;
|
||||
},
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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: ''
|
||||
};
|
||||
},
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue