384 lines
16 KiB
Vue
384 lines
16 KiB
Vue
<template>
|
|
<div>
|
|
<a v-if="storeRole !== 2" @click="openUploadFrom" href="#" class="action_add_media"><i class="fas fa-file-upload"></i> Ajouter un média</a>
|
|
<a href="#" @click="download" class="action_download_media"><i class="fas fa-file-download"></i> Télécharger</a>
|
|
<!--<a v-if="storeRole === 1 || storeRole === 4" href="#" class="action_delete_media"><i class="fas fa-trash-alt"></i> Supprimer</a>-->
|
|
<a v-if="storeRole !== 2" @click="duplicateMedia" href="#" class="action_duplicate_media"><i
|
|
class="far fa-copy"></i> Dupliquer</a>
|
|
<a v-if="storeRole !== 2" @click="applySticker" href="#" class="action_tag_media"><i class="fas fa-tags"></i>
|
|
Etiquette</a>
|
|
|
|
<div id="form_etiquette" style="display: none;">
|
|
<h3>Appliquez une étiquette</h3>
|
|
<hr/>
|
|
<ul>
|
|
<li v-for="item in JSON.parse(etiquettes)"><a class="etiquette"
|
|
@click="selectSticker(item.etiquette_id)" href="#"
|
|
:style="'background-color:' + item.color + '; border-color:' + item.color + ';'">{{item.libelle}}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="form_download" style="display: none;">
|
|
<h3>Téléchargez</h3>
|
|
<hr/>
|
|
<p>Sélectionnez l'un des formats ci-dessous pour télécharger votre sélection.</p>
|
|
<form ref="downloadMedias" id="the_form_download" target="_blank" action="/ajax/download-media" method="POST">
|
|
<select class="download_format" name="format">
|
|
<option value="original">Format original</option>
|
|
<option v-for="item in storeFormats" :value="item.id">{{item.libelle}}
|
|
{{item.largeur}}x{{item.hauteur}}px {{item.extension}}
|
|
</option>
|
|
</select>
|
|
<input type="hidden" name="_token" :value="csrf">
|
|
<input class="medias" type="hidden" name="medias" :value="this.storeGrabbed.map(e => e.id).join(',')">
|
|
<button type="submit" class="btn btn_form_download ml-10" @click="performDownload"><i class="fas fa-arrow-circle-down"></i>Télécharger</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="upload_container high-level">
|
|
<span class="fileinput-button" @click="addFiles">
|
|
<a class="btn btn-primary basic-style"><i class="fas fa-plus-circle" style="background-color: unset;"></i><span> Ajouter vos médias</span></a>
|
|
</span>
|
|
<div class="content_wrapper">
|
|
<!-- The container for the uploaded errors -->
|
|
<div id="upload_errors"></div>
|
|
<!-- The container for the uploaded files -->
|
|
<div id="files" class="files">
|
|
<div v-for="(file, key) in files">
|
|
<div>
|
|
<span>{{file.fileName}}</span>
|
|
<button v-on:click="removeFile(file)" class="cancel"><i class="fa fa-times"></i></button>
|
|
</div>
|
|
<div>
|
|
<span>{{FileConvertSize(file.size)}}</span>
|
|
<button class="upload" style="display: none;"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="upload_bar">
|
|
<a id="submit" class="btn basic-style" href="#" @click="createMedias">Transférer</a>
|
|
<a id="close_upload_form" class="basic-style" href="#" @click="closeUploadFrom">Fermer</a>
|
|
</div>
|
|
<br>
|
|
<input style="display: none;" ref="fileupload" type="file" name="files[]" multiple>
|
|
</div>
|
|
|
|
<div id="ListUploadedFiles" style="display: none;" >
|
|
<h3><i class="fas fa-user-cog"></i> Gestion des médias téléversés</h3>
|
|
<hr/>
|
|
<div class="list_uploaded_files">
|
|
<p class="list_uploaded_files_p" v-for="file in uploadedFiles">{{file.libelle}}.{{file.extension}} <button class="btn btn-sm btn-primary" @click="openMedia(file)">Editer</button></p>
|
|
</div>
|
|
<hr/>
|
|
<div style="margin-top: 20px; text-align: center;">
|
|
<a @click="CloseListUploadedFiles" class="btn" href="#">Fermer</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Resumable from "resumablejs";
|
|
|
|
export default {
|
|
name: "ActionsComponent",
|
|
props: [
|
|
'csrf',
|
|
'etiquettes'
|
|
],
|
|
computed: {
|
|
storeRole() {
|
|
return this.$store.state.role;
|
|
},
|
|
storeFolder() {
|
|
return this.$store.state.folder;
|
|
},
|
|
storeGrabbed() {
|
|
return this.$store.state.grabbed;
|
|
},
|
|
storeFormats() {
|
|
return this.$store.state.formats;
|
|
},
|
|
storeSujet() {
|
|
return this.$store.state.sujet;
|
|
},
|
|
storeMedia() {
|
|
return this.$store.state.media;
|
|
}
|
|
},
|
|
data: function () {
|
|
return {
|
|
files: [],
|
|
uploadedFiles: []
|
|
}
|
|
},
|
|
methods: {
|
|
duplicateMedia() {
|
|
if (Object.keys(this.storeGrabbed).length === 0) {
|
|
$.fancyMessage({
|
|
title: "Dupliquer un média",
|
|
message: "Veuillez sélectionner un média.",
|
|
type: "info"
|
|
});
|
|
} else if (Object.keys(this.storeGrabbed).length > 1) {
|
|
$.fancyMessage({
|
|
title: "Dupliquer un média",
|
|
message: "Vous ne pouvez dupliquer qu'un média à la fois.",
|
|
type: "info"
|
|
});
|
|
} else {
|
|
this.$loading.show({delay: 0});
|
|
axios.post('/ajax/duplicate-media', {
|
|
media_id: this.storeGrabbed[0].id
|
|
}).then(response => {
|
|
this.$loading.hide();
|
|
if (response.data.status === true) {
|
|
this.$store.commit({
|
|
type: 'updateMedia',
|
|
media: response.data.datas
|
|
});
|
|
//switch to edit tab
|
|
this.$store.commit({
|
|
type: 'changeMediaTab',
|
|
tab: 'edit'
|
|
});
|
|
} else {
|
|
$.fancyMessage({title: "Dupliquer un média", message: response.data.error, type: "error"});
|
|
}
|
|
}).catch(error => {
|
|
this.$loading.hide();
|
|
$.fancyMessage({title: "Dupliquer un média", message: error, type: "error"});
|
|
console.log(error);
|
|
});
|
|
}
|
|
},
|
|
applySticker() {
|
|
if (Object.keys(this.storeGrabbed).length === 0) {
|
|
$.fancyMessage({
|
|
title: "Appliquer une étiquette",
|
|
message: "Veuillez sélectionner au moins un média.",
|
|
type: "info"
|
|
});
|
|
} else {
|
|
$("#form_etiquette").fancybox({
|
|
type: 'inline',
|
|
opts: {
|
|
animationDuration: 350,
|
|
animationEffect: 'material',
|
|
}
|
|
}).trigger("click");
|
|
}
|
|
},
|
|
selectSticker(sticker_id) {
|
|
axios.post('/ajax/apply-sticker', {
|
|
medias: this.storeGrabbed,
|
|
etiquette_id: sticker_id
|
|
}).then(response => {
|
|
this.$store.commit({
|
|
type: 'updateGrabbed',
|
|
grabbed: []
|
|
});
|
|
this.$store.commit({
|
|
type: 'Reload',
|
|
reload: Math.random()
|
|
});
|
|
$.fancybox.close();
|
|
}).catch(error => {
|
|
$.fancybox.close();
|
|
$.fancyMessage({
|
|
title: "Attention",
|
|
message: "Erreur lors du changement d'étiquette, merci d'actualiser la page.",
|
|
type: "error"
|
|
});
|
|
console.log(error);
|
|
});
|
|
},
|
|
download() {
|
|
if (Object.keys(this.storeGrabbed).length === 0) {
|
|
$.fancyMessage({
|
|
title: "Télécharger des médias",
|
|
message: "Veuillez sélectionner au moins un média.",
|
|
type: "info"
|
|
});
|
|
} else {
|
|
$("#form_download").fancybox({
|
|
type: 'inline',
|
|
opts: {
|
|
animationDuration: 350,
|
|
animationEffect: 'material',
|
|
}
|
|
}).trigger("click");
|
|
}
|
|
},
|
|
openUploadFrom() {
|
|
if (this.storeFolder < 0){
|
|
$.fancyMessage({title : "Ajout de média", message : "Pour ajouter des médias, veuillez d'abord sélectionner un dossier de destination.", type : "error"});
|
|
}else{
|
|
if (this.r === undefined)
|
|
this.setupResumable();
|
|
//mise à jour systématique des info d'upload en fonction de l'endroit où on se trouve
|
|
this.r.opts.query = {
|
|
sujet_id: this.storeSujet,
|
|
dossier_id: this.storeFolder,
|
|
replaceMediaId: 0
|
|
};
|
|
$('.upload_container').show("fast");
|
|
}
|
|
},
|
|
closeUploadFrom() {
|
|
this.files = [];
|
|
$('.upload_container').hide("fast");
|
|
},
|
|
addFiles(){
|
|
this.$refs.fileupload.click();
|
|
},
|
|
removeFile(file){
|
|
this.r.removeFile(file);
|
|
this.files = this.r.files;
|
|
},
|
|
/**
|
|
* @return {string}
|
|
*/
|
|
FileConvertSize(aSize){
|
|
aSize = Math.abs(parseInt(aSize, 10));
|
|
let def = [[1, 'octets'], [1024, 'ko'], [1024*1024, 'Mo'], [1024*1024*1024, 'Go'], [1024*1024*1024*1024, 'To']];
|
|
for(let i=0; i<def.length; i++){
|
|
if(aSize<def[i][0]) return (aSize/def[i-1][0]).toFixed(2)+' '+def[i-1][1];
|
|
}
|
|
},
|
|
setupResumable() {
|
|
this.r = null;
|
|
this.r = new Resumable({
|
|
target: '/ajax-v2/upload-media',
|
|
simultaneousUploads: 1,
|
|
maxFiles: 8,
|
|
testChunks: false,
|
|
fileParameterName: 'files',
|
|
headers: {
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
|
|
},
|
|
query: {
|
|
sujet_id: this.storeSujet,
|
|
dossier_id: this.storeFolder,
|
|
replaceMediaId: 0
|
|
}
|
|
});
|
|
|
|
this.r.on('fileAdded', this.uploadFileAdded);
|
|
this.r.on('fileSuccess', this.uploadFileSuccess);
|
|
this.r.on('fileError', this.uploadFileError);
|
|
this.r.on('complete', this.uploadFileComplete);
|
|
this.r.assignBrowse(this.$refs.fileupload);
|
|
},
|
|
uploadFileAdded(file, event){
|
|
|
|
const acceptFileTypes = /^(gif|jpe?g|png|mp4|mp3|psd|ai|svg|pdf)$/i;
|
|
|
|
if(file.fileName.split('.').pop().length && !acceptFileTypes.test(file.fileName.split('.').pop())) {
|
|
this.r.removeFile(file);
|
|
}
|
|
if(file.size.length && file.size > 5000000) {
|
|
this.r.removeFile(file);
|
|
}
|
|
|
|
this.files = this.r.files;
|
|
},
|
|
uploadFileSuccess(file, message) {
|
|
this.uploadedFiles.push(JSON.parse(message));
|
|
this.removeFile(file);
|
|
$.fancybox.close();
|
|
$.fancybox.open({
|
|
src : '#ListUploadedFiles',
|
|
type : 'inline',
|
|
opts : {
|
|
modal: true,
|
|
animationDuration : 350,
|
|
animationEffect : 'material',
|
|
}
|
|
});
|
|
console.log('file success');
|
|
},
|
|
uploadFileComplete() {
|
|
this.closeUploadFrom();
|
|
this.$loading.hide();
|
|
//$.fancybox.close();
|
|
// $.fancybox.open({
|
|
// src : '#ListUploadedFiles',
|
|
// type : 'inline',
|
|
// opts : {
|
|
// modal: true,
|
|
// animationDuration : 350,
|
|
// animationEffect : 'material',
|
|
// }
|
|
// });
|
|
console.log('complete');
|
|
},
|
|
uploadFileError(file, message) {
|
|
this.closeUploadFrom();
|
|
this.$loading.hide();
|
|
$.fancybox.close();
|
|
let error = JSON.parse(message);
|
|
console.log(error);
|
|
console.log(error.files)
|
|
$.fancyMessage({
|
|
title: "Erreur lors du téléchargement",
|
|
message: error.files[0],
|
|
type: "error"
|
|
});
|
|
},
|
|
createMedias() {
|
|
this.$loading.show({delay: 0});
|
|
this.r.upload();
|
|
},
|
|
openMedia(media) {
|
|
$.fancybox.close();
|
|
this.$store.commit({
|
|
type: 'updateMedia',
|
|
media: media
|
|
});
|
|
},
|
|
CloseListUploadedFiles() {
|
|
if (confirm( "En cliquant sur OK, vous confirmez que vous avez édité tous vos fichiers." ) ) {
|
|
$.fancybox.close();
|
|
this.uploadedFiles = [];
|
|
this.$store.commit({
|
|
type: 'Reload',
|
|
reload: Math.random()
|
|
});
|
|
}
|
|
},
|
|
performDownload() {
|
|
this.$refs.downloadMedias.submit();
|
|
}
|
|
},
|
|
watch: {
|
|
storeMedia() {
|
|
if (Object.keys(this.storeMedia).length === 0 && this.uploadedFiles.length > 0){
|
|
$.fancybox.open({
|
|
src : '#ListUploadedFiles',
|
|
type : 'inline',
|
|
opts : {
|
|
modal: true,
|
|
animationDuration : 350,
|
|
animationEffect : 'material',
|
|
}
|
|
});
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.basic-style {
|
|
font-size: inherit !important;
|
|
padding: 9px 19px !important;
|
|
display: inline-flex !important;
|
|
border: 0 !important;
|
|
float: unset !important;
|
|
transition: none !important;
|
|
}
|
|
</style>
|