Sistema Gestión de Citas Parte 10: Registrar Cita Médica - BITácora de Software

Bitacora de software: Programación web, programación de escritorio, programación de servicios, configuración de servidores, IIS, lenguajes de programación C++, C#, PHP, trinity core, unity, jquery, arduino, etc.

 

martes, 8 de septiembre de 2020

Sistema Gestión de Citas Parte 10: Registrar Cita Médica

Imagen 1: Relación entre tabla médicos, citas y pacientes. (Fuente: propia)

Procedimientos Almacenados

Buscar el horario de atención de un médico en una fecha de atención ya sea por el nombre y apellidos del médico o por la especialidad (tipo de búsqueda). Registrar cita de atención para un paciente indicando el médico, la fecha de atención y la hora inicio y fin. Editar un cita de atención de un médico y paciente en una determinada fecha de atención. Listar citas de un médico en una fecha de atención determinada. Obtener información de una cita seleccionada.

Capa de Datos

En la capa de datos tenemos que modificar la clase MedicoDAL y agregar la clase CitaDAL, esta última clase contendrá los respectivos llamados a los procedimientos almacenados para el core registrar cita médica.
Imagen 2: clase MedicoDAL modificada en la capa de datos.(Fuente propia)

Imagen 3: Nueva método ListarMedicosPorHorario agregado en la clase MedicoDAL.(Fuente propia)

código fuente de la clase:
Imagen 4: Nueva clase agregada en la capa de datos.(Fuente propia)

Contenido de la clase CitaDAL:

Capa Base Comunes

En esta capa vamos a modificar las clases MensajeSistema.cs y RespuestaSistema.cs.

Imagen 5: Modificación de clase RespuestaSistema.(Fuente propia)

Imagen 6: Propiedades agregadas a la clase RespuestaSistema.(Fuente propia)

El código:

Imagen 7: Modificación de clase MensajeSistema.(Fuente propia)

Imagen 8: Propiedades agregadas a la clase RespuestaSistema.(Fuente propia)

El código:

Capa Negocio

Agregamos el método ListarMedicosPorHorario en la capa lógica.
Imagen 9: clase MedicoBLL modificada en la capa de datos.(Fuente propia)


Imagen 10: Nueva método ListarMedicosPorHorario agregado en la clase MedicoBLL.(Fuente propia)

código fuente:

Imagen 11: Nueva clase agregada en la capa de negocio.(Fuente propia)


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 y paciente debe tener asignado un valor.
    • 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 50 y 51).
    • Se válida que el médico tenga horario disponible en la fecha de atención (hora inicio y fin)(Línea 57 a 60).
    •  Una vez que se válida que el médico tiene horario disponible se procede a validar que no exista cruce con otra cita médica (Línea 62 a 68).
  • Función GrabarCita: Al igual que con las funciones de registrar/editar de los cruds, la función registra la cita, 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 de la cita 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

Agregamos el nuevo mapeo de ruta para la pantalla del listado de cita y horario del médico seleccionado.
Imagen 12: Clase modificada.(Fuente propia)

Imagen 13: Nuevo contenido.(Fuente propia)

Modificamos el archivo RouteConfig.cs con el siguiente contenido:

Capa Presentación: Controlador

En la presentación creamos el controlador Cita. 
Imagen 14:  Agregar nuevo controlador.(Fuente propia)


Imagen 15: Seleccionar controlador en blanco.(Fuente propia)

Imagen 16: Nueva clase agregada en la capa de negocio.(Fuente propia)

código fuente:


Capa Presentación: Vista

Agregamos la vista Index y Horario desde el controlador Cita.
Imagen 17: Agregar vista Index. (Fuente: propia)

Imagen 18: Ventana Agregar Vista Index. (Fuente: propia)

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

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

El código de la vista Index.cshtml es:
El código html contiene dos controles radio button para elegir el tipo de búsqueda, fecha de atención y el filtro como tal que puede ser el nombre de la especialidad o el nombre del médico.

El código de la vista Horario.cshtml es:
En esta vista se visualizará el horario del médico (fondo melón) y sus citas registradas (color celeste) en una fecha de atención especifica.

Capa Presentación: Funcionalidad JS

Creamos el archivo Index.js en la ruta App_CodeJS/Cita.
Imagen 21: Archivo Index.js. (Fuente: propia)

