paad/ts/periodos.ts

import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'

type Carrera = {
    carrera_id: number;
    carrera_nombre: string;
    clave_carrera: string;
    facultad_id: number;
    facultad_nombre: string;
    nivel_id: number;
    nivel_nombre: string;
}

type Nivel = {
    nivel_id: number;
    nivel_nombre: string;
}

const app = createApp({
    carreras: [] as Carrera[],
    niveles: [] as Nivel[],
    message: {} as Record<string, string>,
    async setNivel(carrera: Carrera, nivel: Nivel) {
        if (carrera.nivel_id === nivel.nivel_id) {
            return
        }
        carrera.nivel_id = nivel.nivel_id
        carrera.nivel_nombre = nivel.nivel_nombre

        await fetch('action/carrera.php', {
            method: 'PUT',
            body: JSON.stringify({
                carrera_id: carrera.carrera_id,
                nivel_id: nivel.nivel_id
            })
        })
            .then(res => res.json())
            .then(res => {
                this.message.title = "Actualización"
                this.message.text = res.error ?? res.success
                this.message.type = res.error ? 'danger' : 'success'
                this.message.timestamp = new Date().toLocaleTimeString()
            })


    },
    async mounted() {
        this.carreras = await fetch('action/carrera.php').then(res => res.json())
        this.niveles = await fetch('action/nivel.php').then(res => res.json())
        // group by facultad_id
        const carreras = this.carreras.reduce((acc, cur) => {
            const { facultad_nombre } = cur
            if (!acc[facultad_nombre]) {
                acc[facultad_nombre] = []
            }
            acc[facultad_nombre].push(cur)
            return acc
        }, {} as Record<number, Carrera[]>)
        this.carreras = Object.entries(carreras).map(([facultad_nombre, carreras]) => ({
            facultad_nombre: facultad_nombre,
            carreras
        }))
    }
}).mount('#app')