Merge pull request #134 in TEA/mina-sidor-fa-web from feature/TV-668-pr-activities-form to develop

Squashed commit of the following:

commit 25325c6ee86f294d7b0a5673a0643948e3a2a583
Merge: 71715ea5 ca32a1ed
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Mon Sep 27 17:22:02 2021 +0200

    Merge branch 'develop' into feature/TV-668-pr-activities-form

commit 71715ea5215c680f655c0455a836c449fffac389
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Mon Sep 27 17:15:33 2021 +0200

    minor changes

commit 6a0b64d587665444635b6f93f6932ef42f51c6ce
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Mon Sep 27 12:53:52 2021 +0200

    re-added mistakenly removed line

commit 9c0a0d1261c2342309059681c128dacd9fe0c50c
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Mon Sep 27 12:42:33 2021 +0200

    swiched over to actual types-model for activity and aDsubActivities

commit c50c7ca5b02f45b5c32776952e93e0943c843065
Merge: 7bfd9bf4 a7aa94e0
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Mon Sep 27 12:39:10 2021 +0200

    fixed some merge conflicts

commit 7bfd9bf4d867f68e50fa9756e2904e39ce8cd944
Merge: 5268a2c0 85242b05
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Mon Sep 27 09:00:36 2021 +0200

    resolved some merge conflicts

commit 5268a2c0c6ce940b2235d872f3dfaa2193380d12
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Mon Sep 27 08:48:43 2021 +0200

    minor changes and removals

commit 02d43100c3760fb3620057d452026fb4f692e460
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Sun Sep 26 13:24:30 2021 +0200

    remove empty space

commit 33a8884e41f03c84b3f825e6729e7dc007c5ebb8
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Sat Sep 25 22:37:36 2021 +0200

    added changes to method to dynamically create activity fields

commit b049890a340afd35fc6af1ab5c77cb3ec94a6100
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Fri Sep 24 14:07:25 2021 +0200

    changes made to the mock api for the activities

commit e6aaf979cb83b716feea37bf68c110df4ea0599c
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Fri Sep 24 12:58:06 2021 +0200

    minor corrections

commit 2b38e18c77973057c804fb383a93b33af6656a75
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Fri Sep 24 12:42:47 2021 +0200

    created mock-data for getting activites and sub-activities

commit acfe8ab60b7f7bb4c9eb8b14ff7ca0c855b414f7
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Fri Sep 24 11:46:10 2021 +0200

    created basic structure of the periodisk redovisning form-object and relevant basic methods

commit 05865a5eec270bae8720abfd738f67df72d7d457
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 23 23:09:43 2021 +0200

    added formcontrol for comments

commit 2e38dd70f4b03c9a6af86497124b5ee08999d21b
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 23 22:04:40 2021 +0200

    minor addition

commit d56a76c600d8ff63187d958fc76af04e729d3aa0
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 23 22:01:55 2021 +0200

    created for arrays for the fields that required it

commit 43026442c523ceb559f128ddec7a3d8dd39eed88
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 23 17:34:14 2021 +0200

    created getters for formarrayfields

commit 0dc78842ba154b03c945a89adbe05d142eee0ac0
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 23 17:28:02 2021 +0200

    created the activities form fields

commit c14807a5acb11140250066c7340acb54bc75dcf9
Merge: 8918360c ed840425
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 23 15:11:18 2021 +0200

    Merge branch 'feature/TV-654-pr-form-base' into feature/TV-668-pr-activities-form

commit ed8404251283d896f8612cf43f3a2e3dc59015e1
Merge: 032e4501 14739fb9
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 23 15:09:38 2021 +0200

    Merge branch 'develop' into feature/TV-654-pr-form-base

... and 13 more commits

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-report/pages/periodisk-redovisning/components/periodisk-redovisning-form/periodisk-redovisning-form.component.ts

