Play List in Library,

Song tags, metadata

package.json

@@ -1,6 +1,6 @@
 {
   "name": "muse-ujaen",
-  "version": "0.3.1",
+  "version": "0.3.5",
   "description": "Angular 7 with Electron (Typescript + SASS + Hot Reload)",
   "homepage": "https://github.com/nonodev96/muse",
   "author": {

src/app/components/library/library.component.html

@@ -47,7 +47,31 @@
     </ng-container>
     <ng-container matColumnDef="artist">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Artist</th>
-      <td mat-cell *matCellDef="let element"> {{element.artist}} </td>
+      <td mat-cell *matCellDef="let element"> {{element.artist}}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="config" stickyEnd>
+      <th mat-header-cell *matHeaderCellDef></th>
+      <td mat-cell *matCellDef="let element">
+        <button mat-icon-button [matMenuTriggerFor]="menu">
+          <mat-icon>more_vert</mat-icon>
+        </button>
+        <mat-menu #menu="matMenu">
+          <button mat-menu-item>
+            <mat-icon>playlist_add</mat-icon>
+            <span>Nueva play list</span>
+          </button>
+          <mat-divider></mat-divider>
+
+          <div *ngFor="let playList_ of allPlayLists.playLists">
+            <button mat-menu-item (click)="addToPlayList(playList_, element)">
+              <mat-icon>playlist_play</mat-icon>
+              <span>{{playList_.name}}</span>
+            </button>
+          </div>
+
+        </mat-menu>
+      </td>
     </ng-container>
   </table>
 </div>

src/app/components/library/library.component.scss

@@ -10,4 +10,9 @@
   table.form-songs {
     width: 100%;
   }
+
+  td.mat-column-config {
+    width: 20px;
+    padding-right: 8px;
+  }
 }

src/app/components/library/library.component.ts

@@ -1,10 +1,11 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
-import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
+import {MatPaginator, MatSnackBar, MatSort, MatTableDataSource} from '@angular/material';
 import {PlayerService} from '../../providers/player.service';
 import {Song} from '../../mocks/Song';
 import {Subscription} from 'rxjs';
 import {FormControl} from '@angular/forms';
 import {type} from 'os';
+import {DatabaseService, InterfacePlayList, InterfacePlayLists} from '../../providers/database.service';
 
 @Component({
   selector: 'app-library',
@@ -16,8 +17,9 @@ export class LibraryComponent implements OnInit {
   @ViewChild(MatPaginator) paginator: MatPaginator;
 
   public dataSource: MatTableDataSource<Song> = new MatTableDataSource([]);
-  public displayedColumns: string[] = ['play', 'title', 'album', 'artist'];
+  public displayedColumns: string[] = ['play', 'title', 'album', 'artist', 'config'];
   private songListSubscription: Subscription;
+  public allPlayLists: InterfacePlayLists;
 
   titleFilter = new FormControl('');
   albumFilter = new FormControl('');
@@ -28,8 +30,14 @@ export class LibraryComponent implements OnInit {
     artist: ''
   };
 
-  constructor(private _playerService: PlayerService) {
+  constructor(private _playerService: PlayerService,
+              private _databaseService: DatabaseService,
+              private snackBar: MatSnackBar) {
     this.dataSource.filterPredicate = this.createFilter();
+    this.allPlayLists = new class implements InterfacePlayLists {
+      playLists: InterfacePlayList[];
+    };
+    this.allPlayLists.playLists = [];
   }
 
   ngOnInit() {
@@ -52,6 +60,10 @@ export class LibraryComponent implements OnInit {
         this.dataSource.paginator = this.paginator;
       });
     this._playerService.updateSongListSubscription();
+
+    this._databaseService.getAllPlayLists().then(value => {
+      this.allPlayLists = value;
+    });
   }
 
   /**
@@ -70,4 +82,22 @@ export class LibraryComponent implements OnInit {
     this._playerService.setPlayer(song);
     this._playerService.playerTogglePlayPause();
   }
+
+  addToPlayList(playList: InterfacePlayList, song: Song) {
+    this._databaseService.addSongPathToPlayList(playList.name, song.src).then(value => {
+      if (value === true) {
+        this.openSnackBar('Se ha añadido correctamente la canción ' + song.title + ' a la playlist ' + playList.name);
+      } else if (value === false) {
+        this.openSnackBar('No se ha añadido la canción ' + song.title + ' a la playlist ' + playList.name + ' por un error');
+      } else {
+        this.openSnackBar(value);
+      }
+    });
+  }
+
+  private openSnackBar(message: string, action: string = 'Undo') {
+    this.snackBar.open(message, action, {
+      duration: 3000
+    });
+  }
 }