From 11f7a05d44031b281734aa2024212578860588f4 Mon Sep 17 00:00:00 2001 From: username Date: Tue, 17 Dec 2024 13:43:22 +0100 Subject: [PATCH] Add error management Show message detail to user when fornt-back communication fail --- package-lock.json | 12 ++-- .../list-customers/customers.component.ts | 67 ++++++++++++++++--- src/app/modules/material.module.ts | 5 +- .../modules/sidenav/sidenav.component.html | 2 +- src/index.html | 2 +- 5 files changed, 69 insertions(+), 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index de9cc84..9b46fff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4552,7 +4552,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", - "dev": true, + "devOptional": true, "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -4761,7 +4761,7 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "dev": true, + "devOptional": true, "engines": { "node": ">=8" } @@ -5079,7 +5079,7 @@ "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", - "dev": true, + "devOptional": true, "funding": [ { "type": "individual", @@ -7375,7 +7375,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "dev": true, + "devOptional": true, "dependencies": { "binary-extensions": "^2.0.0" }, @@ -9155,7 +9155,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true, + "devOptional": true, "engines": { "node": ">=0.10.0" } @@ -10261,7 +10261,7 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, + "devOptional": true, "dependencies": { "picomatch": "^2.2.1" }, diff --git a/src/app/modules/customers/list-customers/customers.component.ts b/src/app/modules/customers/list-customers/customers.component.ts index 815d856..3ef33bb 100644 --- a/src/app/modules/customers/list-customers/customers.component.ts +++ b/src/app/modules/customers/list-customers/customers.component.ts @@ -6,7 +6,8 @@ import { Customer, CustomerAPIService } from 'src/services/customerService'; import { MatDialog } from '@angular/material/dialog'; import { DeleteCustomerComponent } from '../delete-customer/delete-customer.component'; import { AddCustomerComponent } from '../add-customer/add-customer.component'; - +import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; +import { HttpErrorResponse } from '@angular/common/http'; @Component({ selector: 'app-customers', @@ -23,7 +24,9 @@ export class CustomersComponent implements OnInit{ @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator; - constructor(private customerService:CustomerAPIService, public dialog: MatDialog) { + constructor(private customerService:CustomerAPIService, public dialog: MatDialog, + private snackBar: MatSnackBar, + ) { this.findAllCustomers(); } @@ -31,12 +34,18 @@ export class CustomersComponent implements OnInit{ findAllCustomers(){ - this.customerService.getAllcustomers().subscribe((data)=>{ - console.log(data); - this.dataSource = new MatTableDataSource(data); - setTimeout(() => { - this.dataSource.paginator = this.paginator; - }, 0); + this.customerService.getAllcustomers().subscribe({ + next: (data) => { + console.log(data); + this.dataSource = new MatTableDataSource(data); + setTimeout(() => { + this.dataSource.paginator = this.paginator; + }, 0); + }, + error: (err: HttpErrorResponse) => { + console.error('Error sending request:', err); + this.handleError(err); + } }) } @@ -65,7 +74,47 @@ export class CustomersComponent implements OnInit{ console.info(`Filtering customers after delete customer with id ${customer.id}`); this.dataSource.data = this.dataSource.data.filter( (customer) => customer.id !== customer.id); } - }); + } ); } + + private handleError(error: HttpErrorResponse): void { + let errorMessage = 'Ha ocurrido un error en la aplicación'; + + if (error.status === 0) { + errorMessage = 'No hay conexión del front con el backend. Asegurate que no tienes restricciones de red en tu entorno de trabajo. '+ error.message; + } else if (error.status === 404) { + errorMessage = 'No se encontraron registros.'; + } else if (error.error instanceof ErrorEvent) { + // Error del lado del cliente + errorMessage = `Error: ${error.error.message}`; + } else { + // Error del lado del servidor + errorMessage = `El servidor respondió con código ${error.status}. Mensaje: ${error.message}`; + } + this.showNotification(errorMessage, 'ERROR'); + } + + + private showNotification(message: string, type: keyof typeof this.SNACKBAR_TYPES): void { + const config: MatSnackBarConfig = { + ...this.snackBarConfig, + panelClass: [this.SNACKBAR_TYPES[type]] + }; + + this.snackBar.open(message, 'Cerrar', config); + } + + private snackBarConfig: MatSnackBarConfig = { + duration: 5000, + horizontalPosition: 'center', + verticalPosition: 'top', // Cambiado a top para que coincida con los estilos centrados + }; + + private readonly SNACKBAR_TYPES = { + ERROR: 'error-snackbar', + SUCCESS: 'success-snackbar', + WARNING: 'warning-snackbar' + } as const; + } diff --git a/src/app/modules/material.module.ts b/src/app/modules/material.module.ts index 1612441..002d0a8 100644 --- a/src/app/modules/material.module.ts +++ b/src/app/modules/material.module.ts @@ -12,6 +12,7 @@ import { MatFormFieldModule } from '@angular/material/form-field'; import { MatSelectModule } from '@angular/material/select'; import {MatCardModule} from '@angular/material/card'; import { MatInputModule } from '@angular/material/input'; +import { MatSnackBarModule } from '@angular/material/snack-bar'; @NgModule({ @@ -21,10 +22,10 @@ import { MatInputModule } from '@angular/material/input'; MatListModule, MatButtonModule, MatIconModule, CommonModule,MatFormFieldModule, MatIconModule, MatSelectModule, MatCardModule, MatFormFieldModule, MatInputModule , - MatSlideToggleModule], + MatSlideToggleModule,MatSnackBarModule], exports: [MatTableModule, MatPaginatorModule, MatToolbarModule, MatSidenavModule, MatFormFieldModule, MatIconModule, MatListModule, MatButtonModule, MatIconModule, CommonModule,MatSelectModule, MatFormFieldModule, MatInputModule , - MatCardModule] + MatCardModule,MatSnackBarModule] }) export class MaterialModule {} \ No newline at end of file diff --git a/src/app/modules/sidenav/sidenav.component.html b/src/app/modules/sidenav/sidenav.component.html index adf25bb..8e8a143 100644 --- a/src/app/modules/sidenav/sidenav.component.html +++ b/src/app/modules/sidenav/sidenav.component.html @@ -6,7 +6,7 @@ - Customer PWA + Tech Mart CRM diff --git a/src/index.html b/src/index.html index e2cac3a..0be1f72 100644 --- a/src/index.html +++ b/src/index.html @@ -2,7 +2,7 @@ - CustomerPwa + Tech Mart RM