Fin adminPro - Producción listo

LazyLoad, implementar canLoad en AuthGuard

• LazyLoad
• Implementación de canLoad en nuestro AuthGuard
• Cambios en los environments para producción

Fin sección 18

Búsqueda global, AdminGuard y Menú del lado del servidor

• Búsqueda global por NOMBRE en toda la aplicación, para usuarios, médicos y hospitales (GET)
• Obtención del termino de búsqueda usando ActivatedRoute
• Uso de funciones de jQuery en Angular declare var $: any
• AutoFocus al abrir la caja de búsqueda (usando (click) en el botón de abrir la búsqueda y una función en el componente con un timeout de 200ms, para que le de tiempo a crear el input antes de hacer foco en el)
• AutoCierre de la caja de búsqueda al perder el foco (Con animación de jQuery usando .toggle())

---

• Establecer en el módelo de usuarios el role como 'ADMIN_ROLE' o 'USER_ROLE' en lugar de string
• AdminGuard para el mantenimiento de usuarios con verificación de role

---

• Guardar el menu en el LocalStorage al validar el JWT, al hacer login y al crear usuario
• Cargar el menu en el SidebarService
• Marcar el SidebarService como public para que pase por referencia y ahí actualizar el menu para poder cargarlo

Fin sección 17

Mantenimientos de Médicos y Hospitales

• Dashboard de mantenimiento de Médicos y Hospitales (Actualizar, Borrar y Crear)
• Creación de modelo de Médicos y Hospitales
• Componente reutilizable de Médico tanto para crear como para actualizar médico (medico/:id y medico/nuevo) (Reactive Forms)
• Actulizar nombre de hospital mediante ngModel y onChanges
• Borrado de Médicos y Hospitales
• Servicios de Médicos y Hospitales (CRUD)
• Búsqueda de medicos y hospitales mediante /api/todo/coleccion/medicos u hospitales (GET)
• Retornar "No se ha encontrado ningún medico por ese nombre" en caso de que el médico a buscar no exista
• Creación de un hospital mediante un popup de SweetAlert con un input
• Creación de Pipe para mostrar imágenes (Google URL o Archivo local en Backend)
• Mostrar hospital asignado del médico en base a un Obtener médico por ID (Medico.Service) Cargar médico y toda su información si es que este existe

Fin sección 16

Mantenimiento de Usuarios y modal de carga de imágenes

• Crear dashboard de mantenimiento de usuarios
• Cargar usuarios de la DB en Usuario.Service (GET)
• Creación de instancia de Usuario en Usuario.Service
• Búsqueda de usuarios mediante /api/todo/coleccion/usuarios (GET)
• Actualizar Rol del usuario (Usando ngModel y change)
• Borrar usuario con confirmación, bloqueando borrarse a si mismo (Only Administradores )
• Crear un modal para cambiar la imagen de los usuarios (Only Administradores)
• Verificación para los usuarios, si no es Admin, no le sale el cursor en el avatar para cambiar la imagen ni el botón de borrar usuarios.
• Mostrar/Ocultar modal con clase dinámica gracias al ModalImagenService haciendolo público y pudiendo acceder por el HTML
• Emitir notificaciones de cambio en imagenes para que recargue automáticamente (Event Emitter)

Fin sección 15

Carga de imágenes, referenciación de UsuarioService, Fetch y readAsDataURL (Base64 Images)

• Get ImagenUrl en usuario.model (Retorna path completo de imagen tanto para usuario normal como para usuario de Google)
• Gets de Token y UID en el UsuarioService para obtener fácilmente los datos creados en la nueva instancia de Usuario
• Creación y extracción de los datos de usuario en el método de validarToken (Al ser este método pasado por el guard y ejecutarse en cada página del dashboard tendria disponible siempre los datos de usuario graciasa la instancia creada con this.usuario = new Usuario(nombre,email..))
• Referenciacion de UsuarioService en Sidebar y en Header
• Recibir el File desde el Input Type File $event.target.files[0]
• FileReader y readAsDataURL (Convierte el archivo a base64)
• Input ReadOnly y validación en Back-end
• Carga de imágenes usando Fetch en un nuevo servicio (FileUploadService)
• Crear el componente del perfil del usuario para actualizarlo
• Cambio en tiempo real del nombre de usuario y email gracias a nuestro UsuarioService (Debido a que todo pasa por referencia en JavaScript)
• Notificar actualización de imagen y de usuario con SweetAlert
• Vista previa de la imagen seleccionada en tiempo real (Usando base64 para mostrarla)

Fin sección 14

Auth y Google Sign In

• Usar Sweet Alert para mostrar mensajes de error (Package: sweetalert2)
• Login normal de usuario (POST A NUESTRO BACKEND)
• Integración del login de Google
• NgZone (Para resolver un warning de que el enrutamiento de Angular lo estaba haciendo una libreria externa y Angular perdia el control del ciclo de vida)
• LocalStorage para almacenar tokens
• Protección básica de rutas - AuthGuard (Limitar acceso al Dashboard si no tiene el Token en el LocalStorage)
• Logout (Borrado de token del LocalStorage y mandarle a la libreria de Google la peticion del Logout

Fin sección 8

Observables, Promesas y BreadCrumbs

• Trabajaremos con promesas y funciones que retornan promesas
• Crear un observable manualmente
• Operadores de RxJS:

• Retry
• Interval
• Map
• Filter
• Next

• Funciones que retornan observables
• Creando BreadCrumbs
• Route ActivationEnd
• Usaremos observables para leer parámetros de configuración de las rutas que son diferentes a los parámetros de las rutas por url
• Cambiaremos los metatags dependiendo de la página donde nos encontremos
• Cambiar el titulo de la página actual

Fin sección 7

Servicios básicos, temas, rutas básicas y persistencia de los ajustes

• Crearemos un módulo para agrupar todos nuestros servicios
• Aprenderemos a ejecutar scripts en archivos de JavaScript puros, en TypeScript
• LocalStorage
• Uso del RouterLink
• Cambiar CSS de forma dinámica (setAttribute)
• Crear un componente para los ajustes del tema
• Tips de JavaScript que se pueden usar en TypeScript
• MenuItems
• Preparar el servicio del Sidebar, el cual usaremos más adelante para crear nuestro menú dinámico en base a las respuestas de nuestro backend server

Fin sección 6

Inputs, Gráficas, CSS Condicional y EventEmitter

• Inputs y Outputs
• Aprenderemos como utilizar atributos personalizados
• IncrementadorComponente - Componente reutilizable para incrementar el valor de los ProgressBar
• EventEmitter - Emisión de eventos a través de otro componente
• Añadir clases de CSS de manera condicional
• NG2Charts - Gráfica en un componente independiente

Fin sección 4

Modularización de componentes, SharedModule y Rutas

• Distribución de nuestros componentes en diferentes módulos
• Creación de un SharedModule
• AuthRouting y PagesRouting
• Despliegue de la página 404