paad/js/avisos.js

import { createApp, reactive } from 'https://unpkg.com/petite-vue?module';
const new_aviso = reactive({
    titulo: '',
    descripcion: '',
    fechaInicio: '',
    fechaFin: '',
    profesores: [],
    carreras: [],
    reset() {
        this.titulo = '';
        this.descripcion = '';
        this.fechaInicio = '';
        this.fechaFin = '';
        this.profesores = [];
        this.carreras = [];
    },
    get isValid() {
        return this.titulo !== '' && this.descripcion !== '' && this.fechaInicio !== '' && this.fechaFin !== '' && (this.profesores.length > 0 || this.carreras.length > 0) && this.facultad_id !== null;
    },
});
// define datepicker method
const app = createApp({
    new_aviso,
    profesores: [],
    carreras: [],
    avisos: [],
    profesor: null,
    formatProfesor(profesor) {
        return `(${profesor.profesor_clave}) ${profesor.profesor_nombre}`;
    },
    addProfesor() {
        const profesorObj = this.profesores.find((profesor) => this.profesor === this.formatProfesor(profesor));
        if (profesorObj) {
            this.new_aviso.profesores.push(profesorObj);
            this.profesor = null;
        }
    },
    aviso_shown: null,
    // int?
    aviso_suspendido: null,
    suspenderAviso() {
        if (this.aviso_suspendido) {
            const aviso = this.avisos.find((aviso) => aviso.aviso_id === this.aviso_suspendido);
            if (aviso) {
                this.deleteAviso(aviso);
            }
        }
    },
    get relevant_profesores() {
        // not in array new_aviso.profesores
        const relevant = this.profesores.filter((profesor) => !this.new_aviso.profesores.map((profesor) => profesor.profesor_id).includes(profesor.profesor_id));
        // console.log('profesores:', this.profesores.map((profesor: Profesor) => profesor.profesor_nombre), 'relevant:', relevant.map((profesor: Profesor) => profesor.profesor_nombre), 'new_aviso:', this.new_aviso.profesores.map((profesor: Profesor) => profesor.profesor_nombre))
        return relevant;
    },
    get relevant_carreras() {
        // not in array new_aviso.carreras
        return this.carreras.filter((carrera) => !this.new_aviso.carreras.includes(carrera));
    },
    createAviso() {
        const data = {
            aviso_titulo: this.new_aviso.titulo,
            aviso_texto: this.new_aviso.descripcion,
            aviso_fecha_inicial: this.new_aviso.fechaInicio,
            aviso_fecha_final: this.new_aviso.fechaFin,
            profesores: this.new_aviso.profesores.map((profesor) => profesor.profesor_id),
            carreras: this.new_aviso.carreras.map((carrera) => carrera.carrera_id),
        };
        fetch('/action/avisos.php', {
            method: 'POST',
            body: JSON.stringify(data)
        }).then(res => res.json()).then(res => {
            if (res.success) {
                // hydrate with carreras and profesores
                this.avisos.push({
                    ...data,
                    carreras: this.carreras.filter((carrera) => data.carreras.includes(carrera.carrera_id)),
                    profesores: this.profesores.filter((profesor) => data.profesores.includes(profesor.profesor_id)),
                    aviso_estado: true,
                    aviso_id: res.aviso_id,
                });
                this.new_aviso.reset();
            }
            else {
                alert(res.error);
                console.log(res.errors);
            }
        });
    },
    deleteAviso(aviso) {
        fetch(`/action/avisos.php`, {
            method: 'DELETE',
            body: JSON.stringify({ aviso_id: aviso.aviso_id })
        }).then(res => res.json()).then(res => {
            if (res.success) {
                this.avisos = this.avisos.filter((aviso) => aviso.aviso_id !== this.aviso_suspendido);
                this.aviso_suspendido = null;
            }
            else {
                alert(res.error);
                console.log(res.errors);
            }
        });
    },
    updateAviso() {
        fetch(`/action/avisos.php`, {
            method: 'PUT',
            body: JSON.stringify({
                aviso_id: this.aviso_shown.aviso_id,
                aviso_fecha_final: this.aviso_shown.aviso_fecha_final,
            })
        }).then(res => res.json()).then(res => {
            if (res.success) {
            }
            else {
                alert(res.error);
                console.log(res.errors);
            }
        });
    },
    async initializeDatepickers($el) {
        const periodo = await fetch('action/periodo_datos.php');
        const periodo_data = await periodo.json();
        $('.date-picker').datepicker({
            dateFormat: 'yy-mm-dd',
            maxDate: periodo_data.periodo_fecha_fin,
            minDate: 0,
        });
        $($el).on('change', () => {
            this.aviso_shown.aviso_fecha_final = $($el).val();
        });
    },
    async mounted() {
        this.avisos = await fetch("/action/avisos.php").then(res => res.json());
        this.profesores = await fetch('/action/action_profesor.php').then(res => res.json());
        this.carreras = await fetch('/action/action_carreras.php').then(res => res.json());
        await this.initializeDatepickers();
        const fechaInicio = $('#fechaInicio.date-picker');
        const fechaFin = $('#fechaFin.date-picker');
        fechaInicio.on("change", function () {
            new_aviso.fechaInicio = fechaInicio.val();
            fechaFin.datepicker("option", "minDate", fechaInicio.val());
        });
        fechaFin.on("change", function () {
            new_aviso.fechaFin = fechaFin.val();
            fechaInicio.datepicker("option", "maxDate", fechaFin.val());
        });
    }
}).mount('#app');