new role for members

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

@@ -5,6 +5,7 @@ import {User} from '../../../services/user/user';
 import {ChordMode} from '../../../widget-modules/components/song-text/song-text.component';
 import {faSignOutAlt} from '@fortawesome/free-solid-svg-icons/faSignOutAlt';
 import {RolePipe} from './role.pipe';
+import {roles} from '../../../services/user/roles';
 
 @Component({
   selector: 'app-info',
@@ -25,8 +26,8 @@ export class InfoComponent implements OnInit {
     await this.userService.update$(uid, {chordMode: value});
   }
 
-  public getUserRoles = (roles: string): string[] => roles?.split(';') ?? [];
-  public transdormUserRoles = (roles: string): string =>
+  public getUserRoles = (roles: string): roles[] => (roles?.split(';') ?? []) as roles[];
+  public transdormUserRoles = (roles: roles): string =>
     this.getUserRoles(roles)
       .map(_ => new RolePipe().transform(_))
       .join(', ');

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

@@ -1,10 +1,11 @@
 import {Pipe, PipeTransform} from '@angular/core';
+import {roles} from '../../../services/user/roles';
 
 @Pipe({
   name: 'role',
 })
 export class RolePipe implements PipeTransform {
-  public transform(role: string): string {
+  public transform(role: roles): string {
     switch (role) {
       case 'contributor':
         return 'Mitarbeiter';
@@ -16,6 +17,8 @@ export class RolePipe implements PipeTransform {
         return 'Benutzer';
       case 'leader':
         return 'Lobpreisleiter';
+      case 'member':
+        return 'Lobpreisgruppe';
       case 'presenter':
         return 'Präsentator';
     }

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

@@ -1,3 +1,3 @@
 <app-card heading="registrierte Benutzer">
-  <app-user *ngFor="let user of users$ | async" [user]="user"></app-user>
+  <app-user *ngFor="let user of users$ | async | sortBy: 'asc':'name'" [user]="user"></app-user>
 </app-card>

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

@@ -22,6 +22,7 @@ import {NewComponent} from './new/new.component';
 import {ButtonModule} from '../../widget-modules/components/button/button.module';
 import {LogoModule} from '../../widget-modules/components/logo/logo.module';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
+import {SortByModule} from '../../widget-modules/pipes/sort-by/sort-by.module';
 
 @NgModule({
   declarations: [LoginComponent, AuthMessagePipe, InfoComponent, LogoutComponent, RolePipe, PasswordComponent, PasswordSendComponent, UsersComponent, UserComponent, NewComponent],
@@ -40,6 +41,7 @@ import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
     ButtonModule,
     LogoModule,
     FontAwesomeModule,
+    SortByModule,
   ],
 })
 export class UserModule {}