arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed issues with form validation messages and some styling fixes

Browse Source
This commit is contained in:
Erik Tiekstra
2021-10-11 12:07:23 +02:00
parent 8bcd591a08
commit 0e766ccad2
18 changed files with 214 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.component.html
View File

@@ -30,7 +30,7 @@
afDescription="Fältet accepterar kommaseparerade e-postadresser för att skicka inbjudningar till flera e-postadresser samtidigt."
[afRequired]="true"
[afDisableValidStyle]="true"
[afInvalidMessage]="emailsControl.errors?.message || 'Ogiltig e-postadress'"
[afInvalidMessage]="emailsControl.errors?.required || emailsControl.errors?.invalid || 'Ogiltig e-postadress'"
[afInvalid]="emailsControl.invalid && emailsControl.dirty"
afLabel="E-postadresser"
></digi-ng-form-textarea>

49
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.ts
View File

@@ -1,9 +1,5 @@
import { FormSelectItem } from '@af/digi-ng/_form/form-select';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { ReportsData } from '@msfa-models/report.model';
import { RequiredValidator } from '@msfa-utils/validators/required.validator';
@Component({
selector: 'msfa-deltagare-tab-reports',
@@ -13,53 +9,8 @@ import { RequiredValidator } from '@msfa-utils/validators/required.validator';
})
export class DeltagareTabReportsComponent {
@Input() reportsData: ReportsData;
@Input() genomforandeReferens: number;
@Output() reportsPaginated = new EventEmitter<number>();
readonly reportsFormControlName = 'reports';
reportPickerFormGroup: FormGroup = this.formBuilder.group({
reports: this.formBuilder.control('', [RequiredValidator('Rapporttyp är obligatoriskt')]),
});
selectableReportTypes: Array<FormSelectItem> = [
{ name: 'Avvikelse', value: 'avvikelse' },
{ name: 'Gemensam Planering', value: 'planering' },
// { name: 'Signal om arbete eller studier', value: 'signal' },
];
constructor(private formBuilder: FormBuilder, private router: Router) {}
get reportsFormControl(): AbstractControl | null {
return this.reportPickerFormGroup?.get(this.reportsFormControlName);
}
onFormSubmitted(event: Event, reportType: string): void {
event.preventDefault();
this.reportsFormControl.markAsTouched();
if (this.reportsFormControl.invalid) {
return;
}
switch (reportType) {
case 'planering':
void this.router.navigateByUrl(`/deltagare/${this.genomforandeReferens}/gemensam-planering`);
break;
case 'avvikelse':
void this.router.navigateByUrl(`/deltagare/${this.genomforandeReferens}/avvikelserapport`);
break;
case 'signal':
void this.router.navigate([`/deltagare/${this.genomforandeReferens}/signal`]);
break;
default:
return;
}
if (!this.selectableReportTypes || this.reportPickerFormGroup.invalid) {
return;
}
}
emitNewPage(page: number): void {
this.reportsPaginated.emit(page);
}

1
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.component.html
View File

@@ -34,7 +34,6 @@
<ng-container *ngIf="activeTab === '1'">
<msfa-deltagare-tab-reports
[reportsData]="reportsData$ | async"
[genomforandeReferens]="currentGenomforandeReferens$ | async"
(reportsPaginated)="setNewPage($event)"
></msfa-deltagare-tab-reports>
</ng-container>

255
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-avvikelserapport/deltagare-avvikelserapport.component.html
View File

@@ -1,142 +1,147 @@
<msfa-layout>
<msfa-report-layout
*ngIf="avrop$ | async as avrop; else skeletonRef"
[avrop]="avrop$ | async"
description="Här rapporterar du deltagarens avvikelser. Exempelvis kan du rapportera om tjänsten inte fungerar för deltagaren eller om deltagaren misskött sig under tjänsten."
reportSubTitle="Skapa rapport"
reportTitle="Avvikelserapport (avvikelse)"
*ngIf="avrop$ | async as avrop; else skeletonRef"
>
<div *ngIf="submittedDate$ | async as submittedDate; else formRef" class="deltagare-avvikelse__confirmation">
<digi-notification-alert
af-heading="Allt gick bra"
af-heading-level="h3"
af-variation="success"
class="deltagare-avvikelse__alert"
>
<p>
Avvikelserapport för deltagare {{avrop.fullName}} är nu inskickad till Arbetsförmedlingen och inväntar
godkännande.
</p>
<dl>
<dt>Datum</dt>
<dd>{{submittedDate | date:'longDate'}} kl {{submittedDate | date:'shortTime'}}</dd>
</dl>
</digi-notification-alert>
<msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
</div>
<div class="deltagare-avvikelse">
<div *ngIf="submittedDate$ | async as submittedDate; else formRef" class="deltagare-avvikelse__confirmation">
<digi-notification-alert
af-heading="Allt gick bra"
af-heading-level="h3"
af-variation="success"
class="deltagare-avvikelse__alert"
>
<p>
Avvikelserapport för deltagare {{avrop.fullName}} är nu inskickad till Arbetsförmedlingen och inväntar
godkännande.
</p>
<dl>
<dt>Datum</dt>
<dd>{{submittedDate | date:'longDate'}} kl {{submittedDate | date:'shortTime'}}</dd>
</dl>
</digi-notification-alert>
<msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
</div>
<ng-template #formRef>
<form [formGroup]="avvikelseFormGroup" (ngSubmit)="openConfirmDialog()">
<div class="orsaks-form__content">
<digi-ng-form-select
*ngIf="reasonsAsNgDigiFormSelectItems$ | async; let reason; else loadingRef"
[formControlName]="reasonFormName"
[afLabel]=" 'Orsak till avvikelse'"
[afPlaceholder]="'Välj orsak till avvikelse'"
[afSelectItems]="reason"
[afDisableValidStyle]="true"
[afInvalid]="formControlIsInvalid(reasonFormControl)"
></digi-ng-form-select>
<digi-form-validation-message *ngIf="formControlIsInvalid(reasonFormControl)" af-variation="error"
>{{reasonFormControl.errors?.message}}
</digi-form-validation-message>
</div>
<div [formArrayName]="questionsFormName">
<ng-container *ngIf="questionsForChosenReason$ | async; let questions">
<div *ngFor="let question of questionsFormArray.controls; let i=index">
<div class="fragor-form__content">
<digi-ng-form-textarea
[formControlName]="i"
[afLabel]="questions[i]?.name"
[afDisableValidStyle]="true"
[afRequired]="questionIsRequired(questions[i])"
[afMaxLength]="2000"
[afInvalid]="formControlIsInvalid(question)"
></digi-ng-form-textarea>
<ng-template #formRef>
<form class="deltagare-avvikelse__form" [formGroup]="avvikelseFormGroup" (ngSubmit)="openConfirmDialog()">
<div class="deltagare-avvikelse__form-item">
<digi-ng-form-select
*ngIf="reasonsAsNgDigiFormSelectItems$ | async; let reason; else loadingRef"
[formControlName]="reasonFormName"
afLabel="Orsak till avvikelse"
afPlaceholder="Välj orsak till avvikelse"
[afSelectItems]="reason"
[afRequired]="true"
[afAnnounceIfOptional]="true"
[afDisableValidStyle]="true"
[afInvalid]="formControlIsInvalid(reasonFormControl)"
></digi-ng-form-select>
<div aria-atomic="true" role="alert">
<digi-form-validation-message *ngIf="formControlIsInvalid(reasonFormControl)" af-variation="error"
>{{reasonFormControl.errors?.required}}
</digi-form-validation-message>
</div>
</div>
<div
class="deltagare-avvikelse__form-item deltagare-avvikelse__textareas"
[formArrayName]="questionsFormName"
*ngIf="questionsForChosenReason$ | async; let questions"
>
<div
class="deltagare-avvikelse__form-item"
*ngFor="let question of questionsFormArray.controls; let i=index"
>
<digi-ng-form-textarea
[formControlName]="i"
[afLabel]="questions[i]?.name"
[afDisableValidStyle]="true"
[afRequired]="questionIsRequired(questions[i])"
[afAnnounceIfOptional]="true"
[afMaxLength]="2000"
[afInvalid]="formControlIsInvalid(question)"
></digi-ng-form-textarea>
<div aria-atomic="true" role="alert">
<digi-form-validation-message *ngIf="formControlIsInvalid(question)" af-variation="error"
>{{question.errors?.message}}
>{{question.errors?.required}}
</digi-form-validation-message>
</div>
</div>
</ng-container>
</div>
</div>
<ng-container *ngIf="chosenReasonId$ | async">
<digi-ng-form-datepicker
[afDisableValidStyle]="true"
[afMinDate]="minDate(avrop)"
[afMaxDate]="maxDate"
[afInvalid]="formControlIsInvalid(avvikelseDateFormControl)"
[afLabel]="'Välj dag för avvikelse'"
[formControlName]="reportingDateFormName"
></digi-ng-form-datepicker>
<div class="deltagare-avvikelse__form-item" *ngIf="chosenReasonId$ | async">
<digi-ng-form-datepicker
[afDisableValidStyle]="true"
[afMinDate]="minDate(avrop)"
[afMaxDate]="maxDate"
[afInvalid]="formControlIsInvalid(avvikelseDateFormControl)"
[afValidationMessages]="{required: 'Datum är obligatoriskt'}"
[afAnnounceIfOptional]="true"
[afRequired]="true"
[afLabel]="'Välj dag för avvikelse'"
[formControlName]="reportingDateFormName"
></digi-ng-form-datepicker>
</div>
<!-- NOTE: Other errors (such as formatting) are captured and displayed within digi-ng-form-datepicker -->
<digi-form-validation-message
*ngIf="avvikelseDateFormControl?.errors?.type === 'required'"
af-variation="error"
>{{avvikelseDateFormControl.errors?.message}}
</digi-form-validation-message>
</ng-container>
<div class="deltagare-avvikelse__cta-wrapper">
<digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button>
<msfa-back-link [showIcon]="false" [asButton]="true" route="../">
<span>Avbryt</span>
<span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>
</msfa-back-link>
</div>
</form>
</ng-template>
<digi-ng-dialog
[afActive]="confirmDialogIsOpen$ | async"
(afOnPrimaryClick)="submitAndCloseConfirmDialog()"
(afOnInactive)="cancelConfirmDialog()"
afHeadingLevel="h2"
afPrimaryButtonText="Skicka in"
afSecondaryButtonText="Avbryt"
(afOnSecondaryClick)="cancelConfirmDialog()"
afHeading="Vill du skicka in Avvikelserapport (avvikelse)"
afAriaLabel="Förhandsgranska och skicka in Avvikelserapport (avvikelse)"
id="confirmAvvikelserapport"
>
<dl>
<dt>Namn</dt>
<dd>{{avrop.fullName}}</dd>
<dt>Personnummer</dt>
<dd>
<msfa-hide-text
symbols="********-****"
[changingText]="avrop.ssn"
ariaLabelType="Personnummer"
></msfa-hide-text>
</dd>
<dt>Tjänst</dt>
<dd>{{avrop.tjanst}}</dd>
<dt>Startdatum</dt>
<dd>
<digi-typography-time [afDateTime]="avrop.startDate"></digi-typography-time>
</dd>
<dt>Slutdatum</dt>
<dd>
<digi-typography-time [afDateTime]="avrop.endDate"></digi-typography-time>
</dd>
<dt>Orsak till avvikelse:</dt>
<dd>{{(chosenReason$ | async)?.name }}</dd>
<ng-container *ngIf="avvikelseSubmitData$ | async; let avvikelseSubmitData; else loadingRef">
<ng-container *ngFor="let question of avvikelseSubmitData.avvikelseAlternativ.frageformular">
<dt>{{getCurrentQuestionFromId(question.fraga).name}}</dt>
<dd>{{question.svar.length === 0 ? 'Inget svar' : question.svar }}</dd>
</ng-container>
<dt>Dag för avvikelse:</dt>
<dd>{{avvikelseSubmitData.avvikelseAlternativ.rapporteringsdatum }}</dd>
</ng-container>
</dl>
<msfa-loader *ngIf="submitIsLoading$ | async"></msfa-loader>
</digi-ng-dialog>
<div class="deltagare-avvikelse__cta-wrapper">
<digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button>
<msfa-back-link [showIcon]="false" [asButton]="true" route="../">
<span>Avbryt</span>
<span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>
</msfa-back-link>
</div>
</form>
<digi-ng-dialog
[afActive]="confirmDialogIsOpen$ | async"
(afOnPrimaryClick)="submitAndCloseConfirmDialog()"
(afOnInactive)="cancelConfirmDialog()"
afHeadingLevel="h2"
afPrimaryButtonText="Skicka in"
afSecondaryButtonText="Avbryt"
(afOnSecondaryClick)="cancelConfirmDialog()"
afHeading="Vill du skicka in Avvikelserapport (avvikelse)"
afAriaLabel="Förhandsgranska och skicka in Avvikelserapport (avvikelse)"
id="confirmAvvikelserapport"
>
<msfa-loader *ngIf="submitIsLoading$ | async" type="absolute"></msfa-loader>
<dl>
<dt>Namn</dt>
<dd>{{avrop.fullName}}</dd>
<dt>Personnummer</dt>
<dd>
<msfa-hide-text
symbols="********-****"
[changingText]="avrop.ssn"
ariaLabelType="Personnummer"
></msfa-hide-text>
</dd>
<dt>Tjänst</dt>
<dd>{{avrop.tjanst}}</dd>
<dt>Startdatum</dt>
<dd>
<digi-typography-time [afDateTime]="avrop.startDate"></digi-typography-time>
</dd>
<dt>Slutdatum</dt>
<dd>
<digi-typography-time [afDateTime]="avrop.endDate"></digi-typography-time>
</dd>
<dt>Orsak till avvikelse:</dt>
<dd>{{(chosenReason$ | async)?.name }}</dd>
<ng-container *ngIf="avvikelseSubmitData$ | async; let avvikelseSubmitData; else loadingRef">
<ng-container *ngFor="let question of avvikelseSubmitData.avvikelseAlternativ.frageformular">
<dt>{{getCurrentQuestionFromId(question.fraga).name}}</dt>
<dd>{{question.svar.length === 0 ? 'Inget svar' : question.svar }}</dd>
</ng-container>
<dt>Dag för avvikelse:</dt>
<dd>{{avvikelseSubmitData.avvikelseAlternativ.rapporteringsdatum }}</dd>
</ng-container>
</dl>
</digi-ng-dialog>
</ng-template>
</div>
</msfa-report-layout>
</msfa-layout>
<ng-template #skeletonRef>

49
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-avvikelserapport/deltagare-avvikelserapport.component.scss
View File

@@ -1,61 +1,18 @@
@import 'variables/gutters';
.deltagare-avvikelse {
max-width: var(--digi--typography--text--max-width);
&__confirmation,
&__textareas,
&__form {
display: flex;
flex-direction: column;
gap: $digi--layout--gutter--l;
}
&__deltagare,
&__alternative,
&__description,
&__datepicker,
&__dayOrPartOfDay {
max-width: var(--digi--typography--text--max-width);
margin-bottom: $digi--layout--gutter--xl;
span {
font-weight: var(--digi--typography--font-weight--semibold);
}
p {
margin: var(--digi--layout--gutter--s) 0 0;
}
}
&__alternative-heading {
font-size: var(--digi--typography--font-size--h3);
}
&__step-buttons-wrapper--space-right {
margin-right: var(--digi--layout--gutter--s);
}
&__alert {
max-width: var(--digi--typography--text--max-width);
}
&__cta-wrapper {
display: flex;
gap: var(--digi--layout--gutter);
}
}
.fragor-form {
&__content {
max-width: var(--digi--typography--text--max-width);
margin-bottom: $digi--layout--gutter--xl;
}
}
.orsaks-form {
&__content {
max-width: var(--digi--typography--text--max-width);
margin-bottom: $digi--layout--gutter--xl;
}
}

25
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-gemensam-planering/deltagare-gemensam-planering.component.html
View File

@@ -39,7 +39,6 @@
(ngSubmit)="openConfirmDialog()"
id="gemensam-planering-form"
>
<msfa-loader *ngIf="submitLoading$ | async" type="absolute"></msfa-loader>
<digi-form-fieldset
af-legend="Deltar arbetssökande på distans?"
af-name="distance"
@@ -70,9 +69,7 @@
></digi-form-checkbox>
</li>
</ul>
<digi-form-validation-message
*ngIf="shouldValidate && gpFormGroup.errors?.activityIds"
af-variation="error"
<digi-form-validation-message *ngIf="formControlIsInvalid('activityIds')" af-variation="error"
>{{gpFormGroup.errors.activityIds}}</digi-form-validation-message
>
</ng-container>
@@ -97,13 +94,19 @@
</div>
</footer>
</form>
<msfa-confirm-dialog
[dialogOpen]="confirmDialogOpen"
dialogTitle="Vill du skicka in Gemensam planering?"
ariaLabel="Förhandsgranska och skicka in Gemensam planering"
primaryButtonText="Skicka in"
(confirmDialogChanged)="closeConfirmDialogAndProceed($event, genomforandeReferens)"
<digi-ng-dialog
[afActive]="confirmDialogOpen$ | async"
(afOnPrimaryClick)="submitAndCloseConfirmDialog(genomforandeReferens)"
(afOnInactive)="cancelConfirmDialog()"
afHeadingLevel="h2"
afPrimaryButtonText="Skicka in"
afSecondaryButtonText="Avbryt"
(afOnSecondaryClick)="cancelConfirmDialog()"
afHeading="Vill du skicka in Gemensam planering"
afAriaLabel="Förhandsgranska och skicka in Gemensam planering"
id="confirm-gemensam-planering"
>
<msfa-loader *ngIf="submitLoading$ | async" type="absolute"></msfa-loader>
<dl>
<dt>Namn</dt>
<dd>{{avrop.fullName}}</dd>
@@ -140,7 +143,7 @@
</ul>
</dd>
</dl>
</msfa-confirm-dialog>
</digi-ng-dialog>
</ng-template>
</ng-template>
</div>

54
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-gemensam-planering/deltagare-gemensam-planering.component.ts
View File

@@ -2,7 +2,6 @@ import { RadiobuttonGroupDirection, RadiobuttonModel } from '@af/digi-ng/_form/f
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormArray, FormControl, FormGroup } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { ConfirmDialog } from '@msfa-enums/confirm-dialog.enum';
import { ErrorType } from '@msfa-enums/error-type.enum';
import { Activity } from '@msfa-models/activity.model';
import { Avrop } from '@msfa-models/avrop.model';
@@ -24,16 +23,13 @@ import { GemensamPlaneringValidator } from './gemensam-planering.validator';
})
export class DeltagareGemensamPlaneringComponent {
obligatoryActivityIds = [165, 188];
shouldValidate = false;
shouldValidate$ = new BehaviorSubject<boolean>(false);
RadiobuttonGroupDirection = RadiobuttonGroupDirection;
confirmDialogOpen = false;
confirmDialogOpen$ = new BehaviorSubject<boolean>(false);
today = new Date();
private _error$ = new BehaviorSubject<CustomError>(null);
error$: Observable<CustomError> = this._error$.asObservable();
private _lastSubmittedGP$ = new BehaviorSubject<Date>(null);
lastSubmittedGP$: Observable<Date> = this._lastSubmittedGP$.asObservable();
private _submitLoading$ = new BehaviorSubject<boolean>(false);
submitLoading$: Observable<boolean> = this._submitLoading$.asObservable();
error$ = new BehaviorSubject<CustomError>(null);
lastSubmittedGP$ = new BehaviorSubject<Date>(null);
submitLoading$ = new BehaviorSubject<boolean>(false);
activities$: Observable<Activity[]> = this.gemensamPlaneringService.activities$;
currentGenomforandeReferens$: Observable<number> = this.activatedRoute.params.pipe(
@@ -82,7 +78,7 @@ export class DeltagareGemensamPlaneringComponent {
}
showActivityAsInvalid(id: number): boolean {
if (this.shouldValidate) {
if (this.shouldValidate$.getValue()) {
if (this.isActivityObligatory(id) && !this.isActivityChecked(id)) {
return true;
}
@@ -94,6 +90,10 @@ export class DeltagareGemensamPlaneringComponent {
return false;
}
formControlIsInvalid(formControlName: string): boolean {
return this.gpFormGroup.errors && this.gpFormGroup.errors[formControlName] && this.shouldValidate$.getValue();
}
constructor(private gemensamPlaneringService: GemensamPlaneringService, private activatedRoute: ActivatedRoute) {}
updateActivityIds(activityId: string, checked: boolean): void {
@@ -109,36 +109,40 @@ export class DeltagareGemensamPlaneringComponent {
}
openConfirmDialog(): void {
this.shouldValidate = true;
this.shouldValidate$.next(true);
if (this.gpFormGroup.invalid) {
return;
}
this.confirmDialogOpen = true;
this.confirmDialogOpen$.next(true);
}
closeConfirmDialogAndProceed(confirmDialogAnswer: ConfirmDialog, genomforandeReferens: number): void {
this.confirmDialogOpen = false;
if (confirmDialogAnswer === ConfirmDialog.ACCEPTED) {
const distance = this.gpFormGroup.get('distance').value as boolean;
const activityIds = this.gpFormGroup.get('activityIds').value as number[];
void this.postGemensamPlanering({ distance, activityIds, genomforandeReferens });
}
cancelConfirmDialog(): void {
this.confirmDialogOpen$.next(false);
}
async postGemensamPlanering(postRequest: GemensamPlanering): Promise<void> {
this._submitLoading$.next(true);
async submitAndCloseConfirmDialog(genomforandeReferens: number): Promise<void> {
this.submitLoading$.next(true);
const { distance, activityIds } = this.gpFormGroup.value as GemensamPlanering;
const postRequest = {
distance,
activityIds,
genomforandeReferens,
};
return this.gemensamPlaneringService
.postGemensamPlanering(mapGemensamPlaneringToGemensamPlaneringPostRequest(postRequest))
.then(() => {
this._lastSubmittedGP$.next(new Date());
this.lastSubmittedGP$.next(new Date());
})
.catch((error: Error) => {
this._error$.next(new CustomError({ error, message: error.message, type: ErrorType.API }));
this.error$.next(new CustomError({ error, message: error.message, type: ErrorType.API }));
})
.finally(() => {
this._submitLoading$.next(false);
this.submitLoading$.next(false);
this.confirmDialogOpen$.next(false);
});
}
}

4
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-gemensam-planering/deltagare-gemensam-planering.module.ts
View File

@@ -1,3 +1,4 @@
import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
import { DigiNgProgressProgressbarModule } from '@af/digi-ng/_progress/progressbar';
@@ -7,7 +8,6 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
import { ConfirmDialogModule } from '@msfa-shared/components/confirm-dialog/confirm-dialog.module';
import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
@@ -25,12 +25,12 @@ import { DeltagareGemensamPlaneringComponent } from './deltagare-gemensam-planer
DigiNgFormRadiobuttonGroupModule,
ReactiveFormsModule,
ReportLayoutModule,
ConfirmDialogModule,
BackLinkModule,
LoaderModule,
HideTextModule,
DigiNgSkeletonBaseModule,
DigiNgFormCheckboxModule,
DigiNgDialogModule,
],
exports: [DeltagareGemensamPlaneringComponent],
})

4
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-periodisk-redovisning/deltagare-periodisk-redovisning.component.ts
View File

@@ -39,8 +39,8 @@ export class DeltagarePeriodiskRedovisningComponent {
initializePeriodiskRedovisningFormGroup(activitiesList: Activity[]): void {
this.periodiskRedovisningFormGroup = new FormGroup({
lamnatJobbForslag: new FormControl(null, [RequiredValidator('lamnatJobbForslag är obligatoriskt')]),
providedSprakStod: new FormControl(null, [RequiredValidator('providedSprakStod är obligatoriskt')]),
lamnatJobbForslag: new FormControl(null, [RequiredValidator()]),
providedSprakStod: new FormControl(null, [RequiredValidator()]),
activities: new FormArray([]),
});
this.getActivitesFormArray(activitiesList);

23
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/franvaro-report/franvaro-report.component.html
View File

@@ -37,7 +37,6 @@
(ngSubmit)="openConfirmDialog()"
id="franvaro-report-form"
>
<msfa-loader *ngIf="submitLoading$ | async" type="absolute"></msfa-loader>
<div class="franvaro-report__form-item">
<digi-ng-form-select
*ngIf="reasons$ | async as reasons; else loadingRef"
@@ -130,7 +129,7 @@
</div>
</div>
<div>
<div class="franvaro-report__form-item">
<h2>Tiden deltagaren var frånvarande</h2>
<digi-form-fieldset
af-legend="Heldag eller del av dag"
@@ -268,13 +267,19 @@
</div>
</footer>
</form>
<msfa-confirm-dialog
[dialogOpen]="confirmDialogOpen$ | async"
dialogTitle="Vill du skicka in Avvikelserapport (frånvaro)?"
ariaLabel="Förhandsgranska och skicka in Avvikelserapport (frånvaro)"
primaryButtonText="Skicka in"
(confirmDialogChanged)="closeConfirmDialogAndProceed($event, genomforandeReferens)"
<digi-ng-dialog
[afActive]="confirmDialogOpen$ | async"
(afOnPrimaryClick)="submitAndCloseConfirmDialog(genomforandeReferens)"
(afOnInactive)="cancelConfirmDialog()"
afHeadingLevel="h2"
afPrimaryButtonText="Skicka in"
afSecondaryButtonText="Avbryt"
(afOnSecondaryClick)="cancelConfirmDialog()"
afHeading="Vill du skicka in Avvikelserapport (frånvaro)"
afAriaLabel="Förhandsgranska och skicka in Avvikelserapport (frånvaro)"
id="confirm-franvaro-report"
>
<msfa-loader *ngIf="submitLoading$ | async" type="absolute"></msfa-loader>
<dl *ngIf="reasons$ | async as reasons">
<dt>Namn</dt>
<dd>{{avrop.fullName}}</dd>
@@ -321,7 +326,7 @@
<dt>Tid för förväntad närvaro</dt>
<dd>{{expectedPresenceStartTimeFormControl.value}} - {{expectedPresenceEndTimeFormControl.value}}</dd>
</dl>
</msfa-confirm-dialog>
</digi-ng-dialog>
</ng-template>
</ng-template>
</div>

4
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/franvaro-report/franvaro-report.component.scss
View File

@@ -14,6 +14,10 @@
z-index: $msfa__z-index-default;
}
&__dialog-contents {
position: relative;
}
&__time-pickers {
display: flex;
gap: var(--digi--layout--gutter);

10
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/franvaro-report/franvaro-report.component.ts
View File

@@ -3,7 +3,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { ANNAN_KAND_ORSAK_ID, ANNAN_ORSAK_ID } from '@msfa-constants/franvaro-reasons';
import { ConfirmDialog } from '@msfa-enums/confirm-dialog.enum';
import { ErrorType } from '@msfa-enums/error-type.enum';
import { Avrop } from '@msfa-models/avrop.model';
import { FranvaroRequestData } from '@msfa-models/avvikelse.model';
@@ -136,15 +135,11 @@ export class FranvaroReportComponent {
this.confirmDialogOpen$.next(true);
}
closeConfirmDialogAndProceed(confirmDialogAnswer: ConfirmDialog, genomforandeReferens: number): void {
cancelConfirmDialog(): void {
this.confirmDialogOpen$.next(false);
if (confirmDialogAnswer === ConfirmDialog.ACCEPTED) {
void this.postFranvaroReport(genomforandeReferens);
}
}
async postFranvaroReport(genomforandeReferens: number): Promise<void> {
async submitAndCloseConfirmDialog(genomforandeReferens: number): Promise<void> {
this.submitLoading$.next(true);
const {
@@ -190,6 +185,7 @@ export class FranvaroReportComponent {
})
.finally(() => {
this.submitLoading$.next(false);
this.confirmDialogOpen$.next(false);
});
}
}

4
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/franvaro-report/franvaro-report.module.ts
View File

@@ -1,3 +1,4 @@
import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
import { DigiNgFormInputModule } from '@af/digi-ng/_form/form-input';
import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
@@ -10,7 +11,6 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
import { ConfirmDialogModule } from '@msfa-shared/components/confirm-dialog/confirm-dialog.module';
import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
@@ -29,7 +29,6 @@ import { FranvaroReportService } from './franvaro-report.service';
ReportLayoutModule,
LoaderModule,
BackLinkModule,
ConfirmDialogModule,
HideTextModule,
DigiNgFormSelectModule,
DigiNgFormDatepickerModule,
@@ -38,6 +37,7 @@ import { FranvaroReportService } from './franvaro-report.service';
DigiNgFormTextareaModule,
DigiNgFormInputModule,
DigiNgFormValidationMessageModule,
DigiNgDialogModule,
],
providers: [FranvaroReportService],
exports: [FranvaroReportComponent],

3
apps/mina-sidor-fa/src/app/shared/models/validation-error.model.ts
View File

@@ -1,4 +1,3 @@
export interface ValidationError {
type: string;
message: string;
[key: string]: string;
}

2
apps/mina-sidor-fa/src/app/shared/utils/validators/date.validator.ts
View File

@@ -12,7 +12,7 @@ export function isoDateWithoutTimeValidator(): ValidatorFn {
const value: string = control.value as string;
if (!isoDateIsValid(value)) {
return { type: 'invalid', message: `Ogiltigt datum, vänligen ange YYYY-MM-DD` };
return { invalid: `Ogiltigt datum, vänligen ange YYYY-MM-DD` };
}
}

4
apps/mina-sidor-fa/src/app/shared/utils/validators/email.validator.ts
View File

@@ -12,7 +12,7 @@ export function EmailValidator(label = 'Fältet'): ValidatorFn {
const value: string = control.value as string;
if (!emailIsValid(value)) {
return { type: 'invalid', message: `Ogiltig ${label}` };
return { invalid: `Ogiltig ${label}` };
}
}
@@ -38,7 +38,7 @@ export function CommaSeparatedEmailValidator(): ValidatorFn {
if (invalidEmailaddresses.length) {
const messagePrepend =
invalidEmailaddresses.length > 1 ? 'Ogiltiga e-postadresser: ' : 'Ogiltig e-postadress: ';
return { type: 'invalid', message: `${messagePrepend}${invalidEmailaddresses.join(', ')}` };
return { invalid: `${messagePrepend}${invalidEmailaddresses.join(', ')}` };
}
}

2
apps/mina-sidor-fa/src/app/shared/utils/validators/required.validator.ts
View File

@@ -5,7 +5,7 @@ export function RequiredValidator(message = 'Fältet är obligatoriskt'): Valida
return (control: AbstractControl): ValidationError => {
if (control) {
if (!control.value || (Array.isArray(control.value) && !control.value.length)) {
return { type: 'required', message };
return { required: message };
}
}

10
apps/mina-sidor-fa/src/app/shared/utils/validators/social-security-number.validator.ts
View File

@@ -10,7 +10,7 @@ export function SocialSecurityNumberValidator(): ValidatorFn {
const ssn = control.value as string;
if (/[^0-9-]/g.test(ssn)) {
return { type: 'ssnInvalid', message: 'Inkorrekt personnummer' };
return { ssnInvalid: 'Inkorrekt personnummer' };
}
let strippedSsn = ssn.replace(/[^0-9]/g, '');
@@ -22,12 +22,12 @@ export function SocialSecurityNumberValidator(): ValidatorFn {
// Check length
if (strippedSsn.length !== 10) {
return { type: 'ssnNotComplete', message: 'Personnummret är inte fullständigt' };
return { ssnNotComplete: 'Personnummret är inte fullständigt' };
}
// Check month
if (+strippedSsn.substr(2, 2) > 12 || strippedSsn.substr(2, 2) === '00') {
return { type: 'ssnInvalid', message: 'Inkorrekt personnummer' };
return { ssnInvalid: 'Inkorrekt personnummer' };
}
// Check date (valid date + 60 is also apporved because of co-ordination number)
@@ -35,10 +35,10 @@ export function SocialSecurityNumberValidator(): ValidatorFn {
(+strippedSsn.substr(4, 2) > 31 || strippedSsn.substr(4, 2) === '00') &&
(+strippedSsn.substr(4, 2) > 91 || +strippedSsn.substr(4, 2) <= 60)
) {
return { type: 'ssnInvalid', message: 'Inkorrekt personnummer' };
return { ssnInvalid: 'Inkorrekt personnummer' };
}
return isControlDigitLegit(strippedSsn) ? null : { type: 'ssnInvalid', message: 'Inkorrekt personnummer' };
return isControlDigitLegit(strippedSsn) ? null : { ssnInvalid: 'Inkorrekt personnummer' };
};
}