edit completly functional : fill autpo fields

2 years ago · ad671bc9dc
parent 7a6055a663
commit ad671bc9dc
2 changed files with 63 additions and 59 deletions
--- a/index.html
+++ b/index.html
@ -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);

--- a/src/view/nav-bar.js
+++ b/src/view/nav-bar.js
@ -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: {
@ -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);
+			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,7 +92,8 @@ export default{
 				<span @click="myfun" style="cursor: pointer">Teams</span>
 				<span>Results</span>
 			</div>
-			<form @submit.prevent v-if="clicked">
+			<div v-if="clicked">
+				<form @submit.prevent>
 				<br>
 				<label>{{errMessage}}</label><br/>
 				<div>
@ -88,5 +113,11 @@ export default{

 				<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>
 		`
 }