Modification majeur des composants

index.html

@@ -12,14 +12,15 @@
     <div id="app">
 
         <navbar></navbar>
-        <div class="team">
+        <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>
+        </teamcard>-->
     </div>
 
     <script src="./src/misc/constant.js"></script>
@@ -31,27 +32,16 @@
         import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
 
         import Navbar from './src/view/navbar.js';
-        import TeamAdd from './src/view/team_add.js';
-        import Teamcard from './src/view/teamcard.js';
-
-        const app = createApp({
-            data() {
-                return {
-                    allTeam: []
-                }
-            },
-            methods: {
-                addTeam: function (team) {
-                    console.log('index.addTeam', team);
-                    this.allTeam.push(team);
-                }
-            }
-        })
+        import Team from './src/view/team.js'
+
+        const app = createApp();
+
         app.component('Navbar', Navbar)
-            .component('TeamAdd', TeamAdd)
-            .component('Teamcard', Teamcard);
+            .component('Team', Team)
         app.mount('#app');
     </script>
 </body>
 
 </html>
+
+<!--Ctrl Maj R-->

src/misc/constant.js

@@ -1,3 +1,3 @@
 const ERROR_COLOR = 'red';
-const DESCRIPTION_MINIMAL_SIZE = 20;
-const NAME_MINIMAL_SIZE = 5;
+const DESCRIPTION_MINIMAL_SIZE = 1;
+const NAME_MINIMAL_SIZE = 1;

src/view/navbar.js

@@ -30,5 +30,4 @@ export default {
             <li><a target="_blank" :href="linkResults">Results</a></li>
         </ul>
     `
-
 };

src/view/team-add.js

@@ -1,3 +1,5 @@
+
+
 export default {
     data: function() {
         return {
@@ -31,11 +33,10 @@ export default {
                     throw new StringSize("Name", NAME_MINIMAL_SIZE)
                 }
 
-                console.log(this.description.length)
                 const team = { id: this.id, name: this.name, description: this.description};
                 console.log('form.addTeam', team);
 
-                this.$emit('addTeam', team);
+                this.$emit('teamAjoute', team);
 
                 this.id = '';
                 this.name = '';
@@ -53,7 +54,6 @@ export default {
         }
     },
     template: `<section>
-                <h2>News form</h2>
                 <form @submit.prevent>
                     <div v-bind:style="{ color: errorColor}">{{ errorMessage }}</div>
                     <div>

src/view/team.js

@@ -0,0 +1,34 @@
+import teamAdd from './team-add.js';
+import teamCard from './teamcard.js';
+
+
+export default {
+    data: function() {
+        return {
+            allTeam: []
+        }
+    },
+    methods: {
+        recupTeam: function (team) {
+            console.log('team.addTeam', team);
+            this.allTeam.push(team);
+        }
+    },
+    components: {
+        teamCard,
+        teamAdd
+    },
+    template: `
+        <section>
+            <h2>News form</h2>
+            <div class="team">
+                <teamAdd v-on:teamAjoute="recupTeam"></teamAdd>
+            </div>
+            <teamCard v-for="team in allTeam"
+                      :id="team.id"
+                      :name="team.name"
+                      :description="team.description">
+            </teamCard>
+        </section>
+    `
+}

src/view/teamcard.js

@@ -13,6 +13,16 @@ export default {
             require : true
         }
     },
+    data: function () {
+        return {
+            isEdit: false
+        }
+    },
+    methods: {
+        editTeam: function () {
+            this.isEdit = !this.isEdit;
+        }
+    },
     computed: {
         description20(){
             if (this.description.length > 20) {
@@ -21,12 +31,13 @@ export default {
                 return this.description;
               }
             }
-        },
+    },
     template: `
         <div class="team-card">
             <span>ID of the Team : {{ id }}</span>
             <p>Name : {{ name }}</p>
             <p>Description : {{ description20 }}</p>
+            <button name="button" @click="editTeam">Editer</button>
         </div>
     `
 }