paad/js/auditoría.js

import { createApp, reactive } from 'https://unpkg.com/petite-vue?module';
const store = reactive({
    loading: false,
    current: {
        comentario: '',
        clase_vista: null,
        empty: '',
        page: 1,
        maxPages: 10,
        perPage: 10,
        modal_state: "Cargando datos...",
    },
    facultades: {
        data: [],
        async fetch() {
            this.data = [];
            const res = await fetch('action/action_facultad.php');
            this.data = await res.json();
        },
    },
    filters: {
        facultad_id: null,
        fecha: null,
        fecha_inicio: null,
        fecha_fin: null,
        profesor: null,
        periodo_id: null,
        bloque_horario: null,
        estados: [],
        switchFecha: false,
        switchFechas() {
            $(function () {
                store.filters.fecha_inicio = store.filters.fecha_fin = store.filters.fecha = null;
                $("#fecha, #fecha_inicio, #fecha_fin").datepicker({
                    minDate: -15,
                    maxDate: new Date(),
                    dateFormat: "yy-mm-dd",
                    showAnim: "slide",
                });
                const fecha = $("#fecha"), inicio = $("#fecha_inicio"), fin = $("#fecha_fin");
                inicio.on("change", function () {
                    store.filters.fecha_inicio = inicio.val();
                    fin.datepicker("option", "minDate", inicio.val());
                });
                fin.on("change", function () {
                    store.filters.fecha_fin = fin.val();
                    inicio.datepicker("option", "maxDate", fin.val());
                });
                fecha.on("change", function () {
                    store.filters.fecha = fecha.val();
                });
            });
        }
    },
    estados: {
        data: [],
        async fetch() {
            this.data = [];
            const res = await fetch('action/action_estado_supervisor.php');
            this.data = await res.json();
        },
        getEstado(id) {
            return this.data.find((estado) => estado.estado_supervisor_id === id);
        },
        printEstados() {
            if (store.filters.estados.length > 0)
                document.querySelector('#estados').innerHTML = store.filters.estados.map((estado) => `<span class="mx-2 badge badge-${store.estados.getEstado(estado).estado_color}">
                    <i class="${store.estados.getEstado(estado).estado_icon}"></i> ${store.estados.getEstado(estado).nombre}
                </span>`).join('');
            else
                document.querySelector('#estados').innerHTML = `Todos los registros`;
        }
    },
    bloques_horario: {
        data: [],
        async fetch() {
            this.data = [];
            const res = await fetch('action/action_grupo_horario.php');
            this.data = await res.json();
            if (this.data.every((bloque) => !bloque.selected))
                this.data[0].selected = true;
        },
    },
    toggle(arr, element) {
        const newArray = arr.includes(element) ? arr.filter((item) => item !== element) : [...arr, element];
        // if all are selected, then unselect all
        if (newArray.length === this.estados.data.length) {
            setTimeout(() => {
                document.querySelectorAll('#dlAsistencia>ul>li.selected').forEach(element => element.classList.remove('selected'));
            }, 100);
            return [];
        }
        return newArray;
    },
});
$('div.modal#cargando').modal({
    backdrop: 'static',
    keyboard: false,
    show: false,
});
createApp({
    store,
    get clase_vista() {
        return store.current.clase_vista;
    },
    registros: {
        data: [],
        async fetch() {
            // if (!store.filters.facultad_id || !store.filters.periodo_id) return
            this.loading = true;
            this.data = [];
            const params = {
                facultad_id: 19,
                periodo_id: 2,
            };
            const paramsUrl = new URLSearchParams(params).toString();
            const res = await fetch(`action/action_auditoria.php?${paramsUrl}`, {
                method: 'GET',
            });
            this.data = await res.json();
            this.loading = false;
        },
        invertir() {
            this.data = this.data.reverse();
        },
        mostrarComentario(registro_id) {
            const registro = this.data.find((registro) => registro.registro_id === registro_id);
            store.current.comentario = registro.comentario;
            $('#ver-comentario').modal('show');
        },
        get relevant() {
            /*
                facultad_id: null,
                fecha: null,
                fecha_inicio: null,
                fecha_fin: null,
                profesor: null,
                asistencia: null,
                estado_id: null,
                if one of the filters is null, then it is not relevant
    
            */
            const filters = Object.keys(store.filters).filter((filtro) => store.filters[filtro] || store.filters[filtro]?.length > 0);
            /*
                store.current
                    page: 1,
                    maxPages: 10,
                    perPage: 10,
            */
            return this.data.filter((registro) => {
                return filters.every((filtro) => {
                    switch (filtro) {
                        case 'fecha':
                            return registro.registro_fecha_ideal === store.filters[filtro];
                        case 'fecha_inicio':
                            return registro.registro_fecha_ideal >= store.filters[filtro];
                        case 'fecha_fin':
                            return registro.registro_fecha_ideal <= store.filters[filtro];
                        case 'profesor':
                            const textoFiltro = store.filters[filtro].toLowerCase();
                            if (/^\([^)]+\)\s[\s\S]+$/.test(textoFiltro)) {
                                const clave = registro.profesor_clave.toLowerCase();
                                const filtroClave = textoFiltro.match(/\((.*?)\)/)?.[1];
                                // console.log(clave, filtroClave);
                                return clave.includes(filtroClave);
                            }
                            else {
                                const nombre = registro.profesor_nombre.toLowerCase();
                                return nombre.includes(textoFiltro);
                            }
                        case 'facultad_id':
                            return registro.facultad_id === store.filters[filtro];
                        case 'estados':
                            if (store.filters[filtro].length === 0)
                                return true;
                            return store.filters[filtro].includes(registro.estado_supervisor_id);
                        case 'bloque_horario':
                            const bloque = store.bloques_horario.data.find((bloque) => bloque.id === store.filters[filtro]);
                            return registro.horario_hora <= bloque.hora_fin && registro.horario_fin >= bloque.hora_inicio;
                        default:
                            return true;
                    }
                });
            });
        },
        async descargar() {
            store.current.modal_state = 'Generando reporte en Excel...';
            $('div.modal#cargando').modal('show');
            this.loading = true;
            if (this.relevant.length === 0)
                return;
            try {
                const res = await fetch('export/supervisor_excel.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(this.relevant)
                });
                const blob = await res.blob();
                window.saveAs(blob, `auditoria_${new Date().toISOString().slice(0, 10)}.xlsx`);
            }
            catch (error) {
                if (error.response && error.response.status === 413) {
                    alert('Your request is too large! Please reduce the data size and try again.');
                }
                else {
                    alert('An error occurred: ' + error.message);
                }
            }
            finally {
                $('#cargando').modal('hide');
                this.loading = false;
            }
        },
        loading: false,
        get pages() {
            return Math.ceil(this.relevant.length / store.current.perPage);
        }
    },
    get profesores() {
        return this.registros.data
            .map((registro) => ({
            profesor_id: registro.profesor_id,
            profesor_nombre: registro.profesor_nombre,
            profesor_correo: registro.profesor_correo,
            profesor_clave: registro.profesor_clave,
            profesor_grado: registro.profesor_grado,
        }))
            .reduce((acc, current) => {
            if (!acc.some(item => item.profesor_id === current.profesor_id)) {
                acc.push(current);
            }
            return acc;
        }, [])
            .sort((a, b) => a.profesor_nombre.localeCompare(b.profesor_nombre));
    },
    async mounted() {
        $('div.modal#cargando').modal('show');
        await this.registros.fetch();
        await store.facultades.fetch();
        await store.estados.fetch();
        await store.bloques_horario.fetch();
        store.filters.switchFechas();
        $('div.modal#cargando').modal('hide');
    }
}).mount('#app');