feature(Periodisk redovisning): Vy för periodisk redovisning (TV-797)

Squashed commit of the following:

commit bca16a8546667a476fa67d33839d5dbe7d9ee1f4
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Thu Oct 21 14:36:23 2021 +0200

    Update periodisk-redovisning-view.component.html

commit 4e9198e4841b6930eb14ff81af443500619eb363
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Thu Oct 21 12:56:38 2021 +0200

    handlingId

commit 196c26a52c58ee8808c890cb15277ae0668d725a
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Thu Oct 21 12:54:25 2021 +0200

    periodisk redovisning view

commit c62232079e7c5584fc9071b90514b6eea133755f
Merge: 84099116 8805c59a
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Oct 20 16:18:03 2021 +0200

    Merge branch 'develop' into feature/TV-797-periodisk-redovisning-view

    # Conflicts:
    #	apps/mina-sidor-fa/src/app/shared/models/api/periodisk-redovisning.response.model.ts
    #	apps/mina-sidor-fa/src/app/shared/models/periodisk-redovisning.model.ts

commit 84099116adf985ee6eb71b9b340eff7701505e9a
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Oct 20 15:56:40 2021 +0200

    wip

commit eee14a464fe2fe2a99074f0fe92eecfc92cd05fa
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Oct 20 14:09:48 2021 +0200

    styling

commit b95bac31ac2b33b5c383a32f06ababf3e5f00245
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Oct 20 13:35:03 2021 +0200

    Update periodisk-redovisning.validator.ts

commit aeda04cd6705e72b5621a3079904617322ce3036
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Oct 20 13:34:15 2021 +0200

    Deltagaren har inte deltagit i några aktiviteter denna period checkbox

commit f6ee1ff62d5001e8319bfff04ceb6950ebce9cff
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Oct 20 11:12:57 2021 +0200

    form validation and dialog done

commit 93e5345d13caf5ab25dc581d58efe92f85acb2dd
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Oct 20 09:16:03 2021 +0200

    hidden checkboxes

commit 68c2f17ec8417ce5a0404d5b0c00e4800b738143
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Oct 20 08:19:01 2021 +0200

    Update app.module.ts

commit 2a1dfa6559b9b86839de8ddd1d8cd7c821a56b3a
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Tue Oct 19 21:56:22 2021 +0200

    form array with checkboxes done

commit 32f26800656d13d1c6c30b20c8187b20fda3c71c
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Tue Oct 19 17:04:33 2021 +0200

    activity form array

commit db2974cfcca453390ebb4f637daf9d9064b527da
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Tue Oct 19 15:56:39 2021 +0200

    add radiobuttons

commit 2c4099b48337aaad1cb5b0cc4794ee94e6bb508c
Merge: 1ae24a90 25b12092
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Tue Oct 19 14:07:46 2021 +0200

    Merge branch 'develop' into feature/TV-771-periodisk-redovisning

commit 1ae24a905a6c915dcc7d5e3b0cf77a8b62b44d7c
Merge: 79e0cf39 794bbc9a
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Tue Oct 19 10:14:29 2021 +0200

    Merge branch 'feature/TV-771-periodisk-redovisning' of ssh://bitbucket.arbetsformedlingen.se:7999/tea/mina-sidor-fa-web into feature/TV-771-periodisk-redovisning

commit 79e0cf394055527ba09f0d1ae97ddc7c519f2236
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Tue Oct 19 10:14:18 2021 +0200

    Updated periods

commit 794bbc9a71a0e638196d961ed8b3093de5a64e49
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Tue Oct 19 09:30:24 2021 +0200

    Update package-lock.json

commit 56351afb1f92060b9f743233a69a785114a3ee96
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Mon Oct 18 17:03:19 2021 +0200

    Update periodisk-redovisning-form.component.ts

commit 213e6c888a8e388381cf4370d2f5020987b29c4f
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Mon Oct 18 17:01:17 2021 +0200

    Update extract-avrop-periods.ts

... and 8 more commits

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/deltagare-details.module.ts

