Updated error-handling inside gemensam planering

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-gemensam-planering/deltagare-gemensam-planering.component.html

@@ -10,7 +10,12 @@
   >
     <div class="gemensam-planering" *ngIf="currentGenomforandeReferens$ | async as genomforandeReferens">
       <div class="gemensam-planering__confirmation" *ngIf="lastSubmittedGP$ | async as lastSubmittedGP; else formRef">
-        <digi-notification-alert af-variation="success" af-heading="Allt gick bra" af-heading-level="h3">
+        <digi-notification-alert
+          class="gemensam-planering__alert"
+          af-variation="success"
+          af-heading="Allt gick bra"
+          af-heading-level="h3"
+        >
           <p>
             Gemensam planering för deltagare {{avrop.fullName}} är nu inskickad till Arbetsförmedlingen och inväntar
             godkännande.
@@ -90,6 +95,16 @@
             </dl>
           </ng-container>
           <footer class="gemensam-planering__footer">
+            <digi-notification-alert
+              *ngIf="error$ | async as error"
+              class="gemensam-planering__alert"
+              af-variation="danger"
+              af-heading="Någonting gick fel"
+            >
+              <p>Kunde inte spara gemensam planering. Ladda om sidan och försök igen.</p>
+              <p class="msfa__small-text" *ngIf="error.message">{{error.message}}</p>
+            </digi-notification-alert>
+            <div class="gemensam-planering__cta-wrapper">
               <ng-container *ngIf="currentStep > 1">
                 <digi-button
                   class="gemensam-planering__step-buttons-wrapper--space-right"
@@ -105,6 +120,7 @@
               <ng-container *ngIf="currentStep === 2">
                 <digi-button af-type="submit" af-size="m">Bekräfta och skicka in</digi-button>
               </ng-container>
+            </div>
           </footer>
         </form>
         <msfa-confirm-dialog

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-gemensam-planering/deltagare-gemensam-planering.component.scss

@@ -25,7 +25,17 @@
     color: var(--digi--ui--color--border--success);
   }
 
+  &__alert {
+    max-width: var(--digi--typography--text--max-width);
+  }
+
   &__footer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--digi--layout--gutter);
+  }
+
+  &__cta-wrapper {
     display: flex;
     gap: var(--digi--layout--gutter);
   }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-gemensam-planering/deltagare-gemensam-planering.component.ts

@@ -3,8 +3,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormArray, FormControl, FormGroup } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { ConfirmDialog } from '@msfa-enums/confirm-dialog.enum';
+import { ErrorType } from '@msfa-enums/error-type.enum';
 import { Activity } from '@msfa-models/activity.model';
 import { Avrop } from '@msfa-models/avrop.model';
