Add error management

Show message detail to user when fornt-back communication fail
sotobotero · Dec 17, 2024 · 11f7a05 · 11f7a05
1 parent a6a4b8b
commit 11f7a05
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 19 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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,20 +24,28 @@ 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();
 
   }
   ngOnInit(){}
 
 
   findAllCustomers(){
-    this.customerService.getAllcustomers().subscribe((data)=>{
-      console.log(data);
-      this.dataSource = new MatTableDataSource<Customer>(data);
-      setTimeout(() => {
-        this.dataSource.paginator = this.paginator;
-      }, 0);
+    this.customerService.getAllcustomers().subscribe({
+      next: (data) => {
+        console.log(data);
+        this.dataSource = new MatTableDataSource<Customer>(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
@@ -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 {}
diff --git a/src/app/modules/sidenav/sidenav.component.html b/src/app/modules/sidenav/sidenav.component.html
@@ -6,7 +6,7 @@
             <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon" (click)="saveit()">
         <mat-icon>menu</mat-icon>
       </button>
-      <span>Customer PWA</span>   
+      <span>Tech Mart CRM</span>   
  </mat-toolbar-row>
     <mat-toolbar-row>
       <span class="menu-spacer"></span>

diff --git a/src/index.html b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>CustomerPwa</title>
+  <title>Tech Mart RM</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">