Added Modals for Informations personnelles

src/views/Profile/Dialogs/PersonnalInfo/AdressesHome.vue

@@ -1,11 +1,23 @@
-<script setup>
+<template>
+  <div class="pb-5 text-2xl">Adresse de votre domicile</div>
 
-</script>
+  <v-text-field
+      variant="outlined"
+      v-model="homeAddress"
+      label="Votre adresse domicile"
+      outlined
+  ></v-text-field>
 
-<template>
-Adresses home
+  <div class="flex justify-end space-x-4">
+    <v-btn variant="plain">Annuler</v-btn>
+    <v-btn color="#A6147D" >Enregistrer</v-btn>
+  </div>
 </template>
 
-<style scoped>
+<script setup>
+import { ref } from 'vue';
+const homeAddress = ref('');
+</script>
 
-</style>
+<style scoped>
+</style>

src/views/Profile/Dialogs/PersonnalInfo/AdressesWork.vue

@@ -1,11 +1,23 @@
-<script setup>
+<template>
+  <div class="pb-5 text-2xl">Adresse au travail</div>
 
-</script>
+  <v-text-field
+      variant="outlined"
+      v-model="homeAddress"
+      label="Votre adresse au travail"
+      outlined
+  ></v-text-field>
 
-<template>
-AdressesWork
+  <div class="flex justify-end space-x-4">
+    <v-btn variant="plain">Annuler</v-btn>
+    <v-btn color="#A6147D" >Enregistrer</v-btn>
+  </div>
 </template>
 
-<style scoped>
+<script setup>
+import { ref } from 'vue';
+const homeAddress = ref('');
+</script>
 
-</style>
+<style scoped>
+</style>

src/views/Profile/Dialogs/PersonnalInfo/Birthday.vue

@@ -1,11 +1,26 @@
-<script setup>
+<template>
+  <div class="pb-5 text-2xl">Date de naissance</div>
+
+  <v-text-field
+      variant="outlined"
+      v-model="date"
+      label="AAAA-MM-JJ"
+      outlined
+  ></v-text-field> 
+
+  <div class="flex justify-end space-x-4">
+    <v-btn variant="plain" color="black" >Annuler</v-btn>
+    <v-btn color="#A6147D">Enregistrer</v-btn>
+  </div>
+</template>
+
+<script setup>
+import {ref} from "vue";
+const date = ref('');
+
+
 
 </script>
 
-<template>
-Birthday
-</template>
-
 <style scoped>
-
-</style>
+</style>

src/views/Profile/Dialogs/PersonnalInfo/Email.vue

@@ -1,11 +1,22 @@
-<script setup>
+<template>
+  <div class="pb-5 text-2xl">Courriel</div>
 
-</script>
+  <v-text-field
+      variant="outlined"
+      v-model="email"
+      label="Votre courriel"
+      outlined
+  ></v-text-field>
 
-<template>
-Email
+  <div class="flex justify-end space-x-4">
+    <v-btn variant="plain" color="black">Annuler</v-btn>
+    <v-btn color="#A6147D" >Enregistrer</v-btn>
+  </div>
 </template>
 
-<style scoped>
+<script setup>
+import { ref } from 'vue';
+const email = ref('');
+</script>
+
 
-</style>

src/views/Profile/Dialogs/PersonnalInfo/Gender.vue

@@ -1,11 +1,33 @@
-<script setup>
+<template>
+  <div class="pb-5 text-2xl">Genre</div>
+
+  <v-radio-group v-model="gender" row>
+    <v-radio label="Homme" value="Homme"></v-radio>
+    <v-radio label="Femme" value="Femme"></v-radio>
+    <v-radio label="Autre" value="Autre"></v-radio>
+  </v-radio-group>
+
+  <v-text-field
+      v-if="gender === 'Autre'"
+      v-model="otherGender"
+      label="Veuillez spécifier"
+      outlined
+  ></v-text-field>
+
+  <div class="flex justify-end space-x-4">
+    <v-btn variant="plain" color="black">Annuler</v-btn>
+    <v-btn color="#A6147D">Enregistrer</v-btn>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const gender = ref('');
+const otherGender = ref('');
 
 </script>
 
-<template>
-gender
-</template>
 
 <style scoped>
-
-</style>
+</style>

src/views/Profile/Dialogs/PersonnalInfo/Name.vue

@@ -1,11 +1,50 @@
-<script setup>
+<template>
+  <div class="pb-5 text-2xl">Nom</div>
 
-</script>
+  <v-text-field
+      variant="outlined"
+      v-model="name"
+      label="Name"
+      outlined
+  ></v-text-field>
 