+import { CustomError } from '@msfa-models/error/custom-error';
 import {
   GemensamPlanering,
   mapGemensamPlaneringToGemensamPlaneringPostRequest,
@@ -27,6 +29,8 @@ export class DeltagareGemensamPlaneringComponent {
   shouldValidate = false;
   RadiobuttonGroupDirection = RadiobuttonGroupDirection;
   confirmDialogOpen = false;
+  private _error$ = new BehaviorSubject<CustomError>(null);
+  error$: Observable<CustomError> = this._error$.asObservable();
   private _lastSubmittedGP$ = new BehaviorSubject<Date>(null);
   lastSubmittedGP$: Observable<Date> = this._lastSubmittedGP$.asObservable();
 
@@ -123,13 +127,12 @@ export class DeltagareGemensamPlaneringComponent {
   }
 
   closeConfirmDialogAndProceed(confirmDialogAnswer: ConfirmDialog, genomforandeReferens: number): void {
+    this.confirmDialogOpen = false;
+
     if (confirmDialogAnswer === ConfirmDialog.ACCEPTED) {
       const distance = this.gpFormGroup.get('distance').value as boolean;
       const activityIds = this.gpFormGroup.get('activityIds').value as number[];
-
       void this.postGemensamPlanering({ distance, activityIds, genomforandeReferens });
-    } else {
-      this.confirmDialogOpen = false;
     }
   }
 
@@ -138,6 +141,10 @@ export class DeltagareGemensamPlaneringComponent {
       .postGemensamPlanering(mapGemensamPlaneringToGemensamPlaneringPostRequest(postRequest))
       .then(() => {
         this._lastSubmittedGP$.next(new Date());
+        this.currentStep = 3;
+      })
+      .catch((error: Error) => {
+        this._error$.next(new CustomError({ error, message: error.message, type: ErrorType.API }));
       });
   }
 }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-gemensam-planering/gemensam-planering.service.ts

@@ -3,25 +3,21 @@ import { Activity } from '@msfa-models/activity.model';
 import { GemensamPlaneringPostRequest } from '@msfa-models/api/gemensam-planering.request.model';
 import { Avrop } from '@msfa-models/avrop.model';
 import { GemensamPlaneringApiService } from '@msfa-services/api/gemensam-planering-api.service';
-import { BehaviorSubject, Observable, of } from 'rxjs';
+import { Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
 })
 export class GemensamPlaneringService {
   public activities$: Observable<Activity[]> = this.gemensamPlaneringApiService.fetchActivities$();
-  private _error$ = new BehaviorSubject<string>(null);
-  public error$: Observable<string> = this._error$.asObservable();
+
+  constructor(private gemensamPlaneringApiService: GemensamPlaneringApiService) {}
 
   public fetchAvropInformation$(genomforandeReferens: number): Observable<Avrop> {
     return this.gemensamPlaneringApiService.fetchAvropInformation$(genomforandeReferens);
   }
 
   public async postGemensamPlanering(requestData: GemensamPlaneringPostRequest): Promise<void> {
-    // TODO: When API has been updated we can activate the real post
-    return of(undefined as void).toPromise();
-    return this.gemensamPlaneringApiService.postGemensamPlanering(requestData);
+    return this.gemensamPlaneringApiService.postGemensamPlanering$(requestData);
   }
-
-  constructor(private gemensamPlaneringApiService: GemensamPlaneringApiService) {}
 }

apps/mina-sidor-fa/src/app/shared/services/api/gemensam-planering-api.service.ts

@@ -32,17 +32,8 @@ export class GemensamPlaneringApiService {
     return this.deltagareApiService.fetchAvropInformation$(genomforandeReferens);
   }
 
-  public async postGemensamPlanering(requestData: GemensamPlaneringPostRequest): Promise<void> {
-    return this.httpClient
-      .post<void>(`${this._apiBaseUrl}`, requestData)
-      .pipe(
-        catchError((error: Error & { status: number }) => {
-          throw new CustomError(
-            errorToCustomError({ ...error, message: `Kunde inte spara gemensam planering.\n\n${error.message}` })
-          );
-        })
-      )
-      .toPromise();
+  public async postGemensamPlanering$(requestData: GemensamPlaneringPostRequest): Promise<void> {
+    return this.httpClient.post<void>(`${this._apiBaseUrl}`, requestData).toPromise();
   }
 
   constructor(private httpClient: HttpClient, private deltagareApiService: DeltagareApiService) {}

apps/mina-sidor-fa/src/styles/styles.scss

@@ -72,7 +72,7 @@ dl {
   }
 
   &__small-text {
-    font-size: 0.875rem !important;
+    font-size: 0.875em !important;
   }
 
   &__backdrop {

config/proxy.conf.json

@@ -1,9 +1,4 @@
 {
-  "/api/rapporter/gemensam-planering": {
-    "target": "https://mina-sidor-fa-utv.tocp.arbetsformedlingen.se",
-    "secure": false,
-    "changeOrigin": true
-  },
   "/api": {
     "target": "https://mina-sidor-fa-test.tocp.arbetsformedlingen.se",
     "secure": false,