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);

49
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: {
@ -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.teams.push(team);
this.id=''; this.id='';
this.name=''; this.name='';
this.description=''; 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,7 +92,8 @@ 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">
<form @submit.prevent>
<br> <br>
<label>{{errMessage}}</label><br/> <label>{{errMessage}}</label><br/>
<div> <div>
@ -88,5 +113,11 @@ export default{
<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