Proyecto AngularCLI

cliente.ts

export class Cliente {

id:number;
nombre: string;
apellido:string;
email:string;
createAt:string;
}

cliente.service.ts

import { Injectable } from '@angular/core';

import {CLIENTES} from './clientes.json';
import {Cliente} from './cliente';
import { Observable, of , throwError} from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map, catchError } from 'rxjs/operators';
import swal from 'sweetalert2';
import { Router } from '@angular/router';

@Injectable({
providedIn: 'root'
})
export class ClienteService {

private urlEndPoint: string =

'http://localhost:8088/curso_udemy/clientes';

private httpHeaders = new HttpHeaders({

'Content-Type':'application/json'
});

constructor(private http:HttpClient, private router:Router) { }

getClientes(): Observable<Cliente[]> {
//return of(CLIENTES);
return this.http.get(this.urlEndPoint).pipe(
map(response => response as Cliente[])
);
}
 create(cliente:Cliente):Observable<any>{
return this.http.post<any>(this.urlEndPoint, cliente, {headers:
this.httpHeaders}).pipe(
catchError(e =>{
console.log('Error al crear cliente',e.error.mensaje)
swal.fire('Error al crear cliente:
'+e.error.mensaje,e.error.error,'error')
return throwError(e);
})
);
}

getCliente(id:number): Observable<Cliente>{
return this.http.get<Cliente>(`${this.urlEndPoint}/${id}`).pipe(
catchError ( e =>{
this.router.navigate(['/clientes']);
console.log('Error:',e.error.mensaje)
swal.fire('Error al editar: '+e.error.mensaje,e.error.error,'error')
return throwError(e)
})
);
}

update(cliente: Cliente): Observable<Cliente>{

return this.http.put<Cliente>(`${this.urlEndPoint}/${cliente.id}`,
cliente, {headers: this.httpHeaders}).pipe(
catchError(e =>{
console.log('Error al editar cliente',e.error.mensaje)
swal.fire('Error al editar cliente:
'+e.error.mensaje,e.error.error,'error')
return throwError(e);
})
);
}

delete(id: number): Observable<Cliente>{

return this.http.delete<Cliente>(`${this.urlEndPoint}/${id}`, {headers:
this.httpHeaders}).pipe(
catchError(e =>{
console.log('Error al borrar cliente',e.error.mensaje)
swal.fire('Error al borrar cliente:
'+e.error.mensaje,e.error.error,'error')
return throwError(e);
})
 );
}

clientes.component.html

<div class="card">
<div class="card-header">Clientes</div>
<div class="card-body">
<h5 class="card-title">Listado de clientes</h5>
<div class="my-2 text-left">
<button class="btn btn-rounded btn-primary" type="button"
[routerLink]="['/clientes/form']">
Crear Cliente
</button>
</div>
<div *ngIf="clientes?.length==0" class="alert alert-info">
<span>No hay registros en la base de datos Clientes.</span>
</div>
<table class="table table-bordered table-striped"
*ngIf="clientes?.length>0">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Nombre</th>
<th scope="col">Apellido</th>
<th scope="col">Correo</th>
<th scope="col">Creado en</th>
<th>editar</th>
<th>eliminar</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let cliente of clientes">
<th scope="row">{{ cliente.id }}</th>
<td>{{ cliente.nombre }}</td>
<td>{{ cliente.apellido }}</td>
<td>{{ cliente.email }}</td>
<td>{{ cliente.createAt }}</td>
 <td>
<button type="button" name="editar"
[routerLink]="['/clientes/form', cliente.id]" class="btn btn-primary btn-
sm">editar</button>
</td>
<td>
<button type="button" name="eliminar"
(click)='delete(cliente)' class="btn btn-danger btn-sm">eliminar</button>
</td>
</tr>
</tbody>
</table>

</div>
</div>

clientes.component.ts

import { Component, OnInit } from '@angular/core';

import {Cliente} from './cliente';
import {ClienteService} from './cliente.service';
import swal from 'sweetalert2'

@Component({
selector: 'app-clientes',
templateUrl: './clientes.component.html',
styleUrls: ['./clientes.component.css']
})
export class ClientesComponent implements OnInit {

clientes: Cliente[];

constructor(private clienteService: ClienteService) { }

ngOnInit() {
this.clienteService.getClientes().subscribe(
clientes => this.clientes = clientes
);
}

delete(cliente: Cliente): void {

 swal.fire({
title: 'Está seguro?',
text: `¿Seguro que desea eliminar al cliente ${cliente.nombre}
${cliente.apellido}?`,
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Si, eliminar!',
cancelButtonText: 'No, cancelar!',
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: false,
reverseButtons: true
}).then((result) => {
if (result.value) {

this.clienteService.delete(cliente.id).subscribe(
response => {
this.clientes = this.clientes.filter(cli => cli !== cliente)
swal.fire(
'Cliente Eliminado!',
`Cliente ${cliente.nombre} eliminado con éxito.`,
'success'
)
}
)

}
})
}

clientes.json.ts

import {Cliente} from './cliente';

export const CLIENTES: Cliente[] = [

{id:1,nombre:'Ariel',apellido:'Cupertino',email:'cupertino.ariel@gmail.com',
createAt:' '+ new Date()},
 {id:2,nombre:'Juan
Camilo',apellido:'Perez',email:'perez.juan@gmail.com',createAt:' '+ new
Date()},
{id:3,nombre:'Ana
Lilia',apellido:'Torroja',email:'ana.torroja@hotmail.com',createAt:' '+ new
Date()},

{id:4,nombre:'Miguel',apellido:'Juarez',email:'miguel.juarez@gmail.com',crea
teAt:' '+ new Date()},

{id:5,nombre:'Camila',apellido:'Corona',email:'camilacorona@gmail.com',creat
eAt:' '+ new Date()},

{id:6,nombre:'Irinea',apellido:'Fajardo',email:'fajardo.irinea@hotmail.com',
createAt:' '+ new Date()}
];

form.component.html

<div class="card bg-dark text-white">

<div class="card-header">{{ titulo }}</div>
<div class="card-body">

<form>
<div class="form-group row">
<label for="nombre" class="col-form-label col-sm-2">Nombre</label>
<div class="col-sm-6">
<input type="text" class="form-control"
[(ngModel)]="cliente.nombre" name="nombre">
</div>
</div>

<div class="form-group row">

<label for="apellido" class="col-form-label col-sm-
2">Apellido</label>
<div class="col-sm-6">
<input type="text" class="form-control"
[(ngModel)]="cliente.apellido" name="apellido">
</div>
</div>

<div class="form-group row">

<label for="email" class="col-form-label col-sm-2">Email</label>
 <div class="col-sm-6">
<input type="text" class="form-control"
[(ngModel)]="cliente.email" name="email">
</div>
</div>

<div class="form-group row">

<div class="col-sm-6">
<button class="btn btn-primary" role="button" (click)='create()'
*ngIf="!cliente.id else elseBlock">Crear</button>

<ng-template #elseBlock>
<button class="btn btn-primary" role="button"
(click)='update()'>Editar</button>
</ng-template>
</div>
</div>
</form>

</div>
</div>

form.component.ts

import { Component, OnInit } from '@angular/core';

import { Cliente } from './cliente';
import { ClienteService } from './cliente.service';
import { Router, ActivatedRoute } from '@angular/router';
import swal from 'sweetalert2'

@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
private titulo: string = 'Formulario de clientes';
private cliente:Cliente = new Cliente();

constructor(private clienteService: ClienteService,

private router:Router,
private activatedRoute: ActivatedRoute) {}

ngOnInit() {
this.cargarCliente()
 }

cargarCliente(): void{
this.activatedRoute.params.subscribe(params => {
let id = params['id']
if(id){
this.clienteService.getCliente(id).subscribe( (cliente) =>
this.cliente = cliente)
}
})
}

public test():void{
swal.fire('Cliente creado',`El cliente ha sido creado
exitosamente`,'success')
}

public create():void{
this.clienteService.create(this.cliente).subscribe(
json => {
this.router.navigate(['/clientes'])
swal.fire('Cliente creado',` ${json.mensaje} : El cliente
${json.cliente.nombre} ha sido creado exitosamente`,'success')
}
);
}

public update():void{
this.clienteService.update(this.cliente)
.subscribe( cliente => {
this.router.navigate(['/clientes'])
swal.fire('Cliente Actualizado', `Cliente ${cliente.nombre}
actualizado con éxito!`, 'success')
}
);
}