ajout de la pagination des résultats de recherche

parcoursup/app.riot

@@ -1,6 +1,6 @@
 <app>
   <div class="page">
-    <h1>Mini projet Parcoursup</h1>
+    <h1>Open Data Parcoursup</h1>
     <p class="subtitle">Recherche de formations Parcoursup avec Riot</p>
 
     <p><b>{ state.selectedFormations.length }</b> formation(s) sélectionnée(s)</p>
@@ -8,14 +8,32 @@
     <div if={ !state.selected }>
       <search-bar onsearch={ launchSearch }></search-bar>
 
+      <p if={ state.hasSearched && !state.loading }>
+        <b>{ state.query }</b> : { state.total } résultat(s)
+      </p>
+
       <div class="layout">
-        <result-list
-          results={ state.results }
-          hasSearched={ state.hasSearched }
-          loading={ state.loading }
-          ondetail={ showDetail }
-          onselect={ addToSelection }>
-        </result-list>
+        <div>
+          <result-list
+            results={ state.results }
+            hasSearched={ state.hasSearched }
+            loading={ state.loading }
+            ondetail={ showDetail }
+            onselect={ addToSelection }>
+          </result-list>
+
+          <div class="compare-controls" if={ state.total > state.limit }>
+            <button onclick={ previousPage } disabled={ state.page === 1 }>
+              Précédent
+            </button>
+
+            <p>Page { state.page } / { getTotalPages() }</p>
+
+            <button onclick={ nextPage } disabled={ state.page === getTotalPages() }>
+              Suivant
+            </button>
+          </div>
+        </div>
 
         <map-view results={ state.results }></map-view>
       </div>
@@ -109,7 +127,11 @@
         selectedFormations: [],
         note: 12,
         serie: 'general',
-        sortBy: 'nom'
+        sortBy: 'nom',
+        query: '',
+        page: 1,
+        limit: 20,
+        total: 0
       },
 
       onMounted() {
@@ -130,11 +152,28 @@
         this.update({
           loading: true,
           hasSearched: true,
-          selected: null
+          selected: null,
+          query: query,
+          page: 1
+        })
+
+        await this.loadPage(1)
+      },
+
+      async loadPage(page) {
+        this.update({
+          loading: true
         })
 
         try {
-          const data = await window.fetchFormations(query)
+          const offset = (page - 1) * this.state.limit
+
+          const data = await window.fetchFormations(
+            this.state.query,
+            this.state.limit,
+            offset
+          )
+
           const formations = []
 
           if (data.results) {
@@ -146,17 +185,36 @@
 
           this.update({
             results: formations,
+            total: data.total_count ? data.total_count : 0,
+            page: page,
             loading: false
           })
         } catch (error) {
           console.error(error)
           this.update({
             results: [],
+            total: 0,
             loading: false
           })
         }
       },
 
+      getTotalPages() {
+        return Math.ceil(this.state.total / this.state.limit)
+      },
+
+      async nextPage() {
+        if (this.state.page < this.getTotalPages()) {
+          await this.loadPage(this.state.page + 1)
+        }
+      },
+
+      async previousPage() {
+        if (this.state.page > 1) {
+          await this.loadPage(this.state.page - 1)
+        }
+      },
+
       showDetail(index) {
         this.update({
           selected: this.state.results[index]