pagination faite, j'ai pas séparé le css oupsi
This commit is contained in:
parent
9570e3d1ae
commit
a0b5103978
60
onzer.riot
60
onzer.riot
@ -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,8 +89,7 @@
|
||||
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){
|
||||
@ -96,9 +104,19 @@
|
||||
} else {
|
||||
computeHttpRequest = baseHttpRequest + table;
|
||||
}
|
||||
return fetch(computeHttpRequest).then(response => {
|
||||
return response.json();
|
||||
});
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
Loading…
Reference in New Issue
Block a user