Section 18

AdminGuard
Global Search

src/app/guards/admin.guard.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { UsersService } from '../services/users.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AdminGuard implements CanActivate {
+  constructor(
+    private usersService: UsersService,
+    private router: Router
+  ) {}
+  canActivate(
+    next: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): boolean {
+    console.log('AdminGuard');
+    if(this.usersService.role === 'ADMIN_ROLE') {
+      return true
+    } else {
+      this.router.navigateByUrl('/dashboard');
+      return false;
+    }
+  }
+
+}

src/app/models/users.model.ts

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

src/app/pages/pages.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { SettingsService } from '../services/settings.service';
+import { SidebarService } from '../services/sidebar.service';
 
 declare function customInitFunctions();
 
@@ -10,10 +11,14 @@ declare function customInitFunctions();
 })
 export class PagesComponent implements OnInit {
 
-  constructor(private settingsService: SettingsService) { }
+  constructor(
+    private settingsService: SettingsService,
+    private sidebarService: SidebarService
+  ) { }
 
   ngOnInit() {
     customInitFunctions();
+    this.sidebarService.loadMenu();
   }
 
 }

src/app/pages/pages.module.ts

@@ -18,6 +18,7 @@ import { HospitalsComponent } from './maintenance/hospitals/hospitals.component'
 import { DoctorsComponent } from './maintenance/doctors/doctors.component';
 import { PipesModule } from '../pipes/pipes.module';
 import { DoctorComponent } from './maintenance/doctors/doctor.component';
+import { SearchComponent } from './search/search.component';
 
 @NgModule({
   declarations: [
@@ -30,7 +31,8 @@ import { DoctorComponent } from './maintenance/doctors/doctor.component';
     UsersComponent,
     HospitalsComponent,
     DoctorsComponent,
-    DoctorComponent
+    DoctorComponent,
+    SearchComponent
   ],
   exports: [
     DashboardComponent,

src/app/pages/pages.routing.ts

@@ -16,6 +16,8 @@ import { UsersComponent } from './maintenance/users/users.component';
 import { HospitalsComponent } from './maintenance/hospitals/hospitals.component';
 import { DoctorsComponent } from './maintenance/doctors/doctors.component';
 import { DoctorComponent } from './maintenance/doctors/doctor.component';
+import { SearchComponent } from './search/search.component';
+import { AdminGuard } from '../guards/admin.guard';
 
 
 const routes: Routes = [
@@ -30,9 +32,10 @@ const routes: Routes = [
       { path: 'grafica1', component: Grafica1Component, data: { titulo: 'Gráfica #1' }},
       { path: 'account-settings', component: AccountSettingsComponent, data: { titulo: 'Ajustes de cuenta' }},
       { path: 'profile', component: ProfileComponent, data: { titulo: 'Profile' }},
+      { path: 'search/:value', component: SearchComponent, data: { titulo: 'Search' }},
 
       // Maintenance
-      { path: 'users', component: UsersComponent, data: { titulo: 'User maintenance' }},
+      { path: 'users', canActivate: [AdminGuard], component: UsersComponent, data: { titulo: 'User maintenance' }},
       { path: 'hospitals', component: HospitalsComponent, data: { titulo: 'Hospital maintenance' }},
       { path: 'doctors', component: DoctorsComponent, data: { titulo: 'Doctor maintenance' }},
       { path: 'doctors/:id', component: DoctorComponent, data: { titulo: 'Doctor maintenance' }},

src/app/pages/search/search.component.html

@@ -0,0 +1,103 @@
+<div class="row animated fadeIn fast">
+  <div class="col-4">
+    <div class="card">
+      <div class="card-body">
+        <h3>Users</h3>
+
+        <div class="alert alert-info" *ngIf="users.length === 0">
+          <p class="md-o">There are no users with that value</p>
+        </div>
+
+        <div class="table-responsive" *ngIf="users.length > 0">
+          <table class="table">
+            <thead>
+              <tr>
+                <th>Avatar</th>
+                <th>Name</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr *ngFor="let item of users" class="animated fadeIn fast">
+                <td>
+                  <img class="img-avatar w75 h75" 
+                        [src]="item.img | image:'users'" 
+                        alt="Avatar">
+                </td>
+                <td>{{item.name}}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-4">
+    <div class="card">
+      <div class="card-body">
+        <h3>Doctors</h3>
+
+        <div class="alert alert-info" *ngIf="doctors.length === 0">
+          <p class="md-o">There are no doctors with that value</p>
+        </div>
+
+        <div class="table-responsive" *ngIf="doctors.length > 0">
+          <table class="table">
+            <thead>
+              <tr>
+                <th>Avatar</th>
+                <th>Name</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr *ngFor="let item of doctors" class="animated fadeIn fast">
+                <td>
+                  <img class="img-avatar w75 h75" 
+                        [src]="item.img | image:'doctors'" 
+                        alt="Avatar">
+                </td>
+                <td>
+                  <a [routerLink]="['/dashboard/doctors', item._id]">{{item.name}}</a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-4">
+    <div class="card">
+      <div class="card-body">
+        <h3>Hospitals</h3>
+
+        <div class="alert alert-info" *ngIf="hospitals.length === 0">
+          <p class="md-o">There are no hospitals with that value</p>
+        </div>
+
+        <div class="table-responsive" *ngIf="hospitals.length > 0">
+          <table class="table">
+            <thead>
+              <tr>
+                <th>Avatar</th>
+                <th>Name</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr *ngFor="let item of hospitals" 
+                  class="animated fadeIn fast">
+                <td>
+                  <img class="img-avatar w75 h75" 
+                        [src]="item.img | image:'hospitals'" 
+                        alt="Avatar">
+                </td>
+                <td>{{item.name}}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pages/search/search.component.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Doctors } from 'src/app/models/doctors.model';
+import { Hospitals } from 'src/app/models/hospitals.model';
+import { Users } from 'src/app/models/users.model';
+import { SearchingService } from 'src/app/services/searching.service';
+
+@Component({
+  selector: 'app-search',
+  templateUrl: './search.component.html',
+  styles: []
+})
+export class SearchComponent implements OnInit {
+  public users: Users[] = [];
+  public hospitals: Hospitals[] = [];
+  public doctors: Doctors[] = [];
+
+  constructor(
+    private router: Router,
+    private activateRoute: ActivatedRoute,
+    private searchingService: SearchingService
+  ) { }
+
+  ngOnInit() {
+    this.activateRoute.params
+      .subscribe(({value}) => {
+        this.search(value);
+      })
+  }
+
+  search(value:string) {
+    this.searchingService.searchAll(value)
+          .subscribe((resp:any) => {
+            console.log('resp==>', resp);
+            this.users = resp.users;
+            this.hospitals = resp.hospitals;
+            this.doctors = resp.doctors;
+          });
+  }
+
+  openDoctor(doctor: Doctors) {
+    this.router.navigateByUrl(`/dashboard/doctors/${doctor._id}`);
+  }
+
+}

src/app/services/searching.service.ts

@@ -95,4 +95,26 @@ export class SearchingService {
         })
       );
   }
+
+  searchAll( value: string) {
+    const url = `${baseUrl}/all/${value}`
+    return this.http.get<any[]>(url,this.headers)
+      .pipe(
+        map( (resp:any) => {
+          if(resp.ok) {
+            const users = this.transformUsers(resp.users);
+            const hospitals = this.transformHospitals(resp.hospitals);
+            const doctors = this.transformDoctors(resp.doctors);
+
+            return {
+              ...resp,
+              users,
+              hospitals,
+              doctors
+            };
+          }
+          return resp;
+        })
+      );
+  }
 }

