124 lines
3.6 KiB
TypeScript
124 lines
3.6 KiB
TypeScript
import { ButtonProps } from "@/components/button/Button";
|
|
import Table from "@/components/table/Table";
|
|
import { RaidGroup } from "@/interface/RaidGroup";
|
|
import { useAuth } from "@/providers/AuthProvider";
|
|
import { containsRaidGroupRequest, isRaidGroupAdmin, isRaidGroupMember } from "@/util/PermissionUtil";
|
|
import { useState } from "react";
|
|
import { Link } from "react-router";
|
|
import RaidGroupRequestModal from "../raidGroupRequest/modal/RaidGroupRequestModal";
|
|
import DeleteRaidGroupModal from "./modals/DeleteRaidGroupModal";
|
|
import RaidGroupModal from "./modals/RaidGroupModal";
|
|
import RaidGroupAdminButtons from "./RaidGroupAdminButtons";
|
|
|
|
|
|
export default function RaidGroupsList({
|
|
raidGroups
|
|
}:{
|
|
raidGroups: RaidGroup[];
|
|
}){
|
|
const [ selectedRaidGroup, setSelectedRaidGroup ] = useState<RaidGroup>();
|
|
const [ displayRaidGroupRequestModal, setDisplayRaidGroupRequestModal ] = useState(false);
|
|
const [ displayEditRaidGroupModal, setDisplayEditRaidGroupModal ] = useState(false);
|
|
const [ displayDeleteRaidGroupModal, setDisplayDeleteRaidGroupModal ] = useState(false);
|
|
const { accountPermissions, raidGroupPermissions, raidGroupRequests } = useAuth();
|
|
|
|
|
|
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[][] = raidGroups.map((raidGroup) => [
|
|
<div>
|
|
{
|
|
raidGroup.raidGroupIcon &&
|
|
<div
|
|
className="absolute -my-4"
|
|
>
|
|
<img
|
|
className="m-auto max-h-14 max-w-14"
|
|
src={`${import.meta.env.VITE_ICON_URL}/raidGroup/${raidGroup.raidGroupIcon}`}
|
|
/>
|
|
</div>
|
|
}
|
|
|
|
</div>,
|
|
<Link
|
|
to={`/raidGroup/${raidGroup.raidGroupId}`}
|
|
>
|
|
{raidGroup.raidGroupName}
|
|
</Link>,
|
|
<div
|
|
className="flex flex-row items-center justify-center gap-2 pl-16"
|
|
>
|
|
<div
|
|
className="py-4 border-l border-neutral-500"
|
|
>
|
|
|
|
</div>
|
|
<RaidGroupAdminButtons
|
|
raidGroup={raidGroup}
|
|
buttonProps={{
|
|
...buttonProps,
|
|
disabled: !isRaidGroupAdmin(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions) && !containsRaidGroupRequest(raidGroup.raidGroupId ?? "", raidGroupRequests)
|
|
}}
|
|
showRaidGroupRequestModal={() => {
|
|
setSelectedRaidGroup(raidGroup);
|
|
setDisplayRaidGroupRequestModal(true);
|
|
}}
|
|
showEditRaidGroupModal={() => {
|
|
setSelectedRaidGroup(raidGroup);
|
|
setDisplayEditRaidGroupModal(true);
|
|
}}
|
|
showDeleteRaidGroupModal={() => {
|
|
setSelectedRaidGroup(raidGroup);
|
|
setDisplayDeleteRaidGroupModal(true);
|
|
}}
|
|
hasRaidGroupPermissions={isRaidGroupMember(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions)}
|
|
hasRaidGroupRequest={containsRaidGroupRequest(raidGroup.raidGroupId ?? "", raidGroupRequests)}
|
|
/>
|
|
</div>
|
|
]);
|
|
|
|
|
|
return (
|
|
<>
|
|
<Table
|
|
tableHeadElements={headElements}
|
|
tableBodyElements={bodyElements}
|
|
/>
|
|
<RaidGroupRequestModal
|
|
display={displayRaidGroupRequestModal}
|
|
close={() => {setDisplayRaidGroupRequestModal(false); setSelectedRaidGroup(undefined);}}
|
|
raidGroupId={selectedRaidGroup?.raidGroupId ?? ""}
|
|
/>
|
|
<RaidGroupModal
|
|
display={displayEditRaidGroupModal}
|
|
close={() => {setDisplayEditRaidGroupModal(false); setSelectedRaidGroup(undefined);}}
|
|
raidGroup={selectedRaidGroup}
|
|
/>
|
|
<DeleteRaidGroupModal
|
|
display={displayDeleteRaidGroupModal}
|
|
close={() => {setDisplayDeleteRaidGroupModal(false); setSelectedRaidGroup(undefined);}}
|
|
raidGroup={selectedRaidGroup}
|
|
/>
|
|
</>
|
|
);
|
|
}
|