feat: pagination in catalog bottom

stardustmeg · Jun 6, 2024 · c039e97 · c039e97
1 parent e049828
commit c039e97
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 11 deletions.
diff --git a/src/features/Pagination/view/paginationView.module.scss b/src/features/Pagination/view/paginationView.module.scss
@@ -2,7 +2,10 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--tiny-offset);
+  margin-top: auto;
+  margin-left: var(--tiny-offset);
+  max-width: max-content;
+  gap: 0 var(--tiny-offset);
 }
 
 .pageButton {
@@ -40,10 +43,6 @@
     opacity: 0.5;
     pointer-events: none;
   }
-
-  &:nth-child(1) {
-    margin-left: var(--tiny-offset);
-  }
 }
 
 .active {

diff --git a/src/widgets/Catalog/model/CatalogModel.ts b/src/widgets/Catalog/model/CatalogModel.ts
@@ -25,10 +25,14 @@ import { showErrorMessage } from '@/shared/utils/userMessage.ts';
 
 import CatalogView from '../view/CatalogView.ts';
 
+const PRODUCT_COUNT_FOR_HIDDEN_PAGINATION = 7;
+
 class CatalogModel {
   private currentSize: null | string = null;
 
-  private pagination: PaginationModel | null = null;
+  private paginationBottom: PaginationModel | null = null;
+
+  private paginationTop: PaginationModel | null = null;
 
   private productFilters: ProductFiltersModel | null = null;
 
@@ -96,20 +100,29 @@ class CatalogModel {
     productList.innerHTML = '';
     const options = this.getOptions();
     const productsInfo = await this.getProductsInfo(options);
-    this.pagination?.getHTML().remove();
+    this.paginationTop?.getHTML().remove();
+    this.paginationBottom?.getHTML().remove();
     if (productsInfo?.products?.length) {
       const cart = await getCartModel().getCart();
       productsInfo.products.forEach((productData) => {
         const product = new ProductCardModel(productData, this.currentSize, cart);
         productList.append(product.getHTML());
       });
       this.view.switchEmptyList(!productsInfo?.products?.length);
-      this.pagination = new PaginationModel(
+      this.paginationTop = new PaginationModel(
+        { productTotalCount: productsInfo?.totalProductCount, productsPerPageCount: PRODUCT_LIMIT },
+        this.setCurrentPage.bind(this),
+      );
+      this.paginationBottom = new PaginationModel(
         { productTotalCount: productsInfo?.totalProductCount, productsPerPageCount: PRODUCT_LIMIT },
         this.setCurrentPage.bind(this),
       );
-      this.pagination.getView().setSelectedButton(options.page ?? DEFAULT_PAGE);
-      this.view.getRightTopWrapper().append(this.pagination.getHTML());
+      this.paginationTop.getView().setSelectedButton(options.page ?? DEFAULT_PAGE);
+      this.paginationBottom.getView().setSelectedButton(options.page ?? DEFAULT_PAGE);
+      this.view.getRightTopWrapper().append(this.paginationTop.getHTML());
+      if (productsInfo.products.length >= PRODUCT_COUNT_FOR_HIDDEN_PAGINATION) {
+        this.view.getRightBottomWrapper().append(this.paginationBottom.getHTML());
+      }
     }
     this.productFilters?.getView().updateParams(productsInfo);
     this.view.switchEmptyList(!productsInfo?.products?.length);

diff --git a/src/widgets/Catalog/view/catalogView.module.scss b/src/widgets/Catalog/view/catalogView.module.scss
@@ -46,8 +46,10 @@
   justify-content: center;
   order: 2;
   grid-template-columns: repeat(3, auto);
+  grid-template-rows: max-content max-content;
+  margin-bottom: var(--tiny-offset);
   height: max-content;
-  min-height: calc(var(--extra-large-offset) * 5); // 500px
+  min-height: calc(var(--extra-large-offset) * 13.5);
   font-size: var(--regular-font);
   letter-spacing: var(--one);
   text-align: center;