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

Moving create form to modal
All checks were successful
Music Collection CI Workflow / test (./backend) (push) Successful in 21s
Details
Music Collection CI Workflow / test (./frontend) (push) Successful in 19s
Details
Music Collection CI Workflow / build-and-push-images (./backend/Dockerfile, git.anatid.net/tabris/msuic-collection-backend, ./backend) (push) Successful in 49s
Details
Music Collection CI Workflow / build-and-push-images (./frontend/Dockerfile, git.anatid.net/tabris/music-collection-frontend, ./frontend) (push) Successful in 1m13s
Details
Music Collection CI Workflow / deploy (push) Successful in 21s
Details

Browse Source
This commit is contained in:
Phill Pover 2025-04-05 10:44:33 +01:00
parent 78558dae61
commit 1db68f1b40
2 changed files with 70 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,13 @@
'use client';
import { FormEvent, useState, useEffect } from 'react';
import { useState, useEffect } from 'react';
import Link from 'next/link';
import { Album } from '@/entities/album.entity';
import { createAlbum } from '@/app/actions';
import { useRouter } from 'next/navigation';
import CreateAlbumModal from "@/app/components/modals/create-album";
import { Suspense } from "react";
export default function Page() {
const [albums, setAlbums] = useState<Album[]>([]);
const router = useRouter();
useEffect(() => {
async function fetchAlbums() {
@ -21,18 +20,11 @@ export default function Page() {
if (!albums) return <div>Loading...</div>
async function onSubmit(event: FormEvent<HTMLFormElement>) {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const response = await createAlbum(formData);
await response.json();
router.refresh();
}
return (
<div className="container">
<Link href="?modal=true">
<button type="button" className="bg-blue-500 text-white p-2">Open Modal</button>
</Link>
<table className="u-full-width">
<thead>
<tr>
@ -63,26 +55,9 @@ export default function Page() {
))}
</tbody>
</table>
<form onSubmit={onSubmit}>
<div className="row">
<div className="six columns">
<label htmlFor="album-title">Album Title</label><input type="text" name="title" id="album-title" />
</div>
<div className="six columns">
<label htmlFor="album-artist">Artist</label><input type="text" name="artist" id="album-artist" />
</div>
</div>
<div className="row">
<div className="six columns">
<label htmlFor="album-genre">Genre</label><input type="text" name="genre" id="album-genre" />
</div>
</div>
<div className="row">
<div className="six columns">
<button type="submit">Create</button>
</div>
</div>
</form>
<Suspense>
<CreateAlbumModal/>
</Suspense>
</div>
);
}

61
frontend/src/app/components/modals/create-album.tsx Normal file
View File

@ -0,0 +1,61 @@
"use client";
import { FormEvent } from 'react';
import {useSearchParams, usePathname} from "next/navigation";
import Link from "next/link";
import { createAlbum } from '@/app/actions';
import { useRouter } from 'next/navigation';
function CreateAlbumModal() {
const searchParams = useSearchParams();
const modal = searchParams.get("modal");
const pathname = usePathname();
const router = useRouter();
async function onSubmit(event: FormEvent<HTMLFormElement>) {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const response = await createAlbum(formData);
await response.json();
router.refresh();
}
return (
<>
{modal &&
<dialog
className="fixed left-0 top-0 w-full h-full bg-black bg-opacity-50 z-50 overflow-auto backdrop-blur flex justify-center items-center">
<div className="container">
<form onSubmit={onSubmit}>
<div className="row">
<div className="six columns">
<label htmlFor="album-title">Album Title</label><input type="text" name="title" id="album-title" />
</div>
<div className="six columns">
<label htmlFor="album-artist">Artist</label><input type="text" name="artist" id="album-artist" />
</div>
</div>
<div className="row">
<div className="six columns">
<label htmlFor="album-genre">Genre</label><input type="text" name="genre" id="album-genre" />
</div>
</div>
<div className="row">
<div className="six columns">
<button type="submit">Create</button>
</div>
</div>
</form>
<Link href={pathname}>
<button type="button" className="bg-red-500 text-white p-2">Close Modal</button>
</Link>
</div>
</dialog>
}
</>
);
}
export default CreateAlbumModal;