Class Groups tab working

2025-03-08 18:45:52 -05:00
parent 90337f92ab
commit c2f13d9900
13 changed files with 841 additions and 0 deletions
--- a/src/components/gameClass/GameClassByClassGroupDisplay.tsx
+++ b/src/components/gameClass/GameClassByClassGroupDisplay.tsx
@@ -0,0 +1,45 @@
+import { useGetGameClassesByClassGroup } from "@/hooks/GameClassHooks";
+import DangerMessage from "../message/DangerMessage";
+
+
+export default function GameClassByClassGroupDisplay({
+	classGroupId
+}:{
+	classGroupId: string;
+}){
+	const gameClassesQuery = useGetGameClassesByClassGroup(classGroupId);
+	const displayId = crypto.randomUUID().replaceAll("-", "");
+
+
+	if(gameClassesQuery.status === "pending"){
+		return (<div>Loading...</div>);
+	}
+	else if(gameClassesQuery.status === "error"){
+		return (<DangerMessage>Error: {gameClassesQuery.error.message}</DangerMessage>);
+	}
+	else{
+		return (
+			<div
+				className="flex flex-row flex-wrap items-center justify-center gap-x-4"
+			>
+				{
+					gameClassesQuery.data.map((gameClass) => (
+						<div
+							key={`gameClassByClassGroupDisplay${classGroupId}${gameClass.gameClassId}${displayId}`}
+							className="flex flex-row items-center justify-center"
+						>
+							{
+								gameClass.gameClassIcon &&
+								<img
+									className="max-h-6 max-w-6 mr-2"
+									src={`${import.meta.env.VITE_ICON_URL}/gameClass/${gameClass.gameClassIcon}`}
+								/>
+							}
+							{gameClass.gameClassName}
+						</div>
+					))
+				}
+			</div>
+		);
+	}
+}
--- a/src/components/gameClass/GameClassesSelector.tsx
+++ b/src/components/gameClass/GameClassesSelector.tsx
@@ -0,0 +1,82 @@
+import { useGetGameClasses } from "@/hooks/GameClassHooks";
+import { useEffect, useState } from "react";
+import DangerMessage from "../message/DangerMessage";
+
+export function GameClassesSelector({
+	gameId,
+	gameClassIds,
+	onChange
+}:{
+	gameId: string;
+	gameClassIds?: string[];
+	onChange?: (gameClassIds: string[]) => void;
+}){
+	const [ selectedGameClassIds, setSelectedGameClassIds ] = useState<string[]>(gameClassIds ?? []);
+	const selectorId = crypto.randomUUID().replaceAll("-", "");
+
+
+	const gameClassesQuery = useGetGameClasses(gameId, 0, 100, undefined);
+
+
+	const updateSelectedGameClassIds = (selectedGameClassId: string) => {
+		if(selectedGameClassIds.includes(selectedGameClassId)){
+			setSelectedGameClassIds(selectedGameClassIds.filter((id) => id !== selectedGameClassId));
+		}
+		else{
+			setSelectedGameClassIds([...selectedGameClassIds, selectedGameClassId]);
+		}
+	}
+
+
+	useEffect(() => {
+		onChange?.(selectedGameClassIds);
+	}, [ selectedGameClassIds, onChange ]);
+
+
+	if(gameClassesQuery.status === "pending"){
+		return <div>Loading...</div>
+	}
+	else if(gameClassesQuery.status === "error"){
+		return <DangerMessage>Error loading Game Classes: {gameClassesQuery.error.message}</DangerMessage>
+	}
+	else{
+		return (
+			<div
+				className="grid grid-cols-3 gap-4"
+				style={{flex: "0 0 33.333333333%"}}
+			>
+				{
+					gameClassesQuery.data.map((gameClass) => (
+						<div
+							key={gameClass.gameClassId}
+							className="flex flex-row"
+						>
+							<input
+								id={`gameClassSelector${gameClass.gameClassId}${selectorId}`}
+								className="cursor-pointer"
+								type="checkbox"
+								name="gameClassId"
+								value={gameClass.gameClassId}
+								checked={selectedGameClassIds.includes(gameClass.gameClassId ?? "")}
+								onChange={(e) => updateSelectedGameClassIds(e.target.value)}
+							/>
+							<label
+								className="ml-2 flex flex-row flex-nowrap justify-center items-center text-nowrap cursor-pointer"
+								htmlFor={`gameClassSelector${gameClass.gameClassId}${selectorId}`}
+							>
+								{
+									gameClass.gameClassIcon &&
+									<img
+										className="m-auto max-h-6 max-w-6 mr-2"
+										src={`${import.meta.env.VITE_ICON_URL}/gameClass/${gameClass.gameClassIcon}`}
+									/>
+								}
+								{gameClass.gameClassName}
+							</label>
+						</div>
+					))
+				}
+			</div>
+		);
+	}
+}