From a51a495f5a88547344cf3468cccd623853efcf16 Mon Sep 17 00:00:00 2001 From: Valeria Torres Date: Sat, 22 Dec 2018 12:31:24 -0300 Subject: [PATCH] seccion 15 terminada --- src/app/app.module.ts | 2 - .../modal-upload/modal-upload.component.html | 24 +++ .../modal-upload/modal-upload.component.ts | 60 ++++++++ .../modal-upload/modal-upload.service.ts | 29 ++++ src/app/pages/pages.component.html | 6 +- src/app/pages/pages.module.ts | 6 +- src/app/pages/pages.routes.ts | 4 + .../pages/usuarios/usuarios.component.html | 67 +++++++++ src/app/pages/usuarios/usuarios.component.ts | 142 ++++++++++++++++++ src/app/services/guards/login-guard.guard.ts | 4 +- src/app/services/service.module.ts | 4 +- src/app/services/shared/sidebar.service.ts | 12 +- .../subir-archivo/subir-archivo.service.ts | 4 +- src/app/services/usuario/usuario.service.ts | 32 +++- .../nopagefound/nopagefound.component.ts | 4 + src/styles.css | 22 +++ 16 files changed, 408 insertions(+), 14 deletions(-) create mode 100644 src/app/components/modal-upload/modal-upload.component.html create mode 100644 src/app/components/modal-upload/modal-upload.component.ts create mode 100644 src/app/components/modal-upload/modal-upload.service.ts create mode 100644 src/app/pages/usuarios/usuarios.component.html create mode 100644 src/app/pages/usuarios/usuarios.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2118b47..445959b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -15,8 +15,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { ServiceModule } from './services/service.module'; - - @NgModule({ declarations: [ AppComponent, diff --git a/src/app/components/modal-upload/modal-upload.component.html b/src/app/components/modal-upload/modal-upload.component.html new file mode 100644 index 0000000..26fad57 --- /dev/null +++ b/src/app/components/modal-upload/modal-upload.component.html @@ -0,0 +1,24 @@ +
+ +
\ No newline at end of file diff --git a/src/app/components/modal-upload/modal-upload.component.ts b/src/app/components/modal-upload/modal-upload.component.ts new file mode 100644 index 0000000..066c636 --- /dev/null +++ b/src/app/components/modal-upload/modal-upload.component.ts @@ -0,0 +1,60 @@ + import { Component, OnInit } from '@angular/core'; + import { SubirArchivoService } from '../../services/subir-archivo/subir-archivo.service'; + import { ModalUploadService } from './modal-upload.service'; + +@Component({ + selector: 'app-modal-upload', + templateUrl: './modal-upload.component.html', + styles: [] +}) +export class ModalUploadComponent implements OnInit { + + imagenSubir: File = null; + imgTemp: any; + + + constructor( public _subirArcService: SubirArchivoService, + public _ms: ModalUploadService ) { + console.log('modal listo'); + } + + ngOnInit() { + } + + cerrarModal() { + + this.imagenSubir = null; + this.imgTemp = null; + this._ms.ocultarModal(); + + } + + seleccionImagen( archivo: File ) { + + if ( !archivo ) { + this.imagenSubir = null; + return; + } + if ( archivo.type.indexOf('image') < 0 ) { + swal('Cambio de Imagen', 'El archivo Seleccionada no es una imagen', 'error' ); + return; + } + this.imagenSubir = archivo; + let reader = new FileReader(); + let urlTemp = reader.readAsDataURL( archivo); + reader.onloadend = () => this.imgTemp = reader.result; + + } + + subirImagen() { + + this._subirArcService.subirArchivo( this.imagenSubir, + this._ms.tipo, + this._ms.id ) + .then( ( resp: any ) => { + this._ms.notificacion.emit( resp ); + this.cerrarModal(); + }).catch( err => console.log(err)); + } + +} diff --git a/src/app/components/modal-upload/modal-upload.service.ts b/src/app/components/modal-upload/modal-upload.service.ts new file mode 100644 index 0000000..8826073 --- /dev/null +++ b/src/app/components/modal-upload/modal-upload.service.ts @@ -0,0 +1,29 @@ +import { Injectable, EventEmitter } from '@angular/core'; + +@Injectable() +export class ModalUploadService { + + public tipo: string; + public id: string; + public oculto: string = 'oculto'; + + public notificacion = new EventEmitter(); + + + constructor() { + console.log('modal services Listo **********'); + } + + ocultarModal() { + this.oculto = 'oculto'; + this.id = null; + this.tipo = null; + } + + mostraModal( tipo: string, id: string ) { + this.oculto = ''; + this.tipo = tipo; + this.id = id; + } + +} diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html index 1657b42..184bd93 100644 --- a/src/app/pages/pages.component.html +++ b/src/app/pages/pages.component.html @@ -44,4 +44,8 @@ - \ No newline at end of file + + + + + \ No newline at end of file diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index 9b68e50..9f484f4 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -17,6 +17,8 @@ import { PromesasComponent } from './promesas/promesas.component'; import { RxjsComponent } from './rxjs/rxjs.component'; import { PipesModule } from '../pipes/pipes.module'; import { ProfileComponent } from './profile/profile.component'; +import { UsuariosComponent } from './usuarios/usuarios.component'; +import { ModalUploadComponent } from '../components/modal-upload/modal-upload.component'; @NgModule({ declarations: [ @@ -29,7 +31,9 @@ import { ProfileComponent } from './profile/profile.component'; AccountSettingsComponent, PromesasComponent, RxjsComponent, - ProfileComponent + ProfileComponent, + UsuariosComponent, + ModalUploadComponent ], exports: [ //PagesComponent, diff --git a/src/app/pages/pages.routes.ts b/src/app/pages/pages.routes.ts index f1f953e..0e4b954 100644 --- a/src/app/pages/pages.routes.ts +++ b/src/app/pages/pages.routes.ts @@ -8,6 +8,7 @@ import { PromesasComponent } from './promesas/promesas.component'; import { RxjsComponent } from './rxjs/rxjs.component'; import { LoginGuardGuard } from '../services/service.index'; import { ProfileComponent } from './profile/profile.component'; +import { UsuariosComponent } from './usuarios/usuarios.component'; const pagesRoutes: Routes = [ { path: '', @@ -21,6 +22,9 @@ const pagesRoutes: Routes = [ { path: 'rxjs', component: RxjsComponent, data: { titulo: 'RxJs'} }, { path: 'account-settings', component: AccountSettingsComponent, data: { titulo: 'Ajustes del Tema'} }, { path: 'profile', component: ProfileComponent, data: { titulo: 'Perfil de Usuario'} }, + + //Mantenimientos + { path: 'usuarios', component: UsuariosComponent, data: { titulo: 'Mantenimientos de Usuarios'} }, { path: '', pathMatch: 'full', redirectTo: '/dashboard' } ]} ]; diff --git a/src/app/pages/usuarios/usuarios.component.html b/src/app/pages/usuarios/usuarios.component.html new file mode 100644 index 0000000..68e7c08 --- /dev/null +++ b/src/app/pages/usuarios/usuarios.component.html @@ -0,0 +1,67 @@ +
+
+
+
+ +
+
+
+
+
+
+
+ Cargando +
+ +
+ Espere por favor +
+
+
+ +
+
+
+
+

Usuarios ({{totalUsuarios}})

+ + + + + + + + + + + + + + + + + + + + + +
ImagenCorreoNombreRoleAuth
+ + {{ usuario.email }}{{ usuario.nombre }} + + + + + + + +
+ + +
+
+
+
\ No newline at end of file diff --git a/src/app/pages/usuarios/usuarios.component.ts b/src/app/pages/usuarios/usuarios.component.ts new file mode 100644 index 0000000..8137f22 --- /dev/null +++ b/src/app/pages/usuarios/usuarios.component.ts @@ -0,0 +1,142 @@ +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { UsuarioService } from 'src/app/services/service.index'; +import { Subscription } from 'rxjs'; +import { Usuario } from 'src/app/models/usuario.model'; +import swal from 'sweetalert'; +import { ModalUploadService } from 'src/app/components/modal-upload/modal-upload.service'; + +declare var swal: any; + +@Component({ + selector: 'app-usuarios', + templateUrl: './usuarios.component.html', + styles: [] +}) +export class UsuariosComponent implements OnInit, OnDestroy { + + totalUsuarios; + usuarios: Usuario[]; + + usuarioSubs: Subscription; + busquedaSubs: Subscription; + deleteSubs: Subscription; + updateSubs: Subscription; + + loading = false; + cantidaPorPage = 5; + desde: number = 0; + + constructor( public _us: UsuarioService, + public _ms: ModalUploadService ) { } + + ngOnInit() { + this.getUsuarios(); + this._ms.notificacion.subscribe( ( resp: any) => { + swal('Imagen Actualizada', resp.usuarioGuardado.nombre, 'success' ); + if ( resp.usuarioGuardado._id === this._us.usuario._id ) { + this._us.usuario.img = resp.usuarioGuardado.img; + this._us.guardarStorage( resp.usuarioGuardado._id , this._us.token, resp.usuarioGuardado ); + } + + this.updateImagenUsuarioLista( resp.usuarioGuardado ); + + } ); + } + + updateImagenUsuarioLista( usuarioGuardado: Usuario ) { + const usuario: Usuario = this.usuarios.find( ( u: any ) => u._id === usuarioGuardado._id ); + + if ( usuario ) { + usuario.img = usuarioGuardado.img; + } + } + + getUsuarios() { + + this.loading = true; + + this.usuarioSubs = this._us.getUsuarios$( this.desde ) + .subscribe( ( resp: any ) => { + this.totalUsuarios = resp.total; + this.usuarios = resp.usuarios; + this.loading = false; + }) ; + } + + cambiarDesde( desde: number = 0 ) { + + if ( this.desde + desde < 0 ) { + return; + } + + if ( this.desde + desde >= this.totalUsuarios ) { + return; + } + + this.desde += desde; + this.getUsuarios(); + } + + buscarUsuario( busqueda ) { + if ( busqueda.length <= 0 ) { + this.getUsuarios(); + return; + } + this.loading = true; + this.busquedaSubs = this._us.buscarEnUsuario$( busqueda ) + .subscribe( ( resp: any ) => { + this.totalUsuarios = resp.usuarios.length; + this.usuarios = resp.usuarios; + this.loading = false; + }); + + } + + borrarUsuario( usuario: Usuario ) { + + if ( usuario._id === this._us.usuario._id ) { + swal('No puede borra el usuario', 'No puede borrarse a si mismo', 'error'); + return; + } + + swal( { + title: '¿Esta seguro? ', + text: 'Esta a punto de eliminar el usuario ' + usuario.nombre, + icon: 'warning', + buttons: true, + dangerMode: true, + }) + .then(( borrar ) => { + if ( borrar ) { + this.deleteSubs = this._us.borrarUsuario$( usuario._id ) + .subscribe( resp => this.getUsuarios() ); + } + }); + } + + ngOnDestroy(): void { + if ( this.usuarioSubs ) { + this.usuarioSubs.unsubscribe(); + } + if ( this.busquedaSubs ) { + this.busquedaSubs.unsubscribe(); + } + if ( this.deleteSubs ) { + this.deleteSubs.unsubscribe(); + } + if ( this.updateSubs ) { + this.updateSubs.unsubscribe(); + } + } + + guardarUsuario( usuario: Usuario ) { + console.log( usuario ); + this.updateSubs = this._us.updateUsuario$( usuario ) + .subscribe( resp => console.log('actualizado!!!') ); + } + + cambiarImagenModal( usuario: Usuario ) { + this._ms.mostraModal( 'usuarios', usuario._id ); + } + +} diff --git a/src/app/services/guards/login-guard.guard.ts b/src/app/services/guards/login-guard.guard.ts index 57843f2..d20ca9f 100644 --- a/src/app/services/guards/login-guard.guard.ts +++ b/src/app/services/guards/login-guard.guard.ts @@ -2,14 +2,14 @@ import { Injectable } from '@angular/core'; import { CanActivate, Router } from '@angular/router'; import { UsuarioService } from '../usuario/usuario.service'; + + @Injectable() export class LoginGuardGuard implements CanActivate { constructor( private _us: UsuarioService, private router: Router ) { } canActivate( ): boolean { - - console.log('paso por el login Guard'); if ( this._us.estaLogueado() ) { return true; } else { diff --git a/src/app/services/service.module.ts b/src/app/services/service.module.ts index 2240ba6..dd65488 100644 --- a/src/app/services/service.module.ts +++ b/src/app/services/service.module.ts @@ -8,6 +8,7 @@ import { SettingsService, LoginGuardGuard, SubirArchivoService } from './service.index'; import { HttpClient, HttpClientModule } from '@angular/common/http'; +import { ModalUploadService } from '../components/modal-upload/modal-upload.service'; @NgModule({ @@ -22,6 +23,7 @@ import { HttpClient, HttpClientModule } from '@angular/common/http'; UsuarioService, LoginGuardGuard, SubirArchivoService, - HttpClient ] + HttpClient, + ModalUploadService ] }) export class ServiceModule { } diff --git a/src/app/services/shared/sidebar.service.ts b/src/app/services/shared/sidebar.service.ts index 92ddc55..a82aede 100644 --- a/src/app/services/shared/sidebar.service.ts +++ b/src/app/services/shared/sidebar.service.ts @@ -15,7 +15,17 @@ export class SidebarService { { titulo: 'Promesas', url: '/promesas'}, { titulo: 'Rxjs', url: '/rxjs'} ] - }]; + }, + { + titulo: 'Mantenimientos', + icono: 'mdi mdi-folder-lock-open', + submenu: [ + { titulo: 'Usuarios', url: '/usuarios' }, + { titulo: 'Hospitales', url: '/hospitales' }, + { titulo: 'Medicos', url: '/medicos' }, + ] + } + ]; constructor() { } } diff --git a/src/app/services/subir-archivo/subir-archivo.service.ts b/src/app/services/subir-archivo/subir-archivo.service.ts index 4f3808e..2211ad6 100644 --- a/src/app/services/subir-archivo/subir-archivo.service.ts +++ b/src/app/services/subir-archivo/subir-archivo.service.ts @@ -11,7 +11,6 @@ export class SubirArchivoService { subirArchivo( archivo: File, tipo: string, id: string ) { - let formData = new FormData(); let xhr = new XMLHttpRequest(); @@ -34,8 +33,7 @@ export class SubirArchivoService { const url = this.urlBackend + '/upload/' + tipo + '/' + id; xhr.open('PUT', url, true ); xhr.send( formData ); - }; - + }); } diff --git a/src/app/services/usuario/usuario.service.ts b/src/app/services/usuario/usuario.service.ts index 42cc233..7ad306c 100644 --- a/src/app/services/usuario/usuario.service.ts +++ b/src/app/services/usuario/usuario.service.ts @@ -4,7 +4,8 @@ import { HttpClient } from '@angular/common/http'; import { environment } from 'src/environments/environment'; import { map } from 'rxjs/operators'; import { Router } from '@angular/router'; -import { SubirArchivoService } from '../service.index'; +import { SubirArchivoService } from '../subir-archivo/subir-archivo.service'; +import swal from 'sweetalert'; @@ -104,12 +105,15 @@ export class UsuarioService { updateUsuario$( usuario: Usuario ) { - const url = this.urlBackend + '/usuario/' + this.usuario._id + '?token=' + this.token; + const url = this.urlBackend + '/usuario/' + usuario._id + '?token=' + this.token; return this.http.put( url, usuario ) .pipe( map( ( resp: any) => { - this.guardarStorage( resp.usuario._id , this.token, resp.usuario ); + + if ( resp.usuario._id === this.usuario._id ) { + this.guardarStorage( resp.usuario._id , this.token, resp.usuario ); + } swal( 'Usuario Actualizado Correctamente', resp.usuario.nombre, 'success'); return true; } @@ -128,6 +132,28 @@ export class UsuarioService { .catch( err => console.log(err)); } + getUsuarios$( desde: number ) { + + const url = this.urlBackend + '/usuario?desde=' + desde; + return this.http.get( url ); + } + + buscarEnUsuario$( busqueda: string ) { + const url = this.urlBackend + `/busqueda/coleccion/usuarios/${busqueda}`; + return this.http.get( url ); + } + + borrarUsuario$( idUsuario: string ) { + const url = this.urlBackend + `/usuario/${ idUsuario }?token=${this.token}`; + return this.http.delete( url ).pipe( map ( + ( resp: any ) => { + swal( 'Eliminacion', + `El usuario ${ resp.usuario.nombre} fue eliminado con exito`, + 'success'); + return true; + } + )); + } } diff --git a/src/app/shared/nopagefound/nopagefound.component.ts b/src/app/shared/nopagefound/nopagefound.component.ts index e936eb5..9b41281 100644 --- a/src/app/shared/nopagefound/nopagefound.component.ts +++ b/src/app/shared/nopagefound/nopagefound.component.ts @@ -1,5 +1,7 @@ import { Component, OnInit } from '@angular/core'; +declare function init_plugin(); + @Component({ selector: 'app-nopagefound', templateUrl: './nopagefound.component.html', @@ -10,6 +12,8 @@ export class NopagefoundComponent implements OnInit { constructor() { } ngOnInit() { + init_plugin(); } + } diff --git a/src/styles.css b/src/styles.css index e2f330b..090a42c 100644 --- a/src/styles.css +++ b/src/styles.css @@ -8,4 +8,26 @@ .w150 { width: 130px; +} + +.w70 { + width: 70px; +} + +.w50 { + width: 50px; +} + +.oculto { + display: none; +} + +.fondo-negro { + background-color: rgba( 0, 0, 0, 0.4); + position: fixed; + top: 0px; + left: 0px; + width: 100%; + height: 100PX; + z-index: 999999; } \ No newline at end of file