Redesign UI with shadcn

2024-12-01 13:46:34 +01:00
parent 8c13f50378
commit 27581d0057
25 changed files with 1758 additions and 376 deletions
--- a/packages/frontend/src/routes/Piece.tsx
+++ b/packages/frontend/src/routes/Piece.tsx
@@ -1,14 +1,18 @@
+import { client } from "@/client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { FileReducer } from "@/FileReducer";
+import { useLoading } from "@/hooks/useLoading";
+import { timeout } from "@/lib/utils";
+import { Label } from "@radix-ui/react-label";
 import type { Attachment, Piece } from "backend/database";
 import { PieceId } from "common";
 import { ACCEPTED_EXTENSIONS } from "common/MediaType";
 import { ELYSIA_FORM_DATA } from "elysia";
+import { Download, Loader2, Trash } from "lucide-react";
 import { FormEventHandler, MouseEvent, useCallback, 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";

 export function Piece() {

@@ -32,9 +36,13 @@ export function Piece() {
 			) : piece.data[0] === undefined ? (
 				"Utwór nie istnieje"
 			) : (<>
-				<PieceForm piece={piece.data[0]} />
+				<div className="flex flex-col gap-4 p-4 border rounded">
+					<h3 className="font-bold text-lg">Utwór</h3>
+					<PieceForm piece={piece.data[0]} />
+					<h3 className="font-bold text-lg">Załączniki</h3>
+					<AttachmentForm pieceId={piece.data[0].pieceId} />
+				</div>
 				<Attachments pieceId={piece.data[0].pieceId} attachments={attachments.data} />
-				<AttachmentForm pieceId={piece.data[0].pieceId} />
 			</>)}
 		</div>
 	);
@@ -58,61 +66,75 @@ function PieceForm(props: PieceForm.Props) {
 	const lyricistId = useId();
 	const arrangerId = useId();

-	const autoFocusRef = useRef<HTMLInputElement>(null);
+	const [isLoading, setIsLoading] = useState(false);

 	const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
 		e.preventDefault();

-		const { error } = await client.piece({ pieceId: props.piece.pieceId }).put({
-			name,
-			composer: composer.length > 0 ? composer : null,
-			lyricist: lyricist.length > 0 ? lyricist : null,
-			arranger: arranger.length > 0 ? arranger : null,
-		});
+		const delay = timeout(250);
+		try {
+			setIsLoading(true);

-		if (error) {
-			console.error(error.value);
-			return;
+			const { error } = await client.piece({ pieceId: props.piece.pieceId }).put({
+				name,
+				composer: composer.length > 0 ? composer : null,
+				lyricist: lyricist.length > 0 ? lyricist : null,
+				arranger: arranger.length > 0 ? arranger : null,
+			});
+
+			if (error) {
+				console.error(error.value);
+				return;
+			}
+		} finally {
+			await delay;
+			setIsLoading(false);
 		}
-
-		autoFocusRef.current?.focus();
 	}

 	return (
-		<form className="p-2 flex flex-col gap-2 border rounded" onSubmit={onSubmit}>
-			<label htmlFor={nameId}>Tytuł</label>
-			<Input
-				ref={autoFocusRef}
-				id={nameId}
-				type="text"
-				value={name}
-				required
-				onChange={(e) => setName(e.target.value)}
-			/>
-			<label htmlFor={composerId}>Kompozytor</label>
-			<Input
-				id={composerId}
-				type="text"
-				value={composer}
-				onChange={(e) => setComposer(e.target.value)}
-			/>
-			<label htmlFor={lyricistId}>Słowa</label>
-			<Input
-				id={lyricistId}
-				type="text"
-				value={lyricist}
-				onChange={(e) => setLyricist(e.target.value)}
-			/>
-			<label htmlFor={arrangerId}>Opracowanie</label>
-			<Input
-				id={arrangerId}
-				type="text"
-				value={arranger}
-				onChange={(e) => setArranger(e.target.value)}
-			/>
-			<Button type="submit">
-				Zapisz
-			</Button>
+		<form className="flex flex-col gap-4" onSubmit={onSubmit}>
+			<div className="grid items-baseline grid-cols-4 gap-4">
+				<Label htmlFor={nameId} className="text-right">Tytuł</Label>
+				<Input
+					id={nameId}
+					className="col-span-3"
+					type="text"
+					value={name}
+					required
+					onChange={(e) => setName(e.target.value)}
+				/>
+				<Label htmlFor={composerId} className="text-right">Kompozytor</Label>
+				<Input
+					id={composerId}
+					className="col-span-3"
+					type="text"
+					value={composer}
+					onChange={(e) => setComposer(e.target.value)}
+				/>
+				<Label htmlFor={lyricistId} className="text-right">Słowa</Label>
+				<Input
+					id={lyricistId}
+					className="col-span-3"
+					type="text"
+					value={lyricist}
+					onChange={(e) => setLyricist(e.target.value)}
+				/>
+				<Label htmlFor={arrangerId} className="text-right">Opracowanie</Label>
+				<Input
+					id={arrangerId}
+					className="col-span-3"
+					type="text"
+					value={arranger}
+					onChange={(e) => setArranger(e.target.value)}
+				/>
+			</div>
+			<div className="flex flex-col-reverse items-end">
+				<Button type="submit" disabled={isLoading}>
+					{isLoading && <Loader2 className="animate-spin" />}
+					Zapisz
+				</Button>
+			</div>
 		</form>
 	);
 }
