232 lines
10 KiB
Vue
232 lines
10 KiB
Vue
<template>
|
|
<div class="folder_container">
|
|
<div :style="isLoading === true ? 'display:block' : 'display:none;'" class="loader">
|
|
<i class="fa fa-circle-notch fa-spin"></i>
|
|
</div>
|
|
<a href="#" @click="selectFolder({id: 0, libelle: 'racine'})" ondragstart="return false;"
|
|
:class="storeFolder === 0 ? 'root_folder selected' : 'root_folder'" data-id="0">/racine <span class="count">{{racineCount}}</span></a>
|
|
<div class="dd">
|
|
<ol class="dd-list dd3-list root">
|
|
<li v-for="item in folders"
|
|
:class="item.parent_id === null ? 'dd-item dd3-item parent' : 'dd-item dd3-item'"
|
|
:data-id="item.id">
|
|
<div :class="handleClass(item)" @click="toggle(item)"></div>
|
|
<div @click="selectFolder(item)" @drop="moveMedia($event, item)" @dragover.prevent @dragenter.prevent
|
|
:class="item.id === storeFolder ? 'dd3-content selected' : 'dd3-content'">
|
|
<input type="text" value="" class="input_rename" maxlength="100">
|
|
<span>{{item.libelle}}</span>
|
|
<div class="count">{{item.mediacount}}</div>
|
|
<i v-if="item.system === 0" :class="item.favoris === true ? 'fas fa-star' : 'fa fa-star'"
|
|
@click="toggleFav(item)"></i>
|
|
</div>
|
|
<ol v-if="item.sousdossiers.length > 0" class='dd-list' :parent-id="item.id">
|
|
<li v-for="item2 in item.sousdossiers"
|
|
:class="item2.parent_id === null ? 'dd-item dd3-item parent' : 'dd-item dd3-item'"
|
|
:data-id="item2.id">
|
|
<div :class="handleClass(item2)" @click="toggle(item2)"></div>
|
|
<div @click="selectFolder(item2)" @drop="moveMedia($event, item2)" @dragover.prevent @dragenter.prevent
|
|
:class="item2.id === storeFolder ? 'dd3-content selected' : 'dd3-content'">
|
|
<input type="text" value="" class="input_rename" maxlength="100">
|
|
<span>{{item2.libelle}}</span>
|
|
<div class="count">{{item2.mediacount}}</div>
|
|
<i v-if="item2.system === 0"
|
|
:class="item2.favoris === true ? 'fas fa-star' : 'fa fa-star'"
|
|
@click="toggleFav(item2)"></i>
|
|
</div>
|
|
<ol v-if="item2.sousdossiers.length > 0" class='dd-list' :parent-id="item2.id">
|
|
<li v-for="item3 in item2.sousdossiers"
|
|
:class="item3.parent_id === null ? 'dd-item dd3-item parent' : 'dd-item dd3-item'"
|
|
:data-id="item3.id">
|
|
<div
|
|
:class="item3.parent_id === null ? 'dd-handle dd3-handle no-handle' : 'dd-handle dd3-handle'"></div>
|
|
<div @click="selectFolder(item3)" @drop="moveMedia($event, item3)" @dragover.prevent @dragenter.prevent
|
|
:class="item3.id === storeFolder ? 'dd3-content selected' : 'dd3-content'">
|
|
<input type="text" value="" class="input_rename" maxlength="100">
|
|
<span>{{item3.libelle}}</span>
|
|
<div class="count">{{item3.mediacount}}</div>
|
|
<i v-if="item3.system === 0"
|
|
:class="item3.favoris === true ? 'fas fa-star' : 'fa fa-star'"
|
|
@click="toggleFav(item3)"></i>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "FolderComponent",
|
|
computed: {
|
|
storeSujet() {
|
|
return this.$store.state.sujet;
|
|
},
|
|
storeFolder() {
|
|
return this.$store.state.folder;
|
|
},
|
|
storeFilters() {
|
|
return this.$store.state.filters;
|
|
},
|
|
storeRole() {
|
|
return this.$store.state.role
|
|
},
|
|
storeGrabbed() {
|
|
return this.$store.state.grabbed
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
'isLoading': true,
|
|
'oFolders': [],
|
|
'racineCount': 0,
|
|
'folders': [],
|
|
}
|
|
},
|
|
watch: {
|
|
storeSujet() {
|
|
this.initFolders();
|
|
}
|
|
},
|
|
methods: {
|
|
initFolders(toSelectFolder = false) {
|
|
this.isLoading = true;
|
|
this.folders = [];
|
|
this.racineCount = 0;
|
|
axios.get('/ajax-v2/load-folders', {
|
|
params: {
|
|
sujet_id: this.storeSujet,
|
|
}
|
|
}).then(response => {
|
|
this.oFolders = response.data.data;
|
|
this.racineCount = response.data.racineCount;
|
|
this.renderItems();
|
|
this.isLoading = false;
|
|
|
|
if (toSelectFolder !== false){
|
|
this.selectFolder(toSelectFolder);
|
|
} else {
|
|
// ! Reset Current folder to none selected
|
|
this.$store.state.folder = -1
|
|
}
|
|
}).catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
},
|
|
renderItems() {
|
|
const favs = this.oFolders.filter(item => item.favoris === true);
|
|
|
|
favs.forEach(item => {
|
|
this.folders.push(item);
|
|
});
|
|
this.oFolders.forEach(item => {
|
|
if (item.favoris === false) {
|
|
this.folders.push(item);
|
|
}
|
|
});
|
|
},
|
|
selectFolder(item) {
|
|
let filter = this.storeFilters.findIndex(e => e.type === 'dossier_id');
|
|
if (filter !== -1) {
|
|
this.$delete(this.storeFilters, filter);
|
|
}
|
|
this.storeFilters.push({
|
|
type: 'dossier_id',
|
|
legend: 'Dossier : ',
|
|
value: item.id,
|
|
libelle: item.libelle
|
|
});
|
|
this.$store.commit({
|
|
type: 'updateFilters',
|
|
filters: this.storeFilters
|
|
});
|
|
|
|
this.$store.commit({
|
|
type: 'updateFolder',
|
|
folder: item.id
|
|
});
|
|
},
|
|
toggleFav(folder) {
|
|
const _this2 = this;
|
|
axios.post('/ajax/favoris-folder', {
|
|
dossier_id: folder.id,
|
|
favoris: !folder.favoris,
|
|
}).then(response => {
|
|
_this2.initFolders();
|
|
}).catch(error => {
|
|
$.fancyMessage({
|
|
title: "Dossiers",
|
|
message: "Une erreur est survenue, veuillez recharger la page (Ctrl + F5).",
|
|
type: "error"
|
|
});
|
|
console.log(error);
|
|
});
|
|
},
|
|
moveMedia(evt, folder) {
|
|
// Si on déplace dans un autre dossier que le dossier actuel du/des media(s) séléctionné(s)
|
|
if (this.storeGrabbed[0].dossier_id !== folder.id) {
|
|
const _this2 = this;
|
|
this.$loading.show({delay:0});
|
|
axios.post('/ajax/move-media', {
|
|
medias: this.storeGrabbed,
|
|
dossier_id : folder.id,
|
|
}).then(response => {
|
|
// On met un timeout pour être sûr qu'Elastic est update lors du reload du DisplayComponent
|
|
setTimeout(function(){
|
|
_this2.initFolders(folder);
|
|
_this2.$store.commit({
|
|
type: 'Reload',
|
|
reload: Math.random()
|
|
});
|
|
_this2.$store.commit({
|
|
type: 'updateGrabbed',
|
|
grabbed: []
|
|
});
|
|
_this2.$loading.hide();
|
|
}, 1000);
|
|
}).catch(error => {
|
|
_this2.$loading.hide();
|
|
console.log(error);
|
|
$.fancybox.close();
|
|
$.fancyMessage({title : "Attention", message : "Erreur lors du déplacement, merci d'actualiser la page.", type : "error"});
|
|
});
|
|
}
|
|
},
|
|
handleClass(item) {
|
|
let dd3_handle = false;
|
|
let no_handle = false;
|
|
let openable = false;
|
|
let opened = false;
|
|
if( item.sousdossiers.length > 0 ) {
|
|
if($("[parent-id='"+ item.id +"']").css('display') != 'none') {
|
|
opened = true;
|
|
} else {
|
|
openable = true;
|
|
}
|
|
} else {
|
|
//icone dossier simple sans action
|
|
dd3_handle = true;
|
|
no_handle = true;
|
|
}
|
|
return {
|
|
'id' : item.id,
|
|
'dd-handle' : true,
|
|
'dd3-handle' : dd3_handle,
|
|
'no-handle' : no_handle,
|
|
'openable' : openable,
|
|
'opened' : opened,
|
|
}
|
|
},
|
|
toggle(item) {
|
|
$("[parent-id='"+ item.id +"']").toggle();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|