Class Groups tab working

src/ui/classGroup/ClassGroupList.tsx

@@ -0,0 +1,102 @@
+import { ButtonProps } from "@/components/button/Button";
+import GameClassByClassGroupDisplay from "@/components/gameClass/GameClassByClassGroupDisplay";
+import Table from "@/components/table/Table";
+import { useGetGameClassesByClassGroup } from "@/hooks/GameClassHooks";
+import { ClassGroup } from "@/interface/ClassGroup";
+import { RaidGroup } from "@/interface/RaidGroup";
+import { useState } from "react";
+import ClassGroupButtons from "./ClassGroupButtons";
+import ClassGroupModal from "./modal/ClassGroupModal";
+import DeleteClassGroupModal from "./modal/DeleteClassGroupModal";
+
+
+export default function ClassGroupList({
+	classGroups,
+	raidGroup
+}:{
+	classGroups: ClassGroup[];
+	raidGroup: RaidGroup;
+}){
+	const [ selectedClassGroup, setSelectedClassGroup ] = useState<ClassGroup>();
+	const [ displayClassGroupModal, setDisplayClassGroupModal ] = useState(false);
+	const [ displayDeleteClassGroupModal, setDisplayDeleteClassGroupModal ] = useState(false);
+	const gameClassesQuery = useGetGameClassesByClassGroup(selectedClassGroup?.classGroupId ?? "");
+
+
+	const buttonProps: ButtonProps = {
+		variant: "ghost",
+		size: "md",
+		shape: "square"
+	};
+
+
+	const headElements: React.ReactNode[] = [
+		<div>
+			Name
+		</div>,
+		<div>
+			Classes
+		</div>,
+		<div
+			className="pl-16"
+		>
+			Actions
+		</div>
+	];
+
+	const bodyElements: React.ReactNode[][] = classGroups.map((classGroup) => [
+		<div
+			className="text-nowrap"
+		>
+			{classGroup.classGroupName}
+		</div>,
+		<div>
+			<GameClassByClassGroupDisplay
+				classGroupId={classGroup.classGroupId ?? ""}
+			/>
+		</div>,
+		<div
+			className="flex flex-row items-center justify-center gap-2 pl-16"
+		>
+			<div
+				className="py-4 border-l border-neutral-500"
+			>
+				&nbsp;
+			</div>
+			<ClassGroupButtons
+				buttonProps={buttonProps}
+				showClassGroupModal={() => {
+					setSelectedClassGroup(classGroup);
+					setDisplayClassGroupModal(true);
+				}}
+				showDeleteClassGroupModal={() => {
+					setSelectedClassGroup(classGroup);
+					setDisplayDeleteClassGroupModal(true);
+				}}
+			/>
+		</div>
+	]);
+
+
+	return (
+		<>
+			<Table
+				tableHeadElements={headElements}
+				tableBodyElements={bodyElements}
+			/>
+			<ClassGroupModal
+				display={displayClassGroupModal}
+				close={() => { setDisplayClassGroupModal(false); setSelectedClassGroup(undefined); }}
+				classGroup={selectedClassGroup}
+				raidGroup={raidGroup}
+				selectedGameClasses={gameClassesQuery.data ?? []}
+			/>
+			<DeleteClassGroupModal
+				display={displayDeleteClassGroupModal}
+				close={() => { setDisplayDeleteClassGroupModal(false); setSelectedClassGroup(undefined); }}
+				raidGroupId={selectedClassGroup?.raidGroupId ?? ""}
+				classGroup={selectedClassGroup}
+			/>
+		</>
+	);
+}