added pagination

c2siorg · Oct 20, 2024 · 3490db2 · 3490db2
1 parent 51cccc5
commit 3490db2
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 9 deletions.
diff --git a/webiu-ui/src/app/page/contributors/contributors.component.html b/webiu-ui/src/app/page/contributors/contributors.component.html
@@ -28,6 +28,15 @@
         *ngIf="isLoading; then loading; else content"
       ></ng-container>
     </div>
+    <div class="pagination">
+      <button (click)="prevPage()" [disabled]="currentPage === 1">
+        Previous
+      </button>
+      <span>Page {{ currentPage }} of {{ totalPages }}</span>
+      <button (click)="nextPage()" [disabled]="currentPage === totalPages">
+        Next
+      </button>
+    </div>
   </section>
 </div>
 

diff --git a/webiu-ui/src/app/page/contributors/contributors.component.scss b/webiu-ui/src/app/page/contributors/contributors.component.scss
@@ -102,6 +102,39 @@
     }
   }
 
+  .pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+    margin-top: 20px;
+
+    button {
+      padding: 10px 20px;
+      background-color: #2f80ed;
+      color: white;
+      border: none;
+      border-radius: 8px;
+      font-size: 16px;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+
+      &:disabled {
+        background-color: var(--gray-200);
+        cursor: not-allowed;
+      }
+
+      &:hover:not(:disabled) {
+        background-color: #004cbf;
+      }
+    }
+
+    span {
+      font-size: 16px;
+      color: var(--gray-900);
+    }
+  }
+
   .contributors-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

diff --git a/webiu-ui/src/app/page/contributors/contributors.component.ts b/webiu-ui/src/app/page/contributors/contributors.component.ts
@@ -25,13 +25,17 @@ export class ContributorsComponent implements OnInit {
   searchText = new FormControl('');
   selectedRepo: string = '';
   allRepos: string[] = [];
+  isLoading = true;
+
+  currentPage = 1;
+  profilesPerPage = 9;
+  totalPages = 1;
+
   constructor(
     private http: HttpClient,
     private commonUtil: CommmonUtilService
   ) {}
 
-  isLoading = true;
-
   ngOnInit() {
     this.getProfiles();
   }
@@ -44,23 +48,29 @@ export class ContributorsComponent implements OnInit {
           if (res) {
             this.profiles = res;
             this.commonUtil.commonProfiles = this.profiles;
-            this.displayProfiles = this.profiles;
-            this.commonUtil.commonDisplayProfiles = this.displayProfiles;
             this.allRepos = this.getUniqueRepos();
-            this.commonUtil.commonAllRepos = this.allRepos;
+            this.totalPages = Math.ceil(
+              (this.profiles?.length || 0) / this.profilesPerPage
+            );
+            this.filterProfiles();
             this.isLoading = false;
           } else {
             this.profiles = contributors.flatMap((profile: any) => profile);
-            this.displayProfiles = this.profiles;
             this.allRepos = this.getUniqueRepos();
+            this.totalPages = Math.ceil(
+              (this.profiles?.length || 0) / this.profilesPerPage
+            );
+            this.filterProfiles();
             this.isLoading = false;
           }
         },
         error: (error) => {
           this.profiles = contributors.map((profile) => profile);
-          console.log(error);
-          this.displayProfiles = this.profiles;
           this.allRepos = this.getUniqueRepos();
+          this.totalPages = Math.ceil(
+            (this.profiles?.length || 0) / this.profilesPerPage
+          );
+          this.filterProfiles();
           this.isLoading = false;
         },
       });
@@ -74,6 +84,7 @@ export class ContributorsComponent implements OnInit {
     }
     return array;
   }
+
   onRepoChange(event: Event) {
     const selectElement = event.target as HTMLSelectElement;
     this.selectedRepo = selectElement.value;
@@ -83,7 +94,7 @@ export class ContributorsComponent implements OnInit {
   filterProfiles() {
     let searchTextValue: string =
       this.searchText.value?.toLocaleLowerCase().trim() || '';
-    this.displayProfiles = this.profiles?.filter((doc) => {
+    let filteredProfiles = this.profiles?.filter((doc) => {
       return (
         (searchTextValue?.length
           ? [doc.login].some((str) =>
@@ -95,5 +106,27 @@ export class ContributorsComponent implements OnInit {
           : true)
       );
     });
+
+    this.totalPages = Math.ceil(
+      (filteredProfiles?.length || 0) / this.profilesPerPage
+    );
+    this.displayProfiles = filteredProfiles?.slice(
+      (this.currentPage - 1) * this.profilesPerPage,
+      this.currentPage * this.profilesPerPage
+    );
+  }
+
+  nextPage() {
+    if (this.currentPage < this.totalPages) {
+      this.currentPage++;
+      this.filterProfiles();
+    }
+  }
+
+  prevPage() {
+    if (this.currentPage > 1) {
+      this.currentPage--;
+      this.filterProfiles();
+    }
   }
 }