Merge pull request #184 in TEA/mina-sidor-fa-web from feature/TV-731-refaktorisera-avvikelserapport to develop

Squashed commit of the following:

commit 62ea9988b66107457da553bf2cd0e423a6f44606
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Thu Oct 7 08:26:52 2021 +0200

    simplify post requests

commit bf35fa3f4972536c52c15d0ef942678e565fff74
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Thu Oct 7 07:44:15 2021 +0200

    Update deltagare-avvikelse.component.html

commit 22e55d0e51eb83f2d8bbc6c9e3a65d2bd479fa92
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Oct 6 17:06:27 2021 +0200

    wip

commit 2836a0c7687755dbf7b7e20d98f24d9bf3bc3f40
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Oct 6 16:55:14 2021 +0200

    merge with develop

commit 77f16e8a1961b623bb741056882a1df3480f9d13
Merge: a4e3b940 890573b1
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Oct 6 16:51:50 2021 +0200

    Merge branch 'develop' into feature/TV-731-refaktorisera-avvikelserapport

    # Conflicts:
    #	apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-avvikelse/deltagare-avvikelse.component.html
    #	apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-avvikelse/deltagare-avvikelse.component.ts

commit a4e3b940ca9e2e484f92dd5d05e14a65e714b897
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Oct 6 16:38:35 2021 +0200

    Refactor avvikelse

commit 5e1923324801baba29bcf2273908075ccc5e29e1
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Oct 6 15:13:34 2021 +0200

    Update deltagare-avvikelse.component.html

commit e57b42761b07899f3922f65995bc905abed44c83
Merge: 14a776bc 19a3b05e
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Oct 6 12:54:23 2021 +0200

    Merged develop

commit 14a776bc2e72dd7145dfe27e5e5745cc0d5b43a1
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Oct 6 12:33:57 2021 +0200

    correct API

commit 9c155b578454865aaa6a4557348d3fd460459434
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Oct 6 11:36:38 2021 +0200

    match utv API

commit 6625524adab2e04269ad14a3c581505e83c8483a
Merge: 2a9cbee7 3d941fdd
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Oct 6 10:45:46 2021 +0200

    Merge branch 'develop' into feature/TV-731-refaktorisera-avvikelserapport

commit 2a9cbee7e544decb0a897063bcbbe6b0ac883608
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Tue Oct 5 15:06:42 2021 +0200

    Update deltagare-avvikelse.component.ts

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

@@ -1,89 +1,104 @@
-<msfa-layout *ngIf="avrop$ | async as avrop">
+<msfa-layout *ngIf="avrop$ | async as avrop; else skeletonRef">
   <msfa-report-layout
-    reportTitle="Avvikelserapport"
+    [currentStep]="currentStep"
+    [totalAmountOfSteps]="totalAmountOfSteps"
     description="Här rapporterar du deltagarens frånvaro och eventuella misskötsel i tjänsten. Rapportering via avvikelserapport ska också ske om tjänsten inte fungerar för deltagaren."
     reportSubTitle="Skapa rapport"
-    [totalAmountOfSteps]="totalAmountOfSteps"
+    reportTitle="Avvikelserapport"
-    [currentStep]="currentStep"
-    [form]="avvikelseFormGroup"
-    [avrop]="avrop"
-    [reportName]="(alternativeFormControl.value === 'franvaro') ? 'frånvarorapport' : 'avvikelsereapport'"
-    [showSuccessNotification]="showSuccessNotification$ | async"
-    [showDangerNotification]="showDangerNotification$ | async"
   >
+    <div *ngIf="submittedDate$ | async as submittedDate; " class="deltagare-avvikelse__confirmation">
+      <digi-notification-alert
+        af-heading="Allt gick bra"
+        af-heading-level="h3"
+        af-variation="success"
+        class="deltagare-avvikelse__alert"
+      >
+        <p>
+          Avvikelserapport för deltagare {{avrop.fullName}} är nu inskickad till
+          Arbetsförmedlingen och inväntar
+          godkännande.
+        </p>
+        <dl>
+          <dt>Datum</dt>
+          <dd>{{submittedDate | date:'longDate'}} kl {{submittedDate | date:'shortTime'}}</dd>
+        </dl>
+      </digi-notification-alert>
+      <msfa-back-link [route]="['../']">Tillbaka till deltagaren</msfa-back-link>
+    </div>
+
     <ng-container *ngIf="currentStep === 1">
       <h3 class="deltagare-avvikelse__alternative-heading">Vad är det du vill rapportera?</h3>
       <form [formGroup]="avvikelseFormGroup">
         <div class="deltagare-avvikelse__alternative">
           <digi-ng-form-radiobutton-group
+            (change)="setAlternative()"
             [afRadiobuttons]="avvikelseAlternatives"
             [formControlName]="alternativeFormControlName"
-            (change)="setAlternative()"
           ></digi-ng-form-radiobutton-group>
           <digi-form-validation-message
