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 Link from 'next/link';
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 Modal from 'react-bootstrap/Modal';
import { IconButton } from '@mui/material';
@ -19,6 +19,7 @@ export default function Page() {
const [formAlbumArtist, setFormAlbumArtist] = useState("");
const [formAlbumGenre, setFormAlbumGenre] = useState("");
const [formModalTitle, setFormModalTitle] = useState("Add Album");
const [formModalButtonLabel, setFormModalButtonLabel] = useState("Add");
useEffect(() => {
async function fetchAlbums() {
@ -38,7 +39,8 @@ export default function Page() {
const formData = new FormData(event.currentTarget);
try {
if (!formData.get('id')) {
console.log(formData);
if (formData.get('id') === "") {
const data = await createAlbum(formData);
console.log(data);
} else {
@ -52,6 +54,7 @@ export default function Page() {
const handleCreate = async () => {
setFormModalTitle("Add Album");
setFormModalButtonLabel("Add");
setFormAlbumId("");
setFormAlbumTitle("");
setFormAlbumArtist("");
@ -65,6 +68,7 @@ export default function Page() {
try {
const data = await getAlbum(parseInt(id));
setFormModalTitle("Edit Album");
setFormModalButtonLabel("Save");
setFormAlbumId(data.id)
setFormAlbumTitle(data.title);
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>
return (
@ -115,7 +132,7 @@ export default function Page() {
<IconButton aria-label="Edit Album" size="small" album-id={album.id.toString()} onClick={handleEdit}>
<Edit fontSize="inherit" color="success"/>
</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"/>
</IconButton>
</td>
@ -123,7 +140,6 @@ export default function Page() {
))}
</tbody>
</table>
</div>
<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} />
</div>
</div>
<Button variant="primary" type="submit">Create</Button>
<Button variant="primary" type="submit">{formModalButtonLabel}</Button>
</form>
</div>
</Modal.Body>