add additional contact component

src/views/Delegate/Contact.vue

@@ -8,11 +8,11 @@
         Ici vous pouvez préciser quelques manières de contacter votre association, aucun des  champs indiqués n'est obligatoire.
       </v-alert>
     </div>
-    <v-text-field
+    <!-- <v-text-field
       prepend-icon="call"
       label="Numéro de téléphone"
       outlined
-      v-model="$store.state.data.contacts.phone" />
+      v-model="$store.state.data.contacts.phone" /> -->
     <v-text-field
       prepend-icon="public"
       label="Site web"
@@ -42,46 +42,55 @@
       outlined
       v-model="$store.state.data.contacts.instagram"
       :rules="rules.instagram" />
-    <p>Contacts additionels</p>
-    <v-btn @click="addContact()">Ajouter un contact additionel</v-btn>
-    <v-row
+    <AdditionalContacts />
+    <!-- <v-card
       v-for="(contact, index) in $store.state.data.contacts.peoples"
       :key="index">
-      <v-col cols="12" sm="4" class="py-0">
-        <v-text-field
-          prepend-icon="person"
-          label="Nom du contact"
-          outlined
-          v-model="contact.name"
-          :rules="rules.person" />
-      </v-col>
-      <v-col cols="12" sm="4" class="py-0">
-        <v-text-field
-          label="Rôle"
-          outlined
-          v-model="contact.role"
-          :rules="rules.role" />
-      </v-col>
-      <v-col cols="12" sm="4" class="py-0">
-        <v-text-field
-          label="Email"
-          outlined
-          v-model="contact.email"
-          :rules="rules.email" />
-      </v-col>
-      <v-col cols="12" sm="4" class="py-0">
-        <v-text-field
-          label="N° de téléphone"
-          outlined
-          v-model="contact.phone"
-          :rules="rules.phone" />
-      </v-col>
-    </v-row>
+      <v-row>
+        <v-col cols="12" sm="3" class="pr-2 py-0">
+          <v-text-field
+            label="Nom du contact"
+            dense
+            outlined
+            v-model="contact.name"
+            :rules="rules.person" />
+        </v-col>
+        <v-col cols="12" sm="3" class="px-2 py-0">
+          <v-text-field
+            label="Rôle"
+            dense
+            outlined
+            v-model="contact.role"
+            :rules="rules.role" />
+        </v-col>
+        <v-col cols="12" sm="3" class="px-2 py-0">
+          <v-text-field
+            label="Email"
+            dense
+            outlined
+            v-model="contact.email"
+            :rules="rules.email" />
+        </v-col>
+        <v-col cols="12" sm="3" class="pl-2 py-0">
+          <v-text-field
+            label="N° de téléphone"
+            dense
+            outlined
+            v-model="contact.phone"
+            :rules="rules.phone" />
+        </v-col>
+      </v-row>
+    </v-card> -->
   </div>
 </template>
 
 <script>
+import AdditionalContacts from '../../components/AdditionalContacts'
+
 export default {
+  components: {
+    AdditionalContacts
+  },
   data: () => ({
     rules: {
       website: [
@@ -100,16 +109,6 @@ export default {
         v => v === '' || /(http(s)?:\/\/)?(www\.)?instagram\.com\/(\S+){3,}/g.test(v) || 'Ce champs doit être une url instagram valide'
       ]
     }
-  }),
-  methods: {
-    addContact () {
-      this.$store.state.contacts.peoples.push({
-        name: '',
-        email: '',
-        role: '',
-        phone: ''
-      })
-    }
-  }
+  })
 }
 </script>

src/views/Delegate/Main.vue

@@ -115,7 +115,7 @@ export default {
         v => v.length <= 200 || 'Au maximum 200 caractères'
       ],
       tags: [v => (Array.isArray(v) && v.length > 0) || 'Vous devez choisir au minimum une catégorie'],
-      email: [v => /.+@.+\..+/.test(v) || "L'email est requis et dois être valide"],
+      email: [v => /.+@.+\..+/.test(v) || "L'email est requis et doit être valide"],
       person: [v => v.length >= 4 || 'Au minimum 4 caractères']
     }
   }),