-            af-variation="error"
             *ngIf="alternativeFormControl.invalid && alternativeFormControl.touched"
+            af-variation="error"
           >
             Alternativ är obligatoriskt
           </digi-form-validation-message>
         </div>
 
         <msfa-deltagare-orsaks-form
-          [franvaroOrsaker]="franvaroOrsaker$ | async"
-          [avvikelseOrsaker]="avvikelseOrsaker$ | async "
-          [andraKandaOrsaker]="andraKandaOrsaker$ | async"
-          [orsakerFormGroup]="avvikelseFormGroup.get('orsakerFormGroup')"
-          [avvikelseFormGroup]="avvikelseFormGroup"
-          [selectedAlternative]="alternativeFormControl.value"
           (change)="setOrsakerChanged()"
+          [andraKandaOrsaker]="andraKandaOrsaker$ | async"
+          [avvikelseFormGroup]="avvikelseFormGroup"
+          [avvikelseOrsaker]="avvikelseOrsaker$ | async "
+          [franvaroOrsaker]="franvaroOrsaker$ | async"
+          [orsakerFormGroup]="avvikelseFormGroup.get('orsakerFormGroup')"
+          [selectedAlternative]="alternativeFormControl.value"
         ></msfa-deltagare-orsaks-form>
 
         <div *ngIf="showDescription" class="deltagare-avvikelse__description">
           <digi-ng-form-textarea
-            [formControlName]="descriptionFormControlName"
-            afLabel="Beskriv frånvaro"
-            [afSize]="sizeTextArea"
             [afDisableValidStyle]="true"
-            [afMaxLength]="2000"
-            [afRequired]="true"
             [afInvalidMessage]="descriptionFormControl.errors?.message"
             [afInvalid]="descriptionFormControl?.invalid && descriptionFormControl.touched"
+            [afMaxLength]="2000"
+            [afRequired]="true"
+            [afSize]="sizeTextArea"
+            [formControlName]="descriptionFormControlName"
+            afLabel="Beskriv frånvaro"
           ></digi-ng-form-textarea>
         </div>
 
         <msfa-deltagare-fragor-form
           *ngIf="showFragor"
+          [avvikelseFormGroup]="avvikelseFormGroup"
           [fragor1]="fragor1$ | async"
           [fragor2]="fragor2$ | async"
           [fragorFormGroup]="avvikelseFormGroup.get('fragorFormGroup')"
-          [avvikelseFormGroup]="avvikelseFormGroup"
           [selectedOrsaksKod]="selectedOrsaksKod"
         ></msfa-deltagare-fragor-form>
 
         <div *ngIf="showDatePicker" class="deltagare-avvikelse__datepicker">
           <digi-ng-form-datepicker
-            [formControlName]="dateFormControlName"
-            [afLabel]="'Välj dag för ' + (alternativeFormControl.value === 'franvaro' ? 'frånvaro' : 'avvikelse')"
             [afDisableValidStyle]="true"
             [afMinDate]="setMinDate(avrop.startDate)"
             [afMaxDate]="setMaxDate"
             [afInvalid]="avvikelseFormGroup.errors?.dateIsRequired"
+            [afLabel]="'Välj dag för ' + (alternativeFormControl.value === 'franvaro' ? 'frånvaro' : 'avvikelse')"
+            [formControlName]="dateFormControlName"
           ></digi-ng-form-datepicker>
-          <digi-form-validation-message af-variation="error" *ngIf="avvikelseFormGroup.errors?.dateIsRequired">
+          <digi-form-validation-message *ngIf="avvikelseFormGroup.errors?.dateIsRequired" af-variation="error">
             {{avvikelseFormGroup.errors?.dateIsRequired}}
           </digi-form-validation-message>
         </div>
 
         <div *ngIf="showDayOrPartOfDayPicker" class="deltagare-avvikelse__dayOrPartOfDay">
           <digi-ng-form-radiobutton-group
-            [afRadiobuttons]="dayOrPartOfDay"
-            [formControlName]="dayOrPartOfDayFormControlName"
-            [afRequired]="dayOrPartOfDayFormControl.invalid && dayOrPartOfDayFormControl.touched"
             (change)="setDayOrPartOfDayChanged()"
+            [afRadiobuttons]="dayOrPartOfDay"
+            [afRequired]="dayOrPartOfDayFormControl.invalid && dayOrPartOfDayFormControl.touched"
+            [formControlName]="dayOrPartOfDayFormControlName"
           ></digi-ng-form-radiobutton-group>
           <digi-form-validation-message
-            af-variation="error"
             *ngIf="dayOrPartOfDayFormControl.invalid && dayOrPartOfDayFormControl.touched"
+            af-variation="error"
           >
             {{dayOrPartOfDayFormControl.errors?.message}}
           </digi-form-validation-message>