src/app/services/sidebar.service.ts

@@ -4,27 +4,29 @@ import { Injectable } from '@angular/core';
   providedIn: 'root'
 })
 export class SidebarService {
+  public menu: any[] = []
 
-  menu: any[] = [
-    {
-      titulo: 'Dashboard',
-      icono: 'mdi mdi-gauge',
-      submenu: [
-        { titulo: 'Main', url: '/' },
-        { titulo: 'Gráficas', url: 'grafica1' },
-        { titulo: 'ProgressBar', url: 'progress' },
-      ]
-    },
-    {
-      titulo: 'Maintenance',
-      icono: 'mdi mdi-folder-lock-open',
-      submenu: [
-        { titulo: 'Users', url: 'users' },
-        { titulo: 'Hospitals', url: 'hospitals' },
-        { titulo: 'Doctors', url: 'doctors' },
-      ]
-    },
-  ];
-
-  constructor() { }
+  loadMenu() {
+    this.menu = JSON.parse(localStorage.getItem('menu')) || [];
+  }
+  // menu: any[] = [
+  //   {
+  //     titulo: 'Dashboard',
+  //     icono: 'mdi mdi-gauge',
+  //     submenu: [
+  //       { titulo: 'Main', url: '/' },
+  //       { titulo: 'Gráficas', url: 'grafica1' },
+  //       { titulo: 'ProgressBar', url: 'progress' },
+  //     ]
+  //   },
+  //   {
+  //     titulo: 'Maintenance',
+  //     icono: 'mdi mdi-folder-lock-open',
+  //     submenu: [
+  //       { titulo: 'Users', url: 'users' },
+  //       { titulo: 'Hospitals', url: 'hospitals' },
+  //       { titulo: 'Doctors', url: 'doctors' },
+  //     ]
+  //   },
+  // ];
 }

src/app/services/users.service.ts

@@ -44,6 +44,10 @@ export class UsersService {
     }
   }
 
+  get role(): 'ADMIN_ROLE' | 'USER_ROLE' {
+    return this.user.role;
+  }
+
   createUser(formData: RegisterForm) {
     return this.http.post(
       `${baseUrl}/users`,
@@ -77,7 +81,7 @@ export class UsersService {
       tap((resp:any) => {
         console.log('Tap Resp===>', resp);
         if(resp.ok) {
-          localStorage.setItem('token', resp.token);
+          this.saveLocalStorage(resp.token, resp.menu);
         }
       })
     );
@@ -90,7 +94,7 @@ export class UsersService {
     ).pipe(
       tap((resp:any) => {
         if(resp.ok) {
-          localStorage.setItem('token', resp.token);
+          this.saveLocalStorage(resp.token, resp.menu);
         }
       })
     );
@@ -122,7 +126,7 @@ export class UsersService {
         if(resp.ok) {
           const { email, google, name, role, img = '', uid} = resp.user;
           this.user = new Users(name, email, '', img, google, role, uid);
-          localStorage.setItem('token', resp.token);
+          this.saveLocalStorage(resp.token, resp.menu);
         }
         return true;
       }),
@@ -132,6 +136,7 @@ export class UsersService {
 
   logout() {
     localStorage.removeItem('token');
+    localStorage.removeItem('menu');
     this.auth2.signOut().then(() => {
       this.ngZone.run(() => {
         this.router.navigateByUrl('/login');
@@ -171,4 +176,9 @@ export class UsersService {
     const url = `${baseUrl}/users/${uid}`
     return this.http.delete(url,this.headers);
   }
+
+  saveLocalStorage(token:string, menu:any) {
+    localStorage.setItem('token', token);
+    localStorage.setItem('menu', JSON.stringify(menu));
+  }
 }