Skip to content

Commit

Permalink
Merge pull request #27 from AntonioMrtz/Create_Playlist_with_Description
Browse files Browse the repository at this point in the history
Feat : Create playlist with description
  • Loading branch information
AntonioMrtz authored Jul 26, 2023
2 parents 7b6883d + 5cca9ff commit d5e0523
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 65 deletions.
6 changes: 3 additions & 3 deletions Backend API/main.py
Original file line number Diff line number Diff line change
Expand Up @@ -134,14 +134,14 @@ def get_playlist(nombre: str) -> Response:


@app.post("/playlists/")
def post_playlist(nombre: str, foto: str,description: str,nombres_canciones: list,) -> Response:
def post_playlist(nombre: str, foto: str,descripcion: str,nombres_canciones: list,) -> Response:
""" Registra la playlist con los parámetros "nombre" y "artista"
Parameters
----------
nombre (str): Nombre de la playlist
foto (url): Género musical de la canción
description (str): Descripcion de la playlist
descripcion (str): Descripcion de la playlist
nombres_canciones (list) : nombres de las canciones
Expand All @@ -155,7 +155,7 @@ def post_playlist(nombre: str, foto: str,description: str,nombres_canciones: lis
Bad Request 400: Parámetros introducidos no són válidos o vacíos
"""

result = playlist_service.create_playlist(nombre, foto,description, nombres_canciones)
result = playlist_service.create_playlist(nombre, foto,descripcion, nombres_canciones)
return Response(None, 201)


Expand Down
4 changes: 3 additions & 1 deletion Electron/src/componentes/Playlist/Playlist.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function Playlist(props: PropsPlaylist) {
let navigate = useNavigate()


const [thumbnail, setThumbnail] = useState<string>('');
const [thumbnail, setThumbnail] = useState<string>(defaultThumbnailPlaylist);
const [numberSongs, setNumberSongs] = useState<number>(0);
const [description, setDescription] = useState<string>('');
const [displayPlay, setdisplayPlay] = useState('');
Expand Down Expand Up @@ -146,6 +146,8 @@ export default function Playlist(props: PropsPlaylist) {
}, 100);

return () => clearTimeout(timeoutId);
}else{
loadPlaylistData()
}
}, [location]);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,7 @@ import AudiotrackIcon from '@mui/icons-material/Audiotrack';
import styles from './addSongPlayListAccordion.module.css';
import GenreOption from './GenreOption/GenreOption';
import Global from 'global/global';
import {
InfoPopoverType,
} from 'componentes/types/InfoPopover';
import { InfoPopoverType } from 'componentes/types/InfoPopover';
import ConfirmationModal from 'componentes/InfoPopover/InfoPopover';
('../../types/ModalConfirmationArgs');

Expand All @@ -20,52 +18,41 @@ interface PropsAddSongPlayListAccordion {
reloadSidebar: Function;
}


const MessagesInfoPopOver = {
PLAYLIST_ADDED_TITLE: 'Playlist Añadida',
PLAYLIST_ADDED_DESCRIPTION: 'La playlist se ha añadido correctamente',
PLAYLIST_NOT_ADDED_TITLE: 'Playlist no Añadida',
PLAYLIST_NOT_ADDED_DESCRIPTION: 'La playlist no se ha podido añadir',

PLAYLIST_ADDED_TITLE : 'Playlist Añadida',
PLAYLIST_ADDED_DESCRIPTION : 'La playlist se ha añadido correctamente',
PLAYLIST_NOT_ADDED_TITLE : 'Playlist no Añadida',
PLAYLIST_NOT_ADDED_DESCRIPTION : 'La playlist no se ha podido añadir',

SONG_ADDED_TITLE : 'Canción Añadida',
SONG_ADDED_DESCRIPTION : 'La canción se ha añadido correctamente',
SONG_NOT_ADDED_TITLE : 'Canción no Añadida',
SONG_NOT_ADDED_DESCRIPTION : 'La canción no se ha podido añadir'

}

SONG_ADDED_TITLE: 'Canción Añadida',
SONG_ADDED_DESCRIPTION: 'La canción se ha añadido correctamente',
SONG_NOT_ADDED_TITLE: 'Canción no Añadida',
SONG_NOT_ADDED_DESCRIPTION: 'La canción no se ha podido añadir',
};

