RaidBuilder/RaidBuilderWeb
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added paging to accounts table

Browse Source
This commit is contained in:
Mattrixwv
2025-03-02 20:45:44 -05:00
parent d06d421d03
commit 7c3b462651
14 changed files with 266 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/button/DangerButton.tsx
View File

@@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button";
export default function DangerButton(props: ButtonProps){ export default function DangerButton(props: ButtonProps){
const { const {
variant = "solid" variant = "solid",
disabled
} = props; } = props;
@@ -16,20 +17,26 @@ export default function DangerButton(props: ButtonProps){
//Background //Background
{ {
"bg-transparent": variant === "outline" || variant === "icon", "bg-transparent": variant === "outline" || variant === "icon",
"bg-red-600 hover:bg-red-700 active:bg-red-800": variant === "solid", "bg-red-600 hover:bg-red-700 active:bg-red-800": (variant === "solid") && (!disabled),
"bg-transparent hover:bg-red-600 active:bg-red-700": variant === "ghost" || variant === "outline-ghost" "bg-red-400/80": (variant === "solid") && (disabled),
"bg-transparent hover:bg-red-600 active:bg-red-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
}, },
//Text //Text
{ {
"text-white": variant === "solid", "text-white": variant === "solid",
"text-red-600 hover:text-red-700 active:text-red-800": variant === "outline" || variant === "icon", "text-red-600 hover:text-red-700 active:text-red-800": (variant === "outline" || variant === "icon") && (!disabled),
"text-red-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost" "text-red-400/80": (variant === "outline" || variant === "icon") && (disabled),
"text-red-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"text-red-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
}, },
//Outline //Outline
{ {
"outline-none": variant === "ghost" || variant === "icon", "outline-none": variant === "ghost" || variant === "icon",
"outline outline-red-600 hover:outline-red-700 active:outline-red-800": variant === "solid" || variant === "outline", "outline outline-red-600 hover:outline-red-700 active:outline-red-800": (variant === "solid" || variant === "outline") && (!disabled),
"outline hover:outline-red-600 active:outline-red-700": variant === "outline-ghost" "outline outline-red-400/80": (variant === "solid" || variant === "outline") && (disabled),
"outline hover:outline-red-600 active:outline-red-700": (variant === "outline-ghost") && (!disabled),
"outline outline-red-400/80 ": (variant === "outline-ghost") && (disabled)
} }
)} )}
> >

21
src/components/button/DarkButton.tsx
View File

@@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button";
export default function DarkButton(props: ButtonProps){ export default function DarkButton(props: ButtonProps){
const { const {
variant = "solid" variant = "solid",
disabled
} = props; } = props;
@@ -16,20 +17,26 @@ export default function DarkButton(props: ButtonProps){
//Background //Background
{ {
"bg-transparent": variant === "outline" || variant === "icon", "bg-transparent": variant === "outline" || variant === "icon",
"bg-black hover:bg-neutral-700 active:bg-neutral-500": variant === "solid", "bg-black hover:bg-neutral-700 active:bg-neutral-500": (variant === "solid") && (!disabled),
"bg-transparent hover:bg-black active:bg-neutral-700": variant === "ghost" || variant === "outline-ghost" "bg-neutral-700": (variant === "solid") && (disabled),
"bg-transparent hover:bg-black active:bg-neutral-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
}, },
//Text //Text
{ {
"text-white": variant === "solid", "text-white": variant === "solid",
"text-black hover:text-neutral-700 active:text-neutral-500": variant === "outline" || variant === "icon", "text-black hover:text-neutral-700 active:text-neutral-500": (variant === "outline" || variant === "icon") && (!disabled),
"text-black hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost" "text-neutral-700": (variant === "outline" || variant === "icon") && (disabled),
"text-black hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"text-neutral-700 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
}, },
//Outline //Outline
{ {
"outline-none": variant === "ghost" || variant === "icon", "outline-none": variant === "ghost" || variant === "icon",
"outline outline-black hover:outline-neutral-700 active:outline-neutral-500": variant === "solid" || variant === "outline", "outline outline-black hover:outline-neutral-700 active:outline-neutral-500": (variant === "solid" || variant === "outline") && (!disabled),
"outline hover:outline-black active:outline-neutral-700": variant === "outline-ghost" "outline outline-neutral-700": (variant === "solid" || variant === "outline") && (disabled),
"outline hover:outline-black active:outline-neutral-700": (variant === "outline-ghost") && (!disabled),
"outline outline-neutral-700 ": (variant === "outline-ghost") && (disabled)
} }
)} )}
> >

