(periodisk redovisning): created component for periodisk redovisning and routeed to it

Squashed commit of the following:

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/deltagare-routing.module.ts

@@ -26,6 +26,14 @@ const routes: Routes = [
         m => m.DeltagareGemensamPlaneringModule
       ),
   },
+  {
+    path: 'periodisk-redovisning/:deltagareId',
+    data: { title: 'Skapa periodisk redovisning' },
+    loadChildren: () =>
+      import('./pages/deltagare-report/pages/periodisk-redovisning/periodisk-redovisning.module').then(
+        m => m.PeriodiskRedovisningModule
+      ),
+  },
 ];
 
 @NgModule({

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

@@ -0,0 +1,13 @@
+<msfa-layout>
+    <msfa-report-layout 
+    reportTitle="Periodisk Redovisning" 
+    reportSubTitle="Skapa redovisning"
+    [totalAmountOfSteps]="2"
+    [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}})
+    </msfa-report-layout>
+</msfa-layout>

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PeriodiskRedovisningComponent } from './periodisk-redovisning.component';
+
+describe('PeriodiskRedovisningComponent', () => {
+  let component: PeriodiskRedovisningComponent;
+  let fixture: ComponentFixture<PeriodiskRedovisningComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PeriodiskRedovisningComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PeriodiskRedovisningComponent);
+    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/periodisk-redovisning.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'msfa-periodisk-redovisning',
+  templateUrl: './periodisk-redovisning.component.html',
+  styleUrls: ['./periodisk-redovisning.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PeriodiskRedovisningComponent implements OnInit {
+  currentStep = 1;
+  sendRequest = false;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+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';
+
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [PeriodiskRedovisningComponent],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([{ path: '', component: PeriodiskRedovisningComponent }]),
+    LayoutModule,
+    ReactiveFormsModule,
+    ReportLayoutModule
+  ],
+  exports: [PeriodiskRedovisningComponent]
+})
+export class PeriodiskRedovisningModule { }

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

@@ -1,8 +1,10 @@
 <section class="report-layout" *ngIf="contactInformation$ | async as contactInformation">
     <digi-typography>
+        <h1>{{ reportTitle }}</h1>
+        <p class="report-layout__description">{{description}}</p>
         <div class="report-layout__deltagare-info">
-            <h1>{{ reportTitle }}</h1>
+            <h2>{{reportSubTitle}}</h2>
-            <h3 class="report-layout__sub-heading-h3">{{contactInformation.fornamn + ' ' + contactInformation.efternamn}}</h3>
+            <div class="report-layout__name">{{contactInformation.fornamn + ' ' + contactInformation.efternamn}}</div>
             <div class="report-layout__personnummer">
                 <span>Personnummer:</span>
                 <msfa-hide-text

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

@@ -1,16 +1,20 @@
 @import 'variables/gutters';
 .report-layout {
-  font-weight: var(--digi--typography--font-weight--semibold);
+  &__description {
-  font-size: var(--digi--typography--font-size--s);
+  }
 
-  &__sub-heading-h3 {
+  &____name {
     margin-top: 0;
+    font-size: var(--digi--typography--font-size--s);
+    font-weight: var(--digi--typography--font-weight--semibold);
   }
 
   &__deltagare-info {
     display: flex;
     flex-direction: column;
     margin-bottom: $digi--layout--gutter--xl;
+    font-size: var(--digi--typography--font-size--s);
+    font-weight: var(--digi--typography--font-weight--semibold);
   }
 
   &__personnummer {

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

@@ -14,6 +14,8 @@ import { DeltagareAvvikelseService } from '../../pages/deltagare-report/services
 })
 export class ReportLayoutComponent {
   @Input() reportTitle = 'Report Title';
+  @Input() reportSubTitle = 'Report Sub Title';
+  @Input() description = 'Report description ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem';
   @Input() startDate: string;
   @Input() endDate: string;
   @Input() service: string;
@@ -45,6 +47,7 @@ export class ReportLayoutComponent {
       this.currentStep--;
       this.currentStepEvent.emit(this.currentStep);
     }
+    this.currentStep !== this.totalAmountOfSteps ? this.sendRequestEvent.emit(false): null;
   }
 
   sendRequest():void {