(reportsLayout): added basic layout structure for all reports
Squashed commit of the following: commit fc6551a1101f448544bccb62c6272d105dd1e0a4 Merge: e3f72042dd9d3dAuthor: Aden Hassan <aden.hassan@arbetsformedlingen.se> Date: Tue Sep 21 13:32:01 2021 +0200 Merge branch 'develop' into feature/TV-634-reports-layout commit e3f72043c68c326b7f1adc8bd85f993a4b2aafff Author: Aden Hassan <aden.hassan@arbetsformedlingen.se> Date: Tue Sep 21 12:46:00 2021 +0200 minor adjustments according to feedback commit 6ef20a3b5074bcf06a84a7de4fded08cbe1e0026 Author: Aden Hassan <aden.hassan@arbetsformedlingen.se> Date: Mon Sep 20 21:55:38 2021 +0200 added minor changes to default steps (TV-634) commit 4835e8f48da04432505cc5225cc57a1763fcdd60 Author: Aden Hassan <aden.hassan@arbetsformedlingen.se> Date: Mon Sep 20 21:47:23 2021 +0200 added output-event to send event from skicka in button (TV-634) commit f01a87dfe099514529ed641c85007986f98b9ea8 Merge: 1a4bdfce120e50Author: Aden Hassan <aden.hassan@arbetsformedlingen.se> Date: Mon Sep 20 19:49:26 2021 +0200 Merge branch 'develop' into feature/TV-634-reports-layout commit 1a4bdfc1684a36a168371d74d90ea2d41060af0e Author: Aden Hassan <aden.hassan@arbetsformedlingen.se> Date: Mon Sep 20 19:48:21 2021 +0200 created basic layout modul for all reports (TV-634 and TV-624)
This commit is contained in:
Aden Hassan
@@ -0,0 +1,14 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
|
||||
import { ReportLayoutComponent } from './report-layout.component';
|
||||
import { DigiNgProgressProgressbarModule } from '@af/digi-ng/_progress/progressbar';
|
||||
import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
|
||||
|
||||
@NgModule({
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
declarations: [ReportLayoutComponent],
|
||||
imports: [CommonModule, LayoutModule, DigiNgProgressProgressbarModule, HideTextModule],
|
||||
exports: [ReportLayoutComponent]
|
||||
})
|
||||
export class ReportLayoutModule {}
|
||||
@@ -0,0 +1,56 @@
|
||||
<section class="report-layout" *ngIf="contactInformation$ | async as contactInformation">
|
||||
<digi-typography>
|
||||
<div class="report-layout__deltagare-info">
|
||||
<h1>{{ reportTitle }}</h1>
|
||||
<h3 class="report-layout__sub-heading-h3">{{contactInformation.fornamn + ' ' + contactInformation.efternamn}}</h3>
|
||||
<div class="report-layout__personnummer">
|
||||
<span>Personnummer:</span>
|
||||
<msfa-hide-text
|
||||
symbols="********-****"
|
||||
[changingText]="contactInformation.personnummer"
|
||||
ariaLabelType="Personnumer"
|
||||
></msfa-hide-text>
|
||||
</div>
|
||||
<span *ngIf="service">Tjänst: KROM</span>
|
||||
<ng-container *ngIf="startDate && endDate && !isPeriodDate">
|
||||
<span>Startdatum: {{startDate}}</span>
|
||||
<span>Slutdatum: {{endDate}}</span>
|
||||
</ng-container>
|
||||
<span *ngIf="startDate && endDate && isPeriodDate">Avser period: {{startDate}} - {{endDate}}</span>
|
||||
</div>
|
||||
|
||||
<digi-ng-progress-progressbar
|
||||
[afSteps]="totalAmountOfSteps"
|
||||
[afActiveStep]="currentStep"
|
||||
></digi-ng-progress-progressbar>
|
||||
|
||||
<div class="report-layout__main-content">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
|
||||
<div class="report-layout__step-buttons-wrapper">
|
||||
<ng-container *ngIf="currentStep > 1">
|
||||
<digi-button class="report-layout__step-buttons-wrapper--space-right"
|
||||
af-variation="secondary" af-size="m" (afOnClick)="previousStep()">
|
||||
Tillbaka
|
||||
</digi-button>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="currentStep < (totalAmountOfSteps -1)">
|
||||
<digi-button class="report-layout__step-buttons-wrapper"
|
||||
af-size="m" (afOnClick)="nextStep()">
|
||||
Nästa
|
||||
</digi-button>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="currentStep === (totalAmountOfSteps -1)">
|
||||
<digi-button af-size="m" (afOnClick)="nextStep()">
|
||||
Förhandsgranska
|
||||
</digi-button>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="currentStep === totalAmountOfSteps">
|
||||
<digi-button af-size="m" (afOnClick)="sendRequest()">
|
||||
Skicka in
|
||||
</digi-button>
|
||||
</ng-container>
|
||||
</div>
|
||||
</digi-typography>
|
||||
</section>
|
||||
@@ -0,0 +1,31 @@
|
||||
@import 'variables/gutters';
|
||||
.report-layout {
|
||||
font-weight: var(--digi--typography--font-weight--semibold);
|
||||
font-size: var(--digi--typography--font-size--s);
|
||||
|
||||
&__sub-heading-h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&__deltagare-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: $digi--layout--gutter--xl;
|
||||
}
|
||||
|
||||
&__personnummer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__personnummer msfa-hide-text {
|
||||
margin-left: var(--digi--layout--gutter--s);
|
||||
}
|
||||
|
||||
&__main-content {
|
||||
margin: $digi--layout--gutter--xl 0;
|
||||
}
|
||||
|
||||
&__step-buttons-wrapper--space-right {
|
||||
margin-right: var(--digi--layout--gutter--s);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ReportLayoutComponent } from './report-layout.component';
|
||||
|
||||
describe('ReportLayoutComponent', () => {
|
||||
let component: ReportLayoutComponent;
|
||||
let fixture: ComponentFixture<ReportLayoutComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ ReportLayoutComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ReportLayoutComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,54 @@
|
||||
import { Component, ChangeDetectionStrategy, Input, EventEmitter, Output } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { ContactInformationCompact } from '@msfa-models/api/contact-information.response.model';
|
||||
import { Observable } from 'rxjs';
|
||||
import { switchMap } from 'rxjs/operators';
|
||||
import { DeltagareAvvikelseService } from '../../pages/deltagare-report/services/deltagare-avvikelse.service';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'msfa-report-layout',
|
||||
templateUrl: './report-layout.component.html',
|
||||
styleUrls: ['./report-layout.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class ReportLayoutComponent {
|
||||
@Input() reportTitle = 'Report Title';
|
||||
@Input() startDate: string;
|
||||
@Input() endDate: string;
|
||||
@Input() service: string;
|
||||
@Input() isPeriodDate = false;
|
||||
@Input() totalAmountOfSteps = 3;
|
||||
@Input() currentStep = 1;
|
||||
@Output() currentStepEvent = new EventEmitter<number>();
|
||||
@Output() sendRequestEvent = new EventEmitter<boolean>();
|
||||
|
||||
contactInformation$: Observable<ContactInformationCompact> = this.activatedRoute.params
|
||||
.pipe(
|
||||
switchMap(({ deltagareId }) => this.deltagareAvvikelseService.getContactInformationCompact$(deltagareId))
|
||||
);
|
||||
|
||||
constructor(
|
||||
private deltagareAvvikelseService: DeltagareAvvikelseService,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
) { }
|
||||
|
||||
nextStep():void {
|
||||
if(this.currentStep < this.totalAmountOfSteps) {
|
||||
this.currentStep++;
|
||||
this.currentStepEvent.emit(this.currentStep);
|
||||
}
|
||||
}
|
||||
|
||||
previousStep():void {
|
||||
if(this.currentStep > 1) {
|
||||
this.currentStep--;
|
||||
this.currentStepEvent.emit(this.currentStep);
|
||||
}
|
||||
}
|
||||
|
||||
sendRequest():void {
|
||||
this.sendRequestEvent.emit(true);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user