diff --git 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 index 11ae275..a6e6691 100644 --- 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(); + + + constructor() {} } diff --git 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 index 8ea5297..0297486 100644 --- 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">
-
-
-

Har ni lämnat individuella förslag på arbeten till arbetssökande under perioden?

- - - Svar på frågorna är obligatoriskt - - -

Har ni, under perioden, tillhandahållit språkstöd?

- - - Svar på frågorna är obligatoriskt - -
-
+

Har ni lämnat individuella förslag på arbeten till arbetssökande under perioden?

+ + + Ett val är obligatoriskt + + +

Har ni, under perioden, tillhandahållit språkstöd?

+ + + Ett val är obligatoriskt + - -
+
+
- Tillbaka diff --git 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 index 1d1fbed..5a18b3c 100644 --- 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; } -} + +} \ No newline at end of file diff --git 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 deleted file mode 100644 index d4c0cd2..0000000 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-report/services/periodisk-redovisning-form.service.ts +++ /dev/null @@ -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; - } -} diff --git 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 new file mode 100644 index 0000000..a3adbbd --- /dev/null +++ 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 { // 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) { } + +} diff --git a/apps/mina-sidor-fa/src/app/shared/models/activity.model.ts b/apps/mina-sidor-fa/src/app/shared/models/activity.model.ts index 9883365..f6e3e55 100644 --- 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, }; diff --git a/mock-api/mina-sidor-fa/scripts/generate-api.js b/mock-api/mina-sidor-fa/scripts/generate-api.js index cb856f2..f0ae8a2 100644 --- 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);