Skip to content
Snippets Groups Projects
Commit e45895e9 authored by Oliver Schmidt's avatar Oliver Schmidt
Browse files

OZG-7591-7932 opt form ui and a11y

parent 10a784c7
No related branches found
No related tags found
1 merge request!92Administration: Validierung der Pflichtfelder bei "Benutzer & Rollen"
<div class="mb-12 block"> <div
<h2 class="heading-2 mt-4">Organisationseinheiten</h2> [formGroup]="formGroupParent"
<div [formGroup]="formGroupParent"> role="group"
aria-labelledby="organisationseinheiten-heading organisationseinheiten-desc"
class="mb-12"
>
<h2 id="organisationseinheiten-heading" class="heading-2 mt-4">Organisationseinheiten</h2>
<p id="organisationseinheiten-desc" class="mb-2 font-medium">Dem Benutzer sind folgende Organisationseinheiten zugewiesen</p>
<div [formGroupName]="UserFormService.GROUPS" class="flex flex-col gap-2"> <div [formGroupName]="UserFormService.GROUPS" class="flex flex-col gap-2">
<p class="font-medium">Dem Benutzer sind folgende Organisationseinheiten zugewiesen</p>
@for (controlName of formGroupOrganisationsEinheiten.controls | keyvalue; track controlName.key) { @for (controlName of formGroupOrganisationsEinheiten.controls | keyvalue; track controlName.key) {
<ods-checkbox-editor [formControlName]="controlName.key" [label]="controlName.key" [inputId]="controlName.key" /> <ods-checkbox-editor [formControlName]="controlName.key" [label]="controlName.key" [inputId]="controlName.key" />
} }
</div> </div>
</div> </div>
</div>
<h2 class="heading-2 mt-4">Rollen für OZG-Cloud *</h2> <h2 class="heading-2 mt-4" id="rollen-ozg-heading">Rollen für OZG-Cloud<i aria-hidden="true">*</i></h2>
<ods-validation-error <div
[id]="validationErrorId" [formGroup]="formGroupParent"
[invalidParams]="invalidParams$ | async" role="group"
label="Rollen" aria-required="true"
data-test-id="rollen-error" aria-labelledby="rollen-ozg-heading"
></ods-validation-error> [attr.aria-invalid]="!isValid"
<div [formGroup]="formGroupParent"> >
<div [formGroupName]="UserFormService.CLIENT_ROLES" class="mb-8 flex flex-col gap-4 md:flex-row"> <div [formGroupName]="UserFormService.CLIENT_ROLES" class="flex flex-col gap-4 md:flex-row">
<div [formGroupName]="UserFormService.ADMINISTRATION_GROUP" class="flex flex-1 flex-col gap-2"> <div [formGroupName]="UserFormService.ADMINISTRATION_GROUP" class="flex flex-1 flex-col gap-2">
<h3 class="text-md block font-medium text-text">Administration</h3> <h3 class="text-md block font-medium text-text">Administration</h3>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
...@@ -60,4 +60,10 @@ ...@@ -60,4 +60,10 @@
</div> </div>
</div> </div>
</div> </div>
<ods-validation-error
[id]="validationErrorId"
[invalidParams]="invalidParams$ | async"
label="Rollen"
data-test-id="rollen-error"
></ods-validation-error>
</div> </div>
...@@ -4,7 +4,8 @@ import { Component, Input, OnInit } from '@angular/core'; ...@@ -4,7 +4,8 @@ import { Component, Input, OnInit } from '@angular/core';
import { AbstractControl, FormControlStatus, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms'; import { AbstractControl, FormControlStatus, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
import { CheckboxEditorComponent, ValidationErrorComponent } from '@ods/component'; import { CheckboxEditorComponent, ValidationErrorComponent } from '@ods/component';
import { InfoIconComponent, TooltipDirective } from '@ods/system'; import { InfoIconComponent, TooltipDirective } from '@ods/system';
import { map, Observable, of } from 'rxjs'; import { isEmpty } from 'lodash-es';
import { map, Observable, of, tap } from 'rxjs';
import { UserFormService } from '../user.formservice'; import { UserFormService } from '../user.formservice';
@Component({ @Component({
...@@ -27,11 +28,13 @@ export class UserFormRolesComponent implements OnInit { ...@@ -27,11 +28,13 @@ export class UserFormRolesComponent implements OnInit {
public readonly UserFormService = UserFormService; public readonly UserFormService = UserFormService;
public readonly validationErrorId: string = generateValidationErrorId(); public readonly validationErrorId: string = generateValidationErrorId();
public isValid: boolean = true;
ngOnInit(): void { ngOnInit(): void {
const control: AbstractControl = this.formGroupParent.controls[UserFormService.CLIENT_ROLES]; const control: AbstractControl = this.formGroupParent.controls[UserFormService.CLIENT_ROLES];
this.invalidParams$ = control.statusChanges.pipe( this.invalidParams$ = control.statusChanges.pipe(
map((status: FormControlStatus) => (status === 'INVALID' ? Object.values(control.errors) : [])), map((status: FormControlStatus) => (status === 'INVALID' ? Object.values(control.errors) : [])),
tap((invalidParams: InvalidParam[]) => (this.isValid = isEmpty(invalidParams))),
); );
} }
} }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment