diff --git a/webiu-ui/src/app/page/contributors/contributors.component.html b/webiu-ui/src/app/page/contributors/contributors.component.html index 55920fd6..5b83b513 100644 --- 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" > + diff --git a/webiu-ui/src/app/page/contributors/contributors.component.scss b/webiu-ui/src/app/page/contributors/contributors.component.scss index 2e4377df..d316c03c 100644 --- 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 index c95df926..9da104ca 100644 --- 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(); + } } }