refactor: add confirm dialog with dialog service

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

@@ -0,0 +1,36 @@
+import { ConfirmDialogComponent } from './../shared/components/confirm-dialog/confirm-dialog.component';
+import { MockModule, MockComponent } from 'ng-mocks';
+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 { EMPTY } from 'rxjs';
+
+describe('Service: Dialog', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [MockComponent(ConfirmDialogComponent)],
+            providers: [DialogService, MatDialog],
+            imports: [MockModule(MatDialogModule)],
+        });
+    });
+
+    it('should create the service', inject(
+        [DialogService],
+        (service: DialogService) => {
+            expect(service).toBeTruthy();
+        }
+    ));
+
+    it('should open a confirm dialog', inject(
+        [MatDialog, DialogService],
+        (dialog: MatDialog, service: DialogService) => {
+            spyOn(dialog, 'open').and.returnValue({ afterClosed: () => EMPTY });
+            service.openConfirmDialog({
+                title: 'Remove dialog',
+                message: 'Message',
+            } as ConfirmDialogData);
+            expect(dialog.open).toHaveBeenCalled();
+        }
+    ));
+});

src/app/services/dialog.service.ts

@@ -0,0 +1,25 @@
+import { ConfirmDialogComponent } from './../shared/components/confirm-dialog/confirm-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
+import { Injectable } from '@angular/core';
+import { ConfirmDialogData } from '../shared/components/confirm-dialog/confirm-dialog.component';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class DialogService {
+    constructor(private dialog: MatDialog) {}
+
+    /**
+     * Opens the confirm dialog with provided data
+     * @param data dialog meta info
+     */
+    openConfirmDialog(data: ConfirmDialogData): void {
+        const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+            data,
+            width: '300px',
+        });
+        dialogRef
+            .afterClosed()
+            .subscribe((result) => (result ? data.onConfirm() : null));
+    }
+}

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

@@ -0,0 +1,14 @@
+<h2 mat-dialog-title>
+    {{ dialogData?.title }}
+</h2>
+<mat-dialog-content class="mat-typography">
+    {{ dialogData?.message }}
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+    <button mat-flat-button [mat-dialog-close]="true" color="accent">
+        {{ dialogData?.confirmLabel || 'YES' | translate }}
+    </button>
+    <button mat-button mat-dialog-close cdkFocusInitial color="accent">
+        {{ dialogData?.cancelLabel || 'NO' | translate }}
+    </button>
+</mat-dialog-actions>

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

@@ -0,0 +1,41 @@
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { MockModule, MockPipe, MockProvider } from 'ng-mocks';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ConfirmDialogComponent } from './confirm-dialog.component';
+import {
+    MatDialog,
+    MatDialogModule,
+    MAT_DIALOG_DATA,
+} from '@angular/material/dialog';
+
+describe('ConfirmDialogComponent', () => {
+    let component: ConfirmDialogComponent;
+    let fixture: ComponentFixture<ConfirmDialogComponent>;
+
+    beforeEach(
+        waitForAsync(() => {
+            TestBed.configureTestingModule({
+                declarations: [
+                    ConfirmDialogComponent,
+                    MockPipe(TranslatePipe, (value) => JSON.stringify(value)),
+                ],
+                providers: [
+                    MockProvider(MatDialog),
+                    MockProvider(MAT_DIALOG_DATA),
+                    MockProvider(TranslateService),
+                ],
+                imports: [MockModule(MatDialogModule)],
+            }).compileComponents();
+        })
+    );
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ConfirmDialogComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,26 @@
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Component, Inject } from '@angular/core';
+
+export interface ConfirmDialogData {
+    title: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onConfirm: () => void;
+}
+
+@Component({
+    selector: 'app-confirm-dialog',
+    templateUrl: './confirm-dialog.component.html',
+})
+export class ConfirmDialogComponent {
+    /** Contains meta information to show in the dialog */
+    dialogData;
+
+    /** Creates an instance of ConfirmDialogComponent
+     * @param data dialog data
+     */
+    constructor(@Inject(MAT_DIALOG_DATA) data: ConfirmDialogData) {
+        this.dialogData = data;
+    }
+}

src/app/shared/shared.module.ts

@@ -7,9 +7,10 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MaterialModule } from '../material.module';
 import { FilterPipeModule } from 'ngx-filter-pipe';
 import { MomentDatePipe } from './pipes/moment-date.pipe';
