Sistema Gestión de Citas Parte 9: Registrar Horario Atención Médico

Imagen 1: Relación entre tabla medicos y horarios. (Fuente: propia)

Procedimientos Almacenados

Registrar horario de atención de un médico en una fecha especifica (hora inicio y hora fin). Editar un horario de atención del médico. Listar los horario de atención de un médico seleccionado. Obtener información de un horario seleccionado.

Capa de Datos

En la capa de datos tenemos que agregar la clase HorarioDAL, esta clase contendrá los respectivos llamados a los procedimientos almacenados para el core registrar horarios de médicos.

Imagen 2: Nueva clase agregada en la capa de datos.(Fuente propia)

Contenido de la clase HorarioDAL:

Capa Lógica de Negocio

Respecto a esta clase, lo más resaltante es lo siguiente:

• Función Valida: La función Valida (valga la redundancia), lo siguiente:
• El campo que contiene el ID del médico debe tener asignado un valor, no se puede registrar un horario si no se tiene seleccionado un médico.
• La fecha de atención debe tener asignado un valor.
• La hora inicio y hora fin de atención debe tener asignado un valor. además la hora de inicio no puede ser mayor o igual a la hora fin (línea 41 y 42).
• Por otro lado, también se valida que no exista cruces con los horarios asignado al médico (línea 44 a 55).
• Función GrabarHorario: Al igual que con las funciones de registrar/editar de los cruds, la función registrar horario simplemente hace un llamado a la función valida y realiza las verificaciones explicadas líneas arriba, una vez que se haya pasado dicha verificación se realiza la acción de registrar/editar según corresponda (si el id del horario tiene como valor "-1" significa que la acción a tomar es registrar, en caso contrario se realiza la acción de editar)

Capa Presentación: RouteConfig

Actualizamos el archivo RouteConfig.cs, con el siguiente contenido:

Capa Presentación: Controlador

En la presentación actualizamos el contenido del controlador Medico.

Capa Presentación: Vista

Agregamos la vista VisualizarMedicos y Horario desde el controlador Medico.

Imagen 3: Agregar vista VisualizarMedicos. (Fuente: propia)

Imagen 4: Ventana Agregar Vista VisualizarMedicos. (Fuente: propia)

Imagen 5: Agregar vista Horario. (Fuente: propia)

Imagen 6: Ventana agregar vista Horario. (Fuente: propia)

El código de la vista VisualizarMedicos.cshtml es:
Como pueden observan el código de esta vista solo contiene la invocación a su respectivo archivo JS y un div que será la grilla dónde se mostrarán todos los médicos registrados y una opción por cada médico para poder visualizar sus horarios.

El código de la vista Horario.cshtml es:
Para esta vista lo nuevo es la invocación del plugin calendar del cual nos apoyaremos para dibujar el calendario y el horario de los médicos, más adelante detallaré los eventos que utilizaremos para agregar la funcionalidad a la pantalla.

Capa Presentación: Funcionalidad JS

Creamos el archivo VisualizarMedicos.js en la ruta App_CodeJS/Medicos.

Imagen 7: Archivo VisualizarMedicos.js. (Fuente: propia)

Este Script solo contiene a la variable model porque en esta pantalla no vamos a trabajar información del médico. La pantalla sólo servirá para listar los médicos registrados (activos) para ello reutilizamos la función que definimos en la entrada CRUD Médicos (ListarMedicosActivos). La función VerHorario esta asignada al icono del ojo que se encuentra en la columna Acciones, sirve para redireccionar a la vista Horario y enviar el ID del médico seleccionado para poder visualizar su horario de atención en el mes/semana/día.

A continuación, creamos el archivo Horario.js en la ruta App_CodeJS/Medicos.

Imagen 8: Archivo Horario.js. (Fuente: propia)

Respecto al archivo Horario.js, todo el código esta contenido dentro de una función anónima, la cuál contiene tres variables: medicoId, horario y model:

• medicoId: Almacena el Identificador (PK) del médico, con este dato podemos obtener su información (nombres y apellidos), además de su horario de atención que será mostrado en el calendario.
• horario: sirve para contener la información que se enviará y/o traerá del horario a registrar/editar. Para este caso el horario se registra por día, es decir que si se desea registrar el horario del médico para toda una semana (Lunes - Viernes) se tiene que realizar 5 registros.
• model: contiene las funciones que permiten interactuar al usuario con la vista.

Las funciones que contiene model,  son las siguiente:

1. ObtenerParametros: Leer el valor del input hidden medicoId y lo almacena en la variable global que tiene el mismo nombre.
2. ObtenerHorario: Recibe como parámetro el id del horario a buscar, dicho parámetro es enviado a la función "ObtenerHorario" del controlador y carga la información obtenida en el modal del Horario.
3. ConfigurarCalendario: Esta función permite configurar el plugin fullcalendar. Asignamos la fecha actual al plugin para que cuando se dibuje el calendario muestre el mes/semana/día actual además se configura los botones que se van a mostrar y  por último se asigna la función que será invocada cuando se haga click en las celdas del calendario (línea 70). el objeto calEvent es el encargado de llevar la información del horario por ello accedemos a la propiedad calEvent.horarioId con el fin de obtener el ID del horario a modificar.
4. RecogerDatosFormulario: Esta función recoge los datos escritos en el formulario modal y lo inserta dentro de la variable horario.
5. LimpiarDatosFormulario: Limpia los valores ingresados en los controles de la ventana modal.
6. Guardar: Invoca a la función RecogerDatosFormulario y luego envía la información del hoario a la función "GrabarHorario" del controlador, al final la función retornará un objeto del tipo RespuestaSistema el cual contiene la propiedad Correcto, si esa propiedad es devuelta en true, entonces quiere decir que se ha grabado o modificado con éxito el horario.
7. NuevoHorario: Invoca a la función LimpiarDatosFormulario y muestra el modal para ingresar la información del horario.
8. Cancelar: Oculta el modal de Horario.
9. MarcarMenu: Sirve para mantener seleccionado las opciones en el menú principal del sistema.
10. Inicio: Invoca a función MarcarMenu y ObtenerParametros, asigna las funciones a los eventos de los botones, asigna el plugin datepicker a la caja de texto de fecha del modal horario, crea el modal del horario, configura el calendario, obtiene la información de los horarios del médico y finalmente muestra el contenido de la página. 

Imagen 9: Pantalla Horario de médicos (listado de médicos). (Fuente: propia)

Imagen 10: Pantalla Horario de médico seleccionado - Vista Por Mes. (Fuente: propia).

Imagen 11: Pantalla Horario de médico seleccionado - Vista Por Semana. (Fuente: propia)

Imagen 12: Registrar nuevo horario. (Fuente: propia)

Imagen 13: Mensaje de Registro exitoso. (Fuente: propia)

[Descargar Código Fuente / Download Source Code]