21
src/components/button/LightButton.tsx
View File

@@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button";
export default function LightButton(props: ButtonProps){ export default function LightButton(props: ButtonProps){
const { const {
variant = "solid" variant = "solid",
disabled
} = props; } = props;
@@ -16,20 +17,26 @@ export default function LightButton(props: ButtonProps){
//Background //Background
{ {
"bg-transparent": variant === "outline" || variant === "icon", "bg-transparent": variant === "outline" || variant === "icon",
"bg-white hover:bg-neutral-300 active:bg-neutral-400": variant === "solid", "bg-white hover:bg-neutral-300 active:bg-neutral-400": (variant === "solid") && (!disabled),
"bg-transparent hover:bg-white active:bg-neutral-300": variant === "ghost" || variant === "outline-ghost" "bg-neutral-400/80": (variant === "solid") && (disabled),
"bg-transparent hover:bg-white active:bg-neutral-300": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
}, },
//Text //Text
{ {
"text-black": variant === "solid", "text-black": variant === "solid",
"text-white hover:text-neutral-300 active:text-neutral-400": variant === "outline" || variant === "icon", "text-white hover:text-neutral-300 active:text-neutral-400": (variant === "outline" || variant === "icon") && (!disabled),
"text-white hover:text-black active:text-black": variant === "ghost" || variant === "outline-ghost" "text-neutral-400/80": (variant === "outline" || variant === "icon") && (disabled),
"text-white hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"text-neutral-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
}, },
//Outline //Outline
{ {
"outline-none": variant === "ghost" || variant === "icon", "outline-none": variant === "ghost" || variant === "icon",
"outline outline-white hover:outline-neutral-300 active:outline-neutral-400": variant === "solid" || variant === "outline", "outline outline-white hover:outline-neutral-300 active:outline-neutral-400": (variant === "solid" || variant === "outline") && (!disabled),
"outline hover:outline-neutral-300 active:outline-neutral-400": variant === "outline-ghost" "outline outline-neutral-400/80": (variant === "solid" || variant === "outline") && (disabled),
"outline hover:outline-neutral-300 active:outline-neutral-400": (variant === "outline-ghost") && (!disabled),
"outline outline-neutral-400/80 ": (variant === "outline-ghost") && (disabled)
} }
)} )}
> >

21
src/components/button/MoltenButton.tsx
View File

@@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button";
export default function MoltenButton(props: ButtonProps){ export default function MoltenButton(props: ButtonProps){
const { const {
variant = "solid" variant = "solid",
disabled
} = props; } = props;
@@ -16,20 +17,26 @@ export default function MoltenButton(props: ButtonProps){
//Background //Background
{ {
"bg-transparent": variant === "outline" || variant === "icon", "bg-transparent": variant === "outline" || variant === "icon",
"bg-orange-600 hover:bg-orange-700 active:bg-orange-800": variant === "solid", "bg-orange-600 hover:bg-orange-700 active:bg-orange-800": (variant === "solid") && (!disabled),
"bg-transparent hover:bg-orange-600 active:bg-orange-700": variant === "ghost" || variant === "outline-ghost" "bg-orange-400/80": (variant === "solid") && (disabled),
"bg-transparent hover:bg-orange-600 active:bg-orange-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
}, },
//Text //Text
{ {
"text-white": variant === "solid", "text-white": variant === "solid",
"text-orange-600 hover:text-orange-700 active:text-orange-800": variant === "outline" || variant === "icon", "text-orange-600 hover:text-orange-700 active:text-orange-800": (variant === "outline" || variant === "icon") && (!disabled),
"text-orange-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost" "text-orange-400/80": (variant === "outline" || variant === "icon") && (disabled),
"text-orange-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"text-orange-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
}, },
//Outline //Outline
{ {
"outline-none": variant === "ghost" || variant === "icon", "outline-none": variant === "ghost" || variant === "icon",
"outline outline-orange-600 hover:outline-orange-700 active:outline-orange-800": variant === "solid" || variant === "outline", "outline outline-orange-600 hover:outline-orange-700 active:outline-orange-800": (variant === "solid" || variant === "outline") && (!disabled),
"outline hover:outline-orange-600 active:outline-orange-700": variant === "outline-ghost" "outline outline-orange-400/80": (variant === "solid" || variant === "outline") && (disabled),
"outline hover:outline-orange-600 active:outline-orange-700": (variant === "outline-ghost") && (!disabled),
"outline outline-orange-400/80 ": (variant === "outline-ghost") && (disabled)
} }
)} )}
> >

