feat: add dialog about playlist details

src/app/home/home.module.ts

@@ -7,14 +7,16 @@ import { UrlUploadComponent } from './url-upload/url-upload.component';
 import { RecentPlaylistsComponent } from './recent-playlists/recent-playlists.component';
 import { HomeRoutingModule } from './home.routing';
 import { NgxUploaderModule } from 'ngx-uploader';
+import { PlaylistInfoComponent } from './recent-playlists/playlist-info/playlist-info.component';
 
 @NgModule({
     imports: [CommonModule, HomeRoutingModule, NgxUploaderModule, SharedModule],
     declarations: [
         HomeComponent,
         FileUploadComponent,
-        UrlUploadComponent,
+        PlaylistInfoComponent,
         RecentPlaylistsComponent,
+        UrlUploadComponent,
     ],
 })
 export class HomeModule {}

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

@@ -0,0 +1,24 @@
+<h2 mat-dialog-title>Playlist details</h2>
+<mat-dialog-content class="mat-typography">
+    <mat-form-field class="full-width">
+        <mat-label>Title</mat-label>
+        <input matInput [value]="playlist.title" disabled="true" />
+    </mat-form-field>
+    <mat-form-field class="full-width" *ngIf="playlist.url">
+        <mat-label>Added from the URL</mat-label>
+        <input matInput [value]="playlist.url" disabled="true" />
+    </mat-form-field>
+    <mat-form-field class="full-width">
+        <mat-label>Import date</mat-label>
+        <input matInput [value]="playlist.importDate | date" disabled="true" />
+    </mat-form-field>
+    <mat-form-field class="full-width">
+        <mat-label>Number of channels</mat-label>
+        <input matInput [value]="playlist.count" disabled="true" />
+    </mat-form-field>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close cdkFocusInitial color="primary">
+        CLOSE
+    </button>
+</mat-dialog-actions>

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

@@ -0,0 +1,34 @@
+import { MockModule } 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 { PlaylistInfoComponent } from './playlist-info.component';
+
+describe('PlaylistInfoComponent', () => {
+    let component: PlaylistInfoComponent;
+    let fixture: ComponentFixture<PlaylistInfoComponent>;
+
+    beforeEach(
+        waitForAsync(() => {
+            TestBed.configureTestingModule({
+                imports: [
+                    MockModule(MatDialogModule),
+                    MockModule(MatFormFieldModule),
+                ],
+                declarations: [PlaylistInfoComponent],
+                providers: [{ provide: MAT_DIALOG_DATA, useValue: {} }],
+            }).compileComponents();
+        })
+    );
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(PlaylistInfoComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,21 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Playlist } from '../../playlist.interface';
+
+@Component({
+    selector: 'app-playlist-info',
+    templateUrl: './playlist-info.component.html',
+    styleUrls: ['./playlist-info.component.scss'],
+})
+export class PlaylistInfoComponent {
+    /** Playlist object */
+    playlist: Playlist;
+
+    /**
+     * Creates an instance of the component and injects the selected playlist from the parent component
+     * @param data playlist object to show
+     */
+    constructor(@Inject(MAT_DIALOG_DATA) playlist: Playlist) {
+        this.playlist = playlist;
+    }
+}

src/app/home/recent-playlists/recent-playlists.component.html

@@ -30,6 +30,14 @@
                 | Added: {{ item.importDate | date }}
             </ng-container>
         </div>
+        <button
+            mat-icon-button
+            color="primary"
+            (click)="$event.stopPropagation(); openInfoDialog(item)"
+            matTooltip="Show playlist details"
+        >
+            <mat-icon>info</mat-icon>
+        </button>
         <button
             mat-icon-button
             color="primary"

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

@@ -1,5 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { Playlist } from '../playlist.interface';
+import { MatDialog } from '@angular/material/dialog';
+import { PlaylistInfoComponent } from './playlist-info/playlist-info.component';
 
 @Component({
     selector: 'app-recent-playlists',
@@ -18,4 +20,20 @@ export class RecentPlaylistsComponent {
 
     /** Emits on playlist rename click */
     @Output() renameClicked: EventEmitter<Playlist> = new EventEmitter();
+
+    /**
+     * Creates an instance of the component
+     * @param dialog angular material dialog reference
+     */
+    constructor(public dialog: MatDialog) {}
+
+    /**
+     * Opens the details dialog with the information about the provided playlist
+     * @param data selected playlist
+     */
+    openInfoDialog(data: Playlist): void {
+        this.dialog.open(PlaylistInfoComponent, {
+            data,
+        });
+    }
 }

src/app/material.module.ts

@@ -14,11 +14,13 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatDialogModule } from '@angular/material/dialog';
 
 @NgModule({
     exports: [
         MatButtonModule,
         MatCardModule,
+        MatDialogModule,
         MatExpansionModule,
         MatIconModule,
         MatInputModule,