130 lines
3.4 KiB
TypeScript
130 lines
3.4 KiB
TypeScript
import { ButtonProps } from "@/components/button/Button";
|
|
import Table from "@/components/table/Table";
|
|
import { RaidGroup } from "@/interface/RaidGroup";
|
|
import { RaidInstance } from "@/interface/RaidInstance";
|
|
import { useAuth } from "@/providers/AuthProvider";
|
|
import { isRaidGroupAdmin, isRaidGroupLeader } from "@/util/PermissionUtil";
|
|
import moment from "moment";
|
|
import { useState } from "react";
|
|
import { Link } from "react-router";
|
|
import DeleteRaidInstanceModal from "./modals/DeleteRaidInstanceModal";
|
|
import RaidInstanceModal from "./modals/RaidInstanceModal";
|
|
import RaidInstanceAdminButtons from "./RaidInstanceAdminButtons";
|
|
|
|
|
|
export default function RaidInstanceList({
|
|
raidInstances,
|
|
raidGroup
|
|
}:{
|
|
raidInstances: RaidInstance[];
|
|
raidGroup: RaidGroup;
|
|
}){
|
|
const { accountPermissions, raidGroupPermissions } = useAuth();
|
|
const [ selectedRaidInstance, setSelectedRaidInstance ] = useState<RaidInstance>();
|
|
const [ displayEditRaidInstanceModal, setDisplayEditRaidInstanceModal ] = useState(false);
|
|
const [ displayDeleteRaidInstanceModal, setDisplayDeleteRaidInstanceModal ] = useState(false);
|
|
|
|
|
|
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
|
|
className="text-nowrap"
|
|
>
|
|
Raid Instance
|
|
</div>,
|
|
<div
|
|
className="text-nowrap"
|
|
>
|
|
Start Date
|
|
</div>,
|
|
<div
|
|
className="text-nowrap"
|
|
>
|
|
End Date
|
|
</div>,
|
|
<div
|
|
className="text-nowrap"
|
|
>
|
|
Size
|
|
</div>,
|
|
<div
|
|
className="text-nowrap"
|
|
>
|
|
Runs
|
|
</div>,
|
|
<div
|
|
className="text-nowrap pl-16"
|
|
>
|
|
Actions
|
|
</div>
|
|
];
|
|
|
|
const bodyElements: React.ReactNode[][] = raidInstances.map((raidInstance) => [
|
|
<Link
|
|
to={`/raidGroup/${raidInstance.raidGroupId}/raidInstance/${raidInstance.raidInstanceId}`}
|
|
className="text-nowrap"
|
|
>
|
|
{raidInstance.raidInstanceName}
|
|
</Link>,
|
|
<div
|
|
className="text-nowrap"
|
|
>
|
|
{moment(raidInstance.raidStartDate).format("MM-DD-YYYY HH:mm")}
|
|
</div>,
|
|
<div
|
|
className="text-nowrap"
|
|
>
|
|
{moment(raidInstance.raidEndDate).format("MM-DD-YYYY HH:mm")}
|
|
</div>,
|
|
<div>
|
|
{raidInstance.raidSize}
|
|
</div>,
|
|
<div>
|
|
{raidInstance.numberRuns}
|
|
</div>,
|
|
<div
|
|
className="flex flex-row items-center justify-center gap-2 pl-16"
|
|
>
|
|
<div
|
|
className="py-4 border-l border-neutral-500"
|
|
>
|
|
|
|
</div>
|
|
<RaidInstanceAdminButtons
|
|
raidInstance={raidInstance}
|
|
buttonProps={buttonProps}
|
|
showRaidInstanceModal={() => { setSelectedRaidInstance(raidInstance); setDisplayEditRaidInstanceModal(true); }}
|
|
showDeleteRaidInstanceModal={() => { setSelectedRaidInstance(raidInstance); setDisplayDeleteRaidInstanceModal(true); }}
|
|
/>
|
|
</div>
|
|
]);
|
|
|
|
|
|
return (
|
|
<>
|
|
<Table
|
|
tableHeadElements={headElements}
|
|
tableBodyElements={bodyElements}
|
|
/>
|
|
<RaidInstanceModal
|
|
display={displayEditRaidInstanceModal}
|
|
close={() => { setDisplayEditRaidInstanceModal(false); setSelectedRaidInstance(undefined); }}
|
|
raidInstance={selectedRaidInstance}
|
|
raidGroup={raidGroup}
|
|
/>
|
|
<DeleteRaidInstanceModal
|
|
display={displayDeleteRaidInstanceModal}
|
|
close={() => { setDisplayDeleteRaidInstanceModal(false); setSelectedRaidInstance(undefined); }}
|
|
raidInstance={selectedRaidInstance}
|
|
/>
|
|
</>
|
|
);
|
|
}
|