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
2021-09-27 17:25:25 +02:00
parent ca32a1ed08
commit 41a3cc61bd
7 changed files with 180 additions and 75 deletions
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-report/pages/periodisk-redovisning/components/periodisk-redovisning-form/periodisk-redovisning-form.component.ts
+++ b/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() {}
 }
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-report/pages/periodisk-redovisning/periodisk-redovisning.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-report/pages/periodisk-redovisning/periodisk-redovisning.component.html
@@ -4,46 +4,44 @@
    reportSubTitle="Skapa redovisning"
    [totalAmountOfSteps]="totalAmountOfSteps"
    [currentStep]="currentStep"
-    [isPeriodDate]="true"
+    [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}]"
-                        [formControlName]="lamnatJobbForslagFormControlName"
-                        [afRadiobuttonGroupDirection]="radiobuttonGroupDirection.HORIZONTAL"
-                        ></digi-ng-form-radiobutton-group>
-                        <digi-form-validation-message
-                        af-variation="error"
-                        *ngIf="lamnatJobbForslagFormControl.invalid && lamnatJobbForslagFormControl.touched">
-                            Svar på frågorna är obligatoriskt
-                        </digi-form-validation-message>
-
-                        <p class="periodisk-redovisning__space-top">Har ni, under perioden, tillhandahållit språkstöd?</p>
-                        <digi-ng-form-radiobutton-group
-                        [afRadiobuttons]="[{label:'Ja', value: true}, {label:'Nej', value: false}]"
-                        [formControlName]="providedSprakStodFormControlName"
-                        [afRadiobuttonGroupDirection]="radiobuttonGroupDirection.HORIZONTAL"
-                        ></digi-ng-form-radiobutton-group>
-                        <digi-form-validation-message
-                        af-variation="error"
-                        *ngIf="providedSprakStodFormControl.invalid && providedSprakStodFormControl.touched">
-                            Svar på frågorna är obligatoriskt
-                        </digi-form-validation-message>
-                    </div>
-                </div>
+                <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}]"
+                [formControlName]="lamnatJobbForslagFormControlName"
+                [afRadiobuttonGroupDirection]="radiobuttonGroupDirection.HORIZONTAL"
+                ></digi-ng-form-radiobutton-group>
+                <digi-form-validation-message 
+                af-variation="error"
+                *ngIf="submitted && lamnatJobbForslagFormControl.invalid">
+                    Ett val är obligatoriskt
+                </digi-form-validation-message>
+                
+                <p class="periodisk-redovisning__space-top">Har ni, under perioden, tillhandahållit språkstöd?</p>
+                <digi-ng-form-radiobutton-group
+                [afRadiobuttons]="[{label:'Ja', value: true}, {label:'Nej', value: false}]"
+                [formControlName]="providedSprakStodFormControlName"
+                [afRadiobuttonGroupDirection]="radiobuttonGroupDirection.HORIZONTAL"
+                ></digi-ng-form-radiobutton-group>
+                <digi-form-validation-message 
+                af-variation="error"
+                *ngIf="submitted && providedSprakStodFormControl.invalid">
+                Ett val är obligatoriskt
+                </digi-form-validation-message>
            </ng-container>
-
-            <div class="periodisk-redovisning__step-buttons-wrapper">
+                <div class="periodisk-redovisning__step-buttons-wrapper">
+                <br /> 
                <ng-container *ngIf="currentStep > 1">
-                    <digi-button class="periodisk-redovisning__step-buttons-wrapper--space-right"
+                    <digi-button class="periodisk-redovisning__step-buttons-wrapper--space-right" 
                            af-variation="secondary" af-size="m" (afOnClick)="previousStep()">
                        Tillbaka
                    </digi-button>
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-report/pages/periodisk-redovisning/periodisk-redovisning.component.ts
+++ b/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 { RequiredValidator } from '@msfa-validators/required.validator';
+import { AbstractControl, FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
+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;
+  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,30 +43,114 @@ 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()]),
-      providedSprakStod: new FormControl(null, [RequiredValidator()]),
+      lamnatJobbForslag: new FormControl(null, [Validators.required]),
+      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)
+            ])
+          )
+        )
+      );
    });
  }

-  nextStep(): void {
-    if (this.periodiskRedovisningFormGroup?.valid && this.currentStep < this.totalAmountOfSteps) {
-      console.log('this.prFormGroup', this.periodiskRedovisningFormGroup);
-      this.currentStep++;
+  getActivtiesFormField(formCtrlName: string, activity: Activity):(FormArray | FormControl) {
+    if (formCtrlName === 'datesForActivities') {
+      return new FormArray([]);
+    } else if (formCtrlName === 'subActivities') {
+      return this.addSubActivitesFormArray(activity?.subActivities, activity.id);
    }
-    console.log('this.prFormGroup', this.lamnatJobbForslagFormControl.value);
-    this.periodiskRedovisningFormGroup?.markAllAsTouched();
+    return new FormControl(null, []);
  }

-  previousStep(): void {
-    if (this.currentStep > 1) {
+  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 {
+    this.submitted = true;
+    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++;
+    }
+  }
+
+  previousStep():void {
+    this.moveToNextStep = false;
+    if(this.currentStep > 1) {
      this.currentStep--;
    }
  }

-  sendRequest(val: boolean): boolean {
+  sendRequest(val: boolean):boolean {
    return val;
  }
-}
+
+}
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-report/services/periodisk-redovisning-form.service.ts
+++ b/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;
-  }
-}
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-report/services/periodisk-redovisning.service.ts
+++ b/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) { }
+
+}
--- a/apps/mina-sidor-fa/src/app/shared/models/activity.model.ts
+++ b/apps/mina-sidor-fa/src/app/shared/models/activity.model.ts
@@ -1,25 +1,25 @@
 export interface Activity {
-  activityId: number;
-  activityName: string;
+  id: number;
+  name: string;
  description?: string;
  subActivities: SubActivity[];
 }
 export interface SubActivity {
  id: number;
-  subActivityName: string;
-  subActivityDescription: string;
+  name: 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,
-    activityName,
+    id,
+    name,
    description,
    subActivities,
  };
--- a/mock-api/mina-sidor-fa/scripts/generate-api.js
+++ b/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);