From 8001b81e10e393ac1da2309ac0015ecb26335510 Mon Sep 17 00:00:00 2001
From: waelhanfi04 <79511539+waelhanfi04@users.noreply.github.com>
Date: Tue, 19 Sep 2023 15:23:16 +0100
Subject: [PATCH] Paginationnumber (#536)

* add ngrx and fix the chart and search in token info

* fix pagination nulber
---
 .../crypto-market-cap.component.ts            | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/app/wallet/components/crypto-market-cap/crypto-market-cap.component.ts b/src/app/wallet/components/crypto-market-cap/crypto-market-cap.component.ts
index aa7030a89..dd1006f68 100644
--- a/src/app/wallet/components/crypto-market-cap/crypto-market-cap.component.ts
+++ b/src/app/wallet/components/crypto-market-cap/crypto-market-cap.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
 import { ChartOptions, ChartType } from 'chart.js';
 import { Router } from '@angular/router';
 import { switchMap, take, takeUntil } from 'rxjs/operators';
@@ -34,8 +34,9 @@ export class CryptoMarketCapComponent implements OnInit {
   public chart: any;
 
   maxButtonsPerPage = 15; 
+
+  
   currentPageRangeStart = 1;
-  currentPageRangeEnd: number = this.maxButtonsPerPage;
 
   lineChartOptions: ChartOptions = {
     aspectRatio: 2.5,
@@ -74,6 +75,7 @@ export class CryptoMarketCapComponent implements OnInit {
   private ngUnsubscribe = new Subject<void>();
   prices: any[] | undefined;
   cryptoIds: any[] = [];
+  currentPageRangeEnd!: number;
   constructor(
     private router: Router,
     private fetchservice: CryptofetchServiceService,
@@ -86,6 +88,8 @@ export class CryptoMarketCapComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.setMaxButtonsPerPage();
+
     this.paginatedCryptoList = [];
     this.titleService.setTitle('SaTT-Market Cap');
     this.metaService.updateTag({
@@ -139,6 +143,28 @@ export class CryptoMarketCapComponent implements OnInit {
   }
 
 
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event: Event): void {
+    this.setMaxButtonsPerPage();
+  }
+
+  private setMaxButtonsPerPage(): void {
+    const screenWidth = window.innerWidth;
+    if (screenWidth <= 530) {
+      this.maxButtonsPerPage = 5;
+    } else if (screenWidth <= 768) {
+      this.maxButtonsPerPage = 10;
+    } else if (screenWidth <= 992) {
+      this.maxButtonsPerPage = 15;
+    } else {
+      this.maxButtonsPerPage = 20;
+    }
+
+    this.currentPageRangeEnd = this.maxButtonsPerPage;
+
+  }
+
   /**
    * Split an array into chunks of a specific size.
    * @param arr The original array to split.