creer tableau qui s'adapte à l'api

science-quest/src/components/admin/gestion/Ajout.vue

@@ -0,0 +1,30 @@
+<script>
+import { REST_API } from '@/assets/const';
+
+export default{
+    methods:{
+        envoyerDonnees: function(event){
+            const donnees=new FormData(formajouter)
+
+            //todo mettre lien dans const
+            //envoyer le form en JSON
+            fetch(REST_API+"/thematiques", {method:"POST", body:JSON.stringify(Object.fromEntries(donnees)), headers: {"Content-Type": "application/json"}})
+            //sans le JSON.stringify et Object.fromEntries ca fait une requete en Content-Disposition
+        }
+    }
+}
+
+
+//TODO: verifier si on est admin quand on entre dans la partie admin
+</script>
+
+<template>
+<form id="formajouter" @submit.prevent>
+    <div>
+        <label for="libelle">Libelle</label>
+        <input class="form-control" type="text" id="libelle" name="libelle"/>
+    </div>
+    
+    <button v-on:click="envoyerDonnees" class="btn btn-primary">Ajouter</button>
+</form>
+</template>

science-quest/src/components/admin/gestion/Liste.vue

@@ -0,0 +1,79 @@
+<script>
+import { REST_API } from '@/assets/const';
+
+import LigneScientifique from './ligne.vue';
+
+export default{
+    data() {
+        return {
+            endpoint:"thematiques", //endpoint de l'api a recuperer
+            //données obtenues par l'api
+            scientifiques: [],
+            page:0,
+
+            //HATEOAS
+            self:"",
+            first:null, // a prendre a partir de la requete
+            prev:null,
+            next:null,
+            last:null,
+        };
+    },
+    mounted(){
+        //TODO faire route pour prendre la page a partir de l'URL
+        this.self=`${REST_API}/${this.endpoint}?page=${this.page}`
+        this.getScientifiques(this.self)
+    },
+    methods:{
+        getScientifiques(url){
+            //HACK : s'assurer que les liens sont en HTTPS
+            url=url.replace("http://", "https://")
+            //enlever les anciens du tableau
+            this.scientifiques=[]
+            //TODO : ajouter un delai si jamais la requete est trop rapide pour VueJS
+            //appeler l'API
+            fetch(url).then(response=>{
+                response.json().then(json=>{
+                    const oldLength=this.scientifiques.length
+                    //prendre les scientifiques de la requete
+                    this.scientifiques.push(...json._embedded)
+
+                    //HATEOAS
+                    this.self=json._links.self.href;
+                    this.first=json._links.first ? json._links.first.href : null;
+                    this.prev=json._links.prev ? json._links.prev.href : null;
+                    this.next=json._links.next ? json._links.next.href : null;
+                    this.last=json._links.last ? json._links.last.href : null;
+                })
+            })
+        }
+    },
+    components: { LigneScientifique }
+}
+</script>
+
+
+<template>
+    <!-- TODO : remplacer input par select ?-->
+    <input v-model="endpoint">
+    <button>Rafraichir</button>
+    <table class="table">
+        <thead>
+    <tr>
+        <th scope="col" v-for="nomColonne in Object.keys(scientifiques[0])">{{nomColonne}}</th>
+    </tr>
+  </thead>
+  <tbody>
+    <LigneScientifique v-for="scientifique in scientifiques"
+    :prenom="scientifique.prenom"
+    :nom="scientifique.nom"
+    :date="scientifique.dateNaissance"
+    :descriptif="scientifique.descriptif"
+    ></LigneScientifique>
+</tbody>
+    </table>
+    <button :class="{ invisible: !first }" class="btn btn-secondary" @click="this.getScientifiques(this.first)">First</button>
+    <button :class="{ invisible: !prev }"  class="btn btn-secondary" @click="this.getScientifiques(this.prev)">Prev</button>
+    <button :class="{ invisible: !next }"  class="btn btn-secondary" @click="this.getScientifiques(this.next)">Next</button>
+    <button :class="{ invisible: !last }"  class="btn btn-secondary" @click="this.getScientifiques(this.last)">Last</button>
+</template>./ligne.vue

science-quest/src/components/admin/gestion/ligne.vue

@@ -0,0 +1,50 @@
+<script>
+export default {
+    props: ["champsInit"],
+    data(){
+        return{
+            modeEdition:false, //vrai = remplacer les champs par des inputs
+
+            champsAffiche:{nom:"Test", prenom:"Test"} //this.champsInit
+        }
+    },
+    methods:{
+        changerModeEdition: function(){
+            this.modeEdition=!this.modeEdition
+        },
+        annuler: function(){
+            //remettre les valeurs a 0
+            this.champsAffiche=this.champsInit,
+
+            this.changerModeEdition()
+        },
+        sauverScientifique: function(){
+            //TODO : comme dans ajout
+
+            //fetch("localhost/api/v1/scientifiques", {method:"PUT", body:JSON.stringify(donnees)})
+            console.log(this.champsAffiche)
+            this.changerModeEdition()
+        }
+    }
+}
+</script>
+
+
+<template>
+    <tr v-if="!this.modeEdition">
+        <td v-for="item in champsAffiche">
+            <p>{{ item }}</p>
+        </td>
+        <button class="btn-outline-secondary btn" v-on:click="changerModeEdition()">Modifier</button>
+    </tr>
+    <tr v-if="this.modeEdition">
+        
+        <td v-for="item in champsAffiche">
+            <!--input class="form-control" type="text" v-model="item"-->
+        </td>
+        
+        <!-- TODO : aussi faire this.modeEdition=!this.modeEdition dans sauverScientifique -->
+        <button class="btn btn-success" v-on:click="sauverScientifique()">Sauvegarder</button>
+        <button class="btn btn-secondary" v-on:click="annuler()">Annuler</button>
+    </tr>
+</template>