fix delete show song and not deleted order song causes crash

.run/start.run.xml

@@ -7,6 +7,9 @@
     </scripts>
     <node-interpreter value="project" />
     <envs />
+    <EXTENSION ID="com.intellij.lang.javascript.buildTools.npm.rc.StartBrowserRunConfigurationExtension">
+      <browser name="98ca6316-2f89-46d9-a9e5-fa9e2b0625b3" start="true" with-js-debugger="true" url="http://localhost.4200" />
+    </EXTENSION>
     <method v="2" />
   </configuration>
 </component>

angular.json

@@ -15,12 +15,15 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/wgenerator",
+            "outputPath": {
+              "base": "dist/wgenerator"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
+            "polyfills": [
-            "polyfills": "src/polyfills.ts",
+              "src/polyfills.ts"
+            ],
             "tsConfig": "tsconfig.app.json",
             "aot": false,
             "assets": [
@@ -42,9 +45,7 @@
               "src/styles/shadow.less"
             ],
             "scripts": [],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
             "namedChunks": true,
@@ -52,7 +53,8 @@
               "lodash",
               "docx",
               "qrcode"
-            ]
+            ],
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -68,8 +70,6 @@
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -82,8 +82,7 @@
                   "maximumError": "10kb"
                 }
               ],
-              "serviceWorker": true,
+              "serviceWorker": "ngsw-config.json"
-              "ngswConfigPath": "ngsw-config.json"
             }
           }
         },

firebase.json

@@ -4,7 +4,7 @@
     "indexes": "firestore.indexes.json"
   },
   "hosting": {
-    "public": "dist/wgenerator",
+    "public": "dist/wgenerator/browser",
     "ignore": [
       "firebase.json",
       "**/.*",

package.json

@@ -11,18 +11,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.2.2",
+    "@angular/animations": "^19.0.5",
-    "@angular/cdk": "^17.2.1",
+    "@angular/cdk": "^19.0.4",
-    "@angular/common": "^17.2.2",
+    "@angular/common": "^19.0.5",
-    "@angular/compiler": "^17.2.2",
+    "@angular/compiler": "^19.0.5",
-    "@angular/core": "^17.2.2",
+    "@angular/core": "^19.0.5",
-    "@angular/fire": "^17.0.1",
+    "@angular/fire": "^18.0.1",
-    "@angular/forms": "^17.2.2",
+    "@angular/forms": "^19.0.5",
-    "@angular/material": "^17.2.1",
+    "@angular/material": "^19.0.4",
-    "@angular/platform-browser": "^17.2.2",
+    "@angular/platform-browser": "^19.0.5",
-    "@angular/platform-browser-dynamic": "^17.2.2",
+    "@angular/platform-browser-dynamic": "^19.0.5",
-    "@angular/router": "^17.2.2",
+    "@angular/router": "^19.0.5",
-    "@angular/service-worker": "^17.2.2",
+    "@angular/service-worker": "^19.0.5",
     "@fortawesome/angular-fontawesome": "^0.14.1",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
@@ -35,24 +35,24 @@
     "rxjs": "~7.8.1",
     "swiper": "^11.0.6",
     "tslib": "^2.6.2",
-    "zone.js": "~0.14.4"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "0.1702.1",
+    "@angular-devkit/architect": "0.1900.6",
-    "@angular-devkit/build-angular": "^17.2.1",
+    "@angular-devkit/build-angular": "^19.0.6",
-    "@angular-eslint/builder": "17.2.1",
+    "@angular-eslint/builder": "19.0.2",
-    "@angular-eslint/eslint-plugin": "17.2.1",
+    "@angular-eslint/eslint-plugin": "19.0.2",
-    "@angular-eslint/eslint-plugin-template": "17.2.1",
+    "@angular-eslint/eslint-plugin-template": "19.0.2",
-    "@angular-eslint/schematics": "17.2.1",
+    "@angular-eslint/schematics": "19.0.2",
-    "@angular-eslint/template-parser": "17.2.1",
+    "@angular-eslint/template-parser": "19.0.2",
-    "@angular/cli": "^17.2.1",
+    "@angular/cli": "^19.0.6",
-    "@angular/compiler-cli": "^17.2.2",
+    "@angular/compiler-cli": "^19.0.5",
-    "@angular/language-service": "^17.2.2",
+    "@angular/language-service": "^19.0.5",
     "@types/jasmine": "~5.1.4",
     "@types/jasminewd2": "~2.0.13",
     "@types/lodash": "^4.14.202",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.0.2",
+    "@typescript-eslint/parser": "^7.2.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
@@ -65,6 +65,6 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
     "prettier": "^3.2.5",
-    "typescript": "~5.3.3"
+    "typescript": "~5.5.4"
   }
 }

src/app/app.component.spec.ts

@@ -3,14 +3,11 @@ import {RouterTestingModule} from '@angular/router/testing';
 import {AppComponent} from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        imports: [RouterTestingModule],
+      imports: [RouterTestingModule, AppComponent],
-        declarations: [AppComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);

src/app/app.component.ts

@@ -2,6 +2,8 @@ import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
 import {fader} from './animations';
 import {ScrollService} from './services/scroll.service';
 import {register} from 'swiper/element/bundle';
+import {RouterOutlet} from '@angular/router';
+import {NavigationComponent} from './widget-modules/components/application-frame/navigation/navigation.component';
 
 @Component({
   selector: 'app-root',
@@ -9,6 +11,7 @@ import {register} from 'swiper/element/bundle';
   styleUrls: ['./app.component.less'],
   animations: [fader],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterOutlet, NavigationComponent],
 })
 export class AppComponent implements OnInit {
   public constructor(private scrollService: ScrollService) {

src/app/app.module.ts

@@ -1,43 +0,0 @@
-import {BrowserModule} from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
-
-import {AppRoutingModule} from './app-routing.module';
-import {AppComponent} from './app.component';
-import {ServiceWorkerModule} from '@angular/service-worker';
-import {environment} from '../environments/environment';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {ApplicationFrameModule} from './widget-modules/components/application-frame/application-frame.module';
-import {AngularFireModule} from '@angular/fire/compat';
-import {AngularFirestoreModule} from '@angular/fire/compat/firestore';
-import {AngularFireStorageModule} from '@angular/fire/compat/storage';
-import {AngularFireDatabaseModule} from '@angular/fire/compat/database';
-import {AngularFireAuthModule} from '@angular/fire/compat/auth';
-import {AngularFireAuthGuardModule} from '@angular/fire/compat/auth-guard';
-import {MAT_DATE_LOCALE} from '@angular/material/core';
-import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    AppRoutingModule,
-    ServiceWorkerModule.register('ngsw-worker.js', {
-      enabled: environment.production,
-    }),
-    BrowserAnimationsModule,
-
-    ApplicationFrameModule,
-
-    AngularFireModule.initializeApp(environment.firebase),
-    AngularFirestoreModule.enablePersistence({synchronizeTabs: true}),
-    AngularFireStorageModule,
-    AngularFireDatabaseModule,
-    AngularFireAuthModule,
-    AngularFireAuthGuardModule,
-    FontAwesomeModule,
-  ],
-  providers: [{provide: MAT_DATE_LOCALE, useValue: 'de-DE'}],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}

src/app/modules/brand/brand.component.spec.ts

