Moved some css, error page, table header fix

src/assets/icons/error.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" ?>
+<svg height="32px" viewBox="0 0 32 32" width="32px"
+     xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g id="website_warning_exclamation_mark_sign"><g id="response_time_6_"><circle cx="7.5" cy="4.5" fill="currentColor" r="0.5"/><circle
+    cx="5.5" cy="4.5" fill="currentColor" r="0.5" /><circle cx="3.5" cy="4.5" fill="currentColor"
+                                                            r="0.5" /><path
+    d="M30.5,7h-29C1.224,7,1,6.776,1,6.5S1.224,6,1.5,6h29C30.776,6,31,6.224,31,6.5S30.776,7,30.5,7z"
+    fill="currentColor" /><path
+    d="M29.5,28h-2c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5h2c0.276,0,0.5-0.225,0.5-0.5v-23    C30,3.225,29.776,3,29.5,3h-27C2.224,3,2,3.225,2,3.5v23C2,26.775,2.224,27,2.5,27h2C4.776,27,5,27.224,5,27.5S4.776,28,4.5,28h-2    C1.673,28,1,27.327,1,26.5v-23C1,2.673,1.673,2,2.5,2h27C30.327,2,31,2.673,31,3.5v23C31,27.327,30.327,28,29.5,28z"
+    fill="currentColor" /></g><g><g><g><path d="M24.5,29h-17c-0.574,0-1.041-0.23-1.28-0.632C5.981,27.967,6,27.447,6.273,26.942l6.6-12.209      c0.131-0.243,0.434-0.334,0.678-0.202c0.243,0.131,0.333,0.435,0.202,0.677l-6.6,12.21c-0.098,0.182-0.126,0.35-0.074,0.438      S7.293,28,7.5,28h17c0.207,0,0.368-0.055,0.42-0.144s0.024-0.257-0.074-0.438l-8.573-15.862      c-0.224-0.412-0.323-0.413-0.547,0.001l-0.623,1.15c-0.132,0.242-0.436,0.333-0.678,0.201c-0.243-0.131-0.333-0.435-0.202-0.678      l0.623-1.15c0.555-1.023,1.752-1.023,2.307,0l8.573,15.862c0.273,0.504,0.292,1.023,0.053,1.425C25.541,28.77,25.074,29,24.5,29      z" fill="currentColor"/></g></g>
+    <g><path d="M16,23L16,23c-0.225,0-0.421-0.149-0.481-0.365C15.477,22.485,14.5,18.969,14.5,17.5     c0-0.827,0.673-1.5,1.5-1.5s1.5,0.673,1.5,1.5c0,1.511-0.977,4.988-1.019,5.136C16.42,22.852,16.224,23,16,23z M16,17     c-0.276,0-0.5,0.225-0.5,0.5c0,0.68,0.253,1.923,0.502,2.981c0.248-1.05,0.498-2.284,0.498-2.981C16.5,17.225,16.276,17,16,17z" fill="currentColor"/></g>
+    <g><path d="M16,27c-0.827,0-1.5-0.673-1.5-1.5S15.173,24,16,24s1.5,0.673,1.5,1.5S16.827,27,16,27z M16,25     c-0.276,0-0.5,0.225-0.5,0.5S15.724,26,16,26s0.5-0.225,0.5-0.5S16.276,25,16,25z" fill="currentColor"/></g></g></g></svg>

src/assets/icons/refresh.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px"
+     xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="reanalyse" stroke="none" stroke-width="1">
+        <g fill="currentColor" fill-rule="nonzero" id="refresh">
+            <path
+                d="M12.5,63.5 C18,79.5 33,90 50,90 C62,90 73.5,84.5 81,75 L81,75 L65,75 L65,65 L95,65 L95,95 L85,95 L85,85.5 C76,94.5 63.5,100 50,100 C29,100 10,86.5 3,67 L3,67 Z M50,0 C71,0 90,13.5 97,33 L97,33 L87.5,36.5 C82,20.5 67,10 50,10 C38,10 26.5,15.5 19,25 L19,25 L35,25 L35,35 L5,35 L5,5 L15,5 L15,14.5 C24.5,5.5 37,0 50,0 Z"
+                id="Combined-Shape"></path>
+        </g>
+    </g>
+</svg>

src/assets/styles/_full-pages.scss