@@ -5,11 +5,14 @@ import { FormGroup } from '@angular/forms';
   selector: 'msfa-periodisk-redovisning-form',
   templateUrl: './periodisk-redovisning-form.component.html',
   styleUrls: ['./periodisk-redovisning-form.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PeriodiskRedovisningFormComponent {
   @Input() periodiskRedovisningFormGroup: FormGroup;
   @Input() totalAmountOfSteps: number;
   @Input() currentStep: number;
   @Output() submitPRFormGroup = new EventEmitter<FormGroup>();
+
+
+  constructor() {}
 }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-report/pages/periodisk-redovisning/periodisk-redovisning.component.html

@@ -6,14 +6,14 @@
     [currentStep]="currentStep"
     [isPeriodDate]="true" 
     [startDate]="'2021-09-01'"
-    [endDate]="'2021-09-30'">
+    [endDate]="'2021-09-30'"
+    (currentStepEvent)="currentStep = $event"
+    (sendRequestEvent)="sendRequest = $event">
         <form
         class="periodisk-redovisning"
         *ngIf="periodiskRedovisningFormGroup"
         [formGroup]="periodiskRedovisningFormGroup">
             <ng-container *ngIf="currentStep === 1">
-                <div class="periodisk-redovisning__alternative">
-                    <div class="periodisk-redovisning__alternative--radiobtn">
                 <p>Har ni lämnat individuella förslag på arbeten till arbetssökande under perioden?</p>
                 <digi-ng-form-radiobutton-group
                 [afRadiobuttons]="[{label:'Ja', value: true}, {label:'Nej', value: false}]"
@@ -22,8 +22,8 @@
                 ></digi-ng-form-radiobutton-group>
                 <digi-form-validation-message 
                 af-variation="error"
-                        *ngIf="lamnatJobbForslagFormControl.invalid && lamnatJobbForslagFormControl.touched">
+                *ngIf="submitted && lamnatJobbForslagFormControl.invalid">
-                            Svar på frågorna är obligatoriskt
+                    Ett val är obligatoriskt
                 </digi-form-validation-message>
                 
                 <p class="periodisk-redovisning__space-top">Har ni, under perioden, tillhandahållit språkstöd?</p>
@@ -34,14 +34,12 @@
                 ></digi-ng-form-radiobutton-group>
                 <digi-form-validation-message 
                 af-variation="error"
-                        *ngIf="providedSprakStodFormControl.invalid && providedSprakStodFormControl.touched">
+                *ngIf="submitted && providedSprakStodFormControl.invalid">
-                            Svar på frågorna är obligatoriskt
+                Ett val är obligatoriskt
                 </digi-form-validation-message>
-                    </div>
-                </div>
             </ng-container>
-
                 <div class="periodisk-redovisning__step-buttons-wrapper">
+                <br /> 
                 <ng-container *ngIf="currentStep > 1">
                     <digi-button class="periodisk-redovisning__step-buttons-wrapper--space-right" 
                             af-variation="secondary" af-size="m" (afOnClick)="previousStep()">

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-report/pages/periodisk-redovisning/periodisk-redovisning.component.ts

