Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat : Create playlist with description #27

Merged
merged 2 commits into from
Jul 26, 2023
Merged

Feat : Create playlist with description #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4da0340
feat : Create Playlist with Description Input Field
AntonioMrtz Jul 26, 2023
5cca9ff
style : nombre foto and description field Playlist Create aligned
AntonioMrtz Jul 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions Backend API/main.py
View file
Open in desktop
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
View file
Open in desktop
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
136 changes: 77 additions & 59 deletions Electron/src/componentes/Sidebar/ModalAddSongPlaylist/Accordion/AddSongPlayListAccordion.tsx
View file
Open in desktop
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>
);

}
5 changes: 3 additions & 2 deletions ...rc/componentes/Sidebar/ModalAddSongPlaylist/Accordion/addSongPlayListAccordion.module.css
View file
Open in desktop
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