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 1 year 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>
<div id="app">
<h1>TP-noté</h1>
<nav-bar @add-team="addTeam"></nav-bar>
<team-card @edit-team="editTeam" v-for="team in teams"
:id="team.id"
:nom="team.name"
:description="team.description">
</team-card>
<nav-bar></nav-bar>
</div>
<script src="src/service/link-service.js"></script>
@ -31,33 +25,12 @@
created(){},
data(){
return{
teams: [],
edit:false,
newTeam:null
}
},
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('TeamCard', TeamCard);

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

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