Natuurlijk! Hier is een overzicht en voorbeeld van hoe je een Angular-component kunt bouwen voor beheer van gebruikersrollen, inclusief structuur, roltoewijzingen, validatie en functionaliteit voor toevoegen/verwijderen van rollen. ### 1. Structuur van de component **Bestanden:** - `user-roles.component.ts` (TypeScript-logica) - `user-roles.component.html` (Template) - `user-roles.component.css` (Stijlen, optioneel) **Data modellen:** ```typescript export interface Gebruiker { id: string; naam: string; rollen: string[]; } ``` ### 2. Component opbouw **TypeScript (`user-roles.component.ts`):** ```typescript import { Component, Input } from '@angular/core'; @Component({ selector: 'app-user-roles', templateUrl: './user-roles.component.html', styleUrls: ['./user-roles.component.css'] }) export class UserRolesComponent { @Input() gebruiker: Gebruiker; beschikbareRollen: string[] = ['Gebruiker', 'Beheerder', 'Moderator']; // standaardrollen aangepasteRollen: string[] = []; // voor toegevoegde rollen // Toevoegen van een rol voegRolToe(rol: string) { if (!this.gebruiker.rollen.includes(rol) && rol.trim() !== '') { this.gebruiker.rollen.push(rol); } } // Verwijderen van een rol verwijderRol(rol: string) { this.gebruiker.rollen = this.gebruiker.rollen.filter(r => r !== rol); } // Validatie: controleren of de rol bestaat isRolGeldig(rol: string): boolean { return this.beschikbareRollen.includes(rol) || this.aangepasteRollen.includes(rol); } // Toevoegen van een aangepaste rol voegAangepasteRolToe(rol: string) { if (rol.trim() !== '' && !this.beschikbareRollen.includes(rol) && !this.aangepasteRollen.includes(rol)) { this.aangepasteRollen.push(rol); } } } ``` ### 3. Template (`user-roles.component.html`) ```html <h3>Gebruiker: {{gebruiker.naam}}</h3> <h4>Huidige Rollen:</h4> <ul> <li *ngFor="let rol of gebruiker.rollen"> {{rol}} <button (click)="verwijderRol(rol)">Verwijder</button> </li> </ul> <h4>Rollen toevoegen:</h4> <form (ngSubmit)="voegRolToe(nieuweRol.value)"> <input #nieuweRol type="text" placeholder="Nieuwe rol"> <button type="submit">Toevoegen</button> </form> <h4>Aangepaste Rollen Toevoegen:</h4> <form (ngSubmit)="voegAangepasteRolToe(nieuweAangepasteRol.value)"> <input #nieuweAangepasteRol type="text" placeholder="Aangepaste rol"> <button type="submit">Toevoegen</button> </form> <h4>Beschikbare Rollen:</h4> <ul> <li *ngFor="let rol of beschikbareRollen"> {{rol}} <button (click)="voegRolToe(rol)">Toevoegen</button> </li> <li *ngFor="let rol of aangepasteRollen"> {{rol}} <button (click)="voegRolToe(rol)">Toevoegen</button> </li> </ul> ``` ### 4. Validatie en roltoewijzingen - Gebruikers kunnen alleen rollen toevoegen die niet al aanwezig zijn. - Aangepaste rollen kunnen worden toegevoegd en weergegeven. - Bij toevoegen of verwijderen wordt gecontroleerd of de rol geldig is. - Voor complexere validatie zou je verdere checks kunnen toevoegen, zoals voorkomen dat lege rollen worden toegevoegd. ### 5. Voorbeelden van weergave en beheer **Huidige gebruiker:** ```json { "id": "123", "naam": "Jan Jansen", "rollen": ["Gebruiker", "Moderator"] } ``` **Functionaliteit:** - Rollen worden weergegeven in een lijst met verwijderknoppen. - Beheerders kunnen rollen toevoegen uit de standaardlijst of nieuwe aangepaste rollen. - Rollen kunnen eenvoudig worden verwijderd. --- Met deze structuur kun je een flexibele en uitbreidbare rolbeheer-component bouwen. Voor verdere verfijning kun je bijvoorbeeld een service toevoegen om rollen op te slaan op de backend, validaties uitbreiden, of drag-and-drop functionaliteit integreren.