@@ -91,51 +106,61 @@
 
         <msfa-deltagare-time-picker
           *ngIf="showTimePicker"
-          [timepickerFormGroup]="avvikelseFormGroup.get('timepickerFormGroup')"
           [avvikelseFormGroup]="avvikelseFormGroup"
+          [timepickerFormGroup]="avvikelseFormGroup.get('timepickerFormGroup')"
         ></msfa-deltagare-time-picker>
       </form>
     </ng-container>
 
     <msfa-deltagare-confirm-form
       *ngIf="currentStep === totalAmountOfSteps"
-      [formGroup]="avvikelseFormGroup"
-      [orsakskoderfranvaro]="franvaroOrsaker$ | async"
       [andraKandaOrsaker]="andraKandaOrsaker$ | async"
       [avvikelseOrsaker]="avvikelseOrsaker$ | async"
+      [formGroup]="avvikelseFormGroup"
       [fragor1]="fragor1$ | async"
       [fragor2]="fragor2$ | async"
+      [orsakskoderfranvaro]="franvaroOrsaker$ | async"
       [selectedOrsak]="selectedOrsaksKod"
     ></msfa-deltagare-confirm-form>
 
+    <digi-notification-alert
+      *ngIf="error$ | async as error"
+      af-heading="Någonting gick fel"
+      af-variation="danger"
+      class="deltagare-avvikelse__alert"
+    >
+      <p>Kunde inte spara avvikelserapporten. Ladda om sidan och försök igen.</p>
+      <p *ngIf="error.message" class="msfa__small-text">{{error.message}}</p>
+    </digi-notification-alert>
+
     <div class="deltagare-avvikelse__step-buttons-wrapper">
-      <ng-container *ngIf="(showSuccessNotification$ | async) !== true">
+      <ng-container *ngIf="(submittedDate$ | async) === null">
         <digi-button
-          *ngIf="currentStep > 1"
-          class="deltagare-avvikelse__step-buttons-wrapper--space-right"
-          af-variation="secondary"
-          af-size="m"
           (afOnClick)="previousStep()"
+          *ngIf="currentStep > 1"
+          af-size="m"
+          af-variation="secondary"
+          class="deltagare-avvikelse__step-buttons-wrapper--space-right"
         >
           Tillbaka
         </digi-button>
-        <digi-button *ngIf="currentStep === totalAmountOfSteps" af-size="m" (afOnClick)="openConfirmDialog = true">
+        <digi-button (afOnClick)="openConfirmDialog = true" *ngIf="currentStep === totalAmountOfSteps" af-size="m">
           Skicka in
         </digi-button>
       </ng-container>
-      <digi-button *ngIf="currentStep === (totalAmountOfSteps -1)" af-size="m" (afOnClick)="nextStep">
+      <digi-button (afOnClick)="nextStep" *ngIf="currentStep === (totalAmountOfSteps -1)" af-size="m">
         Förhandsgranska
       </digi-button>
-      <digi-button *ngIf="showSuccessNotification$ | async" af-size="m" (afOnClick)="backToDeltagare()">
-        Tillbaka till deltagaren
-      </digi-button>
     </div>
   </msfa-report-layout>
 
   <msfa-confirm-dialog
+    (confirmDialogChanged)="setConfirmDialogChanged($event)"
     [openConfirmDialog]="openConfirmDialog"
     reportToConfirm="avvikelserapport"
-    (confirmDialogChanged)="setConfirmDialogChanged($event)"
   >
   </msfa-confirm-dialog>
 </msfa-layout>
+<ng-template #skeletonRef>
+  <digi-ng-skeleton-base [afCount]="3" afText="Laddar data för avvikelserapport"></digi-ng-skeleton-base>
+</ng-template>

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

@@ -1,6 +1,13 @@
-@import 'apps/mina-sidor-fa/src/styles/variables/gutters';
+@import 'variables/gutters';
 
 .deltagare-avvikelse {
+  &__confirmation,
+  &__form {
+    display: flex;
+    flex-direction: column;
+    gap: $digi--layout--gutter--l;
+  }
+
   &__deltagare,
   &__alternative,
   &__description,
@@ -25,4 +32,8 @@
   &__step-buttons-wrapper--space-right {
     margin-right: var(--digi--layout--gutter--s);
   }
+
+  &__alert {
+    max-width: var(--digi--typography--text--max-width);
+  }
 }

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

@@ -1,14 +1,13 @@
 import { RadiobuttonModel } from '@af/digi-ng/_form/form-radiobutton-group';
 import { FormTextareaSize } from '@af/digi-ng/_form/form-textarea';
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
-import { ReportType } from '@msfa-enums/report-type.enum';
 import { ConfirmDialog } from '@msfa-enums/confirm-dialog.enum';
 import { DayOrPartOfDay } from '@msfa-enums/day-or-part-of-day.enum';
 import { FranvaroOrsaksKodEnum } from '@msfa-enums/franvaro-orsak-kod.enum';
 import { KandaOrsakerEnum } from '@msfa-enums/kanda-orsaker-kod.enum';
