(periodiska redovisningen): added basic form functionality

Squashed commit of the following:

commit ed8404251283d896f8612cf43f3a2e3dc59015e1
Merge: 032e450 14739fb
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

commit 032e450166458e9b64070ab4fbe9b2c948c5f8ea
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 23 14:53:49 2021 +0200

    removed an unused method

commit 836bbe566c778149df2967dae1d5cc414f7bbdc9
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 23 11:47:36 2021 +0200

    fixed minor mismatches in report-layout component

commit 81b9813b3ae7856da3d22276efeb1f45f468142f
Merge: 9a3cd92 0302b1a
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Sep 23 11:30:09 2021 +0200

    merged with develop and fixed conflicts

commit 9a3cd92009bf63c12a0b0aca0aa7ddf2e5d0b74d
Merge: d000840 caf235a
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Wed Sep 22 17:47:02 2021 +0200

    merged in develop and fixed some conflicts

commit d0008408c6a680a82efc8e7e539048d9728a9a20
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Wed Sep 22 16:46:47 2021 +0200

    moved functionality from report-layout-komponent to make esier for the developer

commit 19fb49a81d1033e6b9224a253a8aa8dc2332e781
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Wed Sep 22 15:43:28 2021 +0200

    creatde basic for for periodisk redovising

commit 5fab5c82204099d6b203df7744dd3a20b0d37c67
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Wed Sep 22 15:42:34 2021 +0200

    added basic git add .

commit 4b73819a0250e6791bd7ad198d0904c72565c5bf
Merge: d3778d6 5846c2c
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Tue Sep 21 17:11:57 2021 +0200

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

commit d3778d6887a3d3d01523d764cb7f4664754cfa5b
Merge: 0317b36 ee17697
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Tue Sep 21 16:57:26 2021 +0200

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

commit 0317b36ffc2ed6b57dcdee66aebc3eca37faf3b8
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Tue Sep 21 16:55:02 2021 +0200

    created component for periodisk redovisning, and updated report-layout component with some functionalities

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

@@ -0,0 +1 @@
+Unused form coponent

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

