multiple role management

src/app/modules/user/info/role.pipe.ts

@@ -9,6 +9,8 @@ export class RolePipe implements PipeTransform {
 
   transform(role: roles): string {
     switch (role) {
+      case 'distributor':
+        return 'Mitarbeiter';
       case 'none':
         return 'keine Berechtigung';
       case 'admin':
@@ -19,6 +21,7 @@ export class RolePipe implements PipeTransform {
         return 'Lobpreisleiter';
       case 'presenter':
         return 'Präsentator';
+
     }
   }
 

src/app/modules/user/info/users/user/user.component.html

@@ -0,0 +1,14 @@
+<div class="users">
+  <mat-form-field appearance="outline">
+    <mat-label>Name</mat-label>
+    <input (change)="onNameChanged(id, $event)" [ngModel]="name" matInput>
+  </mat-form-field>
+
+  <mat-form-field appearance="outline">
+    <mat-label>Rolle</mat-label>
+    <mat-select (ngModelChange)="onRoleChanged(id, $event)" [ngModel]="roles" multiple>
+      <mat-option *ngFor="let role of ROLE_TYPES" [value]="role">{{role | role}}</mat-option>
+    </mat-select>
+
+  </mat-form-field>
+</div>

src/app/modules/user/info/users/user/user.component.less

@@ -0,0 +1,5 @@
+.users {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 20px;
+}

src/app/modules/user/info/users/user/user.component.spec.ts

@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {UserComponent} from './user.component';
+
+describe('UserComponent', () => {
+  let component: UserComponent;
+  let fixture: ComponentFixture<UserComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [UserComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/user/info/users/user/user.component.ts

@@ -0,0 +1,43 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {User} from '../../../../../services/user/user';
+import {UserService} from '../../../../../services/user/user.service';
+import {ROLE_TYPES} from '../../../../../services/user/roles';
+
+@Component({
+  selector: 'app-user',
+  templateUrl: './user.component.html',
+  styleUrls: ['./user.component.less']
+})
+export class UserComponent implements OnInit {
+  public id: string;
+  public name: string
+  public roles: string[];
+  public ROLE_TYPES = ROLE_TYPES;
+
+  constructor(private userService: UserService) {
+  }
+
+  @Input() set user(value: User) {
+    this.id = value.id;
+    this.name = value.name;
+    this.roles = this.getRoleArray(value.role);
+  };
+
+  ngOnInit(): void {
+
+  }
+
+  public async onRoleChanged(id: string, roles: string[]): Promise<void> {
+    const role = roles.join(';');
+    await this.userService.update$(id, {role});
+  }
+
+  public async onNameChanged(id: string, name: any): Promise<void> {
+    await this.userService.update$(id, {name: name.target.value});
+  }
+
+  public getRoleArray(role): string[] {
+    return role ? role.split(';') : [];
+  }
+
+}

src/app/modules/user/info/users/users.component.html

@@ -1,18 +1,3 @@
 <app-card heading="registrierte Benutzer">
-
-  <div *ngFor="let user of users$|async" class="users">
-    <mat-form-field appearance="outline">
-      <mat-label>Name</mat-label>
-      <input (change)="onNameChanged(user.id, $event)" [ngModel]="user.name" matInput>
-    </mat-form-field>
-
-    <mat-form-field appearance="outline">
-      <mat-label>Rolle</mat-label>
-      <mat-select (ngModelChange)="onRoleChanged(user.id, $event)" [ngModel]="user.role">
-        <mat-option *ngFor="let role of ROLE_TYPES" [value]="role">{{role | role}}</mat-option>
-      </mat-select>
-
-    </mat-form-field>
-  </div>
-
+  <app-user *ngFor="let user of users$|async" [user]="user"></app-user>
 </app-card>

src/app/modules/user/info/users/users.component.less

@@ -1,5 +0,0 @@
-.users {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 20px;
-}

src/app/modules/user/info/users/users.component.ts

@@ -1,31 +1,17 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 import {UserService} from '../../../../services/user/user.service';
 import {Observable} from 'rxjs';
 import {User} from '../../../../services/user/user';
-import {ROLE_TYPES} from '../../../../services/user/roles';
 
 @Component({
   selector: 'app-users',
   templateUrl: './users.component.html',
   styleUrls: ['./users.component.less']
 })
-export class UsersComponent implements OnInit {
+export class UsersComponent {
   public users$: Observable<User[]>;
-  public ROLE_TYPES = ROLE_TYPES;
 
   constructor(private userService: UserService) {
     this.users$ = userService.list$();
   }
-
-  ngOnInit(): void {
-
-  }
-
-  public async onRoleChanged(id: string, role: any): Promise<void> {
-    await this.userService.update$(id, {role});
-  }
-
-  public async onNameChanged(id: string, name: any): Promise<void> {
-    await this.userService.update$(id, {name: name.target.value});
-  }
 }

src/app/modules/user/user.module.ts

@@ -17,10 +17,11 @@ import {PasswordComponent} from './password/password.component';
 import {PasswordSendComponent} from './password-send/password-send.component';
 import {UsersComponent} from './info/users/users.component';
 import {RoleModule} from '../../services/user/role.module';
+import {UserComponent} from './info/users/user/user.component';
 
 
 @NgModule({
-  declarations: [LoginComponent, AuthMessagePipe, InfoComponent, LogoutComponent, RolePipe, PasswordComponent, PasswordSendComponent, UsersComponent],
+  declarations: [LoginComponent, AuthMessagePipe, InfoComponent, LogoutComponent, RolePipe, PasswordComponent, PasswordSendComponent, UsersComponent, UserComponent],
   imports: [
     CommonModule,
     UserRoutingModule,