Fin de la sección 16

src/app/models/hospital.model.ts

@@ -0,0 +1,9 @@
+export class Hospital {
+
+    constructor (
+        public nombre: string,
+        public img?: string,
+        public _id?: string
+    ) { }
+
+}

src/app/models/medico.model.ts

@@ -0,0 +1,10 @@
+export class Medico {
+
+    constructor(
+        public nombre?: string,
+        public img?: string,
+        public usuario?: string,
+        public hospital?: string,
+        public _id?: string
+    ) { }
+}

src/app/pages/hospitales/hospitales.component.html

@@ -0,0 +1,64 @@
+<div class="row">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-body">
+
+                <input #input (keyup)="buscarHospital( input.value )"  type="text" class="form-control" placeholder="Buscar hospital">
+
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<div class="row">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-body">
+
+                <div class="text-right">
+                    <button  (click)="crearHospital()" type="button" class="btn waves-effect waves-light btn-rounded btn-primary">
+                        <i class="fa fa-plus"></i>
+                        Crear Hospital
+                    </button>
+                </div>
+
+                <h3 class="card-title"> Hospitales Registrados ( <small>{{ _hospitalService.totalHospitales }}</small> )</h3>
+
+                <table class="table table-hover">
+                    <thead>
+                        <tr>
+                            <th>Foto</th>
+                            <th>Hospital</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+
+                    <tbody>
+                        <tr *ngFor="let hospital of hospitales">
+                            <td>
+                                <img (click)="actualizarImagen( hospital )" [src]=" hospital.img | imagen:'hospital' " class ="img-50 pointer">
+                            </td>
+                            <td>
+                                <input [(ngModel)]="hospital.nombre" name="nombre" type="text" class="form-control" placeholder="Nombre del Hospital">
+                            </td>
+                            <td>
+
+                                <button (click)="guardarHospital( hospital )" class="btn btn-primary">
+                                    <i class="fa fa-save"></i>
+                                </button>
+
+                                <button (click)="borrarHospital( hospital )" class="btn btn-danger">
+                                    <i class="fa fa-trash-o"></i>
+                                </button>
+
+                            </td>
+                        </tr>
+                    </tbody>
+
+                </table>
+
+            </div>
+        </div>
+    </div>
+</div>

src/app/pages/hospitales/hospitales.component.ts

@@ -0,0 +1,90 @@
+import { Component, OnInit } from '@angular/core';
+import { Hospital } from 'src/app/models/hospital.model';
+import { HospitalService } from 'src/app/services/service.index';
+
+import Swal from 'sweetalert2'
+import { ModalUploadService } from 'src/app/components/modal-upload/modal-upload.service';
+
+@Component({
+  selector: 'app-hospitales',
+  templateUrl: './hospitales.component.html',
+  styles: []
+})
+export class HospitalesComponent implements OnInit {
+
+  hospitales: Hospital[] = [];
+
+  constructor(
+    public _hospitalService: HospitalService,
+    public _modalUploadService: ModalUploadService
+  ) { }
+
+  ngOnInit() {
+    this.cargarHospitales();
+    this._modalUploadService.notificacion
+        .subscribe( () => this.cargarHospitales() );
+  }
+
+  buscarHospital( termino:string ) {
+
+    if ( termino.length <= 0  ){
+      this.cargarHospitales();
+      return;
+    }
+
+    this._hospitalService.buscarHospital( termino )
+        .subscribe( hospitales => this.hospitales = hospitales );
+
+  }
+
+  cargarHospitales(){
+    this._hospitalService.cargarHospitales()
+        .subscribe( hospitales =>  this.hospitales = hospitales );
+  }
+
+  guardarHospital ( hospital: Hospital ){
+
+    this._hospitalService.actualizarHospital( hospital )
+        .subscribe( );
+
+
+  }
+
+  borrarHospital ( hospital: Hospital ){
+
+    this._hospitalService.borrarHospital( hospital._id )
+        .subscribe( () => this.cargarHospitales() );
+
+  }
+
+  crearHospital() {
+
+    Swal.fire({
+      title: 'Crear Hospital',
+      text: 'Ingrese el nombre del Hospital',
+      input: 'text',
+      type: 'success',
+      confirmButtonText: 'Ok'
+    }).then( (valor ) => {
+
+      if( !valor.value || valor.value.length === 0 ){
+        console.log('valor esta vacio');
+        return;
+      }
+      console.log('llamada al hospital service');
+      this._hospitalService.crearHospital( valor.value )
+          .subscribe( () => this.cargarHospitales() );
+
+
+    } );
+
+  }
+
+
+  actualizarImagen( hospital: Hospital) {
+
+    this._modalUploadService.mostrarModal( 'hospitales', hospital._id )
+
+  }
+
+}

src/app/pages/medicos/medico.component.html

