signal view

This commit is contained in:
Daniel Appelgren
2021-11-18 08:32:27 +01:00
parent 83cc112600
commit 238ee16bab
10 changed files with 197 additions and 5 deletions

View File

@@ -84,11 +84,20 @@ activeFeatures.forEach(feature => {
);
break;
case Feature.REPORTING_SIGNAL:
routes.push({
routes.push(
{
path: 'signal',
data: { title: 'Skapa signal om arbete eller studier' },
loadChildren: () => import('./pages/report-forms/signal-form/signal-form.module').then(m => m.SignalFormModule),
});
loadChildren: () =>
import('./pages/report-forms/signal-form/signal-form.module').then(m => m.SignalFormModule),
},
{
path: 'signal/:handlingId',
data: { title: 'Signal om arbete eller studier' },
loadChildren: () =>
import('./pages/report-views/signal-view/signal-view.module').then(m => m.SignalViewModule),
}
);
break;
case Feature.REPORTING_INFORMATIV_RAPPORT:
routes.push(

View File

@@ -62,6 +62,8 @@ export class ReportsListComponent {
return `./periodisk-redovisning/${report.id}`;
case ReportType.Slutredovisning:
return `./slutredovisning/${report.id}`;
case ReportType.Signal:
return `./signal/${report.id}`;
case ReportType.InformativRapport:
case ReportType.InformativRedovisning:
return `./informativ-rapport/${report.id}`;

View File

@@ -0,0 +1,32 @@
<msfa-layout>
<msfa-report-layout
*ngIf="avrop$ | async as avrop; else skeletonRef"
reportTitle="Informativ rapport"
[avrop]="avrop"
>
<div class="signal-view" *ngIf="signal$ | async as signal; else loadingRef">
<dt>Typ av sysselsättning</dt>
<dd>{{typeToText(signal.type)}}</dd>
<dt>Omfattning</dt>
<dd>{{omfattningToText(signal.omfattning)}}</dd>
<ng-container *ngIf="signal.omfattning === 'deltid'">
<dt>Antal procent vid deltid</dt>
<dd>{{signal.percent}}%</dd>
</ng-container>
<dt>Startdatum</dt>
<dd><digi-typography-time [afDateTime]="signal.startDate"></digi-typography-time></dd>
<footer class="signal-view__footer">
<msfa-back-link route="../../">Tillbaka till deltagaren</msfa-back-link>
</footer>
</div>
</msfa-report-layout>
</msfa-layout>
<ng-template #skeletonRef>
<ui-skeleton [uiCount]="3" uiText="Laddar Informativ rapport"></ui-skeleton>
</ng-template>
<ng-template #loadingRef>
<ui-loader uiType="padded"></ui-loader>
</ng-template>

View File

@@ -0,0 +1,15 @@
@import 'mixins/list';
@import 'variables/gutters';
.signal-view {
max-width: var(--digi--typography--text--max-width);
display: flex;
flex-direction: column;
gap: $digi--layout--gutter--l;
&__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 { SignalViewComponent } from './signal-view.component';
import { SignalViewService } from './signal-view.service';
describe('InformativRapportViewComponent', () => {
let component: SignalViewComponent;
let fixture: ComponentFixture<SignalViewComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [SignalViewComponent, LayoutComponent],
imports: [RouterTestingModule, HttpClientTestingModule],
providers: [SignalViewService],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(SignalViewComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@@ -0,0 +1,51 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Params } from '@msfa-models/api/params.model';
import { DeltagareAvrop } from '@msfa-models/avrop.model';
import { Signal } from '@msfa-models/signal.model';
import { Observable } from 'rxjs';
import { map, shareReplay, switchMap } from 'rxjs/operators';
import { SignalViewService } from './signal-view.service';
@Component({
selector: 'msfa-signal-view',
templateUrl: './signal-view.component.html',
styleUrls: ['./signal-view.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SignalViewComponent {
params$: Observable<Params> = this.activatedRoute.params.pipe(
map(params => ({
handlingId: params.handlingId as string,
genomforandeReferens: params.genomforandeReferens as string,
}))
);
avrop$: Observable<DeltagareAvrop> = this.params$.pipe(
switchMap(({ genomforandeReferens }) => this.signalViewService.fetchAvropInformation$(+genomforandeReferens)),
shareReplay(1)
);
signal$: Observable<Signal> = this.params$.pipe(
switchMap(({ handlingId }) => this.signalViewService.fetchSignal$(handlingId as string)),
shareReplay(1)
);
typeToText(type: string) {
if (type === 'arbete') {
return 'Arbete';
}
if (type === 'utbildning') {
return 'Utbildning';
}
return 'Okänd';
}
omfattningToText(omfattning: string) {
if (omfattning === 'heltid') {
return 'Heltid';
}
if (omfattning === 'deltid') {
return 'Deltid';
}
return 'Okänd';
}
constructor(private signalViewService: SignalViewService, private activatedRoute: ActivatedRoute) {}
}

View File

@@ -0,0 +1,27 @@
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 { LayoutModule } from '@msfa-shared/components/layout/layout.module';
import { UiLoaderModule } from '@ui/loader/loader.module';
import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
import { SignalViewComponent } from './signal-view.component';
import { SignalViewService } from './signal-view.service';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [SignalViewComponent],
imports: [
CommonModule,
RouterModule.forChild([{ path: '', component: SignalViewComponent }]),
LayoutModule,
ReportLayoutModule,
BackLinkModule,
UiLoaderModule,
UiSkeletonModule,
],
providers: [SignalViewService],
exports: [SignalViewComponent],
})
export class SignalViewModule {}

View File

@@ -0,0 +1,20 @@
import { Injectable } from '@angular/core';
import { DeltagareAvrop } from '@msfa-models/avrop.model';
import { DeltagareApiService } from '@msfa-services/api/deltagare.api.service';
import { HandlingarApiService } from '@msfa-services/api/handlingar.api.service';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { mapResponseToSignal, Signal } from '@msfa-models/signal.model';
@Injectable()
export class SignalViewService {
constructor(private handlingarApiService: HandlingarApiService, private deltagareApiService: DeltagareApiService) {}
public fetchAvropInformation$(genomforandeReferens: number): Observable<DeltagareAvrop> {
return this.deltagareApiService.fetchAvropInformation$(genomforandeReferens);
}
public fetchSignal$(handlingId: string): Observable<Signal> {
return this.handlingarApiService.fetchSignal$(handlingId).pipe(map(({ data }) => mapResponseToSignal(data)));
}
}

View File

@@ -8,4 +8,5 @@ export enum ReportType {
Slutredovisning = 'Slutredovisning',
InformativRapport = 'Informativ rapport',
InformativRedovisning = 'Informativ rapport',
Signal = 'Signal om arbete eller studier',
}

View File

@@ -7,6 +7,7 @@ import { GemensamPlaneringResponse } from '@msfa-models/api/gemensam-planering.r
import { InformativRapportResponse } from '@msfa-models/api/informativ-rapport.response.model';
import { SlutredovisningResponse } from '@msfa-models/api/slutredovisning.response.model';
import { Observable } from 'rxjs';
import { SignalResponse } from '@msfa-models/api/signal.response.model';
@Injectable({
providedIn: 'root',
@@ -27,6 +28,9 @@ export class HandlingarApiService {
`${this._apiBaseUrl}/informativ-rapport/${handlingId}`
);
}
public fetchSignal$(handlingId: string): Observable<{ data: SignalResponse }> {
return this.httpClient.get<{ data: SignalResponse }>(`${this._apiBaseUrl}/signal/${handlingId}`);
}
public fetchFranvaroReport$(handlingId: string): Observable<{ data: FranvaroReportResponse }> {
return this.httpClient.get<{ data: FranvaroReportResponse }>(`${this._apiBaseUrl}/franvaro/${handlingId}`);