Hier is een uitgebreide uitleg voor het bouwen van een Angular-component voor gebruikersrolbeheer: ## 1. Component Structuur ```typescript // user-role-management.component.ts import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; interface User { id: number; name: string; email: string; roles: string[]; } interface Role { name: string; permissions: string[]; } @Component({ selector: 'app-user-role-management', templateUrl: './user-role-management.component.html', styleUrls: ['./user-role-management.component.css'] }) export class UserRoleManagementComponent implements OnInit { users: User[] = []; availableRoles: Role[] = [ { name: 'admin', permissions: ['all'] }, { name: 'editor', permissions: ['read', 'write'] }, { name: 'viewer', permissions: ['read'] } ]; selectedUser: User | null = null; roleForm: FormGroup; customRoleForm: FormGroup; constructor(private fb: FormBuilder) { this.roleForm = this.fb.group({ selectedRoles: [[], Validators.required] }); this.customRoleForm = this.fb.group({ roleName: ['', [Validators.required, Validators.minLength(3)]], permissions: [[], Validators.required] }); } ngOnInit() { this.loadUsers(); } } ``` ## 2. Template Weergave ```html <!-- user-role-management.component.html --> <div class="container"> <h2>Gebruikersrolbeheer</h2> <!-- Gebruikerslijst --> <div class="user-list"> <h3>Gebruikers</h3> <div *ngFor="let user of users" class="user-item" [class.selected]="user.id === selectedUser?.id" (click)="selectUser(user)"> <span>{{ user.name }}</span> <div class="role-badges"> <span *ngFor="let role of user.roles" class="role-badge"> {{ role }} </span> </div> </div> </div> <!-- Rolbeheer voor geselecteerde gebruiker --> <div *ngIf="selectedUser" class="role-management"> <h3>Rollen beheren voor {{ selectedUser.name }}</h3> <!-- Huidige rollen weergeven --> <div class="current-roles"> <h4>Huidige rollen:</h4> <div *ngFor="let role of selectedUser.roles" class="role-item"> {{ role }} <button (click)="removeRole(role)" class="btn-remove">Verwijderen</button> </div> </div> <!-- Rollen toevoegen --> <form [formGroup]="roleForm" (ngSubmit)="assignRoles()"> <div class="form-group"> <label>Beschikbare rollen:</label> <div *ngFor="let role of availableRoles" class="role-option"> <label> <input type="checkbox" [value]="role.name" (change)="onRoleCheckboxChange($event, role.name)" [checked]="isRoleAssigned(role.name)"> {{ role.name }} </label> </div> </div> <button type="submit" [disabled]="!roleForm.valid" class="btn-primary"> Rollen Toewijzen </button> </form> </div> <!-- Aangepaste rol toevoegen --> <div class="custom-role-section"> <h3>Aangepaste Rol Toevoegen</h3> <form [formGroup]="customRoleForm" (ngSubmit)="addCustomRole()"> <div class="form-group"> <label>Rolnaam:</label> <input type="text" formControlName="roleName" class="form-control"> <div *ngIf="customRoleForm.get('roleName')?.invalid && customRoleForm.get('roleName')?.touched" class="error-message"> Rolnaam moet minimaal 3 karakters lang zijn </div> </div> <div class="form-group"> <label>Permissies:</label> <div *ngFor="let perm of ['read', 'write', 'delete', 'manage_users']" class="permission-option"> <label> <input type="checkbox" [value]="perm" (change)="onPermissionChange($event, perm)"> {{ perm }} </label> </div> </div> <button type="submit" [disabled]="!customRoleForm.valid" class="btn-primary"> Aangepaste Rol Toevoegen </button> </form> </div> </div> ``` ## 3. Methoden voor Rolbeheer ```typescript // user-role-management.component.ts (vervolg) export class UserRoleManagementComponent implements OnInit { // ... vorige code selectUser(user: User) { this.selectedUser = user; this.roleForm.patchValue({ selectedRoles: [...user.roles] }); } isRoleAssigned(roleName: string): boolean { return this.selectedUser?.roles.includes(roleName) || false; } onRoleCheckboxChange(event: any, roleName: string) { const selectedRoles = this.roleForm.get('selectedRoles')?.value || []; if (event.target.checked) { selectedRoles.push(roleName); } else { const index = selectedRoles.indexOf(roleName); if (index > -1) { selectedRoles.splice(index, 1); } } this.roleForm.patchValue({ selectedRoles }); } onPermissionChange(event: any, permission: string) { const permissions = this.customRoleForm.get('permissions')?.value || []; if (event.target.checked) { permissions.push(permission); } else { const index = permissions.indexOf(permission); if (index > -1) { permissions.splice(index, 1); } } this.customRoleForm.patchValue({ permissions }); } assignRoles() { if (this.selectedUser && this.roleForm.valid) { const newRoles = this.roleForm.value.selectedRoles; // Validatie: controleer of er minstens één rol is if (newRoles.length === 0) { alert('Selecteer minimaal één rol'); return; } // Validatie: controleer op conflicterende rollen if (this.hasConflictingRoles(newRoles)) { alert('Deze rolcombinatie is niet toegestaan'); return; } this.selectedUser.roles = newRoles; this.saveUserRoles(this.selectedUser); alert('Rollen succesvol bijgewerkt'); } } removeRole(roleName: string) { if (this.selectedUser) { // Validatie: voorkom verwijderen van laatste rol if (this.selectedUser.roles.length <= 1) { alert('Een gebruiker moet minimaal één rol hebben'); return; } // Validatie: speciale bescherming voor admin rol if (roleName === 'admin' && this.countAdminUsers() <= 1) { alert('Er moet minimaal één administrator aanwezig zijn'); return; } this.selectedUser.roles = this.selectedUser.roles.filter(r => r !== roleName); this.saveUserRoles(this.selectedUser); this.roleForm.patchValue({ selectedRoles: this.selectedUser.roles }); } } addCustomRole() { if (this.customRoleForm.valid) { const newRole: Role = { name: this.customRoleForm.value.roleName, permissions: this.customRoleForm.value.permissions }; // Validatie: controleer op dubbele rolnamen if (this.availableRoles.some(role => role.name === newRole.name)) { alert('Deze rolnaam bestaat al'); return; } this.availableRoles.push(newRole); this.customRoleForm.reset(); alert(`Aangepaste rol "${newRole.name}" toegevoegd`); } } private hasConflictingRoles(roles: string[]): boolean { // Voorbeeld: admin en viewer mogen niet gecombineerd worden return roles.includes('admin') && roles.includes('viewer'); } private countAdminUsers(): number { return this.users.filter(user => user.roles.includes('admin')).length; } private loadUsers() { // Mock data - vervang door echte API call this.users = [ { id: 1, name: 'Jan Jansen', email: 'jan@voorbeeld.nl', roles: ['admin'] }, { id: 2, name: 'Marie Pieters', email: 'marie@voorbeeld.nl', roles: ['editor'] }, { id: 3, name: 'Klaas de Vries', email: 'klaas@voorbeeld.nl', roles: ['viewer'] } ]; } private saveUserRoles(user: User) { // Implementeer API call om wijzigingen op te slaan console.log('Opslaan gebruiker:', user); // this.userService.updateUserRoles(user).subscribe(...); } } ``` ## 4. Styling ```css /* user-role-management.component.css */ .container { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; padding: 1rem; } .user-list { border-right: 1px solid #ccc; padding-right: 1rem; } .user-item { padding: 0.5rem; border: 1px solid #ddd; margin-bottom: 0.5rem; cursor: pointer; border-radius: 4px; } .user-item.selected { background-color: #e3f2fd; border-color: #2196f3; } .role-badges { margin-top: 0.25rem; } .role-badge { background-color: #4caf50; color: white; padding: 0.2rem 0.5rem; border-radius: 12px; font-size: 0.8rem; margin-right: 0.25rem; } .role-management, .custom-role-section { padding: 1rem; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 1rem; } .form-group { margin-bottom: 1rem; } .role-option, .permission-option { margin-bottom: 0.5rem; } .btn-primary { background-color: #2196f3; color: white; padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; } .btn-primary:disabled { background-color: #ccc; cursor: not-allowed; } .btn-remove { background-color: #f44336; color: white; border: none; padding: 0.2rem 0.5rem; border-radius: 4px; cursor: pointer; margin-left: 0.5rem; } .error-message { color: #f44336; font-size: 0.8rem; margin-top: 0.25rem; } ``` ## 5. Service voor API Communicatie ```typescript // user.service.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class UserService { private apiUrl = 'api/users'; constructor(private http: HttpClient) {} getUsers(): Observable<User[]> { return this.http.get<User[]>(this.apiUrl); } updateUserRoles(user: User): Observable<User> { return this.http.put<User>(`${this.apiUrl}/${user.id}/roles`, { roles: user.roles }); } addCustomRole(role: Role): Observable<Role> { return this.http.post<Role>(`${this.apiUrl}/roles`, role); } } ``` Deze component biedt een complete oplossing voor rolbeheer met: - Overzichtelijke gebruikerslijst met huidige rollen - Mogelijkheid om rollen toe te wijzen en te verwijderen - Validatie voor rolwijzigingen - Ondersteuning voor aangepaste rollen - Responsieve en gebruiksvriendelijke interface Vergeet niet om de benodigde Angular modules te importeren in je module en de service te provideren.