pagination faite, j'ai pas séparé le css oupsi
This commit is contained in:
parent
9570e3d1ae
commit
a0b5103978
92
onzer.riot
92
onzer.riot
@ -1,12 +1,12 @@
|
|||||||
<onzer>
|
<onzer>
|
||||||
<div class="px-12">
|
<div class="px-12">
|
||||||
<div class="flex-row mb-2">
|
<div class="flex-row mb-2">
|
||||||
<input id="album" type="button" onclick={click} value="Albums"
|
<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}"/>
|
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"
|
<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}"/>
|
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"
|
<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}"/>
|
class="mr-4 border-solid border rounded-lg h-20 w-64 mt-2 {song_style}"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form onsubmit={ add }>
|
<form onsubmit={ add }>
|
||||||
@ -20,21 +20,29 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-wrap px-12 justify-between mt-8">
|
<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>
|
<p> { album.name } </p>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
async onBeforeMount(props){
|
async onBeforeMount(props){
|
||||||
let data = await props.items;
|
let data = await props.items;
|
||||||
this.state = {
|
this.state = {
|
||||||
placeholder: "Rechercher dans les albums",
|
placeholder: "Rechercher dans les albums",
|
||||||
items: data.results,
|
items: data.results,
|
||||||
search: "albums",
|
search: "albums",
|
||||||
filter: undefined,
|
filter: undefined,
|
||||||
id: undefined
|
id: undefined,
|
||||||
|
page: 1,
|
||||||
|
totalPages: Math.ceil(data.results.length / 9),
|
||||||
};
|
};
|
||||||
this.paintButton();
|
this.paintButton();
|
||||||
this.album_style = "isActivate";
|
this.album_style = "isActivate";
|
||||||
@ -42,16 +50,16 @@
|
|||||||
},
|
},
|
||||||
edit(e) {
|
edit(e) {
|
||||||
this.state.filter = e.target.value;
|
this.state.filter = e.target.value;
|
||||||
console.log(this.state.filter);
|
this.state.page = 1;
|
||||||
this.fetchData();
|
this.fetchData();
|
||||||
this.update();
|
this.update();
|
||||||
},
|
},
|
||||||
click(e) {
|
click(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
this.paintButton();
|
this.paintButton();
|
||||||
switch(e.target.value){
|
switch(e.target.value){
|
||||||
case "Albums":
|
case "Albums":
|
||||||
this.state.placeholder = "Rechercher dans les albums";
|
this.state.placeholder = "Rechercher dans les albums";
|
||||||
this.album_style = "isActivate";
|
this.album_style = "isActivate";
|
||||||
this.state.search = "albums";
|
this.state.search = "albums";
|
||||||
break;
|
break;
|
||||||
@ -64,15 +72,16 @@
|
|||||||
this.state.placeholder = "Rechercher dans les songs";
|
this.state.placeholder = "Rechercher dans les songs";
|
||||||
this.song_style = "isActivate";
|
this.song_style = "isActivate";
|
||||||
this.state.search = "songs";
|
this.state.search = "songs";
|
||||||
}
|
}
|
||||||
this.fetchData()
|
this.state.page = 1;
|
||||||
|
this.fetchData();
|
||||||
this.update();
|
this.update();
|
||||||
},
|
},
|
||||||
async fetchData(){
|
async fetchData(){
|
||||||
let data = await this.execQuery(this.state.search, this.state.filter, this.state.id);
|
let data = await this.execQuery(this.state.search, this.state.filter, this.state.id);
|
||||||
this.update({
|
this.state.items = data.results;
|
||||||
items: data.results
|
this.state.totalPages = Math.ceil(data.results.length / 9);
|
||||||
});
|
this.update();
|
||||||
},
|
},
|
||||||
paintButton(){
|
paintButton(){
|
||||||
this.album_style = "isDeactivate";
|
this.album_style = "isDeactivate";
|
||||||
@ -80,25 +89,34 @@
|
|||||||
this.song_style = "isDeactivate";
|
this.song_style = "isDeactivate";
|
||||||
},
|
},
|
||||||
execQuery(table, filter = undefined, id = undefined){
|
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;
|
let computeHttpRequest;
|
||||||
if(filter !== undefined){
|
if(filter !== undefined){
|
||||||
switch(table){
|
switch(table){
|
||||||
case "songs":
|
case "songs":
|
||||||
computeHttpRequest = baseHttpRequest+table+"?title="+filter;
|
computeHttpRequest = baseHttpRequest + table + "?title=" + filter;
|
||||||
break;
|
break;
|
||||||
default :
|
default :
|
||||||
computeHttpRequest = baseHttpRequest+table+"?name="+filter;
|
computeHttpRequest = baseHttpRequest + table + "?name=" + filter;
|
||||||
}
|
}
|
||||||
} else if(id !== undefined) {
|
} else if(id !== undefined) {
|
||||||
computeHttpRequest = baseHttpRequest+table+"/"+id;
|
computeHttpRequest = baseHttpRequest + table + "/" + id;
|
||||||
} else {
|
} 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>
|
</script>
|
||||||
@ -116,5 +134,23 @@
|
|||||||
border-color: #6EE7B7;
|
border-color: #6EE7B7;
|
||||||
width: 32%;
|
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>
|
</style>
|
||||||
</onzer>
|
</onzer>
|
||||||
|
Loading…
Reference in New Issue
Block a user