@@ -0,0 +1,44 @@
+<div class="row animated fadeIn">
+    <div class="col-md-6">
+        <div class="card card-body">
+            <h3 class="box-title m-b-0">Médico: {{ medico.nombre }}</h3>
+            <div class="row">
+                <div class="col-sm-12 col-xs-12">
+                    <form #f="ngForm" ngNativeValidate (ngSubmit)="guardarMedico(f)">
+                        <div class="form-group">
+                            <label>Nombre del médico</label>
+                            <input [(ngModel)]="medico.nombre" name="nombre" type="text" class="form-control" placeholder="Nombre del médico" required />
+                        </div>
+                        <div class="form-group">
+                            <label>Hospital</label>
+                            <select (change)="cambioHospital( $event.target.value )" [(ngModel)]="medico.hospital" name="hospital" class="form-control" required>
+                                <option value="">Seleccione Hospital</option>
+                                <option *ngFor="let hospital of hospitales" [value]="hospital._id" > {{ hospital.nombre }} </option>
+                            </select>
+                        </div>
+                        <button type="submit" class="btn btn-success waves-effect waves-light m-r-10">
+                            <i class="fa fa-save"></i>
+                            Guardar
+                        </button>
+                        <a routerLink="/medicos" class="btn btn-inverse waves-effect waves-light">Cancelar</a>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-md-3">
+        <div class="card card-body">
+            <h4 class="box-title m-b-0">Hospital</h4>
+            <img [src]=" hospital.img | imagen:'hospital' " class="rounded img-fluid">
+        </div>
+    </div>
+    <div class="col-md-3" *ngIf="medico._id">
+        <div class="card card-body">
+            <h4 class="box-title m-b-0">Fotografía</h4>
+            <img (click)="cambiarFoto()" [src]="medico.img | imagen:'medico'" class="img-circle rounded img-fluid pointer">
+        </div>
+    </div>
+
+
+</div>

src/app/pages/medicos/medico.component.ts

@@ -0,0 +1,95 @@
+import { Component, OnInit } from '@angular/core';
+import { MedicoService, HospitalService } from 'src/app/services/service.index';
+import { NgForm } from '@angular/forms';
+import { Hospital } from 'src/app/models/hospital.model';
+import { Medico } from 'src/app/models/medico.model';
+import { Router, ActivatedRoute } from '@angular/router';
+import { ModalUploadService } from 'src/app/components/modal-upload/modal-upload.service';
+
+
+@Component({
+  selector: 'app-medico',
+  templateUrl: './medico.component.html',
+  styles: []
+})
+export class MedicoComponent implements OnInit {
+
+  hospitales: Hospital[] = [];
+  medico: Medico = new Medico('', '', '', '', '');
+  hospital: Hospital = new Hospital('');
+
+  constructor(
+    public _medicoService: MedicoService,
+    public _hospitalService: HospitalService,
+    public router: Router,
+    public activatedRoute: ActivatedRoute,
+    public _modalUploadService: ModalUploadService
+   ) { 
+     activatedRoute.params.subscribe( params => {
+
+      let id = params['id'];
+
+      if (id !== 'nuevo'){
+        this.cargarMedico( id );
+      }
+
+     } );
+   }
+
+  ngOnInit() {
+    this._hospitalService.cargarHospitales()
+        .subscribe( hospitales => this.hospitales = hospitales );
+
+    this._modalUploadService.notificacion
+        .subscribe( resp => {
+          // console.log( resp );
+          this.medico.img = resp.medico.img;
+        } );
+  }
+
+  cargarMedico( id: string ){
+    this._medicoService.cargarMedico( id )
+        .subscribe( medico => { 
+          console.log( medico );
+          this.medico = medico;
+          this.medico.hospital = medico.hospital._id;
+          this.cambioHospital( this.medico.hospital );
+        } );
+
+  }
+
+
+  guardarMedico( f: NgForm ) {
+
+    console.log( f.valid );
+    console.log( f.value );
+
+    if ( f.invalid ){
+      return;
+    }
+
+    this._medicoService.guardarMedico( this.medico )
+        .subscribe( medico => {
+
+          this.medico._id = medico._id;
+          this.router.navigate(['/medico', medico._id]);
+          // console.log( medico );
+        } );
+
+  }
+
+  cambioHospital( id: string ){
+    // console.log( event );
+    this._hospitalService.obtenerHospital( id )
+        .subscribe( hospital => this.hospital = hospital );
+  }
+
+
+  cambiarFoto() {
+
+    this._modalUploadService.mostrarModal( 'medicos', this.medico._id );
+
+  }
+
+
+}

src/app/pages/medicos/medicos.component.html

@@ -0,0 +1,66 @@
+<div class="row">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-body">
+
+                    <input #input (keyup)="buscarMedico( input.value )"  type="text" class="form-control" placeholder="Buscar médico">
+
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-body">
+
+                    <div class="text-right">
+                        <button  [routerLink]="['/medico','nuevo']" type="button" class="btn waves-effect waves-light btn-rounded btn-primary">
+                            <i class="fa fa-plus"></i>
+                            Crear Médico
+                        </button>
+                    </div>
+
+                    <h3 class="card-title">Médicos Registrados ( <small> {{ _medicoService.totalMedicos }} </small> ) </h3>
+
+                    <table class="table table-hover">
+                        <thead>
+                            <tr>
+                                <th>Foto</th>
+                                <th>Médico</th>
+                                <th>Hospital</th>
+                                <th></th>
+                            </tr>
+                        </thead>
+
+                        <tbody>
+                            <tr *ngFor="let medico of medicos">
+                                <td>
+                                    <img [src]=" medico.img | imagen:'medico' " class ="img-50 img-circle" >
+                                </td>
+                                <td>
+                                    {{ medico.nombre }}
+                                </td>
+                                <td>
+                                    {{ medico.hospital.nombre }}
+                                </td>
+                                <td>
+                                    <button [routerLink]="['/medico',medico._id]" class="btn btn-primary">
+                                        <i class="fa fa-edit"></i>
+                                    </button>
+
+                                    <button (click)="borrarMedico( medico )" class="btn btn-danger">
+                                        <i class="fa fa-trash-o"></i>
+                                    </button>
+                                </td>
+                            </tr>
+                        </tbody>
+
+
+                    </table>
+
+                </div>
+            </div>
+        </div>
+    </div>