fix: various errors

apps/dsp-app/src/app/project/create-project-form-page/create-project-form-page.component.ts

@@ -7,6 +7,7 @@ import { RouteConstants } from '@dasch-swiss/vre/shared/app-config';
 import { ProjectService } from '@dasch-swiss/vre/shared/app-helper-services';
 import { LoadProjectsAction } from '@dasch-swiss/vre/shared/app-state';
 import { Store } from '@ngxs/store';
+import { finalize } from 'rxjs/operators';
 
 @Component({
   selector: 'app-create-project-form-page',
@@ -64,10 +65,14 @@ export class CreateProjectFormPageComponent {
         selfjoin: true,
         status: true,
       })
+      .pipe(
+        finalize(() => {
+          this.loading = false;
+        })
+      )
       .subscribe(projectResponse => {
         const uuid = ProjectService.IriToUuid(projectResponse.project.id);
         this._store.dispatch(new LoadProjectsAction());
-        this.loading = false;
         this._router.navigate([RouteConstants.projectRelative, uuid]);
       });
   }

libs/vre/shared/app-error-handler/src/lib/app-error-handler.ts

@@ -1,29 +1,42 @@
 import { HttpErrorResponse } from '@angular/common/http';
 import { ErrorHandler, Injectable } from '@angular/core';
 import { ApiResponseError } from '@dasch-swiss/dsp-js';
+import { AppConfigService } from '@dasch-swiss/vre/shared/app-config';
 import { NotificationService } from '@dasch-swiss/vre/shared/app-notification';
 import { AjaxError } from 'rxjs/ajax';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AppErrorHandler implements ErrorHandler {
-  constructor(private _notification: NotificationService) {}
+  constructor(
+    private _notification: NotificationService,
+    private readonly _appConfig: AppConfigService
+  ) {}
 
   handleError(error: any): void {
     if (error instanceof ApiResponseError && error.error instanceof AjaxError) {
       // JS-LIB
-      this.handleHttpError(error.error, error.url);
+      this.handleGenericError(error.error, error.url);
     } else if (error instanceof HttpErrorResponse) {
       // ApiServices
-      this.handleHttpError(error, error.url);
-    } else {
-      // TODO in future: only display if environment === 'prod', now even local is configured as 'prod'
+      this.handleHttpErrorResponse(error);
+    } else if (this._appConfig.dspInstrumentationConfig.environment !== 'prod') {
       console.error(error);
     }
   }
 
-  private handleHttpError(error: HttpErrorResponse | AjaxError, url: string | null): void {
+  private handleHttpErrorResponse(error: HttpErrorResponse) {
+    if (error.status >= 400 && error.status < 500) {
+      const readableErrorMatch = error.error.error.match(/\((.*)\)$/);
+      this.displayNotification(readableErrorMatch[1]);
+      return;
+    }
+
+    this.handleGenericError(error, error.url);
+  }
+
+  private handleGenericError(error: HttpErrorResponse | AjaxError, url: string | null): void {
     let message: string;
 
     if (error.status === 0) {
@@ -40,6 +53,10 @@ export class AppErrorHandler implements ErrorHandler {
       message = 'There is an error on our side. Our team is notified!';
     }
 
+    this.displayNotification(message);
+  }
+
+  private displayNotification(message: string) {
     this._notification.openSnackBar(message, 'error');
   }
 }

libs/vre/shared/app-string-literal/src/lib/multi-language-textarea.component.ts

@@ -27,16 +27,7 @@ import { MultiLanguageFormService } from './multi-language-form.service';
     HumanReadableErrorPipe,
   ],
   template: `
-    <div style="display: flex">
-      <mat-button-toggle-group matPrefix #group="matButtonToggleGroup" vertical>
-        <mat-button-toggle
-          *ngFor="let lang of formService.availableLanguages; let index = index"
-          (click)="formService.changeLanguage(index); textInput.focus()"
-          [checked]="index === formService.selectedLanguageIndex"
-          [class.bold]="formService.getFormControlWithLanguage(lang) !== undefined">
-          <span>{{ lang }}</span>
-        </mat-button-toggle>
-      </mat-button-toggle-group>
+    <div style="display: flex; flex-direction: row-reverse">
       <mat-form-field style="flex: 1" subscriptSizing="dynamic" class="formfield">
         <textarea
           matInput
@@ -47,6 +38,15 @@ import { MultiLanguageFormService } from './multi-language-form.service';
           [ngModel]="formService.inputValue"
           (ngModelChange)="formService.onInputChange($event)"></textarea>
       </mat-form-field>
+      <mat-button-toggle-group matPrefix #group="matButtonToggleGroup" vertical>
+        <mat-button-toggle
+          *ngFor="let lang of formService.availableLanguages; let index = index"
+          (click)="formService.changeLanguage(index); textInput.focus()"
+          [checked]="index === formService.selectedLanguageIndex"
+          [class.bold]="formService.getFormControlWithLanguage(lang) !== undefined">
+          <span>{{ lang }}</span>
+        </mat-button-toggle>
+      </mat-button-toggle-group>
     </div>
     <mat-error *ngIf="formService.formArray.invalid && formService.formArray.touched">
       <ng-container *ngIf="formService.invalidErrors?.language"