seccion 15 terminada

src/app/app.module.ts

@@ -15,8 +15,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ServiceModule } from './services/service.module';
 
 
-
-
 @NgModule({
   declarations: [
     AppComponent,

src/app/components/modal-upload/modal-upload.component.html

@@ -0,0 +1,24 @@
+<div class='fondo-negro animated fadeIn' [ngClass]='_ms.oculto'>
+    <div class="modal" style='display:block' tabindex="-1" role="dialog">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Modal title</h5>
+                    <button (click)="cerrarModal()" type="button" class="close" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+                </div>
+                <div class="modal-body" align='center'>
+                    <img *ngIf="!imgTemp" [src]="'XXX' | imagen" class="w150">
+                    <img *ngIf="imgTemp" [src]="imgTemp" class="w150">
+                    <input (change)="seleccionImagen($event.target.files[0])" type="file">
+
+                </div>
+                <div class="modal-footer">
+                    <button type="button" (click)="cerrarModal()" class="btn btn-secondary">Cerrar</button>
+                    <button [disabled]="!imgTemp" (click)="subirImagen()" type="button" class="btn btn-primary">Subir Imagen</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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));
+  }
+
+}

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<any>();
+
+
+  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;
+  }
+
+}

src/app/pages/pages.component.html

@@ -44,4 +44,8 @@
     <!-- End Page wrapper  -->
     <!-- ============================================================== -->
 
-</div>
+</div>
+
+<!-- Modal Upload -->
+
+<app-modal-upload></app-modal-upload>

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,

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' }
   ]}
 ];

src/app/pages/usuarios/usuarios.component.html

@@ -0,0 +1,67 @@
+<div class="row animated fadeIn">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-body">
+                <input #input (keyup)="buscarUsuario( input.value )" type='text' class="form-control" placeholder="Buscar Usuarios ...." />
+            </div>
+        </div>
+    </div>
+</div>
+<div class="row animated fadeIn" *ngIf="loading">
+    <div class='col-sm-12'>
+        <div class='alert alert-warning text-center'>
+            <strong>Cargando</strong>
+            <br>
+            <i class='fa fa-refresh fa-spin fa-2x'></i>
+            <br>
+            <span>Espere por favor</span>
+        </div>
+    </div>
+</div>
+
+<div class="row animated fadeIn" *ngIf="!loading">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-body">
+                <h3>Usuarios (<small>{{totalUsuarios}}</small>)</h3>
+                <table class='table table-hover'>
+                    <thead>
+                        <tr>
+                            <th>Imagen</th>
+                            <th>Correo</th>
+                            <th>Nombre</th>
+                            <th>Role</th>
+                            <th>Auth</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let usuario of usuarios">
+                            <td class='w70'>
+                                <img (click)="cambiarImagenModal( usuario )" [src]="usuario.img | imagen" class="w50 img-circle pointer">
+                            </td>
+                            <td>{{ usuario.email }}</td>
+                            <td>{{ usuario.nombre }}</td>
+                            <td>
+                                <select [(ngModel)]="usuario.role" name="role">
+                                <option value='ADMIN_ROLE'>ADMIN_ROLE</option>
+                                <option value='USER_ROLE'>USER_ROLE</option>
+                              </select>
+                            </td>
+                            <td>
+                                <label *ngIf="!usuario.google" class='alert alert-info'>Normal</label>
+                                <label *ngIf="usuario.google" class='alert alert-danger'>Google</label>
+                            </td>
+                            <td>
+                                <button (click)="guardarUsuario( usuario )" class='btn btn-primary'><i class='fa fa-save'></i></button>
+                                <button (click)="borrarUsuario( usuario )" class='btn btn-danger'><i class='fa fa-trash-o'></i></button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+                <button (click)="cambiarDesde( -5 )" class='btn btn-secondary'>Anteriores</button>
+                <button (click)="cambiarDesde( 5 )" class='btn btn-secondary'>Siguientes</button>
+            </div>
+        </div>
+    </div>
+</div>

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 );
+  }
+
+}