21
src/components/button/PrimaryButton.tsx
View File

@@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button";
export default function PrimaryButton(props: ButtonProps){ export default function PrimaryButton(props: ButtonProps){
const { const {
variant = "solid" variant = "solid",
disabled
} = props; } = props;
@@ -16,20 +17,26 @@ export default function PrimaryButton(props: ButtonProps){
//Background //Background
{ {
"bg-transparent": variant === "outline" || variant === "icon", "bg-transparent": variant === "outline" || variant === "icon",
"bg-blue-600 hover:bg-blue-700 active:bg-blue-800": variant === "solid", "bg-blue-600 hover:bg-blue-700 active:bg-blue-800": (variant === "solid") && (!disabled),
"bg-transparent hover:bg-blue-600 active:bg-blue-700": variant === "ghost" || variant === "outline-ghost" "bg-blue-400/80": (variant === "solid") && (disabled),
"bg-transparent hover:bg-blue-600 active:bg-blue-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
}, },
//Text //Text
{ {
"text-white": variant === "solid", "text-white": variant === "solid",
"text-blue-600 hover:text-blue-700 active:text-blue-800": variant === "outline" || variant === "icon", "text-blue-600 hover:text-blue-700 active:text-blue-800": (variant === "outline" || variant === "icon") && (!disabled),
"text-blue-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost" "text-blue-400/80": (variant === "outline" || variant === "icon") && (disabled),
"text-blue-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost",
"text-blue-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
}, },
//Outline //Outline
{ {
"outline-none": variant === "ghost" || variant === "icon", "outline-none": variant === "ghost" || variant === "icon",
"outline outline-blue-600 hover:outline-blue-700 active:outline-blue-800": variant === "solid" || variant === "outline", "outline outline-blue-600 hover:outline-blue-700 active:outline-blue-800": (variant === "solid" || variant === "outline") && (!disabled),
"outline hover:outline-blue-600 active:outline-blue-700": variant === "outline-ghost" "outline outline-blue-400/80": (variant === "solid" || variant === "outline") && (disabled),
"outline hover:outline-blue-600 active:outline-blue-700": (variant === "outline-ghost") && (!disabled),
"outline outline-blue-400/80 ": (variant === "outline-ghost") && (disabled)
} }
)} )}
> >

21
src/components/button/SecondaryButton.tsx
View File

@@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button";
export default function SecondaryButton(props: ButtonProps){ export default function SecondaryButton(props: ButtonProps){
const { const {
variant = "solid" variant = "solid",
disabled
} = props; } = props;
@@ -16,20 +17,26 @@ export default function SecondaryButton(props: ButtonProps){
//Background //Background
{ {
"bg-transparent": variant === "outline" || variant === "icon", "bg-transparent": variant === "outline" || variant === "icon",
"bg-neutral-500 hover:bg-neutral-600 active:bg-neutral-700": variant === "solid", "bg-neutral-500 hover:bg-neutral-600 active:bg-neutral-700": (variant === "solid") && (!disabled),
"bg-transparent hover:bg-neutral-500 active:bg-neutral-600": variant === "ghost" || variant === "outline-ghost" "bg-neutral-700": (variant === "solid") && (disabled),
"bg-transparent hover:bg-neutral-500 active:bg-neutral-600": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
}, },
//Text //Text
{ {
"text-white": variant === "solid", "text-white": variant === "solid",
"text-neutral-500 hover:text-neutral-600 active:text-neutral-700": variant === "outline" || variant === "icon", "text-neutral-500 hover:text-neutral-600 active:text-neutral-700": (variant === "outline" || variant === "icon") && (!disabled),
"text-neutral-500 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost" "text-neutral-700": (variant === "outline" || variant === "icon") && (disabled),
"text-neutral-500 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"text-neutral-700 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
}, },
//Outline //Outline
{ {
"outline-none": variant === "ghost" || variant === "icon", "outline-none": variant === "ghost" || variant === "icon",
"outline outline-neutral-500 hover:outline-neutral-600 active:outline-neutral-700": variant === "solid" || variant === "outline", "outline outline-neutral-500 hover:outline-neutral-600 active:outline-neutral-700": (variant === "solid" || variant === "outline") && (!disabled),
"outline hover:outline-neutral-500 active:outline-neutral-600": variant === "outline-ghost" "outline outline-neutral-700": (variant === "solid" || variant === "outline") && (disabled),
"outline hover:outline-neutral-500 active:outline-neutral-600": (variant === "outline-ghost") && (!disabled),
"outline outline-neutral-700 ": (variant === "outline-ghost") && (disabled)
} }
)} )}
> >

