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
This commit is contained in:
Daniel Appelgren
2021-10-22 08:34:17 +02:00
parent 6d5a449323
commit cfde226f3d
14 changed files with 235 additions and 43 deletions

View File

@@ -64,14 +64,24 @@ const routes: Routes = [
activeFeatures.forEach(feature => {
switch (feature) {
case Feature.REPORTING_PERIODISK_REDOVISNING:
routes.push({
path: 'periodisk-redovisning',
data: { title: 'Skapa Periodisk redovisning' },
loadChildren: () =>
import('./pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.module').then(
m => m.PeriodiskRedovisningFormModule
),
});
routes.push(
{
path: 'periodisk-redovisning',
data: { title: 'Skapa Periodisk redovisning' },
loadChildren: () =>
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({

View File

@@ -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);
}

View File

@@ -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,
}))
);

View File

@@ -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,
}))
);

View File

@@ -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,
}))
);

View File

@@ -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>

View File

@@ -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);
}
}

View File

@@ -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();
});
});

View File

@@ -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
) {}
}

View File

@@ -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 {}

View File

@@ -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);
}
}

View File

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

View File

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

View File

@@ -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$(
periodStart: string,
periodEnd: string,
genomforandeReferens: number
): Observable<PeriodiskRedovisning> {
const params: Params = {
genomforandeReferens: genomforandeReferens.toString(),
periodStart,
periodEnd,
};
return of(mapResponseToPeriodiskRedovisning(mockOnePeriodiskRedovisningResponse()));
public fetchPeriodiskRedovisning$(handlingId: string): Observable<PeriodiskRedovisning> {
return of(mapResponseToPeriodiskRedovisning(mockOnePeriodiskRedovisningResponse())).pipe(delay(59));
// return this.httpClient
// .get<{ data: PeriodiskRedovisningResponse }>(`${this._apiBaseUrl}`, { params })
// .pipe(map(({ data }) => (data ? mapResponseToPeriodiskRedovisning(data) : null)));