DSP-779 Display error messages directly and not only in console (#201)

* refactor(action): Update message component * enhancement(viewer): Display error message not in console * test(action): Fix message tests * refactor(action): Error handling login form * style(action): Reset error style * refactor(action): Update message component * refactor(action): Clean up message comp and fix tests * refactor(action): Refactor message.comp code * feat(action): New message setup * feat(search): Error handling in advanced search * chore(action): Update message.component
dasch-swiss · Oct 7, 2020 · 6433657 · 6433657
1 parent c0522e6
commit 6433657
Show file tree

Hide file tree

Showing 14 changed files with 114 additions and 56 deletions.
diff --git a/projects/dsp-ui/src/lib/action/components/login-form/login-form.component.html b/projects/dsp-ui/src/lib/action/components/login-form/login-form.component.html
@@ -50,12 +50,13 @@ <h2 class="login-form-title mat-title">{{formLabel.title}}</h2>
         <br><br>
 
         <!-- Error message as an answer from knora api request -->
-        <p class="full-width login-error" *ngIf="errorMessage">
-            {{loginErrorServer ? formLabel.error.server : formLabel.error.failed}}
-        </p>
+        <p class="login-error" *ngIf="loginFailed">{{formLabel.error.failed}}</p>
     </form>
 </div>
 
+<!-- api server error -->
+<dsp-message *ngIf="loginErrorServer" [apiError]="errorMessage"></dsp-message>
+
 <!-- a user is already logged in; show who it is and a logout button -->
 <div class="logout-container" *ngIf="session">
     <p>A user is already logged in:</p>

diff --git a/projects/dsp-ui/src/lib/action/components/login-form/login-form.component.ts b/projects/dsp-ui/src/lib/action/components/login-form/login-form.component.ts
@@ -61,8 +61,7 @@ export class LoginFormComponent implements OnInit {
     errorMessage: ApiResponseError;
 
     // specific error messages
-    loginErrorUser = false;
-    loginErrorPw = false;
+    loginFailed = false;
     loginErrorServer = false;
 
     // labels for the login form
@@ -157,15 +156,13 @@ export class LoginFormComponent implements OnInit {
             },
             (error: ApiResponseError) => {
                 // error handling
-                this.loginErrorUser = (error.status === 404);
-                this.loginErrorPw = (error.status === 401);
+                this.loginFailed = (error.status === 401 || error.status === 404);
                 this.loginErrorServer = (error.status === 0 || error.status >= 500 && error.status < 600);
 
                 this.loginSuccess.emit(false);
                 this.errorMessage = error;
 
                 this.loading = false;
-                // TODO: update error handling similar to the old method (see commented code below)
             }
         );
     }
@@ -190,7 +187,7 @@ export class LoginFormComponent implements OnInit {
             },
             (error: ApiResponseError) => {
                 console.error(error);
-                this.loginSuccess.emit(false);
+                this.logoutSuccess.emit(false);
                 this.loading = false;
             }
         );

diff --git a/projects/dsp-ui/src/lib/action/components/message/message.component.html b/projects/dsp-ui/src/lib/action/components/message/message.component.html
@@ -1,4 +1,4 @@
-<mat-card *ngIf="!short" class="fix-width dsp-message" [ngClass]="'dsp-' + message?.type">
+<mat-card *ngIf="(size !== 'short')" class="fix-width dsp-message" [ngClass]="'dsp-' + message?.type">
 
     <mat-card-subtitle class="message-subtitle">
         <span class="left">{{message?.type | uppercase }} {{message?.status}} | {{message?.statusMsg}}</span>
@@ -15,6 +15,12 @@
             </mat-list-item>
         </mat-list>
 
+        <mat-list *ngIf="apiError">
+            <mat-list-item>
+                <p mat-line>{{apiError.error.toString()}}</p>
+            </mat-list-item>
+        </mat-list>
+
         <mat-list *ngIf="showLinks">
             <p>{{links.title}}</p>
             <mat-list-item *ngFor="let item of links.list" class="link" (click)="goToLocation(item.route)">
@@ -25,11 +31,24 @@
 
     </mat-card-content>
 