21
src/components/button/SuccessButton.tsx
View File

@@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button";
export default function SuccessButton(props: ButtonProps){ export default function SuccessButton(props: ButtonProps){
const { const {
variant = "solid" variant = "solid",
disabled
} = props; } = props;
@@ -16,20 +17,26 @@ export default function SuccessButton(props: ButtonProps){
//Background //Background
{ {
"bg-transparent": variant === "outline" || variant === "icon", "bg-transparent": variant === "outline" || variant === "icon",
"bg-green-600 hover:bg-green-700 active:bg-green-800": variant === "solid", "bg-green-600 hover:bg-green-700 active:bg-green-800": (variant === "solid") && (!disabled),
"bg-transparent hover:bg-green-600 active:bg-green-700": variant === "ghost" || variant === "outline-ghost" "bg-green-300/80": (variant === "solid") && (disabled),
"bg-transparent hover:bg-green-600 active:bg-green-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
}, },
//Text //Text
{ {
"text-white": variant === "solid", "text-white": variant === "solid",
"text-green-600 hover:text-green-700 active:text-green-800": variant === "outline" || variant === "icon", "text-green-600 hover:text-green-700 active:text-green-800": (variant === "outline" || variant === "icon") && (!disabled),
"text-green-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost" "text-green-300/80": (variant === "outline" || variant === "icon") && (disabled),
"text-green-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"text-green-300/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
}, },
//Outline //Outline
{ {
"outline-none": variant === "ghost" || variant === "icon", "outline-none": variant === "ghost" || variant === "icon",
"outline outline-green-600 hover:outline-green-700 active:outline-green-800": variant === "solid" || variant === "outline", "outline outline-green-600 hover:outline-green-700 active:outline-green-800": (variant === "solid" || variant === "outline") && (!disabled),
"outline hover:outline-green-600 active:outline-green-700": variant === "outline-ghost" "outline outline-green-300/80": (variant === "solid" || variant === "outline") && (disabled),
"outline hover:outline-green-600 active:outline-green-700": (variant === "outline-ghost") && (!disabled),
"outline outline-green-300/80 ": (variant === "outline-ghost") && (disabled)
} }
)} )}
> >

21
src/components/button/TertiaryButton.tsx
View File

@@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button";
export default function TertiaryButton(props: ButtonProps){ export default function TertiaryButton(props: ButtonProps){
const { const {
variant = "solid" variant = "solid",
disabled
} = props; } = props;
@@ -16,20 +17,26 @@ export default function TertiaryButton(props: ButtonProps){
//Background //Background
{ {
"bg-transparent": variant === "outline" || variant === "icon", "bg-transparent": variant === "outline" || variant === "icon",
"bg-purple-600 hover:bg-purple-700 active:bg-purple-800": variant === "solid", "bg-purple-600 hover:bg-purple-700 active:bg-purple-800": (variant === "solid") && (!disabled),
"bg-transparent hover:bg-purple-600 active:bg-purple-700": variant === "ghost" || variant === "outline-ghost" "bg-purple-400/80": (variant === "solid") && (disabled),
"bg-transparent hover:bg-purple-600 active:bg-purple-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
}, },
//Text //Text
{ {
"text-white": variant === "solid", "text-white": variant === "solid",
"text-purple-600 hover:text-purple-700 active:text-purple-800": variant === "outline" || variant === "icon", "text-purple-600 hover:text-purple-700 active:text-purple-800": (variant === "outline" || variant === "icon") && (!disabled),
"text-purple-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost" "text-purple-400/80": (variant === "outline" || variant === "icon") && (disabled),
"text-purple-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"text-purple-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
}, },
//Outline //Outline
{ {
"outline-none": variant === "ghost" || variant === "icon", "outline-none": variant === "ghost" || variant === "icon",
"outline outline-purple-600 hover:outline-purple-700 active:outline-purple-800": variant === "solid" || variant === "outline", "outline outline-purple-600 hover:outline-purple-700 active:outline-purple-800": (variant === "solid" || variant === "outline") && (!disabled),
"outline hover:outline-purple-600 active:outline-purple-700": variant === "outline-ghost" "outline outline-purple-400/80": (variant === "solid" || variant === "outline") && (disabled),
"outline hover:outline-purple-600 active:outline-purple-700": (variant === "outline-ghost") && (!disabled),
"outline outline-purple-400/80 ": (variant === "outline-ghost") && (disabled)
} }
)} )}
> >

