Admin page raid groups tab working
This commit is contained in:
96
src/ui/raidGroup/AdminRaidGroupTab.tsx
Normal file
96
src/ui/raidGroup/AdminRaidGroupTab.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import PrimaryButton from "@/components/button/PrimaryButton";
|
||||
import TextInput from "@/components/input/TextInput";
|
||||
import Pagination from "@/components/pagination/Pagination";
|
||||
import { useGetRaidGroupsCount } from "@/hooks/RaidGroupHooks";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useDebouncedCallback } from "use-debounce";
|
||||
import RaidGroupModal from "./modals/RaidGroupModal";
|
||||
import RaidGroupsLoader from "./RaidGroupsLoader";
|
||||
|
||||
export default function AdminRaidGroupTab(){
|
||||
const [ displayCreateRaidGroupModal, setDisplayRaidGroupModal ] = useState(false);
|
||||
const [ page, setPage ] = useState(1);
|
||||
const [ totalPages, setTotalPages ] = useState(1);
|
||||
const [ searchTerm, setSearchTerm ] = useState("");
|
||||
const [ sentSearchTerm, setSentSearchTerm ] = useState<string>();
|
||||
const pageSize = 10;
|
||||
const modalId = crypto.randomUUID().replace("-", "");
|
||||
|
||||
|
||||
const raidGroupsCountQuery = useGetRaidGroupsCount(sentSearchTerm);
|
||||
|
||||
|
||||
const updateSearchTerm = useDebouncedCallback((newSearchTerm: string) => {
|
||||
setSentSearchTerm(newSearchTerm.length ? newSearchTerm : undefined);
|
||||
}, 1000);
|
||||
|
||||
useEffect(() => {
|
||||
updateSearchTerm(searchTerm);
|
||||
}, [ searchTerm, updateSearchTerm ]);
|
||||
|
||||
useEffect(() => {
|
||||
if(raidGroupsCountQuery.status === "success"){
|
||||
setTotalPages(Math.ceil(raidGroupsCountQuery.data / pageSize));
|
||||
}
|
||||
}, [ raidGroupsCountQuery ]);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="flex flex-row justify-between items-center w-full"
|
||||
>
|
||||
<div
|
||||
className="flex flex-row items-center justify-start w-full"
|
||||
>
|
||||
|
||||
</div>
|
||||
{/* Add Raid Group Button */}
|
||||
<div
|
||||
className="flex flex-row items-center justify-center w-full"
|
||||
>
|
||||
<PrimaryButton
|
||||
className="mb-8"
|
||||
onClick={() => setDisplayRaidGroupModal(true)}
|
||||
>
|
||||
Create Raid Group
|
||||
</PrimaryButton>
|
||||
<RaidGroupModal
|
||||
display={displayCreateRaidGroupModal}
|
||||
close={() => setDisplayRaidGroupModal(false)}
|
||||
raidGroup={undefined}
|
||||
/>
|
||||
</div>
|
||||
{/* Raid Group Search Box */}
|
||||
<div
|
||||
className="flex flex-row items-center justify-end w-full"
|
||||
>
|
||||
<div>
|
||||
<TextInput
|
||||
id={`raidGroupSearchBox${modalId}`}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="Search"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Raid Group List */}
|
||||
<RaidGroupsLoader
|
||||
page={page}
|
||||
pageSize={pageSize}
|
||||
searchTerm={sentSearchTerm}
|
||||
/>
|
||||
{/* Pagination */}
|
||||
<div
|
||||
className="my-12"
|
||||
>
|
||||
<Pagination
|
||||
currentPage={page}
|
||||
totalPages={totalPages}
|
||||
onChange={setPage}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
38
src/ui/raidGroup/RaidGroupAdminButtons.tsx
Normal file
38
src/ui/raidGroup/RaidGroupAdminButtons.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import { ButtonProps } from "@/components/button/Button";
|
||||
import DangerButton from "@/components/button/DangerButton";
|
||||
import PrimaryButton from "@/components/button/PrimaryButton";
|
||||
import { BsPencilFill, BsTrash3 } from "react-icons/bs";
|
||||
|
||||
|
||||
export default function RaidGroupAdminButtons({
|
||||
buttonProps,
|
||||
showEditRaidGroupModal,
|
||||
showDeleteRaidGroupModal
|
||||
}:{
|
||||
buttonProps: ButtonProps;
|
||||
showEditRaidGroupModal: () => void;
|
||||
showDeleteRaidGroupModal: () => void;
|
||||
}){
|
||||
return (
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-2"
|
||||
>
|
||||
<PrimaryButton
|
||||
{...buttonProps}
|
||||
onClick={showEditRaidGroupModal}
|
||||
>
|
||||
<BsPencilFill
|
||||
size={22}
|
||||
/>
|
||||
</PrimaryButton>
|
||||
<DangerButton
|
||||
{...buttonProps}
|
||||
onClick={showDeleteRaidGroupModal}
|
||||
>
|
||||
<BsTrash3
|
||||
size={22}
|
||||
/>
|
||||
</DangerButton>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
102
src/ui/raidGroup/RaidGroupsList.tsx
Normal file
102
src/ui/raidGroup/RaidGroupsList.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
import { ButtonProps } from "@/components/button/Button";
|
||||
import Table from "@/components/table/Table";
|
||||
import { RaidGroup } from "@/interface/RaidGroup";
|
||||
import { useState } from "react";
|
||||
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 [ displayEditRaidGroupModal, setDisplayEditRaidGroupModal ] = useState(false);
|
||||
const [ displayDeleteRaidGroupModal, setDisplayDeleteRaidGroupModal ] = useState(false);
|
||||
|
||||
|
||||
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"
|
||||
src={`${import.meta.env.VITE_ICON_URL}/raidGroupIcons/${raidGroup.raidGroupIcon}`}
|
||||
height={56}
|
||||
width={56}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>,
|
||||
<div>
|
||||
{raidGroup.raidGroupName}
|
||||
</div>,
|
||||
<div
|
||||
className="flex flex-row items-center justify-center gap-2 pl-16"
|
||||
>
|
||||
<div
|
||||
className="py-4 border-l border-neutral-500"
|
||||
>
|
||||
|
||||
</div>
|
||||
<RaidGroupAdminButtons
|
||||
buttonProps={buttonProps}
|
||||
showEditRaidGroupModal={() => {
|
||||
setSelectedRaidGroup(raidGroup);
|
||||
setDisplayEditRaidGroupModal(true);
|
||||
}}
|
||||
showDeleteRaidGroupModal={() => {
|
||||
setSelectedRaidGroup(raidGroup);
|
||||
setDisplayDeleteRaidGroupModal(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
]);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Table
|
||||
tableHeadElements={headElements}
|
||||
tableBodyElements={bodyElements}
|
||||
/>
|
||||
<RaidGroupModal
|
||||
display={displayEditRaidGroupModal}
|
||||
close={() => {setDisplayEditRaidGroupModal(false); setSelectedRaidGroup(undefined);}}
|
||||
raidGroup={selectedRaidGroup}
|
||||
/>
|
||||
<DeleteRaidGroupModal
|
||||
display={displayDeleteRaidGroupModal}
|
||||
close={() => {setDisplayDeleteRaidGroupModal(false); setSelectedRaidGroup(undefined);}}
|
||||
raidGroup={selectedRaidGroup}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
7
src/ui/raidGroup/RaidGroupsListSkeleton.tsx
Normal file
7
src/ui/raidGroup/RaidGroupsListSkeleton.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
export default function RaidGroupsListSkeleton(){
|
||||
return (
|
||||
<div>
|
||||
Raid Group List Skeleton
|
||||
</div>
|
||||
);
|
||||
}
|
||||
31
src/ui/raidGroup/RaidGroupsLoader.tsx
Normal file
31
src/ui/raidGroup/RaidGroupsLoader.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import DangerMessage from "@/components/message/DangerMessage";
|
||||
import { useGetRaidGroups } from "@/hooks/RaidGroupHooks";
|
||||
import RaidGroupsList from "./RaidGroupsList";
|
||||
import RaidGroupsListSkeleton from "./RaidGroupsListSkeleton";
|
||||
|
||||
export default function RaidGroupsLoader({
|
||||
page,
|
||||
pageSize,
|
||||
searchTerm
|
||||
}:{
|
||||
page: number;
|
||||
pageSize: number;
|
||||
searchTerm?: string;
|
||||
}){
|
||||
const raidGroupsQuery = useGetRaidGroups(page - 1, pageSize, searchTerm);
|
||||
|
||||
|
||||
if(raidGroupsQuery.status === "pending"){
|
||||
return <RaidGroupsListSkeleton/>
|
||||
}
|
||||
else if(raidGroupsQuery.status === "error"){
|
||||
return <DangerMessage>Error {raidGroupsQuery.error.message}</DangerMessage>
|
||||
}
|
||||
else{
|
||||
return (
|
||||
<RaidGroupsList
|
||||
raidGroups={raidGroupsQuery.data ?? []}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
63
src/ui/raidGroup/modals/DeleteRaidGroupModal.tsx
Normal file
63
src/ui/raidGroup/modals/DeleteRaidGroupModal.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
import DangerButton from "@/components/button/DangerButton";
|
||||
import SecondaryButton from "@/components/button/SecondaryButton";
|
||||
import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
|
||||
import { useDeleteRaidGroup } from "@/hooks/RaidGroupHooks";
|
||||
import { RaidGroup } from "@/interface/RaidGroup";
|
||||
import { useTimedModal } from "@/providers/TimedModalProvider";
|
||||
import { useEffect } from "react";
|
||||
|
||||
|
||||
export default function DeleteRaidGroupModal({
|
||||
display,
|
||||
close,
|
||||
raidGroup
|
||||
}:{
|
||||
display: boolean;
|
||||
close: () => void;
|
||||
raidGroup: RaidGroup | undefined;
|
||||
}){
|
||||
const deleteRaidGroupMutate = useDeleteRaidGroup();
|
||||
const { addSuccessMessage, addErrorMessage } = useTimedModal();
|
||||
|
||||
|
||||
const deleteGame = () => {
|
||||
deleteRaidGroupMutate.mutate(raidGroup?.raidGroupId ?? "");
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if(deleteRaidGroupMutate.status === "success"){
|
||||
deleteRaidGroupMutate.reset();
|
||||
addSuccessMessage(`Successfully delete ${raidGroup?.raidGroupName}`);
|
||||
close();
|
||||
}
|
||||
else if(deleteRaidGroupMutate.status === "error"){
|
||||
deleteRaidGroupMutate.reset();
|
||||
addErrorMessage(`Error deleting game ${raidGroup?.raidGroupName}: ${deleteRaidGroupMutate.error.message}`);
|
||||
console.log(deleteRaidGroupMutate.error);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
return (
|
||||
<RaidBuilderModal
|
||||
display={display}
|
||||
close={close}
|
||||
modalHeader={`Delete ${raidGroup?.raidGroupName}`}
|
||||
modalBody={`Are you sure you want to delete ${raidGroup?.raidGroupName}`}
|
||||
modalFooter={
|
||||
<>
|
||||
<DangerButton
|
||||
onClick={deleteGame}
|
||||
>
|
||||
Delete
|
||||
</DangerButton>
|
||||
<SecondaryButton
|
||||
onClick={close}
|
||||
>
|
||||
Cancel
|
||||
</SecondaryButton>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
130
src/ui/raidGroup/modals/RaidGroupModal.tsx
Normal file
130
src/ui/raidGroup/modals/RaidGroupModal.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
import PrimaryButton from "@/components/button/PrimaryButton";
|
||||
import SecondaryButton from "@/components/button/SecondaryButton";
|
||||
import GameSelector from "@/components/game/GameSelector";
|
||||
import IconInput from "@/components/input/IconInput";
|
||||
import TextInput from "@/components/input/TextInput";
|
||||
import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
|
||||
import { useGetGame } from "@/hooks/GameHooks";
|
||||
import { useCreateRaidGroup, useUpdateRaidGroup } from "@/hooks/RaidGroupHooks";
|
||||
import { Game } from "@/interface/Game";
|
||||
import { RaidGroup } from "@/interface/RaidGroup";
|
||||
import { useTimedModal } from "@/providers/TimedModalProvider";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
|
||||
export default function RaidGroupModal({
|
||||
display,
|
||||
close,
|
||||
raidGroup
|
||||
}:{
|
||||
display: boolean;
|
||||
close: () => void;
|
||||
raidGroup?: RaidGroup;
|
||||
}){
|
||||
const [ raidGroupName, setRaidGroupName ] = useState(raidGroup?.raidGroupName);
|
||||
const [ raidGroupIcon, setRaidGroupIcon ] = useState(raidGroup?.raidGroupIcon);
|
||||
const [ iconFile, setIconFile ] = useState<File | null>(null);
|
||||
const [ game, setGame ] = useState<Game>();
|
||||
const modalId = crypto.randomUUID().replace("-", "");
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setRaidGroupName(raidGroup?.raidGroupName ?? "");
|
||||
setRaidGroupIcon(raidGroup?.raidGroupIcon ?? "");
|
||||
}, [ raidGroup, setRaidGroupName, setRaidGroupIcon ]);
|
||||
|
||||
|
||||
const updateRaidGroupMutate = useUpdateRaidGroup();
|
||||
const createRaidGroupMutate = useCreateRaidGroup();
|
||||
const { addSuccessMessage, addErrorMessage } = useTimedModal();
|
||||
const gameQuery = useGetGame(raidGroup?.gameId ?? "", raidGroup === undefined);
|
||||
if(gameQuery.status === "success" && !game){
|
||||
setGame(gameQuery.data);
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if(updateRaidGroupMutate.status === "success"){
|
||||
updateRaidGroupMutate.reset();
|
||||
addSuccessMessage(`Updated raid group ${raidGroupName}`);
|
||||
close();
|
||||
}
|
||||
else if(updateRaidGroupMutate.status === "error"){
|
||||
updateRaidGroupMutate.reset();
|
||||
addErrorMessage(`Error updating raid group ${raidGroupName}: ${updateRaidGroupMutate.error.message}`);
|
||||
console.log(updateRaidGroupMutate.error);
|
||||
}
|
||||
else if(createRaidGroupMutate.status === "success"){
|
||||
createRaidGroupMutate.reset();
|
||||
addSuccessMessage(`Created raid group ${raidGroupName}`);
|
||||
close();
|
||||
}
|
||||
else if(createRaidGroupMutate.status === "error"){
|
||||
createRaidGroupMutate.reset();
|
||||
addErrorMessage(`Error creating raid group ${raidGroupName}: ${createRaidGroupMutate.error.message}`);
|
||||
console.log(createRaidGroupMutate.error);
|
||||
}
|
||||
}, [ updateRaidGroupMutate, createRaidGroupMutate, raidGroupName, close, addSuccessMessage, addErrorMessage ]);
|
||||
|
||||
|
||||
const updateRaidGroup = () => {
|
||||
updateRaidGroupMutate.mutate({raidGroup: {raidGroupId: raidGroup?.raidGroupId, raidGroupName, gameId: game?.gameId, raidGroupIcon} as RaidGroup, iconFile});
|
||||
}
|
||||
|
||||
const createRaidGroup = () => {
|
||||
createRaidGroupMutate.mutate({raidGroupName: raidGroupName ?? "", gameId: game?.gameId ?? "", iconFile});
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<RaidBuilderModal
|
||||
display={display}
|
||||
close={close}
|
||||
modalHeader={raidGroup ? "Update Raid Group" : "Create Raid Group"}
|
||||
modalBody={
|
||||
<div
|
||||
className="flex flex-col items-center justify-center gap-4"
|
||||
>
|
||||
<div
|
||||
className="flex flex-row items-center justify-center w-full px-4.5"
|
||||
>
|
||||
<TextInput
|
||||
id={`raidGroupModalRaidGroupName${modalId}`}
|
||||
placeholder="Raid Group Name"
|
||||
value={raidGroupName}
|
||||
onChange={(e) => setRaidGroupName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="w-full px-4.5"
|
||||
>
|
||||
<GameSelector
|
||||
game={game}
|
||||
onChange={setGame}
|
||||
disabled={!!raidGroup}
|
||||
/>
|
||||
</div>
|
||||
<IconInput
|
||||
file={iconFile}
|
||||
setFile={(file) => {setIconFile(file); setRaidGroupIcon(undefined);}}
|
||||
addErrorMessage={addErrorMessage}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
modalFooter={
|
||||
<>
|
||||
<PrimaryButton
|
||||
onClick={raidGroup ? updateRaidGroup : createRaidGroup}
|
||||
>
|
||||
{raidGroup ? "Update" : "Create"}
|
||||
</PrimaryButton>
|
||||
<SecondaryButton
|
||||
onClick={close}
|
||||
>
|
||||
Cancel
|
||||
</SecondaryButton>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user