HelloCSE/public/js/dtl_mixins.js

Vue.mixin({
    methods: {
        isNotEmptyString:function (s){return (typeof s==='string' && s.length)},
        getURL:function(){ return location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '')},
        ajax(bridge,param=false){

            let method='GET';
            
            let parseJSON=(json)=>{
                try{
                    let rep=JSON.parse(json);
                    return rep;
                }catch(e){
                    console.log("ERROR:: xhr.parse : JSON MAL FORMÉ");
                    return false;
                }
            }
    
            // si on a une method particulière
            if(this.isNotEmptyString(param.method))
                    method=param.method;
                        
            let p=new Promise((res,rej)=>{
                try{
                    if(!this.isNotEmptyString(bridge)){
                        throw 'ERROR:: ajax : url de bridge attendu, requête échouée';
                    }
                                        
                    let objectToFormData = (data = {}, form = null, namespace = '')=> {
                        
                        let files = {};
                        let model = {};
                        for (let propertyName in data) {
                            if (data.hasOwnProperty(propertyName) && data[propertyName] instanceof File) {
                                files[propertyName] = data[propertyName]
                            } else {
                                model[propertyName] = data[propertyName]
                            }
                        }
                
                        model = JSON.parse(JSON.stringify(model))
                        let formData = form || new FormData();
                
                        for (let propertyName in model) {
                            if (!model.hasOwnProperty(propertyName) || !model[propertyName])       continue;
                            let formKey = namespace ? `${namespace}[${propertyName}]` : propertyName;
                            if (model[propertyName] instanceof Date)
                                formData.append(formKey, model[propertyName].toISOString());
                            else if (model[propertyName] instanceof File) {
                                formData.append(formKey, model[propertyName]);
                            }
                            else if (model[propertyName] instanceof Array) {
                                model[propertyName].forEach((element, index) => {
                                    const tempFormKey = `${formKey}[${index}]`;
                                    if (typeof element === 'object') objectToFormData(element, formData, tempFormKey);
                                    else formData.append(tempFormKey, element.toString());
                                });
                            }
                            else if (typeof model[propertyName] === 'object' && !(model[propertyName] instanceof File))
                                objectToFormData(model[propertyName], formData, formKey);
                            else {
                                
                                formData.append(formKey, model[propertyName].toString());
                            }
                        }
                
                        // console.log(formData.keys())
                        for (let propertyName in files) {
                            if (files.hasOwnProperty(propertyName)) {
                                formData.append(propertyName, files[propertyName]);
                            }
                        }
                        
                        return formData;
                    };
    
                    let convertToString=(fd)=>{
                        let encodedString = '';
                        let amperSand='';
                        fd.forEach(function(value, key){
                            encodedString +=`${amperSand}${key}=${encodeURIComponent(value)}`;
                            amperSand='&';
                        });
                        return encodedString;
                    };

                    
                    if(method==='GET'){
                        if(!param)
                            param={};
                        if(!param.data)
                            param.data={};
                    }

                    // on compose les données à envoyer POST ou GET
                    let formData=new FormData();
                    if(param.data)
                        formData=objectToFormData(param.data);
    
                    // on converti en string pour être plus userfriendly dans la console du navigateur
                    let stringToSend=convertToString(formData);
                    
                    // on ajoute les paramètres d'URL à l'URL
                    if(method==='GET')
                        bridge+='?'+stringToSend
                    

                    let xhr = new XMLHttpRequest();
                    xhr.open(method, bridge, true);
                    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                    xhr.onload=function(){
    
                        // Si tout va bien
                        if(this.readyState===4 && this.status===200){
                            var rep=parseJSON(this.responseText);
                            if(rep){
                                res(rep);
                                return;
                            }
                            rej();
                            return;                       
                        }
                        
                        // // Les réponses ERREURS
                        if(this.readyState===4 && this.status===503){
                            let err='ERROR:: ajax : erreur 503 ['+bridge+'] non autorisé';
                            console.log(`%c ${err}`,'background:red;color:#fff,font-weight:bold');
                            rej(err);
                            return;
                        }
                        
                        if(this.readyState===4 && this.status===500){
                            let err='ERROR:: ajax : erreur 500 ['+bridge+'] erroné';
                            console.log(`%c ${err}`,'background:red;color:#fff,font-weight:bold');
                            rej(err);
                            return;
                        }
                        
                        if(this.readyState===4 && this.status===404){
                            let err='ERROR:: ajax : erreur 404 ['+bridge+'] non trouvé';
                            console.log(`%c ${err}`,'background:red;color:#fff,font-weight:bold');
                            rej(err);
                            return;
                        }

                        if(this.readyState===4){
                            let rep = parseJSON(this.responseText);
                            let mess = this.status===204 ? "Il n'y à aucune donnée" : rep.message;
                            let err='ERROR:: ajax : '+this.status+' '+this.statusText+' : '+mess;
                            if(err){
                                res(err);
                                return;
                            }
                            rej();
                            return; 
                        }                        
                    };
    
                    xhr.onerror = function () {
                            console.log('ERROR:: ajax :');
                            console.log(xhr);
                            rej('ERROR:: erreur AJAX inconnue');
                    };
                    
                    xhr.send(stringToSend);
                    
                }
                catch(e){
                    console.log(e);
                    rej(e);
                }
            });
            
            return p;
            
        }
    }
  })