@@ -6,13 +6,11 @@ describe('BrandComponent', () => {
   let component: BrandComponent;
   let fixture: ComponentFixture<BrandComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [BrandComponent],
+      imports: [BrandComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(BrandComponent);

src/app/modules/brand/brand.component.ts

@@ -1,8 +1,10 @@
 import {Component} from '@angular/core';
+import {LogoComponent} from '../../widget-modules/components/logo/logo.component';
 
 @Component({
   selector: 'app-brand',
   templateUrl: './brand.component.html',
   styleUrls: ['./brand.component.less'],
+  imports: [LogoComponent],
 })
 export class BrandComponent {}

src/app/modules/brand/brand.module.ts

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {BrandComponent} from './brand.component';
 import {RouterModule, Routes} from '@angular/router';
-import {LogoModule} from '../../widget-modules/components/logo/logo.module';
+
 import {NewUserComponent} from './new-user/new-user.component';
 
 const routes: Routes = [
@@ -18,7 +18,6 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  declarations: [BrandComponent, NewUserComponent],
+  imports: [CommonModule, RouterModule.forChild(routes), BrandComponent, NewUserComponent],
-  imports: [CommonModule, RouterModule.forChild(routes), LogoModule],
 })
 export class BrandModule {}

src/app/modules/brand/new-user/new-user.component.spec.ts

@@ -6,13 +6,11 @@ describe('NewUserComponent', () => {
   let component: NewUserComponent;
   let fixture: ComponentFixture<NewUserComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [NewUserComponent],
+      imports: [NewUserComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(NewUserComponent);

src/app/modules/brand/new-user/new-user.component.ts

@@ -2,11 +2,14 @@ import {Component} from '@angular/core';
 import {UserService} from '../../../services/user/user.service';
 import {Observable} from 'rxjs';
 import {User} from '../../../services/user/user';
+import {BrandComponent} from '../brand.component';
+import {AsyncPipe, NgIf} from '@angular/common';
 
 @Component({
   selector: 'app-new-user',
   templateUrl: './new-user.component.html',
   styleUrls: ['./new-user.component.less'],
+  imports: [BrandComponent, NgIf, AsyncPipe],
 })
 export class NewUserComponent {
   public user$: Observable<User | null> | null = null;

src/app/modules/guest/guest.component.spec.ts

@@ -6,13 +6,11 @@ describe('GuestComponent', () => {
   let component: GuestComponent;
   let fixture: ComponentFixture<GuestComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [GuestComponent],
+      imports: [GuestComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(GuestComponent);

src/app/modules/guest/guest.component.ts

@@ -1,14 +1,19 @@
-import {Component} from '@angular/core';
+import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {GuestShowDataService} from './guest-show-data.service';
 import {ActivatedRoute} from '@angular/router';
 import {map, switchMap} from 'rxjs/operators';
 import {Song} from '../songs/services/song';
 import {ConfigService} from '../../services/config.service';
+import {AsyncPipe, DatePipe, NgFor, NgIf} from '@angular/common';
+import {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
+import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
   selector: 'app-guest',
   templateUrl: './guest.component.html',
   styleUrls: ['./guest.component.less'],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [NgIf, NgFor, SongTextComponent, AsyncPipe, DatePipe, ShowTypePipe],
 })
 export class GuestComponent {
   public show$ = this.currentRoute.params.pipe(

src/app/modules/guest/guest.module.ts

@@ -2,11 +2,10 @@ import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {GuestComponent} from './guest.component';
 import {RouterModule} from '@angular/router';
-import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module';
+import {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
-import {ShowTypeTranslaterModule} from '../../widget-modules/pipes/show-type-translater/show-type-translater.module';
+import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @NgModule({
-  declarations: [GuestComponent],
   imports: [
     CommonModule,
     RouterModule.forChild([
@@ -15,8 +14,9 @@ import {ShowTypeTranslaterModule} from '../../widget-modules/pipes/show-type-tra
         component: GuestComponent,
       },
     ]),
-    SongTextModule,
+    SongTextComponent,
-    ShowTypeTranslaterModule,
+    ShowTypePipe,
+    GuestComponent,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })

src/app/modules/presentation/monitor/legal/legal.component.spec.ts

@@ -6,13 +6,11 @@ describe('LegalComponent', () => {
   let component: LegalComponent;
   let fixture: ComponentFixture<LegalComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [LegalComponent],
+      imports: [LegalComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LegalComponent);

src/app/modules/presentation/monitor/legal/legal.component.ts

@@ -1,11 +1,13 @@
 import {Component, Input} from '@angular/core';
 import {Song} from '../../../songs/services/song';
 import {Config} from '../../../../services/config';
+import {NgIf} from '@angular/common';
 
 @Component({
   selector: 'app-legal',
   templateUrl: './legal.component.html',
   styleUrls: ['./legal.component.less'],
+  imports: [NgIf],
 })
 export class LegalComponent {
   @Input() public song: Song | null = null;

src/app/modules/presentation/monitor/logo/logo.component.spec.ts

@@ -6,13 +6,11 @@ describe('LogoComponent', () => {
   let component: LogoComponent;
   let fixture: ComponentFixture<LogoComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [LogoComponent],
+      imports: [LogoComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LogoComponent);

src/app/modules/presentation/monitor/monitor.component.html

@@ -1,18 +1,18 @@
 <div class="fullscreen background"></div>
 <div *ngIf="song && showType" [style.font-size.px]="zoom" class="fullscreen background">
 
-  <div class="bg-blue fullscreen bg-image" [class.visible]="presentationBackground==='blue'"></div>
+  <div [class.visible]="presentationBackground==='blue'" class="bg-blue fullscreen bg-image"></div>
-  <div class="bg-green fullscreen bg-image" [class.visible]="presentationBackground==='green'"></div>
+  <div [class.visible]="presentationBackground==='green'" class="bg-green fullscreen bg-image"></div>
-  <div class="bg-leder fullscreen bg-image" [class.visible]="presentationBackground==='leder'"></div>
+  <div [class.visible]="presentationBackground==='leder'" class="bg-leder fullscreen bg-image"></div>
-  <div class="bg-praise fullscreen bg-image" [class.visible]="presentationBackground==='praise'"></div>
+  <div [class.visible]="presentationBackground==='praise'" class="bg-praise fullscreen bg-image"></div>
-  <div class="bg-bible fullscreen bg-image" [class.visible]="presentationBackground==='bible'"></div>
+  <div [class.visible]="presentationBackground==='bible'" class="bg-bible fullscreen bg-image"></div>
 
 
   <div
     [@songSwitch]="songId"
     [class.blur]="songId === 'title' || songId === 'dynamicText'"
-    [class.no-logo]="presentationBackground!=='none'"
     [class.hide]="songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText'"
+    [class.no-logo]="presentationBackground!=='none'"
     class="start fullscreen logo"
   >
     <app-logo></app-logo>
@@ -29,11 +29,12 @@
   </div>
 
   <app-song-text
-    [header]="song.title"
     *ngIf="songId !== 'title' && songId !== 'empty'"
     [@songSwitch]="songId"
     [fullscreen]="true"
+    [header]="song.title"
     [index]="index??0"
+    [showComments]="false"
     [showSwitch]="false"
     [text]="song.text"
     chordMode="hide"

src/app/modules/presentation/monitor/monitor.component.less

@@ -34,6 +34,7 @@
 .bg-blue {
   background-image: url("/assets/bg-dark-blue.jpg");
   filter: blur(10px);
+
   &.visible {
     opacity: 0.5;
   }
@@ -42,6 +43,7 @@
 .bg-green {
   background-image: url("/assets/bg-dark-green.jpg");
   filter: blur(5px);
+
   &.visible {
     opacity: 0.9;
   }
@@ -50,6 +52,7 @@
 .bg-leder {
   background-image: url("/assets/bg-leder.jpg");
   filter: blur(5px);
+
   &.visible {
     opacity: 0.4;
   }
@@ -58,6 +61,7 @@
 .bg-praise {
   background-image: url("/assets/bg-praise.jpg");
   filter: blur(8px);
+
   &.visible {
     opacity: 0.2;
   }
@@ -66,6 +70,7 @@
 .bg-bible {
   background-image: url("/assets/bg-bible.jpg");
   filter: blur(8px);
+
   &.visible {
     opacity: 0.2;
   }

src/app/modules/presentation/monitor/monitor.component.spec.ts

@@ -6,13 +6,11 @@ describe('MonitorComponent', () => {
   let component: MonitorComponent;
   let fixture: ComponentFixture<MonitorComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [MonitorComponent],
+      imports: [MonitorComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(MonitorComponent);

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

@@ -10,15 +10,20 @@ import {ConfigService} from '../../../services/config.service';
 import {songSwitch} from '../../../widget-modules/components/song-text/animation';
 import {TextRenderingService} from '../../songs/services/text-rendering.service';
 import {PresentationBackground, Show} from '../../shows/services/show';
-import {GlobalSettings} from '../../../services/global-settings';
 import {ShowSongService} from '../../shows/services/show-song.service';
 import {openFullscreen} from '../../../services/fullscreen';
+import {AsyncPipe, DatePipe, NgIf} from '@angular/common';
+import {LogoComponent} from './logo/logo.component';
+import {SongTextComponent} from '../../../widget-modules/components/song-text/song-text.component';
+import {LegalComponent} from './legal/legal.component';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
   selector: 'app-monitor',
   templateUrl: './monitor.component.html',
   styleUrls: ['./monitor.component.less'],
   animations: [songSwitch],
+  imports: [NgIf, LogoComponent, SongTextComponent, LegalComponent, AsyncPipe, DatePipe, ShowTypePipe],
 })
 export class MonitorComponent implements OnInit {
   public song: Song | null = null;
@@ -51,7 +56,7 @@ export class MonitorComponent implements OnInit {
       .pipe(
         debounceTime(100),
         filter(_ => !!_),
-        map(_ => _ as GlobalSettings),
+        map(_ => _),
         map(_ => _.currentShow),
         distinctUntilChanged(),
         tap(_ => (this.currentShowId = _))
@@ -59,7 +64,7 @@ export class MonitorComponent implements OnInit {
       .pipe(
         switchMap(_ => this.showService.read$(_)),
         filter(_ => !!_),
-        map(_ => _ as Show),
+        map(_ => _),
         tap<Show>(_ => {
           this.showType = _.showType;
           this.date = _.date.toDate();

src/app/modules/presentation/presentation.module.ts

@@ -4,43 +4,45 @@ import {CommonModule} from '@angular/common';
 import {PresentationRoutingModule} from './presentation-routing.module';
 import {MonitorComponent} from './monitor/monitor.component';
 import {RemoteComponent} from './remote/remote.component';
-import {CardModule} from '../../widget-modules/components/card/card.module';
+
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatSelectModule} from '@angular/material/select';
-import {ShowTypeTranslaterModule} from '../../widget-modules/pipes/show-type-translater/show-type-translater.module';
-import {SectionTypeTranslatorModule} from '../../widget-modules/pipes/section-type-translator/section-type-translator.module';
-import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module';
 import {LegalComponent} from './monitor/legal/legal.component';
 import {MatButtonModule} from '@angular/material/button';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {MatSliderModule} from '@angular/material/slider';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {AddSongModule} from '../../widget-modules/components/add-song/add-song.module';
 import {LogoComponent} from './monitor/logo/logo.component';
 import {SelectComponent} from './select/select.component';
 import {MatInputModule} from '@angular/material/input';
-import {UserNameModule} from '../../services/user/user-name/user-name.module';
+
+import {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
+import {AddSongComponent} from '../../widget-modules/components/add-song/add-song.component';
+import {SectionTypePipe} from '../../widget-modules/pipes/section-type-translator/section-type.pipe';
+import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @NgModule({
-  declarations: [MonitorComponent, RemoteComponent, LegalComponent, LogoComponent, SelectComponent],
   exports: [RemoteComponent],
   imports: [
     CommonModule,
     PresentationRoutingModule,
-    CardModule,
     MatFormFieldModule,
     MatSelectModule,
-    ShowTypeTranslaterModule,
+    ShowTypePipe,
-    SectionTypeTranslatorModule,
+    SectionTypePipe,
-    SongTextModule,
+    SongTextComponent,
     MatButtonModule,
     FontAwesomeModule,
     MatSliderModule,
     FormsModule,
-    AddSongModule,
+    AddSongComponent,
     ReactiveFormsModule,
     MatInputModule,
-    UserNameModule,
+    MonitorComponent,
+    RemoteComponent,
+    LegalComponent,
+    LogoComponent,
+    SelectComponent,
   ],
 })
 export class PresentationModule {}

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

@@ -1,6 +1,6 @@
 <div *ngIf="show" @fade>
-  <app-card [heading]="show.showType | showType" [subheading]="show.date.toDate() | date:'dd.MM.yyyy'"
+  <app-card [closeIcon]="faIcon" [heading]="show.showType | showType"
-            closeLink="/presentation/select" [closeIcon]="faIcon">
+            [subheading]="show.date.toDate() | date:'dd.MM.yyyy'" closeLink="/presentation/select">
 
     <ng-container *ngIf="!progress">
       <div class="song">
@@ -61,7 +61,8 @@
 
         <mat-form-field appearance="outline">
           <mat-label>Überschrift</mat-label>
-          <input (ngModelChange)="onDynamicCaption($event, show.id)" [ngModel]="show.presentationDynamicCaption" autocomplete="off" id="dynamic-caption"
+          <input (ngModelChange)="onDynamicCaption($event, show.id)" [ngModel]="show.presentationDynamicCaption"
+                 autocomplete="off" id="dynamic-caption"
                  matInput
                  type="text">
         </mat-form-field>
@@ -86,8 +87,8 @@
         <mat-form-field appearance="outline">
           <mat-label>Hintergrund</mat-label>
           <mat-select
-            [ngModel]="show.presentationBackground"
+            (ngModelChange)="onBackground($event, show.id)"
-            (ngModelChange)="onBackground($event, show.id)">
+            [ngModel]="show.presentationBackground">
             <mat-option value="none">kein Hintergrund</mat-option>
             <mat-option value="blue">Sternenhimmel</mat-option>
             <mat-option value="green">Blätter</mat-option>
@@ -98,12 +99,12 @@
         </mat-form-field>
 
         <mat-slider
+          #slider
           [max]="100"
           [min]="10"
           [step]="2"
-          color="primary"
           class="zoom-slider"
-          #slider
+          color="primary"
           ngDefaultControl
         ><input (ngModelChange)="onZoom($event, show.id)"
                 [ngModel]="show.presentationZoom"
@@ -117,8 +118,8 @@
         *ngIf="show"
         [addedLive]="true"
         [showSongs]="showSongs"
-        [songs]="songs$|async"
         [show]="show"
+        [songs]="songs$|async"
       ></app-add-song>
     </ng-container>
   </app-card>

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

@@ -6,13 +6,11 @@ describe('RemoteComponent', () => {
   let component: RemoteComponent;
   let fixture: ComponentFixture<RemoteComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [RemoteComponent],
+      imports: [RemoteComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(RemoteComponent);

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

@@ -11,7 +11,21 @@ import {debounceTime, filter, map} from 'rxjs/operators';
 import {fade} from '../../../animations';
 import {TextRenderingService} from '../../songs/services/text-rendering.service';
 import {Section} from '../../songs/services/section';
-import {GlobalSettings} from '../../../services/global-settings';
+import {LineType} from '../../songs/services/line-type';
+import {AsyncPipe, DatePipe, NgFor, NgIf} from '@angular/common';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatInput} from '@angular/material/input';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatButton} from '@angular/material/button';
+import {RouterLink} from '@angular/router';
+import {FaIconComponent} from '@fortawesome/angular-fontawesome';
+import {MatSelect} from '@angular/material/select';
+import {MatOption} from '@angular/material/core';
+import {MatSlider, MatSliderThumb} from '@angular/material/slider';
+import {AddSongComponent} from '../../../widget-modules/components/add-song/add-song.component';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import {SectionTypePipe} from '../../../widget-modules/pipes/section-type-translator/section-type.pipe';
 
 export interface PresentationSong {
   id: string;
@@ -25,6 +39,28 @@ export interface PresentationSong {
   styleUrls: ['./remote.component.less'],
   animations: [fade],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    NgIf,
+    CardComponent,
+    NgFor,
+    MatFormField,
+    MatLabel,
+    MatInput,
+    ReactiveFormsModule,
+    FormsModule,
+    MatButton,
+    RouterLink,
+    FaIconComponent,
+    MatSelect,
+    MatOption,
+    MatSlider,
+    MatSliderThumb,
+    AddSongComponent,
+    AsyncPipe,
+    DatePipe,
+    ShowTypePipe,
+    SectionTypePipe,
+  ],
 })
 export class RemoteComponent {
   public show: Show | null = null;
@@ -35,13 +71,37 @@ export class RemoteComponent {
   public faIcon = faFolderOpen;
 
   public faDesktop = faDesktop;
+  public presentationDynamicCaptionChanged$ = new Subject<{presentationDynamicCaption: string; showId: string}>();
+  public presentationDynamicTextChanged$ = new Subject<{presentationDynamicText: string; showId: string}>();
+
+  public constructor(
+    private showService: ShowService,
+    private showSongService: ShowSongService,
+    private songService: SongService,
+    private textRenderingService: TextRenderingService,
+    globalSettingsService: GlobalSettingsService,
+    private cRef: ChangeDetectorRef
+  ) {
+    globalSettingsService.get$
+      .pipe(
+        filter(_ => !!_),
+        map(_ => _.currentShow)
+      )
+      .subscribe(_ => {
+        this.onShowChanged(_);
+        this.cRef.markForCheck();
+      });
+
+    this.presentationDynamicCaptionChanged$
+      .pipe(debounceTime(1000))
+      .subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicCaption: _.presentationDynamicCaption}));
+    this.presentationDynamicTextChanged$.pipe(debounceTime(1000)).subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicText: _.presentationDynamicText}));
+  }
 
   public trackBy(index: number, item: PresentationSong): string {
     return item.id;
   }
 
-  public presentationDynamicCaptionChanged$ = new Subject<{presentationDynamicCaption: string; showId: string}>();
-
   public onShowChanged(change: string): void {
     combineLatest([this.showService.read$(change), this.showSongService.list$(change)]).subscribe(([show, list]) => {
       this.showSongs = list;
@@ -49,7 +109,7 @@ export class RemoteComponent {
       const presentationSongs = list.map(song => ({
         id: song.id,
         title: song.title,
-        sections: this.textRenderingService.parse(song.text, null),
+        sections: this.textRenderingService.parse(song.text, null, false),
       }));
       this.presentationSongs = show?.order.map(_ => presentationSongs.filter(f => f.id === _)[0]) ?? [];
       this.cRef.markForCheck();
@@ -57,7 +117,7 @@ export class RemoteComponent {
   }
 
   public getFirstLine(section: Section): string {
-    return section.lines.filter(_ => _.type === 1)[0].text;
+    return section.lines.filter(_ => _.type === LineType.text)[0].text;
   }
 
   public async onSectionClick(id: string, index: number, showId: string): Promise<void> {
@@ -74,32 +134,6 @@ export class RemoteComponent {
   public async onBackground(presentationBackground: PresentationBackground, showId: string): Promise<void> {
     await this.showService.update$(showId, {presentationBackground});
   }
-  public presentationDynamicTextChanged$ = new Subject<{presentationDynamicText: string; showId: string}>();
-
-  public constructor(
-    private showService: ShowService,
-    private showSongService: ShowSongService,
-    private songService: SongService,
-    private textRenderingService: TextRenderingService,
-    private globalSettingsService: GlobalSettingsService,
-    private cRef: ChangeDetectorRef
-  ) {
-    globalSettingsService.get$
-      .pipe(
-        filter(_ => !!_),
-        map(_ => _ as GlobalSettings),
-        map(_ => _.currentShow)
-      )
-      .subscribe(_ => {
-        this.onShowChanged(_);
-        this.cRef.markForCheck();
-      });
-
-    this.presentationDynamicCaptionChanged$
-      .pipe(debounceTime(1000))
-      .subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicCaption: _.presentationDynamicCaption}));
-    this.presentationDynamicTextChanged$.pipe(debounceTime(1000)).subscribe(_ => void this.showService.update$(_.showId, {presentationDynamicText: _.presentationDynamicText}));
-  }
 
   public onDynamicCaption(presentationDynamicCaption: string, showId: string): void {
     this.presentationDynamicCaptionChanged$.next({presentationDynamicCaption, showId});

src/app/modules/presentation/select/select.component.html

@@ -1,11 +1,11 @@
 <div *ngIf="shows$ | async as shows" @fade>
-  <app-card heading="Bitte eine Veranstaltung auswählen" *ngIf="visible">
+  <app-card *ngIf="visible" heading="Bitte eine Veranstaltung auswählen">
     <p *ngIf="!shows.length">
       Es ist derzeit keine Veranstaltung vorhanden
     </p>
 
     <div *ngIf="shows.length>0" class="list">
-      <button mat-stroked-button *ngFor="let show of shows" (click)="selectShow(show)">
+      <button (click)="selectShow(show)" *ngFor="let show of shows" mat-stroked-button>
         <app-user-name [userId]="show.owner"></app-user-name>
         ,
         {{ show.showType | showType }},

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

@@ -5,21 +5,31 @@ import {Show} from '../../shows/services/show';
 import {GlobalSettingsService} from '../../../services/global-settings.service';
 import {Router} from '@angular/router';
 import {fade} from '../../../animations';
+import {AsyncPipe, DatePipe, NgFor, NgIf} from '@angular/common';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {MatButton} from '@angular/material/button';
+import {UserNameComponent} from '../../../services/user/user-name/user-name.component';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
   selector: 'app-select',
   templateUrl: './select.component.html',
   styleUrls: ['./select.component.less'],
   animations: [fade],
+  imports: [NgIf, CardComponent, NgFor, MatButton, UserNameComponent, AsyncPipe, DatePipe, ShowTypePipe],
 })
 export class SelectComponent implements OnInit {
-  public constructor(private showService: ShowService, private globalSettingsService: GlobalSettingsService, private router: Router) {}
   public visible = false;
-
   public shows$ = this.showService
     .list$(true)
     .pipe(map(_ => _.filter(_ => _.date.toDate() > new Date(new Date().setMonth(new Date().getMonth() - 1))).sort((a, b) => (b.date < a.date ? -1 : b.date > a.date ? 1 : 0))));
 
+  public constructor(
+    private showService: ShowService,
+    private globalSettingsService: GlobalSettingsService,
+    private router: Router
+  ) {}
+
   public async selectShow(show: Show) {
     this.visible = false;
 

src/app/modules/shows/dialog/archive-dialog/archive-dialog.component.spec.ts

@@ -8,7 +8,7 @@ describe('ArchiveDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ArchiveDialogComponent],
+      imports: [ArchiveDialogComponent],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ArchiveDialogComponent);
@@ -17,6 +17,6 @@ describe('ArchiveDialogComponent', () => {
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    void expect(component).toBeTruthy();
   });
 });

src/app/modules/shows/dialog/archive-dialog/archive-dialog.component.ts

@@ -1,8 +1,11 @@
 import {Component} from '@angular/core';
+import {MatDialogActions, MatDialogClose, MatDialogContent} from '@angular/material/dialog';
+import {MatButton} from '@angular/material/button';
 
 @Component({
   selector: 'app-archive-dialog',
   templateUrl: './archive-dialog.component.html',
   styleUrls: ['./archive-dialog.component.less'],
+  imports: [MatDialogContent, MatDialogActions, MatButton, MatDialogClose],
 })
 export class ArchiveDialogComponent {}

src/app/modules/shows/dialog/share-dialog/share-dialog.component.spec.ts

@@ -17,6 +17,6 @@ describe('ShareDialogComponent', () => {
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    void expect(component).toBeTruthy();
   });
 });

src/app/modules/shows/dialog/share-dialog/share-dialog.component.ts

@@ -2,7 +2,6 @@ import {Component, Inject} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent} from '@angular/material/dialog';
 import {MatButton} from '@angular/material/button';
 import QRCode from 'qrcode';
-import {AsyncPipe} from '@angular/common';
 import {ShowTypePipe} from '../../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 import {Show} from '../../services/show';
 
@@ -13,8 +12,7 @@ export interface ShareDialogData {
 
 @Component({
   selector: 'app-share-dialog',
-  standalone: true,
+  imports: [MatButton, MatDialogActions, MatDialogContent, MatDialogClose],
-  imports: [MatButton, MatDialogActions, MatDialogContent, MatDialogClose, AsyncPipe],
   templateUrl: './share-dialog.component.html',
   styleUrl: './share-dialog.component.less',
 })

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

@@ -7,12 +7,14 @@
           <mat-optgroup label="öffentlich">
             <mat-option *ngFor="let key of showTypePublic" [value]="key">{{
                 key | showType
-              }}</mat-option>
+              }}
+            </mat-option>
           </mat-optgroup>
           <mat-optgroup label="privat">
             <mat-option *ngFor="let key of showTypePrivate" [value]="key">{{
                 key | showType
-              }}</mat-option>
+              }}
+            </mat-option>
           </mat-optgroup>
         </mat-select>
       </mat-form-field>

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

@@ -3,17 +3,45 @@ import {ShowDataService} from '../services/show-data.service';
 import {Observable, take} from 'rxjs';
 import {Show} from '../services/show';
 import {ShowService} from '../services/show.service';
-import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
 import {faSave} from '@fortawesome/free-solid-svg-icons';
 import {map, switchMap} from 'rxjs/operators';
 import firebase from 'firebase/compat/app';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {MatFormField, MatLabel, MatSuffix} from '@angular/material/form-field';
+import {MatSelect} from '@angular/material/select';
+import {MatOptgroup, MatOption} from '@angular/material/core';
+import {NgFor} from '@angular/common';
+import {MatInput} from '@angular/material/input';
+import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/material/datepicker';
+import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 import Timestamp = firebase.firestore.Timestamp;
 
 @Component({
   selector: 'app-edit',
   templateUrl: './edit.component.html',
   styleUrls: ['./edit.component.less'],
+  imports: [
+    CardComponent,
+    ReactiveFormsModule,
+    MatFormField,
+    MatLabel,
+    MatSelect,
+    MatOptgroup,
+    NgFor,
+    MatOption,
+    MatInput,
+    MatDatepickerInput,
+    MatDatepickerToggle,
+    MatSuffix,
+    MatDatepicker,
+    ButtonRowComponent,
+    ButtonComponent,
+    ShowTypePipe,
+  ],
 })
 export class EditComponent implements OnInit {
   public shows$: Observable<Show[]>;
@@ -26,7 +54,12 @@ export class EditComponent implements OnInit {
   });
   public faSave = faSave;
 
-  public constructor(private showService: ShowService, showDataService: ShowDataService, private router: Router, private activatedRoute: ActivatedRoute) {
+  public constructor(
+    private showService: ShowService,
+    showDataService: ShowDataService,
+    private router: Router,
+    private activatedRoute: ActivatedRoute
+  ) {
     this.shows$ = showDataService.list$;
   }
 
@@ -55,13 +88,10 @@ export class EditComponent implements OnInit {
       return;
     }
 
-    await this.showService.update$(
+    await this.showService.update$(this.form.value.id, {
-      this.form.value.id as string,
-      {
       date: Timestamp.fromDate(this.form.value.date),
       showType: this.form.value.showType,
-      } as Partial<Show>
+    } as Partial<Show>);
-    );
     await this.router.navigateByUrl(`/shows/${this.form.value.id ?? ''}`);
   }
 }

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

@@ -6,7 +6,8 @@
       <mat-select formControlName="time">
         <mat-option *ngFor="let time of times" [value]="time.key">{{
             time.value
-          }}</mat-option>
+          }}
+        </mat-option>
       </mat-select>
     </mat-form-field>
 

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

@@ -8,7 +8,7 @@ describe('FilterComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [FilterComponent],
+      imports: [FilterComponent],
     }).compileComponents();
   });
 
@@ -19,6 +19,6 @@ describe('FilterComponent', () => {
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    void expect(component).toBeTruthy();
   });
 });

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

@@ -1,7 +1,7 @@
 import {Component, Input} from '@angular/core';
-import {KeyValue} from '@angular/common';
+import {KeyValue, NgFor} from '@angular/common';
 import {ActivatedRoute, Router} from '@angular/router';
-import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
+import {ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
 import {FilterValues} from './filter-values';
 import {Show} from '../../services/show';
 import {ShowService} from '../../services/show.service';
@@ -10,11 +10,16 @@ import {combineLatest, Observable} from 'rxjs';
 import {dynamicSort, onlyUnique} from '../../../../services/filter.helper';
 import {UserService} from '../../../../services/user/user.service';
 import {isEqual} from 'lodash';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatSelect} from '@angular/material/select';
+import {MatOptgroup, MatOption} from '@angular/material/core';
+import {ShowTypePipe} from '../../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
   selector: 'app-filter',
   templateUrl: './filter.component.html',
   styleUrls: ['./filter.component.less'],
+  imports: [ReactiveFormsModule, MatFormField, MatLabel, MatSelect, NgFor, MatOption, MatOptgroup, ShowTypePipe],
 })
 export class FilterComponent {
   @Input() public route = '/shows/';

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

@@ -1,5 +1,7 @@
-<div class="list-item" *ngIf="show">
+<div *ngIf="show" class="list-item">
   <div>{{ show.date.toDate() | date: "dd.MM.yyyy" }}</div>
-  <div><app-user-name [userId]="show.owner"></app-user-name></div>
+  <div>
+    <app-user-name [userId]="show.owner"></app-user-name>
+  </div>
   <div>{{ show.showType | showType }}</div>
 </div>

src/app/modules/shows/list/list-item/list-item.component.spec.ts

@@ -6,13 +6,11 @@ describe('ListItemComponent', () => {
   let component: ListItemComponent;
   let fixture: ComponentFixture<ListItemComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [ListItemComponent],
+      imports: [ListItemComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ListItemComponent);

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

@@ -1,10 +1,14 @@
 import {Component, Input} from '@angular/core';
 import {Show} from '../../services/show';
+import {DatePipe, NgIf} from '@angular/common';
+import {UserNameComponent} from '../../../../services/user/user-name/user-name.component';
+import {ShowTypePipe} from '../../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
   selector: 'app-list-item',
   templateUrl: './list-item.component.html',
   styleUrls: ['./list-item.component.less'],
+  imports: [NgIf, UserNameComponent, DatePipe, ShowTypePipe],
 })
 export class ListItemComponent {
   @Input() public show: Show | null = null;

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

@@ -6,13 +6,11 @@ describe('ListComponent', () => {
   let component: ListComponent;
   let fixture: ComponentFixture<ListComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [ListComponent],
+      imports: [ListComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ListComponent);

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

@@ -4,14 +4,22 @@ import {Show} from '../services/show';
 import {fade} from '../../../animations';
 import {ShowService} from '../services/show.service';
 import {FilterValues} from './filter/filter-values';
-import {ActivatedRoute} from '@angular/router';
+import {ActivatedRoute, RouterLink} from '@angular/router';
 import {map} from 'rxjs/operators';
+import {RoleDirective} from '../../../services/user/role.directive';
+import {ListHeaderComponent} from '../../../widget-modules/components/list-header/list-header.component';
+import {AsyncPipe, NgFor, NgIf} from '@angular/common';
+import {FilterComponent} from './filter/filter.component';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {ListItemComponent} from './list-item/list-item.component';
+import {SortByPipe} from '../../../widget-modules/pipes/sort-by/sort-by.pipe';
 
 @Component({
   selector: 'app-list',
   templateUrl: './list.component.html',
   styleUrls: ['./list.component.less'],
   animations: [fade],
+  imports: [RoleDirective, ListHeaderComponent, NgIf, FilterComponent, CardComponent, NgFor, ListItemComponent, RouterLink, AsyncPipe, SortByPipe],
 })
 export class ListComponent {
   public shows$ = this.showService.list$();

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

@@ -7,12 +7,14 @@
           <mat-optgroup label="öffentlich">
             <mat-option *ngFor="let key of showTypePublic" [value]="key">{{
                 key | showType
-              }}</mat-option>
+              }}
+            </mat-option>
           </mat-optgroup>
           <mat-optgroup label="privat">
             <mat-option *ngFor="let key of showTypePrivate" [value]="key">{{
                 key | showType
-              }}</mat-option>
+              }}
+            </mat-option>
           </mat-optgroup>
         </mat-select>
       </mat-form-field>

src/app/modules/shows/new/new.component.spec.ts

@@ -6,13 +6,11 @@ describe('NewComponent', () => {
   let component: NewComponent;
   let fixture: ComponentFixture<NewComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [NewComponent],
+      imports: [NewComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(NewComponent);

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

@@ -3,14 +3,42 @@ import {ShowDataService} from '../services/show-data.service';
 import {Observable} from 'rxjs';
 import {Show} from '../services/show';
 import {ShowService} from '../services/show.service';
-import {UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
+import {ReactiveFormsModule, UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
 import {faSave} from '@fortawesome/free-solid-svg-icons';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {MatFormField, MatLabel, MatSuffix} from '@angular/material/form-field';
+import {MatSelect} from '@angular/material/select';
+import {MatOptgroup, MatOption} from '@angular/material/core';
+import {NgFor} from '@angular/common';
+import {MatInput} from '@angular/material/input';
+import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/material/datepicker';
+import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
   selector: 'app-new',
   templateUrl: './new.component.html',
   styleUrls: ['./new.component.less'],
+  imports: [
+    CardComponent,
+    ReactiveFormsModule,
+    MatFormField,
+    MatLabel,
+    MatSelect,
+    MatOptgroup,
+    NgFor,
+    MatOption,
+    MatInput,
+    MatDatepickerInput,
+    MatDatepickerToggle,
+    MatSuffix,
+    MatDatepicker,
+    ButtonRowComponent,
+    ButtonComponent,
+    ShowTypePipe,
+  ],
 })
 export class NewComponent implements OnInit {
   public shows$: Observable<Show[]>;

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

@@ -4,7 +4,6 @@ import {ShowService} from './show.service';
 import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 import {ShowSongService} from './show-song.service';
 import {Song} from '../../songs/services/song';
-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';
@@ -30,7 +29,6 @@ export class DocxService {
   public constructor(
     private showService: ShowService,
     private showSongService: ShowSongService,
-    private songService: SongService,
     private textRenderingService: TextRenderingService,
     private userService: UserService,
     private configService: ConfigService
@@ -94,7 +92,14 @@ export class DocxService {
     });
   }
 
-  private renderSongs(songs: {showSong: ShowSong; sections: Section[]}[], options: DownloadOptions, config: Config): Paragraph[] {
+  private renderSongs(
+    songs: {
+      showSong: ShowSong;
+      sections: Section[];
+    }[],
+    options: DownloadOptions,
+    config: Config
+  ): Paragraph[] {
     return songs.reduce((p: Paragraph[], song) => [...p, ...this.renderSong(song.showSong, song.showSong, song.sections, options, config)], []);
   }
 
@@ -199,8 +204,16 @@ export class DocxService {
         sections,
       };
     });
-    const songsLoaded = (await Promise.all(songsAsync)).filter(_ => !!_).map(_ => _ as {showSong: ShowSong; sections: Section[]});
+    const songsLoaded = (await Promise.all(songsAsync))
-    const songs = show.order.map(_ => songsLoaded.filter(f => f.showSong.id === _)[0]);
+      .filter(_ => !!_)
+      .map(
+        _ =>
+          _ as {
+            showSong: ShowSong;
+            sections: Section[];
+          }
+      );
+    const songs = show.order.map(_ => songsLoaded.find(f => f.showSong.id === _)).filter(_ => !!_);
     return {songs, show, user, config};
   }
 

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

@@ -8,6 +8,7 @@ import {map} from 'rxjs/operators';
   providedIn: 'root',
 })
 export class ShowDataService {
+  public list$ = new BehaviorSubject<Show[]>([]);
   private collection = 'shows';
 
   public constructor(private dbService: DbService) {
@@ -15,7 +16,7 @@ export class ShowDataService {
   }
 
   public listRaw$ = () => this.dbService.col$<Show>(this.collection);
-  public list$ = new BehaviorSubject<Show[]>([]);
+
   public read$ = (showId: string): Observable<Show | null> => this.list$.pipe(map(_ => _.find(s => s.id === showId) || null));
 
   // public list$ = (): Observable<Show[]> => this.dbService.col$(this.collection);

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

@@ -15,7 +15,10 @@ export class ShowService {
   public static SHOW_TYPE_PRIVATE = ['home-group', 'prayer-group', 'misc-private'];
   private user: User | null = null;
 
-  public constructor(private showDataService: ShowDataService, private userService: UserService) {
+  public constructor(
+    private showDataService: ShowDataService,
+    private userService: UserService
+  ) {
     userService.user$.subscribe(_ => (this.user = _));
   }
 

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

@@ -14,28 +14,29 @@
         <mat-checkbox *ngIf="!useSwiper" [(ngModel)]="showText">Text anzeigen</mat-checkbox>
       </div>
       <div [class.floating]="useSwiper">
-        <app-menu-button @fade (click)="onZoomOut()" [icon]="faZoomOut" class="btn-delete btn-icon"
+        <app-menu-button (click)="onZoomOut()" @fade [icon]="faZoomOut" class="btn-delete btn-icon"
                          matTooltip="Verkleinern"></app-menu-button>
-        <app-menu-button @fade (click)="onZoomIn()" [icon]="faZoomIn" class="btn-delete btn-icon"
+        <app-menu-button (click)="onZoomIn()" @fade [icon]="faZoomIn" class="btn-delete btn-icon"
                          matTooltip="Vergrößern"></app-menu-button>
         <app-menu-button (click)="useSwiper=!useSwiper;fullscreen(useSwiper)" @fade
                          [icon]="useSwiper ? faFileLines : faFile" class="btn-delete btn-icon"
                          matTooltip="Swiper umschalten"></app-menu-button>
       </div>
     </div>
-    <div *ngIf="showSongs && !useSwiper" [cdkDropListDisabled]="show.published || showText" cdkDropList
+    <div (cdkDropListDropped)="drop($event, show)" *ngIf="showSongs && !useSwiper"
-         class="song-list"
+         [cdkDropListDisabled]="show.published || showText"
          [style.cursor]="!(show.published || showText) ? 'drag' : 'inherit'"
          [style.font-size]="textSize + 'em'"
-         (cdkDropListDropped)="drop($event, show)">
+         cdkDropList
-      <div *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy" class="song-row" cdkDrag>
+         class="song-list">
+      <div *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy" cdkDrag class="song-row">
         <app-song
-          [showSong]="song"
-          [showId]="showId"
-          [showText]="showText"
-          [show]="show"
           [fullscreen]="useSwiper"
           [index]="i"
+          [showId]="showId"
+          [showSong]="song"
+          [showText]="showText"
+          [show]="show"
         ></app-song>
       </div>
     </div>
@@ -52,13 +53,16 @@
           [showText]="true"
           [show]="show"
         ></app-song>
+        <div *ngIf="getNextSong(orderedShowSongs(show), i) as next" class="next-song">{{ next }}
+          <fa-icon [icon]="faNextSong"></fa-icon>
+        </div>
       </swiper-slide>
     </swiper-container>
 
     <app-add-song
       *ngIf="songs && !show.published && !useSwiper"
-      [show]="show"
       [showSongs]="showSongs"
+      [show]="show"
       [songs]="songs"
     ></app-add-song>
 
@@ -80,7 +84,7 @@
           <app-button (click)="onShare(show)" *ngIf="show.published" [icon]="faShare">
             Teilen
           </app-button>
-          <app-button (click)="onChange(show.id)" [icon]="faSliders" *ngIf="!show.published">
+          <app-button (click)="onChange(show.id)" *ngIf="!show.published" [icon]="faSliders">
             Ändern
           </app-button>
         </ng-container>

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

@@ -49,3 +49,14 @@
   top: 12px;
   z-index: 5;
 }
+
+.next-song {
+  color: #0008;
+  position: fixed;
+  bottom: 0;
+  right: 10px;
+
+  fa-icon {
+    padding: 6px;
+  }
+}

src/app/modules/shows/show/show.component.spec.ts

@@ -6,13 +6,11 @@ describe('ShowComponent', () => {
   let component: ShowComponent;
   let fixture: ComponentFixture<ShowComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [ShowComponent],
+      imports: [ShowComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ShowComponent);

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

@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit} from '@angular/core';
+import {ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, HostListener, OnDestroy, OnInit} from '@angular/core';
 import {filter, map, switchMap, tap} from 'rxjs/operators';
 import {ActivatedRoute, Router} from '@angular/router';
 import {ShowService} from '../services/show.service';
@@ -10,33 +10,76 @@ import {ShowSongService} from '../services/show-song.service';
 import {ShowSong} from '../services/show-song';
 import {DocxService} from '../services/docx.service';
 import {
+  faArrowUpRightFromSquare,
   faBox,
   faBoxOpen,
-  faExternalLinkAlt,
+  faChevronRight,
   faFile,
   faFileDownload,
   faFileLines,
   faLock,
   faMagnifyingGlassMinus,
   faMagnifyingGlassPlus,
-  faShare,
   faSliders,
+  faUnlock,
   faUser,
   faUsers,
 } from '@fortawesome/free-solid-svg-icons';
-import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
+import {CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop';
 import {fade} from '../../../animations';
 import {MatDialog} from '@angular/material/dialog';
 import {ArchiveDialogComponent} from '../dialog/archive-dialog/archive-dialog.component';
 import {closeFullscreen, openFullscreen} from '../../../services/fullscreen';
 import {GuestShowService} from '../../guest/guest-show.service';
 import {ShareDialogComponent} from '../dialog/share-dialog/share-dialog.component';
+import {AsyncPipe, DatePipe, NgFor, NgIf} from '@angular/common';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {UserNameComponent} from '../../../services/user/user-name/user-name.component';
+import {MatCheckbox} from '@angular/material/checkbox';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MenuButtonComponent} from '../../../widget-modules/components/menu-button/menu-button.component';
+import {MatTooltip} from '@angular/material/tooltip';
+import {SongComponent} from './song/song.component';
+import {FaIconComponent} from '@fortawesome/angular-fontawesome';
+import {AddSongComponent} from '../../../widget-modules/components/add-song/add-song.component';
+import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
+import {RoleDirective} from '../../../services/user/role.directive';
+import {OwnerDirective} from '../../../services/user/owner.directive';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
+import {MatMenu, MatMenuTrigger} from '@angular/material/menu';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
   selector: 'app-show',
   templateUrl: './show.component.html',
   styleUrls: ['./show.component.less'],
   animations: [fade],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [
+    NgIf,
+    CardComponent,
+    UserNameComponent,
+    MatCheckbox,
+    ReactiveFormsModule,
+    FormsModule,
+    MenuButtonComponent,
+    MatTooltip,
+    CdkDropList,
+    NgFor,
+    CdkDrag,
+    SongComponent,
+    FaIconComponent,
+    AddSongComponent,
+    ButtonRowComponent,
+    RoleDirective,
+    OwnerDirective,
+    ButtonComponent,
+    MatMenuTrigger,
+    MatMenu,
+    AsyncPipe,
+    DatePipe,
+    ShowTypePipe,
+  ],
 })
 export class ShowComponent implements OnInit, OnDestroy {
   public show$: Observable<Show | null> | null = null;
@@ -47,17 +90,21 @@ export class ShowComponent implements OnInit, OnDestroy {
 
   public faBox = faBox;
   public faBoxOpen = faBoxOpen;
-  public faPublish = faExternalLinkAlt;
+  public faPublish = faUnlock;
   public faUnpublish = faLock;
-  public faShare = faShare;
+  public faShare = faArrowUpRightFromSquare;
   public faDownload = faFileDownload;
   public faSliders = faSliders;
   public faUser = faUser;
   public faUsers = faUsers;
   public faZoomIn = faMagnifyingGlassPlus;
   public faZoomOut = faMagnifyingGlassMinus;
-  private subs: Subscription[] = [];
   public useSwiper = false;
+  public textSize = 1;
+  public faFileLines = faFileLines;
+  public faFile = faFile;
+  public faNextSong = faChevronRight;
+  private subs: Subscription[] = [];
 
   public constructor(
     private activatedRoute: ActivatedRoute,
@@ -104,8 +151,6 @@ export class ShowComponent implements OnInit, OnDestroy {
     this.subs.forEach(_ => _.unsubscribe());
   }
 
-  public textSize = 1;
-
   public onZoomIn() {
     this.textSize += 0.1;
   }
@@ -170,15 +215,12 @@ export class ShowComponent implements OnInit, OnDestroy {
     return show.order.map(_ => list.filter(f => f.id === _)[0]);
   }
 
-  public trackBy = (_: number, show: ShowSong) => show.id;
+  public trackBy = (_: number, show: ShowSong) => show?.id;
 
   public async onChange(showId: string) {
     await this.router.navigateByUrl('/shows/' + showId + '/edit');
   }
 
-  public faFileLines = faFileLines;
-  public faFile = faFile;
-
   @HostListener('document:keydown', ['$event'])
   public handleKeyboardEvent(event: KeyboardEvent) {
     const swiperEl = document.querySelector('swiper-container') as unknown as Swiper;
@@ -198,6 +240,12 @@ export class ShowComponent implements OnInit, OnDestroy {
     if (useSwiper) openFullscreen();
     else closeFullscreen();
   }
+
+  public getNextSong(showSongs: ShowSong[], i: number): string {
+    if (!showSongs || showSongs.length === 0) return '';
+    const song = showSongs[i + 1];
+    return song?.title ?? '';
+  }
 }
 
 export interface Swiper {

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

@@ -23,11 +23,11 @@
 
   <mat-form-field *ngIf="edit" appearance="outline">
     <mat-label>Songtext</mat-label>
-    <textarea matTooltip="Tonart ändern"
+    <textarea [cdkTextareaAutosize]="true"
-              class="edit"
-              [cdkTextareaAutosize]="true"
               [formControl]="editSongControl"
+              class="edit"
               matInput
+              matTooltip="Tonart ändern"
     ></textarea>
   </mat-form-field>
   <div *ngIf="edit">Es wird nur der Liedtext für dieser Veranstaltung geändert.</div>

src/app/modules/shows/show/song/song.component.spec.ts

@@ -6,13 +6,11 @@ describe('SongComponent', () => {
   let component: SongComponent;
   let fixture: ComponentFixture<SongComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [SongComponent],
+      imports: [SongComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SongComponent);

src/app/modules/shows/show/song/song.component.ts

@@ -2,18 +2,43 @@ import {Component, Input, OnInit, ViewChild} from '@angular/core';
 import {ShowSongService} from '../../services/show-song.service';
 import {ShowSong} from '../../services/show-song';
 import {getScale} from '../../../songs/services/key.helper';
-import {UntypedFormControl} from '@angular/forms';
+import {ReactiveFormsModule, UntypedFormControl} from '@angular/forms';
-import {ChordMode} from '../../../../widget-modules/components/song-text/song-text.component';
+import {ChordMode, SongTextComponent} from '../../../../widget-modules/components/song-text/song-text.component';
 import {Show} from '../../services/show';
 import {faEraser, faPenToSquare, faSave, faTrash} from '@fortawesome/free-solid-svg-icons';
 import {fade} from '../../../../animations';
 import {MatSelect} from '@angular/material/select';
+import {NgFor, NgIf} from '@angular/common';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatOption} from '@angular/material/core';
+import {MenuButtonComponent} from '../../../../widget-modules/components/menu-button/menu-button.component';
+import {MatTooltip} from '@angular/material/tooltip';
+import {MatInput} from '@angular/material/input';
+import {CdkTextareaAutosize} from '@angular/cdk/text-field';
+import {ButtonRowComponent} from '../../../../widget-modules/components/button-row/button-row.component';
+import {ButtonComponent} from '../../../../widget-modules/components/button/button.component';
 
 @Component({
   selector: 'app-song',
   templateUrl: './song.component.html',
   styleUrls: ['./song.component.less'],
   animations: [fade],
+  imports: [
+    NgIf,
+    MatFormField,
+    MatSelect,
+    ReactiveFormsModule,
+    NgFor,
+    MatOption,
+    MenuButtonComponent,
+    MatTooltip,
+    MatLabel,
+    MatInput,
+    CdkTextareaAutosize,
+    ButtonRowComponent,
+    ButtonComponent,
+    SongTextComponent,
+  ],
 })
 export class SongComponent implements OnInit {
   @Input() public show: Show | null = null;
@@ -21,9 +46,6 @@ export class SongComponent implements OnInit {
   @Input() public showText: boolean | null = null;
   @Input() public index = -1;
   @Input() public fullscreen = false;
-
-  @ViewChild('option') private keyOptions: MatSelect;
-
   public keys: string[] = [];
   public faDelete = faTrash;
   public faEdit = faPenToSquare;
@@ -33,6 +55,7 @@ export class SongComponent implements OnInit {
   public iSong: ShowSong | null = null;
   public edit = false;
   public editSongControl = new UntypedFormControl();
+  @ViewChild('option') private keyOptions: MatSelect;
 
   public constructor(private showSongService: ShowSongService) {}
 

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

@@ -3,72 +3,69 @@ import {CommonModule} from '@angular/common';
 
 import {ShowsRoutingModule} from './shows-routing.module';
 import {NewComponent} from './new/new.component';
-import {CardModule} from '../../widget-modules/components/card/card.module';
+
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
 import {ListComponent} from './list/list.component';
 import {ListItemComponent} from './list/list-item/list-item.component';
-import {ListHeaderModule} from '../../widget-modules/components/list-header/list-header.module';
+
 import {MatCheckboxModule} from '@angular/material/checkbox';
-import {ButtonRowModule} from '../../widget-modules/components/button-row/button-row.module';
+
 import {MatButtonModule} from '@angular/material/button';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatSelectModule} from '@angular/material/select';
-import {ShowTypeTranslaterModule} from '../../widget-modules/pipes/show-type-translater/show-type-translater.module';
 import {MatNativeDateModule} from '@angular/material/core';
 import {ShowComponent} from './show/show.component';
 import {SongComponent} from './show/song/song.component';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-import {MenuButtonModule} from '../../widget-modules/components/menu-button/menu-button.module';
+
-import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module';
 import {NgxMatSelectSearchModule} from 'ngx-mat-select-search';
-import {AddSongModule} from '../../widget-modules/components/add-song/add-song.module';
+
-import {ButtonModule} from '../../widget-modules/components/button/button.module';
-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';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {FilterComponent} from './list/filter/filter.component';
 import {EditComponent} from './edit/edit.component';
 import {ArchiveDialogComponent} from './dialog/archive-dialog/archive-dialog.component';
 import {MatDialogModule} from '@angular/material/dialog';
+import {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
+import {AddSongComponent} from '../../widget-modules/components/add-song/add-song.component';
+import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import {SortByPipe} from '../../widget-modules/pipes/sort-by/sort-by.pipe';
 
 @NgModule({
-  declarations: [NewComponent, ListComponent, ListItemComponent, ShowComponent, SongComponent, FilterComponent, EditComponent, ArchiveDialogComponent],
   imports: [
     CommonModule,
     ShowsRoutingModule,
-    CardModule,
     MatFormFieldModule,
     ReactiveFormsModule,
     MatInputModule,
-    ListHeaderModule,
     MatCheckboxModule,
-    ButtonRowModule,
     MatButtonModule,
     MatDatepickerModule,
     MatNativeDateModule,
     MatSelectModule,
-    ShowTypeTranslaterModule,
+    ShowTypePipe,
     FontAwesomeModule,
-    MenuButtonModule,
     FormsModule,
-    SongTextModule,
+    SongTextComponent,
     NgxMatSelectSearchModule,
-    AddSongModule,
+    AddSongComponent,
-    ButtonModule,
-    OwnerModule,
-    UserNameModule,
     MatMenuModule,
     DragDropModule,
-    RoleModule,
+    SortByPipe,
-    SortByModule,
     MatTooltipModule,
     MatDialogModule,
+    NewComponent,
+    ListComponent,
+    ListItemComponent,
+    ShowComponent,
+    SongComponent,
+    FilterComponent,
+    EditComponent,
+    ArchiveDialogComponent,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })

src/app/modules/songs/services/file.service.ts

@@ -7,7 +7,10 @@ import {FileDataService} from './file-data.service';
   providedIn: 'root',
 })
 export class FileService {
-  public constructor(private storage: AngularFireStorage, private fileDataService: FileDataService) {}
+  public constructor(
+    private storage: AngularFireStorage,
+    private fileDataService: FileDataService
+  ) {}
 
   public getDownloadUrl(path: string): Observable<string> {
     const ref = this.storage.ref(path);

src/app/modules/songs/services/section-type.ts

@@ -2,4 +2,5 @@ export enum SectionType {
   Verse,
   Chorus,
   Bridge,
+  Comment,
 }

src/app/modules/songs/services/song-data.service.spec.ts

@@ -1,8 +1,8 @@
-import {TestBed, waitForAsync} from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
 import {SongDataService} from './song-data.service';
 import {AngularFirestore} from '@angular/fire/compat/firestore';
-import {of} from 'rxjs';
+import {firstValueFrom, of} from 'rxjs';
 
 describe('SongDataService', () => {
   const songs = [{title: 'title1'}];
@@ -27,13 +27,9 @@ describe('SongDataService', () => {
     void expect(service).toBeTruthy();
   });
 
-  it(
+  it('should list songs', async () => {
-    'should list songs',
-    waitForAsync(() => {
     const service: SongDataService = TestBed.inject(SongDataService);
-      service.list$().subscribe(s => {
+    const list = await firstValueFrom(service.list$);
-        void expect(s[0].title).toEqual('title1');
+    void expect(list[0].title).toEqual('title1');
   });
-    })
-  );
 });

src/app/modules/songs/services/song-data.service.ts

@@ -8,14 +8,15 @@ import {map} from 'rxjs/operators';
   providedIn: 'root',
 })
 export class SongDataService {
+  public list$ = new BehaviorSubject<Song[]>([]);
   private collection = 'songs';
 
   public constructor(private dbService: DbService) {
     this.dbService.col$<Song>(this.collection).subscribe(_ => this.list$.next(_));
   }
 
-  public list$ = new BehaviorSubject<Song[]>([]);
   // public list$ = (): Observable<Song[]> => this.dbService.col$(this.collection);
+
   //public read$ = (songId: string): Observable<Song | null> => this.dbService.doc$(this.collection + '/' + songId);
   public read$ = (songId: string): Observable<Song | null> => this.list$.pipe(map(_ => _.find(s => s.id === songId) || null));
   public update$ = async (songId: string, data: Partial<Song>): Promise<void> => await this.dbService.doc(this.collection + '/' + songId).update(data);

src/app/modules/songs/services/song.service.spec.ts

@@ -23,13 +23,10 @@ describe('SongService', () => {
     void expect(service).toBeTruthy();
   });
 
-  it(
+  it('should list songs', waitForAsync(() => {
-    'should list songs',
-    waitForAsync(() => {
     const service: SongService = TestBed.inject(SongService);
     service.list$().subscribe(s => {
       void expect(s[0].title).toEqual('title1');
     });
-    })
+  }));
-  );
 });

src/app/modules/songs/services/text-rendering.service.ts

@@ -15,11 +15,11 @@ export class TextRenderingService {
 
   public constructor(private transposeService: TransposeService) {}
 
-  public parse(text: string, transpose: TransposeMode | null): Section[] {
+  public parse(text: string, transpose: TransposeMode | null, withComments = true): Section[] {
     if (!text) {
       return [];
     }
-    const arrayOfLines = text.split(/\r?\n/).filter(_ => _);
+    const arrayOfLines = text.split(/\r?\n/).filter(_ => _ && (!_.startsWith('#') || withComments));
     const indices = {
       [SectionType.Bridge]: 0,
       [SectionType.Chorus]: 0,

src/app/modules/songs/services/upload.service.ts

@@ -10,7 +10,10 @@ import {FileServer} from './fileServer';
   providedIn: 'root',
 })
 export class UploadService extends FileBase {
-  public constructor(private fileDataService: FileDataService, private angularFireStorage: AngularFireStorage) {
+  public constructor(
+    private fileDataService: FileDataService,
+    private angularFireStorage: AngularFireStorage
+  ) {
     super();
   }
 

src/app/modules/songs/song-list/filter/filter.component.html

@@ -11,7 +11,8 @@
         <mat-option [value]="null">- kein Filter -</mat-option>
         <mat-option *ngFor="let type of types" [value]="type">{{
             type | songType
-          }}</mat-option>
+          }}
+        </mat-option>
       </mat-select>
     </mat-form-field>
 
@@ -21,7 +22,8 @@
         <mat-option [value]="null">- kein Filter -</mat-option>
         <mat-option *ngFor="let key of keys" [value]="key">{{
             key | key
-          }}</mat-option>
+          }}
+        </mat-option>
       </mat-select>
     </mat-form-field>
 
@@ -31,7 +33,8 @@
         <mat-option [value]="null">- kein Filter -</mat-option>
         <mat-option *ngFor="let key of legalType" [value]="key">{{
             key | legalType
-          }}</mat-option>
+          }}
+        </mat-option>
       </mat-select>
     </mat-form-field>
 
@@ -41,7 +44,8 @@
         <mat-option [value]="null">- kein Filter -</mat-option>
         <mat-option *ngFor="let flag of getFlags()" [value]="flag">{{
             flag
-          }}</mat-option>
+          }}
+        </mat-option>
       </mat-select>
     </mat-form-field>
   </div>

src/app/modules/songs/song-list/filter/filter.component.spec.ts

@@ -6,13 +6,11 @@ describe('FilterComponent', () => {
   let component: FilterComponent;
   let fixture: ComponentFixture<FilterComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [FilterComponent],
+      imports: [FilterComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(FilterComponent);

src/app/modules/songs/song-list/filter/filter.component.ts

@@ -1,15 +1,24 @@
 import {Component, Input} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
-import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
+import {ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
 import {SongService} from '../../services/song.service';
 import {FilterValues} from './filter-values';
 import {Song} from '../../services/song';
 import {KEYS} from '../../services/key.helper';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatInput} from '@angular/material/input';
+import {MatSelect} from '@angular/material/select';
+import {MatOption} from '@angular/material/core';
+import {NgFor} from '@angular/common';
+import {LegalTypePipe} from '../../../../widget-modules/pipes/legal-type-translator/legal-type.pipe';
+import {KeyPipe} from '../../../../widget-modules/pipes/key-translator/key.pipe';
+import {SongTypePipe} from '../../../../widget-modules/pipes/song-type-translater/song-type.pipe';
 
 @Component({
   selector: 'app-filter',
   templateUrl: './filter.component.html',
   styleUrls: ['./filter.component.less'],
+  imports: [ReactiveFormsModule, MatFormField, MatLabel, MatInput, MatSelect, MatOption, NgFor, LegalTypePipe, KeyPipe, SongTypePipe],
 })
 export class FilterComponent {
   public filterFormGroup: UntypedFormGroup;
@@ -19,7 +28,11 @@ export class FilterComponent {
   public legalType = SongService.LEGAL_TYPE;
   public keys = KEYS;
 
-  public constructor(private router: Router, activatedRoute: ActivatedRoute, fb: UntypedFormBuilder) {
+  public constructor(
+    private router: Router,
+    activatedRoute: ActivatedRoute,
+    fb: UntypedFormBuilder
+  ) {
     this.filterFormGroup = fb.group({
       q: '',
       type: '',

src/app/modules/songs/song-list/song-list.component.html

@@ -9,11 +9,19 @@
       <div>{{ song.title }}</div>
       <div>
         <ng-container *appRole="['contributor']">
-          <div *ngIf="song.status === 'draft'" class="warning"><fa-icon [icon]="faDraft"></fa-icon></div>
+          <div *ngIf="song.status === 'draft'" class="warning">
-          <div *ngIf="song.status === 'set'" class="neutral"><fa-icon [icon]="faDraft"></fa-icon></div>
+            <fa-icon [icon]="faDraft"></fa-icon>
-          <div *ngIf="song.status === 'final'" class="success"><fa-icon [icon]="faFinal"></fa-icon></div>
+          </div>
+          <div *ngIf="song.status === 'set'" class="neutral">
+            <fa-icon [icon]="faDraft"></fa-icon>
+          </div>
+          <div *ngIf="song.status === 'final'" class="success">
+            <fa-icon [icon]="faFinal"></fa-icon>
+          </div>
         </ng-container>
-        <div *ngIf="song.legalType === 'open'" class="warning" ><fa-icon [icon]="faLegal"></fa-icon></div>
+        <div *ngIf="song.legalType === 'open'" class="warning">
+          <fa-icon [icon]="faLegal"></fa-icon>
+        </div>
       </div>
       <div>{{ song.key }}</div>
     </div>

src/app/modules/songs/song-list/song-list.component.spec.ts

@@ -15,15 +15,13 @@ describe('SongListComponent', () => {
     list: () => of(songs),
   };
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [SongListComponent],
+      imports: [SongListComponent],
       providers: [{provide: SongService, useValue: mockSongService}],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SongListComponent);

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

@@ -4,11 +4,17 @@ import {Song} from '../services/song';
 import {map} from 'rxjs/operators';
 import {combineLatest, Observable} from 'rxjs';
 import {fade} from '../../../animations';
-import {ActivatedRoute} from '@angular/router';
+import {ActivatedRoute, RouterLink} from '@angular/router';
 import {filterSong} from '../../../services/filter.helper';
 import {FilterValues} from './filter/filter-values';
 import {ScrollService} from '../../../services/scroll.service';
 import {faBalanceScaleRight, faCheck, faPencilRuler} from '@fortawesome/free-solid-svg-icons';
+import {AsyncPipe, NgFor, NgIf} from '@angular/common';
+import {ListHeaderComponent} from '../../../widget-modules/components/list-header/list-header.component';
+import {FilterComponent} from './filter/filter.component';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {RoleDirective} from '../../../services/user/role.directive';
+import {FaIconComponent} from '@fortawesome/angular-fontawesome';
 
 @Component({
   selector: 'app-songs',
@@ -16,8 +22,10 @@ import {faBalanceScaleRight, faCheck, faPencilRuler} from '@fortawesome/free-sol
   styleUrls: ['./song-list.component.less'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [fade],
+  imports: [NgIf, ListHeaderComponent, FilterComponent, CardComponent, NgFor, RouterLink, RoleDirective, FaIconComponent, AsyncPipe],
 })
 export class SongListComponent implements OnInit, OnDestroy {
+  public anyFilterActive = false;
   public songs$: Observable<Song[]> | null = combineLatest([
     this.activatedRoute.queryParams.pipe(map(_ => _ as FilterValues)),
     this.activatedRoute.data.pipe(
@@ -32,12 +40,15 @@ export class SongListComponent implements OnInit, OnDestroy {
       return songs.filter(song => this.filter(song, filter)).sort((a, b) => a.title?.localeCompare(b.title));
     })
   );
-  public anyFilterActive = false;
   public faLegal = faBalanceScaleRight;
   public faDraft = faPencilRuler;
   public faFinal = faCheck;
 
-  public constructor(private songService: SongService, private activatedRoute: ActivatedRoute, private scrollService: ScrollService) {}
+  public constructor(
+    private songService: SongService,
+    private activatedRoute: ActivatedRoute,
+    private scrollService: ScrollService
+  ) {}
 
   public ngOnInit(): void {
     setTimeout(() => this.scrollService.restoreScrollPositionFor('songlist'), 100);
@@ -48,6 +59,8 @@ export class SongListComponent implements OnInit, OnDestroy {
     this.scrollService.storeScrollPositionFor('songlist');
   }
 
+  public trackBy = (index: number, show: Song) => show.id;
+
   private filter(song: Song, filter: FilterValues): boolean {
     let baseFilter = filterSong(song, filter.q);
     baseFilter = baseFilter && (!filter.type || filter.type === song.type);
@@ -74,6 +87,4 @@ export class SongListComponent implements OnInit, OnDestroy {
 
     return flagStrings.indexOf(flag) !== -1;
   }
-
-  public trackBy = (index: number, show: Song) => show.id;
 }

src/app/modules/songs/song-list/song-list.module.ts

@@ -1,40 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {SongListComponent} from './song-list.component';
-import {CardModule} from '../../../widget-modules/components/card/card.module';
-import {RouterModule} from '@angular/router';
-import {LegalTypeTranslatorModule} from '../../../widget-modules/pipes/legal-type-translator/legal-type-translator.module';
-import {ListHeaderModule} from '../../../widget-modules/components/list-header/list-header.module';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatInputModule} from '@angular/material/input';
-import {FilterComponent} from './filter/filter.component';
-import {ReactiveFormsModule} from '@angular/forms';
-import {MatSelectModule} from '@angular/material/select';
-import {SongTypeTranslaterModule} from '../../../widget-modules/pipes/song-type-translater/song-type-translater.module';
-import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-import {MatTooltipModule} from '@angular/material/tooltip';
-import {RoleModule} from '../../../services/user/role.module';
-import {KeyTranslatorModule} from '../../../widget-modules/pipes/key-translator/key-translator.module';
-
-@NgModule({
-  declarations: [SongListComponent, FilterComponent],
-  exports: [SongListComponent],
-  imports: [
-    CommonModule,
-    RouterModule,
-
-    CardModule,
-    LegalTypeTranslatorModule,
-    ListHeaderModule,
-    MatFormFieldModule,
-    MatInputModule,
-    ReactiveFormsModule,
-    MatSelectModule,
-    SongTypeTranslaterModule,
-    FontAwesomeModule,
-    MatTooltipModule,
-    RoleModule,
-    KeyTranslatorModule,
-  ],
-})
-export class SongListModule {}

src/app/modules/songs/song/edit/edit-file/edit-file.component.spec.ts

@@ -6,13 +6,11 @@ describe('EditFileComponent', () => {
   let component: EditFileComponent;
   let fixture: ComponentFixture<EditFileComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [EditFileComponent],
+      imports: [EditFileComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(EditFileComponent);

src/app/modules/songs/song/edit/edit-file/edit-file.component.ts

@@ -6,11 +6,17 @@ import {map, switchMap} from 'rxjs/operators';
 import {FileDataService} from '../../../services/file-data.service';
 import {Observable} from 'rxjs';
 import {File} from '../../../services/file';
+import {CardComponent} from '../../../../../widget-modules/components/card/card.component';
+import {AsyncPipe, NgFor, NgIf, NgStyle} from '@angular/common';
+import {MatIconButton} from '@angular/material/button';
+import {MatIcon} from '@angular/material/icon';
+import {FileComponent} from './file/file.component';
 
 @Component({
   selector: 'app-edit-file',
   templateUrl: './edit-file.component.html',
   styleUrls: ['./edit-file.component.less'],
+  imports: [CardComponent, NgIf, NgStyle, MatIconButton, MatIcon, NgFor, FileComponent, AsyncPipe],
 })
 export class EditFileComponent {
   public selectedFiles: FileList | null = null;
@@ -18,7 +24,11 @@ export class EditFileComponent {
   public songId: string | null = null;
   public files$: Observable<File[]>;
 
-  public constructor(private activatedRoute: ActivatedRoute, private uploadService: UploadService, private fileService: FileDataService) {
+  public constructor(
+    private activatedRoute: ActivatedRoute,
+    private uploadService: UploadService,
+    private fileService: FileDataService
+  ) {
     this.activatedRoute.params
       .pipe(
         map(param => param as {songId: string}),

src/app/modules/songs/song/edit/edit-file/file/file.component.spec.ts

@@ -6,13 +6,11 @@ describe('FileComponent', () => {
   let component: FileComponent;
   let fixture: ComponentFixture<FileComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [FileComponent],
+      imports: [FileComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(FileComponent);

src/app/modules/songs/song/edit/edit-file/file/file.component.ts

@@ -3,11 +3,15 @@ import {Observable} from 'rxjs';
 import {File} from '../../../../services/file';
 import {faTrashAlt} from '@fortawesome/free-solid-svg-icons';
 import {FileService} from '../../../../services/file.service';
+import {MatIconButton} from '@angular/material/button';
+import {FaIconComponent} from '@fortawesome/angular-fontawesome';
+import {AsyncPipe} from '@angular/common';
 
 @Component({
   selector: 'app-file',
   templateUrl: './file.component.html',
   styleUrls: ['./file.component.less'],
+  imports: [MatIconButton, FaIconComponent, AsyncPipe],
 })
 export class FileComponent {
   public url$: Observable<string> | null = null;

src/app/modules/songs/song/edit/edit-song/edit-song.component.html

@@ -11,7 +11,8 @@
         <mat-select formControlName="type">
           <mat-option *ngFor="let type of types" [value]="type">{{
               type | songType
-            }}</mat-option>
+            }}
+          </mat-option>
         </mat-select>
       </mat-form-field>
       <mat-form-field appearance="outline">
@@ -19,7 +20,8 @@
         <mat-select formControlName="key">
           <mat-option *ngFor="let key of keys" [value]="key">{{
               key | key
-            }}</mat-option>
+            }}
+          </mat-option>
         </mat-select>
       </mat-form-field>
       <mat-form-field appearance="outline">
@@ -31,7 +33,8 @@
         <mat-select formControlName="status">
           <mat-option *ngFor="let status of status" [value]="status">{{
               status | status
-            }}</mat-option>
+            }}
+          </mat-option>
         </mat-select>
       </mat-form-field>
     </div>
@@ -120,7 +123,8 @@
         <mat-select formControlName="legalType">
           <mat-option *ngFor="let key of legalType" [value]="key">{{
               key | legalType
-            }}</mat-option>
+            }}
+          </mat-option>
         </mat-select>
       </mat-form-field>
 
@@ -129,7 +133,8 @@
         <mat-select formControlName="legalOwner">
           <mat-option *ngFor="let key of legalOwner" [value]="key">{{
               key | legalOwner
-            }}</mat-option>
+            }}
+          </mat-option>
         </mat-select>
       </mat-form-field>
 

src/app/modules/songs/song/edit/edit-song/edit-song.component.spec.ts

@@ -6,13 +6,11 @@ describe('EditSongComponent', () => {
   let component: EditSongComponent;
   let fixture: ComponentFixture<EditSongComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [EditSongComponent],
+      imports: [EditSongComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(EditSongComponent);

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

@@ -1,21 +1,64 @@
 import {Component, OnInit} from '@angular/core';
 import {Song} from '../../../services/song';
-import {UntypedFormGroup} from '@angular/forms';
+import {ReactiveFormsModule, UntypedFormGroup} from '@angular/forms';
 import {ActivatedRoute, Router, RouterStateSnapshot} from '@angular/router';
 import {SongService} from '../../../services/song.service';
 import {EditService} from '../edit.service';
 import {first, map, switchMap} from 'rxjs/operators';
 import {KEYS} from '../../../services/key.helper';
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
-import {MatChipInputEvent} from '@angular/material/chips';
+import {MatChipGrid, MatChipInput, MatChipInputEvent, MatChipRow} from '@angular/material/chips';
 import {faExternalLinkAlt, faSave, faTimesCircle} from '@fortawesome/free-solid-svg-icons';
 import {MatDialog} from '@angular/material/dialog';
 import {SaveDialogComponent} from './save-dialog/save-dialog.component';
+import {NgFor, NgIf} from '@angular/common';
+import {CardComponent} from '../../../../../widget-modules/components/card/card.component';
+import {MatFormField, MatLabel, MatSuffix} from '@angular/material/form-field';
+import {MatInput} from '@angular/material/input';
+import {MatSelect} from '@angular/material/select';
+import {MatOption} from '@angular/material/core';
+import {CdkTextareaAutosize} from '@angular/cdk/text-field';
+import {SongTextComponent} from '../../../../../widget-modules/components/song-text/song-text.component';
+import {FaIconComponent} from '@fortawesome/angular-fontawesome';
+import {MatTooltip} from '@angular/material/tooltip';
+import {ButtonRowComponent} from '../../../../../widget-modules/components/button-row/button-row.component';
+import {ButtonComponent} from '../../../../../widget-modules/components/button/button.component';
+import {SongTypePipe} from '../../../../../widget-modules/pipes/song-type-translater/song-type.pipe';
+import {LegalOwnerPipe} from '../../../../../widget-modules/pipes/legal-owner-translator/legal-owner.pipe';
+import {LegalTypePipe} from '../../../../../widget-modules/pipes/legal-type-translator/legal-type.pipe';
+import {KeyPipe} from '../../../../../widget-modules/pipes/key-translator/key.pipe';
+import {StatusPipe} from '../../../../../widget-modules/pipes/status-translater/status.pipe';
 
 @Component({
   selector: 'app-edit-song',
   templateUrl: './edit-song.component.html',
   styleUrls: ['./edit-song.component.less'],
+  imports: [
+    NgIf,
+    CardComponent,
+    ReactiveFormsModule,
+    MatFormField,
+    MatLabel,
+    MatInput,
+    MatSelect,
+    NgFor,
+    MatOption,
+    CdkTextareaAutosize,
+    SongTextComponent,
+    MatChipGrid,
+    MatChipRow,
+    FaIconComponent,
+    MatChipInput,
+    MatSuffix,
+    MatTooltip,
+    ButtonRowComponent,
+    ButtonComponent,
+    SongTypePipe,
+    LegalOwnerPipe,
+    LegalTypePipe,
+    KeyPipe,
+    StatusPipe,
+  ],
 })
 export class EditSongComponent implements OnInit {
   public song: Song | null = null;

src/app/modules/songs/song/edit/edit-song/save-dialog/save-dialog.component.spec.ts

@@ -6,13 +6,11 @@ describe('SaveDialogComponent', () => {
   let component: SaveDialogComponent;
   let fixture: ComponentFixture<SaveDialogComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
       declarations: [SaveDialogComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SaveDialogComponent);

src/app/modules/songs/song/edit/edit-song/save-dialog/save-dialog.component.ts

@@ -1,8 +1,11 @@
 import {Component} from '@angular/core';
+import {MatDialogActions, MatDialogClose, MatDialogContent, MatDialogTitle} from '@angular/material/dialog';
+import {MatButton} from '@angular/material/button';
 
 @Component({
   selector: 'app-save-dialog',
   templateUrl: './save-dialog.component.html',
   styleUrls: ['./save-dialog.component.less'],
+  imports: [MatDialogClose, MatDialogTitle, MatDialogContent, MatDialogActions, MatButton],
 })
 export class SaveDialogComponent {}

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

@@ -6,13 +6,11 @@ describe('EditComponent', () => {
   let component: EditComponent;
   let fixture: ComponentFixture<EditComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [EditComponent],
+      imports: [EditComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(EditComponent);

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

@@ -1,10 +1,13 @@
 import {Component, ViewChild} from '@angular/core';
 import {EditSongComponent} from './edit-song/edit-song.component';
+import {EditFileComponent} from './edit-file/edit-file.component';
+import {HistoryComponent} from './history/history.component';
 
 @Component({
   selector: 'app-edit',
   templateUrl: './edit.component.html',
   styleUrls: ['./edit.component.less'],
+  imports: [EditSongComponent, EditFileComponent, HistoryComponent],
 })
 export class EditComponent {
   @ViewChild(EditSongComponent) public editSongComponent: EditSongComponent | null = null;

src/app/modules/songs/song/edit/edit.module.ts

@@ -1,60 +1,59 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {EditComponent} from './edit.component';
-import {CardModule} from '../../../../widget-modules/components/card/card.module';
+
-import {SongTypeTranslaterModule} from '../../../../widget-modules/pipes/song-type-translater/song-type-translater.module';
 import {ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatSelectModule} from '@angular/material/select';
 import {MatButtonModule} from '@angular/material/button';
-import {ButtonRowModule} from '../../../../widget-modules/components/button-row/button-row.module';
+
 import {RouterModule} from '@angular/router';
 import {EditSongComponent} from './edit-song/edit-song.component';
 import {EditFileComponent} from './edit-file/edit-file.component';
 import {MatIconModule} from '@angular/material/icon';
 import {FileComponent} from './edit-file/file/file.component';
-import {LegalOwnerTranslatorModule} from '../../../../widget-modules/pipes/legal-owner-translator/legal-owner-translator.module';
-import {LegalTypeTranslatorModule} from '../../../../widget-modules/pipes/legal-type-translator/legal-type-translator.module';
-import {KeyTranslatorModule} from '../../../../widget-modules/pipes/key-translator/key-translator.module';
 import {MatChipsModule} from '@angular/material/chips';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-import {StatusTranslaterModule} from '../../../../widget-modules/pipes/status-translater/status-translater.module';
+
-import {ButtonModule} from '../../../../widget-modules/components/button/button.module';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {SaveDialogComponent} from './edit-song/save-dialog/save-dialog.component';
 import {MatDialogModule} from '@angular/material/dialog';
 import {HistoryComponent} from './history/history.component';
-import {SongTextModule} from '../../../../widget-modules/components/song-text/song-text.module';
+import {SongTextComponent} from '../../../../widget-modules/components/song-text/song-text.component';
+import {KeyPipe} from '../../../../widget-modules/pipes/key-translator/key.pipe';
+import {LegalOwnerPipe} from '../../../../widget-modules/pipes/legal-owner-translator/legal-owner.pipe';
+import {LegalTypePipe} from '../../../../widget-modules/pipes/legal-type-translator/legal-type.pipe';
+import {SongTypePipe} from '../../../../widget-modules/pipes/song-type-translater/song-type.pipe';
+import {StatusPipe} from '../../../../widget-modules/pipes/status-translater/status.pipe';
 
 @NgModule({
-  declarations: [EditComponent, EditSongComponent, EditFileComponent, FileComponent, SaveDialogComponent, HistoryComponent],
   exports: [EditComponent],
-  bootstrap: [SaveDialogComponent],
   imports: [
     CommonModule,
-    CardModule,
+    SongTypePipe,
-    SongTypeTranslaterModule,
     ReactiveFormsModule,
     RouterModule,
-
     MatInputModule,
     MatButtonModule,
     MatCheckboxModule,
     MatSelectModule,
-    ButtonRowModule,
-
     MatIconModule,
-    LegalOwnerTranslatorModule,
+    LegalOwnerPipe,
-    LegalTypeTranslatorModule,
+    LegalTypePipe,
-    KeyTranslatorModule,
+    KeyPipe,
     MatChipsModule,
     FontAwesomeModule,
-    StatusTranslaterModule,
+    StatusPipe,
-    ButtonModule,
     MatTooltipModule,
     MatDialogModule,
-    SongTextModule,
+    SongTextComponent,
+    EditComponent,
+    EditSongComponent,
+    EditFileComponent,
+    FileComponent,
+    HistoryComponent,
+    SaveDialogComponent,
   ],
 })
 export class EditModule {}

src/app/modules/songs/song/edit/history/history.component.spec.ts

@@ -6,13 +6,11 @@ describe('HistoryComponent', () => {
   let component: HistoryComponent;
   let fixture: ComponentFixture<HistoryComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [HistoryComponent],
+      imports: [HistoryComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(HistoryComponent);

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

@@ -3,16 +3,22 @@ import {first, map, switchMap} from 'rxjs/operators';
 import {ActivatedRoute} from '@angular/router';
 import {SongService} from '../../../services/song.service';
 import {Song} from '../../../services/song';
+import {DatePipe, NgFor, NgIf} from '@angular/common';
+import {CardComponent} from '../../../../../widget-modules/components/card/card.component';
 
 @Component({
   selector: 'app-history',
   templateUrl: './history.component.html',
   styleUrls: ['./history.component.less'],
+  imports: [NgIf, CardComponent, NgFor, DatePipe],
 })
 export class HistoryComponent implements OnInit {
   public song: Song | null = null;
 
-  public constructor(private activatedRoute: ActivatedRoute, private songService: SongService) {}
+  public constructor(
+    private activatedRoute: ActivatedRoute,
+    private songService: SongService
+  ) {}
 
   public ngOnInit(): void {
     this.activatedRoute.params

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

@@ -6,13 +6,11 @@ describe('FileComponent', () => {
   let component: FileComponent;
   let fixture: ComponentFixture<FileComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [FileComponent],
+      imports: [FileComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(FileComponent);

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

@@ -2,11 +2,13 @@ import {Component, Input} from '@angular/core';
 import {File} from '../../services/file';
 import {AngularFireStorage} from '@angular/fire/compat/storage';
 import {Observable} from 'rxjs';
+import {AsyncPipe} from '@angular/common';
 
 @Component({
   selector: 'app-file',
   templateUrl: './file.component.html',
   styleUrls: ['./file.component.less'],
+  imports: [AsyncPipe],
 })
 export class FileComponent {
   public url$: Observable<string> | null = null;

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

@@ -6,13 +6,11 @@ describe('NewComponent', () => {
   let component: NewComponent;
   let fixture: ComponentFixture<NewComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [NewComponent],
+      imports: [NewComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(NewComponent);

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

@@ -1,15 +1,21 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {faSave} from '@fortawesome/free-solid-svg-icons';
-import {UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
+import {ReactiveFormsModule, UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
 import {SongService} from '../../services/song.service';
 import {Song} from '../../services/song';
 import {Router} from '@angular/router';
 import {Subscription} from 'rxjs';
+import {CardComponent} from '../../../../widget-modules/components/card/card.component';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatInput} from '@angular/material/input';
+import {ButtonRowComponent} from '../../../../widget-modules/components/button-row/button-row.component';
+import {ButtonComponent} from '../../../../widget-modules/components/button/button.component';
 
 @Component({
   selector: 'app-new',
   templateUrl: './new.component.html',
   styleUrls: ['./new.component.less'],
+  imports: [CardComponent, ReactiveFormsModule, MatFormField, MatLabel, MatInput, ButtonRowComponent, ButtonComponent],
 })
 export class NewComponent implements OnInit, OnDestroy {
   public faSave = faSave;
@@ -17,8 +23,12 @@ export class NewComponent implements OnInit, OnDestroy {
     number: new UntypedFormControl(null, Validators.required),
     title: new UntypedFormControl(null, Validators.required),
   });
+  private subs: Subscription[] = [];
 
-  public constructor(private songService: SongService, private router: Router) {}
+  public constructor(
+    private songService: SongService,
+    private router: Router
+  ) {}
 
   public ngOnInit(): void {
     this.form.reset();
@@ -31,7 +41,6 @@ export class NewComponent implements OnInit, OnDestroy {
     );
   }
 
-  private subs: Subscription[] = [];
   public ngOnDestroy(): void {
     this.subs.forEach(_ => _.unsubscribe());
   }

src/app/modules/songs/song/new/new.module.ts

@@ -1,16 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {NewComponent} from './new.component';
-import {CardModule} from '../../../../widget-modules/components/card/card.module';
-import {ReactiveFormsModule} from '@angular/forms';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatInputModule} from '@angular/material/input';
-import {ButtonRowModule} from '../../../../widget-modules/components/button-row/button-row.module';
-import {ButtonModule} from '../../../../widget-modules/components/button/button.module';
-import {AutofocusModule} from '../../../../widget-modules/directives/autofocus/autofocus.module';
-
-@NgModule({
-  declarations: [NewComponent],
-  imports: [CommonModule, CardModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, ButtonRowModule, ButtonModule, AutofocusModule],
-})
-export class NewModule {}

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

@@ -12,14 +12,12 @@ describe('SongComponent', () => {
     params: of({songId: '4711'}),
   };
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [SongComponent],
+      imports: [SongComponent],
       providers: [{provide: ActivatedRoute, useValue: mockActivatedRoute}],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SongComponent);

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

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {ActivatedRoute, Router} from '@angular/router';
+import {ActivatedRoute, Router, RouterLink} from '@angular/router';
 import {SongService} from '../services/song.service';
 import {distinctUntilChanged, map, switchMap} from 'rxjs/operators';
 import {Song} from '../services/song';
@@ -12,11 +12,45 @@ import {faEdit, faFileCirclePlus, faTrash} from '@fortawesome/free-solid-svg-ico
 import {ShowService} from '../../shows/services/show.service';
 import {Show} from '../../shows/services/show';
 import {ShowSongService} from '../../shows/services/show-song.service';
+import {AsyncPipe, DatePipe, NgFor, NgIf} from '@angular/common';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {RoleDirective} from '../../../services/user/role.directive';
+import {SongTextComponent} from '../../../widget-modules/components/song-text/song-text.component';
+import {MatChipListbox, MatChipOption} from '@angular/material/chips';
+import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
+import {MatMenu, MatMenuTrigger} from '@angular/material/menu';
+import {FileComponent} from './file/file.component';
+import {SongTypePipe} from '../../../widget-modules/pipes/song-type-translater/song-type.pipe';
+import {LegalOwnerPipe} from '../../../widget-modules/pipes/legal-owner-translator/legal-owner.pipe';
+import {StatusPipe} from '../../../widget-modules/pipes/status-translater/status.pipe';
+import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
   selector: 'app-song',
   templateUrl: './song.component.html',
   styleUrls: ['./song.component.less'],
+  imports: [
+    NgIf,
+    CardComponent,
+    RoleDirective,
+    SongTextComponent,
+    MatChipListbox,
+    NgFor,
+    MatChipOption,
+    ButtonRowComponent,
+    ButtonComponent,
+    RouterLink,
+    MatMenuTrigger,
+    MatMenu,
+    FileComponent,
+    AsyncPipe,
+    DatePipe,
+    SongTypePipe,
+    LegalOwnerPipe,
+    StatusPipe,
+    ShowTypePipe,
+  ],
 })
 export class SongComponent implements OnInit {
   public song$: Observable<Song | null> | null = null;

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

@@ -1,40 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {SongComponent} from './song.component';
-import {CardModule} from '../../../widget-modules/components/card/card.module';
-import {SongTypeTranslaterModule} from '../../../widget-modules/pipes/song-type-translater/song-type-translater.module';
-import {MatButtonModule} from '@angular/material/button';
-import {ButtonRowModule} from '../../../widget-modules/components/button-row/button-row.module';
-import {RouterModule} from '@angular/router';
-import {LegalOwnerTranslatorModule} from '../../../widget-modules/pipes/legal-owner-translator/legal-owner-translator.module';
-import {SongTextModule} from '../../../widget-modules/components/song-text/song-text.module';
-import {MatChipsModule} from '@angular/material/chips';
-import {RoleModule} from '../../../services/user/role.module';
-import {StatusTranslaterModule} from '../../../widget-modules/pipes/status-translater/status-translater.module';
-import {ButtonModule} from '../../../widget-modules/components/button/button.module';
-import {FileComponent} from './file/file.component';
-import {MatMenuModule} from '@angular/material/menu';
-import {ShowTypeTranslaterModule} from '../../../widget-modules/pipes/show-type-translater/show-type-translater.module';
-
-@NgModule({
-  declarations: [SongComponent, FileComponent],
-  exports: [SongComponent],
-  imports: [
-    CommonModule,
-    CardModule,
-    RouterModule,
-
-    SongTypeTranslaterModule,
-    MatButtonModule,
-    ButtonRowModule,
-    LegalOwnerTranslatorModule,
-    SongTextModule,
-    MatChipsModule,
-    RoleModule,
-    StatusTranslaterModule,
-    ButtonModule,
-    MatMenuModule,
-    ShowTypeTranslaterModule,
-  ],
-})
-export class SongModule {}

src/app/modules/songs/songs.module.ts

@@ -2,13 +2,11 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 
 import {SongsRoutingModule} from './songs-routing.module';
-import {SongListModule} from './song-list/song-list.module';
+
-import {SongModule} from './song/song.module';
 import {EditModule} from './song/edit/edit.module';
-import {NewModule} from './song/new/new.module';
 
 @NgModule({
   declarations: [],
-  imports: [CommonModule, SongsRoutingModule, SongListModule, SongModule, EditModule, NewModule],
+  imports: [CommonModule, SongsRoutingModule, EditModule],
 })
 export class SongsModule {}

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

@@ -6,13 +6,11 @@ describe('InfoComponent', () => {
   let component: InfoComponent;
   let fixture: ComponentFixture<InfoComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [InfoComponent],
+      imports: [InfoComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(InfoComponent);

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

@@ -6,11 +6,39 @@ import {ChordMode} from '../../../widget-modules/components/song-text/song-text.
 import {faSignOutAlt} from '@fortawesome/free-solid-svg-icons';
 import {RolePipe} from './role.pipe';
 import {roles} from '../../../services/user/roles';
+import {AsyncPipe, NgIf} from '@angular/common';
+import {CardComponent} from '../../../widget-modules/components/card/card.component';
+import {MatFormField, MatHint, MatLabel} from '@angular/material/form-field';
+import {MatSelect} from '@angular/material/select';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatOption} from '@angular/material/core';
+import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
+import {RouterLink} from '@angular/router';
+import {RoleDirective} from '../../../services/user/role.directive';
+import {UsersComponent} from './users/users.component';
 
 @Component({
   selector: 'app-info',
   templateUrl: './info.component.html',
   styleUrls: ['./info.component.less'],
+  imports: [
+    NgIf,
+    CardComponent,
+    MatFormField,
+    MatLabel,
+    MatSelect,
+    ReactiveFormsModule,
+    FormsModule,
+    MatOption,
+    MatHint,
+    ButtonRowComponent,
+    ButtonComponent,
+    RouterLink,
+    RoleDirective,
+    UsersComponent,
+    AsyncPipe,
+  ],
 })
 export class InfoComponent implements OnInit {
   public user$: Observable<User | null> | null = null;

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

@@ -1,9 +1,7 @@
 import {Pipe, PipeTransform} from '@angular/core';
 import {roles} from '../../../services/user/roles';
 
-@Pipe({
+@Pipe({name: 'role'})
-  name: 'role',
-})
 export class RolePipe implements PipeTransform {
   public transform(role: roles): string {
     switch (role) {

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

@@ -13,7 +13,8 @@
     >
       <mat-option *ngFor="let role of ROLE_TYPES" [value]="role">{{
           role | role
-        }}</mat-option>
+        }}
+      </mat-option>
     </mat-select>
   </mat-form-field>
 

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

@@ -6,13 +6,11 @@ describe('UserComponent', () => {
   let component: UserComponent;
   let fixture: ComponentFixture<UserComponent>;
 
-  beforeEach(
+  beforeEach(waitForAsync(() => {
-    waitForAsync(() => {
     void TestBed.configureTestingModule({
-        declarations: [UserComponent],
+      imports: [UserComponent],
     }).compileComponents();
-    })
+  }));
-  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(UserComponent);

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

@@ -3,11 +3,21 @@ import {User} from '../../../../../services/user/user';
 import {UserService} from '../../../../../services/user/user.service';
 import {ROLE_TYPES} from '../../../../../services/user/roles';
 import {faTimes} from '@fortawesome/free-solid-svg-icons';
+import {NgFor, NgIf} from '@angular/common';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatInput} from '@angular/material/input';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatSelect} from '@angular/material/select';
+import {MatOption} from '@angular/material/core';
+import {MatIconButton} from '@angular/material/button';
+import {FaIconComponent} from '@fortawesome/angular-fontawesome';
+import {RolePipe} from '../../role.pipe';
 
 @Component({
   selector: 'app-user',
   templateUrl: './user.component.html',
   styleUrls: ['./user.component.less'],
+  imports: [NgIf, MatFormField, MatLabel, MatInput, ReactiveFormsModule, FormsModule, MatSelect, NgFor, MatOption, MatIconButton, FaIconComponent, RolePipe],
 })
 export class UserComponent {
   public id = '';