unicaenVue.js

import axios from 'axios';
import flashMessenger from './flashMessenger';

const unicaenVue = {
    axios: axios,
    flashMessenger: flashMessenger,

    /**
     * Crée une URL à partie d'une route, de paramètres de route (params) et de paramètres GET (query)
     *
     * @param String route
     * @param Object params
     * @param Object query
     * @returns String
     */
    url: (route, params, query) => {
        let baseUrl = window.__unicaenVueBaseUrl;
        // Remplacement des paramètres de routes par leurs valeurs
        if (params) {
            for (let p in params) {
                route = route.replace(`:${p}`, params[p]);
            }
        }

        // traitement de la requête GET
        let getArgs = query ? new URLSearchParams(query).toString() : null;

        // Construction et retour de l'URL
        return baseUrl + route + (getArgs ? `?${getArgs}` : '');
    }
};


/* Tunning d'Axios pour gérer l'interconnexion avec le serveur avec gestion des alertes */
unicaenVue.axios.interceptors.request.use(config => {
    if (config.submitter) {
        let msg = config.msg ? config.msg : 'Action en cours';
        if (config.popover != undefined) {
            config.popover.dispose();
        }
        config.popover = new bootstrap.Popover(config.submitter, {
            content: "<div class=\"spinner-border text-primary\" role=\"status\">\n" +
                "  <span class=\"visually-hidden\">Loading...</span>\n" +
                "</div> " + msg,
            html: true,
            trigger: 'focus'
        });
        config.popover.show();
    }
    return config;
});

unicaenVue.axios.interceptors.response.use(response => {
    response.messages = response.data.messages;
    response.data = response.data.data;
    response.hasErrors = response.messages && response.messages.error && response.messages.error.length > 0 ? true : false;

    if (response.config.popover) {
        var popover = response.config.popover;

        let content = '';
        for (ns in response.messages) {
            for (mid in response.messages[ns]) {
                content += '<div class="alert fade show alert-' + (ns == 'error' ? 'danger' : ns) + '" role="alert">' + response.messages[ns][mid] + '</div>';
            }
        }

        // S'il y a un truc à afficher
        if (content) {
            popover._config.content = content;
            popover.setContent();
            setTimeout(() => {
                popover.dispose();
            }, 3000)
        } else {
            // la popover est masquée si tout est fini
            popover.dispose();
        }
    }
    if (response.messages) {
        flashMessenger.toasts(response.messages);
    }

    return response;
}, (error) => {
    let message = error.response.data;

    if (error.response.status == 403){
        message = '<h4>403 - Accès interdit</h4><br />Vous n\'êtes pas autorisé(e) à faire cette action.';
    }else if (error.response.status == 500) {
        const text = document.createElement("div");
        text.innerHTML = error.response.data;

        // on masque l'icône /!\ qui fait doublon si on en trouve
        const fasIcons = text.querySelectorAll('i.fas');
        fasIcons.forEach(icon => icon.style.display = "none");

        message = text.querySelector('.alert').innerHTML;
        if (message === undefined){
            message = error.response.data;
        }
    }else{
        message = error.response.data;
    }

    flashMessenger.toast(message, 'error');
});

unicaenVue.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';


// workaround pour rendre unicaenVue disponible de partout
window.unicaenVue = unicaenVue;

export default {
    unicaenVue
}