Raid Layout page working

2025-03-09 12:15:29 -04:00
parent c2f13d9900
commit 8b8538a968
15 changed files with 973 additions and 0 deletions
--- a/src/ui/raidLayout/RaidLayoutList.tsx
+++ b/src/ui/raidLayout/RaidLayoutList.tsx
@@ -0,0 +1,109 @@
+import { ButtonProps } from "@/components/button/Button";
+import ClassGroupsByRaidLayoutDisplay from "@/components/classGroup/ClassGroupsByRaidLayoutDisplay";
+import Table from "@/components/table/Table";
+import { useGetClassGroupsByRaidLayout } from "@/hooks/ClassGroupHooks";
+import { ClassGroup } from "@/interface/ClassGroup";
+import { RaidGroup } from "@/interface/RaidGroup";
+import { RaidLayout } from "@/interface/RaidLayout";
+import { useEffect, useState } from "react";
+import DeleteRaidLayoutModal from "./modal/DeleteRaidLayoutModal";
+import RaidLayoutModal from "./modal/RaidLayoutModal";
+import RaidLayoutAdminButtons from "./RaidLayoutAdminButtons";
+
+
+export default function RaidLayoutList({
+	raidLayouts,
+	raidGroup
+}:{
+	raidLayouts: RaidLayout[];
+	raidGroup: RaidGroup;
+}){
+	const [ selectedRaidLayout, setSelectedRaidLayout ] = useState<RaidLayout>();
+	const [ displayEditRaidLayoutModal, showEditRaidLayoutModal ] = useState(false);
+	const [ displayDeleteRaidLayoutModal, showDeleteRaidLayoutModal ] = useState(false);
+	const [ selectedLayoutClassGroups, setSelectedLayoutClassGroups ] = useState<(ClassGroup | null)[]>([]);
+
+	const classGroupsQuery = useGetClassGroupsByRaidLayout(raidGroup.raidGroupId ?? "", selectedRaidLayout?.raidLayoutId);
+	useEffect(() => {
+		setSelectedLayoutClassGroups(classGroupsQuery.data ?? []);
+	}, [ classGroupsQuery.data ]);
+
+
+	const buttonProps: ButtonProps = {
+		variant: "ghost",
+		size: "md",
+		shape: "square"
+	};
+
+
+	const headElements: React.ReactNode[] = [
+		<div
+			className="text-nowrap"
+		>
+			Raid Layout Name
+		</div>,
+		<div
+			className="text-nowrap"
+		>
+			Raid Size
+		</div>,
+		<div
+			className="text-nowrap"
+		>
+			Class Groups
+		</div>,
+		<div
+			className="pl-16"
+		>
+			Actions
+		</div>
+	];
+
+	const bodyElements: React.ReactNode[][] = raidLayouts.map((raidLayout) => [
+		<div>
+			{raidLayout.raidLayoutName}
+		</div>,
+		<div>
+			{raidLayout.raidSize}
+		</div>,
+		<div>
+			<ClassGroupsByRaidLayoutDisplay raidGroupId={raidGroup.raidGroupId ?? ""} raidLayoutId={raidLayout.raidLayoutId ?? ""}/>
+		</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>
+			<RaidLayoutAdminButtons
+				buttonProps={buttonProps}
+				showRaidLayoutModal={() => { setSelectedRaidLayout(raidLayout); showEditRaidLayoutModal(true); }}
+				showDeleteRaidLayoutModal={() => { setSelectedRaidLayout(raidLayout); showDeleteRaidLayoutModal(true); }}
+			/>
+		</div>
+	]);
+
+
+	return (
+		<>
+			<Table
+				tableHeadElements={headElements}
+				tableBodyElements={bodyElements}
+			/>
+			<RaidLayoutModal
+				display={displayEditRaidLayoutModal}
+				close={() => { showEditRaidLayoutModal(false); setSelectedRaidLayout(undefined); }}
+				raidLayout={selectedRaidLayout}
+				raidGroup={raidGroup}
+				selectedClassGroups={selectedLayoutClassGroups}
+			/>
+			<DeleteRaidLayoutModal
+				display={displayDeleteRaidLayoutModal}
+				close={() => { showDeleteRaidLayoutModal(false); setSelectedRaidLayout(undefined); }}
+				raidLayout={selectedRaidLayout}
+			/>
+		</>
+	);
+}