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();
+ }
}
}