Error page

src/assets/styles/_full-pages.scss

@@ -21,4 +21,6 @@
     align-items: center;
     flex-direction: column;
     display: flex;
+    max-width: 80vw;
+    margin: auto;
 }

src/lib/common-ui.module.ts

@@ -27,7 +27,15 @@ import { FullPageErrorComponent } from './error/full-page-error/full-page-error.
 
 const inputs = [RoundCheckboxComponent, EditableInputComponent, InputWithActionComponent];
 
-const matModules = [MatIconModule, MatButtonModule, MatTooltipModule, MatMenuModule, MatCheckboxModule, MatDialogModule, MatProgressSpinnerModule];
+const matModules = [
+    MatIconModule,
+    MatButtonModule,
+    MatTooltipModule,
+    MatMenuModule,
+    MatCheckboxModule,
+    MatDialogModule,
+    MatProgressSpinnerModule
+];
 
 const modules = [...matModules, FormsModule, TranslateModule, IqserButtonsModule];
 
@@ -35,6 +43,7 @@ const components = [
     ...inputs,
     TableColumnNameComponent,
     QuickFiltersComponent,
+    PopupFilterComponent,
     TableHeaderComponent,
     StatusBarComponent,
     FullPageLoadingIndicatorComponent,

src/lib/error/error.service.ts

@@ -1,10 +1,9 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
+import { HttpErrorResponse } from '@angular/common/http';
 import { LoadingService } from '../loading/loading.service';
 
-export type Error = {
-    name: string;
-} | null;
+export type Error = HttpErrorResponse | null;
 
 @Injectable({ providedIn: 'root' })
 export class ErrorService {
@@ -21,7 +20,7 @@ export class ErrorService {
         return this._error;
     }
 
-    set(error: Error): void {
+    set(error: HttpErrorResponse): void {
         this._loadingService.stop();
         this._error = error;
         this._errorEvent$.next(error);

src/lib/error/full-page-error/full-page-error.component.html

@@ -3,7 +3,7 @@
     <section class="full-page-content">
         <mat-icon svgIcon="iqser:error"></mat-icon>
         <div class="heading-l" translate="error.generic"></div>
-        <p>{{ errorService.error.name }}</p>
+        <p>{{ errorService.error.message }}</p>
         <iqser-icon-button
             (action)="reload()"
             [label]="'error.reload' | translate"

src/lib/error/full-page-error/full-page-error.component.scss

@@ -10,6 +10,10 @@
     align-items: center;
     text-align: center;
 
+    p {
+        font-family: monospace;
+    }
+
     > mat-icon {
         height: 100px;
         width: 100px;
@@ -19,8 +23,9 @@
         color: $primary;
     }
 
-    > .heading-l,
-    iqser-icon-button {
+    .heading-l,
+    iqser-icon-button,
+    p {
         margin-top: 32px;
     }
 }