ldc-com-app-bo/resources/js/components/AddDocumentComponent.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) * 10, // 10MB
                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>