technostrea/trouvetonprofile
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat : #11 pagination

Browse Source
This commit is contained in:
styve Lioumba
2025-11-30 18:39:42 +01:00
parent 2a9eb55e1b
commit 0c768296d1
21 changed files with 163 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/app/shared/components/pagination/pagination.component.html
View File

@@ -1,36 +0,0 @@
<!-- Pagination responsive -->
<nav class="flex justify-center mt-8 sm:mt-12" aria-label="Pagination">
<ul class="flex flex-wrap gap-2 items-center justify-center">
<li>
<button
class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
>
Précédent
</button>
</li>
<li>
<button class="px-4 py-2 rounded-lg bg-indigo-600 text-white font-medium">1</button>
</li>
<li>
<button
class="px-4 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
>
2
</button>
</li>
<li>
<button
class="px-4 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
>
3
</button>
</li>
<li>
<button
class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
>
Suivant
</button>
</li>
</ul>
</nav>

10
src/app/shared/components/pagination/pagination.component.ts
View File

@@ -1,10 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-pagination',
standalone: true,
imports: [],
templateUrl: './pagination.component.html',
styleUrl: './pagination.component.scss',
})
export class PaginationComponent {}

2
src/app/shared/components/project-list/project-list.component.html
View File

@@ -1,6 +1,6 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Grid des projets -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6">
@for (project of projects(); track project.id) {
<app-project-item [project]="project" />
} @empty {

38
src/app/shared/features/pagination/pagination.component.html Normal file
View File

@@ -0,0 +1,38 @@
<!-- Pagination responsive -->
<section class="flex justify-center mt-8 sm:mt-12" aria-label="Pagination">
<ul class="flex flex-wrap gap-2 items-center justify-center">
<li>
<button
class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-700 transition-colors"
[class.opacity-50]="currentPage === 1"
[class.pointer-events-none]="currentPage === 1"
[class.hover:bg-gray-100]="currentPage > 1"
(click)="goToPreviousPage()"
type="button"
[disabled]="currentPage === 1"
>
Précédent
</button>
</li>
<li>
<span class="px-4 py-2 rounded-lg bg-indigo-600 text-white font-medium">
{{ currentPage }} / {{ filters.totalPages! }}
</span>
</li>
<li>
<button
class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-700 transition-colors"
[class.opacity-50]="currentPage >= filters.totalPages!"
[class.pointer-events-none]="currentPage >= filters.totalPages!"
[class.hover:bg-gray-100]="currentPage < filters.totalPages!"
(click)="goToNextPage()"
type="button"
[disabled]="currentPage >= filters.totalPages!"
>
Suivant
</button>
</li>
</ul>
</section>

0
src/app/shared/components/pagination/pagination.component.scss → src/app/shared/features/pagination/pagination.component.scss
View File

0
src/app/shared/components/pagination/pagination.component.spec.ts → src/app/shared/features/pagination/pagination.component.spec.ts
View File

34
src/app/shared/features/pagination/pagination.component.ts Normal file
View File

@@ -0,0 +1,34 @@
import { Component, Input, OnInit, output } from '@angular/core';
import { SearchFilters } from '@app/domain/search/search-filters';
@Component({
selector: 'app-pagination',
standalone: true,
imports: [],
templateUrl: './pagination.component.html',
styleUrl: './pagination.component.scss',
})
export class PaginationComponent implements OnInit {
@Input({ required: true }) filters: SearchFilters = {} as SearchFilters;
onPageChange = output<SearchFilters>();
currentPage = 1;
ngOnInit() {
this.currentPage = this.filters.page!;
}
goToPreviousPage() {
this.currentPage = this.currentPage - 1;
this.emitPageChange();
}
goToNextPage() {
this.currentPage = this.currentPage + 1;
this.emitPageChange();
}
private emitPageChange() {
const filters = { ...this.filters, page: this.currentPage };
this.onPageChange.emit(filters);
}
}