simple role management

src/app/modules/shows/services/docx.service.ts

@@ -10,8 +10,8 @@ import {SongService} from '../../songs/services/song.service';
 import {ShowSong} from './show-song';
 import {Show} from './show';
 import {ChordMode} from '../../../widget-modules/components/song-text/song-text.component';
-import {UserService} from '../../../services/user.service';
-import {User} from '../../../services/user';
+import {UserService} from '../../../services/user/user.service';
+import {User} from '../../../services/user/user';
 
 
 @Injectable({

src/app/modules/shows/services/show-song.service.ts

@@ -4,7 +4,7 @@ import {Observable} from 'rxjs';
 import {ShowSong} from './show-song';
 import {SongDataService} from '../../songs/services/song-data.service';
 import {take} from 'rxjs/operators';
-import {UserService} from '../../../services/user.service';
+import {UserService} from '../../../services/user/user.service';
 
 @Injectable({
   providedIn: 'root'

src/app/modules/shows/services/show.service.ts

@@ -2,9 +2,9 @@ import {Injectable} from '@angular/core';
 import {ShowDataService} from './show-data.service';
 import {Show} from './show';
 import {Observable} from 'rxjs';
-import {UserService} from '../../../services/user.service';
+import {UserService} from '../../../services/user/user.service';
 import {map, switchMap} from 'rxjs/operators';
-import {User} from '../../../services/user';
+import {User} from '../../../services/user/user';
 
 @Injectable({
   providedIn: 'root'

src/app/modules/shows/show/show.component.html

@@ -11,8 +11,8 @@
                 [showSong]="song"
                 [showSongs]="showSongs"
                 [showText]="showText"
-                [song]="getSong(song.songId)"
                 [show]="show"
+                [song]="getSong(song.songId)"
                 class="song-row"
       ></app-song>
     </div>

src/app/modules/songs/song/song.component.ts

@@ -6,8 +6,8 @@ import {Song} from '../services/song';
 import {Observable} from 'rxjs';
 import {FileDataService} from '../services/file-data.service';
 import {File} from '../services/file';
-import {UserService} from '../../../services/user.service';
-import {User} from '../../../services/user';
+import {UserService} from '../../../services/user/user.service';
+import {User} from '../../../services/user/user';
 
 @Component({
   selector: 'app-song',

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

@@ -17,3 +17,6 @@
     <button mat-button routerLink="../logout">Abmelden</button>
   </app-button-row>
 </app-card>
+
+
+<app-users *appRole="['admin']"></app-users>

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

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
-import {UserService} from '../../../services/user.service';
+import {UserService} from '../../../services/user/user.service';
 import {Observable} from 'rxjs';
-import {User} from '../../../services/user';
+import {User} from '../../../services/user/user';
 import {ChordMode} from '../../../widget-modules/components/song-text/song-text.component';
 
 @Component({

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

@@ -1,14 +1,24 @@
 import {Pipe, PipeTransform} from '@angular/core';
+import {roles} from '../../../services/user/roles';
+
 
 @Pipe({
   name: 'role'
 })
 export class RolePipe implements PipeTransform {
 
-  transform(role: 'admin'): string {
+  transform(role: roles): string {
     switch (role) {
+      case 'none':
+        return 'keine Berechtigung';
       case 'admin':
         return 'Administrator';
+      case 'user':
+        return 'Benutzer';
+      case 'leader':
+        return 'Lobpreisleiter';
+      case 'presenter':
+        return 'Präsentator';
     }
   }
 

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

@@ -0,0 +1,18 @@
+<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-card>

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

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

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

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

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

@@ -0,0 +1,31 @@
+import {Component, OnInit} 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 {
+  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/login/login.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
-import {UserService} from '../../../services/user.service';
+import {UserService} from '../../../services/user/user.service';
 
 @Component({
   selector: 'app-login',

src/app/modules/user/logout/logout.component.ts

@@ -1,6 +1,6 @@
 import {AfterViewInit, Component} from '@angular/core';
 import {Router} from '@angular/router';
-import {UserService} from '../../../services/user.service';
+import {UserService} from '../../../services/user/user.service';
 
 @Component({
   selector: 'app-logout',

src/app/modules/user/password/password.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
-import {UserService} from '../../../services/user.service';
+import {UserService} from '../../../services/user/user.service';
 
 @Component({
   selector: 'app-password',

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

@@ -15,10 +15,12 @@ import {RolePipe} from './info/role.pipe';
 import {MatSelectModule} from '@angular/material/select';
 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';
 
 
 @NgModule({
-  declarations: [LoginComponent, AuthMessagePipe, InfoComponent, LogoutComponent, RolePipe, PasswordComponent, PasswordSendComponent],
+  declarations: [LoginComponent, AuthMessagePipe, InfoComponent, LogoutComponent, RolePipe, PasswordComponent, PasswordSendComponent, UsersComponent],
   imports: [
     CommonModule,
     UserRoutingModule,
@@ -30,6 +32,7 @@ import {PasswordSendComponent} from './password-send/password-send.component';
     MatButtonModule,
     MatSelectModule,
     FormsModule,
+    RoleModule,
 
 
   ]