Fin sección 18

src/app/guards/admin.guard.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { UsuarioService } from '../services/usuario.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AdminGuard implements CanActivate {
+
+  constructor( private _usuarioService: UsuarioService,
+               private _router: Router){}
+
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): boolean {
+
+      // return (this._usuarioService.role === 'ADMIN_ROLE') ? true : false;
+
+      if (this._usuarioService.role === 'ADMIN_ROLE') {
+        return true;
+      } else {
+        this._router.navigateByUrl('/dashboard');
+        return false;
+      }
+  }
+
+}

src/app/models/usuario.model.ts

@@ -8,7 +8,7 @@ export class Usuario {
         public password?: string,
         public img?:      string,
         public google?:   boolean,
-        public role?:     string,
+        public role?:     'ADMIN_ROLE' | 'USER_ROLE',
         public uid?:      string,
     ){ }
 

src/app/pages/busqueda/busqueda.component.html

@@ -0,0 +1,105 @@
+<h5 class="card-subtitle mb-3">Resultados de: {{termino}}</h5>
+
+<div class="row animated fadeIn fast">
+    <div class="col-4">
+        <div class="card">
+            <div class="card-body">
+                <h3>Usuarios</h3>
+
+                <div class="alert alert-info animated fadeIn fast" *ngIf="usuarios.length === 0">
+                    <p class="mb-0">No hay usuarios con ese término</p>
+                </div>
+
+                <div class="table-responsive" *ngIf="usuarios.length > 0">
+                    <table class="table">
+                        <thead>
+                            <tr>
+                                <th>Avatar</th>
+                                <th>Nombre</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let usuario of usuarios"
+                                class="animated fadeIn fast">
+                                <!-- <td>{{usuario.img | imagen:'usuarios'}}</td> -->
+                                <td><img [src]="usuario.img | imagen:'usuarios'" class="w75"></td>
+                                <td>{{usuario.nombre}}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+            </div>
+        </div>
+    </div>
+    <div class="col-4">
+        <div class="card">
+            <div class="card-body">
+                <h3>Médicos</h3>
+
+                <div class="alert alert-info animated fadeIn fast" *ngIf="medicos.length === 0">
+                    <p class="mb-0">No hay médicos con ese término</p>
+                </div>
+
+                <div class="table-responsive" *ngIf="medicos.length > 0">
+                    <table class="table">
+                        <thead>
+                            <tr>
+                                <th>Foto</th>
+                                <th>Nombre</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let medico of medicos"
+                                class="animated fadeIn fast">
+
+                                    <td>
+                                        <a routerLink="/dashboard/medico/{{medico._id}}">
+                                            <img [src]="medico.img | imagen:'medicos'" class="w75">
+                                        </a>
+                                    </td>
+                                    <td>
+                                        <a routerLink="/dashboard/medico/{{medico._id}}">
+                                            {{medico.nombre}}
+                                        </a>
+                                    </td>
+
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+            </div>
+        </div>
+    </div>
+    <div class="col-4">
+        <div class="card">
+            <div class="card-body">
+                <h3>Hospitales</h3>
+
+                <div class="alert alert-info animated fadeIn fast" *ngIf="hospitales.length === 0">
+                    <p class="mb-0">No hay hospitales con ese término</p>
+                </div>
+
+                <div class="table-responsive" *ngIf="hospitales.length > 0">
+                    <table class="table">
+                        <thead>
+                            <tr>
+                                <th>Foto</th>
+                                <th>Nombre</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let hospital of hospitales"
+                                class="animated fadeIn fast">
+                                <td><img [src]="hospital.img | imagen:'hospitales'" class="w75"></td>
+                                <td>{{hospital.nombre}}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</div>

src/app/pages/busqueda/busqueda.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { BusquedasService } from '../../services/busquedas.service';
+
+import { Hospital } from '../../models/hospital.model';
+import { Medico } from '../../models/medico.model';
+import { Usuario } from '../../models/usuario.model';
+
+@Component({
+  selector: 'app-busqueda',
+  templateUrl: './busqueda.component.html',
+  styles: [
+  ]
+})
+export class BusquedaComponent implements OnInit {
+
+  public usuarios: Usuario[] = [];
+  public medicos: Medico[] = [];
+  public hospitales: Hospital[] = [];
+  public termino: string = '';
+
+  constructor(private _activatedRoute: ActivatedRoute,
+              private _busquedasService: BusquedasService) { }
+
+  ngOnInit(): void {
+    this._activatedRoute.params
+        .subscribe( ({termino}) => this.busquedaGlobal(termino));
+  }
+
+  busquedaGlobal(termino: string){
+    this._busquedasService.busquedaGlobal(termino)
+        .subscribe((resp: any) => {
+          console.log(resp);
+          this.termino    = termino;
+          this.usuarios   = resp.usuarios;
+          this.medicos    = resp.medicos;
+          this.hospitales = resp.hospitales;
+        })
+  }
+
+}

