From 9fc6f40c455ffa0b4ef6bdba1a0030e075cf6e30 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Thu, 21 Oct 2021 14:21:58 +0200 Subject: [PATCH] feat(periodisk-redovisning): Added dialog when changing period to either keep/discard formstate. (TV-800) Squashed commit of the following: commit 6da28385733d69771335efd9cdf44c4b3e6257a7 Author: Erik Tiekstra Date: Thu Oct 21 13:01:29 2021 +0200 Updated texts commit 5d3f2ad73fe57251a2e078f31be7a20146321770 Author: Erik Tiekstra Date: Thu Oct 21 12:52:05 2021 +0200 Capitalized month commit 6f89951aa6e7811731dca07b12c56ca1b4846427 Author: Erik Tiekstra Date: Thu Oct 21 11:29:44 2021 +0200 Styling changes commit 9bc2ff2d929f6ac00671351069be81fc101e0f2e Author: Erik Tiekstra Date: Thu Oct 21 10:22:02 2021 +0200 Added dialog to confirm after change of period commit 8560cbe835b0a49945aa826b317dcfa82fbb3663 Author: Erik Tiekstra Date: Thu Oct 21 08:03:52 2021 +0200 Removed old periodisk redovisning component --- .../deltagare-tab-reports.component.html | 10 +- .../periodisk-redovisning-form.component.html | 1 - .../periodisk-redovisning-form.component.scss | 9 - ...riodisk-redovisning-form.component.spec.ts | 25 --- .../periodisk-redovisning-form.component.ts | 15 -- .../periodisk-redovisning-form.module.ts | 13 -- ...agare-periodisk-redovisning.component.html | 66 ------- ...agare-periodisk-redovisning.component.scss | 15 -- ...re-periodisk-redovisning.component.spec.ts | 23 --- ...ltagare-periodisk-redovisning.component.ts | 130 ------------- .../deltagare-periodisk-redovisning.module.ts | 25 --- .../periodisk-redovisning-form.component.html | 178 +++++++++++------- .../periodisk-redovisning-form.component.scss | 37 +++- .../periodisk-redovisning-form.component.ts | 72 ++++--- 14 files changed, 200 insertions(+), 419 deletions(-) delete mode 100644 apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/components/periodisk-redovisning-form/periodisk-redovisning-form.component.html delete mode 100644 apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/components/periodisk-redovisning-form/periodisk-redovisning-form.component.scss delete mode 100644 apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/components/periodisk-redovisning-form/periodisk-redovisning-form.component.spec.ts delete mode 100644 apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/components/periodisk-redovisning-form/periodisk-redovisning-form.component.ts delete mode 100644 apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/components/periodisk-redovisning-form/periodisk-redovisning-form.module.ts delete mode 100644 apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/deltagare-periodisk-redovisning.component.html delete mode 100644 apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/deltagare-periodisk-redovisning.component.scss delete mode 100644 apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/deltagare-periodisk-redovisning.component.spec.ts delete mode 100644 apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/deltagare-periodisk-redovisning.component.ts delete mode 100644 apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/deltagare-periodisk-redovisning.module.ts diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.html index 0d646d5..b516de9 100644 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.html +++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.html @@ -7,35 +7,35 @@
    • diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/components/periodisk-redovisning-form/periodisk-redovisning-form.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/components/periodisk-redovisning-form/periodisk-redovisning-form.component.html deleted file mode 100644 index aeaee93..0000000 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/components/periodisk-redovisning-form/periodisk-redovisning-form.component.html +++ /dev/null @@ -1 +0,0 @@ -Unused form coponent \ No newline at end of file diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/components/periodisk-redovisning-form/periodisk-redovisning-form.component.scss b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/components/periodisk-redovisning-form/periodisk-redovisning-form.component.scss deleted file mode 100644 index a6a3c76..0000000 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/components/periodisk-redovisning-form/periodisk-redovisning-form.component.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import 'apps/mina-sidor-fa/src/styles/variables/gutters'; - -.pr-form { - padding: $digi--layout--gutter--xl 0; - - &__space-top { - margin-top: $digi--layout--gutter--xl; - } -} diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/components/periodisk-redovisning-form/periodisk-redovisning-form.component.spec.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/components/periodisk-redovisning-form/periodisk-redovisning-form.component.spec.ts deleted file mode 100644 index 8604927..0000000 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/components/periodisk-redovisning-form/periodisk-redovisning-form.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { PeriodiskRedovisningFormComponent } from './periodisk-redovisning-form.component'; - -describe('PeriodiskRedovisningFormComponent', () => { - let component: PeriodiskRedovisningFormComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ PeriodiskRedovisningFormComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(PeriodiskRedovisningFormComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/components/periodisk-redovisning-form/periodisk-redovisning-form.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/components/periodisk-redovisning-form/periodisk-redovisning-form.component.ts deleted file mode 100644 index c0271ec..0000000 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/components/periodisk-redovisning-form/periodisk-redovisning-form.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; -import { FormGroup } from '@angular/forms'; - -@Component({ - selector: 'msfa-periodisk-redovisning-form', - templateUrl: './periodisk-redovisning-form.component.html', - styleUrls: ['./periodisk-redovisning-form.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class PeriodiskRedovisningFormComponent { - @Input() periodiskRedovisningFormGroup: FormGroup; - @Input() totalAmountOfSteps: number; - @Input() currentStep: number; - @Output() submitPRFormGroup = new EventEmitter(); -} diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/components/periodisk-redovisning-form/periodisk-redovisning-form.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/components/periodisk-redovisning-form/periodisk-redovisning-form.module.ts deleted file mode 100644 index a532c48..0000000 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/components/periodisk-redovisning-form/periodisk-redovisning-form.module.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; -import { PeriodiskRedovisningFormComponent } from './periodisk-redovisning-form.component'; - -@NgModule({ - schemas: [CUSTOM_ELEMENTS_SCHEMA], - declarations: [PeriodiskRedovisningFormComponent], - imports: [ - CommonModule, - ], - exports: [PeriodiskRedovisningFormComponent] -}) -export class PeriodiskRedovisningFormModule { } diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/deltagare-periodisk-redovisning.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/deltagare-periodisk-redovisning.component.html deleted file mode 100644 index cfc4f0c..0000000 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/deltagare-periodisk-redovisning.component.html +++ /dev/null @@ -1,66 +0,0 @@ - - -
    - -

    Har ni lämnat individuella förslag på arbeten till arbetssökande under perioden?

    - - - Ett val är obligatoriskt - - -

    Har ni, under perioden, tillhandahållit språkstöd?

    - - - Ett val är obligatoriskt - -     -
    -
    - - - Tillbaka - - - - - Nästa - - - - - Förhandsgranska - - - - - Skicka in - - -
    -
    -     -     diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/deltagare-periodisk-redovisning.component.scss b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/deltagare-periodisk-redovisning.component.scss deleted file mode 100644 index 8c30e11..0000000 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/deltagare-periodisk-redovisning.component.scss +++ /dev/null @@ -1,15 +0,0 @@ -@import 'apps/mina-sidor-fa/src/styles/variables/gutters'; - -.periodisk-redovisning { - &__step-buttons-wrapper--space-right { - margin-right: var(--digi--layout--gutter--s); - } - - &__space-top { - margin-top: $digi--layout--gutter--xl; - } - - &__step-buttons-wrapper { - padding-top: $digi--layout--gutter--xxl; - } -} diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/deltagare-periodisk-redovisning.component.spec.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/deltagare-periodisk-redovisning.component.spec.ts deleted file mode 100644 index a28be43..0000000 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/deltagare-periodisk-redovisning.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { DeltagarePeriodiskRedovisningComponent } from './deltagare-periodisk-redovisning.component'; - -describe('DeltagarePeriodiskRedovisningComponent', () => { - let component: DeltagarePeriodiskRedovisningComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [DeltagarePeriodiskRedovisningComponent], - }).compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(DeltagarePeriodiskRedovisningComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/deltagare-periodisk-redovisning.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/deltagare-periodisk-redovisning.component.ts deleted file mode 100644 index 094e4d4..0000000 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/deltagare-periodisk-redovisning.component.ts +++ /dev/null @@ -1,130 +0,0 @@ -import { RadiobuttonGroupDirection } from '@af/digi-ng/_form/form-radiobutton-group'; -import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms'; -import { Activity, SubActivity } from '@msfa-models/activity.model'; -import { RequiredValidator } from '@msfa-utils/validators/required.validator'; - -@Component({ - selector: 'msfa-deltagare-periodisk-redovisning', - templateUrl: './deltagare-periodisk-redovisning.component.html', - styleUrls: ['./deltagare-periodisk-redovisning.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class DeltagarePeriodiskRedovisningComponent { - radiobuttonGroupDirection = RadiobuttonGroupDirection; - totalAmountOfSteps = 3; - currentStep = 1; - moveToNextStep = false; - - periodiskRedovisningFormGroup: FormGroup; - submitted = false; - - readonly lamnatJobbForslagFormControlName = 'lamnatJobbForslag'; - readonly providedSprakStodFormControlName = 'providedSprakStod'; - readonly activitiesFormArrayName = 'activities'; - readonly datesForActivitiesFormArrayName = 'datesForActivities'; - readonly subActivitiesFormArrayName = 'subActivities'; - - get lamnatJobbForslagFormControl(): AbstractControl { - return this.periodiskRedovisningFormGroup.get(this.lamnatJobbForslagFormControlName); - } - - get providedSprakStodFormControl(): AbstractControl { - return this.periodiskRedovisningFormGroup.get(this.providedSprakStodFormControlName); - } - - get activitiesFormArray(): FormArray { - return this.periodiskRedovisningFormGroup.get(this.activitiesFormArrayName) as FormArray; - } - - initializePeriodiskRedovisningFormGroup(activitiesList: Activity[]): void { - this.periodiskRedovisningFormGroup = new FormGroup({ - lamnatJobbForslag: new FormControl(null, [RequiredValidator()]), - providedSprakStod: new FormControl(null, [RequiredValidator()]), - activities: new FormArray([]), - }); - this.getActivitesFormArray(activitiesList); - } - - getActivitesFormArray(activities: Activity[]): void { - activities.forEach(activity => { - const newActivity = [`activity${activity.id}`, 'datesForActivities', 'subActivities', 'comment']; - this.activitiesFormArray.push( - new FormGroup( - Object.fromEntries( - newActivity.map(formCtrlName => [formCtrlName, this.getActivtiesFormField(formCtrlName, activity)]) - ) - ) - ); - }); - } - - getActivtiesFormField(formCtrlName: string, activity: Activity): FormArray | FormControl { - if (formCtrlName === 'datesForActivities') { - return new FormArray([]); - } - - return new FormControl(null, []); - } - - addSelectedDatesToFormArray(datesList: string[]): FormArray { - // TODO: Använd denna metod när datumen valts i kalendern! - const formcontrolNamesList = ['date', 'hours', 'doneOnRemote']; - const datesForActivitiesFormArray = new FormArray([]); - for (let i = 0; i < datesList.length; i++) { - datesForActivitiesFormArray.push( - new FormGroup( - Object.fromEntries(formcontrolNamesList.map(formCtrlName => [formCtrlName, new FormControl(null, [])])) - ) - ); - } - return datesForActivitiesFormArray; - } - - addSubActivitesFormArray(subActivities: SubActivity[], activityId: number): FormArray { - // TODO: lägg till if-sats ex: if !subActivities etc. - if (!subActivities) { - return; - } - const subActivitiesList = subActivities.map(activity => [`activity${activity.id}`]); - const subActivitiesFormArray = new FormArray([]); - if (activityId === 188 || activityId === 162) { - subActivitiesList.forEach(activity => { - subActivitiesFormArray.push( - new FormGroup(Object.fromEntries(activity.map(formCtrlName => [formCtrlName, new FormControl(null, [])]))) - ); - }); - } - return subActivitiesFormArray; - } - - getActivityId(formCtrlName: string): number { - if (!formCtrlName.startsWith('activity')) { - return; - } - return Number(formCtrlName.replace('activity', '')); - } - - nextStep(): void { - this.submitted = true; - console.log('TESSSSST:::', this.periodiskRedovisningFormGroup.getRawValue()); - this.moveToNextStep = true; - if (this.currentStep === 1 && this.lamnatJobbForslagFormControl.valid && this.providedSprakStodFormControl.valid) { - this.moveToNextStep = false; - this.currentStep++; - } else if (this.periodiskRedovisningFormGroup.valid && this.currentStep === this.totalAmountOfSteps - 2) { - this.currentStep++; - } - } - - previousStep(): void { - this.moveToNextStep = false; - if (this.currentStep > 1) { - this.currentStep--; - } - } - - sendRequest(val: boolean): boolean { - return val; - } -} diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/deltagare-periodisk-redovisning.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/deltagare-periodisk-redovisning.module.ts deleted file mode 100644 index 5525896..0000000 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/deltagare-periodisk-redovisning/deltagare-periodisk-redovisning.module.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group'; -import { CommonModule } from '@angular/common'; -import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; -import { ReactiveFormsModule } from '@angular/forms'; -import { RouterModule } from '@angular/router'; -import { LayoutModule } from '@msfa-shared/components/layout/layout.module'; -import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module'; -import { PeriodiskRedovisningFormModule } from './components/periodisk-redovisning-form/periodisk-redovisning-form.module'; -import { DeltagarePeriodiskRedovisningComponent } from './deltagare-periodisk-redovisning.component'; - -@NgModule({ - schemas: [CUSTOM_ELEMENTS_SCHEMA], - declarations: [DeltagarePeriodiskRedovisningComponent], - imports: [ - CommonModule, - RouterModule.forChild([{ path: '', component: DeltagarePeriodiskRedovisningComponent }]), - LayoutModule, - ReactiveFormsModule, - ReportLayoutModule, - PeriodiskRedovisningFormModule, - DigiNgFormRadiobuttonGroupModule, - ], - exports: [DeltagarePeriodiskRedovisningComponent], -}) -export class DeltagarePeriodiskRedovisningModule {} diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.html index 1b7bd26..c66cb9f 100644 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.html +++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.html @@ -34,13 +34,16 @@
    @@ -48,19 +51,24 @@ [afRadiobuttonGroupDirection]="radiobuttonGroupDirection.HORIZONTAL" [afRadiobuttons]="[{label:'Ja', value: true}, {label:'Nej', value: false}]" [formControl]="hasOfferedLanguageSupportFormControl" + [afRequired]="true" + class="periodisk-redovisning-form__radio-buttons" + [ngClass]="{'periodisk-redovisning-form__radio-buttons--invalid': formControlIsInvalid(hasOfferedLanguageSupportFormControl)}" > - - Ett val är obligatoriskt - +
    + + Ett val är obligatoriskt + +
    @@ -68,63 +76,85 @@ [afRadiobuttonGroupDirection]="radiobuttonGroupDirection.HORIZONTAL" [afRadiobuttons]="[{label:'Ja', value: true}, {label:'Nej', value: false}]" [formControl]="hasOfferedJobFormControl" + class="periodisk-redovisning-form__radio-buttons" + [ngClass]="{'periodisk-redovisning-form__radio-buttons--invalid': formControlIsInvalid(hasOfferedJobFormControl)}" > - - Ett val är obligatoriskt - +
    + + Ett val är obligatoriskt + +
    + +
    +

    Aktiviteter från Gemensam planering

    +

    + Du kan endast välja de aktiviteter som planerats i tidigare inskickad Gemensam planering för deltagaren. + Om du vill redovisa en aktivitet som inte finns i listan, måste du först uppdatera den Gemensamma + planeringen. Sedan kan du redovisa aktiviteten i Periodisk redovisning. +

    +
    + -
    - - - - {{formErrors?.activitiesMismatch}} - - -
    -
    -
    +
    +
    -
    - - - - - {{errorText}} - - +
    + + {{formErrors?.activitiesMismatch}} +
    + + +
    + + +
    + + +
    + + + {{errorText}} + + +
    +
    +     +
    +
    @@ -174,23 +204,29 @@ -
    Har ni, under perioden, tillhandahållit språkstöd:
    +
    Har ni under perioden tillhandahållit språkstöd till deltagaren:
    {{submitData.hasOfferedLanguageSupport ? 'Ja' : 'Nej' }}
    -
    Har ni, under perioden, erbjudit arbete:
    +
    Har ni lämnat individuella förslag på lämpliga arbeten att söka till deltagaren:
    {{submitData.hasOfferedJob ? 'Ja' : 'Nej' }}
    Aktiviteter som utförts under perioden:
    - Deltagaren har inte deltagit i några aktiviteter denna period - - -
    - {{getActivityMetadata(activity.id).name}}: {{ activity.performedRemotely && - activity.performedPhysically ? 'På distans och på plats' : activity.performedRemotely ? 'På distans' : - 'På plats'}} +
    + Deltagaren har inte deltagit i några aktiviteter denna period +
    + +
    + + + {{getActivityMetadata(activity.id).name}}: {{ activity.performedRemotely && + activity.performedPhysically ? 'på distans och på plats' : activity.performedRemotely ? 'på distans' + : 'på plats'}} +
    -     +     {{error.message}}

     + +

    Vill du behålla de svar och aktiviteter du tidigare valt?

    +
    diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.scss b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.scss index 48d87e1..bd4c4dd 100644 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.scss +++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.scss @@ -24,15 +24,46 @@ gap: var(--digi--layout--gutter); } + &__activities { + display: flex; + flex-direction: column; + gap: var(--digi--layout--gutter--xs); + } + + &__radio-buttons { + &--invalid { + ::ng-deep .digi-ng-form-radiobutton__input { + border-color: var(--digi--ui--color--border--error); + background-color: var(--digi--ui--color--background--error); + box-shadow: 0 0 0 var(--digi--ui--border--width) var(--digi--ui--color--border--error); + } + } + } + + &__no-activities-has-been-conducted-checkbox, + &__activity, + &__activity-location { + display: flex; + flex-direction: column; + gap: var(--digi--layout--gutter--s); + } + &__no-activities-has-been-conducted-checkbox { margin-bottom: $digi--layout--gutter--l; } - &__activity-checkboxes { + &__activity-location { + margin-left: var(--digi--layout--gutter); margin-bottom: var(--digi--layout--gutter--s); } - &__activity-location-checkboxes { - margin-left: var(--digi--layout--gutter); + &__activity-item { + display: flex; + align-items: center; + gap: var(--digi--layout--gutter--s); + } + + &__activity-check { + color: var(--digi--ui--color--border--success); } } diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.ts index a041d74..181e4cb 100644 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.ts +++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.ts @@ -1,33 +1,33 @@ +import { RadiobuttonGroupDirection } from '@af/digi-ng/_form/form-radiobutton-group'; import { FormSelectItem } from '@af/digi-ng/_form/form-select'; import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms'; import { ActivatedRoute, Params } from '@angular/router'; -import { Avrop } from '@msfa-models/avrop.model'; -import { AvropPeriod } from '@msfa-models/avrop-period.model'; -import { formatDate } from '@msfa-utils/format-to-date.util'; -import { subMonths } from 'date-fns'; -import { BehaviorSubject, combineLatest, Observable } from 'rxjs'; -import { map, shareReplay, switchMap, take } from 'rxjs/operators'; -import { dateToPeriodId, extractAvropPeriods } from './extract-avrop-periods'; -import { PeriodiskRedovisningFormService } from './periodisk-redovisning-form.service'; -import { RadiobuttonGroupDirection } from '@af/digi-ng/_form/form-radiobutton-group'; -import { RequiredValidator } from '@msfa-validators/required.validator'; import { Activity } from '@msfa-models/activity.model'; -import { GemensamPlaneringApiService } from '@msfa-services/api/gemensam-planering-api.service'; import { PeriodiskRedovisningActivityRequest, PeriodiskRedovisningRequest, } from '@msfa-models/api/periodisk-redovisning.request.model'; +import { AvropPeriod } from '@msfa-models/avrop-period.model'; +import { Avrop } from '@msfa-models/avrop.model'; import { DateFormatOptions } from '@msfa-models/date-format-options.model'; +import { CustomError } from '@msfa-models/error/custom-error'; +import { GemensamPlaneringApiService } from '@msfa-services/api/gemensam-planering-api.service'; +import { capitalizeWords } from '@msfa-utils/capitalize-words.util'; +import { formatDate } from '@msfa-utils/format-to-date.util'; +import { RequiredValidator } from '@msfa-validators/required.validator'; +import { subMonths } from 'date-fns'; +import { BehaviorSubject, combineLatest, Observable } from 'rxjs'; +import { map, shareReplay, switchMap, take } from 'rxjs/operators'; +import { dateToPeriodId, extractAvropPeriods } from './extract-avrop-periods'; import { ActivityFormErrors, PeriodiskRedovisningFormData, PeriodiskRedovisningFormErrors, PeriodiskRedovisningFormKeys, } from './periodisk-redovisning-form.model'; +import { PeriodiskRedovisningFormService } from './periodisk-redovisning-form.service'; import { PeriodiskRedovisningValidator } from './periodisk-redovisning.validator'; -import { UnsubscribeDirective } from '@msfa-directives/unsubscribe.directive'; -import { CustomError } from '@msfa-models/error/custom-error'; @Component({ selector: 'msfa-periodisk-redovisning-form', @@ -35,7 +35,7 @@ import { CustomError } from '@msfa-models/error/custom-error'; styleUrls: ['./periodisk-redovisning-form.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class PeriodiskRedovisningFormComponent extends UnsubscribeDirective implements OnInit { +export class PeriodiskRedovisningFormComponent implements OnInit { readonly PERIOD_FORM_NAME: PeriodiskRedovisningFormKeys = 'period'; readonly HAS_OFFERED_LANGUAGE_SUPPORT_FORM_NAME: PeriodiskRedovisningFormKeys = 'hasOfferedLanguageSupport'; readonly HAS_OFFERED_JOB_FORM_NAME: PeriodiskRedovisningFormKeys = 'hasOfferedJob'; @@ -44,6 +44,7 @@ export class PeriodiskRedovisningFormComponent extends UnsubscribeDirective impl today = new Date(); shouldValidate$ = new BehaviorSubject(false); + changePeriodDialogIsOpen$ = new BehaviorSubject(false); confirmDialogIsOpen$ = new BehaviorSubject(false); submittedDate$ = new BehaviorSubject(null); submitIsLoading$ = new BehaviorSubject(false); @@ -88,7 +89,9 @@ export class PeriodiskRedovisningFormComponent extends UnsubscribeDirective impl periodsToFormselectItems(periods: AvropPeriod[]): FormSelectItem[] { return periods.map(period => ({ - name: `${formatDate(period.startDate, 'sv-SE', { month: 'long', year: 'numeric' } as DateFormatOptions)}`, + name: capitalizeWords( + formatDate(period.startDate, 'sv-SE', { month: 'long', year: 'numeric' } as DateFormatOptions) + ), value: period.periodId, })); } @@ -102,15 +105,7 @@ export class PeriodiskRedovisningFormComponent extends UnsubscribeDirective impl private activatedRoute: ActivatedRoute, // TODO. GemensamPlaneringApiService is used for fetching activities. Replace with own service once ready private gemensamPlaneringApiService: GemensamPlaneringApiService - ) { - super(); - - super.unsubscribeOnDestroy( - this.formGroup.valueChanges.subscribe(value => { - this.shouldValidate$.next(false); - }) - ); - } + ) {} get periodFormControl(): AbstractControl | undefined { return this.formGroup.get(this.PERIOD_FORM_NAME); @@ -229,7 +224,34 @@ export class PeriodiskRedovisningFormComponent extends UnsubscribeDirective impl return this.formControlIsInvalid(activityFormGroup) && !!errors.locationCheckboxes; } - getActivityMetadata(activityId: number) { + getActivityMetadata(activityId: number): Activity { return this.activitiesFormArrayMetadata.find(activity => activity.id === activityId); } + + openChangePeriodDialogIfValuesExist(): void { + const { activities, hasOfferedJob, hasOfferedLanguageSupport, noActivitiesHasBeenConducted } = this.formGroup + .value as PeriodiskRedovisningFormData; + + if ( + activities.filter(({ isSelected }) => !!isSelected).length || + hasOfferedJob !== null || + hasOfferedLanguageSupport !== null || + noActivitiesHasBeenConducted + ) { + this.changePeriodDialogIsOpen$.next(true); + } + } + + closePeriodDialogAndResetForm(): void { + this.hasOfferedJobFormControl.reset(); + this.hasOfferedLanguageSupportFormControl.reset(); + this.noActivitiesHasBeenConductedFormControl.reset(); + this.activitiesFormArray.reset(); + this.shouldValidate$.next(false); + this.changePeriodDialogIsOpen$.next(false); + } + + closePeriodDialogAndKeepForm(): void { + this.changePeriodDialogIsOpen$.next(false); + } }