update block ui and interceptor

Author: rxzx

package-lock.json

@@ -36,6 +36,7 @@
     "ngx-embed-video": "^0.3.0",
     "ngx-mask": "^6.1.2",
     "ngx-social-login": "^6.0.1",
+    "ngx-spinner": "^6.1.2",
     "ngx-toastr": "^8.10.0",
     "primeicons": "1.0.0-beta.9",
     "primeng": "^6.0.2",

package.json

@@ -1,3 +1,5 @@
+import { RequestError } from './../shared/models/index';
+import { ToastrService } from 'ngx-toastr';
 import { Injectable } from "@angular/core";
 import { HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http";
 import { Observable } from "rxjs/Rx";
@@ -6,23 +8,31 @@ import { Observable } from "rxjs/Rx";
 @Injectable()
 export class MyHttpInterceptor {
     constructor(
+        private toastr: ToastrService,
     ) { }
 
-    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    intercept(
+        req: HttpRequest<any>,
+        next: HttpHandler
+    ): Observable<HttpEvent<any>> {
 
-        console.log("intercepted request ... ");
+        // console.log("intercepted request ... ");
 
         // Clone the request to add the new header.
         const authReq = req.clone({ headers: req.headers.set("headerName", "headerValue") });
-
-        console.log("Sending request with new header now ...");
+       
+        // console.log("Sending request with new header now ...");
 
         //send the newly created request
         return next.handle(authReq)
             .catch((error, caught) => {
                 //intercept the respons error and displace it to the console
-                console.log("Error Occurred");
-                console.log(error);
+                let requestError: RequestError = error;
+                if (requestError.status === 404) {
+                    this.toastr.error("Request " + requestError.statusText, "Error");
+                } else {
+                    this.toastr.error("Api Failled", "Error");
+                }
                 //return the error to the method that called it
                 return Observable.throw(error);
             }) as any;

src/app/Providers/my-http-interceptor.ts

@@ -18,7 +18,7 @@ export class AppComponent {
     private router: Router
   ) {
     setTheme('bs3');
-    this.redirection()
+    this.redirection();
   }
 
   redirection() {

src/app/app.component.ts

@@ -27,7 +27,7 @@ import { MyHttpInterceptor } from './Providers/my-http-interceptor';
   ],
   exports: [
     ToastrModule,
-    AppRoutingModule
+    AppRoutingModule,
   ],
   providers: [
     HttpClient,
@@ -36,7 +36,7 @@ import { MyHttpInterceptor } from './Providers/my-http-interceptor';
     AlwaysAuthGuard,
     OnlyLoggedInUsersGuard,
     { provide: LocationStrategy, useClass: HashLocationStrategy },
-    { provide: HTTP_INTERCEPTORS, useClass: MyHttpInterceptor,  multi: true }
+    { provide: HTTP_INTERCEPTORS, useClass: MyHttpInterceptor, multi: true }
   ],
   bootstrap: [AppComponent],
   schemas: [

src/app/app.module.ts

@@ -1,3 +1,4 @@
+<p-blockUI [blocked]="blocked"></p-blockUI>
 <div id="home" class="row">
   <div class="col-lg-12 col-md-12 col-xl-12">
     <h2 class="pull-left"><i class="fa fa-table"></i> All Cities</h2>

src/app/private/home/home.component.html

@@ -17,17 +17,21 @@ export class PrivateHomeComponent implements OnInit {
   public totalRecords: number;
   public loading: boolean;
   public bsModalRef: BsModalRef;
+  public blocked: boolean;
   constructor(
     private api: HTTPService,
     private modalService: BsModalService
-  ) { }
+  ) {
+    this.blocked = true;
+   }
 
 
   ngOnInit() {
     this.api.getData()
       .subscribe((response: any) => {
         this.data = response.city || [];
         this.totalRecords = this.data.length;
+        this.blocked = false;
         // console.log(this.data);
       }, (e) => {
         console.log(e);

src/app/private/home/home.component.ts

@@ -19,6 +19,7 @@ import { AboutComponent } from './about/about.component';
 import { GalleryComponent } from './gallery/gallery.component';
 import { DemoChartsComponent } from './demo-charts/demo-charts.component';
 import { FeatureComponent } from './feature/feature.component';
+import {BlockUIModule} from 'primeng/blockui';
 
 
 @NgModule({
@@ -44,7 +45,8 @@ import { FeatureComponent } from './feature/feature.component';
           }
         }
       }
-    )
+    ),
+    BlockUIModule
   ],
   declarations: [
     PrivateComponent,

src/app/private/private.module.ts

@@ -0,0 +1,8 @@
+export enum ErrorMessages{
+    ApiFailled = "Api has failled",
+    Saved = "data has been saved",
+    NotSaved = "data has been saved",
+    Deleted = "data has been deleted",
+    FillMandatoryField = "Please Fill All Mandataory Field(s)",
+    InvalidCredencials = "Invalid Credentials"
+}

src/app/shared/enums/enums.ts

@@ -1,2 +1,13 @@
 
-export * from './user';
+export * from './user';
+
+export interface RequestError {
+    error?: string;
+    headers?:any;
+    message?:string;
+    name:string;
+    ok:boolean;
+    status:number;
+    statusText:string;
+    url:string;
+}