1.8

src/app/app.module.ts

@@ -6,6 +6,10 @@ import { AppComponent } from './app.component';
 import { VinoListarComponent } from './vino-listar/vino-listar.component';
 import { EditarVinoComponent } from './editar-vino/editar-vino.component';
 
+import { ClienteApiRestService } from './shared/cliente-api-rest.service';
+import { DataService } from './shared/data.service';
+import { HttpClientModule } from '@angular/common/http';
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -14,9 +18,11 @@ import { EditarVinoComponent } from './editar-vino/editar-vino.component';
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    HttpClientModule
   ],
-  providers: [],
+  providers: [ClienteApiRestService,
+    DataService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/shared/app.model.ts

+export interface Vino {
+    bodegaId: Number,
+    categoria: String,
+    precio: Number,
+    denominacion: String,
+    id: Number,
+    nombreComercial: String
+}
\ No newline at end of file

src/app/shared/cliente-api-rest.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { ClienteApiRestService } from './cliente-api-rest.service';
+
+describe('ClienteApiRestService', () => {
+  let service: ClienteApiRestService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ClienteApiRestService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/shared/cliente-api-rest.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient, HttpResponse, HttpHeaders } from '@angular/common/http';
+import { Vino } from './app.model';
+import { Observable } from 'rxjs';
+@Injectable({ providedIn: 'root' })
+export class ClienteApiRestService {
+  private static readonly BASE_URI = 'http://localhost:8080/ejemploVinos/';
+  constructor(private http: HttpClient) { } // inyectamos el servicio HttpClient
+  // Ejemplo de llamada retornando el cuerpo de la respuesta
+  getAllVinos() {
+    console.log("dentro de getAllVInos");
+    let url = ClienteApiRestService.BASE_URI;
+    return this.http.get<Vino[]>(url); // Retorna el cuerpo de la respuesta
+  }
+  // Ejemplo de llamada retornando toda la respuesta
+  getAllVinos_ConResponse(): Observable<HttpResponse<Vino[]>> {
+    let url = ClienteApiRestService.BASE_URI;
+    return this.http.get<Vino[]>(url, { observe: 'response' });
+  }
+  borrarVino(id: String): Observable<HttpResponse<any>> {
+    let url = ClienteApiRestService.BASE_URI + id;
+    return this.http.delete(url, { observe: 'response', responseType: 'text' });
+  }
+  anadirVino(vino: Vino): Observable<HttpResponse<any>> {
+    let url = ClienteApiRestService.BASE_URI;
+    return this.http.post(url, vino, { observe: 'response', responseType: 'text' });
+  }
+  modificarPrecio(id: String, vino: Vino): Observable<HttpResponse<any>> {
+    let url = ClienteApiRestService.BASE_URI + id;
+    return this.http.put(url, vino, { observe: 'response', responseType: 'text' });
+  }
+  getVino(id: String): Observable<HttpResponse<Vino>> {
+    let url = ClienteApiRestService.BASE_URI + id;
+    return this.http.get<Vino>(url, { observe: 'response' });
+  }
+}
\ No newline at end of file

src/app/shared/data.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { DataService } from './data.service';
+
+describe('DataService', () => {
+  let service: DataService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DataService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/shared/data.service.ts

+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs'
+@Injectable({ providedIn: 'root' })
+export class DataService {
+  // Usamos mensajes para mostrar el resultado de la operacion
+  private mensaje = new BehaviorSubject('Lista de Vinos'); // hay que inicializarlo
+  mensajeActual = this.mensaje.asObservable(); // Lo exponemos como un observable
+  // Usamos esta variable para indicar si hay que mostrar o no el mensaje
+  private mostrarMensaje = new BehaviorSubject<boolean>(false);
+  mostrarMensajeActual = this.mostrarMensaje.asObservable();
+  constructor() { }
+  // Para actualizar mensaje
+  cambiarMensaje(mensaje: string) {
+    this.mensaje.next(mensaje);
+  }
+  cambiarMostrarMensaje(valor: boolean) {
+    this.mostrarMensaje.next(valor);
+  }
+}
\ No newline at end of file

src/app/vino-listar/vino-listar.component.html

-<p>vino-listar works!</p>
+<p *ngIf="mostrarMensaje">{{mensaje}}</p>
+<div class="container">
+    <div class="row">
+        <div class="col-sm-12">
+            <form class="form-inline">
+                <fieldset class="form-group col-sm-12"></fieldset>
+                <fieldset class="form-group col-sm-1">
+                    <a class="btn btn-primary" [routerLink]="['/vinos/nuevo']">+</a>
+                </fieldset>
+            </form>
+            <table class="table table-striped">
+                <thead>
+                    <tr class="row">
+                        <th>Nombre</th>
+                        <th>Bodega</th>
+                        <th>Categoria</th>
+                        <th>Denominacion</th>
+                        <th>Precio</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let vino of Vinos" class="row">
+                        <td><i>{{vino.nombreComercial}}</i></td>
+                        <td><i>{{vino.bodegaId}}</i></td>
+                        <td><i>{{vino.categoria}}</i></td>
+                        <td><i>{{vino.denominacion}}</i></td>
+                        <td><i>{{vino.precio}}</i></td>
+                        <td><a class="btn btn-info" [routerLink]="['/vinos', vino.id,
+'editar']"> Editar </a> </td>
+                        <td><a class="btn btn-danger" (click)="borrar(vino.id)">-</a></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/vino-listar/vino-listar.component.ts

 import { Component, OnInit } from '@angular/core';
+import { ClienteApiRestService } from '../shared/cliente-api-rest.service';
+import { Vino } from '../shared/app.model';
+import { DataService } from '../shared/data.service';
+
 
 @Component({
   selector: 'app-vino-listar',
   templateUrl: './vino-listar.component.html',
   styleUrls: ['./vino-listar.component.css']
 })
-export class VinoListarComponent implements OnInit {
-
-  constructor() { }
 
-  ngOnInit(): void {
+export class VinoListarComponent implements OnInit {
+  Vinos!: Vino[];
+  mostrarMensaje!: boolean;
+  mensaje!: string;
+  // Inyectamos los servicios
+  constructor(private clienteApiRest: ClienteApiRestService, private datos: DataService) { }
+  //método ejecutado tras la construcción del componente. Es el lugar adecuado para cargar datos
+  ngOnInit() {
+    /*** Cargamos vinos accediendo a la respuesta */
+    this.getVinos_AccesoResponse();
+  }
+  getVinos_AccesoResponse() {
+    this.clienteApiRest.getAllVinos_ConResponse().subscribe(
+      resp => {
+        //console.log("Cabeceras: " + resp.headers.keys());
+        //console.log("Status: " + resp.status);
+        if (resp.status < 400) { // Si no hay error en la respuesta
+          this.Vinos = resp.body!; // se accede al cuerpo de la respuesta
+        } else {
+          this.mensaje = 'Error al acceder a los datos';
+          this.mostrarMensaje = true;
+        }
+      },
+      err => {
+        console.log("Error al traer la lista: " + err.message);
+        throw err;
+      }
+    )
   }
 
+  borrar(id: Number) {
+    this.clienteApiRest.borrarVino(String(id)).subscribe(
+      resp => {
+        if (resp.status < 400) { // Si no hay error en la respuesta
+          // actualizamos variable compartida
+          this.mostrarMensaje = true;
+          // actualizamos variable compartida
+          this.mensaje = resp.body; // mostramos el mensaje retornado por el API
+          //Actualizamos la lista de vinos en la vista
+          this.getVinos_AccesoResponse();
+        } else {
+          this.mostrarMensaje = true;
+          this.mensaje = "Error al eliminar registro";
+        }
+      },
+      err => {
+        console.log("Error al borrar: " + err.message);
+        throw err;
+      }
+    )
+  }
 }
\ No newline at end of file

src/index.html

 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>EjRestClient</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <!-- compiled and minified CSS -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
+  <!-- jQuery library -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+  <!-- compiled JavaScript -->
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
 </head>
+
 <body>
   <h1>Mi primera aplicación Angular</h1>
   <app-root></app-root>
 </body>
+
 </html>
\ No newline at end of file