paad/ts/puestos.ts

import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'
type Puesto = {
    puesto_id: number,
    nombre: string,
    facultad_id: number,
}

type Carrera = {
    carrera_id: number;
    carrera_nombre: string;
    clave_carrera: string;
}

type Materia = {
    carrera_id: number;
    clave_materia: string;
    materia_id: number;
    materia_nombre: string;
}

type Usuario = {
    usuario_clave: string;
    usuario_id: number;
    usuario_nombre: string;
}

const app = createApp({
    message: null,
    puestos: [] as Puesto[],
    carreras: [] as Carrera[],
    materias: [] as Materia[],
    usuarios: [] as Usuario[],

    async nuevoPuesto(nuevoPuesto: string) {
        try {
            const res = await fetch('action/puesto.php', {
                method: 'POST',
                body: JSON.stringify({
                    puesto_nombre: nuevoPuesto
                })
            })
            const data = await res.json()
            this.puestos.push(data)
            // order by puesto.nombre
            this.puestos.sort((a: Puesto, b: Puesto) => a.nombre.localeCompare(b.nombre))
        } catch (error) {
            alert(`Error: ${error}`)

        }
    },

    to_delete: null as Puesto | null,
    async eliminarPuesto(puesto_id: number) {
        try {
            const res = await fetch('action/puesto.php', {
                method: 'DELETE',
                body: JSON.stringify({
                    puesto_id
                })
            })
            const data = await res.json()
            this.message = data.msg;

            // after 3 seconds, remove the message
            setTimeout(() => {
                this.message = null
            }, 3000)

            this.puestos = this.puestos.filter((p: Puesto) => p.puesto_id !== puesto_id)
            // order by puesto.nombre
            this.puestos.sort((a: Puesto, b: Puesto) => a.nombre.localeCompare(b.nombre))
        } catch (error) {
            alert(`Error: ${error}`)

        }
    },

    async actualizarPuesto(puesto_id: number, materias: Materia[], usuario_id: number | null) {
        try {
            const res = await fetch('action/puesto.php', {
                method: 'PUT',
                body: JSON.stringify({
                    puesto_id,
                    materias: materias.map(m => m.materia_id),
                    usuario_id
                })
            })
            const data = await res.json()
            this.message = data.msg;

            // after 3 seconds, remove the message
            setTimeout(() => {
                this.message = null
            }, 3000)
        } catch (error) {
            alert(`Error: ${error}`)
        }
    },

    async mounted() {
        this.puestos = await fetch('action/puesto.php').then(res => res.json())
        this.carreras = await fetch('action/action_carreras.php').then(res => res.json())
        this.materias = await fetch('action/action_materias.php').then(res => res.json())
        this.usuarios = await fetch('action/usuarios.php').then(res => res.json())
    }
}).mount('#app')