From 60670e2d4e558e14aed59b0e48e5988a5f9611f1 Mon Sep 17 00:00:00 2001 From: Aden Hassan Date: Tue, 21 Sep 2021 14:42:29 +0200 Subject: [PATCH] (reportsLayout): added basic layout structure for all reports Squashed commit of the following: commit fc6551a1101f448544bccb62c6272d105dd1e0a4 Merge: e3f7204 2dd9d3d Author: Aden Hassan Date: Tue Sep 21 13:32:01 2021 +0200 Merge branch 'develop' into feature/TV-634-reports-layout commit e3f72043c68c326b7f1adc8bd85f993a4b2aafff Author: Aden Hassan Date: Tue Sep 21 12:46:00 2021 +0200 minor adjustments according to feedback commit 6ef20a3b5074bcf06a84a7de4fded08cbe1e0026 Author: Aden Hassan Date: Mon Sep 20 21:55:38 2021 +0200 added minor changes to default steps (TV-634) commit 4835e8f48da04432505cc5225cc57a1763fcdd60 Author: Aden Hassan Date: Mon Sep 20 21:47:23 2021 +0200 added output-event to send event from skicka in button (TV-634) commit f01a87dfe099514529ed641c85007986f98b9ea8 Merge: 1a4bdfc e120e50 Author: Aden Hassan Date: Mon Sep 20 19:49:26 2021 +0200 Merge branch 'develop' into feature/TV-634-reports-layout commit 1a4bdfc1684a36a168371d74d90ea2d41060af0e Author: Aden Hassan Date: Mon Sep 20 19:48:21 2021 +0200 created basic layout modul for all reports (TV-634 and TV-624) --- .../report-layout/report-layout-module.ts | 14 +++++ .../report-layout.component.html | 56 +++++++++++++++++++ .../report-layout.component.scss | 31 ++++++++++ .../report-layout.component.spec.ts | 25 +++++++++ .../report-layout/report-layout.component.ts | 54 ++++++++++++++++++ 5 files changed, 180 insertions(+) create mode 100644 apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout-module.ts create mode 100644 apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.html create mode 100644 apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.scss create mode 100644 apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.spec.ts create mode 100644 apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.ts diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout-module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout-module.ts new file mode 100644 index 0000000..5d34f04 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout-module.ts @@ -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 {} \ No newline at end of file diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.html new file mode 100644 index 0000000..d43c72c --- /dev/null +++ b/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.html @@ -0,0 +1,56 @@ +
+ +
+

{{ reportTitle }}

+

{{contactInformation.fornamn + ' ' + contactInformation.efternamn}}

+
+ Personnummer: + +
+ Tjänst: KROM + + Startdatum: {{startDate}} + Slutdatum: {{endDate}} + + Avser period: {{startDate}} - {{endDate}} +
+ + + +
+ +
+ +
+ + + Tillbaka + + + + + Nästa + + + + + Förhandsgranska + + + + + Skicka in + + +
+ +
\ No newline at end of file diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.scss b/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.scss new file mode 100644 index 0000000..890b99c --- /dev/null +++ b/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.scss @@ -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); + } +} diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.spec.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.spec.ts new file mode 100644 index 0000000..b2809a2 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.spec.ts @@ -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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ReportLayoutComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ReportLayoutComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.ts new file mode 100644 index 0000000..5e93a2a --- /dev/null +++ b/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.ts @@ -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(); + @Output() sendRequestEvent = new EventEmitter(); + + contactInformation$: Observable = 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); + } + +}