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