21
src/components/button/WarningButton.tsx
View File

@@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button";
export default function WarningButton(props: ButtonProps){ export default function WarningButton(props: ButtonProps){
const { const {
variant = "solid" variant = "solid",
disabled
} = props; } = props;
@@ -16,20 +17,26 @@ export default function WarningButton(props: ButtonProps){
//Background //Background
{ {
"bg-transparent": variant === "outline" || variant === "icon", "bg-transparent": variant === "outline" || variant === "icon",
"bg-yellow-400 hover:bg-yellow-500 active:bg-yellow-600": variant === "solid", "bg-yellow-400 hover:bg-yellow-500 active:bg-yellow-600": (variant === "solid") && (!disabled),
"bg-transparent hover:bg-yellow-400 active:bg-yellow-500": variant === "ghost" || variant === "outline-ghost" "bg-yellow-600/80": (variant === "solid") && (disabled),
"bg-transparent hover:bg-yellow-400 active:bg-yellow-500": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
}, },
//Text //Text
{ {
"text-black": variant === "solid", "text-black": variant === "solid",
"text-yellow-400 hover:text-yellow-500 active:text-yellow-600": variant === "outline" || variant === "icon", "text-yellow-400 hover:text-yellow-500 active:text-yellow-600": (variant === "outline" || variant === "icon") && (!disabled),
"text-yellow-400 hover:text-black active:text-black": variant === "ghost" || variant === "outline-ghost" "text-yellow-600/80": (variant === "outline" || variant === "icon") && (disabled),
"text-yellow-400 hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled),
"text-yellow-600/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled)
}, },
//Outline //Outline
{ {
"outline-none": variant === "ghost" || variant === "icon", "outline-none": variant === "ghost" || variant === "icon",
"outline outline-yellow-400 hover:outline-yellow-500 active:outline-yellow-600": variant === "solid" || variant === "outline", "outline outline-yellow-400 hover:outline-yellow-500 active:outline-yellow-600": (variant === "solid" || variant === "outline") && (!disabled),
"outline hover:outline-yellow-400 active:outline-yellow-500": variant === "outline-ghost" "outline outline-yellow-600/80": (variant === "solid" || variant === "outline") && (disabled),
"outline hover:outline-yellow-400 active:outline-yellow-500": (variant === "outline-ghost") && (!disabled),
"outline outline-yellow-600/80 ": (variant === "outline-ghost") && (disabled)
} }
)} )}
> >

65
src/components/pagination/Pagination.tsx Normal file
View File

@@ -0,0 +1,65 @@
import { generatePagination } from "@/util/PaginationUtil";
import { BsChevronLeft, BsChevronRight } from "react-icons/bs";
import PrimaryButton from "../button/PrimaryButton";
export default function Pagination({
currentPage,
totalPages,
onChange
}:{
currentPage: number;
totalPages: number;
onChange: (page: number) => void;
}){
const pages = generatePagination(currentPage, totalPages);
return(
<div
className="flex flex-row items-center justify-center w-full text-xl text-white"
>
<div
className="mr-8"
>
<PrimaryButton
shape="square"
className="w-9 h-9"
disabled={currentPage <= 1}
onClick={() => onChange(currentPage - 1)}
>
<BsChevronLeft/>
</PrimaryButton>
</div>
<div
className="flex flex-row items-center justify-center gap-4"
>
{
pages.map((page, index) => (
<PrimaryButton
key={index}
size="sm"
shape="square"
className="w-9 h-9"
disabled={(page === "...") || (page === currentPage)}
onClick={() => onChange(page as number)}
>
{page}
</PrimaryButton>
))
}
</div>
<div
className="ml-8"
>
<PrimaryButton
shape="square"
className="w-9 h-9"
disabled={currentPage >= totalPages}
onClick={() => onChange(currentPage + 1)}
>
<BsChevronRight/>
</PrimaryButton>
</div>
</div>
);
}

