Added alert when error ocurrs listing catalog products, orders and campaigns in SPA app

Author: ramon-tomas-c

src/Web/WebSPA/Client/modules/campaigns/campaigns.component.html

@@ -1,5 +1,8 @@
 <esh-header url="/catalog">Back to catalog</esh-header>
 <div class="container">
+    <div class="alert alert-warning esh-campaign-alert" role="alert" [hidden]="!errorReceived">
+        Error requesting campaigns list, please try later on
+    </div>
     <div *ngIf="campaigns?.data?.length > 0">
         <esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>        
         <div class="card-group esh-campaign-items row">

src/Web/WebSPA/Client/modules/campaigns/campaigns.component.scss

@@ -62,4 +62,8 @@
         text-align: center;
         text-transform: uppercase;
     }
+
+    &-alert {
+        margin-top: 10px;
+    }
 }

src/Web/WebSPA/Client/modules/campaigns/campaigns.component.ts

@@ -3,6 +3,7 @@ import { CampaignsService }        from './campaigns.service';
 import { ICampaign }               from '../shared/models/campaign.model';
 import { IPager }               from '../shared/models/pager.model';
 import { ConfigurationService } from '../shared/services/configuration.service';
+import { Observable } from 'rxjs/Observable';
 
 @Component({
     selector: 'esh-campaigns',
@@ -14,6 +15,7 @@ export class CampaignsComponent implements OnInit {
     paginationInfo: IPager;
     campaigns: ICampaign;
     isCampaignDetailFunctionEnabled: boolean = false;
+    errorReceived: boolean;
 
     constructor(private service: CampaignsService, private configurationService: ConfigurationService) { }
 
@@ -37,20 +39,28 @@ export class CampaignsComponent implements OnInit {
     }   
 
     getCampaigns(pageSize: number, pageIndex: number) {
-        this.service.getCampaigns(pageIndex, pageSize).subscribe(campaigns => {
-            this.campaigns = campaigns;
-            this.paginationInfo = {
-                actualPage : campaigns.pageIndex,
-                itemsPage : campaigns.pageSize,
-                totalItems : campaigns.count,
-                totalPages: Math.ceil(campaigns.count / campaigns.pageSize),
-                items: campaigns.pageSize
-            };
+        this.errorReceived = false;
+        this.service.getCampaigns(pageIndex, pageSize)
+            .catch((err) => this.handleError(err))
+            .subscribe(campaigns => {
+                this.campaigns = campaigns;
+                this.paginationInfo = {
+                    actualPage : campaigns.pageIndex,
+                    itemsPage : campaigns.pageSize,
+                    totalItems : campaigns.count,
+                    totalPages: Math.ceil(campaigns.count / campaigns.pageSize),
+                    items: campaigns.pageSize
+                };
         });
     }
 
     onNavigateToDetails(uri: string) {
         window.open(uri, "_blank");
     }
+
+    private handleError(error: any) {
+        this.errorReceived = true;
+        return Observable.throw(error);
+    }  
 }
 

src/Web/WebSPA/Client/modules/catalog/catalog.component.html

@@ -6,6 +6,9 @@
 
 <section class="esh-catalog-filters">
     <div class="container">
+        <div class="alert alert-warning esh-catalog-alert" role="alert" [hidden]="!errorReceived">
+            Error requesting catalog products, please try later on
+        </div>
         <label class="esh-catalog-label" data-title="brand">
             <select class="esh-catalog-filter" (change)="onBrandFilterChanged($event, $event.target.value)">
                 <option *ngFor="let brand of brands" [value]="brand.id">{{brand.brand}}</option>

src/Web/WebSPA/Client/modules/catalog/catalog.component.scss

@@ -151,4 +151,8 @@
             content: '$';
         }
     }
+
+    &-alert {
+        margin-top: 10px;
+    }
 }

src/Web/WebSPA/Client/modules/catalog/catalog.component.ts

@@ -10,6 +10,7 @@ import { ICatalogBrand }        from '../shared/models/catalogBrand.model';
 import { IPager }               from '../shared/models/pager.model';
 import { BasketWrapperService}  from '../shared/services/basket.wrapper.service';
 import { SecurityService }      from '../shared/services/security.service';
+import { Observable } from 'rxjs/Observable';
 
 @Component({
     selector: 'esh-catalog .esh-catalog',
@@ -25,6 +26,7 @@ export class CatalogComponent implements OnInit {
     paginationInfo: IPager;
     authenticated: boolean = false;
     authSubscription: Subscription;
+    errorReceived: boolean;
 
     constructor(private service: CatalogService, private basketService: BasketWrapperService, private configurationService: ConfigurationService, private securityService: SecurityService) {
         this.authenticated = securityService.IsAuthorized;
@@ -79,17 +81,18 @@ export class CatalogComponent implements OnInit {
     }
 
     getCatalog(pageSize: number, pageIndex: number, brand?: number, type?: number) {
-        this.service.getCatalog(pageIndex, pageSize, brand, type).subscribe(catalog => {
-            this.catalog = catalog;
-
-            this.paginationInfo = {
-                actualPage : catalog.pageIndex,
-                itemsPage : catalog.pageSize,
-                totalItems : catalog.count,
-                totalPages: Math.ceil(catalog.count / catalog.pageSize),
-                items: catalog.pageSize
-            };
-
+        this.errorReceived = false;
+        this.service.getCatalog(pageIndex, pageSize, brand, type)
+            .catch((err) => this.handleError(err))
+            .subscribe(catalog => {
+                this.catalog = catalog;
+                this.paginationInfo = {
+                    actualPage : catalog.pageIndex,
+                    itemsPage : catalog.pageSize,
+                    totalItems : catalog.count,
+                    totalPages: Math.ceil(catalog.count / catalog.pageSize),
+                    items: catalog.pageSize
+                };
         });
     }
 
@@ -108,5 +111,10 @@ export class CatalogComponent implements OnInit {
             this.brands.unshift(allBrands);
         });
     }
+
+    private handleError(error: any) {
+        this.errorReceived = true;
+        return Observable.throw(error);
+    }
 }
 

src/Web/WebSPA/Client/modules/orders/orders.component.html

@@ -2,6 +2,9 @@
     <esh-header url="/catalog">Back to catalog</esh-header>
 
     <div class="container">
+        <div class="alert alert-warning esh-orders-alert" role="alert" [hidden]="!errorReceived">
+            Error requesting order list, please try later on
+        </div>
         <article class="esh-orders-titles row">
             <section class="esh-orders-title col-xs-2">Order number</section>
             <section class="esh-orders-title col-xs-4">Date</section>

src/Web/WebSPA/Client/modules/orders/orders.component.scss

@@ -78,4 +78,8 @@
             transition: color $animation-speed-default;
         }
     }
+
+    &-alert {
+        margin-top: 10px;
+    }
 }

src/Web/WebSPA/Client/modules/orders/orders.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit }    from '@angular/core';
 import { OrdersService }        from './orders.service';
 import { IOrder }               from '../shared/models/order.model';
 import { ConfigurationService } from '../shared/services/configuration.service';
