import { ChangeDetectionStrategy , Component , Inject } from '@angular/core' ; import { FormControl , Validators } from '@angular/forms' ; import { MAT_DIALOG_DATA , MatDialogRef } from '@angular/material/dialog' ; import { Router } from '@angular/router' ; import { SpotifyWebApiService } from '../services/spotify-web-api.service' ; import { StateService } from '../services/state.service' ; export interface ISavePlaylistDialogData { ownsPlaylist : boolean ; playlistId : string ; tracks : string [ ] ; playlistName : string ; playlistDescription : string ; } enum EWriteMode { 'overWrite' = 'overWrite' , 'createNew' = 'createNew' } export interface IUpdatedPlaylistDetails { name : string ; description ? : string ; } function noWhitespaceValidator ( control ) { return ( control . value || '' ) . trim ( ) . length !== 0 ? undefined : { whitespace : true } ; } @ Component ( { selector : 'sort-save-playlist-dialog' , templateUrl : './save-playlist-dialog.component.html' , styleUrls : [ './save-playlist-dialog.component.scss' ] , changeDetection : ChangeDetectionStrategy . OnPush , } ) export class SavePlaylistDialogComponent { constructor ( private dialogRef , @ Inject ( MAT_DIALOG_DATA ) public data , private spotifyWebApiService , public _stateService , private router ) { } playlistNameFC = new FormControl ( this . data . playlistName , [ Validators . required , noWhitespaceValidator ] ) ; playlistDescriptionFC = new FormControl ( this . data . playlistDescription ) ; writeMode : keyof typeof EWriteMode = this . data . ownsPlaylist ? EWriteMode . overWrite : EWriteMode . createNew ; error = false ; get writeModes ( ) : string [ ] { return this . data . ownsPlaylist ? Object . keys ( EWriteMode ) : [ EWriteMode . createNew ] ; } get overWrite ( ) : boolean { return this . writeMode === EWriteMode . overWrite ; } get createNew ( ) : boolean { return this . writeMode === EWriteMode . createNew ; } get explanation ( ) : string { if ( this . data . ownsPlaylist ) { return 'The playlist can be overwritten or a new playlist can be created' ; } return 'A new playlist will be created since you are not the owner of this playlist' ; } writeModeDescription ( writeMode ) { switch ( writeMode ) { case EWriteMode . overWrite : return 'Overwrite playlist' ; case EWriteMode . createNew : return 'Create a new playlist' ; } } async createNewPlaylist ( ) { this . error = false ; this . _stateService . setLoading ( true ) ; try { const { id } = await this . spotifyWebApiService . createPlaylist ( this . playlistNameFC . value , this . data . tracks ) ; if ( this . data . playlistDescription ) { await this . spotifyWebApiService . updatePlaylistDetails ( id , { description : this . data . playlistDescription } ) ; } await this . router . navigate ( [ 'playlist' , id ] ) ; this . dialogRef . close ( ) ; this . _stateService . setSuccess ( 'New playlist created!' ) ; } catch ( error ) { this . error = true ; this . _stateService . setError ( 'Failed to create new playlist' , error ) ; } this . _stateService . setLoading ( false ) ; } async overwritePlaylist ( ) { this . error = false ; this . _stateService . setLoading ( true ) ; try { const updatedDetails = { name : this . playlistNameFC . value , } ; if ( this . data . playlistDescription ) { updatedDetails . description = this . data . playlistDescription ; } await Promise . all ( [ this . spotifyWebApiService . updatePlaylist ( this . data . playlistId , this . data . tracks ) , this . spotifyWebApiService . updatePlaylistDetails ( this . data . playlistId , updatedDetails ) , ] ) ; this . dialogRef . close ( updatedDetails ) ; this . _stateService . setSuccess ( 'Playlist saved!' ) ; } catch ( error ) { this . error = true ; this . _stateService . setError ( 'Failed to save playlist' , error ) ; } this . _stateService . setLoading ( false ) ; } cancel ( ) { this . dialogRef . close ( ) ; } }