arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(deltagare): Added list with reports. (TV-732)

Browse Source 
Squashed commit of the following:

commit 225a54c520c3cceaccd348b587df83e8e2050e2d
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Oct 6 15:00:30 2021 +0200

    Added error-handling to reports fetch

commit 876e8d1a338f8f910086868083bb0b4d61fcff63
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Oct 6 14:50:51 2021 +0200

    Added pagination preparation

commit 5e90bc4c0b6079852c05628f1b7fa79cc7f2bc9a
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Oct 6 14:32:46 2021 +0200

    Added reports list to reports tab
This commit is contained in:
Erik Tiekstra
2021-10-06 15:28:44 +02:00
parent bc6fa22915
commit 890573b1fe
13 changed files with 138 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/components/reports-list/reports-list.component.html
View File

@@ -1,4 +1,4 @@
<div class="reports">
<div class="reports-list">
<digi-table af-variation="secondary">
<table>
<thead>
@@ -9,10 +9,8 @@
<tbody>
<tr *ngFor="let report of reports">
<th scope="row">
<a [routerLink]="report?.id">{{ report.type }}</a>
</th>
<td>{{ report.sendDate | localDate }}</td>
<th scope="row">{{ report.type }}</th>
<td>{{ report.date | date:'longDate' }} {{ report.date | date:'shortTime' }}</td>
<td>{{ report.status }}</td>
</tr>
</tbody>
@@ -20,14 +18,13 @@
</digi-table>
<digi-navigation-pagination
*ngIf="totalPage > 1"
class="reports__pagination"
*ngIf="paginationMeta"
class="reports-list__pagination"
[afTotalPages]="totalPage"
[afCurrentResultStart]="currentResultStart"
[afCurrentResultEnd]="currentResultEnd"
[afTotalResults]="count"
(afOnPageChange)="setNewPage($event.detail)"
af-result-name="reports"
>
</digi-navigation-pagination>
(afOnPageChange)="emitNewPage($event.detail)"
af-result-name="rapporter"
></digi-navigation-pagination>
</div>

2
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/components/reports-list/reports-list.component.scss
View File