@@ -126,20 +148,22 @@ namespace Attachments {

 function Attachments(props: Attachments.Props) {
 	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) => <AttachmentRow key={attachment.attachmentId} attachment={attachment} />)}
-			</tbody>
-		</table>
+		<div className="grow">
+			<Table>
+				<TableHeader>
+					<TableRow>
+						<TableHead>Nazwa pliku</TableHead>
+						<TableHead>Typ</TableHead>
+						<TableHead className="text-center">Dodano</TableHead>
+						<TableHead className="text-center">Zmodyfikowano</TableHead>
+						<TableHead className="text-center">Akcje</TableHead>
+					</TableRow>
+				</TableHeader>
+				<TableBody>
+					{props.attachments.map((attachment) => <AttachmentRow key={attachment.attachmentId} attachment={attachment} />)}
+				</TableBody>
+			</Table>
+		</div>
 	);
 }

@@ -171,7 +195,13 @@ function AttachmentRow(props: AttachmentRow.Props) {
 		URL.revokeObjectURL(url);
 	}, [props.attachment.attachmentId, props.attachment.pieceId]);

-	const open = useCallback(async () => {
+	const open = useCallback(async (event: MouseEvent<HTMLAnchorElement>) => {
+		if (props.attachment.mediaType !== "application/pdf") {
+			return;
+		}
+
+		event.preventDefault();
+
 		const { error, data: _data } = await client
 			.piece({ pieceId: props.attachment.pieceId })
 			.attachment({ attachmentId: props.attachment.attachmentId })
@@ -186,47 +216,41 @@ function AttachmentRow(props: AttachmentRow.Props) {
 		const url = URL.createObjectURL(data.data);
 		window.open(url, "_target");
 		URL.revokeObjectURL(url);
-	}, [props.attachment.attachmentId, props.attachment.pieceId, props.attachment.mediaType]);
-
-	const onOpen = useCallback((event: MouseEvent<HTMLAnchorElement>) => {
-		if (props.attachment.mediaType !== "application/pdf") {
-			return;
-		}
-
-		event.preventDefault();
-		open();
-	}, [props.attachment.mediaType, open]);
+	}, [props.attachment.mediaType, props.attachment.attachmentId, props.attachment.pieceId]);

 	return (
-		<tr>
-			<td className="p-1 border">
+		<TableRow>
+			<TableCell>
 				{props.attachment.mediaType === "application/vnd.recordare.musicxml"
 					|| props.attachment.mediaType === "application/vnd.recordare.musicxml+xml"
 					|| props.attachment.mediaType === "application/pdf" ? (
-					<Link className="underline" to={`attachment/${props.attachment.attachmentId}`} onClick={onOpen}>
+					<Link className="underline" to={`attachment/${props.attachment.attachmentId}`} onClick={open}>
 						{props.attachment.filename}
 					</Link>
 				) : (
 					props.attachment.filename
 				)}
-			</td>
-			<td className="p-1 border">{props.attachment.mediaType}</td>
-			<td className="p-1 border text-center font-mono text-sm">
+			</TableCell>
+			<TableCell>{props.attachment.mediaType}</TableCell>
+			<TableCell className="text-center font-mono text-xs">
 				{props.attachment.createdAt}
 				{props.attachment.createdBy !== null && <><br />przez {props.attachment.createdBy}</>}
-			</td>
-			<td className="p-1 border text-center font-mono text-sm">
+			</TableCell>
+			<TableCell className="text-center font-mono text-xs">
 				{props.attachment.modifiedAt === null && props.attachment.modifiedBy === null ? "\u2014"
 					: props.attachment.modifiedAt !== null && props.attachment.modifiedBy === null ? props.attachment.modifiedAt
-					: props.attachment.modifiedAt === null ? `przez ${props.attachment.createdBy}`
-					: <>{props.attachment.createdAt}<br />przez {props.attachment.createdBy}</>}
-			</td>
-			<td className="p-1 border text-center">
-				<Button type="button" onClick={download}>
-					Pobierz
+						: props.attachment.modifiedAt === null ? `przez ${props.attachment.createdBy}`
+							: <>{props.attachment.createdAt}<br />przez {props.attachment.createdBy}</>}
+			</TableCell>
+			<TableCell className="text-center flex justify-center gap-4">
+				<Button type="button" variant="ghost" size="icon" title="Pobierz" onClick={download}>
+					<Download />
 				</Button>
-			</td>
-		</tr>
+				<Button type="button" variant="ghost" size="icon" title="Usuń">
+					<Trash />
+				</Button>
+			</TableCell>
+		</TableRow>
 	);
 }

