tabris/music-collection
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reverting
All checks were successful
Music Collection CI Workflow / test (./frontend) (push) Successful in 36s
Details
Music Collection CI Workflow / test (./backend) (push) Successful in 30s
Details
Music Collection CI Workflow / build-and-push-images (./backend/Dockerfile, git.anatid.net/tabris/music-collection-backend, ./backend) (push) Successful in 50s
Details
Music Collection CI Workflow / build-and-push-images (./frontend/Dockerfile, git.anatid.net/tabris/music-collection-frontend, ./frontend) (push) Successful in 1m54s
Details
Music Collection CI Workflow / deploy (push) Successful in 24s
Details

Browse Source
This commit is contained in:
Phill Pover 2025-04-07 03:29:50 +01:00
parent 43fbfbb467
commit 4efc0bb610
1 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/app/album/page.tsx
View File

@ -3,7 +3,7 @@
import { FormEvent, MouseEvent, useState, useEffect } from 'react'; import { FormEvent, MouseEvent, useState, useEffect } from 'react';
import Link from 'next/link'; import Link from 'next/link';
import { Album } from '@/entities/album.entity'; import { Album } from '@/entities/album.entity';
import { createAlbum, getAlbum, getAlbums, updateAlbum } from '@/app/actions'; import { createAlbum, deleteAlbum, getAlbum, getAlbums, updateAlbum } from '@/app/actions';
import Button from 'react-bootstrap/Button'; import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal'; import Modal from 'react-bootstrap/Modal';
import { IconButton } from '@mui/material'; import { IconButton } from '@mui/material';
@ -19,6 +19,7 @@ export default function Page() {
const [formAlbumArtist, setFormAlbumArtist] = useState(""); const [formAlbumArtist, setFormAlbumArtist] = useState("");
const [formAlbumGenre, setFormAlbumGenre] = useState(""); const [formAlbumGenre, setFormAlbumGenre] = useState("");
const [formModalTitle, setFormModalTitle] = useState("Add Album"); const [formModalTitle, setFormModalTitle] = useState("Add Album");
const [formModalButtonLabel, setFormModalButtonLabel] = useState("Add");
useEffect(() => { useEffect(() => {
async function fetchAlbums() { async function fetchAlbums() {
@ -38,7 +39,8 @@ export default function Page() {
const formData = new FormData(event.currentTarget); const formData = new FormData(event.currentTarget);
try { try {
if (!formData.get('id')) { console.log(formData);
if (formData.get('id') === "") {
const data = await createAlbum(formData); const data = await createAlbum(formData);
console.log(data); console.log(data);
} else { } else {
@ -52,6 +54,7 @@ export default function Page() {
const handleCreate = async () => { const handleCreate = async () => {
setFormModalTitle("Add Album"); setFormModalTitle("Add Album");
setFormModalButtonLabel("Add");
setFormAlbumId(""); setFormAlbumId("");
setFormAlbumTitle(""); setFormAlbumTitle("");
setFormAlbumArtist(""); setFormAlbumArtist("");
@ -65,6 +68,7 @@ export default function Page() {
try { try {
const data = await getAlbum(parseInt(id)); const data = await getAlbum(parseInt(id));
setFormModalTitle("Edit Album"); setFormModalTitle("Edit Album");
setFormModalButtonLabel("Save");
setFormAlbumId(data.id) setFormAlbumId(data.id)
setFormAlbumTitle(data.title); setFormAlbumTitle(data.title);
setFormAlbumArtist(data.artist); setFormAlbumArtist(data.artist);
@ -78,6 +82,19 @@ export default function Page() {
} }
} }
const handleDelete = async (event: MouseEvent<HTMLElement>) => {
const id = event.currentTarget.getAttribute('album-id');
if (id) {
try {
await deleteAlbum(parseInt(id));
} catch (error) {
console.error(`Error deleting album with ID ${id}:`, error);
}
} else {
console.error("Couldn't get ID of clicked element");
}
}
if (!albums) return <div>Loading...</div> if (!albums) return <div>Loading...</div>
return ( return (
@ -115,7 +132,7 @@ export default function Page() {
<IconButton aria-label="Edit Album" size="small" album-id={album.id.toString()} onClick={handleEdit}> <IconButton aria-label="Edit Album" size="small" album-id={album.id.toString()} onClick={handleEdit}>
<Edit fontSize="inherit" color="success"/> <Edit fontSize="inherit" color="success"/>
</IconButton> </IconButton>
<IconButton aria-label="Delete Album" size="small" album-id={album.id.toString()} onClick={handleEdit}> <IconButton aria-label="Delete Album" size="small" album-id={album.id.toString()} onClick={handleDelete}>
<Delete fontSize="inherit" color="success"/> <Delete fontSize="inherit" color="success"/>
</IconButton> </IconButton>
</td> </td>
@ -123,7 +140,6 @@ export default function Page() {
))} ))}
</tbody> </tbody>
</table> </table>
</div> </div>
<Modal <Modal
@ -152,7 +168,7 @@ export default function Page() {
<label htmlFor="album-genre">Genre</label><input type="text" name="genre" id="album-genre" defaultValue={formAlbumGenre} /> <label htmlFor="album-genre">Genre</label><input type="text" name="genre" id="album-genre" defaultValue={formAlbumGenre} />
</div> </div>
</div> </div>
<Button variant="primary" type="submit">Create</Button> <Button variant="primary" type="submit">{formModalButtonLabel}</Button>
</form> </form>
</div> </div>
</Modal.Body> </Modal.Body>