@@ -1,6 +1,6 @@
@import 'apps/mina-sidor-fa/src/styles/variables/gutters';
.reports {
.reports-list {
&__pagination {
display: block;
margin-top: var(--digi--layout--gutter);

14
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/components/reports-list/reports-list.component.ts
View File

@@ -1,6 +1,6 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { PaginationMeta } from '@msfa-models/pagination-meta.model';
import { Report } from '@msfa-models/reports.model';
import { Report } from '@msfa-models/report.model';
@Component({
selector: 'msfa-reports-list',
@@ -20,7 +20,7 @@ export class ReportsListComponent {
},
{
label: 'Inskickad datum',
key: 'sendDate',
key: 'date',
},
{
label: 'Status',
@@ -29,7 +29,7 @@ export class ReportsListComponent {
];
get currentPage(): number {
return this.paginationMeta.page;
return this.paginationMeta?.page;
}
get totalPage(): number {
@@ -37,19 +37,19 @@ export class ReportsListComponent {
}
get count(): number {
return this.paginationMeta.count;
return this.paginationMeta?.count;
}
get currentResultStart(): number {
return (this.currentPage - 1) * this.paginationMeta.limit + 1;
return (this.currentPage - 1) * this.paginationMeta?.limit + 1;
}
get currentResultEnd(): number {
const end = this.currentResultStart + this.paginationMeta.limit - 1;
const end = this.currentResultStart + this.paginationMeta?.limit - 1;
return end < this.count ? end : this.count;
}
setNewPage(page: number): void {
emitNewPage(page: number): void {
this.paginated.emit(page);
}
}

21
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.html
View File

@@ -1,4 +1,4 @@
<div *ngIf="reportsData$ | async as reportsData; else loadingRef" class="deltagare-tab-reports">
<div class="deltagare-tab-reports">
<form [formGroup]="reportPickerFormGroup" class="deltagare-tab-reports__form">
<h3>Skapa ny rapport</h3>
<p>Här kan du skicka rapporter om deltagaren till arbetsförmedlingen.</p>
@@ -16,25 +16,26 @@
Du måste välja en rapporttyp
</digi-form-validation-message>
</form>
<div
*ngIf="currentGenomforandeReferens$ | async as currentGenomforandeReferens"
class="deltagare-tab-reports__cta-wrapper"
>
<div class="deltagare-tab-reports__cta-wrapper">
<digi-ng-link-button
(click)="onFormSubmitted($event, reportsFormControl.value, currentGenomforandeReferens)"
(click)="onFormSubmitted($event, reportsFormControl.value)"
afText="Skapa ny rapport"
></digi-ng-link-button>
</div>
<div>
<ng-container *ngIf="reportsData; else loadingRef">
<h3>Inskickade rapporter</h3>
<msfa-reports-list
(paginated)="setNewPage($event)"
[paginationMeta]="reportsData.meta"
*ngIf="reportsData.data.length; else noReports"
[reports]="reportsData.data"
[paginationMeta]="reportsData.meta"
(paginated)="emitNewPage($event)"
></msfa-reports-list>
</div>
</ng-container>
</div>
<ng-template #noReports>
<p>Inga rapporter finns registrerad.</p>
</ng-template>
<ng-template #loadingRef>
<msfa-loader type="padded"></msfa-loader>
</ng-template>

74
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.ts
View File

@@ -1,11 +1,9 @@
import { FormSelectItem } from '@af/digi-ng/_form/form-select';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { ReportsData } from '@msfa-models/reports.model';
import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
import { distinctUntilChanged, map, shareReplay, switchMap } from 'rxjs/operators';
import { DeltagareCardService } from '../../deltagare-card.service';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { ReportsData } from '@msfa-models/report.model';
import { RequiredValidator } from '@msfa-utils/validators/required.validator';
@Component({
selector: 'msfa-deltagare-tab-reports',
@@ -14,80 +12,50 @@ import { DeltagareCardService } from '../../deltagare-card.service';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DeltagareTabReportsComponent {
@Input() reportsData: ReportsData;
@Input() genomforandeReferens: number;
@Output() reportsPaginated = new EventEmitter<number>();
readonly reportsFormControlName = 'reports';
public currentGenomforandeReferens$: Observable<number> = this.activatedRoute.params.pipe(
map(params => params.genomforandeReferens as string),
distinctUntilChanged(
([prevGenomforandeReferens], [currGenomforandeReferens]) => prevGenomforandeReferens === currGenomforandeReferens
),
map(genomforandeReferens => +genomforandeReferens)
);
reportPickerFormGroup: FormGroup = this.formBuilder.group({
// eslint-disable-next-line @typescript-eslint/unbound-method
reports: this.formBuilder.control('', [Validators.required]),
reports: this.formBuilder.control('', [RequiredValidator('Rapporttyp')]),
});
selectableReportTypes: Array<FormSelectItem> = [
{ name: 'Avvikelse', value: 'avvikelse' },
{ name: 'Gemensam Planering', value: 'planering' },
];
selectedReportType: FormSelectItem;
private _limit$ = new BehaviorSubject<number>(20);
private _page$ = new BehaviorSubject<number>(1);
reportsData$: Observable<ReportsData> = combineLatest([
this.currentGenomforandeReferens$,
this._limit$,
this._page$,
]).pipe(
switchMap(([genomforandeReferens, limit, page]) =>
this.deltagareCardService.fetchReports$(limit, page, genomforandeReferens)
),
shareReplay(1)
);
private _type$ = new BehaviorSubject<FormSelectItem>(null);
constructor(
private activatedRoute: ActivatedRoute,
private deltagareCardService: DeltagareCardService,
private formBuilder: FormBuilder,
private router: Router
) {}
constructor(private formBuilder: FormBuilder, private router: Router) {}
get reportsFormControl(): AbstractControl | null {
return this.reportPickerFormGroup?.get(this.reportsFormControlName);
}
onFormSubmitted(event: Event, reportType: string, genomforandeReferens: number): void {
onFormSubmitted(event: Event, reportType: string): void {
event.preventDefault();
this.reportsFormControl.markAsTouched();
if (this.reportsFormControl.invalid) {
return;
}
switch (reportType) {
case 'planering':
if (this.reportsFormControl.valid) {
void this.router.navigate([`/deltagare/${genomforandeReferens}/gemensam-planering`]);
}
void this.router.navigateByUrl(`/deltagare/${this.genomforandeReferens}/gemensam-planering`);
break;
case 'avvikelse':
if (this.reportsFormControl.valid) {
void this.router.navigate([`/deltagare/${genomforandeReferens}/avvikelserapport`]);
}
void this.router.navigateByUrl(`/deltagare/${this.genomforandeReferens}/avvikelserapport`);
break;
default:
return;
}
this.reportsFormControl.markAsTouched();
if (!this.selectableReportTypes || this.reportPickerFormGroup.invalid) {
return;
}
const selectedReportType = this.selectableReportTypes.find(report => {
return report.value === this.reportsFormControl.value;
});
this._type$.next(selectedReportType);
}
setNewPage(page: number): void {
this._page$.next(page);
emitNewPage(page: number): void {
this.reportsPaginated.emit(page);
}
}

6
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.component.html
View File

@@ -31,7 +31,11 @@
*ngIf="reportingTabVisible"
>
<ng-container *ngIf="activeTab === '1'">
<msfa-deltagare-tab-reports></msfa-deltagare-tab-reports>
<msfa-deltagare-tab-reports
[reportsData]="reportsData$ | async"
[genomforandeReferens]="currentGenomforandeReferens$ | async"
(reportsPaginated)="setNewPage($event)"
></msfa-deltagare-tab-reports>
</ng-container>
</digi-navigation-tab>

22
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.component.ts
View File

@@ -3,6 +3,7 @@ import { ActivatedRoute } from '@angular/router';
import { Feature } from '@msfa-enums/feature.enum';
import { RoleEnum } from '@msfa-enums/role.enum';
import { environment } from '@msfa-environment';
import { PaginationParams } from '@msfa-models/api/params.model';
import { Avrop } from '@msfa-models/avrop.model';
import { ContactInformation } from '@msfa-models/contact-information.model';
import { Disability } from '@msfa-models/disability.model';
@@ -10,6 +11,7 @@ import { DriversLicense } from '@msfa-models/drivers-license.model';
import { Education } from '@msfa-models/education.model';
import { Handledare } from '@msfa-models/handledare.model';
import { HighestEducation } from '@msfa-models/highest-education.model';
import { ReportsData } from '@msfa-models/report.model';
import { Role } from '@msfa-models/role.model';
import { WorkExperience } from '@msfa-models/work-experience.model';
import { UserService } from '@msfa-services/api/user.service';
@@ -25,6 +27,12 @@ import { DeltagareCardService } from './deltagare-card.service';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DeltagareCardComponent {
private _reportsParams$ = new BehaviorSubject<PaginationParams>({ page: 1, limit: 20 });
private _activeFeatures: Feature[] = environment.activeFeatures;
private _activeTab$ = new BehaviorSubject<string>('0');
activeTab$: Observable<string> = this._activeTab$.asObservable();
private _userRoles: Role[] = this.userService.userRolesSnapshot;
currentGenomforandeReferens$: Observable<number> = this.activatedRoute.params.pipe(
map(params => params.genomforandeReferens as string),
distinctUntilChanged(
@@ -69,6 +77,12 @@ export class DeltagareCardComponent {
distinctUntilChanged((prevAvrop, currAvrop) => prevAvrop.id === currAvrop.id),
switchMap(avropInformation => this.handledareService.fetchAvailableHandledare$([avropInformation.id]))
);
reportsData$: Observable<ReportsData> = combineLatest([this._reportsParams$, this.currentGenomforandeReferens$]).pipe(
switchMap(([params, genomforandeReferens]) =>
this.deltagareCardService.fetchReports$(genomforandeReferens, params)
),
shareReplay(1)
);
tab0Loading$: Observable<boolean> = combineLatest([this.contactInformation$, this.avropInformation$]).pipe(
map(([contactInformation, avropInformation]) => !(contactInformation && avropInformation)),
startWith(true)
@@ -93,10 +107,6 @@ export class DeltagareCardComponent {
map(([disabilities, avropInformation, workLanguages]) => !(disabilities && avropInformation && workLanguages)),
startWith(true)
);
private _activeFeatures: Feature[] = environment.activeFeatures;
private _activeTab$ = new BehaviorSubject<string>('0');
activeTab$: Observable<string> = this._activeTab$.asObservable();
private _userRoles: Role[] = this.userService.userRolesSnapshot;
constructor(
private activatedRoute: ActivatedRoute,
@@ -136,4 +146,8 @@ export class DeltagareCardComponent {
setActiveTab(tab: number): void {
this._activeTab$.next(tab.toString());
}
setNewPage(page: number): void {
this._reportsParams$.next({ ...this._reportsParams$.getValue(), page });
}
}

7
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.service.ts
View File

@@ -1,11 +1,12 @@
import { Injectable } from '@angular/core';
import { PaginationParams } from '@msfa-models/api/params.model';
import { Avrop } from '@msfa-models/avrop.model';
import { ContactInformation } from '@msfa-models/contact-information.model';
import { Disability } from '@msfa-models/disability.model';
import { DriversLicense } from '@msfa-models/drivers-license.model';
import { Education } from '@msfa-models/education.model';
import { HighestEducation } from '@msfa-models/highest-education.model';
import { ReportsData } from '@msfa-models/reports.model';
import { ReportsData } from '@msfa-models/report.model';
import { WorkExperience } from '@msfa-models/work-experience.model';
import { DeltagareApiService } from '@msfa-services/api/deltagare.api.service';
import { HandledareService } from '@msfa-services/handledare.service';
@@ -52,7 +53,7 @@ export class DeltagareCardService {
return this.deltagareApiService.fetchDisabilities$(genomforandeReferens);
}
public fetchReports$(limit: number, page: number, genomforandeReferens: number): Observable<ReportsData> {
return this.deltagareApiService.fetchReports$(limit, page, genomforandeReferens);
public fetchReports$(genomforandeReferens: number, params: PaginationParams): Observable<ReportsData> {
return this.deltagareApiService.fetchReports$(genomforandeReferens, params);
}
}

3
apps/mina-sidor-fa/src/app/shared/enums/report-type.enum.ts
View File

@@ -1,4 +1,7 @@
export enum ReportType {
FRANVARO = 'franvaro',
AVVIKELSE = 'avvikelse',
GemensamPlanering = 'Gemensam planering',
Franvaro = 'Frånvaro',
Avvikelse = 'Avvikelse',
}

18
apps/mina-sidor-fa/src/app/shared/models/api/report.response.model.ts
View File

@@ -1,13 +1,15 @@
import { ReportType } from '@msfa-enums/report-type.enum';
import { PaginationMeta } from '@msfa-models/pagination-meta.model';
import { Report } from '@msfa-models/reports.model';
export interface ReportResponse {
data: Report[];
id: string;
genomforandeReferens: string;
typAvRapport: ReportType;
inskickadDatum: string;
statusRapport: string;
ciamUserId: string;
}
export interface ReportsDataResponse {
data: ReportResponse[];
meta: PaginationMeta;
}
export interface ReportsApiResponseData {
type: string;
sendDate: Date;
status: string;
}

29
apps/mina-sidor-fa/src/app/shared/models/report.model.ts Normal file
View File

@@ -0,0 +1,29 @@
import { ReportType } from '@msfa-enums/report-type.enum';
import { ReportResponse } from './api/report.response.model';
import { PaginationMeta } from './pagination-meta.model';
export interface Report {
id: string;
genomforandeReferens: string;
type: string;
date: Date;
status: string;
ciamUserId: string;
}
export interface ReportsData {
data: Report[];
meta: PaginationMeta;
}
export function mapResponseToReport(data: ReportResponse): Report {
const { id, genomforandeReferens, typAvRapport, inskickadDatum, statusRapport, ciamUserId } = data;
return {
id,
genomforandeReferens,
type: (ReportType[typAvRapport] as string) || 'Okänd',
date: new Date(inskickadDatum),
status: statusRapport,
ciamUserId,
};
}

22
apps/mina-sidor-fa/src/app/shared/models/reports.model.ts
View File

@@ -1,22 +0,0 @@
import { ReportsApiResponseData } from './api/report.response.model';
import { PaginationMeta } from './pagination-meta.model';
export interface Report {
type: string;
sendDate: Date;
status: string;
}
export interface ReportsData {
data: Report[];
meta: PaginationMeta;
}
export function mapReportsResponseToReport(data: ReportsApiResponseData): Report {
const { type, sendDate, status } = data;
return {
type,
sendDate,
status
}
}

44
apps/mina-sidor-fa/src/app/shared/services/api/deltagare.api.service.ts
View File

@@ -8,7 +8,8 @@ import { DisabilityResponse } from '@msfa-models/api/disability.response.model';
import { DriversLicenseResponse } from '@msfa-models/api/drivers-license.response.model';
import { EducationsResponse } from '@msfa-models/api/educations.response.model';
import { HighestEducationResponse } from '@msfa-models/api/highest-education.response.model';
import { DeltagareParams, Params } from '@msfa-models/api/params.model';
import { DeltagareParams, PaginationParams, Params } from '@msfa-models/api/params.model';
import { ReportsDataResponse } from '@msfa-models/api/report.response.model';
import { TranslatorResponse } from '@msfa-models/api/translator.response.model';
import { WorkExperiencesResponse } from '@msfa-models/api/work-experiences.response.model';
import { WorkLanguagesResponse } from '@msfa-models/api/work-languages.response.model';
@@ -20,7 +21,7 @@ import { DriversLicense, mapResponseToDriversLicense } from '@msfa-models/driver
import { Education, mapResponseToEducation } from '@msfa-models/education.model';
import { CustomError, errorToCustomError } from '@msfa-models/error/custom-error';
import { HighestEducation, mapResponseToHighestEducation } from '@msfa-models/highest-education.model';
import { ReportsData } from '@msfa-models/reports.model';
import { mapResponseToReport, ReportsData } from '@msfa-models/report.model';
import { mapResponseToWorkExperience, WorkExperience } from '@msfa-models/work-experience.model';
import { sortFromToDates } from '@msfa-utils/sort.util';
import { BehaviorSubject, Observable, of } from 'rxjs';
@@ -31,6 +32,7 @@ import { catchError, map } from 'rxjs/operators';
})
export class DeltagareApiService {
private _apiBaseUrl = `${environment.api.url}/deltagare`;
private _apiReportUrl = `${environment.api.url}/handlingar`;
private _deltagareLoading$ = new BehaviorSubject<boolean>(false);
public deltagareLoading$: Observable<boolean> = this._deltagareLoading$.asObservable();
private _showUnauthorizedError$ = new BehaviorSubject<boolean>(false);
@@ -75,28 +77,24 @@ export class DeltagareApiService {
);
}
public fetchReports$(limit: number, page: number, genomforandeReferens: number): Observable<ReportsData> {
return of({ data: [], meta: null });
public fetchReports$(genomforandeReferens: number, paginationParams: PaginationParams): Observable<ReportsData> {
const { page, limit } = paginationParams;
const params: { [param: string]: string | string[] } = {
genomforandeReferens: genomforandeReferens.toString(),
page: page.toString(),
limit: limit.toString(),
};
// TODO: When the API/Mock-API has implemented the endpoint, we can remove use following code
// to make API-requests.
// const params: { [param: string]: string | string[] } = {
// id: genomforandeReferens.toString(),
// limit: limit.toString(),
// page: page.toString(),
// };
// return this.httpClient
// .get<ReportResponse>(`${this._apiBaseUrl}/report`, {
// params,
// })
// .pipe(
// map(({ data, meta }) => {
// data.sort((reportA, reportB) => (+reportA.sendDate < +reportB.sendDate ? 1 : -1));
// return { data: data.map(report => mapReportsResponseToReport(report)), meta };
// })
// );
return this.httpClient
.get<ReportsDataResponse>(`${this._apiReportUrl}`, { params })
.pipe(
map(({ data, meta }) => ({ data: data.map(report => mapResponseToReport(report)), meta })),
catchError((error: Error) => {
throw new CustomError(
errorToCustomError({ ...error, message: `Kunde inte hämta rapporter.\n\n${error.message}` })
);
})
);
}
public fetchContactInformation$(genomforandeReferens: number): Observable<ContactInformation> {