Merge pull request #31 from IGNF/api_telechargement_bug

Api telechargement bug
IGNF · Jun 17, 2024 · 397a0dc · 397a0dc
2 parents 8e1d47f + df79bc3
commit 397a0dc
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 16 deletions.
diff --git a/libs/feature/record/src/lib/ign-api-dl/ign-api-dl.component.html b/libs/feature/record/src/lib/ign-api-dl/ign-api-dl.component.html
@@ -62,9 +62,19 @@
               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"
               >
-                Produits ({{ numberFilteredProduct$ | async }}):
+                <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>
@@ -83,10 +93,12 @@
             </tr>
             <tr>
               <button
+                *ngIf="size$.value < (numberFilteredProduct$ | 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"
               >
-                <p class="text-[13px] uppercase" translate>Plus de résultats</p>
+                <p class="text-[13px] uppercase" translate>results.showMore</p>
               </button>
             </tr>
           </tbody>

diff --git a/libs/feature/record/src/lib/ign-api-dl/ign-api-dl.component.ts b/libs/feature/record/src/lib/ign-api-dl/ign-api-dl.component.ts
@@ -67,13 +67,15 @@ export interface Field {
 export class IgnApiDlComponent implements OnInit {
   isOpen = false
   collapsed = false
-  initialPageSize = '50'
+  initialPageSize = '200'
   apiBaseUrl: string
   editionDate$ = new BehaviorSubject('')
   zone$ = new BehaviorSubject('')
   format$ = new BehaviorSubject('')
   crs$ = new BehaviorSubject('')
   pageSize$ = new BehaviorSubject(this.initialPageSize)
+  page$ = new BehaviorSubject('0')
+  size$ = new BehaviorSubject(this.initialPageSize)
 
   url =
     'https://data.geopf.fr/telechargement/capabilities?outputFormat=application/json'
@@ -101,8 +103,9 @@ export class IgnApiDlComponent implements OnInit {
     this.editionDate$,
     this.crs$,
     this.pageSize$,
+    this.page$,
   ]).pipe(
-    map(([zone, format, editionDate, crs, pageSize]) => {
+    map(([zone, format, editionDate, crs, pageSize, page]) => {
       let outputUrl
       if (this.apiBaseUrl) {
         const url = new URL(this.apiBaseUrl) // initialisation de l'url avec l'url de base
@@ -111,7 +114,8 @@ export class IgnApiDlComponent implements OnInit {
           format: format,
           editionDate: editionDate,
           crs: crs,
-          pageSize: pageSize
+          pageSize: pageSize,
+          page: page,
         } // initialisation des paramètres de filtres
         for (const [key, value] of Object.entries(params)) {
           if (value && value !== 'null') {
@@ -131,7 +135,7 @@ export class IgnApiDlComponent implements OnInit {
     mergeMap((url) => {
       return this.getFilteredProduct$(url).pipe(
         map((response) => response['entry']),
-        tap(el=>console.log(el))
+        tap((el) => console.log(el))
       )
     })
   )
@@ -153,37 +157,40 @@ export class IgnApiDlComponent implements OnInit {
 
   setEditionDate(value: string) {
     this.editionDate$.next(value)
-    this.resetPageSize()
+    this.resetPage()
   }
 
   setZone(value: string) {
     this.zone$.next(value)
-    this.resetPageSize()
+    this.resetPage()
   }
 
   setCrs(value: string) {
     this.crs$.next(value)
-    this.resetPageSize()
+    this.resetPage()
   }
 
   setFormat(value: string) {
     this.format$.next(value)
-    this.resetPageSize()
+    this.resetPage()
   }
 
   resetUrl() {
     // this.offset$.next(DEFAULT_PARAMS.OFFSET)
     this.zone$.next('null')
     this.format$.next('null')
     this.crs$.next('null')
+    this.page$.next('0')
+    this.size$.next(this.initialPageSize)
   }
-  moreResult():void{
-    const size = Number(this.pageSize$.value) + 50
-    this.pageSize$.next(String(size))
-    console.log(size)
+  moreResult(): 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))
   }
-  resetPageSize():void{
-    this.pageSize$.next(this.initialPageSize)
+  resetPage(): void {
+    this.page$.next('0')
   }
 
   async getFields() {