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 b72da77..f7b3ca9 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 @@ -137,26 +137,47 @@ formControlName="isSelected" [afLabel]="activitiesFormArrayMetadata[i].name" > -
- - -
- +
+
+ +
- {{errorText}} + {{activityFormGroup.errors.hours}} - +
+
+ +
+ + +
+ + {{activityFormGroup.errors.locationCheckboxes}} + +
@@ -208,11 +229,7 @@ class="msfa__digi-icon periodisk-redovisning-form__activity-check" aria-hidden="true" > - - {{getActivityMetadata(activity.id).name}}: {{ activity.performedRemotely && - activity.performedPhysically ? 'på distans och på plats' : activity.performedRemotely ? 'på - distans' : 'på plats'}} - + {{getActivityInfoAsString(activity)}} 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 bd4c4dd..1e0442f 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 @@ -42,18 +42,27 @@ &__no-activities-has-been-conducted-checkbox, &__activity, - &__activity-location { + &__activity-group { display: flex; flex-direction: column; gap: var(--digi--layout--gutter--s); } + &__activity-hours { + ::ng-deep .digi-form-input__content { + max-width: 10rem; + } + } + &__no-activities-has-been-conducted-checkbox { margin-bottom: $digi--layout--gutter--l; } - &__activity-location { - margin-left: var(--digi--layout--gutter); + &__activity-details { + display: flex; + flex-direction: column; + gap: var(--digi--layout--gutter); + margin-left: 1.875rem; margin-bottom: var(--digi--layout--gutter--s); } 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 7b60c2e..6f88a3a 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 @@ -181,6 +181,7 @@ export class PeriodiskRedovisningFormComponent implements OnInit { isSelected: new FormControl(), performedRemotely: new FormControl(), performedPhysically: new FormControl(), + hours: new FormControl(), }, PeriodiskRedovisningValidator.activityIsValid() ) @@ -200,14 +201,20 @@ export class PeriodiskRedovisningFormComponent implements OnInit { ): PeriodiskRedovisningRequest { const { period, hasOfferedJob, hasOfferedLanguageSupport } = formData; const activities: PeriodiskRedovisningActivityRequest[] = formData.activities - .map(({ performedPhysically, performedRemotely, isSelected }, index) => ({ + .map(({ performedPhysically, performedRemotely, isSelected, hours }, index) => ({ id: this.activitiesFormArrayMetadata[index].id, performedPhysically: performedPhysically ?? false, performedRemotely: performedRemotely ?? false, + hours: +hours, isSelected, })) .filter(activity => activity.isSelected) - .map(({ id, performedPhysically, performedRemotely }) => ({ id, performedPhysically, performedRemotely })); + .map(({ id, performedPhysically, performedRemotely, hours }) => ({ + id, + performedPhysically, + performedRemotely, + hours, + })); return { genomforandeReferens, period, @@ -226,10 +233,27 @@ export class PeriodiskRedovisningFormComponent implements OnInit { return this.formControlIsInvalid(activityFormGroup) && !!errors.locationCheckboxes; } + activityHoursIsInvalid(activityFormGroup: AbstractControl): boolean { + const errors = activityFormGroup.errors as ActivityFormErrors; + return this.formControlIsInvalid(activityFormGroup) && !!errors.hours; + } + getActivityMetadata(activityId: number): Activity { return this.activitiesFormArrayMetadata.find(activity => activity.id === activityId); } + getActivityInfoAsString(activity: PeriodiskRedovisningActivityRequest): string { + const { name } = this.getActivityMetadata(activity.id); + const hours = activity.hours === 1 ? '1 timme' : `${activity.hours} timmar`; + const location = + activity.performedRemotely && activity.performedPhysically + ? 'på distans och på plats' + : activity.performedRemotely + ? 'på distans' + : 'på plats'; + return `${name}: ${hours} ${location}`; + } + openChangePeriodDialogIfValuesExist(): void { const { activities, hasOfferedJob, hasOfferedLanguageSupport, noActivitiesHasBeenConducted } = this.formGroup .value as PeriodiskRedovisningFormData; diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.model.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.model.ts index 167f115..61a24d2 100644 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.model.ts +++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.model.ts @@ -2,6 +2,7 @@ export interface PeriodiskRedovisningFormActivity { isSelected: boolean; performedRemotely: boolean; performedPhysically: boolean; + hours: string; } export interface PeriodiskRedovisningFormData { @@ -20,4 +21,5 @@ export interface PeriodiskRedovisningFormErrors { export interface ActivityFormErrors { locationCheckboxes?: string; + hours?: string; } diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning.validator.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning.validator.ts index e67f8ff..92f26ae 100644 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning.validator.ts +++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning.validator.ts @@ -36,8 +36,10 @@ export class PeriodiskRedovisningValidator { static activityIsValid(): ValidatorFn { return (c: AbstractControl): ActivityFormErrors => { let errors: ActivityFormErrors; + const controlValue = c.value as PeriodiskRedovisningFormActivity; + + const { performedRemotely, performedPhysically, isSelected, hours } = controlValue; - const { performedRemotely, performedPhysically, isSelected } = c.value as PeriodiskRedovisningFormActivity; if (isSelected && !performedPhysically && !performedRemotely) { errors = { ...errors, @@ -45,6 +47,15 @@ export class PeriodiskRedovisningValidator { }; } + const isValidHours = hours?.length > 0 && Number.isInteger(+hours) && +hours >= 0 && +hours <= 200; + + if (isSelected && !isValidHours) { + errors = { + ...errors, + hours: 'Antal timmar måste vara ett heltal mellan 0 och 200', + }; + } + return errors; }; } diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.html index 2b61e06..d75a5d1 100644 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.html +++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.html @@ -20,8 +20,7 @@ class="msfa__digi-icon periodisk-redovisning-view__activity-check" aria-hidden="true" > - {{activity.name}}: {{ activity.performedRemotely && activity.performedPhysically ? 'På distans och på - plats' : activity.performedRemotely ? 'På distans' : 'På plats'}} + {{getActivityInfoAsString(activity)}} diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.ts index ce26b0d..089e4ae 100644 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.ts +++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.ts @@ -2,10 +2,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Params } from '@msfa-models/api/params.model'; import { Avrop } from '@msfa-models/avrop.model'; +import { PeriodiskRedovisning, PeriodiskRedovisningActivity } from '@msfa-models/periodisk-redovisning.model'; import { Observable } from 'rxjs'; import { map, shareReplay, switchMap } from 'rxjs/operators'; import { PeriodiskRedovisningViewService } from './periodisk-redovisning-view.service'; -import { PeriodiskRedovisning } from '@msfa-models/periodisk-redovisning.model'; @Component({ selector: 'msfa-periodisk-redovisning-view', @@ -34,6 +34,17 @@ export class PeriodiskRedovisningViewComponent { shareReplay(1) ); + getActivityInfoAsString(activity: PeriodiskRedovisningActivity): string { + const hours = activity.hours === 1 ? '1 timme' : `${activity.hours} timmar`; + const location = + activity.performedRemotely && activity.performedPhysically + ? 'på distans och på plats' + : activity.performedRemotely + ? 'på distans' + : 'på plats'; + return `${activity.name}: ${hours} ${location}`; + } + constructor( private periodiskRedovisningViewService: PeriodiskRedovisningViewService, private activatedRoute: ActivatedRoute diff --git a/apps/mina-sidor-fa/src/app/shared/models/api/periodisk-redovisning.request.model.ts b/apps/mina-sidor-fa/src/app/shared/models/api/periodisk-redovisning.request.model.ts index 1cda0f3..26cc0a3 100644 --- a/apps/mina-sidor-fa/src/app/shared/models/api/periodisk-redovisning.request.model.ts +++ b/apps/mina-sidor-fa/src/app/shared/models/api/periodisk-redovisning.request.model.ts @@ -2,6 +2,7 @@ export interface PeriodiskRedovisningActivityRequest { id: number; performedRemotely: boolean; performedPhysically: boolean; + hours: number; } export interface PeriodiskRedovisningRequest { diff --git a/apps/mina-sidor-fa/src/app/shared/models/api/periodisk-redovisning.response.model.ts b/apps/mina-sidor-fa/src/app/shared/models/api/periodisk-redovisning.response.model.ts index 36d0206..485eeb9 100644 --- a/apps/mina-sidor-fa/src/app/shared/models/api/periodisk-redovisning.response.model.ts +++ b/apps/mina-sidor-fa/src/app/shared/models/api/periodisk-redovisning.response.model.ts @@ -3,6 +3,7 @@ export interface PeriodiskRedovisningActivityResponse { name: string; performedRemotely: boolean; performedPhysically: boolean; + hours: number; } export interface PeriodiskRedovisningResponse { @@ -25,18 +26,21 @@ export function mockOnePeriodiskRedovisningResponse(): PeriodiskRedovisningRespo name: 'Aktivitet 1', performedRemotely: false, performedPhysically: true, + hours: 25, }, { id: 19, name: 'Aktivitet 2', performedRemotely: true, performedPhysically: false, + hours: 3, }, { id: 31, name: 'Aktivitet 3', performedRemotely: true, performedPhysically: true, + hours: 2, }, ], }; diff --git a/apps/mina-sidor-fa/src/app/shared/models/periodisk-redovisning.model.ts b/apps/mina-sidor-fa/src/app/shared/models/periodisk-redovisning.model.ts index 17e7b14..afae581 100644 --- a/apps/mina-sidor-fa/src/app/shared/models/periodisk-redovisning.model.ts +++ b/apps/mina-sidor-fa/src/app/shared/models/periodisk-redovisning.model.ts @@ -5,6 +5,7 @@ export interface PeriodiskRedovisningActivity { name: string; performedRemotely: boolean; performedPhysically: boolean; + hours: number; } export interface PeriodiskRedovisning {