+
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);
+ }
}