-    <mat-card-footer *ngIf="!medium" class="message-footnote" [innerHtml]="message?.footnote"></mat-card-footer>
+    <mat-card-footer *ngIf="(size === 'long')" class="message-footnote">
+        <!-- Specific message from @Input -->
+        <p *ngIf="message.footnote">{{message.footnote}}</p>
+
+        <!-- Else: Default message -->
+        <p *ngIf="!message.footnote && !showLinks">
+            Please come back in a few minutes and try to <a class="link bolder" (click)="reload()">reload the page</a>.
+        </p>
+
+        <!-- Action: Contact DaSCH/DSP support -->
+        <a mat-button class="action" href="https://docs.dasch.swiss/community/faq" target="_blank">
+            <mat-icon>mail_outline</mat-icon> Contact the support team
+        </a>
+    </mat-card-footer>
 
 </mat-card>
 
-<mat-card *ngIf="short && !disable" class="fix-width dsp-short-message" [ngClass]="'dsp-' + message?.type"
+<mat-card *ngIf="(size === 'short') && !disable" class="fix-width dsp-short-message" [ngClass]="'dsp-' + message?.type"
           (click)="closeMessage()">
 
     <div class="dsp-panel">

diff --git a/projects/dsp-ui/src/lib/action/components/message/message.component.scss b/projects/dsp-ui/src/lib/action/components/message/message.component.scss
@@ -73,6 +73,15 @@ $warn: rgb(244, 67, 54);
 
   .message-footnote {
     padding: 24px;
+
+    .bolder {
+      font-weight: bolder;
+    }
+
+    .action {
+      margin: 48px auto 0 auto;
+      display: table;
+    }
   }
 }
 

