Fin sección 16 - get usuarios y carga de imagenes

src/app/app-routing.module.ts

@@ -16,7 +16,7 @@ const routes: Routes = [
   // 'login'
   // 'register'
 
-  { path: '**', pathMatch: 'full', redirectTo: '/dashboard' },
+  { path: '', pathMatch: 'full', redirectTo: '/dashboard' },
   { path: '**', component: NopagefoundComponent },
 ];
 

src/app/components/components.module.ts

@@ -7,10 +7,11 @@ import { ChartsModule } from 'ng2-charts';
 
 import { IncrementadorComponent } from './incrementador/incrementador.component';
 import { DonutComponent } from './donut/donut.component';
+import { ModalImageComponent } from './modal-image/modal-image.component';
 
 @NgModule({
-  declarations: [IncrementadorComponent, DonutComponent],
-  exports: [IncrementadorComponent, DonutComponent],
+  declarations: [IncrementadorComponent, DonutComponent, ModalImageComponent],
+  exports: [IncrementadorComponent, DonutComponent, ModalImageComponent],
   imports: [CommonModule, FormsModule, ChartsModule],
 })
 export class ComponentsModule {}

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

@@ -0,0 +1,32 @@
+<div id="fondo-modal-image" [class.hide]='modalService.hideModal'>
+
+    <div class="modal fade show" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1"
+        style="display: block;">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title" id="exampleModalLabel1">Cargar imágen</h4>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
+                        (click)="closeModal()"><span aria-hidden="true">×</span></button>
+                </div>
+                <div class="modal-body">
+                    <h3>Seleccione una imagen</h3>
+
+                    <div class="text-center">
+                        <img [src]="modalService.img" alt="profile-pic" class="edit-profile-pic">
+                    </div>
+
+                    <br>
+
+                    <input type="file" (change)="changeImage($event.target.files[0])">
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal"
+                        (click)="closeModal()">Cancelar</button>
+                    <button type="button" class="btn btn-primary" (click)="updateImage()">Guardar Cambios</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>

src/app/components/modal-image/modal-image.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import { FileUploadService } from 'src/app/services/file-upload.service';
+import { ModalImageService } from 'src/app/services/modal-image.service';
+import Swal from 'sweetalert2';
+
+@Component({
+  selector: 'app-modal-image',
+  templateUrl: './modal-image.component.html',
+  styles: [],
+})
+export class ModalImageComponent implements OnInit {
+  imageToUpload: File;
+  imageUrl: string | ArrayBuffer;
+
+  constructor(
+    public modalService: ModalImageService,
+    private fileService: FileUploadService
+  ) {}
+
+  ngOnInit(): void {}
+
+  closeModal() {
+    this.modalService.closeModal();
+  }
+
+  changeImage(file: File) {
+    this.imageToUpload = file;
+
+    if (!file) return;
+
+    const reader = new FileReader();
+    const url64 = reader.readAsDataURL(file);
+    reader.onload = () => {
+      this.imageUrl = reader.result;
+      this.modalService.img = reader.result;
+    };
+    // console.log(file);
+  }
+
+  updateImage() {
+    const id = this.modalService.id;
+    const type = this.modalService.type;
+    this.fileService
+      .updateImage(this.imageToUpload, type, id)
+      .then((img) => {
+        Swal.fire('Guardado', 'Se cambió la imagen de perfíl', 'success');
+        this.modalService.newImg.emit(img);
+        this.closeModal();
+      })
+      .catch((err) => {
+        Swal.fire('Error', 'No se pudo actulizar la imagen', 'error');
+      });
+  }
+}

src/app/interfaces/repsonse-interface.ts

@@ -1 +1,32 @@
+import { Doctor } from '../models/doctor.model';
+import { Hospital } from '../models/hospital.model';
+import { User } from '../models/user.model';
+
 export interface updateUserResponse {}
+
+export interface getUsersResponse {
+  ok: boolean;
+  users: User[];
+  uid: string;
+  total: number;
+}
+
+export interface UserByTermResponse {
+  ok: boolean;
+  results: User[];
+}
+
+export interface HospByTermResponse {
+  ok: boolean;
+  results: Hospital[];
+}
+
+export interface DocByTermResponse {
+  ok: boolean;
+  results: Doctor[];
+}
+
+export interface searchByTermResponse {
+  ok: boolean;
+  results: [];
+}

src/app/models/doctor.model.ts

@@ -0,0 +1,3 @@
+export class Doctor {
+  constructor(public name: string) {}
+}

src/app/models/hospital.model.ts

@@ -0,0 +1,3 @@
+export class Hospital {
+  constructor(public name: string) {}
+}

src/app/pages/maintenance/initialTemplate.txt

