From 01d13ccea98bbe73ac73cb5ee664cfb93bd6f9f8 Mon Sep 17 00:00:00 2001
From: smuddyx <smuddyx@gmail.com>
Date: Sat, 25 Apr 2020 15:32:53 +0200
Subject: [PATCH] multiple role management

---
 src/app/modules/user/info/role.pipe.ts        |  3 ++
 .../user/info/users/user/user.component.html  | 14 ++++++
 .../user/info/users/user/user.component.less  |  5 +++
 .../info/users/user/user.component.spec.ts    | 25 +++++++++++
 .../user/info/users/user/user.component.ts    | 43 +++++++++++++++++++
 .../user/info/users/users.component.html      | 17 +-------
 .../user/info/users/users.component.less      |  5 ---
 .../user/info/users/users.component.ts        | 18 +-------
 src/app/modules/user/user.module.ts           |  3 +-
 src/app/services/user/role.directive.ts       |  2 +-
 src/app/services/user/roles.ts                |  4 +-
 src/app/services/user/user.ts                 |  2 +-
 12 files changed, 99 insertions(+), 42 deletions(-)
 create mode 100644 src/app/modules/user/info/users/user/user.component.html
 create mode 100644 src/app/modules/user/info/users/user/user.component.less
 create mode 100644 src/app/modules/user/info/users/user/user.component.spec.ts
 create mode 100644 src/app/modules/user/info/users/user/user.component.ts

diff --git a/src/app/modules/user/info/role.pipe.ts b/src/app/modules/user/info/role.pipe.ts
index 76a7478..a717b39 100644
--- a/src/app/modules/user/info/role.pipe.ts
+++ b/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';
+
     }
   }
 
diff --git a/src/app/modules/user/info/users/user/user.component.html b/src/app/modules/user/info/users/user/user.component.html
new file mode 100644
index 0000000..a7e7546
--- /dev/null
+++ b/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>
diff --git a/src/app/modules/user/info/users/user/user.component.less b/src/app/modules/user/info/users/user/user.component.less
new file mode 100644
index 0000000..7558267
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/modules/user/info/users/user/user.component.spec.ts b/src/app/modules/user/info/users/user/user.component.spec.ts
new file mode 100644
index 0000000..ff1f022
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/modules/user/info/users/user/user.component.ts b/src/app/modules/user/info/users/user/user.component.ts
new file mode 100644
index 0000000..9e32d91
--- /dev/null
+++ b/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(';') : [];
+  }
+
+}
diff --git a/src/app/modules/user/info/users/users.component.html b/src/app/modules/user/info/users/users.component.html
index ec51809..53beace 100644
--- a/src/app/modules/user/info/users/users.component.html
+++ b/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>
diff --git a/src/app/modules/user/info/users/users.component.less b/src/app/modules/user/info/users/users.component.less
index 7558267..e69de29 100644
--- a/src/app/modules/user/info/users/users.component.less
+++ b/src/app/modules/user/info/users/users.component.less
@@ -1,5 +0,0 @@
-.users {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 20px;
-}
diff --git a/src/app/modules/user/info/users/users.component.ts b/src/app/modules/user/info/users/users.component.ts
index d5b8c34..1d478dc 100644
--- a/src/app/modules/user/info/users/users.component.ts
+++ b/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});
-  }
 }
diff --git a/src/app/modules/user/user.module.ts b/src/app/modules/user/user.module.ts
index b0f1990..31d724f 100644
--- a/src/app/modules/user/user.module.ts
+++ b/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,
diff --git a/src/app/services/user/role.directive.ts b/src/app/services/user/role.directive.ts
index 2a2f58d..b361b61 100644
--- a/src/app/services/user/role.directive.ts
+++ b/src/app/services/user/role.directive.ts
@@ -44,7 +44,7 @@ export class RoleDirective implements OnInit {
     if (this.currentUser && this.currentUser.role) {
       if (this.currentUser.role === 'admin') return true;
       for (const role of this.appRole) {
-        if (this.currentUser.role === role) return true;
+        if (this.currentUser.role.indexOf(role) !== -1) return true;
       }
     }
 
diff --git a/src/app/services/user/roles.ts b/src/app/services/user/roles.ts
index 59cc908..58a9de7 100644
--- a/src/app/services/user/roles.ts
+++ b/src/app/services/user/roles.ts
@@ -1,2 +1,2 @@
-export type roles = 'none' | 'admin' | 'user' | 'leader' | 'presenter';
-export const ROLE_TYPES: roles[] = ['none', 'admin', 'user', 'leader', 'presenter'];
+export type roles = 'none' | 'admin' | 'user' | 'leader' | 'presenter' | 'distributor';
+export const ROLE_TYPES: roles[] = ['admin', 'user', 'leader', 'presenter', 'distributor'];
diff --git a/src/app/services/user/user.ts b/src/app/services/user/user.ts
index 329b7d2..ee7f7a0 100644
--- a/src/app/services/user/user.ts
+++ b/src/app/services/user/user.ts
@@ -3,6 +3,6 @@ import {ChordMode} from '../../widget-modules/components/song-text/song-text.com
 export interface User {
   id: string;
   name: string;
-  role: 'admin';
+  role: string;
   chordMode: ChordMode
 }