fix(error): resolve error handler issues (DEV-938)

src/app/main/services/error-handler.service.ts

@@ -1,5 +1,5 @@
 import { Inject, Injectable } from '@angular/core';
-import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
 import { ApiResponseData, ApiResponseError, HealthResponse, KnoraApiConnection, LogoutResponse } from '@dasch-swiss/dsp-js';
 import { HttpStatusMsg } from 'src/assets/http/statusMsg';
 import { DspApiConnectionToken } from '../declarations/dsp-api-tokens';
@@ -12,6 +12,8 @@ import { SessionService } from '../services/session.service';
 })
 export class ErrorHandlerService {
 
+    dialogRef: MatDialogRef<any>;
+
     constructor(
         @Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
         private _notification: NotificationService,
@@ -66,11 +68,12 @@ export class ErrorHandlerService {
                 disableClose: true
             };
 
-            this._dialog.open(
-                DialogComponent,
-                dialogConfig
-            );
-
+            if (!this.dialogRef) {
+                this.dialogRef = this._dialog.open(
+                    DialogComponent,
+                    dialogConfig
+                );
+            }
 
         } else if (error.status === 401 && typeof(error.error) !== 'string') {
             // logout if error status is a 401 error and comes from a DSP-JS request
@@ -90,8 +93,7 @@ export class ErrorHandlerService {
             );
 
         } else {
-            // in any other case
-            // open snack bar from dsp-ui notification service
+            // open snack bar in any other case
             this._notification.openSnackBar(error);
             // log error to Rollbar (done automatically by simply throwing a new Error)
             if (error instanceof ApiResponseError) {

src/app/main/services/notification.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 import { ApiResponseError } from '@dasch-swiss/dsp-js';
 import { HttpStatusMsg } from 'src/assets/http/statusMsg';
 
@@ -17,16 +17,22 @@ export class NotificationService {
     // action: string = 'x', duration: number = 4200
     // and / or type: 'note' | 'warning' | 'error' | 'success'; which can be used for the panelClass
     openSnackBar(notification: string | ApiResponseError, type?: 'success' | 'error'): void {
-        let duration = 5000;
+        // let duration = 5000;
         let message: string;
-        let panelClass: string;
+        // let panelClass: string;
+
+        const conf: MatSnackBarConfig = {
+            duration: 5000,
+            horizontalPosition: 'center',
+            verticalPosition: 'top',
+            panelClass: type ? type : 'error',
+        };
 
         if (notification instanceof ApiResponseError) {
-            panelClass = type ? type : 'error';
+            conf.panelClass = type ? type : 'error';
             if (notification.error && !notification.error['message'].startsWith('ajax error')) {
                 // the Api response error contains a complex error message from dsp-js-lib
                 message = notification.error['message'];
-                duration = undefined;
             } else {
                 const defaultStatusMsg = this._statusMsg.default;
                 message = `${defaultStatusMsg[notification.status].message} (${notification.status}): `;
@@ -35,21 +41,18 @@ export class NotificationService {
                     message += `There was a timeout issue with one or several requests.
                                 The resource(s) or a part of it cannot be displayed correctly.
                                 Failed on ${notification.url}`;
-                    duration = undefined;
+                    conf.duration = null;
                 } else {
                     message += `${defaultStatusMsg[notification.status].description}`;
                 }
             }
         } else {
-            panelClass = type ? type : 'success';
+            conf.panelClass = type ? type : 'success';
             message = notification;
         }
 
-        this._snackBar.open(message, 'x', {
-            duration,
-            horizontalPosition: 'center',
-            verticalPosition: 'top',
-            panelClass
-        });
+        this._snackBar.open(message, 'x', conf);
+
+        this._snackBar.dismiss();
     }
 }

src/app/workspace/resource/resource.component.html

@@ -1,5 +1,5 @@
 <div class="content large middle">
-    <div class="resource-view">
+    <div class="resource-view" *ngIf="resource">
 
         <!-- dsp-resource-representation -->
         <div class="representation-container center" *ngIf="representationsToDisplay.length && representationsToDisplay[0].fileValue"
@@ -114,7 +114,7 @@
 
     <!-- resource not found  -->
     <div *ngIf="!resource && !loading" class="no-results">
-        <p>The resource <span *ngIf="resourceIri">- <strong> {{resourceIri}}</strong> -</span> could not
+        <p>The resource <span *ngIf="resourceIri">&mdash; <strong> {{resourceIri}}</strong> &mdash;</span> could not
             be found.</p>
         <p>Reasons:</p>
         <ul>

src/app/workspace/resource/resource.component.ts

@@ -289,14 +289,9 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy {
                 // this.loading = false;
             },
             (error: ApiResponseError) => {
+                this.resource = undefined;
                 this.loading = false;
-                if (error.status === 404) {
-                    // resource not found
-                    // display message that it couldn't be found
-                    this.resource = undefined;
-                } else {
-                    this._errorHandler.showMessage(error);
-                }
+                this._errorHandler.showMessage(error);
             }
         );
     }

src/app/workspace/results/list-view/list-view.component.ts

@@ -159,8 +159,8 @@ export class ListViewComponent implements OnChanges {
                         }
                     },
                     (countError: ApiResponseError) => {
-                        this._errorHandler.showMessage(countError);
                         this.loading = countError.status !== 504;
+                        this._errorHandler.showMessage(countError);
                     }
                 );
             }
@@ -177,9 +177,9 @@ export class ListViewComponent implements OnChanges {
                     this.loading = false;
                 },
                 (error: ApiResponseError) => {
-                    this._errorHandler.showMessage(error);
-                    this.resources = undefined;
                     this.loading = false;
+                    this.resources = undefined;
+                    this._errorHandler.showMessage(error);
                 }
             );
 
@@ -201,8 +201,8 @@ export class ListViewComponent implements OnChanges {
                         }
                     },
                     (countError: ApiResponseError) => {
-                        this._errorHandler.showMessage(countError);
                         this.loading = countError.status !== 504;
+                        this._errorHandler.showMessage(countError);
                     }
                 );
             }
@@ -224,9 +224,9 @@ export class ListViewComponent implements OnChanges {
                         this.loading = false;
                     },
                     (error: ApiResponseError) => {
-                        this._errorHandler.showMessage(error);
-                        this.resources = undefined;
                         this.loading = false;
+                        this.resources = undefined;
+                        this._errorHandler.showMessage(error);
                     }
                 );
             } else {