-<template>
- Name
+  <v-text-field
+      variant="outlined"
+      v-model="lastName"
+      label="Last Name"
+      outlined
+  ></v-text-field>
+
+  <v-text-field
+      variant="outlined"
+      v-model="displayName"
+      label="Display Name as"
+      outlined
+  ></v-text-field>
+
+  <div class="flex justify-end space-x-4">
+    <v-btn variant="plain" color="black" @click="handleCancel">Annuler</v-btn>
+    <v-btn color="#A6147D" >Enregistrer</v-btn>
+  </div>
 </template>
 
-<style scoped>
+<script setup>
+import { ref } from 'vue';
 
-</style>
+const name = ref('');
+const lastName = ref('');
+const displayName = ref('');
+
+
+
+const handleCancel = () => {
+  // Logic for canceling the changes
+  name.value = '';
+  lastName.value = '';
+  displayName.value = '';
+  console.log('Cancelled');
+};
+</script>
+
+<style scoped>
+</style>

src/views/Profile/Dialogs/PersonnalInfo/Phone.vue

@@ -1,11 +1,32 @@
-<script setup>
+<template>
+  <div class="pb-5 text-2xl">Numéro de téléphone</div>
+
+  <v-text-field
+      variant="outlined"
+      v-model="cellNumber"
+      label="Numéro de cellulaire"
+      outlined
+  ></v-text-field>
+
+  <v-text-field
+      variant="outlined"
+      v-model="workNumber"
+      label="Numéro au travail"
+      outlined
+  ></v-text-field>
+
+  <div class="flex justify-end space-x-4">
+    <v-btn variant="plain" color="black">Annuler</v-btn>
+    <v-btn color="#A6147D" >Enregistrer</v-btn>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const cellNumber = ref('');
+const workNumber = ref('');
 
 </script>
 
-<template>
-Phone
-</template>
-
 <style scoped>
-
-</style>
+</style>

src/views/Profile/PersonnalInfo.vue

@@ -11,7 +11,7 @@
         <button
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
             @click="openModal('Name')">
-          <span class="min-w-32 text-left">Photo de profil</span>
+          <span class="min-w-40 text-left">Photo de profil</span>
           <span class="flex-auto pr-6 text-left">Une photo de profil aide à personnaliser votre compte</span>
           <span class="flex-none">
             <img
@@ -25,7 +25,7 @@
         <button
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
             @click="openModal('Name')">
-          <span class="pa-2 min-w-32 text-left">Nom</span>
+          <span class="pa-2 min-w-40 text-left">Nom</span>
           <span class="flex-auto text-left pr-6">Pascal Marchesseault</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
@@ -35,7 +35,7 @@
         <button
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
             @click="openModal('Birthday')">
-          <span class="flex-none pa-2 min-w-32 text-left">Anniversaire</span>
+          <span class="flex-none pa-2 min-w-40 text-left">Date de naissance</span>
           <span class="flex-auto text-left pr-6">27 octobre 1988</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
@@ -45,7 +45,7 @@
         <button
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out rounded-b-2xl w-full"
             @click="openModal('Gender')">
-          <span class="flex-none pa-2 min-w-32 text-left">Genre</span>
+          <span class="flex-none pa-2 min-w-40 text-left">Genre</span>
           <span class="flex-auto text-left pr-6">Homme</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
@@ -64,7 +64,7 @@
         <button
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
             @click="openModal('Email')">
-          <span class="min-w-32 text-left">Courriel</span>
+          <span class="min-w-40 text-left">Courriel</span>
           <span class="flex-auto pr-6 text-left">marchesseault_pascal@hotmail.com</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
@@ -74,7 +74,7 @@
         <button
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl"
             @click="openModal('Phone')">
-          <span class="pa-2 min-w-32 text-left">Téléphone</span>
+          <span class="pa-2 min-w-40 text-left">Téléphone</span>
           <span class="flex-auto text-left pr-6">(581) 999-7540</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
@@ -93,7 +93,7 @@
         <button
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
             @click="openModal('AdressesHome')">
-          <span class="min-w-32 text-left">Domicile</span>
+          <span class="min-w-40 text-left">Domicile</span>
           <span class="flex-auto pr-6 text-left">2127 Rue De Casson, Trois-Rivières, Qc</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
@@ -103,7 +103,7 @@
         <button
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl"
             @click="openModal('AdressesWork')">
-          <span class="pa-2 min-w-32 text-left">Travail</span>
+          <span class="pa-2 min-w-40 text-left">Travail</span>
           <span class="flex-auto pr-6 text-left">2127 Rue De Casson, Trois-Rivières, Qc</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>