From ce40194147f686ee658a965b00e17192d5adc9dc Mon Sep 17 00:00:00 2001 From: Matthew Penner Date: Sun, 3 Jan 2021 12:32:39 -0700 Subject: [PATCH] Make pagination tabs dynamically update --- .../Api/Application/Nests/NestController.php | 2 +- .../scripts/components/admin/AdminTable.tsx | 88 +++++++++---------- 2 files changed, 42 insertions(+), 48 deletions(-) diff --git a/app/Http/Controllers/Api/Application/Nests/NestController.php b/app/Http/Controllers/Api/Application/Nests/NestController.php index 0979c453a..d2ed970b0 100644 --- a/app/Http/Controllers/Api/Application/Nests/NestController.php +++ b/app/Http/Controllers/Api/Application/Nests/NestController.php @@ -37,7 +37,7 @@ class NestController extends ApplicationApiController */ public function index(GetNestsRequest $request): array { - $nests = $this->repository->paginated(2); + $nests = $this->repository->paginated(1); return $this->fractal->collection($nests) ->transformWith($this->getTransformer(NestTransformer::class)) diff --git a/resources/scripts/components/admin/AdminTable.tsx b/resources/scripts/components/admin/AdminTable.tsx index aeb7fa69a..bbbed54d4 100644 --- a/resources/scripts/components/admin/AdminTable.tsx +++ b/resources/scripts/components/admin/AdminTable.tsx @@ -60,30 +60,22 @@ interface Props { const PaginationButton = styled.button<{ active?: boolean }>` ${tw`relative items-center px-3 py-1 -ml-px text-sm font-normal leading-5 transition duration-150 ease-in-out border border-neutral-500 focus:z-10 focus:outline-none focus:border-primary-300 inline-flex`}; - ${props => props.active ? tw`bg-neutral-500 text-neutral-50` : tw`bg-neutral-600 text-neutral-200 hover:text-neutral-300`}; + ${props => props.active ? tw`bg-neutral-500 text-neutral-50` : tw`bg-neutral-600 text-neutral-200 hover:text-neutral-50`}; `; const PaginationArrow = styled.button` - ${tw`relative inline-flex items-center px-1 py-1 text-sm font-medium leading-5 transition duration-150 ease-in-out border border-neutral-500 bg-neutral-600 text-neutral-400 hover:text-neutral-200 focus:z-10 focus:outline-none focus:border-primary-300 active:bg-neutral-100 active:text-neutral-500`}; + ${tw`relative inline-flex items-center px-1 py-1 text-sm font-medium leading-5 transition duration-150 ease-in-out border border-neutral-500 bg-neutral-600 text-neutral-400 hover:text-neutral-50 focus:z-10 focus:outline-none focus:border-primary-300`}; + + &:disabled { + ${tw`bg-neutral-700`} + } + + &:hover:disabled { + ${tw`text-neutral-400 cursor-default`}; + } `; export function Pagination ({ data: { pagination }, onPageSelect, children }: Props) { - const isFirstPage = pagination.currentPage === 1; - const isLastPage = pagination.currentPage >= pagination.totalPages; - - /* const pages = []; - - const start = Math.max(pagination.currentPage - 2, 1); - const end = Math.min(pagination.totalPages, pagination.currentPage + 5); - - for (let i = start; i <= start + 3; i++) { - pages.push(i); - } - - for (let i = end; i >= end - 3; i--) { - pages.push(i); - } */ - const setPage = (page: number) => { if (page < 1 || page > pagination.totalPages) { return; @@ -92,6 +84,30 @@ export function Pagination ({ data: { pagination }, onPageSelect, children }: onPageSelect(page); }; + const isFirstPage = pagination.currentPage === 1; + const isLastPage = pagination.currentPage >= pagination.totalPages; + + const pages = []; + + if (pagination.totalPages < 7) { + for (let i = 1; i <= pagination.totalPages; i++) { + pages.push(i); + } + } else { + // Don't ask me how this works, all I know is that this code will always have 7 items in the pagination, + // and keeps the current page centered if it is not too close to the start or end. + let start = Math.max(pagination.currentPage - 3, 1); + const end = Math.min(pagination.totalPages, pagination.currentPage + ((pagination.currentPage < 4) ? 7 - pagination.currentPage : 3)); + + while (start !== 1 && end - start !== 6) { + start--; + } + + for (let i = start; i <= end; i++) { + pages.push(i); + } + } + return ( <> {children} @@ -106,41 +122,19 @@ export function Pagination ({ data: { pagination }, onPageSelect, children }: :