+import { ConfirmDialogComponent } from './components/confirm-dialog/confirm-dialog.component';
 
 @NgModule({
-    declarations: [HeaderComponent, MomentDatePipe],
+    declarations: [ConfirmDialogComponent, HeaderComponent, MomentDatePipe],
     imports: [
         CommonModule,
         FilterPipeModule,
@@ -20,6 +21,7 @@ import { MomentDatePipe } from './pipes/moment-date.pipe';
         TranslateModule,
     ],
     exports: [
+        ConfirmDialogComponent,
         FilterPipeModule,
         FlexLayoutModule,
         FormsModule,

src/assets/i18n/de.json

@@ -65,7 +65,11 @@
                 "CUSTOM_USER_AGENT": "Einige IPTV-Anbieter benötigen einen bestimmten 'User-Agent', um ihre Playlist abspielen zu können."
             },
             "UPDATED": "Aktualisiert am",
-            "REFRESH": "Aktualisieren"
+            "REFRESH": "Aktualisieren",
+            "REMOVE_DIALOG": {
+                "MESSAGE": "Sind Sie sicher, dass Sie diese Wiedergabeliste vollständig löschen möchten",
+                "TITLE": ""
+            }
         },
         "TABS": {
             "FILE_UPLOAD": "Aus Dateisystem hochladen",
@@ -108,5 +112,7 @@
         "OPEN_CHANNELS_LIST": "Senderliste öffnen",
         "OPEN_EPG_LIST": "TV-Guide (EPG) öffnen",
         "TOGGLE_FAVORITE_FLAG": "Als Favoriten hinzufügen/entfernen"
-    }
+    },
+    "NO": "Nein",
+    "YES": "Ja"
 }

src/assets/i18n/en.json

@@ -32,6 +32,10 @@
                 "AUTO_UPDATE_DESCRIPTION": "If the auto-refresh function is activated, the playlist will be updated automatically each time the app is started.",
                 "CUSTOM_USER_AGENT": "Some IPTV providers need a specific user-agent in order to play their playlist."
             },
+            "REMOVE_DIALOG": {
+                "TITLE": "Remove playlist",
+                "MESSAGE": "Are you sure you want to delete this playlist completely?"
+            },
             "UPDATED": "Updated",
             "REFRESH": "Refresh playlist"
         },
@@ -108,5 +112,7 @@
         "ENGLISH": "English",
         "RUSSIAN": "Русский",
         "GERMAN": "Deutsch"
-    }
+    },
+    "YES": "Yes",
+    "NO": "No"
 }

src/assets/i18n/ru.json

@@ -33,7 +33,11 @@
                 "CUSTOM_USER_AGENT": "Некоторые IPTV провайдеры требуют указанние определенного пользовательского агента (User Agent) для воспроизведения своего плейлиста."
             },
             "UPDATED": "Обновлен",
-            "REFRESH": "Обновить плейлист"
+            "REFRESH": "Обновить плейлист",
+            "REMOVE_DIALOG": {
+                "MESSAGE": "Вы уверены, что хотите удалить этот плейлист?",
+                "TITLE": ""
+            }
         },
         "FILE_UPLOAD": {
             "DRAG_DROP": "Перетащите файл в эту область",
@@ -108,5 +112,7 @@
         "ENGLISH": "English",
         "RUSSIAN": "Русский",
         "GERMAN": "Deutsch"
-    }
+    },
+    "NO": "Нет",
+    "YES": "Да"
 }