asistencia/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: '',
    },
    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,
        estados: [],
        switchFecha: false,
        switchFechas() {
            $(function () {
                store.filters.fecha_inicio = store.filters.fecha_fin = store.filters.fecha = null;
                $("#fecha, #fecha_inicio, #fecha_fin").datepicker({
                    minDate: -3,
                    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`;
        }
    },
    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)
            return [];
        return newArray;
    },
});
createApp({
    store,
    get clase_vista() {
        return store.current.clase_vista;
    },
    registros: {
        data: [],
        async fetch() {
            this.loading = true;
            this.data = [];
            const res = await fetch('action/action_auditoria.php');
            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);
            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);
                        default:
                            return true;
                    }
                });
            });
        },
    },
    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,
        })).sort((a, b) => a.profesor_nombre.localeCompare(b.profesor_nombre));
    },
    async mounted() {
        await this.registros.fetch();
        await store.facultades.fetch();
        await store.estados.fetch();
        store.filters.switchFechas();
    }
}).mount('#app');