Ajout description

1 year ago · 5f9c2fb1f6
parent fe997a1b6d cac64b0978
commit 5f9c2fb1f6
3 changed files with 46 additions and 12 deletions
--- a/index.html
+++ b/index.html
@ -9,11 +9,12 @@
 <body>
    <div id="app">
        <h1>TP-noté</h1>
-        <nav-bar @add-teams="addTeam"></nav-bar>
+        <nav-bar @add-team="addTeam"></nav-bar>

        <team-card v-for="team in teams"
                   :id="team.id"
-                   :nom="team.name">
+                   :nom="team.name"
+                   :description="team.description">
        </team-card>
    </div>

--- a/src/view/nav-bar.js
+++ b/src/view/nav-bar.js
@ -1,5 +1,5 @@
 export default{
-    emits: ['addTeams'],
+    emits: ['addTeam'],
 	data : function(){
 		return {
 			Home: '',
@ -8,22 +8,48 @@ export default{
 			id:'',
 			name:'',
 			description:'',
-			clicked: false
+			clicked: false,
+			errMessage:''
 		}
 	},
 	methods: {
-	    pushTeam: function() {
-			let team = new Team(this.id, this.name);
-            this.$emit('addTeams',team);
+		myfun: function() {
+			this.clicked=!this.clicked;
+		},
+		checkFields: function() {
+			if(this.id===""){
+				this.errMessage+="The id field must be required "
+			}
+			else if(this.name===""){
+				this.errMessage+="The name field must be required "
+			}
+			else if(this.description===""){
+				this.errMessage+="The description field must be required "
+			}
+			else{
+				if(this.name.lenght<5){
+					this.errMessage+="The name must have at least 5 caracters "
+				}
+				if(this.description.lenght<20){
+					this.description+="The description must have at least 20 caracters "
+				}
+			}
+			if(this.errMessage.length===0){
+                console.log("jappelle la fonction")
+				this.addTeam();
+			}
+		},
+		addTeam: function() {
+			let team = new Team(this.id, this.name, this.description);
+			console.log(team);
+            this.$emit("addTeam",team);
 			this.id='';
 			this.name='';
-
 		},
        myfun: function() {
 			console.log("gngn");
 			this.clicked=!this.clicked;
 		}
-		
 	},
 	template: 
 		`
@ -34,6 +60,7 @@ export default{
 			</div>
 			<form @submit.prevent v-if="clicked">
 			<br>
+			<label>{{errMessage}}</label><br/>
 			<div>
 				<label>id</label><br/>
 				<input type="number" v-model="id"/>
@ -44,7 +71,12 @@ export default{
 				<input type="text" v-model="name"/>
 			</div>

-			<input type="submit" value="Submit" @click="pushTeam"/>
+			<div>
+				<label>Description</label><br/>
+				<textarea v-model="description"></textarea>
+			</div>
+
+			<input type="submit" value="Submit" v-on:click="checkFields"/>
 			</form>
 		`
 }
--- a/src/view/team-card.js
+++ b/src/view/team-card.js
@ -1,13 +1,14 @@
 export default{
    props: {
        id: Number,
-        nom: String
+        nom: String,
+        description: String
    },
    methods: {
 	},
    template: `
        <div id="teamCard">
-            <span>{{id}}    {{nom}}</span>
+            <span>{{id}}    {{nom}}    description: {{description}}</span>
        </div>
    `
 }