120 lines
3.6 KiB
TypeScript
120 lines
3.6 KiB
TypeScript
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 { useAuth } from "@/providers/AuthProvider";
|
|
import { isRaidGroupAdmin, isRaidGroupLeader } from "@/util/PermissionUtil";
|
|
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 { accountPermissions, raidGroupPermissions } = useAuth();
|
|
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",
|
|
disabled: !isRaidGroupAdmin(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions) && !isRaidGroupLeader(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions)
|
|
};
|
|
|
|
|
|
const headElements: React.ReactNode[] = [
|
|
<div
|
|
key="name"
|
|
className="text-nowrap"
|
|
>
|
|
Raid Layout Name
|
|
</div>,
|
|
<div
|
|
key="size"
|
|
className="text-nowrap"
|
|
>
|
|
Raid Size
|
|
</div>,
|
|
<div
|
|
key="classGroups"
|
|
className="text-nowrap"
|
|
>
|
|
Class Groups
|
|
</div>,
|
|
<div
|
|
key="actions"
|
|
className="pl-16"
|
|
>
|
|
Actions
|
|
</div>
|
|
];
|
|
|
|
const bodyElements: React.ReactNode[][] = raidLayouts.map((raidLayout) => [
|
|
<div key="name">
|
|
{raidLayout.raidLayoutName}
|
|
</div>,
|
|
<div key="size">
|
|
{raidLayout.raidSize}
|
|
</div>,
|
|
<div key="classGroups">
|
|
<ClassGroupsByRaidLayoutDisplay raidGroupId={raidGroup.raidGroupId ?? ""} raidLayoutId={raidLayout.raidLayoutId ?? ""}/>
|
|
</div>,
|
|
<div
|
|
key="actions"
|
|
className="flex flex-row items-center justify-center gap-2 pl-16"
|
|
>
|
|
<div
|
|
className="py-4 border-l border-neutral-500"
|
|
>
|
|
|
|
</div>
|
|
<RaidLayoutAdminButtons
|
|
raidLayout={raidLayout}
|
|
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}
|
|
/>
|
|
</>
|
|
);
|
|
}
|