135 lines
3.7 KiB
TypeScript
135 lines
3.7 KiB
TypeScript
import { ButtonProps } from "@/components/button/Button";
|
|
import PersonCharacterDisplay from "@/components/personCharacter/PersonCharacterDisplay";
|
|
import Table from "@/components/table/Table";
|
|
import { Person } from "@/interface/Person";
|
|
import { RaidGroup } from "@/interface/RaidGroup";
|
|
import { useAuth } from "@/providers/AuthProvider";
|
|
import { isRaidGroupAdmin, isRaidGroupLeader } from "@/util/PermissionUtil";
|
|
import { useState } from "react";
|
|
import { Link } from "react-router";
|
|
import PersonCharacterModal from "../personCharacter/modal/PersonCharacterModal";
|
|
import DeletePersonModal from "./modals/DeletePersonModal";
|
|
import PersonModal from "./modals/PersonModal";
|
|
import PersonAdminButtons from "./PersonAdminButtons";
|
|
|
|
|
|
export default function PersonList({
|
|
people,
|
|
raidGroup
|
|
}:{
|
|
people: Person[];
|
|
raidGroup: RaidGroup;
|
|
}){
|
|
const { accountPermissions, raidGroupPermissions } = useAuth();
|
|
const [ selectedPerson, setSelectedPerson ] = useState<Person>();
|
|
const [ displayUpdatePersonModal, setDisplayUpdatePersonModal ] = useState(false);
|
|
const [ displayDeletePersonModal, setDisplayDeletePersonModal ] = useState(false);
|
|
const [ displayCreatePersonCharacterModal, setDisplayCreatePersonCharacterModal ] = 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"
|
|
>
|
|
Person Name
|
|
</div>,
|
|
<div
|
|
className="text-nowrap"
|
|
>
|
|
Discord ID
|
|
</div>,
|
|
<div>
|
|
Characters
|
|
</div>,
|
|
<div
|
|
className="pl-16"
|
|
>
|
|
Actions
|
|
</div>
|
|
];
|
|
|
|
const bodyElements: React.ReactNode[][] = people.map((person) => [
|
|
<Link
|
|
to={`/raidGroup/${raidGroup.raidGroupId}/person/${person.personId}`}
|
|
className="text-nowrap"
|
|
>
|
|
{person.personName}
|
|
</Link>,
|
|
<div>
|
|
{person.discordId}
|
|
</div>,
|
|
<Link
|
|
to={`/raidGroup/${raidGroup.raidGroupId}/person/${person.personId}`}
|
|
className="text-nowrap"
|
|
>
|
|
<PersonCharacterDisplay
|
|
personId={person.personId ?? ""}
|
|
raidGroupId={raidGroup.raidGroupId ?? ""}
|
|
/>
|
|
</Link>,
|
|
<div
|
|
className="flex flex-row items-center justify-center gap-2 pl-16"
|
|
>
|
|
<div
|
|
className="py-4 border-l border-neutral-500"
|
|
>
|
|
|
|
</div>
|
|
<PersonAdminButtons
|
|
person={person}
|
|
buttonProps={buttonProps}
|
|
showUpdatePersonModal={() => {
|
|
setSelectedPerson(person);
|
|
setDisplayUpdatePersonModal(true);
|
|
}}
|
|
showDeletePersonModal={() => {
|
|
setSelectedPerson(person);
|
|
setDisplayDeletePersonModal(true);
|
|
}}
|
|
showCreatePersonCharacterModal={() => {
|
|
setSelectedPerson(person);
|
|
setDisplayCreatePersonCharacterModal(true);
|
|
}}
|
|
/>
|
|
</div>
|
|
]);
|
|
|
|
|
|
return (
|
|
<>
|
|
<Table
|
|
tableHeadElements={headElements}
|
|
tableBodyElements={bodyElements}
|
|
/>
|
|
<PersonModal
|
|
display={displayUpdatePersonModal}
|
|
close={() => {setDisplayUpdatePersonModal(false); setSelectedPerson(undefined);}}
|
|
person={selectedPerson}
|
|
raidGroupId={raidGroup.raidGroupId ?? ""}
|
|
/>
|
|
<DeletePersonModal
|
|
display={displayDeletePersonModal}
|
|
close={() => {setDisplayDeletePersonModal(false); setSelectedPerson(undefined);}}
|
|
person={selectedPerson}
|
|
raidGroupId={raidGroup.raidGroupId ?? ""}
|
|
/>
|
|
<PersonCharacterModal
|
|
display={displayCreatePersonCharacterModal}
|
|
close={() => {setDisplayCreatePersonCharacterModal(false); setSelectedPerson(undefined);}}
|
|
personId={selectedPerson?.personId ?? ""}
|
|
personCharacter={undefined}
|
|
gameId={raidGroup.gameId}
|
|
raidGroupId={raidGroup.raidGroupId ?? ""}
|
|
/>
|
|
</>
|
|
);
|
|
}
|