new role for members

src/app/modules/presentation/remote/remote.component.ts

@@ -51,7 +51,7 @@ export class RemoteComponent {
     private textRenderingService: TextRenderingService,
     private globalSettingsService: GlobalSettingsService
   ) {
-    this.shows$ = showService.list$(true);
+    this.shows$ = showService.list$(true).pipe(map(_ => _.sort((a, b) => (b.date < a.date ? -1 : b.date > a.date ? 1 : 0))));
     songService.list$().subscribe(_ => (this.songs = _));
 
     globalSettingsService.get$

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

@@ -1,19 +1,21 @@
 <div>
-  <app-list-header></app-list-header>
+  <app-list-header *appRole="['leader']"></app-list-header>
 
-  <ng-container *ngIf="shows$ | async as shows">
-    <app-card
-      *ngIf="getPrivateSongs(shows).length > 0"
-      [@fade]
-      [padding]="false"
-      heading="meine Veranstaltungen"
-    >
-      <app-list-item
-        *ngFor="let show of getPrivateSongs(shows)"
-        [routerLink]="show.id"
-        [show]="show"
-      ></app-list-item>
-    </app-card>
+  <ng-container *appRole="['leader']">
+    <ng-container *ngIf="shows$ | async as shows">
+      <app-card
+        *ngIf="getPrivateSongs(shows).length > 0"
+        [@fade]
+        [padding]="false"
+        heading="meine Veranstaltungen"
+      >
+        <app-list-item
+          *ngFor="let show of getPrivateSongs(shows) | sortBy: 'desc':'date'"
+          [routerLink]="show.id"
+          [show]="show"
+        ></app-list-item>
+      </app-card>
+    </ng-container>
   </ng-container>
 
   <ng-container *ngIf="shows$ | async as shows">
@@ -24,7 +26,7 @@
       heading="veröffentlichte Veranstaltungen"
     >
       <app-list-item
-        *ngFor="let show of getPublicShows(shows)"
+        *ngFor="let show of getPublicShows(shows) | sortBy: 'desc':'date'"
         [routerLink]="show.id"
         [show]="show"
       ></app-list-item>

src/app/modules/shows/list/list.component.ts

@@ -18,7 +18,7 @@ export class ListComponent {
   }
 
   public getPublicShows(songs: Show[]): Show[] {
-    return songs.filter(_ => _.published).sort((a, b) => (b.date < a.date ? -1 : b.date > a.date ? 1 : 0));
+    return songs.filter(_ => _.published);
   }
 
   public getPrivateSongs(songs: Show[]): Show[] {

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

@@ -32,42 +32,45 @@
     ></app-add-song>
 
     <app-button-row>
-      <ng-container *appOwner="show.owner">
-        <app-button
-          (click)="onArchive(true)"
-          *ngIf="!show.archived"
-          [icon]="faBox"
-        >
-          Archivieren
-        </app-button>
-        <app-button
-          (click)="onArchive(false)"
-          *ngIf="show.archived"
-          [icon]="faBoxOpen"
-        >
-          Wiederherstellen
-        </app-button>
-        <app-button
-          (click)="onPublish(true)"
-          *ngIf="!show.published"
-          [icon]="faPublish"
-        >
-          Veröffentlichen
-        </app-button>
-        <app-button
-          (click)="onPublish(false)"
-          *ngIf="show.published"
-          [icon]="faUnpublish"
-        >
-          Veröffentlichung zurückziehen
-        </app-button>
+      <ng-container *appRole="['leader']">
+        <ng-container *appOwner="show.owner">
+          <app-button
+            (click)="onArchive(true)"
+            *ngIf="!show.archived"
+            [icon]="faBox"
+          >
+            Archivieren
+          </app-button>
+          <app-button
+            (click)="onArchive(false)"
+            *ngIf="show.archived"
+            [icon]="faBoxOpen"
+          >
+            Wiederherstellen
+          </app-button>
+          <app-button
+            (click)="onPublish(true)"
+            *ngIf="!show.published"
+            [icon]="faPublish"
+          >
+            Veröffentlichen
+          </app-button>
+          <app-button
+            (click)="onPublish(false)"
+            *ngIf="show.published"
+            [icon]="faUnpublish"
+          >
+            Veröffentlichung zurückziehen
+          </app-button>
+        </ng-container>
       </ng-container>
+
       <app-button [icon]="faDownload" [matMenuTriggerFor]="menu"
       >Herunterladen
       </app-button>
       <mat-menu #menu="matMenu">
         <app-button (click)="onDownload()" [icon]="faUser"
-        >Ablauf für Lobpreisleiter
+        >Ablauf für Lobpreisgruppe
         </app-button>
         <app-button (click)="onDownloadHandout()" [icon]="faUsers"
         >Handout mit Copyright Infos

src/app/modules/shows/shows.module.ts

@@ -29,6 +29,8 @@ import {OwnerModule} from '../../services/user/owner.module';
 import {UserNameModule} from '../../services/user/user-name/user-name.module';
 import {MatMenuModule} from '@angular/material/menu';
 import {DragDropModule} from '@angular/cdk/drag-drop';
+import {RoleModule} from '../../services/user/role.module';
+import {SortByModule} from '../../widget-modules/pipes/sort-by/sort-by.module';
 
 @NgModule({
   declarations: [NewComponent, ListComponent, ListItemComponent, ShowComponent, SongComponent],
@@ -58,6 +60,8 @@ import {DragDropModule} from '@angular/cdk/drag-drop';
     UserNameModule,
     MatMenuModule,
     DragDropModule,
+    RoleModule,
+    SortByModule,
   ],
 })
 export class ShowsModule {}

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 {}