added possibility to filter datas

model.js

@@ -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();
+    });
+};

onzer.riot

@@ -11,7 +11,7 @@
         <form onsubmit={ add }>
             <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"
-                placeholder={ state.placeholder }/>
+                placeholder={ state.placeholder } onkeyup={ edit } />
             <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"/>
             </div>
@@ -25,17 +25,24 @@
     </div>
 
     <script>
+        import "./model";
+
         export default {
             async onBeforeMount(props){
                 let data =  await props.items;
                 this.state = {
                     placeholder: "Rechercher dans les albums",
                     items: data.results,
-                    search: "albums"
+                    search: "albums",
+                    filter: undefined,
+                    id: undefined
                 };
                 this.paintButton();
                 this.album_style = "isActivate";
                 this.update();
+            },
+            edit(e) {
+
             },
             click(e) {
                 e.preventDefault();
@@ -60,16 +67,11 @@
                 this.update();
             },
             async fetchData(){
-                let data = await this.execQuery();
+                let data = await this.execQuery(this.state.search, this.state.filter, this.state.id);
                 this.update({
                     items: data.results
                 });
             },
-            execQuery(){
-                return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/"+this.state.search).then(response => {
-                    return response.json();
-                });
-            },
             paintButton(){
                 this.album_style = "isDeactivate";
                 this.artist_style = "isDeactivate";