@@ -0,0 +1,7 @@
+@import 'variables/gutters';
+.pr-form {
+  padding: $digi--layout--gutter--xl 0;
+  &__space-top {
+    margin-top: $digi--layout--gutter--xl;
+  }
+}

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PeriodiskRedovisningFormComponent } from './periodisk-redovisning-form.component';
+
+describe('PeriodiskRedovisningFormComponent', () => {
+  let component: PeriodiskRedovisningFormComponent;
+  let fixture: ComponentFixture<PeriodiskRedovisningFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PeriodiskRedovisningFormComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PeriodiskRedovisningFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,18 @@
+import { Component, ChangeDetectionStrategy, Input, EventEmitter, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'msfa-periodisk-redovisning-form',
+  templateUrl: './periodisk-redovisning-form.component.html',
+  styleUrls: ['./periodisk-redovisning-form.component.scss'],
+  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/components/periodisk-redovisning-form/periodisk-redovisning-form.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { PeriodiskRedovisningFormComponent } from './periodisk-redovisning-form.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [PeriodiskRedovisningFormComponent],
+  imports: [
+    CommonModule,
+  ],
+  exports: [PeriodiskRedovisningFormComponent]
+})
+export class PeriodiskRedovisningFormModule { }

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

@@ -2,12 +2,71 @@
     <msfa-report-layout 
     reportTitle="Periodisk Redovisning" 
     reportSubTitle="Skapa redovisning"
-    [totalAmountOfSteps]="2"
+    [totalAmountOfSteps]="totalAmountOfSteps"
+    [currentStep]="currentStep"
     [isPeriodDate]="true" 
     [startDate]="'2021-09-01'"
     [endDate]="'2021-09-30'"
     (currentStepEvent)="currentStep = $event"
     (sendRequestEvent)="sendRequest = $event">
-        MAIN content here and work with steps ({{currentStep + ' or ' + sendRequest}})
+        <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>
+            </ng-container>
+
+            <div class="periodisk-redovisning__step-buttons-wrapper">
+                <ng-container *ngIf="currentStep > 1">
+                    <digi-button class="periodisk-redovisning__step-buttons-wrapper--space-right" 
+                            af-variation="secondary" af-size="m" (afOnClick)="previousStep()">
+                        Tillbaka
+                    </digi-button>
+                </ng-container>
+                <ng-container *ngIf="currentStep < (totalAmountOfSteps -1)">
+                    <digi-button class="periodisk-redovisning__step-buttons-wrapper"
+                            af-size="m" (afOnClick)="nextStep()">
+                        Nästa
+                    </digi-button>
+                </ng-container>
+                <ng-container *ngIf="currentStep === (totalAmountOfSteps -1)">
+                    <digi-button af-size="m" (afOnClick)="nextStep()">
+                        Förhandsgranska
+                    </digi-button>
+                </ng-container>
+                <ng-container *ngIf="currentStep === totalAmountOfSteps">
+                    <digi-button af-size="m" (afOnClick)="sendRequest(true)">
+                        Skicka in
+                    </digi-button>
+                </ng-container>
+            </div>
+        </form>
     </msfa-report-layout>
 </msfa-layout>

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

@@ -0,0 +1,14 @@
+@import 'variables/gutters';
+.periodisk-redovisning {
+  &__step-buttons-wrapper--space-right {
+    margin-right: var(--digi--layout--gutter--s);
+  }
+
+  &__space-top {
+    margin-top: $digi--layout--gutter--xl;
+  }
+
+  &__step-buttons-wrapper {
+    padding-top: $digi--layout--gutter--xxl;
+  }
+}

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

@@ -1,4 +1,6 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { RadiobuttonGroupDirection } from '@af/digi-ng/_form/form-radiobutton-group';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'msfa-periodisk-redovisning',
@@ -6,7 +8,55 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
   styleUrls: ['./periodisk-redovisning.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class PeriodiskRedovisningComponent {
+export class PeriodiskRedovisningComponent implements OnInit {
+  
+  radiobuttonGroupDirection = RadiobuttonGroupDirection;
+  totalAmountOfSteps =3;
   currentStep = 1;
-  sendRequest = false;
+
+  // Form-related variables
+  periodiskRedovisningFormGroup: FormGroup;
+
+  readonly lamnatJobbForslagFormControlName = 'lamnatJobbForslag';
+  readonly providedSprakStodFormControlName = 'providedSprakStod';
+
+  constructor() { }
+  
+  ngOnInit(): void {
+    this.initializePeriodiskRedovisningFormGroup();
+  }
+
+  get lamnatJobbForslagFormControl(): AbstractControl {
+    return this.periodiskRedovisningFormGroup.get(this.lamnatJobbForslagFormControlName);
+  }
+  get providedSprakStodFormControl(): AbstractControl {
+    return this.periodiskRedovisningFormGroup.get(this.providedSprakStodFormControlName);
+  }
+
+  initializePeriodiskRedovisningFormGroup():void {
+    this.periodiskRedovisningFormGroup = new FormGroup({
+      lamnatJobbForslag: new FormControl(null, [Validators.required]),
+      providedSprakStod: new FormControl(null, [Validators.required]),
+    });
+  }
+  
+  nextStep():void {
+    if(this.periodiskRedovisningFormGroup?.valid && this.currentStep < this.totalAmountOfSteps) {
+      console.log('this.prFormGroup', this.periodiskRedovisningFormGroup);
+      this.currentStep++;
+    }
+    console.log('this.prFormGroup', this.lamnatJobbForslagFormControl.value);
+    this.periodiskRedovisningFormGroup?.markAllAsTouched();
+  }
+
+  previousStep():void {
+    if(this.currentStep > 1) {
+      this.currentStep--;
+    }
+  }
+
+  sendRequest(val: boolean):boolean {
+    return val;
+  }
+
 }

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

@@ -5,6 +5,8 @@ import { RouterModule } from '@angular/router';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { ReportLayoutModule } from '../../../../shared/report-layout/report-layout.module';
 import { PeriodiskRedovisningComponent } from './periodisk-redovisning.component';
+import { PeriodiskRedovisningFormModule } from './components/periodisk-redovisning-form/periodisk-redovisning-form.module';
+import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -15,6 +17,8 @@ import { PeriodiskRedovisningComponent } from './periodisk-redovisning.component
     LayoutModule,
     ReactiveFormsModule,
     ReportLayoutModule,
+    PeriodiskRedovisningFormModule,
+    DigiNgFormRadiobuttonGroupModule,
   ],
   exports: [PeriodiskRedovisningComponent],
 })

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

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { Deltagare } from '@msfa-models/deltagare.model';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PeriodiskRedovisningFormService {
+  private periodiskRedovisningFormGroup: FormGroup;
+  _deltagare$ = new BehaviorSubject<Deltagare>(null);
+
+  constructor() { }
+
+  setPeriodiskRedovisningForm(form: FormGroup):void {
+    this.periodiskRedovisningFormGroup = form;
+  }
+
+  get periodiskRedovisningForm():FormGroup {
+    return this.periodiskRedovisningFormGroup
+  }
+
+}

apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.html

@@ -28,7 +28,7 @@
         af-heading="Allt gick bra"
         af-heading-level="h3"
       >
-        <p>Din {{reportName}} är nu inskickad till Arbetsförmedlingen.</p>
+        <p>Din {{reportTitle.toLocaleLowerCase()}} är nu inskickad till Arbetsförmedlingen.</p>
       </digi-notification-alert>
 
       <digi-notification-alert
