25 Cambio de Estado de Citas Interactivo con Select + SweetAlert2 en Laravel | Sistema Odontológico
Duración: 15 minDescripción
🎓 Lección 25: Cambio de Estado Interactivo de Citas Médicas (Select + SweetAlert2)
El objetivo principal de esta lección es implementar la gestión y actualización dinámica del estado de las citas clínicas (Pendiente, Confirmada, En Curso, Completada, Cancelada) mediante un control tipo Select interactivo reforzado con alertas estéticas de SweetAlert2, aplicando control de acceso basado en roles (RBAC) y la validación obligatoria del teléfono de contacto.
🚀 Pasos Clave con Timestamps
- ⏱️ 00:00 🎯 Contexto y Planteamiento del Problema: Introducción a la gestión administrativa de citas desde el panel de control (Admin, Doctor, Secretaria) en contraste con la vista del paciente.
- ⏱| 01:06 💬 Comunidad y Feedback del Curso: Lectura de comentarios sobre la incorporación de historias clínicas y odontogramas en futuras lecciones.
- ⏱️ 05:06 🛣️ Definición de Rutas y Controlador: Explicación del endpoint cambiar-estado y revisión del método cambiarEstado() en el controlador.
- ⏱️ 06:14 🔐 Verificación de Permisos y Roles: Implementación de middleware y políticas de autorización (HTTP 403 Forbidden) para restringir la modificación del estado únicamente al personal autorizado.
- ⏱️ 07:22 🛡️ Sincronización en RoleSeeder: Asignación del nuevo permiso cambiar estado de citas a roles clave (SuperAdmin, Admin, Secretaria, Doctor) excluyendo al rol Paciente.
- ⏱️ 08:11 📞 Ajuste del Campo Contacto: Inclusión de la actualización obligatoria del número telefónico al reservar, solucionando la limitación del Login con Google.
- ⏱️ 10:21 🔄 Flujo Interactivo con SweetAlert2: Cambio de estado desde el selector en la tabla, confirmación modal e interacción directa para notificar al paciente.
- ⏱️ 12:00 🩺 Ciclo de Vida de la Cita: Transición de estados de la cita (Confirmada $\rightarrow$ En Curso $\rightarrow$ Completada / Cancelada) adaptado a la atención médica.
🛠️ Comandos y Rutas Principales
| Tipo / Elemento | Detalle / Comando / Ruta | Descripción |
|---|---|---|
| 🛠️ Artisan Command | php artisan db:seed --class=RoleSeeder | Sincroniza los nuevos permisos en la base de datos para los roles autorizados. |
| 🛣️ HTTP Route | POST /citas/{id}/cambiar-estado | Ruta encarga de procesar la solicitud AJAX/HTTP para actualizar el estado de la cita. |
| ⚙️ Controller Method | CitaController@cambiarEstado | Método que valida el rol, busca la cita por ID, guarda el nuevo estado y devuelve la respuesta. |
| 🎨 Frontend / UI | Select + SweetAlert2 Modal | Componente visual que dispara la alerta confirmatoria antes de ejecutar la petición al backend. |
🔒 Buenas Prácticas y Seguridad
- 🛡️ Autorización Estricta (RBAC): No confíes únicamente en la interfaz de usuario. Asegúrate de retornar una excepción de autorización (HTTP 403) en el controlador si un rol no autorizado (como el Paciente) intenta consumir el endpoint de cambio de estado.
- 📞 Integridad de Datos en Autenticación Social: Al integrar autenticación vía OAuth (p. ej., Google), complementa los campos faltantes (como el teléfono) solicitándolos como requisito obligatorio durante el flujo de reserva.
- ⚠️ Confirmación en Acciones Críticas: Utiliza modals interactivos (SweetAlert2) para solicitar confirmación explícita antes de efectuar la cancelación o cambio irreversible de estado de una cita.