export default function AddSongPlayListAccordion(
props: PropsAddSongPlayListAccordion
) {



const [type, setType] = useState<InfoPopoverType>()
const [title, setTitle] = useState<string>()
const [description,setDescription] = useState<String>()

const [type, setType] = useState<InfoPopoverType>();
const [title, setTitle] = useState<string>();
const [description, setDescription] = useState<String>();

/* Triggers Confirmation Modal */

const [triggerOpenConfirmationModal, setTriggerOpenConfirmationModal] =
useState(false);


const handleShowConfirmationModal = (
type: InfoPopoverType,
title: string,
description: string
) => {
setType(type);
setTitle(title);
setDescription(description);
setTriggerOpenConfirmationModal( (state) => !state)

setType(type);
setTitle(title);
setDescription(description);
setTriggerOpenConfirmationModal((state) => !state);
};


/* SONG */

const [songFile, setSongFile] = useState<File>();
Expand Down Expand Up @@ -122,11 +109,18 @@ export default function AddSongPlayListAccordion(
.then((response) => {
if (response.status == 201) {
console.log('Cancion creada');
handleShowConfirmationModal(InfoPopoverType.SUCCESS,MessagesInfoPopOver.SONG_ADDED_TITLE,MessagesInfoPopOver.SONG_ADDED_DESCRIPTION)
handleShowConfirmationModal(
InfoPopoverType.SUCCESS,
MessagesInfoPopOver.SONG_ADDED_TITLE,
MessagesInfoPopOver.SONG_ADDED_DESCRIPTION
);
} else {
console.log('No se a creado la cancion');
handleShowConfirmationModal(InfoPopoverType.ERROR,MessagesInfoPopOver.SONG_NOT_ADDED_TITLE,MessagesInfoPopOver.SONG_NOT_ADDED_DESCRIPTION)

handleShowConfirmationModal(
InfoPopoverType.ERROR,
MessagesInfoPopOver.SONG_NOT_ADDED_TITLE,
MessagesInfoPopOver.SONG_NOT_ADDED_DESCRIPTION
);
}
})
.catch((error) => {
Expand All @@ -149,7 +143,7 @@ export default function AddSongPlayListAccordion(
});

const handleChangePlaylist = (
event: ChangeEvent<HTMLInputElement | HTMLSelectElement>
event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>
) => {
if (event.target && event.target.name) {
if (event.target.name === 'foto') {
Expand Down Expand Up @@ -188,13 +182,20 @@ export default function AddSongPlayListAccordion(
if (response.status == 201) {
console.log('Playlist creada');

handleShowConfirmationModal( InfoPopoverType.SUCCESS,MessagesInfoPopOver.PLAYLIST_ADDED_TITLE,MessagesInfoPopOver.PLAYLIST_ADDED_DESCRIPTION);
handleShowConfirmationModal(
InfoPopoverType.SUCCESS,
MessagesInfoPopOver.PLAYLIST_ADDED_TITLE,
MessagesInfoPopOver.PLAYLIST_ADDED_DESCRIPTION
);
props.reloadSidebar();
} else {
console.log('No se a creado la playlist');

handleShowConfirmationModal( InfoPopoverType.ERROR,MessagesInfoPopOver.PLAYLIST_NOT_ADDED_TITLE,MessagesInfoPopOver.PLAYLIST_NOT_ADDED_DESCRIPTION);

handleShowConfirmationModal(
InfoPopoverType.ERROR,
MessagesInfoPopOver.PLAYLIST_NOT_ADDED_TITLE,
MessagesInfoPopOver.PLAYLIST_NOT_ADDED_DESCRIPTION
);
}
})
.catch((error) => {
Expand Down Expand Up @@ -257,28 +258,41 @@ export default function AddSongPlayListAccordion(
<form
className={`container-fluid d-flex flex-column p-0 ${styles.formAddSong}`}
>
<div className={`container-fluid d-flex flex-row p-0`}>
<div className="p-0 mb-3 me-3">
<input
type="text"
id="nombre"
name="nombre"
placeholder="Nombre de la playlist"
className={` ${styles.input}`}
onChange={handleChangePlaylist}
required
></input>
<div className={`container-fluid d-flex flex-column p-0`}>
<div className='d-flex flex-row'>
<div className="p-0 mb-3 me-3 container-fluid">
<input
type="text"
id="nombre"
name="nombre"
placeholder="Nombre de la playlist"
className={` `}
onChange={handleChangePlaylist}
required
></input>
</div>
<div className="mb-3 container-fluid p-0">
<input
type="text"
id="foto"
name="foto"
placeholder="URL de la miniatura"
className={` `}
onChange={handleChangePlaylist}
required
></input>
</div>
</div>
<div className="mb-3">
<input
type="text"
id="foto"
name="foto"
placeholder="URL de la miniatura"
className={` ${styles.input}`}
<div className="container-fluid p-0">
<textarea
id="descripcion"
name="descripcion"
placeholder="Descripción de la playlist"
className={`${styles.input}`}
onChange={handleChangePlaylist}
style={{ height: ' 50px',width:'100%'}}
required
></input>
></textarea>
</div>
</div>

Expand Down Expand Up @@ -416,9 +430,13 @@ export default function AddSongPlayListAccordion(
</AccordionDetails>
</Accordion>

<ConfirmationModal type={type} title={title} description={description} triggerOpenConfirmationModal={triggerOpenConfirmationModal} handleClose={props.handleClose}></ConfirmationModal>

<ConfirmationModal
type={type}
title={title}
description={description}
triggerOpenConfirmationModal={triggerOpenConfirmationModal}
handleClose={props.handleClose}
></ConfirmationModal>
</Fragment>
);

}
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
.accordionDetails input {
.accordionDetails input,.accordionDetails textarea {
border: 0 !important;
outline: 0 !important;
background: transparent !important;
border-bottom: 1px solid var(--secondary-white) !important;
color: var(--primary-white) !important;
padding: 5px !important;
width: 100%;
}

.accordionDetails input:focus {
.accordionDetails input:focus,.accordionDetails textarea:focus {
box-shadow: 0 0rem !important;

}
Expand Down

0 comments on commit d5e0523

Please sign in to comment.