update angular

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

@@ -1,7 +1,7 @@
 <div [formGroup]="filterFormGroup">
   <mat-form-field appearance="outline">
     <mat-label>Titel oder Text</mat-label>
-    <input formControlName="q" matInput/>
+    <input formControlName="q" matInput />
   </mat-form-field>
 
   <div class="third">
@@ -10,8 +10,9 @@
       <mat-select formControlName="type">
         <mat-option [value]="null">- kein Filter -</mat-option>
         <mat-option *ngFor="let type of types" [value]="type">{{
-          type | songType
-          }}</mat-option>
+            type | songType
+          }}
+        </mat-option>
       </mat-select>
     </mat-form-field>
 
@@ -20,8 +21,9 @@
       <mat-select formControlName="key">
         <mat-option [value]="null">- kein Filter -</mat-option>
         <mat-option *ngFor="let key of keys" [value]="key">{{
-          key | key
-          }}</mat-option>
+            key | key
+          }}
+        </mat-option>
       </mat-select>
     </mat-form-field>
 
@@ -30,8 +32,9 @@
       <mat-select formControlName="legalType">
         <mat-option [value]="null">- kein Filter -</mat-option>
         <mat-option *ngFor="let key of legalType" [value]="key">{{
-          key | legalType
-          }}</mat-option>
+            key | legalType
+          }}
+        </mat-option>
       </mat-select>
     </mat-form-field>
 
@@ -40,8 +43,9 @@
       <mat-select formControlName="flag">
         <mat-option [value]="null">- kein Filter -</mat-option>
         <mat-option *ngFor="let flag of getFlags()" [value]="flag">{{
-          flag
-          }}</mat-option>
+            flag
+          }}
+        </mat-option>
       </mat-select>
     </mat-form-field>
   </div>

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

@@ -11,7 +11,7 @@ describe('FilterComponent', () => {
       void TestBed.configureTestingModule({
         declarations: [FilterComponent],
       }).compileComponents();
-    })
+    }),
   );
 
   beforeEach(() => {

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

@@ -10,6 +10,7 @@ import {KEYS} from '../../services/key.helper';
   selector: 'app-filter',
   templateUrl: './filter.component.html',
   styleUrls: ['./filter.component.less'],
+  standalone: false,
 })
 export class FilterComponent {
   public filterFormGroup: UntypedFormGroup;

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 === 'set'" class="neutral"><fa-icon [icon]="faDraft"></fa-icon></div>
-          <div *ngIf="song.status === 'final'" class="success"><fa-icon [icon]="faFinal"></fa-icon></div>
+          <div *ngIf="song.status === 'draft'" class="warning">
+            <fa-icon [icon]="faDraft"></fa-icon>
+          </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.less

@@ -29,7 +29,7 @@
 }
 
 .neutral, .warning, .success {
-    width: 30px;
+  width: 30px;
 }
 
 .neutral {

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

@@ -22,7 +22,7 @@ describe('SongListComponent', () => {
         providers: [{provide: SongService, useValue: mockSongService}],
         schemas: [NO_ERRORS_SCHEMA],
       }).compileComponents();
-    })
+    }),
   );
 
   beforeEach(() => {

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

@@ -16,13 +16,15 @@ import {faBalanceScaleRight, faCheck, faPencilRuler} from '@fortawesome/free-sol
   styleUrls: ['./song-list.component.less'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [fade],
+  standalone: false,
 })
 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(
       map(data => data.songList as Song[]),
-      map(songs => songs.sort((a, b) => a.number - b.number))
+      map(songs => songs.sort((a, b) => a.number - b.number)),
     ),
   ]).pipe(
     map(_ => {
@@ -30,14 +32,14 @@ export class SongListComponent implements OnInit, OnDestroy {
       const filter = _[0];
       this.anyFilterActive = this.checkIfFilterActive(filter);
       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 +50,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 +78,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

@@ -3,7 +3,9 @@ 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 {
+  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';
@@ -37,4 +39,5 @@ import {KeyTranslatorModule} from '../../../widget-modules/pipes/key-translator/
     KeyTranslatorModule,
   ],
 })
-export class SongListModule {}
+export class SongListModule {
+}