-import { Avrop } from '@msfa-models/avrop.model';
+import { ReportType } from '@msfa-enums/report-type.enum';
 import { AvvikelseAlternativ } from '@msfa-models/avvikelse-alternativ.model';
 import { Avvikelse } from '@msfa-models/avvikelse.model';
 import { FragorForAvvikelser } from '@msfa-models/fragor-for-avvikelser.model';
@@ -17,21 +16,28 @@ import { OrsaksKoderAvvikelse } from '@msfa-models/orsaks-koder-avvikelse.model'
 import { KandaAvvikelseKoder, OrsaksKoderFranvaro } from '@msfa-models/orsaks-koder-franvaro.model';
 import { DeltagareApiService } from '@msfa-services/api/deltagare.api.service';
 import {
-  requiredOrsakerValidator,
   requiredAnnanKandOrsakValidator,
-  requiredDescriptionValidator,
   RequiredDateValidator,
   requiredDayOrPartOfDayValidator,
-  requiredStartTimeValidator,
+  requiredDescriptionValidator,
   requiredEndTimeValidator,
   requiredFraga1Validator,
-  requiredfraga2Validator
+  requiredfraga2Validator,
+  requiredOrsakerValidator,
+  requiredStartTimeValidator,
 } from '@msfa-validators/avvikelse-form-validator';
 import { RequiredValidator } from '@msfa-validators/required.validator';
 import { BehaviorSubject, Observable } from 'rxjs';
-import { map, switchMap } from 'rxjs/operators';
+import { map, shareReplay, switchMap } from 'rxjs/operators';
 import { DeltagareAvvikelseService } from './deltagare-avvikelse.service';
 import { avvikelseAlternatives, dayOrPartOfDay } from './report-alternatives';
