Feature 106: Bug - Fehlerseite bei Suche

apps/client-asset-sg/.eslintrc.json

@@ -5,22 +5,6 @@
         {
             "files": ["*.ts"],
             "rules": {
-                "@angular-eslint/directive-selector": [
-                    "error",
-                    {
-                        "type": "attribute",
-                        "prefix": "assetSg",
-                        "style": "camelCase"
-                    }
-                ],
-                "@angular-eslint/component-selector": [
-                    "error",
-                    {
-                        "type": "element",
-                        "prefix": "asset-sg",
-                        "style": "kebab-case"
-                    }
-                ],
                 "no-restricted-imports": [
                     "error",
                     {

apps/client-asset-sg/src/app/app.component.html

@@ -1,10 +1,26 @@
-<asset-sg-app-bar>
-  <ng-template  *ngIf="!router.url.includes('/error')" [cdkPortalOutlet]="appPortalService.appBarPortalContent$ | push"></ng-template>
-</asset-sg-app-bar>
-<asset-sg-menu-bar *ngIf="!router.url.includes('/error')"/>
-<div class="router-outlet">
-  <router-outlet></router-outlet>
-</div>
-<div class="drawer-portal" *ngIf="!router.url.includes('/error')">
-  <ng-template [cdkPortalOutlet]="appPortalService.drawerPortalContent$ | push"></ng-template>
+<ng-container *ngIf="errorService.onMessage | async as error; else content">
+  <asset-sg-app-bar />
+  <div class="error">
+    <span>{{error}}</span>
+    <button asset-sg-warn (click)="authService.logOut()">
+      Logout
+    </button>
+  </div>
+</ng-container>
+
+<ng-template #content>
+  <asset-sg-app-bar>
+    <ng-template [cdkPortalOutlet]="appPortalService.appBarPortalContent$ | push"></ng-template>
+  </asset-sg-app-bar>
+  <asset-sg-menu-bar />
+  <div class="router-outlet">
+    <router-outlet></router-outlet>
+  </div>
+  <div class="drawer-portal">
+    <ng-template [cdkPortalOutlet]="appPortalService.drawerPortalContent$ | push"></ng-template>
+  </div>
+</ng-template>
+
+<div class="alerts">
+  <ul app-alert-list></ul>
 </div>

apps/client-asset-sg/src/app/app.component.scss

@@ -1,4 +1,6 @@
 @use 'styles/variables';
+@use '@angular/material' as mat;
+@use '../theme' as *;
 
 $app-bar-height: 88px;
 $menu-bar-width: 80px;
@@ -43,3 +45,30 @@ asset-sg-menu-bar {
         --viewport-width: min(calc(100vw - #{$menu-bar-width}), calc(1920px - #{$menu-bar-width}));
     }
 }
+
+.error {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  grid-column: 1 / -1;
+  padding: 40px;
+  align-items: center;
+  font-size: 24px;
+  font-weight: bolder;
+
+  color: mat.get-color-from-palette($asset-sg-warn, 600);
+}
+
+.alerts {
+  position: fixed;
+  width: min(30rem, 95vw);
+
+  bottom: 2rem;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+
+  /// angular-cdk-overlay is at 1000, so we go to 1500.
+  z-index: 1500;
+}

apps/client-asset-sg/src/app/app.component.ts

@@ -8,6 +8,7 @@ import { debounceTime, fromEvent, map, startWith } from 'rxjs';
 import { assert } from 'tsafe';
 
 import { AuthService } from '@asset-sg/auth';
+import { ErrorService } from '@asset-sg/auth';
 import { AppPortalService, appSharedStateActions, setCssCustomProperties } from '@asset-sg/client-shared';
 
 import { AppState } from './state/app-state';
@@ -25,7 +26,10 @@ export class AppComponent {
   private _httpClient = inject(HttpClient);
   public appPortalService = inject(AppPortalService);
   private store = inject(Store<AppState>);
-  public readonly router: Router = inject(Router);
+
+  readonly router: Router = inject(Router);
+  readonly errorService = inject(ErrorService);
+  readonly authService = inject(AuthService);
 
   constructor(private readonly _authService: AuthService) {
     this._httpClient

apps/client-asset-sg/src/app/app.module.ts

@@ -16,10 +16,9 @@ import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-transla
 import { ForModule } from '@rx-angular/template/for';
 import { LetModule } from '@rx-angular/template/let';
 import { PushModule } from '@rx-angular/template/push';
-import * as O from 'fp-ts/Option';
-import * as C from 'io-ts/Codec';
 
 import { AuthInterceptor, AuthModule } from '@asset-sg/auth';
+import { ErrorService } from '@asset-sg/auth';
 import {
   AnchorComponent,
   ButtonComponent,
@@ -28,6 +27,7 @@ import {
   currentLangFactory,
   icons,
 } from '@asset-sg/client-shared';
+import { AlertModule } from '@asset-sg/client-shared';
 import { storeLogger } from '@asset-sg/core';
 
 import { environment } from '../environments/environment';
@@ -36,7 +36,6 @@ import { adminGuard, editorGuard } from './app-guards';
 import { assetsPageMatcher } from './app-matchers';
 import { AppComponent } from './app.component';
 import { AppBarComponent, MenuBarComponent, NotFoundComponent, RedirectToLangComponent } from './components';
-import { ErrorComponent } from './components/error/error.component';
 import { appTranslations } from './i18n';
 import { AppSharedStateEffects } from './state';
 import { appSharedStateReducer } from './state/app-shared.reducer';
@@ -50,7 +49,6 @@ registerLocaleData(locale_deCH, 'de-CH');
     NotFoundComponent,
     AppBarComponent,
     MenuBarComponent,
-    ErrorComponent,
   ],
   imports: [
     BrowserModule,
@@ -75,10 +73,6 @@ registerLocaleData(locale_deCH, 'de-CH');
         loadChildren: () => import('@asset-sg/asset-editor').then(m => m.AssetEditorModule),
         canActivate: [editorGuard],
       },
-      {
-        path: ':lang/error',
-        component: ErrorComponent,
-      },
       {
         matcher: assetsPageMatcher,
         loadChildren: () => import('@asset-sg/asset-viewer').then(m => m.AssetViewerModule),
@@ -117,9 +111,11 @@ registerLocaleData(locale_deCH, 'de-CH');
     DialogModule,
     A11yModule,
     AuthModule,
+    AlertModule,
   ],
   providers: [
     provideSvgIcons(icons),
+    ErrorService,
     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
     { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'fill', floatLabel: 'auto' } },
     { provide: CURRENT_LANG, useFactory: currentLangFactory },
@@ -137,11 +133,3 @@ export class AppModule {
 export interface Encoder<O, A> {
   readonly encode: (a: A) => O;
 }
-
-function optionFromNullable<O, A>(encoder: Encoder<O, A>): Encoder<O | null, O.Option<A>> {
-  return {
-    encode: O.fold(() => null, encoder.encode),
-  };
-}
-
-const foooobar = optionFromNullable(C.string);

apps/client-asset-sg/src/mat-styles.scss

@@ -1,27 +1,13 @@
 @use 'app/styles/variables';
 @use 'app/styles/mixins' as mixins;
 @use '@angular/material' as mat;
-@use 'sass:map';
 
-@include mat.core();
-
-$asset-sg-palette: map.set(mat.$indigo-palette, 500, variables.$cyan-03);
+@import 'theme';
 
-$asset-sg-primary: mat.define-palette($asset-sg-palette);
-$asset-sg-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-$asset-sg-warn: mat.define-palette(mat.$red-palette);
+@include mat.core();
 
-$asset-sg-theme: mat.define-light-theme(
-    (
-        color: (
-            primary: $asset-sg-primary,
-            accent: $asset-sg-accent,
-            warn: $asset-sg-warn,
-        ),
-    )
-);
+@include mat.all-component-themes($asset-sg-theme);
 
-@include mat.select-theme($asset-sg-theme);
 .mat-mdc-select-value {
     color: variables.$grey-09;
 }
@@ -112,7 +98,6 @@ mat-option.mat-mdc-option {
     }
 }
 
-@include mat.legacy-autocomplete-theme($asset-sg-theme);
 .mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover):not(.mat-option-disabled) {
     color: inherit;
     background-color: variables.$grey-01;
@@ -137,7 +122,6 @@ mat-option.mat-option {
     }
 }
 
-@include mat.form-field-theme($asset-sg-theme);
 .mat-mdc-form-field {
     &:hover,
     &.mat-focused {
@@ -230,7 +214,6 @@ mat-option.mat-option {
     }
 }
 
-@include mat.datepicker-theme($asset-sg-theme);
 button.mat-icon-button {
     border-radius: 0;
     background-color: white;
@@ -266,8 +249,6 @@ mat-datepicker-content.mat-datepicker-content .mat-calendar {
     height: 24.5rem;
 }
 
-@include mat.progress-bar-theme($asset-sg-theme);
-@include mat.radio-theme($asset-sg-theme);
 .mat-mdc-radio-button.mat-accent {
     --mdc-radio-selected-focus-icon-color: #{variables.$dark-red};
     --mdc-radio-selected-hover-icon-color: #{variables.$dark-red};
@@ -276,7 +257,6 @@ mat-datepicker-content.mat-datepicker-content .mat-calendar {
     --mat-mdc-radio-checked-ripple-color: #{variables.$dark-red};
 }
 
-@include mat.menu-theme($asset-sg-theme);
 .mat-mdc-menu-item:hover:not([disabled]),
 .mat-mdc-menu-item.cdk-program-focused:not([disabled]),
 .mat-mdc-menu-item.cdk-keyboard-focused:not([disabled]),

apps/client-asset-sg/src/styles.scss

@@ -3,6 +3,7 @@
 @use 'app/styles/variables';
 @use './open-layers';
 
+
 @font-face {
     font-family: 'Inter';
     font-style: normal;

apps/client-asset-sg/src/theme.scss

@@ -0,0 +1,21 @@
+@use 'app/styles/variables';
+@use 'app/styles/mixins' as mixins;
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+$asset-sg-palette: map.set(mat.$indigo-palette, 500, variables.$cyan-03);
+
+$asset-sg-primary: mat.define-palette($asset-sg-palette);
+$asset-sg-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$asset-sg-warn: mat.define-palette(mat.$red-palette);
+
+$asset-sg-theme: mat.define-light-theme(
+    (
+      color: (
+        primary: $asset-sg-primary,
+        accent: $asset-sg-accent,
+        warn: $asset-sg-warn,
+      ),
+    )
+);
+

libs/auth/src/index.ts

@@ -1,3 +1,4 @@
 export * from './lib/auth.module';
 export * from './lib/services/auth.interceptor';
 export * from './lib/services/auth.service';
+export * from './lib/services/error.service';

libs/auth/src/lib/auth.module.ts

@@ -5,7 +5,7 @@
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { RouterModule } from '@angular/router';
 import { provideSvgIcons } from '@ngneat/svg-icon';
 import { TranslateModule } from '@ngx-translate/core';
 import { ForModule } from '@rx-angular/template/for';
@@ -15,6 +15,8 @@
 
 import { AnchorComponent, ButtonComponent, icons } from '@asset-sg/client-shared';
 
+import { ErrorService } from './services/error.service';
+
 
 @NgModule({
     imports: [
@@ -44,6 +46,9 @@
         }),
     ],
     exports: [OAuthModule],
-    providers: [provideSvgIcons(icons)],
+    providers: [
+      provideSvgIcons(icons),
+      ErrorService,
+    ],
 })
 export class AuthModule {}