added possibility to filter datas

This commit is contained in:
Matthis FAUVET 2024-06-21 19:31:52 +02:00
parent 6a306b263b
commit 19e6dbd052
2 changed files with 29 additions and 8 deletions

19
model.js Normal file
View File

@ -0,0 +1,19 @@
function execQuery(table, filter = "all", id = -1){
let baseHttpRequest = "https://dwarves.iut-fbleau.fr/~fauvet/api/"
let computeHttpRequest;
if(filter !== undefined){
switch(table){
case "songs":
computeHttpRequest = baseHttpRequest+table+"?title="+filter;
default :
computeHttpRequest = baseHttpRequest+table+"?name="+filter;
}
} else if(id !== undefined) {
computeHttpRequest = baseHttpRequest+table+"/"+id;
} else {
computeHttpRequest = baseHttpRequest+table;
}
return fetch(computeHttpRequest).then(response => {
return response.json();
});
};

View File

@ -11,7 +11,7 @@
<form onsubmit={ add }> <form onsubmit={ add }>
<div class="flex flex-row items-baseline"> <div class="flex flex-row items-baseline">
<input class="flex-grow-1 border-solid border bg-emerald-100 w-half rounded-lg border-emerald-300 border h-20 pl-6 grow" <input class="flex-grow-1 border-solid border bg-emerald-100 w-half rounded-lg border-emerald-300 border h-20 pl-6 grow"
placeholder={ state.placeholder }/> placeholder={ state.placeholder } onkeyup={ edit } />
<input type="button" value="Playlists" <input type="button" value="Playlists"
class="ml-2 border-solid bg-emerald-300 border rounded-lg border-emerald-600 mb-4 h-20 w-48 mt-2"/> class="ml-2 border-solid bg-emerald-300 border rounded-lg border-emerald-600 mb-4 h-20 w-48 mt-2"/>
</div> </div>
@ -25,17 +25,24 @@
</div> </div>
<script> <script>
import "./model";
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,
id: undefined
}; };
this.paintButton(); this.paintButton();
this.album_style = "isActivate"; this.album_style = "isActivate";
this.update(); this.update();
},
edit(e) {
}, },
click(e) { click(e) {
e.preventDefault(); e.preventDefault();
@ -60,16 +67,11 @@
this.update(); this.update();
}, },
async fetchData(){ async fetchData(){
let data = await this.execQuery(); let data = await this.execQuery(this.state.search, this.state.filter, this.state.id);
this.update({ this.update({
items: data.results items: data.results
}); });
}, },
execQuery(){
return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/"+this.state.search).then(response => {
return response.json();
});
},
paintButton(){ paintButton(){
this.album_style = "isDeactivate"; this.album_style = "isDeactivate";
this.artist_style = "isDeactivate"; this.artist_style = "isDeactivate";