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