103 lines
2.6 KiB
TypeScript
103 lines
2.6 KiB
TypeScript
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"
|
|
>
|
|
|
|
</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}
|
|
/>
|
|
</>
|
|
);
|
|
}
|