+import { CustomError } from '@msfa-models/error/custom-error';
+import { ErrorType } from '@msfa-enums/error-type.enum';
+import { Avrop } from '@msfa-models/avrop.model';
+
+interface Params {
+  genomforandeReferens: string;
+}
 
 @Component({
   selector: 'msfa-deltagare-avvikelse',
@@ -39,7 +45,7 @@ import { avvikelseAlternatives, dayOrPartOfDay } from './report-alternatives';
   styleUrls: ['./deltagare-avvikelse.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DeltagareAvvikelseComponent implements OnInit {
+export class DeltagareAvvikelseComponent {
   readonly alternativeFormControlName = 'alternative';
   readonly descriptionFormControlName = 'description';
   readonly dateFormControlName = 'date';
@@ -50,11 +56,14 @@ export class DeltagareAvvikelseComponent implements OnInit {
   readonly fraga2FormControlName = 'fraga2';
   readonly startTimeFormControlName = 'startTime';
   readonly endTimeFormControlName = 'endTime';
+  genomforandeReferens$: Observable<number> = this.activatedRoute.params.pipe(
+    map((params: Params) => +params.genomforandeReferens)
+  );
+  avrop$: Observable<Avrop> = this.genomforandeReferens$.pipe(
+    switchMap(genomforandeReferens => this.deltagareAvvikelseService.fetchAvropInformation$(genomforandeReferens)),
+    shareReplay(1)
+  );
 
-  private _showSuccessNotification$ = new BehaviorSubject<boolean>(false);
-  private _showDangerNotification$ = new BehaviorSubject<boolean>(false);
-
-  avrop$: Observable<Avrop>;
   franvaroOrsaker$: Observable<OrsaksKoderFranvaro[]>;
   avvikelseOrsaker$: Observable<OrsaksKoderAvvikelse[]>;
   andraKandaOrsaker$: Observable<KandaAvvikelseKoder[]>;
@@ -65,27 +74,7 @@ export class DeltagareAvvikelseComponent implements OnInit {
   avvikelseAlternatives: RadiobuttonModel[] = avvikelseAlternatives;
   dayOrPartOfDay: RadiobuttonModel[] = dayOrPartOfDay;
   selectedOrsaksKod: string;
-  avvikelseFormGroup: FormGroup | null = null;
+  avvikelseFormGroup = new FormGroup(
-  totalAmountOfSteps = 2;
-  currentStep = 1;
-  openConfirmDialog = false;
-  showSuccessNotification$ = this._showSuccessNotification$.asObservable();
-  showDangerNotification$ = this._showDangerNotification$.asObservable();
-
-  constructor(
-    private deltagareAvvikelseService: DeltagareAvvikelseService,
-    private deltagareApiService: DeltagareApiService,
-    private router: Router,
-    private activatedRoute: ActivatedRoute
-  ) { }
-
-  ngOnInit(): void {
-    this.avrop$ = this.activatedRoute.params
-      .pipe(
-        switchMap(({ genomforandeReferens }) => this.deltagareApiService.fetchAvropInformation$(genomforandeReferens))
-      )
-
-    this.avvikelseFormGroup = new FormGroup(
     {
       alternative: new FormControl(null, [RequiredValidator()]),
       description: new FormControl('', [requiredDescriptionValidator()]),
@@ -108,7 +97,20 @@ export class DeltagareAvvikelseComponent implements OnInit {
       validators: [RequiredDateValidator.CheckIfRequired()],
     }
   );
-  }
+  totalAmountOfSteps = 2;
+  currentStep = 1;
+  openConfirmDialog = false;
+  private _submittedDate$ = new BehaviorSubject<Date | null>(null);
+  submittedDate$: Observable<Date | null> = this._submittedDate$.asObservable();
+  private _error$ = new BehaviorSubject<CustomError>(null);
+  error$: Observable<CustomError> = this._error$.asObservable();
+  private _showDangerNotification$ = new BehaviorSubject<boolean>(false);
+
+  constructor(
+    private deltagareAvvikelseService: DeltagareAvvikelseService,
+    private deltagareApiService: DeltagareApiService,
+    private activatedRoute: ActivatedRoute
+  ) {}
 
   get alternativeFormControl(): AbstractControl | undefined {
     return this.avvikelseFormGroup?.get(this.alternativeFormControlName);
@@ -152,16 +154,16 @@ export class DeltagareAvvikelseComponent implements OnInit {
 
   get franvaro(): FranvaroAlternativ {
     return {
-      avvikelseorsakskod: this.orsakerFormControl.value as string,
+      avvikelseOrsaksKod: this.orsakerFormControl.value as string,
       datum: this.dateFormControl.value as string,
-      heldag: this.dayOrPartOfDayFormControl.value === DayOrPartOfDay.HELDAG ? true : false,
+      heldag: this.dayOrPartOfDayFormControl.value === DayOrPartOfDay.HELDAG,
-      starttid: (this.startTimeFormControl.value as string) || '9:00',
+      startTid: (this.startTimeFormControl.value as string) || '9:00',
-      sluttid: (this.endTimeFormControl.value as string) || '16:00',
+      slutTid: (this.endTimeFormControl.value as string) || '16:00',
-      forvantad_narvaro: {
+      forvantadNarvaro: {
-        starttid: '',
+        startTid: '',
-        sluttid: '',
+        slutTid: '',
       },
-      alternativ_for_kanda_orsaker: {
+      alternativForKandaOrsaker: {
         typ: (this.andraKandaOrsakerFormControl.value as string) || '',
         motivering: this.descriptionFormControl.value as string,
       },
@@ -190,7 +192,7 @@ export class DeltagareAvvikelseComponent implements OnInit {
 
   get showDescription(): boolean {
     return (
-      (this.alternativeFormControl.value as string) == ReportType.FRANVARO &&
+      (this.alternativeFormControl.value as string) === ReportType.FRANVARO &&
       +this.orsakerFormControl.value === FranvaroOrsaksKodEnum.AnnanKandOrsak &&
       +this.andraKandaOrsakerFormControl.value === KandaOrsakerEnum.AnnanOrsak
     );
@@ -222,8 +224,6 @@ export class DeltagareAvvikelseComponent implements OnInit {
   }
 
   get nextStep(): number {
-    console.log(this.avvikelseFormGroup);
-
     this.avvikelseFormGroup.markAllAsTouched();
     if (this.avvikelseFormGroup.valid && this.currentStep < this.totalAmountOfSteps) {
       return this.currentStep++;
@@ -234,41 +234,72 @@ export class DeltagareAvvikelseComponent implements OnInit {
     this.openConfirmDialog = false;
     if (confirm === ConfirmDialog.ACCEPTED) {
       const postAvvikelse: Avvikelse = {
-        datum_for_rapportering: this.todayDate,
+        genomforandeReferens: +this.activatedRoute.snapshot.params['genomforandeReferens'],
-        sokandeId: +this.activatedRoute.snapshot.params['genomforandeReferens'],
       };
 
       if ((this.alternativeFormControl.value as string) === ReportType.AVVIKELSE) {
-        postAvvikelse['avvikelsealternativ'] = this.avvikelse;
+        this.postAvvikelse();
-      } else if ((this.alternativeFormControl.value as string) == ReportType.FRANVARO) {
+      } else if ((this.alternativeFormControl.value as string) === ReportType.FRANVARO) {
-        postAvvikelse['franvaro'] = this.franvaro;
+        this.postFranvaro();
+      }
+    }
   }
 
+  get genomforandeReferensSnapshot() {
+    return +this.activatedRoute.snapshot.params['genomforandeReferens'];
+  }
+
+  postAvvikelse() {
+    const avvikelseData: Avvikelse = {
+      genomforandeReferens: this.genomforandeReferensSnapshot,
+      avvikelseAlternativ: this.avvikelse,
+    };
+
     this.deltagareAvvikelseService
-        .createAvvikelse$(postAvvikelse, this.alternativeFormControl.value as string)
+      .createAvvikelse$(avvikelseData)
-        .subscribe({
+      .then(() => {
-          error: () => this._showDangerNotification$.next(true),
+        this._submittedDate$.next(new Date());
-          next: () => this._showSuccessNotification$.next(true),
+        this.avvikelseFormGroup.reset();
-          complete: () => this.avvikelseFormGroup.reset(),
+        this.currentStep = 3;
+      })
+      .catch((error: Error) => {
+        this._error$.next(new CustomError({ error, message: error.message, type: ErrorType.API }));
       });
   }
+
+  postFranvaro() {
+    const avvikelseData: Avvikelse = {
+      genomforandeReferens: this.genomforandeReferensSnapshot,
+      franvaro: this.franvaro,
+    };
+
+    this.deltagareAvvikelseService
+      .createFranvaro$(avvikelseData)
+      .then(() => {
+        this._submittedDate$.next(new Date());
+        this.avvikelseFormGroup.reset();
+        this.currentStep = 3;
+      })
+      .catch((error: Error) => {
+        this._error$.next(new CustomError({ error, message: error.message, type: ErrorType.API }));
+      });
   }
 
   setAlternative(): void {
     if ((this.alternativeFormControl.value as string) == ReportType.FRANVARO) {
-      this.franvaroOrsaker$ = this.deltagareAvvikelseService.getOrsaksKoderFranvaro$();
+      this.franvaroOrsaker$ = this.deltagareAvvikelseService.getOrsaksKoderFranvaro$.pipe(shareReplay(1));
-      this.andraKandaOrsaker$ = this.deltagareAvvikelseService.getAndraKandaOrsaker$();
+      this.andraKandaOrsaker$ = this.deltagareAvvikelseService.getAndraKandaOrsaker$.pipe(shareReplay(1));
     }
 
     if ((this.alternativeFormControl.value as string) == ReportType.AVVIKELSE) {
-      this.avvikelseOrsaker$ = this.deltagareAvvikelseService.getOrsaksKoderAvvikelse$();
+      this.avvikelseOrsaker$ = this.deltagareAvvikelseService.getOrsaksKoderAvvikelse$.pipe(shareReplay(1));
-      this.fragor1$ = this.deltagareAvvikelseService.getFragorForAvvikelser$().pipe(
+      this.fragor1$ = this.deltagareAvvikelseService.fragorForAvvikelser$.pipe(
         map((fragor: FragorForAvvikelser[]) => {
           return fragor.filter((fraga: FragorForAvvikelser) => fraga.id.includes('_1'));
         })
       );
 
-      this.fragor2$ = this.deltagareAvvikelseService.getFragorForAvvikelser$().pipe(
+      this.fragor2$ = this.deltagareAvvikelseService.fragorForAvvikelser$.pipe(
         map((fragor: FragorForAvvikelser[]) => {
           return fragor.filter((fraga: FragorForAvvikelser) => {
             return fraga.id.includes('_2');
@@ -314,17 +345,11 @@ export class DeltagareAvvikelseComponent implements OnInit {
   previousStep(): void {
     if (this.currentStep > 1) {
       this.currentStep--;
-      this._showSuccessNotification$.next(false);
+      this._submittedDate$.next(null);
       this._showDangerNotification$.next(false);
     }
   }
 
-  backToDeltagare(): void {
-    this.router
-      .navigate(['./deltagare', this.activatedRoute.snapshot.params['genomforandeReferens']])
-      .catch(error => console.log(error, 'Failed to go back to deltagare'));
-  }
-
   private clearControlOnAlternativeChange(): void {
     this.descriptionFormControl.setValue('');
     this.fraga1FormControl.setValue('');

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-avvikelse/deltagare-avvikelse.module.ts

@@ -15,6 +15,8 @@ import { DeltagareOrsaksFormModule } from './components/deltagare-orsaks-form/de
 import { DeltagareTimePickerModule } from './components/deltagare-time-picker/deltagare-time-picker.module';
 import { DeltagareAvvikelseComponent } from './deltagare-avvikelse.component';
 import { DeltagareAvvikelseService } from './deltagare-avvikelse.service';
+import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
+import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -34,6 +36,8 @@ import { DeltagareAvvikelseService } from './deltagare-avvikelse.service';
     DeltagareConfirmFormModule,
     ReportLayoutModule,
     ConfirmDialogModule,
+    BackLinkModule,
+    DigiNgSkeletonBaseModule,
   ],
   providers: [DeltagareAvvikelseService],
   exports: [DeltagareAvvikelseComponent],

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

@@ -6,14 +6,17 @@ import { OrsaksKoderAvvikelse } from '@msfa-models/orsaks-koder-avvikelse.model'
 import { KandaAvvikelseKoder, OrsaksKoderFranvaro } from '@msfa-models/orsaks-koder-franvaro.model';
 import { AvvikelseApiService } from '@msfa-services/api/avvikelse-api.service';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { map, shareReplay } from 'rxjs/operators';
+import { DeltagareApiService } from '@msfa-services/api/deltagare.api.service';
 
 @Injectable()
 export class DeltagareAvvikelseService {
-  constructor(private avvikelseApiService: AvvikelseApiService) {}
+  public fragorForAvvikelser$: Observable<
-
+    FragorForAvvikelser[]
-  public getOrsaksKoderFranvaro$(): Observable<OrsaksKoderFranvaro[]> {
+  > = this.avvikelseApiService.getFragorForAvvikelser$().pipe(shareReplay(1));
-    return this.avvikelseApiService.getOrsaksKoderFranvaro$().pipe(
+  public getOrsaksKoderFranvaro$: Observable<
+    OrsaksKoderFranvaro[]
+  > = this.avvikelseApiService.getOrsaksKoderFranvaro$().pipe(
     map((orsaksKoder: OrsaksKoderFranvaro[]) => {
       orsaksKoder.find(kod => {
         if (kod.value === FranvaroOrsaksKodEnum.VAB) {
@@ -21,24 +24,24 @@ export class DeltagareAvvikelseService {
         }
       });
       return this.sortOrsaksKoder(orsaksKoder);
-      })
+    }),
+    shareReplay(1)
   );
+
+  constructor(private avvikelseApiService: AvvikelseApiService, private deltagareApiService: DeltagareApiService) {}
+
+  public getOrsaksKoderAvvikelse$: Observable<
+    OrsaksKoderAvvikelse[]
+  > = this.avvikelseApiService.getOrsaksKoderAvvikelse$();
+
+  public getAndraKandaOrsaker$: Observable<KandaAvvikelseKoder[]> = this.avvikelseApiService.getAndraKandaOrsaker$();
+
+  public createAvvikelse$(avvikelse: Avvikelse): Promise<void> {
+    return this.avvikelseApiService.createAvvikelse$(avvikelse);
   }
 
-  public getOrsaksKoderAvvikelse$(): Observable<OrsaksKoderAvvikelse[]> {
+  public createFranvaro$(avvikelse: Avvikelse): Promise<void> {
-    return this.avvikelseApiService.getOrsaksKoderAvvikelse$();
+    return this.avvikelseApiService.createFranvaro$(avvikelse);
-  }
-
-  public getAndraKandaOrsaker$(): Observable<KandaAvvikelseKoder[]> {
-    return this.avvikelseApiService.getAndraKandaOrsaker$();
-  }
-
-  public getFragorForAvvikelser$(): Observable<FragorForAvvikelser[]> {
-    return this.avvikelseApiService.getFragorForAvvikelser$();
-  }
-
-  public createAvvikelse$(avvikelse: Avvikelse, alternative: string): Observable<Avvikelse> {
-    return this.avvikelseApiService.createAvvikelse$(avvikelse, alternative);
   }
 
   private sortOrsaksKoder(orsaksKoder: OrsaksKoderFranvaro[]): OrsaksKoderFranvaro[] {
@@ -66,4 +69,8 @@ export class DeltagareAvvikelseService {
     const sortedOrsaksKoder = orsaksKoder.sort((kodA, kodB) => (kodA.index < kodB.index ? -1 : 1));
     return sortedOrsaksKoder;
   }
+
+  fetchAvropInformation$(genomforandeReferens: number) {
+    return this.deltagareApiService.fetchAvropInformation$(genomforandeReferens);
+  }
 }

apps/mina-sidor-fa/src/app/shared/models/avvikelse.model.ts

@@ -2,30 +2,27 @@ import { AvvikelseAlternativ } from './avvikelse-alternativ.model';
 import { FranvaroAlternativ } from './franvaro-alternativ.model';
 
 export interface Avvikelse {
-  datum_for_rapportering: string,
+  genomforandeReferens: number;
-  sokandeId: number;
+  avvikelseAlternativ?: AvvikelseAlternativ;
-  avvikelsealternativ?: AvvikelseAlternativ,
+  franvaro?: FranvaroAlternativ;
-  franvaro?: FranvaroAlternativ
 }
 
 export interface AvvikelseRequestData {
-  datum_for_rapportering: string,
+  genomforandeReferens: number;
-  sokandeId: number;
+  avvikelseAlternativ: AvvikelseAlternativ;
-  avvikelsealternativ: AvvikelseAlternativ,
 }
 
 export interface FranvaroRequestData {
-  datum_for_rapportering: string,
+  genomforandeReferens: number;
-  sokandeId: number;
+  franvaro: FranvaroAlternativ;
-  franvaro: FranvaroAlternativ
 }
 
 export function mapAvvikelseRequestDataToAvvikelse(data: AvvikelseRequestData): Avvikelse {
-  const { datum_for_rapportering, sokandeId, avvikelsealternativ } = data;
+  return data;
-
+  // const { genomforandeReferens, avvikelseAlternativ } = data;
-  return {
+  //
-    datum_for_rapportering,
+  // return {
-    sokandeId,
+  //   genomforandeReferens,
-    avvikelsealternativ
+  //   avvikelseAlternativ,
-  }
+  // };
 }

apps/mina-sidor-fa/src/app/shared/models/franvaro-alternativ.model.ts

@@ -1,15 +1,15 @@
 export interface FranvaroAlternativ {
-  avvikelseorsakskod: string;
+  avvikelseOrsaksKod: string;
   datum: string;
   heldag: boolean;
-  starttid: string;
+  startTid: string;
-  sluttid: string;
+  slutTid: string;
-  forvantad_narvaro: {
+  forvantadNarvaro: {
-    starttid: string;
+    startTid: string;
-    sluttid: string;
+    slutTid: string;
-  },
+  };
-  alternativ_for_kanda_orsaker: {
+  alternativForKandaOrsaker: {
-    typ: string,
+    typ: string;
     motivering: string;
-  }
+  };
 }

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

@@ -1,12 +1,10 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { ReportType } from '@msfa-enums/report-type.enum';
-import { ErrorType } from '@msfa-enums/error-type.enum';
 import { environment } from '@msfa-environment';
 import { FragorForAvvikelserResponse } from '@msfa-models/api/fragor-for-avvikelser.response';
 import { KandaAvvikelseKoderResponse } from '@msfa-models/api/kanda-avvikelse-koder.response.model';
 import { OrsaksKoderAvvikelseResponse } from '@msfa-models/api/orsaks-koder-avvikelse.response.model';
-import { Avvikelse, AvvikelseRequestData, mapAvvikelseRequestDataToAvvikelse } from '@msfa-models/avvikelse.model';
+import { Avvikelse } from '@msfa-models/avvikelse.model';
 import { FragorForAvvikelser, mapResponseToFragorForAvvikelser } from '@msfa-models/fragor-for-avvikelser.model';
 import { mapResponseToOrsaksKoderAvvikelse, OrsaksKoderAvvikelse } from '@msfa-models/orsaks-koder-avvikelse.model';
 import {
@@ -15,15 +13,16 @@ import {
   mapResponseToOrsaksKoderFranvaro,
   OrsaksKoderFranvaro,
 } from '@msfa-models/orsaks-koder-franvaro.model';
-import { ErrorService } from '@msfa-services/error.service';
+import { Observable } from 'rxjs';
-import { Observable, throwError } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
-import { catchError, filter, map, take } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AvvikelseApiService {
-  private _apiBaseUrl = `${environment.api.url}/report`;
+  private _apiBaseUrl = `${environment.api.url}/rapporter`;
+
+  constructor(private httpClient: HttpClient) {}
 
   public getOrsaksKoderFranvaro$(): Observable<OrsaksKoderFranvaro[]> {
     return this.httpClient
@@ -57,32 +56,11 @@ export class AvvikelseApiService {
     );
   }
 
-  public createAvvikelse$(avvikelse: Avvikelse, alternative: string): Observable<Avvikelse> {
+  public createAvvikelse$(avvikelse: Avvikelse): Promise<void> {
-    return this.httpClient
+    return this.httpClient.post<void>(`${this._apiBaseUrl}/avvikelse`, avvikelse).toPromise();
-      .post<{ data: AvvikelseRequestData }>(`${this._apiBaseUrl}/${this.setEndPoint(alternative)}`, avvikelse)
-      .pipe(
-        filter(response => !!response?.data),
-        take(1),
-        map(({ data }) => mapAvvikelseRequestDataToAvvikelse(data)),
-        catchError(error => throwError({ message: error as string, type: ErrorType.API }))
-      );
   }
 
-  private setEndPoint(alternative: string): string {
+  public createFranvaro$(avvikelse: Avvikelse): Promise<void> {
-    let endpoint = '';
+    return this.httpClient.post<void>(`${this._apiBaseUrl}/franvaro`, avvikelse).toPromise();
-
-    switch (alternative) {
-      case ReportType.AVVIKELSE:
-        endpoint = 'avvikelse';
-        break;
-      case ReportType.FRANVARO:
-        endpoint = 'franvaro';
-        break;
-      default:
-        break;
   }
-    return endpoint;
-  }
-
-  constructor(private httpClient: HttpClient, private errorService: ErrorService) {}
 }

config/proxy.conf.json

@@ -8,6 +8,8 @@
     "target": "https://298b3305d4834aa4869f8250a0d0b314.ece-test.arbetsformedlingen.se:9243",
     "secure": false,
     "changeOrigin": true,
-    "pathRewrite": { "^/logging": "" }
+    "pathRewrite": {
+      "^/logging": ""
+    }
   }
 }