feat: update pagination [gh-36]

Tivix · Jul 10, 2024 · 30082e2 · 30082e2
1 parent 386282a
commit 30082e2
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 32 deletions.
diff --git a/frontend/src/app/(app)/(root)/people/page.tsx b/frontend/src/app/(app)/(root)/people/page.tsx
@@ -220,6 +220,7 @@ export default function People() {
   const [fetchedPeople, setFetchedPeople] = useState<Employee[]>();
   const [fetchedPeopleTypes, setFetchedPeopleTypes] = useState<FetchedPeopleTypes>();
   const [peopleTypeAmount, setPeopleTypeAmount] = useState(-1);
+  const [pagePosition, setPagePosition] = useState(1);
 
   const selectedFilterLabel = bands.find((option) => option.value === band)?.label || 'Current band';
 
@@ -238,17 +239,24 @@ export default function People() {
     },
   ];
 
+  useEffect(() => {
+    const selectedPagePosition =
+      pageParam && document.querySelector(`[data-page="${pageParam}"]`)?.getAttribute('data-position');
+
+    selectedPagePosition && setPagePosition(+selectedPagePosition);
+  }, [pageParam]);
+
   useEffect(() => {
     if (tabParam && tabParam !== tab) {
       setTab(tabParam);
     }
     if (pageParam && +pageParam !== page) {
       setPage(+pageParam);
     }
-    if (bandParam && bandParam !== band.split('_')[1]) {
-      bandParam && setBand(bands.filter((band) => band.id - 1 === +bandParam)[0].value);
+    if (bandParam !== band.split('_')[1]) {
+      setBand(bandParam ? bands.filter((band) => band.id - 1 === +bandParam)[0].value : bands[0].value);
     }
-  }, [tabParam, pageParam, bandParam, band, page, tab]);
+  }, [tabParam, pageParam, bandParam, tab, page, band]);
 
   useEffect(() => {
     getPeopleDetails(tab, page.toString(), band);
@@ -291,13 +299,15 @@ export default function People() {
   };
 
   const pageClickHandler = (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, pageNumber?: number) => {
-    if (!pageNumber) return urlChangeHandler(undefined, event.currentTarget.value, band.split('_')[1]);
+    const clickedPagePosition = event.currentTarget.dataset.position;
+    clickedPagePosition && setPagePosition(+clickedPagePosition);
+
+    if (!pageNumber) return urlChangeHandler(undefined, event.currentTarget.innerText, band.split('_')[1]);
 
     urlChangeHandler(undefined, pageNumber.toString(), band.split('_')[1]);
   };
 
   const bandChangeHandler = (band: string) => {
-    !band && setBand(bands[0].value);
     urlChangeHandler(undefined, '1', band && band.split('_')[1]);
   };
 
@@ -372,6 +382,7 @@ export default function People() {
           itemsAmount={peopleTypeAmount}
           setPageNumber={(e, number) => pageClickHandler(e, number)}
           pageNumber={page}
+          pagePosition={pagePosition}
         />
       </div>
     </div>

diff --git a/frontend/src/components/common/Pagination/Pagination.interface.ts b/frontend/src/components/common/Pagination/Pagination.interface.ts
@@ -4,4 +4,5 @@ export interface PaginationProps {
   itemsAmount?: number;
   setPageNumber: (event: MouseEvent<HTMLButtonElement>, number?: number) => void;
   pageNumber: number;
+  pagePosition: number;
 }
diff --git a/frontend/src/components/common/Pagination/Pagination.tsx b/frontend/src/components/common/Pagination/Pagination.tsx
@@ -1,9 +1,10 @@
 import { ChevronRightIcon } from '@app/static/icons/ChevronRightIcon';
 import { PaginationProps } from './Pagination.interface';
-import { rowsPerPage } from '@app/const';
+import { paginationMaxPages, rowsPerPage } from '@app/const';
+import { generateClassNames } from '@app/utils';
 
 export const Pagination = ({ itemsAmount, setPageNumber, pageNumber }: PaginationProps) => {
-  const numberOfPages = itemsAmount && [...Array(Math.ceil(itemsAmount / rowsPerPage))];
+  const pagesButtons = itemsAmount && [...Array(Math.ceil(itemsAmount / rowsPerPage))];
 
   const getResultsNumber = (position?: string) => {
     if (position === 'start') return pageNumber * rowsPerPage - rowsPerPage + 1;
@@ -13,6 +14,41 @@ export const Pagination = ({ itemsAmount, setPageNumber, pageNumber }: Paginatio
       : pageNumber * rowsPerPage;
   };
 
+  // TO REFACTOR
+  const getPageNumber = (index: number) => {
+    // return pagesButtons && pagesButtons?.length > paginationMaxPages
+    //   ? (pageNumber <= startPagesWithoutTruncation && index + 1 === paginationMaxPages - 1) ||
+    //     (pageNumber >= pagesButtons.length - 2 && index + 1 === 2)
+    //     ? '...'
+    //     : pageNumber <= startPagesWithoutTruncation && index + 1 <= startPagesWithoutTruncation
+    //       ? index + 1
+    //       : pageNumber >= pagesButtons.length - 2 && index + 1 >= startPagesWithoutTruncation
+    //         ? pagesButtons.length - (paginationMaxPages - (index + 1))
+    //         : index + 1 === paginationMaxPages
+    //           ? pagesButtons.length
+    //           : (pagePosition === startPagesWithoutTruncation + 1 &&
+    //                 pageNumber > startPagesWithoutTruncation + 1 &&
+    //                 index + 1 === 2) ||
+    //               (pagePosition === startPagesWithoutTruncation + 2 &&
+    //                 pageNumber > startPagesWithoutTruncation + 2 &&
+    //                 index + 1 === 2) ||
+    //               (pagePosition === startPagesWithoutTruncation + 1 &&
+    //                 pageNumber < pagesButtons.length - 4 &&
+    //                 index + 1 === paginationMaxPages - 1) ||
+    //               (pagePosition === startPagesWithoutTruncation + 2 &&
+    //                 pageNumber < pagesButtons.length - 3 &&
+    //                 index + 1 === paginationMaxPages - 1)
+    //             ? '...'
+    //             : pagePosition === 6 &&
+    //                 pageNumber !== pagesButtons.length - 2 &&
+    //                 index + 1 <= pagePosition &&
+    //                 index + 1 >= startPagesWithoutTruncation
+    //               ? pageNumber + (index + 1 - pageNumber + 1)
+    //               : index + 1
+    //   : index + 1;
+    return index + 1;
+  };
+
   return (
     <div className="flex items-center justify-between py-4">
       <p className="text-sm text-navy-600 *:font-semibold">
@@ -30,28 +66,43 @@ export const Pagination = ({ itemsAmount, setPageNumber, pageNumber }: Paginatio
           className="flex h-11 w-11 items-center justify-center"
           onClick={(e) => pageNumber !== 1 && setPageNumber(e, --pageNumber)}
         >
-          <ChevronRightIcon className="h-6 w-6 rotate-180 text-navy-600" aria-hidden="true" />
+          <ChevronRightIcon
+            className={generateClassNames('h-6 w-6 rotate-180 text-navy-600', {
+              'cursor-not-allowed text-navy-300': pageNumber === 1,
+            })}
+            aria-hidden="true"
+          />
         </button>
         <div className="flex text-sm font-medium text-navy-600 *:flex *:h-11 *:w-11 *:items-center *:justify-center *:rounded-full *:border *:border-white *:px-5">
-          {numberOfPages &&
-            numberOfPages.map((_, index) => (
-              <button
-                key={index}
-                value={index + 1}
-                {...(pageNumber === index + 1 && {
-                  className: 'bg-blue-100 text-blue-900 [&]:border-blue-800',
-                })}
-                onClick={setPageNumber}
-              >
-                {index + 1}
-              </button>
-            ))}
+          {pagesButtons &&
+            pagesButtons.map((_, index) => {
+              if (index + 1 <= paginationMaxPages) {
+                return (
+                  <button
+                    key={index + 1}
+                    data-position={index + 1}
+                    data-page={getPageNumber(index)}
+                    {...(pageNumber === index + 1 && {
+                      className: 'bg-blue-100 text-blue-900 [&]:border-blue-800',
+                    })}
+                    onClick={pageNumber !== index + 1 ? setPageNumber : undefined}
+                  >
+                    {getPageNumber(index)}
+                  </button>
+                );
+              }
+            })}
         </div>
         <button
           className="flex h-11 w-11 items-center justify-center"
-          onClick={(e) => numberOfPages && pageNumber !== numberOfPages.length && setPageNumber(e, ++pageNumber)}
+          onClick={(e) => pagesButtons && pageNumber !== pagesButtons.length && setPageNumber(e, ++pageNumber)}
         >
-          <ChevronRightIcon className="h-6 w-6 text-navy-600" aria-hidden="true" />
+          <ChevronRightIcon
+            className={generateClassNames('h-6 w-6 text-navy-600', {
+              'cursor-not-allowed text-navy-300': pagesButtons && pageNumber === pagesButtons.length,
+            })}
+            aria-hidden="true"
+          />
         </button>
       </div>
     </div>

diff --git a/frontend/src/components/modules/EmployeeCard/EmployeeCard.tsx b/frontend/src/components/modules/EmployeeCard/EmployeeCard.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import { EmployeeCardProps } from './EmployeeCard.interface';
-import { CheckmarkIcon } from '@app/static/icons/CheckmarkIcon';
+import { CheckMarkIcon } from '@app/static/icons/CheckmarkIcon';
 import { generateClassNames } from '@app/utils';
 import { tabs } from '@app/const';
 import { DropdownMenuComponent } from '../../common/DropdownMenuComponent';
@@ -84,7 +84,7 @@ export const EmployeeCard = ({ employee, tabSelected }: EmployeeCardProps) => {
                   className: multipleItems,
                 })}
               >
-                {ladder.activeGoal ? <CheckmarkIcon /> : null}
+                {ladder.activeGoal ? <CheckMarkIcon /> : null}
               </span>
             ))}
           </div>

diff --git a/frontend/src/const/index.js b/frontend/src/const/index.js
@@ -1 +1 @@
-export { bands, tabs, rowsPerPage } from './peoplePage';
+export { bands, tabs, rowsPerPage, paginationMaxPages, startPagesWithoutTruncation } from './peoplePage';
diff --git a/frontend/src/const/peoplePage.js b/frontend/src/const/peoplePage.js
@@ -23,3 +23,5 @@ export const tabs = [
 ];
 
 export const rowsPerPage = 10;
+export const paginationMaxPages = 8;
+export const startPagesWithoutTruncation = 3;
diff --git a/frontend/src/static/icons/CheckmarkIcon.tsx b/frontend/src/static/icons/CheckmarkIcon.tsx
@@ -1,11 +1,11 @@
 export const CheckMarkIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
-      d="M1.75 7.19987L5.97917 10.791L12.5417 2.91602"
-      stroke="white"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      d="M2.5 10.2858L8.54167 15.416L17.9167 4.16602"
+      stroke="#257D05"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
     />
   </svg>
 );
diff --git a/package-lock.json b/package-lock.json