mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-02-21 18:22:00 +00:00
Add filter, pagination, search, and user table components
This commit is contained in:
parent
8673b8730f
commit
1b43c85491
73
components/filter.tsx
Normal file
73
components/filter.tsx
Normal file
@ -0,0 +1,73 @@
|
||||
"use client";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import { useState, useTransition } from "react";
|
||||
|
||||
interface FilterOption {
|
||||
value: string;
|
||||
label: string;
|
||||
icon: React.ReactNode;
|
||||
}
|
||||
|
||||
interface FilterProps {
|
||||
options: FilterOption[];
|
||||
defaultOption: string;
|
||||
queryParamKey: string;
|
||||
}
|
||||
|
||||
export default function Filter({
|
||||
options,
|
||||
defaultOption,
|
||||
queryParamKey,
|
||||
}: FilterProps) {
|
||||
const [selectedOption, setSelectedOption] = useState(defaultOption);
|
||||
const searchParams = useSearchParams();
|
||||
const { replace } = useRouter();
|
||||
const pathname = usePathname();
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
function handleFilterChange(value: string) {
|
||||
setSelectedOption(value);
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
|
||||
params.set(queryParamKey, value);
|
||||
params.set("page", "1");
|
||||
|
||||
startTransition(() => {
|
||||
replace(`${pathname}?${params.toString()}`);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn(isPending && "animate-pulse")}>
|
||||
<Select
|
||||
disabled={isPending}
|
||||
value={selectedOption}
|
||||
onValueChange={(val) => handleFilterChange(val)}
|
||||
>
|
||||
<SelectTrigger className="w-auto bg-white">
|
||||
<SelectValue>
|
||||
{options.find((option) => option.value === selectedOption)?.label}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent align="end">
|
||||
{options.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
<div className="flex items-center gap-4">
|
||||
{option.icon}
|
||||
<span>{option.label}</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
109
components/pagination.tsx
Normal file
109
components/pagination.tsx
Normal file
@ -0,0 +1,109 @@
|
||||
"use client";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
type PaginationProps = {
|
||||
totalPages: number;
|
||||
currentPage: number;
|
||||
maxVisible?: number;
|
||||
};
|
||||
|
||||
export default function Pagination({
|
||||
totalPages,
|
||||
currentPage,
|
||||
maxVisible = 4,
|
||||
}: PaginationProps) {
|
||||
const searchParams = useSearchParams();
|
||||
const activePage = searchParams.get("page") ?? 1;
|
||||
const router = useRouter();
|
||||
|
||||
const [queryParams, setQueryParams] = useState<{ [key: string]: string }>({});
|
||||
|
||||
useEffect(() => {
|
||||
const params = Object.fromEntries(
|
||||
Array.from(searchParams.entries()).filter(([key]) => key !== "page"),
|
||||
);
|
||||
setQueryParams(params);
|
||||
}, [searchParams]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!searchParams.has("page")) {
|
||||
router.replace(`?page=1${IncludeQueries()}`);
|
||||
}
|
||||
});
|
||||
|
||||
function IncludeQueries() {
|
||||
return Object.entries(queryParams)
|
||||
.map(([key, value]) => `&${key}=${value}`)
|
||||
.join("");
|
||||
}
|
||||
|
||||
const generatePageNumbers = (): (number | string)[] => {
|
||||
const halfVisible = Math.floor(maxVisible / 2);
|
||||
let startPage = Math.max(currentPage - halfVisible, 1);
|
||||
const endPage = Math.min(startPage + maxVisible - 1, totalPages);
|
||||
|
||||
if (endPage - startPage + 1 < maxVisible) {
|
||||
startPage = Math.max(endPage - maxVisible + 1, 1);
|
||||
}
|
||||
|
||||
const pageNumbers: (number | string)[] = [];
|
||||
|
||||
if (startPage > 1) {
|
||||
pageNumbers.push(1);
|
||||
if (startPage > 2) pageNumbers.push("...");
|
||||
}
|
||||
|
||||
for (let i = startPage; i <= endPage; i++) {
|
||||
pageNumbers.push(i);
|
||||
}
|
||||
|
||||
if (endPage < totalPages) {
|
||||
if (endPage < totalPages - 1) pageNumbers.push("...");
|
||||
pageNumbers.push(totalPages);
|
||||
}
|
||||
|
||||
return pageNumbers;
|
||||
};
|
||||
|
||||
const pageNumbers = generatePageNumbers();
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center space-x-2 my-4">
|
||||
{currentPage > 1 && (
|
||||
<Link href={`?page=${Number(currentPage) - 1}${IncludeQueries()}`}>
|
||||
<Button variant="secondary" className="flex items-center gap-2">
|
||||
<ArrowLeftIcon className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{pageNumbers.map((page) => (
|
||||
<React.Fragment key={`${page}`}>
|
||||
{typeof page === "number" ? (
|
||||
<Link href={`?page=${page}${IncludeQueries()}`}>
|
||||
<Button
|
||||
variant={Number(activePage) === page ? "default" : "outline"}
|
||||
>
|
||||
{page}
|
||||
</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<span className="px-2">...</span>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
{currentPage < totalPages && (
|
||||
<Link href={`?page=${Number(currentPage) + 1}${IncludeQueries()}`}>
|
||||
<Button variant="secondary" className="flex items-center gap-2">
|
||||
<ArrowRightIcon className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
61
components/search.tsx
Normal file
61
components/search.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
"use client";
|
||||
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import { useRef, useTransition } from "react";
|
||||
import { Button } from "./ui/button";
|
||||
import { Loader } from "lucide-react";
|
||||
|
||||
export default function Search({ disabled }: { disabled?: boolean }) {
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const { replace } = useRouter();
|
||||
|
||||
const pathname = usePathname();
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const searchParams = useSearchParams();
|
||||
const searchQuery = searchParams.get("query");
|
||||
|
||||
function handleSearch(term: string) {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
|
||||
if (term) {
|
||||
params.set("query", term);
|
||||
params.set("page", "1");
|
||||
} else {
|
||||
params.delete("query");
|
||||
}
|
||||
|
||||
startTransition(() => {
|
||||
replace(`${pathname}?${params.toString()}`);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex gap-2 items-center justify-end">
|
||||
<Input
|
||||
ref={inputRef}
|
||||
placeholder="Search..."
|
||||
className={cn("bg-white")}
|
||||
type="text"
|
||||
name="search"
|
||||
id="search"
|
||||
defaultValue={searchQuery ? searchQuery : ""}
|
||||
disabled={disabled}
|
||||
spellCheck={false}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
/>
|
||||
<Button
|
||||
disabled={isPending}
|
||||
onClick={() => {
|
||||
if (inputRef.current) {
|
||||
inputRef.current.value = "";
|
||||
}
|
||||
replace(pathname);
|
||||
}}
|
||||
>
|
||||
{isPending ? <Loader className="animate-spin" /> : "Reset"}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
204
components/user-table.tsx
Normal file
204
components/user-table.tsx
Normal file
@ -0,0 +1,204 @@
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import prisma from "@/lib/db";
|
||||
import { Badge } from "./ui/badge";
|
||||
import Pagination from "./pagination";
|
||||
import { UserVerifyDialog } from "./user/user-verify-dialog";
|
||||
|
||||
export async function UsersTable({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{
|
||||
query: string;
|
||||
page: number;
|
||||
sortBy: string;
|
||||
status: string;
|
||||
}>;
|
||||
}) {
|
||||
const query = (await searchParams)?.query || "";
|
||||
const page = (await searchParams)?.page;
|
||||
const sortBy = (await searchParams)?.sortBy || "asc";
|
||||
const verified = (await searchParams)?.status || "all";
|
||||
const totalUsers = await prisma.user.count({
|
||||
where: {
|
||||
OR: [
|
||||
{
|
||||
name: {
|
||||
contains: query || "",
|
||||
mode: "insensitive",
|
||||
},
|
||||
},
|
||||
{
|
||||
phoneNumber: {
|
||||
contains: query || "",
|
||||
mode: "insensitive",
|
||||
},
|
||||
},
|
||||
{
|
||||
house_name: {
|
||||
contains: query || "",
|
||||
mode: "insensitive",
|
||||
},
|
||||
},
|
||||
{
|
||||
id_card: {
|
||||
contains: query || "",
|
||||
mode: "insensitive",
|
||||
},
|
||||
},
|
||||
],
|
||||
verified: verified === "all" ? undefined : verified === "verified",
|
||||
},
|
||||
});
|
||||
|
||||
const totalPages = Math.ceil(totalUsers / 10);
|
||||
const limit = 10;
|
||||
const offset = (Number(page) - 1) * limit || 0;
|
||||
|
||||
const users = await prisma.user.findMany({
|
||||
where: {
|
||||
OR: [
|
||||
{
|
||||
name: {
|
||||
contains: query || "",
|
||||
mode: "insensitive",
|
||||
},
|
||||
},
|
||||
{
|
||||
phoneNumber: {
|
||||
contains: query || "",
|
||||
mode: "insensitive",
|
||||
},
|
||||
},
|
||||
{
|
||||
house_name: {
|
||||
contains: query || "",
|
||||
mode: "insensitive",
|
||||
},
|
||||
},
|
||||
{
|
||||
id_card: {
|
||||
contains: query || "",
|
||||
mode: "insensitive",
|
||||
},
|
||||
},
|
||||
],
|
||||
verified: verified === "all" ? undefined : verified === "verified",
|
||||
},
|
||||
include: {
|
||||
island: true,
|
||||
atoll: true,
|
||||
},
|
||||
skip: offset,
|
||||
take: limit,
|
||||
orderBy: {
|
||||
name: `${sortBy}` as "asc" | "desc",
|
||||
},
|
||||
});
|
||||
|
||||
// const users = await prisma.user.findMany({
|
||||
// where: {
|
||||
// role: "USER",
|
||||
// },
|
||||
// include: {
|
||||
// atoll: true,
|
||||
// island: true,
|
||||
// },
|
||||
// });
|
||||
return (
|
||||
<div>
|
||||
{users.length === 0 ? (
|
||||
<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
|
||||
<h3>No Users yet.</h3>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Table className="overflow-scroll">
|
||||
<TableCaption>Table of all users.</TableCaption>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>ID Card</TableHead>
|
||||
<TableHead>Atoll</TableHead>
|
||||
<TableHead>Island</TableHead>
|
||||
<TableHead>House Name</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Dob</TableHead>
|
||||
<TableHead>Phone Number</TableHead>
|
||||
<TableHead>Action</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="overflow-scroll">
|
||||
{users.map((user) => (
|
||||
<TableRow
|
||||
className={`${user.verified && "title-bg"}`}
|
||||
key={user.id}
|
||||
>
|
||||
<TableCell className="font-medium">{user.name}</TableCell>
|
||||
<TableCell className="font-medium">{user.id_card}</TableCell>
|
||||
<TableCell>{user.atoll?.name}</TableCell>
|
||||
<TableCell>{user.island?.name}</TableCell>
|
||||
<TableCell>{user.house_name}</TableCell>
|
||||
|
||||
<TableCell>
|
||||
{user.verified ? (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-lime-100 text-black"
|
||||
>
|
||||
Verified
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-yellow-100 text-black"
|
||||
>
|
||||
Unverified
|
||||
</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{new Date(user.dob ?? "").toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
})}
|
||||
</TableCell>
|
||||
|
||||
<TableCell>{user.phoneNumber}</TableCell>
|
||||
<TableCell>
|
||||
<UserVerifyDialog user={user} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={8}>
|
||||
{query.length > 0 && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Showing {users.length} locations for "{query}
|
||||
"
|
||||
</p>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
{totalUsers} users
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
<Pagination totalPages={totalPages} currentPage={page} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user