ajouter un tableau de scientifiques modifiable

science-quest/src/components/admin/AjoutScientifique.vue

@@ -5,6 +5,7 @@ export default{
             const donnees=new FormData(document.querySelector("#formajouterscientifiques"))
 
             //todo mettre lien dans const
+            //envoyer le form en JSON
             fetch("localhost/api/v1/scientifiques", {method:"POST", body:JSON.stringify(Object.fromEntries(donnees))})
             //sans le JSON.stringify et Object.fromEntries ca fait une requete en Content-Disposition
         }

science-quest/src/components/admin/VoirScientifiques.vue

@@ -0,0 +1,39 @@
+<script>
+import LigneScientifique from './ligneScientifique.vue';
+
+export default{
+    data() {
+        return {
+            //données obtenues par l'api
+            scientifiques: [
+            {prenom:"marie",nom:"curie",date:"1900-01-13",descriptif:"radaition qqch comme ca"},
+            {prenom:"albert",nom:"einstein",date:"1900-01-13",descriptif:"theorie"}
+            ]
+        };
+    },
+    components: { LigneScientifique }
+}
+</script>
+
+
+<template>
+    <table class="table">
+        <thead>
+    <tr>
+        <th scope="col">Prenom</th>
+        <th scope="col">Nom</th>
+        <th scope="col">Descriptif</th>
+        <th scope="col">Date de naissance</th>
+        <th scope="col">Action</th>
+    </tr>
+  </thead>
+  <tbody>
+    <LigneScientifique v-for="scientifique in scientifiques"
+    :prenom="scientifique.prenom"
+    :nom="scientifique.nom"
+    :date="scientifique.date"
+    :descriptif="scientifique.descriptif"
+    ></LigneScientifique>
+</tbody>
+    </table>
+</template>

science-quest/src/components/admin/ligneScientifique.vue

@@ -0,0 +1,79 @@
+<script>
+export default {
+    props: ["id", "nom", "prenom", "descriptif","date"],
+    data(){
+        return{
+            modeEdition:false, //vrai = remplacer les champs par des inputs
+
+            nomAffiche:this.nom,
+            prenomAffiche:this.prenom,
+            descriptifAffiche:this.descriptif,
+            dateAffiche:this.date
+        }
+    },
+    methods:{
+        changerModeEdition: function(){
+            this.modeEdition=!this.modeEdition
+        },
+        annuler: function(){
+            //remettre les valeurs a 0
+            this.nomAffiche=this.nom,
+            this.prenomAffiche=this.prenom,
+            this.descriptifAffiche=this.descriptif,
+            this.dateAffiche=this.date
+
+            this.changerModeEdition()
+        },
+        sauverScientifique: function(){
+            const donnees={
+                id:this.id,
+                nom:this.nomAffiche,
+                prenom:this.prenomAffiche,
+                descriptif:this.descriptifAffiche,
+                date:this.dateAffiche,
+            }
+
+            fetch("localhost/api/v1/scientifiques", {method:"PUT", body:JSON.stringify(donnees)})
+            this.changerModeEdition()
+        }
+    }
+}
+</script>
+
+
+<template>
+    <tr v-if="!this.modeEdition">
+        <td>
+            <p>{{ prenomAffiche }}</p>
+        </td>
+        <td>
+            <p>{{ nomAffiche }}</p>
+        </td>
+        <td>
+            <p>{{ descriptifAffiche }}</p>
+        </td>
+        <td>
+            <p>{{ dateAffiche }}</p>
+        </td>
+        <button v-on:click="changerModeEdition()">Modifier</button>
+    </tr>
+    <tr v-if="this.modeEdition">
+        
+        <td>
+            <input class="form-control" type="text" v-model="prenomAffiche">
+        </td>
+        <td>
+            <input class="form-control" type="text" v-model="nomAffiche">
+        </td>
+        <td>
+            <textarea class="form-control" v-model="descriptifAffiche"></textarea>
+        </td>
+        <td>
+            <input class="form-control" type="date" v-model="dateAffiche">
+        </td>
+        
+        <!-- TODO : aussi faire this.modeEdition=!this.modeEdition dans sauverScientifique -->
+        <button v-on:click="sauverScientifique()">Sauvegarder</button>
+        <button v-on:click="annuler()">Annuler</button>
+    </tr>
+</template>

science-quest/src/main.js

@@ -15,6 +15,7 @@ import TestParametreURL from "./components/TestParametreURL.vue"
 import Login from "./components/Login.vue"
 import KahootVue from './components/jeux/kahoot/Kahoot.vue'
 import AdminAjoutScientifique from "./components/admin/AjoutScientifique.vue"
+import VoirScientifiques from "./components/admin/VoirScientifiques.vue"
 
 const routes = [
     { path: '/', component: PagePrincipale },
@@ -22,6 +23,7 @@ const routes = [
     { path: '/kahoot', component: KahootVue}, //TODO: changer la route pour qu'elle soit trouvée automatiquement par le serveur (ce que demande l'utilisateur)
     { path: '/exemple/:id', component: TestParametreURL },
     { path: '/admin/ajout_scientifique', component: AdminAjoutScientifique },
+    { path: '/admin/liste_scientifiques', component: VoirScientifiques },
     { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
 ]