mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-02-22 17:42: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