@@ -37,7 +37,7 @@
         af-heading="Någonting gick fel"
         af-heading-level="h3"
       >
-        <p>Vi kunde inte skicka in din {{reportName}}.</p>
+        <p>Vi kunde inte skicka in din {{reportTitle.toLocaleLowerCase()}}.</p>
       </digi-notification-alert>
     </div>
 
@@ -49,34 +49,5 @@
     <div class="report-layout__main-content">
       <ng-content></ng-content>
     </div>
-
-    <!-- <div class="report-layout__step-buttons-wrapper">
-      <ng-container *ngIf="!showSuccessNotification">
-        <ng-container *ngIf="currentStep > 1">
-          <digi-button
-            class="report-layout__step-buttons-wrapper--space-right"
-            af-variation="secondary"
-            af-size="m"
-            (afOnClick)="previousStep()"
-          >
-            Tillbaka
-          </digi-button>
-        </ng-container>
-        <ng-container *ngIf="currentStep < (totalAmountOfSteps -1)">
-          <digi-button class="report-layout__step-buttons-wrapper" af-size="m" (afOnClick)="nextStep()">
-            Nästa
-          </digi-button>
-        </ng-container>
-      </ng-container>
-      <ng-container *ngIf="currentStep === (totalAmountOfSteps -1)">
-        <digi-button af-size="m" (afOnClick)="nextStep()"> Förhandsgranska </digi-button>
-      </ng-container>
-      <ng-container *ngIf="currentStep === totalAmountOfSteps">
-        <digi-button af-size="m" (afOnClick)="sendRequest()"> Skicka in </digi-button>
-      </ng-container>
-      <ng-container *ngIf="showSuccessNotification">
-        <digi-button af-size="m" (afOnClick)="backToDeltagare()"> Tillbaka till deltagaren </digi-button>
-      </ng-container>
-    </div> -->
   </digi-typography>
 </section>

apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.scss

@@ -1,8 +1,7 @@
 @import 'variables/gutters';
 .report-layout {
-  &____name {
+  &__name {
     margin-top: 0;
-    font-size: var(--digi--typography--font-size--s);
     font-weight: var(--digi--typography--font-weight--semibold);
   }
 
@@ -10,7 +9,7 @@
     display: flex;
     flex-direction: column;
     margin-bottom: $digi--layout--gutter--xl;
-    font-size: var(--digi--typography--font-size--s);
+    font-size: var(--digi--typography--font-size--m);
     font-weight: var(--digi--typography--font-weight--semibold);
   }
 
@@ -29,8 +28,4 @@
   &__main-content {
     margin: $digi--layout--gutter--xl 0;
   }
-
-  &__step-buttons-wrapper--space-right {
-    margin-right: var(--digi--layout--gutter--s);
-  }
 }

apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.ts

@@ -1,6 +1,5 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import { ContactInformationCompact } from '@msfa-models/api/contact-information.response.model';
 import { Observable } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
@@ -23,12 +22,8 @@ export class ReportLayoutComponent {
   @Input() isPeriodDate = false;
   @Input() totalAmountOfSteps = 3;
   @Input() currentStep = 1;
-  @Input() form: FormGroup | null = null;
-  @Input() reportName: string;
   @Input() showSuccessNotification = false;
   @Input() showDangerNotification = false;
-  @Output() currentStepEvent = new EventEmitter<number>();
-  @Output() sendRequestEvent = new EventEmitter<boolean>();
 
   contactInformation$: Observable<ContactInformationCompact> = this.activatedRoute.params
     .pipe(
@@ -37,36 +32,7 @@ export class ReportLayoutComponent {
 
   constructor(
     private deltagareAvvikelseService: DeltagareAvvikelseService,
-    private activatedRoute: ActivatedRoute,
-    private router: Router
+    private activatedRoute: ActivatedRoute
   ) { }
 
-  nextStep(): void {
-    console.log(this.form);
-
-    if (this.form.valid && this.currentStep < this.totalAmountOfSteps) {
-      this.currentStep++;
-      this.currentStepEvent.emit(this.currentStep);
-    }
-    this.form.markAllAsTouched();
-  }
-
-  previousStep(): void {
-    if (this.currentStep > 1) {
-      this.currentStep--;
-      this.currentStepEvent.emit(this.currentStep);
-      this.showSuccessNotification = false;
-      this.showDangerNotification = false;
-    }
-    this.currentStep !== this.totalAmountOfSteps ? this.sendRequestEvent.emit(false) : null;
-  }
-
-  sendRequest(): void {
-    this.sendRequestEvent.emit(true);
-  }
-
-  backToDeltagare(): void {
-    void this.router.navigate(['./deltagare', this.activatedRoute.snapshot.params['deltagareId']]);
-  }
-
 }