From 5f1b8a1598fa7bac9e8dff13d33ef791f576feed Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sat, 27 Jul 2024 00:01:08 -0400
Subject: [PATCH] Added Modals for Informations personnelles

---
 .../Dialogs/PersonnalInfo/AdressesHome.vue    | 24 ++++++---
 .../Dialogs/PersonnalInfo/AdressesWork.vue    | 24 ++++++---
 .../Dialogs/PersonnalInfo/Birthday.vue        | 29 ++++++++---
 .../Profile/Dialogs/PersonnalInfo/Email.vue   | 23 ++++++---
 .../Profile/Dialogs/PersonnalInfo/Gender.vue  | 34 ++++++++++---
 .../Profile/Dialogs/PersonnalInfo/Name.vue    | 51 ++++++++++++++++---
 .../Profile/Dialogs/PersonnalInfo/Phone.vue   | 35 ++++++++++---
 src/views/Profile/PersonnalInfo.vue           | 16 +++---
 8 files changed, 184 insertions(+), 52 deletions(-)

diff --git a/src/views/Profile/Dialogs/PersonnalInfo/AdressesHome.vue b/src/views/Profile/Dialogs/PersonnalInfo/AdressesHome.vue
index 0deb2e7..cc6eef7 100644
--- a/src/views/Profile/Dialogs/PersonnalInfo/AdressesHome.vue
+++ b/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>
\ No newline at end of file
+<style scoped>
+</style>
diff --git a/src/views/Profile/Dialogs/PersonnalInfo/AdressesWork.vue b/src/views/Profile/Dialogs/PersonnalInfo/AdressesWork.vue
index 5493a20..08af31b 100644
--- a/src/views/Profile/Dialogs/PersonnalInfo/AdressesWork.vue
+++ b/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>
\ No newline at end of file
+<style scoped>
+</style>
diff --git a/src/views/Profile/Dialogs/PersonnalInfo/Birthday.vue b/src/views/Profile/Dialogs/PersonnalInfo/Birthday.vue
index f321f52..0a771a8 100644
--- a/src/views/Profile/Dialogs/PersonnalInfo/Birthday.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/views/Profile/Dialogs/PersonnalInfo/Email.vue b/src/views/Profile/Dialogs/PersonnalInfo/Email.vue
index 3199603..d3e8ef8 100644
--- a/src/views/Profile/Dialogs/PersonnalInfo/Email.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/Profile/Dialogs/PersonnalInfo/Gender.vue b/src/views/Profile/Dialogs/PersonnalInfo/Gender.vue
index b5de4d6..21cbfa4 100644
--- a/src/views/Profile/Dialogs/PersonnalInfo/Gender.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/views/Profile/Dialogs/PersonnalInfo/Name.vue b/src/views/Profile/Dialogs/PersonnalInfo/Name.vue
index 6478b49..508274c 100644
--- a/src/views/Profile/Dialogs/PersonnalInfo/Name.vue
+++ b/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>
\ No newline at end of file
+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>
diff --git a/src/views/Profile/Dialogs/PersonnalInfo/Phone.vue b/src/views/Profile/Dialogs/PersonnalInfo/Phone.vue
index 3fbf851..6be00aa 100644
--- a/src/views/Profile/Dialogs/PersonnalInfo/Phone.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/views/Profile/PersonnalInfo.vue b/src/views/Profile/PersonnalInfo.vue
index 6e5379b..36f8805 100644
--- a/src/views/Profile/PersonnalInfo.vue
+++ b/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>