@@ -0,0 +1,67 @@
+<div class="row animated fadeIn fast">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-body">
+
+                <input type="text" class="form-control" placeholder="Buscar usuario">
+
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<div class="row animated fadeIn fast">
+    <div class="col-12">
+        <div class="alert alert-info text-center">
+            <h4 class="alert-heading">Cargando...</h4>
+            <i class="fa fa-spin fa-refresh fa-2x"></i>
+            <p class="mb-0">Espere un momento.</p>
+        </div>
+    </div>
+</div>
+
+
+<div class="row animated fadeIn fast">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-body">
+                <h4 class="card-title">Usuarios</h4>
+                <h6 class="card-subtitle">Usuarios de la aplicación.</h6>
+                <div class="table-responsive table-hover">
+                    <table class="table table-bordered">
+                        <thead>
+                            <tr>
+                                <th>Imagen</th>
+                                <th>Email</th>
+                                <th>Nombre</th>
+                                <th>Rol</th>
+                                <th>Autenticación</th>
+                                <th class="text-nowrap">Acciones</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Lunar probe project</td>
+                                <td>Lunar probe project</td>
+                                <td>Lunar probe project</td>
+                                <td>Lunar probe project</td>
+                                <td>Lunar probe project</td>
+                                <td class="text-nowrap">
+                                    <a href="#" data-toggle="tooltip" data-original-title="Editar"> <i
+                                            class="fa fa-pencil text-inverse m-r-10"></i> </a>
+                                    <a href="#" data-toggle="tooltip" data-original-title="Eliminar"> <i
+                                            class="fa fa-close text-danger"></i> </a>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="text-center">
+                    <button class='btn btn-secondary mx-2'>Anterior</button>
+                    <button class='btn btn-secondary mx-2'>Siguiente</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/pages/maintenance/users/users.component.html

@@ -0,0 +1,92 @@
+<div class="row animated fadeIn fast">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-body">
+
+                <input type="text" class="form-control" placeholder="Buscar usuario" #txtSearch
+                    (keyup)="getUserByName(txtSearch.value)">
+
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<div class="row animated fadeIn fast" *ngIf="isLoading">
+    <div class="col-12">
+        <div class="alert alert-info text-center">
+            <h4 class="alert-heading">Cargando...</h4>
+            <i class="fa fa-spin fa-refresh fa-2x"></i>
+            <p class="mb-0">Espere un momento.</p>
+        </div>
+    </div>
+</div>
+
+
+<div class="row animated fadeIn fast" *ngIf="!isLoading">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-body">
+                <h4 class="card-title">Usuarios</h4>
+                <h6 class="card-subtitle">Se encontraron <strong>{{totalUsers}}</strong> usuarios de la aplicación.</h6>
+                <div class="table-responsive table-hover">
+                    <table class="table table-bordered">
+                        <thead>
+                            <tr>
+                                <th class="w100">Imagen</th>
+                                <th>Email</th>
+                                <th>Nombre</th>
+                                <th class="w140">Rol</th>
+                                <th class="w100">Autenticación</th>
+                                <th class="text-nowrap w100">Acciones</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let user of users">
+                                <td style="padding: 5px;
+                                        display: flex;
+                                        justify-content:center;
+                                        align-items:center">
+                                    <div class="user-img">
+                                        <img [src]='user.imageUrl' alt="user" class="img-profile pointer"
+                                            (click)="openModal(user)">
+                                    </div>
+                                </td>
+                                <td>{{user.email}}</td>
+                                <td>{{user.name}}</td>
+                                <td><select class="form-control" [(ngModel)]="user.role" (change)='changeRole(user)'>
+                                        <option value="ADMIN_ROLE">Admin</option>
+                                        <option value="USER_ROLE">User</option>
+                                    </select></td>
+                                <td>
+                                    <span *ngIf="user.google" class='label label-danger'
+                                        style='width:70px; text-align:center'><i class="fa fa-google"></i>oogle</span>
+                                    <span *ngIf="!user.google" class='label label-info' style='width:70px'><i
+                                            class="fa fa-envelope"></i> Email</span>
+                                </td>
+
+                                <td class="text-nowrap text-center">
+                                    <a (click)="editUser(user) " data-toggle="tooltip" data-original-title="Editar"> <i
+                                            class="fa fa-pencil text-inverse m-r-10 pointer"></i> </a>
+                                    <a (click)="deleteUser(user)" data-toggle="tooltip" data-original-title="Eliminar">
+                                        <!-- *ngIf="user.uid !== userService.uid" -->
+                                        <i class="fa fa-close text-danger pointer"></i>
+                                    </a>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div *ngIf="txtSearch.value.length == 0" style='display: flex;
+                    flex-direction: row;
+                    justify-content: center;
+                    align-items: baseline;
+                    margin-bottom: -10px;'>
+                    <button class='btn btn-secondary mx-2' (click)="changePage(-1)">Anterior</button>
+                    <p style="width:30px; text-align: center">{{(page +1)}}/{{totalPages}}</p>
+                    <button class='btn btn-secondary mx-2' (click)="changePage(1)">Siguiente</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>