60 Calendario de Atención de Doctores en el sistema con LARAVEL(PHP-MySql) FullStack
Duración: 14 minDescripción
🗓️ Lección 60: Diseño del Calendario de Atención
El objetivo de esta lección es implementar una vista de calendario dentro del listado de horarios (horarios.index) para transformar los datos de la tabla en un formato visual fácil de entender.
1. ⚙️ Ajuste de Layout de la Vista
El diseño se modificó para optimizar el espacio en la pantalla:
- Se decidió colocar la tabla del listado de horarios y el nuevo Calendario de Atención en filas separadas (Row) [13:26].
- Esto asegura que el listado de horarios (las acciones CRUD) ocupe un ancho completo (12 columnas), y el calendario, al ser más grande, ocupe también un ancho completo para una mejor visualización [13:46].
2. 📅 Estructura del Calendario
El calendario se construye utilizando una tabla HTML a la que se le aplican varias clases de Bootstrap (table, table-bordered, table-striped) para mejorar su apariencia [06:04].
- Cabecera de la Tabla (<thead>):
- Cuerpo de la Tabla (<tbody>):
- Las filas se definen manualmente para representar los rangos horarios, comenzando desde las 08:00 hasta las 20:00 [10:16].
- Las celdas correspondientes a los días se llenan inicialmente con datos de prueba, pero el objetivo es que, al completarse la lógica en el siguiente capítulo, muestren el nombre del Doctor (Nicole Swift) asignado a ese bloque de tiempo [10:39].
3. ⚠️ Nota sobre la Validación
El instructor señaló un problema crítico en la lógica actual de registro: el sistema permite duplicar horarios (el mismo doctor, el mismo día, en un horario que ya está ocupado) [01:48].
- Esta falta de control resulta en datos incorrectos en la base de datos.
- El instructor pospone la implementación de la validación de duplicidad (comprobar que no haya solapamiento) para un capítulo posterior, asegurando que se corregirá la lógica para restringir esta acción.
El próximo paso será cargar los datos de la base de datos en este nuevo diseño de calendario de forma automática [14:23].
Lecciones
Apoya este proyecto
Si te gusta nuestro contenido, ¡apóyanos con una donación!
Donar por Airtm Donar por Binance¡Gracias por tu apoyo! ❤️