Merge pull request #68 in TEA/mina-sidor-fa-web from TV-204-reporting-participant-card to develop

Squashed commit of the following:

commit f5bb97c0a50a84095ac147c775eb681943c2a5c1
Merge: 83b6a0b b06436a
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Sep 8 20:24:46 2021 +0200

    Merge branch 'develop' into TV-204-reporting-participant-card

commit 83b6a0b2caa2267fc7dc682e8d846954d81ee4fc
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Sep 8 08:11:07 2021 +0200

    TV-204 added endpoint for report

commit b54856d0d9bca9a97a342332679ee13ddbb0edb5
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Sep 8 08:10:31 2021 +0200

    TV-204  test and linting issues

commit 22129a545a15137cd11bf3356185f496352ad72a
Merge: 39ab301 126c6e3
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Sep 8 07:39:43 2021 +0200

    Merge branch 'develop' into TV-204-reporting-participant-card

commit 39ab3013798290b4fe34f997fd1525b4c30230bb
Merge: 50a0064 d9938cc
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Thu Sep 2 23:13:35 2021 +0200

    Merge branch 'develop' into TV-204-reporting-participant-card

commit 50a006429b9712e11798e33659ce42d17aef6526
Merge: 67de27d 1f26e80
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Thu Aug 26 17:29:41 2021 +0200

    Merge branch 'develop' into TV-204-reporting-participant-card

commit 67de27dd36999635738046794609d3221f33c1b8
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Thu Aug 26 17:19:10 2021 +0200

    TV-204 review fixes

commit 005aea20d647848ba3ddf18b0538fdaad5bd011d
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Thu Aug 26 08:40:55 2021 +0200

    TV-204 Small fix to report-type.enum

commit 981ac20a147d6cde3e594b8475841fa4c5703ea3
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Thu Aug 26 00:18:20 2021 +0200

    TV-204 pass selected report type to deltagare.service

commit e21f8e1abb78deff2b9b06da6401ed9463a5d414
Merge: 3e059ed 0661d22
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Aug 25 17:54:02 2021 +0200

    Merge branch 'develop' into TV-204-reporting-participant-card

commit 3e059ed219bc95bd2cbd9a89ab4bd8f46b573c37
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Aug 25 17:37:46 2021 +0200

    TV-204 deleted mockdata

commit af3aaf9018de004ea8cdc7d92505f68ce4597410
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Aug 25 16:27:03 2021 +0200

    TV-204 changed to digi-ng-form-select, validation control

commit d844fb4bcc4196f7d412573ccc21c95c0de70e8f
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Wed Aug 25 13:35:17 2021 +0200

    TV-204 Changes to digi-form-select tag

commit 91957c7256594e1e2953262b03bf13b6b2704c8e
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Aug 25 10:38:40 2021 +0200

    TV-204 deleted unused modules

commit 130ef0afd1a8f88b5065dce5aabdafec5fb27862
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Aug 25 10:22:48 2021 +0200

    TV-204 updated spec-file

commit 51bc86df92c638b6613fbd24d12054fbaf792b28
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Tue Aug 24 17:27:57 2021 +0200

    TV-204 changed to DigiNgLinkButton

commit ad2f5da7b4f1de798bcb4766e66416ca41bd4a6e
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Tue Aug 24 11:25:47 2021 +0200

    TV-204 api GET endpoint for reports is missing

commit 3effe1a4b74a55c82f697cb2c8f6221fc2558b83
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Tue Aug 24 11:17:04 2021 +0200

    moved code

commit 5cbb0d51adee361f8162f5319cc728a614002b19
Merge: fa0a2f9 59ce393
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Tue Aug 24 10:49:37 2021 +0200

    Merge branch 'develop' into TV-204-reporting-participant-card

commit fa0a2f9ebf5f8d8c218a50870a07194fa95d5213
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Tue Aug 24 10:16:11 2021 +0200

    TV-204 prepair get request for reports, paginering

... and 11 more commits
This commit is contained in:
Nicolas Fuentes Maturana
2021-09-10 10:02:37 +02:00
parent 587f393b9c
commit 1613116c0e
16 changed files with 347 additions and 30 deletions

View File