18
src/hooks/AccountHooks.ts
View File

@@ -28,6 +28,24 @@ export function useGetAccounts(page: number, pageSize: number, searchTerm?: stri
}); });
} }
export function useGetAccountsCount(){
return useQuery({
queryKey: [ "accounts", "count"],
queryFn: async () => {
const response = await api.get("/account/count");
if(response.status !== 200){
throw new Error("Failed to get accounts count");
}
else if(response.data.errors){
throw new Error(response.data.errors.join(", "));
}
return response.data.count as number;
}
});
}
export function useForcePasswordReset(accountId: string){ export function useForcePasswordReset(accountId: string){
const queryClient = useQueryClient(); const queryClient = useQueryClient();

3
src/index.css
View File

@@ -53,6 +53,9 @@ body {
button { button {
cursor: pointer; cursor: pointer;
} }
button:disabled {
cursor: default;
}
nav { nav {
position: fixed; position: fixed;

29
src/ui/account/AccountsLoader.tsx
View File

@@ -1,7 +1,8 @@
import PrimaryButton from "@/components/button/PrimaryButton"; import PrimaryButton from "@/components/button/PrimaryButton";
import DangerMessage from "@/components/message/DangerMessage"; import DangerMessage from "@/components/message/DangerMessage";
import { useGetAccounts } from "@/hooks/AccountHooks"; import Pagination from "@/components/pagination/Pagination";
import { useState } from "react"; import { useGetAccounts, useGetAccountsCount } from "@/hooks/AccountHooks";
import { useEffect, useState } from "react";
import AccountsList from "./AccountsList"; import AccountsList from "./AccountsList";
import AccountsListSkeleton from "./AccountsListSkeleton"; import AccountsListSkeleton from "./AccountsListSkeleton";
import AccountModal from "./modals/AccountModal"; import AccountModal from "./modals/AccountModal";
@@ -9,8 +10,19 @@ import AccountModal from "./modals/AccountModal";
export default function AccountsLoader(){ export default function AccountsLoader(){
const [ displayCreateAccountModal, setDisplayCreateAccountModal ] = useState(false); const [ displayCreateAccountModal, setDisplayCreateAccountModal ] = useState(false);
const [ page, setPage ] = useState(1);
const [ totalPages, setTotalPages ] = useState(1);
const pageSize = 10;
const accountsQuery = useGetAccounts(0, 20); const accountsQuery = useGetAccounts(page - 1, pageSize);
const accountsCountQuery = useGetAccountsCount();
useEffect(() => {
if(accountsCountQuery.isSuccess){
setTotalPages(Math.ceil(accountsCountQuery.data / pageSize));
}
}, [ accountsCountQuery ]);
if(accountsQuery.isLoading){ if(accountsQuery.isLoading){
@@ -38,7 +50,16 @@ export default function AccountsLoader(){
<AccountsList <AccountsList
accounts={accountsQuery.data ?? []} accounts={accountsQuery.data ?? []}
/> />
{/* TODO: Add Pagination */} {/* Pagination */}
<div
className="my-12"
>
<Pagination
currentPage={page}
totalPages={totalPages}
onChange={setPage}
/>
</div>
</> </>
); );
} }

29
src/util/PaginationUtil.ts Normal file
View File

@@ -0,0 +1,29 @@
export function generatePagination(currentPage: number, totalPages: number){
//If the total number of pages is 7 or less, display all pages without any ellipsis
if(totalPages <= 7){
return Array.from({length: totalPages}, (_, i) => i + 1);
}
//If the current page is among the first 3 pages, show the first 3, an ellipsis, and the last 2 pages.
else if(currentPage <= 3){
return [1, 2, 3, '...', totalPages - 1, totalPages];
}
//If the current page is among the last 3 pages, show the first 2, an ellipsis, and the last 3 pages
else if(currentPage >= totalPages - 2){
return [1, 2, '...', totalPages - 2, totalPages - 1, totalPages];
}
//If the current page is somewhere in the middle, show the first page, and ellipsis, the current page and its neighbors, another ellipsis, and the last page
else{
return [
1,
'...',
currentPage - 1,
currentPage,
currentPage + 1,
'...',
totalPages
];
}
}