Compare commits

..

2 Commits

Author SHA1 Message Date
b14383f8fd General History Drawer now works 2024-07-29 14:55:21 -05:00
c95ee5957c General History Drawer now works 2024-07-29 14:54:29 -05:00
4 changed files with 97 additions and 28 deletions

2
.prod/update.sh Executable file → Normal file
View File

@ -1,4 +1,4 @@
cd ~/Documents/Web/Tech_Tracker_Web
cd ~/Documents/Web/Tech_Tracker_Web || exit
git pull
pnpm update
sudo docker restart techtracker

View File

@ -8,6 +8,7 @@ export const GET = async (request: Request) => {
const url = new URL(request.url);
const apiKey = url.searchParams.get('apikey');
const page = Number(url.searchParams.get('page')) || 1;
const perPage = Number(url.searchParams.get('per_page')) || 50;
if (apiKey !== process.env.API_KEY) {
const session = await auth();
if (!session)
@ -16,7 +17,6 @@ export const GET = async (request: Request) => {
{ status: 401 }
);
}
const perPage = 50;
const historyData = await getHistory(page, perPage);
return NextResponse.json(historyData, { status: 200 });
} catch (error) {

View File

@ -1,3 +1,4 @@
import React, { useState, useEffect } from "react";
import Image from "next/image";
import {
Drawer,
@ -19,14 +20,56 @@ import {
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "~/components/ui/shadcn/pagination";
// Type definitions for Paginated History API
type HistoryEntry = {
name: string;
status: string;
updatedAt: Date;
}
type PaginatedHistory = {
data: HistoryEntry[];
meta: {
current_page: number;
per_page: number;
total_pages: number;
total_count: number;
}
}
export default function History_Drawer() {
const [history, setHistory] = useState<HistoryEntry[]>([]);
const [page, setPage] = useState<number>(1);
const [totalPages, setTotalPages] = useState<number>(1);
const perPage = 5;
useEffect(() => {
const fetchHistory = async (currentPage: number) => {
try {
const response = await fetch(`/api/get_paginated_history?page=${currentPage}&per_page=${perPage}`);
if (!response.ok)
throw new Error('Failed to fetch history');
const data: PaginatedHistory = await response.json() as PaginatedHistory;
setHistory(data.data);
setTotalPages(data.meta.total_pages);
} catch (error) {
console.error('Error fetching history:', error);
}
};
fetchHistory(page)
.catch((error) => {
console.error('Error fetching history:', error);
});
}, [page]);
const handlePageChange = (newPage: number) => {
setPage(newPage);
};
return (
<Drawer>
<DrawerTrigger>
@ -49,38 +92,50 @@ export default function History_Drawer() {
</div>
</DrawerTitle>
</DrawerHeader>
<Table className="w-5/6 lg:w-1/2 m-auto"
>
<Table className="w-5/6 lg:w-1/2 m-auto ">
<TableHeader>
<TableRow>
<TableHead className="">Name</TableHead>
<TableHead>Name</TableHead>
<TableHead>Status</TableHead>
<TableHead>Updated At</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell className="font-medium">INV001</TableCell>
<TableCell>Paid</TableCell>
<TableCell>Credit Card</TableCell>
{history.map((entry, index) => (
<TableRow key={index}>
<TableCell className="font-medium">{entry.name}</TableCell>
<TableCell>{entry.status}</TableCell>
<TableCell>{new Date(entry.updatedAt).toLocaleString()}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
<DrawerFooter>
<Pagination>
<PaginationContent>
{page > 1 && (
<PaginationItem>
<PaginationPrevious href="#" />
<PaginationPrevious
href="#"
onClick={(e) => {
e.preventDefault();
handlePageChange(page - 1);
}}
/>
</PaginationItem>
)}
<h3 className="text-center font-semibold">Page {page}</h3>
{page < totalPages && (
<PaginationItem>
<PaginationLink href="#">1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationEllipsis />
</PaginationItem>
<PaginationItem>
<PaginationNext href="#" />
<PaginationNext
href="#"
onClick={(e) => {
e.preventDefault();
handlePageChange(page + 1);
}}
/>
</PaginationItem>
)}
</PaginationContent>
</Pagination>
<DrawerClose>
@ -89,4 +144,18 @@ export default function History_Drawer() {
</DrawerContent>
</Drawer>
);
};
}
// If you want to show all page numbers:
//{Array.from({ length: totalPages }).map((_, idx) => (
//<PaginationItem key={idx}>
//<PaginationLink
//href="#"
//onClick={(e) => {
//e.preventDefault();
//handlePageChange(idx + 1);
//}}
//>{idx + 1}
//</PaginationLink>
//</PaginationItem>
//))}

View File

@ -53,12 +53,12 @@ export const updateEmployeeStatusByName =
};
// Type definitions for Paginated History API
interface HistoryEntry {
type HistoryEntry = {
name: string;
status: string;
updatedAt: Date;
}
interface PaginatedHistory {
type PaginatedHistory = {
data: HistoryEntry[];
meta: {
current_page: number;