diff --git a/projects/dsp-ui/src/lib/action/components/message/message.component.spec.ts b/projects/dsp-ui/src/lib/action/components/message/message.component.spec.ts
@@ -13,7 +13,7 @@ import { DspMessageData, MessageComponent } from './message.component';
  * Test host component to simulate parent component.
  */
 @Component({
-    template: `<dsp-message #message [message]="shortMessage" [short]="short"></dsp-message>`
+    template: `<dsp-message #message [message]="shortMessage" [size]="size"></dsp-message>`
 })
 class ShortMessageTestHostComponent implements OnInit {
 
@@ -27,7 +27,7 @@ class ShortMessageTestHostComponent implements OnInit {
         footnote: 'Close it'
     };
 
-    short = true;
+    size = 'short';
 
     constructor() {
     }
@@ -39,7 +39,7 @@ class ShortMessageTestHostComponent implements OnInit {
  * Test host component to simulate parent component.
  */
 @Component({
-    template: `<dsp-message #message [message]="errorMessage" [short]="short"></dsp-message>`
+    template: `<dsp-message #message [message]="errorMessage"></dsp-message>`
 })
 class LongMessageTestHostComponent implements OnInit {
 
@@ -52,8 +52,6 @@ class LongMessageTestHostComponent implements OnInit {
         error: 'error message'
     };
 
-    short = false;
-
     constructor() {
     }
 
@@ -64,7 +62,7 @@ class LongMessageTestHostComponent implements OnInit {
  * Test host component to simulate parent component.
  */
 @Component({
-    template: `<dsp-message #message [message]="shortMessage" [short]="short" [duration]="2000"></dsp-message>`
+    template: `<dsp-message #message [message]="shortMessage" [size]="size" [duration]="2000"></dsp-message>`
 })
 class ShortMessageWithDurationTestHostComponent implements OnInit {
 
@@ -78,7 +76,7 @@ class ShortMessageWithDurationTestHostComponent implements OnInit {
         footnote: 'Close it'
     };
 
-    short = true;
+    size = 'short';
 
     constructor() {
     }

diff --git a/projects/dsp-ui/src/lib/action/components/message/message.component.ts b/projects/dsp-ui/src/lib/action/components/message/message.component.ts
@@ -1,6 +1,7 @@
 import { Location } from '@angular/common';
 import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { ApiResponseError } from '@dasch-swiss/dsp-js';
 import { StatusMsg } from '../../../../assets/i18n/statusMsg';
 
 /**
@@ -19,36 +20,50 @@ export class DspMessageData {
 }
 
 @Component({
-  selector: 'dsp-message',
-  templateUrl: './message.component.html',
-  styleUrls: ['./message.component.scss']
+    selector: 'dsp-message',
+    templateUrl: './message.component.html',
+    styleUrls: ['./message.component.scss']
 })
 export class MessageComponent implements OnInit {
 
     /**
-     * Message type: DspMessageData or ApiServiceError
+     * Message type: DspMessageData
      *
-     * @param message This type needs at least a status number (0-511).
-     * In this case, or if type is ApiServiceError, it takes the default status messages
+     * @param message This type needs at least a status number (0-599).
+     * In this case, or if type is ApiResponseError, it takes the default status messages
      * from the list of HTTP status codes (https://en.wikipedia.org/wiki/List_of_HTTP_status_codes)
      */
     @Input() message: DspMessageData = new DspMessageData();
 
-    // TODO: Refactor Inputs into one parameter (i.e. 'size')
-    // https://github.com/dasch-swiss/knora-ui-ng-lib/pull/95#discussion_r435978988
+    /**
+     * Message type: ApiResponseError
+     * @param apiError
+     */
+    @Input() apiError?: ApiResponseError;
+
+    /**
+     * Size of the message: long, medium or short?
+     * @param size Default size is 'long'
+     */
+    @Input() size: 'short' | 'medium' | 'long' = 'long';
 
     /**
+     * @deprecated
      * @param short Show short message only
      * A small message box to notify the user an event has occured.
      */
-    @Input() short = false;
+    @Input() short = (this.size === 'short');
 
     /**
+     * @deprecated
      * @param medium Show medium message
      * A message box without footnote or links.
      */
-    @Input() medium = false;
+    @Input() medium = (this.size === 'medium');
 
+    /**
+     * @param duration How long should the message be displayed
+     */
     @Input() duration?: number;
 
     statusMsg: any;
@@ -87,14 +102,6 @@ export class MessageComponent implements OnInit {
         ]
     };
 
-    footnote: any = {
-        text: 'If you think this is a mistake, please',
-        team: {
-            dasch:
-                '<a href=\'https://discuss.dasch.swiss\' target=\'_blank\'> inform the DaSCH development team.</a>'
-        }
-    };
-
     constructor(
         private _router: Router,
         private _location: Location,
@@ -103,6 +110,16 @@ export class MessageComponent implements OnInit {
     ) { }
 
     ngOnInit() {
+        // temporary solution as long we have to support the deprecated inputs "short" and "medium"
+        if (this.short || this.medium) {
+            this.size = (this.short ? 'short' : 'medium')
+        }
+
+
+        if (this.apiError) {
+            this.message.status = this.apiError.status;
+        }
+
         this.statusMsg = this._status.default;
 
         if (!this.message) {
@@ -170,11 +187,7 @@ export class MessageComponent implements OnInit {
                     msg.statusText !== undefined
                         ? msg.statusText
                         : this.statusMsg[s].description;
-                tmpMsg.footnote =
-                    msg.footnote !== undefined
-                        ? msg.footnote
-                        : this.footnote.text + ' ' + this.footnote.team.dasch;
-                this.showLinks = !this.medium;
+                this.showLinks = (this.size === 'long');
                 break;
             case s >= 500 && s < 600:
                 // the message is a server side (api) error
@@ -188,8 +201,6 @@ export class MessageComponent implements OnInit {
                     msg.statusText !== undefined
                         ? msg.statusText
                         : this.statusMsg[s].description;
-                tmpMsg.footnote =
-                    this.footnote.text + ' ' + this.footnote.team.dasch;
                 this.showLinks = false;
                 break;
             default:
@@ -212,4 +223,8 @@ export class MessageComponent implements OnInit {
         this.disable = !this.disable;
     }
 
+    reload() {
+        window.location.reload();
+    }
+
 }
diff --git a/projects/dsp-ui/src/lib/search/advanced-search/advanced-search.component.html b/projects/dsp-ui/src/lib/search/advanced-search/advanced-search.component.html
@@ -1,4 +1,4 @@
-<form [formGroup]="form" (ngSubmit)="submit()" class="dsp-form-content">
+<form *ngIf="!errorMessage" [formGroup]="form" (ngSubmit)="submit()" class="dsp-form-content">
 
     <div *ngIf="ontologiesMetadata?.ontologies.length > 0">
         <dsp-select-ontology [formGroup]="form" [ontologiesMetadata]="ontologiesMetadata"
@@ -46,3 +46,5 @@
     </div>
 
 </form>
+
+<dsp-message *ngIf="errorMessage" [apiError]="errorMessage" [size]="'medium'"></dsp-message>
diff --git a/projects/dsp-ui/src/lib/search/advanced-search/advanced-search.component.ts b/projects/dsp-ui/src/lib/search/advanced-search/advanced-search.component.ts
@@ -69,6 +69,8 @@ export class AdvancedSearchComponent implements OnInit, OnDestroy {
 
     formChangesSubscription: Subscription;
 
+    errorMessage: ApiResponseError;
+
     // reference to the component that controls the resource class selection
     @ViewChild('resourceClass') resourceClassComponent: SelectResourceClassComponent;
 
@@ -133,7 +135,7 @@ export class AdvancedSearchComponent implements OnInit, OnDestroy {
                 this.ontologiesMetadata = response;
             },
             (error: ApiResponseError) => {
-                console.error(error);
+                this.errorMessage = error;
             });
     }
 

diff --git a/projects/dsp-ui/src/lib/search/search.module.ts b/projects/dsp-ui/src/lib/search/search.module.ts
@@ -34,6 +34,7 @@ import { SearchListValueComponent } from './advanced-search/select-property/spec
 import { SearchDisplayListComponent } from './advanced-search/select-property/specify-property-value/search-list-value/search-display-list/search-display-list.component';
 import { SearchTextValueComponent } from './advanced-search/select-property/specify-property-value/search-text-value/search-text-value.component';
 import { SearchUriValueComponent } from './advanced-search/select-property/specify-property-value/search-uri-value/search-uri-value.component';
+import { DspActionModule } from '../action';
 
 
 
@@ -75,6 +76,7 @@ import { SearchUriValueComponent } from './advanced-search/select-property/speci
         MatInputModule,
         MatDatepickerModule,
         MatAutocompleteModule,
+        DspActionModule,
         DspViewerModule,
         TextFieldModule
     ],

diff --git a/projects/dsp-ui/src/lib/viewer/views/list-view/list-view.component.html b/projects/dsp-ui/src/lib/viewer/views/list-view/list-view.component.html
@@ -33,13 +33,18 @@
     </div>
 
     <!-- In case of 0 result -->
-    <div class="list-view zero" *ngIf="!loading && numberOfAllResults === 0">
+    <div class="list-view" *ngIf="!loading && numberOfAllResults === 0">
         <dsp-message
             [message]="{status: 404, statusMsg: 'No results', statusText: 'Sorry, but we couldn\'t find any results matching your search'}"
             [medium]="true">
         </dsp-message>
     </div>
 
+    <!-- In case of server error -->
+    <div class="list-view server-error" *ngIf="errorMessage">
+        <dsp-message [apiError]="errorMessage"></dsp-message>
+    </div>
+
 </div>
 
 <!-- footer with pagination -->

diff --git a/projects/dsp-ui/src/lib/viewer/views/list-view/list-view.component.ts b/projects/dsp-ui/src/lib/viewer/views/list-view/list-view.component.ts
@@ -98,7 +98,6 @@ export class ListViewComponent implements OnChanges {
                     },
                     (error: ApiResponseError) => {
                         this.errorMessage = error;
-                        console.error(error);
                     }
                 );
             }
@@ -111,7 +110,6 @@ export class ListViewComponent implements OnChanges {
                 },
                 (error: ApiResponseError) => {
                     this.errorMessage = error;
-                    console.error(error);
                     this.loading = false;
                 }
             );
@@ -128,7 +126,6 @@ export class ListViewComponent implements OnChanges {
                     },
                     (error: ApiResponseError) => {
                         this.errorMessage = error;
-                        console.error(error);
                     }
                 );
             }
@@ -144,7 +141,6 @@ export class ListViewComponent implements OnChanges {
                     },
                     (error: ApiResponseError) => {
                         this.errorMessage = error;
-                        console.error(error);
                         this.loading = false;
                     }
                 );