parent
acb0c142f3
commit
1ac091a887
@ -1,47 +0,0 @@
|
|||||||
<script>
|
|
||||||
export default{
|
|
||||||
methods:{
|
|
||||||
envoyerDonnees: function(event){
|
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//TODO: verifier si on est admin quand on entre dans la partie admin
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<form id="formajouterscientifiques" @submit.prevent>
|
|
||||||
<div>
|
|
||||||
<label for="nom">Nom</label>
|
|
||||||
<input class="form-control" type="text" id="nom" name="nom"/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="prenom">Prénom</label>
|
|
||||||
<input class="form-control" type="text" id="prenom" name="prenom"/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="date">Date de naissance</label>
|
|
||||||
<input class="form-control" type="date" id="date" name="date"/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="desc">Descriptif</label>
|
|
||||||
<textarea class="form-control" id="descriptif" name="descriptif"></textarea>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="sexe">Sexe</label>
|
|
||||||
<select class="form-select" id="sexe" name="sexe">
|
|
||||||
<option selected value="F">Femme</option>
|
|
||||||
<option value="H">Homme</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button v-on:click="envoyerDonnees" class="btn btn-primary">Ajouter</button>
|
|
||||||
</form>
|
|
||||||
</template>
|
|
||||||
@ -1,79 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { REST_API } from '@/assets/const';
|
|
||||||
|
|
||||||
import LigneScientifique from './ligneScientifique.vue';
|
|
||||||
|
|
||||||
export default{
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
//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}/scientifiques?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>
|
|
||||||
<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.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>
|
|
||||||
@ -1,79 +0,0 @@
|
|||||||
<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 class="btn-outline-secondary btn" 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 class="btn btn-success" v-on:click="sauverScientifique()">Sauvegarder</button>
|
|
||||||
<button class="btn btn-secondary" v-on:click="annuler()">Annuler</button>
|
|
||||||
</tr>
|
|
||||||
</template>
|
|
||||||
Loading…
Reference in new issue