Respecto al archivo Index.js, todo el código esta contenido dentro de una función anónima, la cuál contiene tres variables: opcionBusqueda, fechaAtencion, fechaConsulta, filtro y model:
  • opcionBusqueda: Almacena el tipo de búsqueda que se debe realizar: por especialidad o por nombre de médico.
  • fechaAtencion: Sirve para buscar buscar los médicos que tengan horario programado en una fecha en especifico.
  • fechaConsulta: Almacena la fecha de atención en formato en formato DD/MM/AAAA.
  • filtro: Almacena el texto que servirá como filtro para buscar la especialidad o el nombre del médico.
  • model: contiene las funciones que permiten interactuar al usuario con la vista.

Las funciones que contiene model,  son las siguiente:

  1. Buscar: Esta función toma los datos de la vista y los envía a la función ListarMedicosPorHorario ubicada en el controlador cita, los datos obtenidas se imprimen en la grilla de la vista.
  2. ConfigurarGrilla: Esta función permite asignar la cantidad de columnas que tendrá el data grid.
  3. MostrarHorario: sirve para re-direccionar a la vista donde se muestra el horario y citas registradas para un médico en una fecha de atención especifico.
  4. MarcarMenu: Sirve para mantener seleccionado las opciones en el menú principal del sistema.
  5. Inicio: Invoca a función MarcarMenu, asigna las funciones a los eventos de los botones, asigna el plugin datepicker a la caja de texto de fecha de atención.

A continuación, creamos el archivo Horario.js en la ruta App_CodeJS/Cita.
Imagen 22: 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, fechaAtencion, cita y model:
  • medicoId: Almacena el Identificador (PK) del médico, con este dato podemos obtener su horario y citas de una fecha especifica (fecha de atención).
  • fechaAtencion: Sirve para indicar la fecha de atención del horario y citas que tiene asignado el médico.
  • cita : Sirve para contener la información que se enviará y/o traerá de la cita a registrar/editar.
  • 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. Además, hace lo mismo con el input hidden fechaAtencion como el dato esta en formato AAAAMMDD, al almacenarlo en la variable global lo guarda en formato DD/MM/AAAA.
  2. ListarDatos: Sirve para invocar al web method que traer el horario y citas registradas para el médico en la fecha de atención indicada.
  3. ObtenerCita: Recibe como parámetro el id de la cita a buscar, dicho parámetro es enviado a la función "ObtenerCita" del controlador y carga la información obtenida en el modal de la Cita.
  4. 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 81). el objeto calEvent es el encargado de llevar la información del horario por ello accedemos a la propiedad calEvent.citaId con el fin de obtener el ID de la cita a modificar.
  5. LimpiarDatosFormulario: Limpia los valores ingresados en los controles de la ventana modal.
  6. NuevaCita: Invoca a la función LimpiarDatosFormulario y muestra el modal para ingresar la información de la cita.
  7. Cancelar: Oculta el modal de Horario.
  8. RecogerDatosFormulario: Esta función recoge los datos escritos en el formulario modal y lo inserta dentro de la variable cita.
  9. Guardar: Invoca a la función RecogerDatosFormulario y luego envía la información de la cita a la función "GrabarCita" 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 la cita.
  10. AutocompletarPaciente: Esta función permite mostrar una lista con los pacientes que coinciden con el texto ingresado en la caja de texto (txtDni) que invoca a la función. Esta función tiene dos parámetros de entrada el primero es "control" que hace referencia al textbox que invoca la función y el segundo parámetro es la cantidad minima de caracteres que se necesitan para invocar a la función de búsqueda interna. La lista se arma dependiendo de los valores que devuelva la función "BuscarPaciente" del controlador cita.
  11. MarcarMenu: Sirve para mantener seleccionado las opciones en el menú principal del sistema.
  12. 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 cita, crea el modal de la cita, configura el calendario, obtiene el el horario y las citas programadas del médico (para una fecha de atención) y finalmente muestra el contenido de la página. 
Imagen 23: Pantalla buscar médico disponible por nombres y fecha de atención (listado de médicos). (Fuente: propia)

Imagen 24: Pantalla Horario y citas de médico seleccionado - Vista Por Día. (Fuente: propia).

Imagen 25: Error al registrar una cita fuera del horario del médico. (Fuente: propia)

Imagen 26: Registrar nueva cita válida. (Fuente: propia)

Imagen 27: Mensaje de Registro correcto. (Fuente: propia)

Imagen 28: Error al registrar una cita en una horario ocupado por otro paciente. (Fuente: propia)

Imagen 29: Editar Cita. (Fuente: propia)

Imagen 30: Cambio de horario para la cita. (Fuente: propia)

[Repositorio]


No hay comentarios:

Publicar un comentario