232 lines
9.2 KiB
Vue
232 lines
9.2 KiB
Vue
<template>
|
|
<form>
|
|
<div v-show="error.length > 0" class="alert alert-danger" role="alert">{{this.error}}</div>
|
|
<div v-show="success.length > 0" class="alert alert-success" role="alert">{{this.success}}</div>
|
|
<div v-show="alertErrorVisible" class="alert alert-danger" role="alert">{{alertMsg}}</div>
|
|
<div class="form-group">
|
|
<input type="text" name="title" placeholder="Titre du document" class="form-control"
|
|
v-model="documentDatas.title" required>
|
|
</div>
|
|
<div class="form-group" v-show="documentDatas.lang === 'fr'">
|
|
<folder-select :directories="directories" v-model="documentDatas.directory" onlyLastChild="true"></folder-select>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="inputFile" ref="inputFile">
|
|
<span>{{documentDatas.path ? documentDatas.path : 'Fichier (PDF ou MP4)'}}</span>
|
|
</div>
|
|
<div class="progress" v-if="filePercent > -1">
|
|
<div class="progress-bar" role="progressbar" v-bind:style="{ width: filePercent + '%' }" :aria-valuenow="filePercent" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="UserActivated" id="UserActivated" v-model="documentDatas.published">
|
|
<label class="form-check-label" for="UserActivated">Activé ?</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="row">
|
|
<div class="col-md-12 d-flex justify-content-between">
|
|
<a href="/documents" class="btn btn-secondary">Retour</a>
|
|
<a href="#" class="btn btn-danger" :disabled="isUploading" @click="confirm">Supprimer</a>
|
|
<a href="#" class="btn btn-success" :disabled="isUploading" @click="updateDocument">Enregistrer</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Modal Delete -->
|
|
<div class="modal fade" id="DeleteModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="DeleteModalLabel">Attention !</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Cette action supprimera ce document ainsi que les traductions si il s'agit d'un document FR <br>Voulez vous continuer ?</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Non</button>
|
|
<button type="button" class="btn btn-success" @click="deleteDocument">Oui</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script>
|
|
// ResumableJs
|
|
import Resumable from 'resumablejs';
|
|
|
|
export default {
|
|
props: [
|
|
'document',
|
|
'csrf',
|
|
'folders'
|
|
],
|
|
mounted() {
|
|
console.log('EditDocument Component mounted.');
|
|
let parseDirectories = JSON.parse(this.folders);
|
|
this.directories = this.recursiveDir(parseDirectories);
|
|
this.documentDatas = JSON.parse(this.document);
|
|
|
|
this.r = new Resumable({
|
|
chunkSize: (1024 * 1024), // 1MB
|
|
simultaneousUploads: 1,
|
|
maxFiles: 1,
|
|
maxFileSize: (1024 * 1024) * 20, // 20MB
|
|
testChunks: false,
|
|
throttleProgressCallbacks: 1,
|
|
target: '/documents/upload',
|
|
query: {
|
|
_token: this.csrf,
|
|
uuid: this.documentDatas.uuid
|
|
}
|
|
});
|
|
this.r.on('fileAdded', this.fileAdded);
|
|
this.r.on('fileSuccess', this.fileSuccess);
|
|
this.r.on('fileError', this.fileError);
|
|
this.r.on('fileProgress', file => {
|
|
this.filePercent = Math.floor(this.r.progress() * 100);
|
|
});
|
|
this.r.assignBrowse(this.$refs.inputFile);
|
|
},
|
|
data() {
|
|
return {
|
|
error: '',
|
|
success: '',
|
|
directories: [],
|
|
documentDatas: {lang: ''},
|
|
filePercent: -1,
|
|
isUploading: false,
|
|
alertMsg: '',
|
|
alertErrorVisible: false,
|
|
}
|
|
},
|
|
methods: {
|
|
updateDocument() {
|
|
if (this.documentDatas.title.length > 3){
|
|
this.error = '';
|
|
let _this2 = this;
|
|
axios.post('/documents/' + this.documentDatas.id + '/update', {
|
|
document: this.documentDatas,
|
|
})
|
|
.then(function (response) {
|
|
if(response.data === 'OK') {
|
|
_this2.success = "Enregistré !";
|
|
}
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
}else{
|
|
this.success = '';
|
|
this.error = "Vous devez remplir le titre du document.";
|
|
}
|
|
},
|
|
fileAdded(file) {
|
|
if (file.file.type !== 'application/pdf' && file.file.type !== 'video/mp4') {
|
|
return !(this.error = 'Extension du fichier invalide.');
|
|
}
|
|
this.isUploading = true;
|
|
this.r.upload();
|
|
},
|
|
fileSuccess(file,message) {
|
|
let result = JSON.parse(message);
|
|
this.documentDatas.path = file.fileName;
|
|
this.documentDatas.uuid = result.uid;
|
|
if (file.file.type === 'application/pdf') {
|
|
this.documentDatas.type = 'pdf';
|
|
}else{
|
|
this.documentDatas.type = 'mp4';
|
|
}
|
|
this.filePercent = -1;
|
|
this.isUploading = false;
|
|
},
|
|
fileError(file,message) {
|
|
console.log(file, message)
|
|
},
|
|
recursiveDir(list, parent = null) {
|
|
let root = list.filter(e => e.parent == parent);
|
|
for (let i = 0; i < root.length; i++) {
|
|
let childs = this.recursiveDir(list, root[i].id);
|
|
root[i].children = [];
|
|
for (let j = 0; j < childs.length; j++) {
|
|
root[i].children.push(childs[j])
|
|
}
|
|
if (!root[i].children.length) delete root[i].children
|
|
}
|
|
return root
|
|
},
|
|
confirm() {
|
|
$('#DeleteModal').modal('show');
|
|
},
|
|
deleteDocument() {
|
|
axios.post('/documents/' + this.documentDatas.id + '/delete')
|
|
.then(response => {
|
|
if (response.data.status === 'OK'){
|
|
window.location.href = '/documents';
|
|
}else{
|
|
$('#DeleteModal').modal('hide');
|
|
this.showAlertError("Une erreur est survenue. Veuillez réessayer plus tard.");
|
|
}
|
|
})
|
|
.catch(error => {
|
|
$('#DeleteModal').modal('hide');
|
|
this.showAlertError("Une erreur est survenue. Veuillez réessayer plus tard.");
|
|
});
|
|
},
|
|
showAlertError(msg) {
|
|
this.alertMsg = msg;
|
|
this.alertErrorVisible = true;
|
|
setTimeout(() => {
|
|
this.alertErrorVisible = false;
|
|
}, 1800);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.progress {
|
|
margin-top: 10px;
|
|
}
|
|
.inputFile {
|
|
background-color: #FFF;
|
|
background-image: none;
|
|
border-radius: 4px;
|
|
border: 1px solid #DCDFE6;
|
|
box-sizing: border-box;
|
|
color: #606266;
|
|
display: inline-block;
|
|
font-size: inherit;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
outline: 0;
|
|
padding: 0 15px;
|
|
width: 100%;
|
|
font-size: 14px;
|
|
color: #c0c4cc;
|
|
cursor: pointer;
|
|
&.statut {
|
|
display: flex;
|
|
|
|
.name {
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
&.error {
|
|
color: #d30000;
|
|
}
|
|
}
|
|
</style>
|