@@ -1,9 +1,9 @@
@import 'variables/gutters';
.employees-list {
&__column-head {
// padding: 0;
}
// &__column-head {
// // padding: 0;
// }
th,
td {

View File

@@ -0,0 +1,33 @@
<div class="reports">
<digi-table af-variation="secondary">
<table>
<thead>
<tr>
<th scope="col" *ngFor="let column of columnHeaders">{{column.label}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let report of reports">
<th scope="row">
<a [routerLink]="report?.id">{{ report.type }}</a>
</th>
<td>{{ report.sendDate | localDate }}</td>
<td>{{ report.status }}</td>
</tr>
</tbody>
</table>
</digi-table>
<digi-navigation-pagination
*ngIf="totalPage > 1"
class="reports__pagination"
[afTotalPages]="totalPage"
[afCurrentResultStart]="currentResultStart"
[afCurrentResultEnd]="currentResultEnd"
[afTotalResults]="count"
(afOnPageChange)="setNewPage($event.detail)"
af-result-name="reports"
>
</digi-navigation-pagination>
</div>

View File

@@ -0,0 +1,8 @@
@import 'variables/gutters';
.reports {
&__pagination {
display: block;
margin-top: var(--digi--layout--gutter);
}
}

View File

@@ -0,0 +1,28 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { ReportsComponent } from './reports.component';
describe('ReportsComponent', () => {
let component: ReportsComponent;
let fixture: ComponentFixture<ReportsComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [ReportsComponent],
imports: [RouterTestingModule]
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ReportsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@@ -0,0 +1,55 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { PaginationMeta } from '@msfa-models/pagination-meta.model';
import { Report } from '@msfa-models/reports.model';
@Component({
selector: 'msfa-reports',
templateUrl: './reports.component.html',
styleUrls: ['./reports.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ReportsComponent {
@Input() reports: Report[];
@Input() paginationMeta: PaginationMeta;
@Output() paginated = new EventEmitter<number>();
columnHeaders: { label: string; key: keyof Report }[] = [
{
label: 'Typ av rapport',
key: 'type'
},
{
label: 'Inskickad datum',
key: 'sendDate',
},
{
label: 'Status',
key: 'status',
}
];
get currentPage(): number {
return this.paginationMeta.page;
}
get totalPage(): number {
return this.paginationMeta?.totalPage;
}
get count(): number {
return this.paginationMeta.count;
}
get currentResultStart(): number {
return (this.currentPage - 1) * this.paginationMeta.limit + 1;
}
get currentResultEnd(): number {
const end = this.currentResultStart + this.paginationMeta.limit - 1;
return end < this.count ? end : this.count;
}
setNewPage(page: number): void {
this.paginated.emit(page);
}
}

View File

@@ -0,0 +1,13 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { LocalDatePipeModule } from '@msfa-shared/pipes/local-date/local-date.module';
import { ReportsComponent } from './reports.component';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [ReportsComponent],
imports: [CommonModule, RouterModule, LocalDatePipeModule],
exports: [ReportsComponent]
})
export class ReportsModule { }

View File

@@ -188,6 +188,47 @@
</div>
</div>
</digi-navigation-tab>
<digi-navigation-tab af-aria-label="Rapportering" af-id="deltagare-card-rapportering">
<div class="deltagare-card__select-report">
<h3>Skapa ny rapport</h3>
<p>Här kan du skicka rapporter om deltagaren till arbetsförmedlingen.</p>
<form [formGroup]="reportPickerFormGroup">
<digi-ng-form-select
[formControlName]="avvikelseFormControlName"
afLabel="Välj rapporttyp"
afPlaceholder="Välj rapporttyp"
[afSelectItems]="selectableReportTypes"
[afDisableValidStyle]="true"
[afRequired]="true"
[afInvalid]="avvikelseFormControl.invalid && avvikelseFormControl.touched"
>
</digi-ng-form-select>
<digi-form-validation-message
af-variation="error"
*ngIf="avvikelseFormControl.invalid && avvikelseFormControl.touched"
>
Du måste välja en rapporttyp
</digi-form-validation-message>
</form>
</div>
<div class="deltagare-card__cta-wrapper">
<digi-ng-link-button
afText="Skapa ny rapport"
[afRoute]="avvikelseFormControl.valid ? ['/deltagare/rapportera', deltagare.id] : null"
(click)="onFormSubmitted($event)"
></digi-ng-link-button>
</div>
<div>
<h3>Inskickade rapporter</h3>
<msfa-reports
*ngIf="reportsData$ | async as reportsData, else loadingRef"
[reports]="reportsData.data"
[paginationMeta]="reportsData?.meta"
(paginated)="setNewPage($event)"
></msfa-reports>
</div>
</digi-navigation-tab>
</digi-navigation-tabs>
</digi-typography>
</div>

View File

@@ -14,6 +14,15 @@
flex-basis: 0;
}
&__select-report {
max-width: var(--digi--typography--text--max-width);
}
&__cta-wrapper {
margin-top: $digi--layout--gutter--l;
margin-bottom: $digi--layout--gutter--xl;
}
dd {
margin: 0 0 1rem;
}

View File

@@ -1,6 +1,7 @@
import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { LayoutComponent } from '@msfa-shared/components/layout/layout.component';
import { DeltagareCardComponent } from './deltagare-card.component';
@@ -13,7 +14,7 @@ describe('DeltagareCardComponent', () => {
waitForAsync(() => {
void TestBed.configureTestingModule({
declarations: [DeltagareCardComponent, LayoutComponent],
imports: [RouterTestingModule, HttpClientTestingModule, DigiNgSkeletonBaseModule],
imports: [RouterTestingModule, HttpClientTestingModule, DigiNgSkeletonBaseModule, ReactiveFormsModule],
}).compileComponents();
})
);

View File

@@ -1,7 +1,10 @@
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 } from '@angular/router';
import { IconType } from '@msfa-enums/icon-type.enum';
import { Deltagare } from '@msfa-models/deltagare.model';
import { ReportsData } from '@msfa-models/reports.model';
import { WorkExperience } from '@msfa-models/work-experience.model';
import { DeltagareService } from '@msfa-services/api/deltagare.service';
import { Observable } from 'rxjs';
@@ -15,6 +18,18 @@ import { map } from 'rxjs/operators';
})
export class DeltagareCardComponent {
deltagare$: Observable<Deltagare> = this.deltagareService.deltagare$;
reportsData$: Observable<ReportsData> = this.deltagareService.reportsData$;
readonly avvikelseFormControlName = 'avvikelse';
reportPickerFormGroup: FormGroup = this.formBuilder.group({
// eslint-disable-next-line @typescript-eslint/unbound-method
avvikelse: this.formBuilder.control('', [Validators.required]),
});
selectableReportTypes: Array<FormSelectItem> = [{ name: 'Avvikelse', value: 'avvikelse' }];
selectedReportType: FormSelectItem;
firstVisibleWorkExperiences$: Observable<WorkExperience[]> = this.deltagare$.pipe(
map(deltagare => deltagare.workExperiences.slice(0, 2))
);
@@ -25,11 +40,38 @@ export class DeltagareCardComponent {
iconType = IconType;
accordionExpanded = false;
constructor(private activatedRoute: ActivatedRoute, private deltagareService: DeltagareService) {
constructor(
private activatedRoute: ActivatedRoute,
private deltagareService: DeltagareService,
private formBuilder: FormBuilder) {
this.deltagareService.setCurrentDeltagareId(this.activatedRoute.snapshot.params.deltagareId);
}
get avvikelseFormControl(): AbstractControl | null {
return this.reportPickerFormGroup?.get(this.avvikelseFormControlName);
}
toggleAccordionExpanded(): void {
this.accordionExpanded = !this.accordionExpanded;
}
setNewPage(page: number): void {
this.deltagareService.setPage(page);
}
onFormSubmitted(event: Event): void {
event.preventDefault();
this.avvikelseFormControl.markAsTouched();
if (!this.selectableReportTypes || this.reportPickerFormGroup.invalid) {
return;
}
const selectedReportType = this.selectableReportTypes.find(report => {
return report.value === this.avvikelseFormControl.value;
})
this.deltagareService.setReportType(selectedReportType);
}
}

View File

@@ -1,14 +1,18 @@
import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
import { DigiNgLayoutExpansionPanelModule } from '@af/digi-ng/_layout/layout-expansion-panel';
import { DigiNgLinkButtonModule } from '@af/digi-ng/_link/link-button';
import { DigiNgLinkInternalModule } from '@af/digi-ng/_link/link-internal';
import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
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 { IconModule } from '@msfa-shared/components/icon/icon.module';
import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
import { ReportsModule } from './components/reports/reports.module';
import { DeltagareCardComponent } from './deltagare-card.component';
@NgModule({
@@ -17,6 +21,7 @@ import { DeltagareCardComponent } from './deltagare-card.component';
imports: [
CommonModule,
RouterModule.forChild([{ path: '', component: DeltagareCardComponent }]),
ReportsModule,
LayoutModule,
DigiNgLinkInternalModule,
IconModule,
@@ -25,7 +30,10 @@ import { DeltagareCardComponent } from './deltagare-card.component';
HideTextModule,
DigiNgSkeletonBaseModule,
DigiNgPopoverModule,
DigiNgLinkButtonModule,
DigiNgFormSelectModule,
ReactiveFormsModule
],
exports: [DeltagareCardComponent],
})
export class DeltagareCardModule {}
export class DeltagareCardModule { }

View File

@@ -0,0 +1,4 @@
export enum ReportStatus {
SKICKAD = 'Skickad',
OKAND = 'Okänd',
}

View File

@@ -0,0 +1,4 @@
export enum ReportType {
AVVIKELSERAPPORT = 'Avvikelserapport',
OKAND = 'Okänd',
}

View File

@@ -0,0 +1,13 @@
import { PaginationMeta } from '@msfa-models/pagination-meta.model';
import { Report } from '@msfa-models/reports.model';
export interface ReportResponse {
data: Report[];
meta: PaginationMeta;
}
export interface ReportsApiResponseData {
type: string;
sendDate: Date;
status: string;
}

View File

@@ -0,0 +1,22 @@
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
}
}

View File

@@ -1,3 +1,4 @@
import { FormSelectItem } from '@af/digi-ng/_form/form-select';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { UnsubscribeDirective } from '@msfa-directives/unsubscribe.directive';
@@ -10,6 +11,7 @@ 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 { ReportResponse } from '@msfa-models/api/report.response.model';
import { Params } from '@msfa-models/api/params.model';
import { TranslatorResponse } from '@msfa-models/api/translator.response.model';
import { WorkExperiencesResponse } from '@msfa-models/api/work-experiences.response.model';
@@ -20,13 +22,14 @@ import {
Deltagare,
DeltagareCompact,
DeltagareCompactData,
mapResponseToDeltagareCompact,
mapResponseToDeltagareCompact
} from '@msfa-models/deltagare.model';
import { Disability, mapResponseToDisability } from '@msfa-models/disability.model';
import { DriversLicense, mapResponseToDriversLicense } from '@msfa-models/drivers-license.model';
import { Education, mapResponseToEducation } from '@msfa-models/education.model';
import { errorToCustomError } from '@msfa-models/error/custom-error';
import { HighestEducation, mapResponseToHighestEducation } from '@msfa-models/highest-education.model';
import { mapReportsResponseToReport, ReportsData } from '@msfa-models/reports.model';
import { Sort } from '@msfa-models/sort.model';
import { mapResponseToWorkExperience, WorkExperience } from '@msfa-models/work-experience.model';
import { ErrorService } from '@msfa-services/error.service';
@@ -44,6 +47,8 @@ export class DeltagareService extends UnsubscribeDirective {
private _page$ = new BehaviorSubject<number>(1);
private _sort$ = new BehaviorSubject<Sort<keyof DeltagareCompact>>({ key: 'fullName', order: SortOrder.ASC });
public sort$: Observable<Sort<keyof DeltagareCompact>> = this._sort$.asObservable();
private _reportType$ = new BehaviorSubject<FormSelectItem>(null);
reportType$: Observable<FormSelectItem> = this._reportType$.asObservable();
private _onlyMyDeltagare$ = new BehaviorSubject<boolean>(false);
public onlyMyDeltagare$: Observable<boolean> = this._onlyMyDeltagare$.asObservable();
@@ -73,6 +78,11 @@ export class DeltagareService extends UnsubscribeDirective {
switchMap(([limit, page, sort, onlyMyDeltagare]) => this._fetchAllDeltagare$(limit, page, sort, onlyMyDeltagare))
);
public reportsData$: Observable<ReportsData> = combineLatest([
this._limit$,
this._page$
]).pipe(switchMap(([limit, page]) => this._fetchReports$(limit, page)));
public setSort(newSortKey: keyof DeltagareCompact): void {
const currentSort = this._sort$.getValue();
const order =
@@ -112,6 +122,32 @@ export class DeltagareService extends UnsubscribeDirective {
);
}
private _fetchReports$(
limit: number,
page: number
): Observable<ReportsData> {
const params: { [param: string]: string | string[] } = {
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 };
})
);
}
public setReportType(reportType: FormSelectItem): void {
this._reportType$.next(reportType);
}
public setCurrentDeltagareId(currentDeltagareId: string): void {
this._deltagare$.next(null);
this._currentDeltagareId$.next(currentDeltagareId);
@@ -158,8 +194,8 @@ export class DeltagareService extends UnsubscribeDirective {
map(({ data }) =>
data.utbildningar
? data.utbildningar.sort((a, b) =>
sortFromToDates({ from: a.period_from, to: a.period_tom }, { from: b.period_from, to: b.period_tom })
)
sortFromToDates({ from: a.period_from, to: a.period_tom }, { from: b.period_from, to: b.period_tom })
)
: []
),
map(educations => educations.map(utbildning => mapResponseToEducation(utbildning))),
@@ -253,27 +289,27 @@ export class DeltagareService extends UnsubscribeDirective {
workExperiences,
avropInformation,
]: [
ContactInformation,
DriversLicense,
HighestEducation,
Education[],
string,
string[],
Disability[],
WorkExperience[],
Avrop
]) => ({
id,
...contactInformation,
driversLicense,
highestEducation,
educations,
translator,
workLanguages,
disabilities,
workExperiences,
avropInformation,
})
ContactInformation,
DriversLicense,
HighestEducation,
Education[],
string,
string[],
Disability[],
WorkExperience[],
Avrop
]) => ({
id,
...contactInformation,
driversLicense,
highestEducation,
educations,
translator,
workLanguages,
disabilities,
workExperiences,
avropInformation,
})
)
);
}