Q8 en légende (Encore quelques améliorations nécessaires)

index.html

@@ -13,14 +13,6 @@
 
         <navbar></navbar>
         <team></team>
-        <!--<div class="team">
-            <team-add @add-team="addTeam"></team-add>
-        </div>
-        <teamcard v-for="team in allTeam"
-                  :id="team.id"
-                  :name="team.name"
-                  :description="team.description">
-        </teamcard>-->
     </div>
 
     <script src="./src/misc/constant.js"></script>
@@ -29,8 +21,8 @@
 
 
     <script type="module">
-        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
 
+        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
         import Navbar from './src/view/navbar.js';
         import Team from './src/view/team.js'
 

src/view/team-add.js

@@ -1,9 +1,13 @@
-
-
 export default {
+    props: {
+        teamAEdit: {
+            type: String,
+            require: true
+        },
+    },
     data: function() {
         return {
-            id: '',
+            id:'',
             name: '',
             description: '',
             errorMessage: '',
@@ -13,6 +17,7 @@ export default {
     methods: {
         addTeam: function () {
             try {
+
                 this.errorMessage = '';
                 if (!this.id) {
                     throw new RequiredFieldError("ID");
@@ -36,7 +41,11 @@ export default {
                 const team = { id: this.id, name: this.name, description: this.description};
                 console.log('form.addTeam', team);
 
-                this.$emit('teamAjoute', team);
+                if (this.teamAEdit != null) {
+                    this.$emit('teamModifie', team);
+                } else {
+                    this.$emit('teamAjoute', team);
+                }
 
                 this.id = '';
                 this.name = '';
@@ -59,6 +68,7 @@ export default {
                     <div>
                         <label>ID</label><br/>
                         <input type="text" v-model="id"/>
+                        {{this.id}}
                     </div>
                     <div>
                         <label>Name</label><br/>

src/view/team.js

@@ -5,14 +5,31 @@ import teamCard from './teamcard.js';
 export default {
     data: function() {
         return {
-            allTeam: []
+            allTeam: [],
+            teamAEdit: null
         }
     },
     methods: {
         recupTeam: function (team) {
             console.log('team.addTeam', team);
             this.allTeam.push(team);
+        },
+        editParam: function (team) {
+            this.teamAEdit=team
+            console.log('lanceEdit')
+        },
+        updateTeam: function (team) {
+            console.log('update')
+            for (var i = 0; i < this.allTeam.length; i++) {
+                if (this.allTeam[i].id == this.teamAEdit.id) {
+                    console.log('update + +')
+                    this.allTeam[i].name = team.name
+                    this.allTeam[i].description=team.description
+                }
+            }
         }
+
+
     },
     components: {
         teamCard,
@@ -22,12 +39,13 @@ export default {
         <section>
             <h2>News form</h2>
             <div class="team">
-                <teamAdd v-on:teamAjoute="recupTeam"></teamAdd>
+                <teamAdd :teamAEdit="this.teamAEdit" v-on:teamAjoute="recupTeam" v-on:teamModifie="updateTeam"></teamAdd>
             </div>
             <teamCard v-for="team in allTeam"
                       :id="team.id"
                       :name="team.name"
-                      :description="team.description">
+                      :description="team.description"
+                      v-on:teamEditer="editParam">
             </teamCard>
         </section>
     `

src/view/teamcard.js

@@ -21,6 +21,9 @@ export default {
     methods: {
         editTeam: function () {
             this.isEdit = !this.isEdit;
+            const team = { id: this.id, name: this.name, description: this.description };
+            this.$emit('teamEditer', team);
+
         }
     },
     computed: {
@@ -37,7 +40,7 @@ export default {
             <span>ID of the Team : {{ id }}</span>
             <p>Name : {{ name }}</p>
             <p>Description : {{ description20 }}</p>
-            <button name="button" @click="editTeam">Editer</button>
+            <input type="submit" value="Edit" @click="editTeam"/>
         </div>
     `
 }