refactor: convert dialogs to standalone components

src/app/home/home.module.ts

@@ -5,7 +5,6 @@ import { DragDropFileUploadDirective } from './file-upload/drag-drop-file-upload
 import { FileUploadComponent } from './file-upload/file-upload.component';
 import { HomeComponent } from './home.component';
 import { HomeRoutingModule } from './home.routing';
-import { PlaylistInfoComponent } from './recent-playlists/playlist-info/playlist-info.component';
 import { TextImportComponent } from './text-import/text-import.component';
 import { UrlUploadComponent } from './url-upload/url-upload.component';
 @NgModule({
@@ -14,7 +13,6 @@ import { UrlUploadComponent } from './url-upload/url-upload.component';
         DragDropFileUploadDirective,
         HomeComponent,
         FileUploadComponent,
-        PlaylistInfoComponent,
         TextImportComponent,
         UrlUploadComponent,
     ],

src/app/home/recent-playlists/playlist-info/playlist-info.component.spec.ts

@@ -1,17 +1,21 @@
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { PLAYLIST_SAVE_DETAILS } from './../../../../../shared/ipc-commands';
 /* eslint-disable @typescript-eslint/unbound-method */
-import { ElectronServiceStub } from '../../../services/electron.service.stub';
-import { DataService } from '../../../services/data.service';
-import { TranslatePipe } from '@ngx-translate/core';
-import { MockModule, MockPipe } from 'ng-mocks';
-import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { DatePipe } from '@angular/common';
-import { PlaylistInfoComponent } from './playlist-info.component';
-import { FormsModule, ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import {
+    FormsModule,
+    ReactiveFormsModule,
+    UntypedFormBuilder,
+} from '@angular/forms';
+import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { TranslateModule } from '@ngx-translate/core';
+import { MockModule, MockPipe } from 'ng-mocks';
+import { DataService } from '../../../services/data.service';
+import { ElectronServiceStub } from '../../../services/electron.service.stub';
 import { Playlist } from './../../../../../shared/playlist.interface';
+import { PlaylistInfoComponent } from './playlist-info.component';
 
 describe('PlaylistInfoComponent', () => {
     let component: PlaylistInfoComponent;
@@ -26,13 +30,10 @@ describe('PlaylistInfoComponent', () => {
                     MockModule(MatDialogModule),
                     MockModule(MatCheckboxModule),
                     MockModule(MatFormFieldModule),
+                    MockModule(TranslateModule),
                     ReactiveFormsModule,
                 ],
-                declarations: [
-                    PlaylistInfoComponent,
-                    MockPipe(TranslatePipe),
-                    MockPipe(DatePipe),
-                ],
+                declarations: [PlaylistInfoComponent, MockPipe(DatePipe)],
                 providers: [
                     { provide: MAT_DIALOG_DATA, useValue: {} },
                     { provide: DataService, useClass: ElectronServiceStub },

src/app/home/recent-playlists/playlist-info/playlist-info.component.ts

@@ -1,13 +1,18 @@
 /* eslint-disable @typescript-eslint/unbound-method */
-import { DatePipe } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 import { Component, Inject } from '@angular/core';
 import {
+    ReactiveFormsModule,
     UntypedFormBuilder,
     UntypedFormControl,
     UntypedFormGroup,
     Validators,
 } from '@angular/forms';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatInputModule } from '@angular/material/input';
+import { TranslateModule } from '@ngx-translate/core';
 import { PLAYLIST_SAVE_DETAILS } from '../../../../../shared/ipc-commands';
 import { Playlist } from '../../../../../shared/playlist.interface';
 import { DataService } from '../../../services/data.service';
@@ -16,6 +21,16 @@ import { DataService } from '../../../services/data.service';
     selector: 'app-playlist-info',
     templateUrl: './playlist-info.component.html',
     providers: [DatePipe],
+    imports: [
+        TranslateModule,
+        MatButtonModule,
+        MatInputModule,
+        MatCheckboxModule,
+        CommonModule,
+        ReactiveFormsModule,
+        MatDialogModule,
+    ],
+    standalone: true,
 })
 export class PlaylistInfoComponent {
     /** Flag that returns true if application runs in electron-based environment */
@@ -49,7 +64,10 @@ export class PlaylistInfoComponent {
     ngOnInit(): void {
         this.playlistDetails = this.formBuilder.group({
             _id: this.playlist._id,
-            title: new UntypedFormControl(this.playlist.title, Validators.required),
+            title: new UntypedFormControl(
+                this.playlist.title,
+                Validators.required
+            ),
             userAgent: this.playlist.userAgent || '',
             filename: new UntypedFormControl({
                 value: this.playlist.filename || '',
@@ -63,7 +81,10 @@ export class PlaylistInfoComponent {
                 value: this.datePipe.transform(this.playlist.importDate),
                 disabled: true,
             }),
-            url: new UntypedFormControl({ value: this.playlist.url, disabled: true }),
+            url: new UntypedFormControl({
+                value: this.playlist.url,
+                disabled: true,
+            }),
             filePath: new UntypedFormControl({
                 value: this.playlist.filePath,
                 disabled: true,

src/app/services/dialog.service.spec.ts

@@ -1,17 +1,19 @@
-import { ConfirmDialogComponent } from './../shared/components/confirm-dialog/confirm-dialog.component';
-import { MockModule, MockComponent } from 'ng-mocks';
+import { inject, TestBed } from '@angular/core/testing';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { TestBed, inject } from '@angular/core/testing';
-import { DialogService } from './dialog.service';
-import { ConfirmDialogData } from '../shared/components/confirm-dialog/confirm-dialog.component';
+import { MockComponent, MockModule } from 'ng-mocks';
 import { EMPTY } from 'rxjs';
+import { ConfirmDialogData } from '../shared/components/confirm-dialog/confirm-dialog-data.interface';
+import { ConfirmDialogComponent } from './../shared/components/confirm-dialog/confirm-dialog.component';
+import { DialogService } from './dialog.service';
 
 describe('Service: Dialog', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
-            declarations: [MockComponent(ConfirmDialogComponent)],
             providers: [DialogService, MatDialog],
-            imports: [MockModule(MatDialogModule)],
+            imports: [
+                MockModule(MatDialogModule),
+                MockComponent(ConfirmDialogComponent),
+            ],
         });
     });
 

src/app/settings/settings.component.spec.ts

@@ -18,14 +18,18 @@ import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { provideMockStore } from '@ngrx/store/testing';
 import { StorageMap } from '@ngx-pwa/local-storage';
-import { TranslatePipe, TranslateService } from '@ngx-translate/core';
-import { MockComponent, MockModule, MockPipe } from 'ng-mocks';
+import {
+    TranslateModule,
+    TranslatePipe,
+    TranslateService,
+} from '@ngx-translate/core';
+import { MockComponent, MockModule, MockPipe, MockProvider } from 'ng-mocks';
 import { of } from 'rxjs';
 import { EPG_FORCE_FETCH } from '../../../shared/ipc-commands';
 import { DataService } from '../services/data.service';
 import { ElectronServiceStub } from '../services/electron.service.stub';
-import { TranslateServiceStub } from './../../testing/translate.stub';
-import { HeaderComponent } from './../shared/components/header/header.component';
+import { HeaderComponent } from '../shared/components';
+import { SharedModule } from '../shared/shared.module';
 import { Language } from './language.enum';
 import { SettingsComponent } from './settings.component';
 import { VideoPlayer } from './settings.interface';
@@ -67,11 +71,8 @@ describe('SettingsComponent', () => {
                 ],
                 providers: [
                     UntypedFormBuilder,
+                    MockProvider(TranslateService),
                     { provide: MatSnackBar, useClass: MatSnackBarStub },
-                    {
-                        provide: TranslateService,
-                        useClass: TranslateServiceStub,
-                    },
                     { provide: DataService, useClass: ElectronServiceStub },
                     {
                         provide: Router,
@@ -93,6 +94,8 @@ describe('SettingsComponent', () => {
                     MockModule(MatFormFieldModule),
                     MockModule(MatCheckboxModule),
                     MockModule(MatDividerModule),
+                    MockModule(TranslateModule),
+                    MockModule(SharedModule),
                 ],
             }).compileComponents();
         })

src/app/shared/components/about-dialog/about-dialog.component.ts

@@ -1,8 +1,11 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
-    selector: 'app-about-dialog',
+    standalone: true,
+    imports: [MatIconModule, TranslateModule],
     template: `
         <div mat-dialog-content>
             <img src="./assets/icons/icon-tv-256.png" width="128" /><br />

src/app/shared/components/confirm-dialog/confirm-dialog.component.ts

@@ -1,8 +1,11 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
 import { ConfirmDialogData } from './confirm-dialog-data.interface';
 @Component({
-    selector: 'app-confirm-dialog',
+    imports: [MatButtonModule, MatDialogModule, TranslateModule],
+    standalone: true,
     template: `
         <h2 mat-dialog-title>
             {{ dialogData.title }}

src/app/shared/components/header/header.component.ts

@@ -32,7 +32,7 @@ export class HeaderComponent implements OnInit {
 
     isHome = true;
 
-    /** Creates an instance of SettingsComponent */
+    /** Creates an instance of HeaderComponent */
     constructor(
         private activatedRoute: ActivatedRoute,
         private dialog: MatDialog,

src/app/shared/shared.module.ts

@@ -8,17 +8,13 @@ import { PlaylistItemComponent } from '../home/recent-playlists/playlist-item/pl
 import { RecentPlaylistsComponent } from '../home/recent-playlists/recent-playlists.component';
 import { MaterialModule } from '../material.module';
 import { HeaderComponent } from './components/';
-import { AboutDialogComponent } from './components/about-dialog/about-dialog.component';
-import { ConfirmDialogComponent } from './components/confirm-dialog/confirm-dialog.component';
 import { FilterPipe } from './pipes/filter.pipe';
 import { MomentDatePipe } from './pipes/moment-date.pipe';
 @NgModule({
     declarations: [
-        ConfirmDialogComponent,
         FilterPipe,
         HeaderComponent,
         MomentDatePipe,
-        AboutDialogComponent,
         RecentPlaylistsComponent,
         PlaylistItemComponent,
     ],
@@ -32,7 +28,6 @@ import { MomentDatePipe } from './pipes/moment-date.pipe';
         DragDropModule,
     ],
     exports: [
-        ConfirmDialogComponent,
         FilterPipe,
         FormsModule,
         HeaderComponent,

src/testing/translate.stub.ts

@@ -1,4 +0,0 @@
-/** Translate Service Stub */
-export class TranslateServiceStub {
-    instant(): void {}
-}