@@ -1,7 +1,8 @@
 import { RadiobuttonGroupDirection } from '@af/digi-ng/_form/form-radiobutton-group';
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
+import { AbstractControl, FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
-import { RequiredValidator } from '@msfa-validators/required.validator';
+import { Activity, SubActivity } from '@msfa-models/activity.model';
+import { PeriodiskRedovisningService } from '../../services/periodisk-redovisning.service';
 
 @Component({
   selector: 'msfa-periodisk-redovisning',
@@ -10,18 +11,30 @@ import { RequiredValidator } from '@msfa-validators/required.validator';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PeriodiskRedovisningComponent implements OnInit {
+  //activities$ = this.periodiskRedovisningService.getActivities$();
+  
   radiobuttonGroupDirection = RadiobuttonGroupDirection;
   totalAmountOfSteps =3;
   currentStep = 1;
+  moveToNextStep = false;
 
   // Form-related variables
   periodiskRedovisningFormGroup: FormGroup;
+  submitted = false;
 
   readonly lamnatJobbForslagFormControlName = 'lamnatJobbForslag';
   readonly providedSprakStodFormControlName = 'providedSprakStod';
+  readonly activitiesFormArrayName = 'activities';
+  readonly datesForActivitiesFormArrayName = 'datesForActivities';
+  readonly subActivitiesFormArrayName = 'subActivities';
+
+
+  constructor(private periodiskRedovisningService: PeriodiskRedovisningService) {}
   
   ngOnInit(): void {
-    this.initializePeriodiskRedovisningFormGroup();
+    this.periodiskRedovisningService.getActivities$().subscribe(
+      activities => this.initializePeriodiskRedovisningFormGroup(activities)
+    );
   }
 
   get lamnatJobbForslagFormControl(): AbstractControl {
@@ -30,24 +43,107 @@ export class PeriodiskRedovisningComponent implements OnInit {
   get providedSprakStodFormControl(): AbstractControl {
     return this.periodiskRedovisningFormGroup.get(this.providedSprakStodFormControlName);
   }
+  get activitiesFormArray(): FormArray {
+    return this.periodiskRedovisningFormGroup.get(this.activitiesFormArrayName) as FormArray;
+  }
 
-  initializePeriodiskRedovisningFormGroup(): void {
+  initializePeriodiskRedovisningFormGroup(activitiesList: Activity[]):void {
     this.periodiskRedovisningFormGroup = new FormGroup({
-      lamnatJobbForslag: new FormControl(null, [RequiredValidator()]),
+      lamnatJobbForslag: new FormControl(null, [Validators.required]),
-      providedSprakStod: new FormControl(null, [RequiredValidator()]),
+      providedSprakStod: new FormControl(null, [Validators.required]),
+      activities: new FormArray([]),
+    });
+    this.getActivitesFormArray(activitiesList);
+  }
+
+  getActivitesFormArray(activities: Activity[]):void {
+    activities.forEach(activity => {
+      const newActivity = [`activity${activity.id}`, 'datesForActivities', 'subActivities', 'comment'];
+      this.activitiesFormArray.push(
+        new FormGroup(
+          Object.fromEntries(
+            newActivity.map(formCtrlName => [
+              formCtrlName, this.getActivtiesFormField(formCtrlName, activity)
+            ])
+          )
+        )
+      );
     });
   }
 
+  getActivtiesFormField(formCtrlName: string, activity: Activity):(FormArray | FormControl) {
+    if (formCtrlName === 'datesForActivities') {
+      return new FormArray([]);
+    } else if (formCtrlName === 'subActivities') {
+      return this.addSubActivitesFormArray(activity?.subActivities, activity.id);
+    }
+    return new FormControl(null, []);
+  }
+
+  addSelectedDatesToFormArray(datesList: string[]):FormArray {
+    // TODO: Använd denna metod när datumen valts i kalendern!
+    const formcontrolNamesList = ['date', 'hours', 'doneOnRemote'];
+    const datesForActivitiesFormArray = new FormArray([]);
+    for (let i = 0; i < datesList.length; i++) {
+      datesForActivitiesFormArray.push(
+        new FormGroup(
+          Object.fromEntries(
+            formcontrolNamesList.map(formCtrlName => [
+              formCtrlName,
+              new FormControl(null, [])
+            ])
+          )
+        )
+      );
+    }
+    return datesForActivitiesFormArray;
+  }
+
+  addSubActivitesFormArray(subActivities: SubActivity[], activityId: number):FormArray {
+    // TODO: lägg till if-sats ex: if !subActivities etc.
+    if(!subActivities) {return;}
+    const subActivitiesList = subActivities.map(activity => [`activity${activity.id}`]);
+    const subActivitiesFormArray = new FormArray([]);
+    if (activityId === 188 || activityId === 162) {
+      subActivitiesList.forEach(activity => {
+        subActivitiesFormArray.push(
+          new FormGroup(
+            Object.fromEntries(
+              activity.map(formCtrlName => [formCtrlName, new FormControl(null, [])])
+            )
+          )
+        );
+      });
+    }
+    return subActivitiesFormArray;
+  }
+
+  getActivityId(formCtrlName: string):number {
+    if(!formCtrlName.startsWith('activity')) {
+      return;
+    }
+    return Number(formCtrlName.replace('activity', ''));
+  }
+  
   nextStep():void {
-    if (this.periodiskRedovisningFormGroup?.valid && this.currentStep < this.totalAmountOfSteps) {
+    this.submitted = true;
-      console.log('this.prFormGroup', this.periodiskRedovisningFormGroup);
+    console.log('TESSSSST:::', this.periodiskRedovisningFormGroup.getRawValue());
+    this.moveToNextStep = true;
+    if(
+      this.currentStep === 1 &&
+      this.lamnatJobbForslagFormControl.valid &&
+      this.providedSprakStodFormControl.valid
+    ) {
+      this.moveToNextStep = false;
+      this.currentStep++;
+    } else if(this.periodiskRedovisningFormGroup.valid && 
+              this.currentStep === (this.totalAmountOfSteps-2)) {
       this.currentStep++;
     }
-    console.log('this.prFormGroup', this.lamnatJobbForslagFormControl.value);
-    this.periodiskRedovisningFormGroup?.markAllAsTouched();
   }
 
   previousStep():void {
+    this.moveToNextStep = false;
     if(this.currentStep > 1) {
       this.currentStep--;
     }
@@ -56,4 +152,5 @@ export class PeriodiskRedovisningComponent implements OnInit {
   sendRequest(val: boolean):boolean {
     return val;
   }
+
 }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-report/services/periodisk-redovisning-form.service.ts

@@ -1,17 +0,0 @@
-import { Injectable } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class PeriodiskRedovisningFormService {
-  private periodiskRedovisningFormGroup: FormGroup;
-
-  setPeriodiskRedovisningForm(form: FormGroup): void {
-    this.periodiskRedovisningFormGroup = form;
-  }
-
-  get periodiskRedovisningForm(): FormGroup {
-    return this.periodiskRedovisningFormGroup;
-  }
-}

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-report/services/periodisk-redovisning.service.ts

@@ -0,0 +1,23 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { environment } from '@msfa-environment';
+import { Activity, ActivityResponse, mapResponseToActivity } from '@msfa-models/activity.model';
+import { Observable } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PeriodiskRedovisningService {
+  private _apiBaseUrl = `${environment.api.url}`;
+
+  public getActivities$(): Observable<Activity[]> {  // endpoint ska uppdateras
+    return this.httpClient.get<{ data: ActivityResponse[] }>(`${this._apiBaseUrl}/activities`).pipe(
+      filter(response => !!response?.data),
+      map(({ data }) => data.map(aktivitet => mapResponseToActivity(aktivitet)))
+    )
+  }
+
+  constructor(private httpClient: HttpClient) { }
+
+}

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

@@ -1,25 +1,25 @@
 export interface Activity {
-  activityId: number;
+  id: number;
-  activityName: string;
+  name: string;
   description?: string;
   subActivities: SubActivity[];
 }
 export interface SubActivity {
   id: number;
-  subActivityName: string;
+  name: string;
-  subActivityDescription: string;
+  description: string;
 }
 export interface ActivityResponse {
   id: number;
-  activityName: string;
+  name: string;
   description?: string;
   subActivities: SubActivity[];
 }
 export function mapResponseToActivity(data: ActivityResponse): Activity {
-  const { id, activityName, description, subActivities } = data;
+  const { id, name, description, subActivities } = data;
   return {
-    activityId: id,
+    id,
-    activityName,
+    name,
     description,
     subActivities,
   };

mock-api/mina-sidor-fa/scripts/generate-api.js

@@ -42,6 +42,7 @@ const generateOrsaksKoderFranvaro = orsaksKoderFranvaro.generate();
 const generateOrsaksKoderAvvikelse = orsaksKoderAvvikelse.generate();
 const generateKandaAvvikelseKoder = kandaAvvikelseKoder.generate();
 const generateFragorForAvvikelser = fragorForAvvikelser.generate();
+const generatedActivites = activities.generate();
 
 generatedAvrop.forEach(({ tjanstekod, tjansteNamn, utforandeVerksamhetId, utforandeverksamhet, kommunKod, kommun }) => {
   const tjanstExists = avropTjanster.find(tjanst => tjanst.id === tjanstekod);