Attachment form and table, MusicXML renderer

2024-11-24 13:37:26 +01:00
parent a347a77e11
commit 02b4c08e7d
12 changed files with 1603 additions and 61 deletions
--- a/packages/frontend/src/routes/Piece.tsx
+++ b/packages/frontend/src/routes/Piece.tsx
@@ -1,8 +1,10 @@
-import type { Piece } from "backend/database";
-import { PieceId } from "common";
-import { FormEventHandler, useId, useRef, useState } from "react";
-import { useParams } from "react-router-dom";
+import type { Attachment, Piece } from "backend/database";
+import { AttachmentId, PieceId } from "common";
+import { ELYSIA_FORM_DATA } from "elysia";
+import { FormEventHandler, useId, useReducer, useRef, useState } from "react";
+import { Link, useParams } from "react-router-dom";
 import { client } from "../client";
+import { FileReducer } from "../FileReducer";
 import { useLoading } from "../loading";
 import { Button } from "../styled/Button";
 import { Input } from "../styled/Input";
@@ -11,9 +13,10 @@ export function Piece() {

 	const id = PieceId(useParams().pieceId!);

-	const { isLoading, error, data } = useLoading(() => client.piece.get({ query: { id } }));
+	const piece = useLoading(() => client.piece.get({ query: { id } }));
+	const attachments = useLoading(() => client.piece({ pieceId: id }).attachment.get());

-	if (isLoading) {
+	if (piece.isLoading || attachments.isLoading) {
 		return (
 			<div className="w-full h-full overflow-hidden flex items-center justify-center">
 				<div>Ładowanie…</div>
@@ -22,30 +25,32 @@ export function Piece() {
 	}

 	return (
-		<div className="p-4 overflow-y-auto flex flex-wrap gap-4">
-			{error !== null ? (
-				`Wystąpił błąd: ${error.value}`
-			) : data[0] === undefined ? (
+		<div className="p-4 overflow-y-auto flex flex-wrap items-start gap-4">
+			{piece.error !== null || attachments.error !== null ? (
+				`Wystąpił błąd: ${[piece.error?.value, attachments.error?.value].filter(Boolean).join(", ")}`
+			) : piece.data[0] === undefined ? (
 				"Utwór nie istnieje"
-			) : (
-				<PieceForm data={data[0]} />
-			)}
+			) : (<>
+				<PieceForm piece={piece.data[0]} />
+				<Attachments pieceId={piece.data[0].pieceId} attachments={attachments.data} />
+				<AttachmentForm pieceId={piece.data[0].pieceId} />
+			</>)}
 		</div>
 	);
 }

 namespace PieceForm {
 	export interface Props {
-		readonly data: Piece;
+		readonly piece: Piece;
 	}
 }

 function PieceForm(props: PieceForm.Props) {

-	const [name, setName] = useState(props.data.name);
-	const [composer, setComposer] = useState(props.data.composer ?? "");
-	const [lyricist, setLyricist] = useState(props.data.lyricist ?? "");
-	const [arranger, setArranger] = useState(props.data.arranger ?? "");
+	const [name, setName] = useState(props.piece.name);
+	const [composer, setComposer] = useState(props.piece.composer ?? "");
+	const [lyricist, setLyricist] = useState(props.piece.lyricist ?? "");
+	const [arranger, setArranger] = useState(props.piece.arranger ?? "");

 	const nameId = useId();
 	const composerId = useId();
@@ -56,11 +61,8 @@ function PieceForm(props: PieceForm.Props) {

 	const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
 		e.preventDefault();
-		if (props.data === null) {
-			return;
-		}

-		const { error } = await client.piece({ pieceId: props.data.pieceId }).put({
+		const { error } = await client.piece({ pieceId: props.piece.pieceId }).put({
 			name,
 			composer: composer.length > 0 ? composer : null,
 			lyricist: lyricist.length > 0 ? lyricist : null,
@@ -84,7 +86,6 @@ function PieceForm(props: PieceForm.Props) {
 				type="text"
 				value={name}
 				required
-				disabled={props.data === null}
 				onChange={(e) => setName(e.target.value)}
 			/>
 			<label htmlFor={composerId}>Kompozytor</label>
@@ -92,7 +93,6 @@ function PieceForm(props: PieceForm.Props) {
 				id={composerId}
 				type="text"
 				value={composer}
-				disabled={props.data === null}
 				onChange={(e) => setComposer(e.target.value)}
 			/>
 			<label htmlFor={lyricistId}>Słowa</label>
@@ -100,7 +100,6 @@ function PieceForm(props: PieceForm.Props) {
 				id={lyricistId}
 				type="text"
 				value={lyricist}
-				disabled={props.data === null}
 				onChange={(e) => setLyricist(e.target.value)}
 			/>
 			<label htmlFor={arrangerId}>Opracowanie</label>
@@ -108,12 +107,157 @@ function PieceForm(props: PieceForm.Props) {
 				id={arrangerId}
 				type="text"
 				value={arranger}
-				disabled={props.data === null}
 				onChange={(e) => setArranger(e.target.value)}
 			/>
-			<Button type="submit" disabled={props.data === null}>
+			<Button type="submit">
 				Zapisz
 			</Button>
 		</form>
 	);
 }
+
+namespace Attachments {
+	export interface Props {
+		readonly pieceId: PieceId;
+		readonly attachments: readonly Attachment[];
+	}
+}
+
+function Attachments(props: Attachments.Props) {
+
+	const download = (attachmentId: AttachmentId) => async () => {
+		const { error, data: _data } = await client
+			.piece({ pieceId: props.pieceId })
+			.attachment({ attachmentId })
+			.get();
+
+		if (error !== null) {
+			console.error(error.value);
+			return;
+		}
+
+		const data = _data as unknown as typeof _data[ELYSIA_FORM_DATA];
+		const url = URL.createObjectURL(data.data);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = data.filename;
+		a.click();
+		URL.revokeObjectURL(url);
+	};
+
+	return (
+		<table className="grow">
+			<thead>
+				<tr>
+					<th className="p-1 border">Nazwa pliku</th>
+					<th className="p-1 border">Typ</th>
+					<th className="p-1 border">Dodano</th>
+					<th className="p-1 border">Zmodyfikowano</th>
+					<th className="p-1 border">Pobierz</th>
+				</tr>
+			</thead>
+			<tbody>
+				{props.attachments.map((attachment) => (
+					<tr key={attachment.attachmentId}>
+						<td className="p-1 border">
+							{attachment.mediaType === "application/vnd.recordare.musicxml"
+							|| attachment.mediaType === "application/vnd.recordare.musicxml+xml" ? (
+								<Link className="underline" to={`attachment/${attachment.attachmentId}`}>
+									{attachment.filename}
+								</Link>
+							) : (
+								attachment.filename
+							)}
+						</td>
+						<td className="p-1 border">{attachment.mediaType}</td>
+						<td className="p-1 border text-center font-mono text-sm">
+							{attachment.createdAt}
+							{attachment.createdBy !== null && <><br />przez {attachment.createdBy}</>}
+						</td>
+						<td className="p-1 border text-center font-mono text-sm">
+							{attachment.modifiedAt === null && attachment.modifiedBy === null ? "\u2014"
+							: attachment.modifiedAt !== null && attachment.modifiedBy === null ? attachment.modifiedAt
+							: attachment.modifiedAt === null ? `przez ${attachment.createdBy}`
+							: <>{attachment.createdAt}<br />przez {attachment.createdBy}</>}
+						</td>
+						<td className="p-1 border text-center">
+							<Button type="button" onClick={download(attachment.attachmentId)}>
+								Pobierz
+							</Button>
+						</td>
+					</tr>
+				))}
+			</tbody>
+		</table>
+	);
+}
+
+namespace AttachmentForm {
+	export interface Props {
+		readonly pieceId: PieceId;
+	}
+}
+
+function AttachmentForm(props: AttachmentForm.Props) {
+
+	const [{ filename, mediaType, file }, reduce] = useReducer(FileReducer, FileReducer.initial);
+
+	const filenameId = useId();
+	const mediaTypeId = useId();
+	const fileId = useId();
+
+	const fileInputRef = useRef<HTMLInputElement>(null);
+
+	const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
+		e.preventDefault();
+
+		const { error } = await client.piece({ pieceId: props.pieceId }).attachment.post({
+			filename,
+			mediaType,
+			data: file!,
+		});
+
+		if (error) {
+			console.error(error.value);
+			return;
+		}
+
+		reduce(FileReducer.reset);
+		if (fileInputRef.current !== null) {
+			fileInputRef.current.files = null;
+		}
+	}
+
+	return (
+		<form className="p-2 flex flex-col gap-2 border rounded" onSubmit={onSubmit}>
+			<label htmlFor={filenameId}>Nazwa pliku</label>
+			<Input
+				id={filenameId}
+				type="text"
+				value={filename}
+				required
+				onChange={(e) => reduce(FileReducer.setFilename(e.target.value))}
+			/>
+			<label htmlFor={mediaTypeId}>Typ</label>
+			<Input
+				id={mediaTypeId}
+				type="text"
+				value={mediaType}
+				onChange={(e) => reduce(FileReducer.setMediaType(e.target.value))}
+			/>
+			<label htmlFor={fileId}>Plik</label>
+			<Input
+				ref={fileInputRef}
+				id={fileId}
+				type="file"
+				onChange={(e) => {
+					const file = e.target.files?.item(0) ?? null;
+					reduce(FileReducer.setFile(file));
+				}}
+			/>
+			<Button type="submit">
+				Dodaj
+			</Button>
+		</form>
+	);
+}