People tab working

src/ui/person/PersonList.tsx

@@ -0,0 +1,122 @@
+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 { useState } from "react";
+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 [ 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"
+	};
+
+
+	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) => [
+		<div>
+			{person.personName}
+		</div>,
+		<div>
+			{person.discordId}
+		</div>,
+		<div>
+			<PersonCharacterDisplay
+				personId={person.personId ?? ""}
+				raidGroupId={raidGroup.raidGroupId ?? ""}
+			/>
+		</div>,
+		<div
+			className="flex flex-row items-center justify-center gap-2 pl-16"
+		>
+			<div
+				className="py-4 border-l border-neutral-500"
+			>
+				&nbsp;
+			</div>
+			<PersonAdminButtons
+				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 ?? ""}
+			/>
+		</>
+	);
+}