@@ -64,14 +64,24 @@ const routes: Routes = [
 activeFeatures.forEach(feature => {
   switch (feature) {
     case Feature.REPORTING_PERIODISK_REDOVISNING:
-      routes.push({
+      routes.push(
-        path: 'periodisk-redovisning',
+        {
-        data: { title: 'Skapa Periodisk redovisning' },
+          path: 'periodisk-redovisning',
-        loadChildren: () =>
+          data: { title: 'Skapa Periodisk redovisning' },
-          import('./pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.module').then(
+          loadChildren: () =>
-            m => m.PeriodiskRedovisningFormModule
+            import('./pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.module').then(
-          ),
+              m => m.PeriodiskRedovisningFormModule
-      });
+            ),
+        },
+        {
+          path: 'periodisk-redovisning/:handlingId',
+          data: { title: 'Periodisk redovisning' },
+          loadChildren: () =>
+            import('./pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.module').then(
+              m => m.PeriodiskRedovisningViewModule
+            ),
+        }
+      );
       break;
     case Feature.REPORTING_SIGNAL:
       routes.push({

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

@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
 import { Avrop } from '@msfa-models/avrop.model';
-import { PeriodiskRedovisning } from '@msfa-models/periodisk-redovisning.model';
 import { DeltagareApiService } from '@msfa-services/api/deltagare.api.service';
 import { PeriodiskRedovisningApiService } from '@msfa-services/api/periodisk-redovisning.api.service';
 import { Observable } from 'rxjs';
@@ -13,14 +12,6 @@ export class PeriodiskRedovisningFormService {
     private deltagareApiService: DeltagareApiService
   ) {}
 
-  fetchPeriodiskRedovisning$(
-    periodStart: string,
-    periodEnd: string,
-    genomforandeReferens: number
-  ): Observable<PeriodiskRedovisning> {
-    return this.periodiskRedovisningApiService.fetchPeriodiskRedovisning$(periodStart, periodEnd, genomforandeReferens);
-  }
-
   fetchAvropInformation$(genomforandeReferens: number): Observable<Avrop> {
     return this.deltagareApiService.fetchAvropInformation$(genomforandeReferens);
   }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/avvikelse-report-view/avvikelse-report-view.component.ts

@@ -16,7 +16,7 @@ import { AvvikelseReportViewService } from './avvikelse-report-view.service';
 export class AvvikelseReportViewComponent {
   params$: Observable<Params> = this.activatedRoute.params.pipe(
     map(params => ({
-      reportId: params.reportId as string,
+      handlingId: params.handlingId as string,
       genomforandeReferens: params.genomforandeReferens as string,
     }))
   );

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/franvaro-report-view/franvaro-report-view.component.ts

@@ -16,7 +16,7 @@ import { FranvaroReportViewService } from './franvaro-report-view.service';
 export class FranvaroReportViewComponent {
   params$: Observable<Params> = this.activatedRoute.params.pipe(
     map(params => ({
-      reportId: params.reportId as string,
+      handlingId: params.handlingId as string,
       genomforandeReferens: params.genomforandeReferens as string,
     }))
   );

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/gemensam-planering-view/gemensam-planering-view.component.ts

@@ -16,7 +16,7 @@ import { GemensamPlaneringViewService } from './gemensam-planering-view.service'
 export class GemensamPlaneringViewComponent {
   params$: Observable<Params> = this.activatedRoute.params.pipe(
     map(params => ({
-      reportId: params.reportId as string,
+      handlingId: params.handlingId as string,
       genomforandeReferens: params.genomforandeReferens as string,
     }))
   );

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

@@ -0,0 +1,42 @@
+<msfa-layout>
+  <msfa-report-layout
+    *ngIf="avrop$ | async as avrop; else skeletonRef"
+    reportTitle="Periodisk redovisning"
+    [avrop]="avrop"
+  >
+    <div class="periodisk-redovisning-view" *ngIf="periodiskRedovisning$ | async as report; else loadingRef">
+      <dl>
+        <dt>Har ni under perioden tillhandahållit språkstöd till deltagaren?</dt>
+        <dd>{{report.hasOfferedLanguageSupport ? 'Ja' : 'Nej' }}</dd>
+
+        <dt>Har ni lämnat individuella förslag på lämpliga arbeten att söka till deltagaren?</dt>
+        <dd>{{report.hasOfferedJob ? 'Ja' : 'Nej' }}</dd>
+
+        <dt>Aktiviteter</dt>
+        <dd>
+          <ul class="periodisk-redovisning-view__activity-list">
+            <li class="periodisk-redovisning-view__activity-item" *ngFor="let activity of report.activities">
+              <digi-icon-check-circle
+                class="msfa__digi-icon periodisk-redovisning-view__activity-check"
+                aria-hidden="true"
+              ></digi-icon-check-circle>
+              {{activity.name}}: {{ activity.performedRemotely && activity.performedPhysically ? 'På distans och på
+              plats' : activity.performedRemotely ? 'På distans' : 'På plats'}}
+            </li>
+          </ul>
+        </dd>
+      </dl>
+      <footer class="periodisk-redovisning-view__footer">
+        <msfa-back-link route="../../">Tillbaka till deltagaren</msfa-back-link>
+      </footer>
+    </div>
+  </msfa-report-layout>
+</msfa-layout>
+
+<ng-template #skeletonRef>
+  <digi-ng-skeleton-base [afCount]="3" afText="Laddar Gemensam planering"></digi-ng-skeleton-base>
+</ng-template>
+
+<ng-template #loadingRef>
+  <msfa-loader type="padded"></msfa-loader>
+</ng-template>

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

@@ -0,0 +1,31 @@
+@import 'mixins/list';
+@import 'variables/gutters';
+
+.periodisk-redovisning-view {
+  max-width: var(--digi--typography--text--max-width);
+  display: flex;
+  flex-direction: column;
+  gap: $digi--layout--gutter--l;
+
+  &__activity-list {
+    @include msfa__reset-list;
+    margin-bottom: var(--digi--layout--gutter--s);
+  }
+
+  &__activity-item {
+    display: flex;
+    align-items: center;
+    gap: var(--digi--layout--gutter--s);
+    margin-top: var(--digi--layout--gutter--s);
+  }
+
+  &__activity-check {
+    color: var(--digi--ui--color--border--success);
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--digi--layout--gutter);
+  }
+}

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

@@ -0,0 +1,31 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { LayoutComponent } from '@msfa-shared/components/layout/layout.component';
+import { PeriodiskRedovisningViewComponent } from './periodisk-redovisning-view.component';
+import { PeriodiskRedovisningViewService } from './periodisk-redovisning-view.service';
+
+describe('GemensamPlaneringViewComponent', () => {
+  let component: PeriodiskRedovisningViewComponent;
+  let fixture: ComponentFixture<PeriodiskRedovisningViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [PeriodiskRedovisningViewComponent, LayoutComponent],
+      imports: [RouterTestingModule, HttpClientTestingModule],
+      providers: [PeriodiskRedovisningViewService],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PeriodiskRedovisningViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,41 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Params } from '@msfa-models/api/params.model';
+import { Avrop } from '@msfa-models/avrop.model';
+import { Observable } from 'rxjs';
+import { map, shareReplay, switchMap } from 'rxjs/operators';
+import { PeriodiskRedovisningViewService } from './periodisk-redovisning-view.service';
+import { PeriodiskRedovisning } from '@msfa-models/periodisk-redovisning.model';
+
+@Component({
+  selector: 'msfa-periodisk-redovisning-view',
+  templateUrl: './periodisk-redovisning-view.component.html',
+  styleUrls: ['./periodisk-redovisning-view.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PeriodiskRedovisningViewComponent {
+  params$: Observable<Params> = this.activatedRoute.params.pipe(
+    map(params => ({
+      handlingId: params.handlingId as string,
+      genomforandeReferens: params.genomforandeReferens as string,
+    }))
+  );
+  avrop$: Observable<Avrop> = this.params$.pipe(
+    switchMap(({ genomforandeReferens }) =>
+      this.periodiskRedovisningViewService.fetchAvropInformation$(+genomforandeReferens)
+    ),
+    shareReplay(1)
+  );
+
+  periodiskRedovisning$: Observable<PeriodiskRedovisning> = this.params$.pipe(
+    switchMap(({ handlingId }) =>
+      this.periodiskRedovisningViewService.fetchPeriodiskRedovisning$(handlingId as string)
+    ),
+    shareReplay(1)
+  );
+
+  constructor(
+    private periodiskRedovisningViewService: PeriodiskRedovisningViewService,
+    private activatedRoute: ActivatedRoute
+  ) {}
+}

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

@@ -0,0 +1,29 @@
+import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
+import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
+import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
+import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
+import { PeriodiskRedovisningViewComponent } from './periodisk-redovisning-view.component';
+import { PeriodiskRedovisningViewService } from './periodisk-redovisning-view.service';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [PeriodiskRedovisningViewComponent],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([{ path: '', component: PeriodiskRedovisningViewComponent }]),
+    LayoutModule,
+    ReportLayoutModule,
+    BackLinkModule,
+    LoaderModule,
+    HideTextModule,
+    DigiNgSkeletonBaseModule,
+  ],
+  providers: [PeriodiskRedovisningViewService],
+  exports: [PeriodiskRedovisningViewComponent],
+})
+export class PeriodiskRedovisningViewModule {}

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

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { Avrop } from '@msfa-models/avrop.model';
+import { Observable } from 'rxjs';
+import { PeriodiskRedovisning } from '@msfa-models/periodisk-redovisning.model';
+import { PeriodiskRedovisningApiService } from '@msfa-services/api/periodisk-redovisning.api.service';
+import { DeltagareApiService } from '@msfa-services/api/deltagare.api.service';
+
+@Injectable()
+export class PeriodiskRedovisningViewService {
+  constructor(
+    private periodiskRedovisningApiService: PeriodiskRedovisningApiService,
+    private deltagareApiService: DeltagareApiService
+  ) {}
+
+  public fetchAvropInformation$(genomforandeReferens: number): Observable<Avrop> {
+    return this.deltagareApiService.fetchAvropInformation$(genomforandeReferens);
+  }
+
+  public fetchPeriodiskRedovisning$(handlingId: string): Observable<PeriodiskRedovisning> {
+    return this.periodiskRedovisningApiService.fetchPeriodiskRedovisning$(handlingId);
+  }
+}

apps/mina-sidor-fa/src/app/shared/models/api/periodisk-redovisning.response.model.ts

@@ -1,7 +1,8 @@
 export interface PeriodiskRedovisningActivityResponse {
-  activityId: number;
+  id: number;
-  activityName: string;
+  name: string;
   performedRemotely: boolean;
+  performedPhysically: boolean;
 }
 
 export interface PeriodiskRedovisningResponse {
@@ -20,19 +21,22 @@ export function mockOnePeriodiskRedovisningResponse(): PeriodiskRedovisningRespo
     period: '2021-10',
     activities: [
       {
-        activityId: 24,
+        id: 24,
-        activityName: 'Aktivitet 1',
+        name: 'Aktivitet 1',
         performedRemotely: false,
+        performedPhysically: true,
       },
       {
-        activityId: 19,
+        id: 19,
-        activityName: 'Aktivitet 5',
+        name: 'Aktivitet 2',
         performedRemotely: true,
+        performedPhysically: false,
       },
       {
-        activityId: 31,
+        id: 31,
-        activityName: 'Aktivitet 5',
+        name: 'Aktivitet 3',
         performedRemotely: true,
+        performedPhysically: true,
       },
     ],
   };

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

@@ -1,9 +1,10 @@
 import { PeriodiskRedovisningResponse } from './api/periodisk-redovisning.response.model';
 
 export interface PeriodiskRedovisningActivity {
-  activityId: number;
+  id: number;
-  activityName: string;
+  name: string;
   performedRemotely: boolean;
+  performedPhysically: boolean;
 }
 
 export interface PeriodiskRedovisning {

apps/mina-sidor-fa/src/app/shared/services/api/periodisk-redovisning.api.service.ts

@@ -2,7 +2,6 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { ErrorType } from '@msfa-enums/error-type.enum';
 import { environment } from '@msfa-environment';
-import { Params } from '@msfa-models/api/params.model';
 import { PeriodiskRedovisningRequest } from '@msfa-models/api/periodisk-redovisning.request.model';
 import {
   mockOnePeriodiskRedovisningResponse,
@@ -11,7 +10,7 @@ import {
 import { CustomError } from '@msfa-models/error/custom-error';
 import { mapResponseToPeriodiskRedovisning, PeriodiskRedovisning } from '@msfa-models/periodisk-redovisning.model';
 import { Observable, of } from 'rxjs';
-import { catchError, map } from 'rxjs/operators';
+import { catchError, delay, map } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
@@ -21,17 +20,8 @@ export class PeriodiskRedovisningApiService {
 
   constructor(private httpClient: HttpClient) {}
 
-  public fetchPeriodiskRedovisning$(
+  public fetchPeriodiskRedovisning$(handlingId: string): Observable<PeriodiskRedovisning> {
-    periodStart: string,
+    return of(mapResponseToPeriodiskRedovisning(mockOnePeriodiskRedovisningResponse())).pipe(delay(59));
-    periodEnd: string,
-    genomforandeReferens: number
-  ): Observable<PeriodiskRedovisning> {
-    const params: Params = {
-      genomforandeReferens: genomforandeReferens.toString(),
-      periodStart,
-      periodEnd,
-    };
-    return of(mapResponseToPeriodiskRedovisning(mockOnePeriodiskRedovisningResponse()));
     // return this.httpClient
     //   .get<{ data: PeriodiskRedovisningResponse }>(`${this._apiBaseUrl}`, { params })
     //   .pipe(map(({ data }) => (data ? mapResponseToPeriodiskRedovisning(data) : null)));