From a0b510397891bfed859503c284128d2a5d40d16f Mon Sep 17 00:00:00 2001
From: BOUSSON <zekha31@gmail.com>
Date: Tue, 25 Jun 2024 20:26:53 +0200
Subject: [PATCH] =?UTF-8?q?pagination=20faite,=20j'ai=20pas=20s=C3=A9par?=
 =?UTF-8?q?=C3=A9=20le=20css=20oupsi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 onzer.riot | 92 +++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 64 insertions(+), 28 deletions(-)

diff --git a/onzer.riot b/onzer.riot
index 406211b..04179e0 100644
--- a/onzer.riot
+++ b/onzer.riot
@@ -1,12 +1,12 @@
 <onzer>
     <div class="px-12">
         <div class="flex-row mb-2">
-               <input id="album" type="button" onclick={click} value="Albums"
-            class="mr-4 border-solid border rounded-lg h-20 w-64 mt-2 {album_style}"/>
-                <input id="artist" type="button" onclick={click} value="Artists"
-            class="mr-4 border-solid border rounded-lg h-20 w-64 mt-2 {artist_style}"/>
-                <input id="song" type="button" onclick={click} value="Songs"
-            class="mr-4 border-solid border rounded-lg h-20 w-64 mt-2 {song_style}"/>
+            <input id="album" type="button" onclick={click} value="Albums"
+                class="mr-4 border-solid border rounded-lg h-20 w-64 mt-2 {album_style}"/>
+            <input id="artist" type="button" onclick={click} value="Artists"
+                class="mr-4 border-solid border rounded-lg h-20 w-64 mt-2 {artist_style}"/>
+            <input id="song" type="button" onclick={click} value="Songs"
+                class="mr-4 border-solid border rounded-lg h-20 w-64 mt-2 {song_style}"/>
         </div>
 
         <form onsubmit={ add }>
@@ -20,21 +20,29 @@
     </div>
 
     <div class="flex flex-wrap px-12 justify-between mt-8">
-        <div each={ album in state.items } class="item mb-4 border border-solid rounded-lg h-64 flex justify-center items-center">
+        <div each={ album in state.items.slice((state.page - 1) * 9, state.page * 9) } class="item mb-4 border border-solid rounded-lg h-64 flex justify-center items-center">
             <p> { album.name } </p>
         </div>
     </div>
 
+    <div class="pagination">
+        <button onclick={prevPage} disabled={state.page === 1}>Previous</button>
+        <span>Page {state.page} of {state.totalPages}</span>
+        <button onclick={nextPage} disabled={state.page === state.totalPages}>Next</button>
+    </div>
+
     <script>
         export default {
             async onBeforeMount(props){
-                let data =  await props.items;
+                let data = await props.items;
                 this.state = {
                     placeholder: "Rechercher dans les albums",
                     items: data.results,
                     search: "albums",
                     filter: undefined,
-                    id: undefined
+                    id: undefined,
+                    page: 1,
+                    totalPages: Math.ceil(data.results.length / 9),
                 };
                 this.paintButton();
                 this.album_style = "isActivate";
@@ -42,16 +50,16 @@
             },
             edit(e) {
                 this.state.filter = e.target.value;
-                console.log(this.state.filter);
+                this.state.page = 1;
                 this.fetchData();
                 this.update();
             },
             click(e) {
                 e.preventDefault();
-		        this.paintButton();
-		        switch(e.target.value){
-			        case "Albums":
-				        this.state.placeholder = "Rechercher dans les albums";
+                this.paintButton();
+                switch(e.target.value){
+                    case "Albums":
+                        this.state.placeholder = "Rechercher dans les albums";
                         this.album_style = "isActivate";
                         this.state.search = "albums";
                         break;
@@ -64,15 +72,16 @@
                         this.state.placeholder = "Rechercher dans les songs";
                         this.song_style = "isActivate";
                         this.state.search = "songs";
-		        }
-                this.fetchData()
+                }
+                this.state.page = 1;
+                this.fetchData();
                 this.update();
             },
             async fetchData(){
                 let data = await this.execQuery(this.state.search, this.state.filter, this.state.id);
-                this.update({
-                    items: data.results
-                });
+                this.state.items = data.results;
+                this.state.totalPages = Math.ceil(data.results.length / 9);
+                this.update();
             },
             paintButton(){
                 this.album_style = "isDeactivate";
@@ -80,25 +89,34 @@
                 this.song_style = "isDeactivate";
             },
             execQuery(table, filter = undefined,  id = undefined){
-                console.log("CCACA");
-                let baseHttpRequest = "https://dwarves.iut-fbleau.fr/~fauvet/api/"
+                let baseHttpRequest = "https://dwarves.iut-fbleau.fr/~fauvet/api/";
                 let computeHttpRequest;
                 if(filter !== undefined){
                     switch(table){
                         case "songs":
-                            computeHttpRequest = baseHttpRequest+table+"?title="+filter;
+                            computeHttpRequest = baseHttpRequest + table + "?title=" + filter;
                             break;
                         default :
-                            computeHttpRequest = baseHttpRequest+table+"?name="+filter;
+                            computeHttpRequest = baseHttpRequest + table + "?name=" + filter;
                     }
                 } else if(id !== undefined) {
-                    computeHttpRequest = baseHttpRequest+table+"/"+id;
+                    computeHttpRequest = baseHttpRequest + table + "/" + id;
                 } else {
-                    computeHttpRequest = baseHttpRequest+table;
+                    computeHttpRequest = baseHttpRequest + table;
+                }
+                return fetch(computeHttpRequest).then(response => response.json());
+            },
+            prevPage() {
+                if (this.state.page > 1) {
+                    this.state.page -= 1;
+                    this.update();
+                }
+            },
+            nextPage() {
+                if (this.state.page < this.state.totalPages) {
+                    this.state.page += 1;
+                    this.update();
                 }
-                return fetch(computeHttpRequest).then(response => {
-                    return response.json();
-                });
             }
         }
     </script>
@@ -116,5 +134,23 @@
             border-color: #6EE7B7;
             width: 32%;
         }
+        .pagination {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: 16px;
+        }
+        .pagination button {
+            background-color: #6EE7B7;
+            border: none;
+            border-radius: 4px;
+            padding: 8px 16px;
+            margin: 0 8px;
+            cursor: pointer;
+        }
+        .pagination button:disabled {
+            background-color: #D1FAE5;
+            cursor: not-allowed;
+        }
     </style>
 </onzer>