Update code with changes from git diff

ts/periodos.ts

@@ -1,63 +1,145 @@
 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;
+interface Periodo {
+    created_at: Date;
+    estado_id: number;
+    id_periodo_sgu: number;
+    nivel: string;
+    nivel_id: number | '';
+    periodo_clave: string;
+    periodo_fecha_fin: Date;
+    periodo_fecha_inicio: Date;
+    periodo_id: number;
+    periodo_nombre: string;
 }
 
-type Nivel = {
+interface 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
+    periodos: [] as Array<Periodo>,
+    niveles: [] as Array<Nivel>,
+    messages: [] as Array<{ title: string, text: string, type: string, timestamp: string }>,
 
-        await fetch('action/carrera.php', {
+    addMessage(title: string, text: string, type: string) {
+        this.messages.push({ title, text, type, timestamp: new Date() });
+    },
+
+    async sendRequest(action: string, periodo_id: number, data: any) {
+        const response = await fetch('action/periodos.php', {
             method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json'
+            },
             body: JSON.stringify({
-                carrera_id: carrera.carrera_id,
-                nivel_id: nivel.nivel_id
+                action: action,
+                periodo_id: periodo_id,
+                ...data
             })
         })
-            .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()
-            })
-
-
+        return await response.json()
     },
+
+    async changeNivel(periodo: Periodo, nivel_id: number) {
+        if (periodo.nivel_id === nivel_id) return
+
+        const result = await this.sendRequest('changeNivel', periodo.periodo_id, { nivel_id: nivel_id })
+        if (result.success) {
+            this.addMessage('Nivel cambiado', `El nivel del periodo ${periodo.periodo_nombre} ha sido cambiado a ${this.niveles.find((nivel: Nivel) => nivel.nivel_id === nivel_id)?.nivel_nombre}`, 'success')
+            periodo.nivel_id = nivel_id
+            periodo.nivel = this.niveles.find((nivel: Nivel) => nivel.nivel_id === nivel_id)?.nivel_nombre || ''
+        } else {
+            this.addMessage('Error al cambiar nivel', `No se pudo cambiar el nivel del periodo ${periodo.periodo_nombre}`, 'danger')
+        }
+    },
+
+    async changeFechaInicio(periodo: Periodo, fecha_inicio: Date) {
+        const result = await this.sendRequest('changeFechaInicio', periodo.periodo_id, { periodo_fecha_inicio: fecha_inicio })
+        if (result.success) {
+            this.addMessage('Fecha de inicio cambiada', `La fecha de inicio del periodo ${periodo.periodo_nombre} ha sido cambiada a ${fecha_inicio}`, 'success')
+
+            periodo.periodo_fecha_inicio = fecha_inicio
+        } else {
+            this.addMessage('Error al cambiar fecha de inicio', `No se pudo cambiar la fecha de inicio del periodo ${periodo.periodo_nombre}`, 'danger')
+        }
+    },
+
+    async changeFechaFin(periodo: Periodo, fecha_fin: Date) {
+        const result = await this.sendRequest('changeFechaFin', periodo.periodo_id, { periodo_fecha_fin: fecha_fin })
+        if (result.success) {
+            this.addMessage('Fecha de fin cambiada', `La fecha de fin del periodo ${periodo.periodo_nombre} ha sido cambiada a ${fecha_fin}`, 'success')
+            periodo.periodo_fecha_fin = fecha_fin
+        } else {
+            this.addMessage('Error al cambiar fecha de fin', `No se pudo cambiar la fecha de fin del periodo ${periodo.periodo_nombre}`, 'danger')
+        }
+    },
+
+
+    async updatePeriodo(periodo: Periodo) {
+        const result = await this.sendRequest('updatePeriodo', periodo.periodo_id, {
+            periodo_nombre: periodo.periodo_nombre,
+            id_periodo_sgu: periodo.id_periodo_sgu,
+            periodo_clave: periodo.periodo_clave,
+        })
+        if (result.success) {
+            this.addMessage('Periodo actualizado', `El periodo ${periodo.periodo_nombre} ha sido actualizado`, 'success')
+        } else {
+            this.addMessage('Error al actualizar periodo', `No se pudo actualizar el periodo ${periodo.periodo_nombre}`, 'danger')
+        }
+    },
+
+
+    async createPeriodo(newPeriodo: Periodo) {
+
+        if (newPeriodo.periodo_nombre === null || newPeriodo.nivel_id === null || newPeriodo.periodo_fecha_inicio === null || newPeriodo.periodo_fecha_fin === null) {
+            this.addMessage('Error al crear periodo', `No se pudo crear el periodo ${newPeriodo.periodo_nombre}`, 'danger')
+            return
+        }
+
+        const result = await fetch('action/periodos.php', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(newPeriodo)
+        }).then(res => res.json())
+
+        if (result.success) {
+            this.addMessage('Periodo creado', `El periodo ${newPeriodo.periodo_nombre} ha sido creado`, 'success')
+
+            this.periodos
+            Object.keys(newPeriodo).forEach(key => newPeriodo[key] = null);
+            newPeriodo.nivel_id = '';
+            this.periodos = await fetch('action/periodos.php').then(res => res.json())
+        } else {
+            this.addMessage('Error al crear periodo', `No se pudo crear el periodo ${newPeriodo.periodo_nombre}`, 'danger')
+        }
+    },
+
+    async deletePeriodo(periodo: Periodo) {
+        const response = await fetch('action/periodos.php', {
+            method: 'DELETE',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                periodo_id: periodo.periodo_id,
+            })
+        })
+        const result = await response.json()
+
+        if (result.success) {
+            this.addMessage('Periodo eliminado', `El periodo ${periodo.periodo_nombre} ha sido eliminado`, 'success')
+            this.periodos = this.periodos.filter((p: Periodo) => p.periodo_id !== periodo.periodo_id)
+        } else {
+            this.addMessage('Error al eliminar periodo', `No se pudo eliminar el periodo ${periodo.periodo_nombre}`, 'danger')
+        }
+    },
+
     async mounted() {
-        this.carreras = await fetch('action/carrera.php').then(res => res.json())
+        this.periodos = await fetch('action/periodos.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')