src/app/pages/pages-routing.module.ts

@@ -17,6 +17,8 @@ import { UsuariosComponent } from './mantenimientos/usuarios/usuarios.component'
 import { MedicosComponent } from './mantenimientos/medicos/medicos.component';
 import { HospitalesComponent } from './mantenimientos/hospitales/hospitales.component';
 import { MedicoComponent } from './mantenimientos/medicos/medico.component';
+import { BusquedaComponent } from './busqueda/busqueda.component';
+import { AdminGuard } from '../guards/admin.guard';
 
 const routes: Routes = [
   { 
@@ -26,17 +28,20 @@ const routes: Routes = [
     children: [
       { path: '', component: DashboardComponent, data: { titulo: 'Dashboard' } },
       { path: 'account-settings', component: AccountsSettingsComponent, data: { titulo: 'Account Settings' } },
+      { path: 'buscar/:termino', component: BusquedaComponent, data: { titulo: 'Búsquedas' } },
       { path: 'charts', component: Grafica1Component, data: { titulo: 'Charts' } },
       { path: 'perfil', component: PerfilComponent, data: { titulo: 'Perfil de usuario' } },
       { path: 'progress', component: ProgressComponent, data: { titulo: 'Progresss' } },
       { path: 'promesas', component: PromesasComponent, data: { titulo: 'Promesas' } },
       { path: 'rxjs', component: RxjsComponent, data: { titulo: 'RxJS' } },
 
       // Mantenimientos
-      { path: 'usuarios', component: UsuariosComponent, data: { titulo: 'Mantenimiento de Usuarios' } },
       { path: 'hospitales', component: HospitalesComponent, data: { titulo: 'Mantenimiento de Hospitales' } },
       { path: 'medicos', component: MedicosComponent, data: { titulo: 'Mantenimiento de Médicos' } },
       { path: 'medico/:id', component: MedicoComponent, data: { titulo: 'Mantenimiento de Médicos' } },
+
+      // Rutas de Admin
+      { path: 'usuarios', canActivate: [AdminGuard] ,component: UsuariosComponent, data: { titulo: 'Mantenimiento de Usuarios' } },
     ]
   }
 ];

src/app/pages/pages.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+
 import { SettingsService } from '../services/settings.service';
+import { SidebarService } from '../services/sidebar.service';
 
 declare function customInitFunctions(): void;
 
@@ -13,11 +15,13 @@ export class PagesComponent implements OnInit {
 
 
 
-  constructor(private _settingsService: SettingsService) { }
+  constructor(private _settingsService: SettingsService,
+              private _sidebarService: SidebarService) { }
 
   ngOnInit(): void {
 
     customInitFunctions();
+    this._sidebarService.cargarMenu();
 
     // His method
 

src/app/pages/pages.module.ts

@@ -22,6 +22,7 @@ import { MedicosComponent } from './mantenimientos/medicos/medicos.component';
 import { UsuariosComponent } from './mantenimientos/usuarios/usuarios.component';
 import { HospitalesComponent } from './mantenimientos/hospitales/hospitales.component';
 import { MedicoComponent } from './mantenimientos/medicos/medico.component';
+import { BusquedaComponent } from './busqueda/busqueda.component';
 
 
 @NgModule({
@@ -37,7 +38,8 @@ import { MedicoComponent } from './mantenimientos/medicos/medico.component';
     MedicosComponent,
     UsuariosComponent,
     HospitalesComponent,
-    MedicoComponent
+    MedicoComponent,
+    BusquedaComponent
   ],
   imports: [
     CommonModule,

src/app/services/busquedas.service.ts

@@ -49,6 +49,11 @@ export class BusquedasService {
     // )
   }
 
+  busquedaGlobal(termino: string){
+    const url = `${base_url}/todo/${termino}`;
+    return this._http.get(url, this.headers)
+  }
+
 
   buscar( tipo: 'usuarios' | 'medicos' | 'hospitales', termino: string ): Observable<Usuario[] | Medico[] | Hospital[]>{
     const url = `${base_url}/todo/coleccion/${tipo}/${termino}`;

src/app/services/sidebar.service.ts

@@ -5,28 +5,37 @@ import { Injectable } from '@angular/core';
 })
 export class SidebarService {
 
-  menu: any[] = [
-    {
-      titulo: 'Dashboard!!!',
-      icono:  'mdi mdi-gauge',
-      submenu: [
-        {titulo: 'Main', url: '/' },
-        {titulo: 'ProgressBar', url: 'progress' },
-        {titulo: 'Gráficas', url: 'charts' },
-        {titulo: 'Promesas', url: 'promesas' },
-        {titulo: 'RxJS', url: 'rxjs' },
-      ]
-    },
-    {
-      titulo: 'Mantenimiento',
-      icono:  'mdi mdi-folder-lock-open',
-      submenu: [
-        {titulo: 'Usuarios', url: 'usuarios' },
-        {titulo: 'Hospitales', url: 'hospitales' },
-        {titulo: 'Médicos', url: 'medicos' }
-      ]
-    }
-  ]
+  public menu: any = [];
+
+  cargarMenu(){
+    this.menu = JSON.parse(localStorage.getItem('menu') || '');
+
+    // if (this.menu.length === 0){
+    //   // Redireccionar al login, porque el menu nunca deberia estar vacío
+    // }
+  }
+
+  // menu: any[] = [
+  //   {
+  //     titulo: 'Dashboard!!!',
+  //     icono:  'mdi mdi-gauge',
+  //     submenu: [
+  //       {titulo: 'Main', url: '/' },
+  //       {titulo: 'ProgressBar', url: 'progress' },
+  //       {titulo: 'Gráficas', url: 'charts' },
+  //       {titulo: 'Promesas', url: 'promesas' },
+  //       {titulo: 'RxJS', url: 'rxjs' },
+  //     ]
+  //   },
+  //   {
+  //     titulo: 'Mantenimiento',
+  //     icono:  'mdi mdi-folder-lock-open',
+  //     submenu: [
+  //       {titulo: 'Usuarios', url: 'usuarios' },
+  //       {titulo: 'Hospitales', url: 'hospitales' },
+  //       {titulo: 'Médicos', url: 'medicos' }
+  //     ]
+  //   }
+  // ]
 
-  constructor() { }
 }

src/app/services/usuario.service.ts

@@ -32,7 +32,7 @@ export class UsuarioService {
     return localStorage.getItem('token') || '';
   }
 
-  get role(): string {
+  get role(): 'ADMIN_ROLE' | 'USER_ROLE' {
     return this.usuario.role!;
   }
 
@@ -61,9 +61,14 @@ export class UsuarioService {
     })
   }
 
+  guardarLocalStorage(token: string, menu: any) {
+    localStorage.setItem('token',token);
+    localStorage.setItem('menu',JSON.stringify(menu));
+  }
 
   logout(){
     localStorage.removeItem('token');
+    localStorage.removeItem('menu');
 
     this.auth2.signOut().then(() => {
       this._ngZone.run(()=> {
@@ -94,7 +99,9 @@ export class UsuarioService {
         const { email, google, nombre, role, img, uid } = resp.usuario;
         this.usuario = new Usuario(nombre, email, '', img, google, role, uid);
 
-        localStorage.setItem('token',resp.token)
+        this.guardarLocalStorage(resp.token,resp.menu);
+        // localStorage.setItem('token',resp.token);
+        // localStorage.setItem('menu',resp.menu);
       }),
       map(resp => true),
       catchError(error => of(false))
@@ -105,7 +112,7 @@ export class UsuarioService {
     return this._http.post(`${base_url}/usuarios`,formData)
         .pipe(
           tap((resp: any) => {
-            localStorage.setItem('token',resp.token)
+            this.guardarLocalStorage(resp.token,resp.menu);
           })
         )
   }
@@ -124,7 +131,7 @@ export class UsuarioService {
     return this._http.post(`${base_url}/login`,formData)
         .pipe(
           tap((resp: any) => {
-            localStorage.setItem('token',resp.token)
+            this.guardarLocalStorage(resp.token,resp.menu);
           })
         )
   }
@@ -133,7 +140,7 @@ export class UsuarioService {
     return this._http.post(`${base_url}/login/google`,{token})
         .pipe(
           tap((resp: any) => {
-            localStorage.setItem('token',resp.token)
+            this.guardarLocalStorage(resp.token,resp.menu);
           })
         )
   }