fauvet/SAE_RIOT_2024
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pagination faite, j'ai pas séparé le css oupsi

Browse Source
This commit is contained in:
Heloise BOUSSON 2024-06-25 20:26:53 +02:00
parent 9570e3d1ae
commit a0b5103978
1 changed files with 64 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
onzer.riot
View File

@ -20,11 +20,17 @@
</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){
@ -34,7 +40,9 @@
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,7 +50,7 @@
},
edit(e) {
this.state.filter = e.target.value;
console.log(this.state.filter);
this.state.page = 1;
this.fetchData();
this.update();
},
@ -65,14 +73,15 @@
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>