Merged PR 875: #2228 ErrorModalComponent und ErrorHandling in AHF

#2228 ErrorModalComponent und ErrorHandling in AHF

Related work items: #2228

apps/page/goods-in/src/lib/goods-in-list/goods-in-list-item/goods-in-list-item.component.ts

@@ -3,9 +3,10 @@ import { CommandService } from '@core/command';
 import { DomainOmsService } from '@domain/oms';
 import { ComponentStore } from '@ngrx/component-store';
 import { OrderItemListItemDTO } from '@swagger/oms';
+import { UiErrorModalComponent, UiModalService } from '@ui/modal';
 import { isEqual } from 'lodash';
 import { Subject } from 'rxjs';
-import { catchError, first, shareReplay, switchMap, takeUntil } from 'rxjs/operators';
+import { catchError, first, shareReplay, switchMap } from 'rxjs/operators';
 
 interface GoodsInListItemComponentState {
   item: OrderItemListItemDTO;
@@ -114,7 +115,7 @@ export class GoodsInListItemComponent extends ComponentStore<GoodsInListItemComp
 
   private _onDestroy$ = new Subject();
 
-  constructor(private _omsService: DomainOmsService, private _command: CommandService) {
+  constructor(private _omsService: DomainOmsService, private _command: CommandService, private _modal: UiModalService) {
     super({
       item: undefined,
       editSsc: false,
@@ -153,7 +154,14 @@ export class GoodsInListItemComponent extends ComponentStore<GoodsInListItemComp
   }
 
   async showReorderModal() {
-    await this._command.handleCommand('REORDER', { items: [this.item] });
-    this.refresh.emit();
+    try {
+      await this._command.handleCommand('REORDER', { items: [this.item] });
+      this.refresh.emit();
+    } catch (e) {
+      this._modal.open({
+        content: UiErrorModalComponent,
+        data: e,
+      });
+    }
   }
 }

apps/ui/modal/src/lib/error-modal/error-modal.component.scss

@@ -0,0 +1,18 @@
+:host {
+  @apply flex flex-col;
+}
+
+.title {
+  @apply text-xl text-center;
+}
+
+.message {
+  @apply text-base text-center whitespace-pre-line break-words;
+}
+
+.actions {
+  @apply text-center;
+  button {
+    @apply px-5 py-3 bg-brand text-white text-cta-l rounded-full border-none outline-none;
+  }
+}

apps/ui/modal/src/lib/error-modal/error-modal.component.ts

@@ -0,0 +1,54 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { isResponseArgs } from '@utils/object';
+import { isEmpty } from 'lodash';
+import { UiModalRef } from '../defs';
+
+@Component({
+  selector: 'ui-error-modal',
+  template: `
+    <h1 class="title">Es ist ein Fehler aufgetreten</h1>
+    <p class="message">
+      {{ errorMessage }}
+    </p>
+    <div class="actions">
+      <button (click)="modalRef.close()">OK</button>
+    </div>
+  `,
+  styleUrls: ['./error-modal.component.scss'],
+})
+export class UiErrorModalComponent implements OnInit {
+  get errorMessage() {
+    if (this.error instanceof HttpErrorResponse) {
+      if (isResponseArgs(this.error?.error)) {
+        return (
+          this.getMessageFromInvalidProperties(this.error?.error?.invalidProperties) || this.error?.error?.message || this.error?.message
+        );
+      }
+      return this.getMessageFromHttpErrorResponse(this.error);
+    }
+    return this.error?.message;
+  }
+
+  get error() {
+    return this.modalRef.data;
+  }
+
+  constructor(public modalRef: UiModalRef<undefined, Error>) {}
+
+  ngOnInit() {}
+
+  getMessageFromInvalidProperties(invalidProperties: Record<string, string>): string {
+    if (!isEmpty(invalidProperties)) {
+      return Object.values(invalidProperties).join('\n');
+    }
+  }
+
+  getMessageFromHttpErrorResponse(error: HttpErrorResponse) {
+    return `HTTP Status: ${error.status} - ${error.statusText}
+      Type: ${error.type}
+      URL: ${error.url}
+      Message: ${error.message}
+    `;
+  }
+}

apps/ui/modal/src/lib/error-modal/index.ts

@@ -0,0 +1,3 @@
+// start:ng42.barrel
+export * from './error-modal.component';
+// end:ng42.barrel

apps/ui/modal/src/lib/index.ts

@@ -5,4 +5,5 @@ export * from './debug-modal/debug-modal.component';
 export * from './message-modal.component';
 export * from './modal.module';
 export * from './modal.service';
+export * from './error-modal';
 // end:ng42.barrel