208 lines
8.3 KiB
Vue
208 lines
8.3 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 class="form-group">
|
|
<v-select v-model="documentDatas.lang" :options="[{label: 'Français (FR)', value: 'fr'}, {label: 'Anglais (EN)', value: 'en'}, {label: 'Allemand (DE)', value: 'de'}]" :reduce="item => item.value" placeholder="Langue du document" :clearable="false" :searchable="false" />
|
|
</div>
|
|
<div v-show="documentDatas.lang.length > 0">
|
|
<div v-if="documentDatas.lang !== 'fr'" class="form-group">
|
|
<v-select v-model="selectedFR" :options="JSON.parse(docsfr)" label="title" placeholder="Document français" :clearable="false" />
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" name="title" :placeholder="'Titre du document ' + this.documentDatas.lang.toUpperCase()" class="form-control" v-model="documentDatas.title" required>
|
|
</div>
|
|
<div v-if="documentDatas.lang === 'fr'" class="form-group">
|
|
<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) ' + this.documentDatas.lang.toUpperCase()}}</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>
|
|
<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 v-show="documentDatas.lang.length > 0" href="#" class="btn btn-success" :disabled="isUploading" @click="addDocument">Ajouter</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script>
|
|
// ResumableJs
|
|
import Resumable from 'resumablejs';
|
|
|
|
export default {
|
|
props: [
|
|
'csrf',
|
|
'folders',
|
|
'docsfr'
|
|
],
|
|
mounted() {
|
|
console.log('EditDocument Component mounted.');
|
|
let parseDirectories = JSON.parse(this.folders);
|
|
this.directories = this.recursiveDir(parseDirectories);
|
|
|
|
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
|
|
}
|
|
});
|
|
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);
|
|
},
|
|
watch: {
|
|
selectedFR: function (val) {
|
|
this.documentDatas.parent = val.id;
|
|
this.documentDatas.directory = val.directory;
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
error: '',
|
|
success: '',
|
|
directories: [],
|
|
documentDatas: {
|
|
uuid: '',
|
|
title: '',
|
|
type: '',
|
|
directory: 0,
|
|
path: '',
|
|
published: false,
|
|
lang: '',
|
|
parent: null
|
|
},
|
|
filePercent: -1,
|
|
isUploading: false,
|
|
selectedFR: ''
|
|
}
|
|
},
|
|
methods: {
|
|
addDocument() {
|
|
if (this.documentDatas.title.length > 3 && this.documentDatas.directory !== 0 && this.documentDatas.path.length > 0 && this.documentDatas.type.length > 0 && this.documentDatas.uuid.length > 0){
|
|
this.error = '';
|
|
let _this2 = this;
|
|
axios.post('/documents/store', {
|
|
document: this.documentDatas,
|
|
})
|
|
.then(function (response) {
|
|
if(response.data !== 'NOK') {
|
|
_this2.success = "Ajouté !";
|
|
window.location.href = '/documents/' + response.data + '/edit';
|
|
}
|
|
})
|
|
.catch(function (error) {
|
|
//console.log(error);
|
|
_this2.error = "Une erreur est survenue, veuillez recharger la page.";
|
|
});
|
|
}else{
|
|
this.success = '';
|
|
this.error = "Vous devez remplir tous les champs du document.";
|
|
}
|
|
},
|
|
fileAdded(file) {
|
|
console.log(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)
|
|
this.error = "Une erreur est survenue, veuillez recharger la page.";
|
|
},
|
|
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
|
|
},
|
|
}
|
|
}
|
|
</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>
|