109 lines
2.6 KiB
TypeScript
109 lines
2.6 KiB
TypeScript
import { ButtonProps } from "@/components/button/Button";
|
|
import Table from "@/components/table/Table";
|
|
import { GameClass } from "@/interface/GameClass";
|
|
import { useAuth } from "@/providers/AuthProvider";
|
|
import { isGameAdmin } from "@/util/PermissionUtil";
|
|
import { useState } from "react";
|
|
import GameClassAdminButtons from "./GameClassAdminButtons";
|
|
import DeleteGameClassModal from "./modals/DeleteGameClassModal";
|
|
import GameClassModal from "./modals/GameClassModal";
|
|
|
|
|
|
export default function GameClassList({
|
|
gameClasses
|
|
}:{
|
|
gameClasses: GameClass[];
|
|
}){
|
|
const { gamePermissions, accountPermissions } = useAuth();
|
|
const [ selectedGameClass, setSelectedGameClass ] = useState<GameClass>();
|
|
const [ displayGameClassModal, setDisplayGameClassModal ] = useState(false);
|
|
const [ displayDeleteGameClassModal, setDisplayDeleteGameClassModal ] = useState(false);
|
|
|
|
|
|
const buttonProps: ButtonProps = {
|
|
variant: "ghost",
|
|
size: "md",
|
|
shape: "square"
|
|
};
|
|
|
|
|
|
const headElements: React.ReactNode[] = [
|
|
<div>
|
|
Icon
|
|
</div>,
|
|
<div>
|
|
Name
|
|
</div>,
|
|
<div
|
|
className="pl-16"
|
|
>
|
|
Actions
|
|
</div>
|
|
];
|
|
|
|
const bodyElements: React.ReactNode[][] = gameClasses.map((gameClass) => [
|
|
<div>
|
|
{
|
|
gameClass.gameClassIcon &&
|
|
<div
|
|
className="absolute -my-4 max-h-14 max-w-14"
|
|
>
|
|
<img
|
|
className="m-auto"
|
|
src={`${import.meta.env.VITE_ICON_URL}/gameClass/${gameClass.gameClassIcon}`}
|
|
/>
|
|
</div>
|
|
}
|
|
|
|
</div>,
|
|
<div>
|
|
{gameClass.gameClassName}
|
|
</div>,
|
|
<div
|
|
className="flex flex-row items-center justify-center gap-2 pl-16"
|
|
>
|
|
<div
|
|
className="py-4 border-l border-neutral-500"
|
|
>
|
|
|
|
</div>
|
|
<GameClassAdminButtons
|
|
gameClass={gameClass}
|
|
buttonProps={{
|
|
...buttonProps,
|
|
disabled: !isGameAdmin(gameClass.gameId, gamePermissions, accountPermissions)
|
|
}}
|
|
showEditGameClassModal={() => {
|
|
setSelectedGameClass(gameClass);
|
|
setDisplayGameClassModal(true);
|
|
}}
|
|
showDeleteGameClassModal={() => {
|
|
setSelectedGameClass(gameClass);
|
|
setDisplayDeleteGameClassModal(true);
|
|
}}
|
|
/>
|
|
</div>
|
|
]);
|
|
|
|
|
|
return (
|
|
<>
|
|
<Table
|
|
tableHeadElements={headElements}
|
|
tableBodyElements={bodyElements}
|
|
/>
|
|
<GameClassModal
|
|
display={displayGameClassModal}
|
|
close={() => {setDisplayGameClassModal(false); setSelectedGameClass(undefined);}}
|
|
gameId={selectedGameClass?.gameId ?? ""}
|
|
gameClass={selectedGameClass}
|
|
/>
|
|
<DeleteGameClassModal
|
|
display={displayDeleteGameClassModal}
|
|
close={() => {setDisplayDeleteGameClassModal(false); setSelectedGameClass(undefined);}}
|
|
gameClass={selectedGameClass}
|
|
/>
|
|
</>
|
|
);
|
|
}
|