@@ -0,0 +1,24 @@
+@import 'variables';
+
+.full-page-section,
+.full-page-content {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.full-page-section {
+    opacity: 0.7;
+    background: $white;
+    z-index: 900;
+}
+
+.full-page-content {
+    z-index: 1000;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    display: flex;
+}

src/assets/styles/_mixins.scss

@@ -0,0 +1,50 @@
+@import 'variables';
+
+@mixin line-clamp($lines) {
+    display: -webkit-box;
+    -webkit-line-clamp: $lines;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    display: block;
+
+    @if $lines == 1 {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+@mixin no-scroll-bar {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE 10+ */
+    &::-webkit-scrollbar {
+        width: 0;
+        background: transparent; /* Chrome/Safari/Webkit */
+    }
+}
+
+@mixin scroll-bar {
+    scrollbar-color: $grey-5 $grey-2;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+        width: 11px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+        background: $grey-2;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+        background: $grey-5;
+    }
+}
+
+@mixin inset-shadow {
+    box-shadow: inset 0 4px 3px -2px $grey-4;
+}
+
+@mixin drop-shadow {
+    box-shadow: 0 4px 3px 2px $grey-4;
+}

src/assets/styles/_texts.scss

@@ -1,4 +1,5 @@
 @import 'variables';
+@import 'mixins';
 
 .all-caps-label {
     text-transform: uppercase;
@@ -27,3 +28,100 @@
         opacity: 1;
     }
 }
+
+a {
+    color: $primary;
+    transition: color 0.1s;
+
+    &:hover {
+        color: lighten($primary, 10%);
+    }
+
+    &.with-underline {
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    cursor: pointer;
+}
+
+pre {
+    font-family: Inter, sans-serif;
+    color: $accent;
+}
+
+.heading-xl {
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 29px;
+}
+
+.heading-l {
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 24px;
+}
+
+.heading {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 600;
+}
+
+.info {
+    font-size: 13px;
+    line-height: 18px;
+    opacity: 0.7;
+}
+
+.page-title {
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 18px;
+    text-align: center;
+    padding: 0 20px;
+}
+
+.small-label {
+    opacity: 0.7;
+    font-size: 11px;
+    line-height: 14px;
+    font-weight: initial;
+}
+
+.link-action {
+    font-size: 11px;
+    line-height: 14px;
+    text-decoration: underline;
+    cursor: pointer;
+
+    &:hover {
+        text-decoration: none;
+    }
+}
+
+.large-label {
+    color: $accent;
+    font-size: 13px;
+    line-height: 16px;
+}
+
+.clamp-1 {
+    @include line-clamp(1);
+}
+
+.clamp-2 {
+    @include line-clamp(2);
+}
+
+.text-overflow {
+    display: block !important;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.no-wrap {
+    white-space: nowrap;
+}

src/assets/styles/common.scss

@@ -1,3 +1,4 @@
 @import 'buttons';
 @import 'texts';
 @import 'tables';
+@import 'full-pages';

src/index.ts

@@ -32,3 +32,5 @@ export * from './lib/misc/status-bar/status-bar-config.model';
 export * from './lib/inputs/editable-input/editable-input.component';
 export * from './lib/loading/loading.service';
 export * from './lib/loading/full-page-loading-indicator/full-page-loading-indicator.component';
+export * from './lib/error/error.service';
+export * from './lib/error/full-page-error/full-page-error.component';

src/lib/common-ui.module.ts

@@ -20,6 +20,7 @@ import { SyncWidthDirective } from './tables/sync-width.directive';
 import { StatusBarComponent } from './misc/status-bar/status-bar.component';
 import { EditableInputComponent } from './inputs/editable-input/editable-input.component';
 import { FullPageLoadingIndicatorComponent } from './loading/full-page-loading-indicator/full-page-loading-indicator.component';
+import { FullPageErrorComponent } from './error/full-page-error/full-page-error.component';
 
 const buttons = [IconButtonComponent, ChevronButtonComponent, CircleButtonComponent];
 
@@ -36,7 +37,8 @@ const components = [
     QuickFiltersComponent,
     TableHeaderComponent,
     StatusBarComponent,
-    FullPageLoadingIndicatorComponent
+    FullPageLoadingIndicatorComponent,
+    FullPageErrorComponent
 ];
 
 const utils = [SortByPipe, HumanizePipe, SyncWidthDirective];
@@ -48,7 +50,7 @@ const utils = [SortByPipe, HumanizePipe, SyncWidthDirective];
 })
 export class CommonUiModule {
     constructor(private readonly _iconRegistry: MatIconRegistry, private readonly _sanitizer: DomSanitizer) {
-        const icons = ['arrow-down', 'check', 'close', 'edit', 'sort-asc', 'sort-desc'];
+        const icons = ['arrow-down', 'check', 'close', 'edit', 'error', 'refresh', 'sort-asc', 'sort-desc'];
 
         icons.forEach(icon => {
             _iconRegistry.addSvgIconInNamespace('iqser', icon, _sanitizer.bypassSecurityTrustResourceUrl(`/assets/icons/${icon}.svg`));

src/lib/error/error.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { LoadingService } from '../loading/loading.service';
+
+export type Error = {
+    name: string;
+} | null;
+
+@Injectable({ providedIn: 'root' })
+export class ErrorService {
+    readonly hasError$: Observable<Error>;
+    private readonly _errorEvent$ = new BehaviorSubject<Error>(null);
+
+    constructor(private readonly _loadingService: LoadingService) {
+        this.hasError$ = this._errorEvent$.asObservable();
+    }
+
+    private _error: Error = null;
+
+    get error(): Error {
+        return this._error;
+    }
+
+    set(error: Error): void {
+        this._loadingService.stop();
+        this._error = error;
+        this._errorEvent$.next(error);
+    }
+
+    clear(): void {
+        this._errorEvent$.next(null);
+        this._error = null;
+    }
+}

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

@@ -0,0 +1,14 @@
+<ng-container *ngIf="errorService.hasError$ | async">
+    <section class="full-page-section"></section>
+    <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>
+        <iqser-icon-button
+            (action)="reload()"
+            [label]="'error.reload' | translate"
+            [type]="iconButtonTypes.primary"
+            icon="iqser:refresh"
+        ></iqser-icon-button>
+    </section>
+</ng-container>

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

@@ -0,0 +1,26 @@
+@import '../../../assets/styles/variables';
+
+.full-page-section {
+    opacity: 0.9;
+}
+
+.full-page-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+
+    > mat-icon {
+        height: 100px;
+        width: 100px;
+    }
+
+    .heading-l {
+        color: $primary;
+    }
+
+    > .heading-l,
+    iqser-icon-button {
+        margin-top: 32px;
+    }
+}

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

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ErrorService } from '../error.service';
+import { IconButtonTypes } from '../../buttons/icon-button/icon-button.type';
+
+@Component({
+    selector: 'iqser-full-page-error',
+    templateUrl: './full-page-error.component.html',
+    styleUrls: ['./full-page-error.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FullPageErrorComponent {
+    readonly iconButtonTypes = IconButtonTypes;
+
+    constructor(readonly errorService: ErrorService) {}
+
+    reload(): void {
+        window.location.reload();
+    }
+}

src/lib/loading/full-page-loading-indicator/full-page-loading-indicator.component.html

@@ -1,6 +1,6 @@
 <ng-container *ngIf="loadingService.isLoading$ | async">
-    <section class="full-page-load-section"></section>
-    <section class="full-page-load-spinner">
+    <section class="full-page-section"></section>
+    <section class="full-page-content">
         <mat-spinner diameter="40"></mat-spinner>
         <ng-content></ng-content>
     </section>

src/lib/loading/full-page-loading-indicator/full-page-loading-indicator.component.scss

@@ -1,24 +0,0 @@
-@import '../../../assets/styles/variables';
-
-.full-page-load-section,
-.full-page-load-spinner {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
-
-.full-page-load-section {
-    opacity: 0.7;
-    background: $white;
-    z-index: 900;
-}
-
-.full-page-load-spinner {
-    z-index: 1000;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    display: flex;
-}

src/lib/tables/table-header/table-header.component.html

@@ -12,7 +12,7 @@
 
     <ng-container [ngTemplateOutlet]="bulkActions"></ng-container>
 
-    <iqser-quick-filters></iqser-quick-filters>
+    <iqser-quick-filters *ngIf="filterService.filterGroups.length"></iqser-quick-filters>
 
     <!--    Custom content-->
     <ng-content></ng-content>
@@ -29,11 +29,11 @@
     <iqser-table-column-name
         *ngFor="let config of tableColumnConfigs"
         [class]="config.class"
-        [sortByKey]="config.sortByKey"
-        [label]="config.notTranslatable ? config.label : config.label | translate"
+        [label]="config.notTranslatable ? config.label : (config.label | translate)"
         [leftIcon]="config.leftIcon"
         [rightIconTooltip]="config.rightIconTooltip"
         [rightIcon]="config.rightIcon"
+        [sortByKey]="config.sortByKey"
     ></iqser-table-column-name>
 
     <div *ngIf="hasEmptyColumn"></div>