JavaScript-TP_note
/
Projet-note
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

edit completly functional : fill autpo fields

Browse Source
question-12
Bastien JACQUELIN 2 years ago
parent 7a6055a663
commit ad671bc9dc
2 changed files with 63 additions and 59 deletions
Show Stats Download Patch File Download Diff File

31
index.html
Unescape View File

@ -9,13 +9,7 @@
<body> <body>
<div id="app"> <div id="app">
<h1>TP-noté</h1> <h1>TP-noté</h1>
<nav-bar @add-team="addTeam"></nav-bar> <nav-bar></nav-bar>
<team-card @edit-team="editTeam" v-for="team in teams"
:id="team.id"
:nom="team.name"
:description="team.description">
</team-card>
</div> </div>
<script src="src/service/link-service.js"></script> <script src="src/service/link-service.js"></script>
@ -31,33 +25,12 @@
created(){}, created(){},
data(){ data(){
return{ return{
teams: [],
edit:false,
newTeam:null
} }
}, },
methods:{ methods:{
addTeam: function(equipe){
if(!this.edit){//adding a team
this.teams.push(equipe);
}
else{//editing a team
this.teams.forEach((e,idx) => {
if(e.id==this.newTeam.id&&e.name==this.newTeam.name&&e.description==this.newTeam.description){
this.teams[idx]=equipe;
}
});
this.edit=false;
this.newTeam=null;
}
},
editTeam: function (team) {
this.newTeam=team;
this.edit=!this.edit;
}
} }
}); });
app.component('NavBar', NavBar); app.component('NavBar', NavBar);
app.component('TeamCard', TeamCard); app.component('TeamCard', TeamCard);

91
src/view/nav-bar.js
Unescape View File

@ -2,14 +2,14 @@ export default{
emits: ['addTeam'], emits: ['addTeam'],
data : function(){ data : function(){
return { return {
Home: '', teams:[],
Teams: '',
Results: '',
id:'', id:'',
name:'', name:'',
description:'', description:'',
clicked: false, clicked: false,
errMessage:'' errMessage:'',
edit:false,
idxEdit:null
} }
}, },
methods: { methods: {
@ -28,7 +28,7 @@ export default{
document.querySelector("#id").setAttribute("style","border: 1px solid #d66"); document.querySelector("#id").setAttribute("style","border: 1px solid #d66");
} }
if(this.name===""){ if(this.name===""){
this.errMessage+=" name"; this.errMessage+=" name";
document.querySelector("#name").setAttribute("style","border: 1px solid #d66"); document.querySelector("#name").setAttribute("style","border: 1px solid #d66");
} }
if(this.description===""){ if(this.description===""){
@ -49,16 +49,40 @@ export default{
this.addTeam(); this.addTeam();
} }
}, },
addTeam: function() { addTeam: function(){
let team = new Team(this.id, this.name, this.description); let team = new Team(this.id, this.name, this.description);
console.log(team); console.log(team);
this.$emit("addTeam",team); if(!this.edit){//adding a team
this.id=''; this.teams.push(team);
this.name=''; this.id='';
this.description=''; this.name='';
this.description='';
}
else{//editing a team
this.teams[this.idxEdit]=team;
this.id='';
this.name='';
this.description='';
this.edit=false;
}
}, },
myfun: function() { editTeam: function (team) {
this.clicked=!this.clicked; this.edit=!this.edit;
this.teams.forEach((e,idx) => {
if(e.id==team.id&&e.name==team.name&&e.description==team.description){
this.idxEdit=idx;
}
});
if(this.edit){
this.id=team.id;
this.name=team.name ;
this.description=team.description;
}
else{
this.id='';
this.name='';
this.description='';
}
} }
}, },
template: template:
@ -68,25 +92,32 @@ export default{
<span @click="myfun" style="cursor: pointer">Teams</span> <span @click="myfun" style="cursor: pointer">Teams</span>
<span>Results</span> <span>Results</span>
</div> </div>
<form @submit.prevent v-if="clicked"> <div v-if="clicked">
<br> <form @submit.prevent>
<label>{{errMessage}}</label><br/> <br>
<div> <label>{{errMessage}}</label><br/>
<label>id</label><br/> <div>
<input id="id" type="number" v-model="id"/> <label>id</label><br/>
</div> <input id="id" type="number" v-model="id"/>
</div>
<div>
<label>Name</label><br/> <div>
<input id="name" type="text" v-model="name"/> <label>Name</label><br/>
</div> <input id="name" type="text" v-model="name"/>
</div>
<div> <div>
<label>Description</label><br/> <label>Description</label><br/>
<textarea id="desc" v-model="description"></textarea> <textarea id="desc" v-model="description"></textarea>
</div> </div>
<input type="submit" value="Submit" v-on:click="checkFields"/> <input type="submit" value="Submit" v-on:click="checkFields"/>
</form> </form>
<team-card @edit-team="editTeam" v-for="team in teams"
:id="team.id"
:nom="team.name"
:description="team.description">
</team-card>
</div>
` `
} }

Write Preview
Loading…
Cancel
Save