118 lines
3 KiB
Vue
118 lines
3 KiB
Vue
<template>
|
|
<div class="FolderTree">
|
|
<div v-for="(folder, i) in directories" :key="i">
|
|
<a :class="folder.id == selectedId ? ' selected' :''"
|
|
@click.prevent="e => clickParent(i, e)" href="#">
|
|
<i class="fas fa-folder-open" v-if="folder.children && displayChild[i]"></i>
|
|
<i class="fas fa-folder" v-else></i>
|
|
{{ JSON.parse(folder.name)['fr'] }}
|
|
</a>
|
|
<FolderTree class="sub" v-if="displayChild[i] &&
|
|
folder.children && folder.children.length"
|
|
:directories="folder.children" @choose="emitChoose" :allDirectories="allDirectories"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'FolderTree',
|
|
props: {
|
|
directories: {required: true},
|
|
selectedFolder: {default:false},
|
|
allDirectories: {default:false}
|
|
},
|
|
data() {
|
|
return {
|
|
displayChild: [],
|
|
selectedId: '',
|
|
ancestorId: 0,
|
|
folders: []
|
|
}
|
|
},
|
|
methods: {
|
|
clickParent(i, e) {
|
|
this.emitChoose(this.directories[i].id, this.displayChild[i]);
|
|
if (!this.displayChild[i]) {
|
|
this.clooseAll()
|
|
}
|
|
this.$set(this.displayChild, i, !this.displayChild[i])
|
|
},
|
|
emitChoose (id, val) {
|
|
this.selectedId = id;
|
|
this.$emit('choose', id, val)
|
|
},
|
|
clooseAll() {
|
|
this.displayChild = Array.apply(null, {length: this.directories.length}).map(e => false)
|
|
},
|
|
getAncestor(id){
|
|
let directory = this.allDirectories.find(e => e.id == id);
|
|
|
|
if(directory.parent){
|
|
this.getAncestor(directory.parent);
|
|
} else {
|
|
this.ancestorId = id;
|
|
}
|
|
},
|
|
getAllChildren(ancestorId){
|
|
let directoriesArray = this.allDirectories;
|
|
let directory = directoriesArray.find(e => e.id == ancestorId);
|
|
|
|
this.folders.push(ancestorId);
|
|
if (ancestorId != this.selectedFolder) {
|
|
if(directory && directory.children){
|
|
directory.children.forEach(element => {
|
|
this.getAllChildren(element.id);
|
|
})
|
|
}
|
|
}
|
|
},
|
|
openFolder(arrayFolders){
|
|
for (let index = 0; index < arrayFolders.length; index++) {
|
|
const element = arrayFolders[index];
|
|
let directoriesArray = this.directories;
|
|
let directoryId = directoriesArray.findIndex(e => e.id == element);
|
|
if(directoryId != -1){
|
|
this.$set(this.displayChild, directoryId, !this.displayChild[directoryId])
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.clooseAll();
|
|
this.openFolder(this.folders);
|
|
},
|
|
created(){
|
|
if(this.selectedFolder && this.selectedId == ""){
|
|
this.emitChoose(this.selectedFolder);
|
|
this.getAncestor(this.selectedFolder);
|
|
this.getAllChildren(this.ancestorId);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// https://codepen.io/lonekorean/pen/eNEEpB
|
|
.FolderTree {
|
|
a {
|
|
text-decoration: none;
|
|
color: #2c3e50;
|
|
span {
|
|
color: #5c5d5e;
|
|
font-size: 16px;
|
|
font-weight: 900;
|
|
}
|
|
&.selected {
|
|
color: #3a8ee6;
|
|
}
|
|
}
|
|
.sub {
|
|
margin-left: 30px;
|
|
}
|
|
div {
|
|
clear: left;
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
</style>
|