+import { Observable } from 'rxjs/Observable';
 
 @Component({
     selector: 'esh-orders',
@@ -11,6 +12,7 @@ import { ConfigurationService } from '../shared/services/configuration.service';
 export class OrdersComponent implements OnInit {
     private oldOrders: IOrder[];
     private interval = null;
+    errorReceived: boolean;
 
     orders: IOrder[];
 
@@ -36,13 +38,20 @@ export class OrdersComponent implements OnInit {
         }, 1000);
     }
 
-
     getOrders() {
-        this.service.getOrders().subscribe(orders => {
-            this.orders = orders;
-            this.oldOrders = this.orders;
-            console.log('orders items retrieved: ' + orders.length);
+        this.errorReceived = false;
+        this.service.getOrders()
+            .catch((err) => this.handleError(err))
+            .subscribe(orders => {
+                this.orders = orders;
+                this.oldOrders = this.orders;
+                console.log('orders items retrieved: ' + orders.length);
         });
     }
+
+    private handleError(error: any) {
+        this.errorReceived = true;
+        return Observable.throw(error);
+    }  
 }
 

src/Web/WebSPA/Client/modules/shared/components/identity/identity.scss

@@ -31,7 +31,7 @@
         height: 0;
         min-width: 14rem;
         overflow: hidden;
-        padding: .5rem;
+        padding: .3rem;
         position: absolute;
         right: 0;
         top: 2.5rem;