@@ -246,57 +270,73 @@ function AttachmentForm(props: AttachmentForm.Props) {

 	const fileInputRef = useRef<HTMLInputElement>(null);

+	const [isLoading, setIsLoading] = useState(false);
+
 	const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
 		e.preventDefault();

-		const { error } = await client.piece({ pieceId: props.pieceId }).attachment.post({
-			filename,
-			mediaType,
-			data: file!,
-		});
+		try {
+			setIsLoading(true);

-		if (error) {
-			console.error(error.value);
-			return;
-		}
+			const { error } = await client.piece({ pieceId: props.pieceId }).attachment.post({
+				filename,
+				mediaType,
+				data: file!,
+			});

-		reduce(FileReducer.reset);
-		if (fileInputRef.current !== null) {
-			fileInputRef.current.files = null;
+			if (error) {
+				console.error(error.value);
+				return;
+			}
+
+			reduce(FileReducer.reset);
+			if (fileInputRef.current !== null) {
+				fileInputRef.current.files = null;
+			}
+		} finally {
+			setIsLoading(false);
 		}
 	}

 	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));
-				}}
-				accept={ACCEPTED_EXTENSIONS}
-			/>
-			<Button type="submit">
-				Dodaj
-			</Button>
+		<form className="flex flex-col gap-4" onSubmit={onSubmit}>
+			<div className="grid items-baseline grid-cols-4 gap-4">
+				<Label htmlFor={filenameId} className="text-right">Nazwa pliku</Label>
+				<Input
+					id={filenameId}
+					className="col-span-3"
+					type="text"
+					value={filename}
+					required
+					onChange={(e) => reduce(FileReducer.setFilename(e.target.value))}
+				/>
+				<Label htmlFor={mediaTypeId} className="text-right">Typ</Label>
+				<Input
+					id={mediaTypeId}
+					className="col-span-3"
+					type="text"
+					value={mediaType}
+					onChange={(e) => reduce(FileReducer.setMediaType(e.target.value))}
+				/>
+				<Label htmlFor={fileId} className="text-right">Plik</Label>
+				<Input
+					ref={fileInputRef}
+					id={fileId}
+					className="col-span-3"
+					type="file"
+					onChange={(e) => {
+						const file = e.target.files?.item(0) ?? null;
+						reduce(FileReducer.setFile(file));
+					}}
+					accept={ACCEPTED_EXTENSIONS}
+				/>
+			</div>
+			<div className="flex flex-col-reverse items-end">
+				<Button type="submit" disabled={isLoading}>
+					{isLoading && <Loader2 className="animate-spin" />}
+					Dodaj
+				</Button>
+			</div>
 		</form>
 	);
 }