Skip to content

Commit

Permalink
feat(formapi): Amélioration du système de pagination #29
Browse files Browse the repository at this point in the history
  • Loading branch information
@Naminoshin
Naminoshin committed Aug 22, 2024
1 parent 3f8743b commit 97b3707
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 58 deletions.
65 changes: 29 additions & 36 deletions libs/feature/record/src/lib/ign-api-dl/ign-api-dl.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,27 +57,6 @@
<div class="bg-white rounded-lg h-min">
<div class="overflow-auto h-60 w-65 bg-white-300 m-2">
<table class="w-full text-left border-collapse">
<thead>
<tr
class="sticky z-10 top-0 text-sm leading-6 font-semibold text-slate-700 bg-white p-0 dark:bg-slate-900 dark:text-slate-300"
>
<div
*ngIf="numberFilteredProduct$ | async as numberFilteredProduct"
class="py-2 pr-2 text-xl border-b border-slate-200 dark:border-slate-400/20"
>
<div *ngIf="size$.value < numberFilteredProduct">
Produits ({{ size$.value }}/{{
numberFilteredProduct$ | async
}}):
</div>
<div *ngIf="size$.value > numberFilteredProduct">
Produits ({{ numberFilteredProduct$ | async }}/{{
numberFilteredProduct$ | async
}}):
</div>
</div>
</tr>
</thead>
<tbody class="align-baseline">
<tr>
<div *ngFor="let link of listFilteredProduct$ | async">
Expand All @@ -91,21 +70,35 @@
</div>
</div>
</tr>
<tr>
<button
(click)="lessResult()"
[disabled]="size$.value === initialPageSize"
class="bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors float-left"
>
<p class="text-[13px] uppercase" translate>Page précédente</p>
</button>
<button
(click)="moreResult()"
[disabled]="size$.value >= (numberFilteredProduct$ | async)"
class="bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors float-right"
>
<p class="text-[13px] uppercase" translate>Page suivante</p>
</button>
<tr class="flex items-center justify-between">
<div class="w-1/3">
<button
*ngIf="page$.value > 1"
(click)="lessResult()"
class="bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors float-left"
>
<p class="text-[13px] uppercase" translate>Page précédente</p>
</button>
<div *ngIf="page$.value <= 1"></div>
</div>
<div class="w-1/3 flex items-center justify-center">
<div
*ngIf="(pageMax$ | async) !== 1"
class="sticky z-10 leading-6 font-semibold"
>
{{ page$.value }}/{{ pageMax$ | async }}
</div>
</div>
<div class="w-1/3">
<button
*ngIf="page$.value < (pageMax$ | async)"
(click)="moreResult()"
class="bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors float-right"
>
<p class="text-[13px] uppercase" translate>Page suivante</p>
</button>
<div *ngIf="page$.value >= (pageMax$ | async)"></div>
</div>
</tr>
</tbody>
</table>
Expand Down
36 changes: 14 additions & 22 deletions libs/feature/record/src/lib/ign-api-dl/ign-api-dl.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,15 +55,13 @@ export interface Field {
export class IgnApiDlComponent implements OnInit {
isOpen = false
collapsed = false
initialLimit = '50'
initialLimit = 50
apiBaseUrl: string
editionDate$ = new BehaviorSubject('')
zone$ = new BehaviorSubject('')
format$ = new BehaviorSubject('')
crs$ = new BehaviorSubject('')
limit$ = new BehaviorSubject(this.initialLimit)
page$ = new BehaviorSubject('1')
size$ = new BehaviorSubject(this.initialLimit)
page$ = new BehaviorSubject(1)
// a passer en config
url =
'https://data.geopf.fr/telechargement/capabilities?outputFormat=application/json'
Expand All @@ -90,10 +88,9 @@ export class IgnApiDlComponent implements OnInit {
this.format$,
this.editionDate$,
this.crs$,
this.limit$,
this.page$,
]).pipe(
map(([zone, format, editionDate, crs, limit, page]) => {
map(([zone, format, editionDate, crs, page]) => {
let outputUrl
if (this.apiBaseUrl) {
const url = new URL(this.apiBaseUrl) // initialisation de l'url avec l'url de base
Expand All @@ -102,12 +99,11 @@ export class IgnApiDlComponent implements OnInit {
format: format,
editionDate: editionDate,
crs: crs,
limit: limit,
page: page,
} // initialisation des paramètres de filtres
for (const [key, value] of Object.entries(params)) {
if (value && value !== 'null') {
url.searchParams.set(key, value)
url.searchParams.set(key, String(value))
} else {
url.searchParams.delete(key)
}
Expand All @@ -131,11 +127,13 @@ export class IgnApiDlComponent implements OnInit {
)
})
)
numberFilteredProduct$ = this.apiQueryUrl$.pipe(

pageMax$ = this.apiQueryUrl$.pipe(
mergeMap((url) => {
return this.getFilteredProduct$(url).pipe(
map((response) => response['totalentries'])
// startWith(0)
map((response) =>
Math.ceil(response['totalentries'] / Number(this.initialLimit))
)
)
})
)
Expand Down Expand Up @@ -183,24 +181,18 @@ export class IgnApiDlComponent implements OnInit {
this.zone$.next('null')
this.format$.next('null')
this.crs$.next('null')
this.page$.next('0')
this.size$.next(this.initialLimit)
this.page$.next(1)
}
moreResult(): void {
const page = Number(this.page$.value) + 1
const size = (page + 1) * Number(this.initialLimit)
this.size$.next(String(size))
this.page$.next(String(page))
this.page$.next(this.page$.value + 1)
}

lessResult(): void {
const page = Number(this.page$.value) - 1
const size = (page + 1) * Number(this.initialPageSize)
this.size$.next(String(size))
this.page$.next(String(page))
this.page$.next(this.page$.value - 1)
}

resetPage(): void {
this.page$.next('0')
this.page$.next(1)
}

async getCapabilities() {
Expand Down

0 comments on commit 97b3707

Please sign in to comment.