Profile updated

src/views/main/Profile.vue

@@ -1,92 +1,125 @@
 <template>
-  <div class="bg-purple-800 h-24 -mt-12 -mb-6"></div>
-  <div class="flex justify-center">
-    <div class="w-full">
-      <img :src="bannerImageUrl" class="max-h-96 object-cover shadow-md profile-banner">
+  <div class="flex flex-col max-w-4xl mx-auto rounded-3xl shadow-2xl mt-16 mb-16 custom-bg">
+    <!-- Titre -->
+    <div class="text-center md:text-6xl text-2xl p-10 bg-white rounded-t-3xl border-b-4 border-b-gray-200">
+      Personnaliser votre profil
     </div>
-  </div>
-  <div class="bg-purple-800 h-24 flex items-center">
-    <div class="w-full text-right pr-12">
-      <button class="bg-white text-purple-800 p-2 rounded-full shadow-md hover:bg-purple-600 hover:text-white transition-colors duration-300 ease-in-out mr-3">
-        <i class="mdi mdi-pencil"></i>
-      </button>
-    </div>
-  </div>
-  <div class="max-w-4xl -mt-24 mx-auto flex justify-center items-center">
-    <div class="w-full">
-      <div class="bg-white rounded-3xl shadow-md p-6">
-        <div class="flex justify-center mb-5">
-          <div class="relative">
-            <img :src="profilePictureUrl" class="w-32 h-32 rounded-full shadow-lg border-4 border-white transition-transform duration-500 ease-in-out hover:scale-110">
-            <button class="absolute bottom-0 right-0 bg-white text-purple-800 p-2 rounded-full shadow-md hover:bg-purple-600 hover:text-white transition-colors duration-300 ease-in-out -mt-4">
-              <i class="mdi mdi-pencil"></i>
-            </button>
-          </div>
-        </div>
 
-        <p class="text-center mb-3 text-3xl font-semibold">{{ userName }}</p>
-        <p class="text-center mb-12 text-lg">{{ firstName }} {{ lastName }}</p>
-
-        <form>
-          <div class="mb-4">
-            <input type="text" v-model="firstName" placeholder="Prénom" :readonly="!isEditing" class="input input-bordered w-full">
+    <!-- Banner -->
+    <div class="py-5" >
+      <div class="flex justify-between items-center px-5 py-5">
+        <div>Photo de couverture</div>
+      </div>
+      <div>
+        <div class="bg-fuchsia-900 h-10"></div>
+        <img :src="bannerImageUrl" alt="Banner Image">
+        <div class="bg-fuchsia-900 h-14 flex justify-center items-center">
+          <div class="space-x-4">
+            <v-btn @click="changeTopColor">Couleur Haut</v-btn>
+            <v-btn @click="changeBottomColor">Couleur Bas</v-btn>
+            <v-btn @click="changeBottomColor">Couleur d'accent</v-btn>
           </div>
-          <div class="mb-4">
-            <input type="text" v-model="lastName" placeholder="Nom" :readonly="!isEditing" class="input input-bordered w-full">
-          </div>
-          <div class="mb-4">
-            <input type="text" v-model="titre" placeholder="Titre" :readonly="!isEditing" class="input input-bordered w-full">
-          </div>
-          <div class="mb-4">
-            <input type="text" v-model="description" placeholder="Description" :readonly="!isEditing" class="input input-bordered w-full">
-          </div>
-        </form>
-
-        <div class="text-right">
-<!--          <router-link :to="{ name: 'creatorfolio' }">-->
-            <button class="bg-gray-500 text-white px-4 py-2 rounded-lg shadow-md hover:bg-gray-700 transition-colors duration-300 ease-in-out mr-5">Retour</button>
-<!--          </router-link>-->
-          <button @click="toggleEdit" class="bg-purple-800 text-white px-4 py-2 rounded-lg shadow-md hover:bg-purple-600 transition-colors duration-300 ease-in-out">{{ isEditing ? 'Sauvegarder' : 'Éditer' }}</button>
         </div>
       </div>
     </div>
+    <div class="px-3">
+      <v-file-input v-model="bannerImage" label="Téléverser une nouvelle bannière"
+                    @change="onBannerFileChange"></v-file-input>
+    </div>
+
+    <!-- Profile -->
+    <div>
+      <div class="flex justify-between items-center px-5 py-5">
+        <div>Photo de profil</div>
+      </div>
+      <div class="flex justify-center pb-4">
+        <img :src="profilePictureUrl" class="rounded-full max-w-48 max-w-48" alt="Profile Image">
+      </div>
+      <div class="px-3">
+        <v-file-input v-model="profilePicture" label="Téléverser une nouvelle photo de profil"
+                      @change="onProfileFileChange"></v-file-input>
+      </div>
+    </div>
+
+    <!-- Informations -->
+    <Aboutyou></Aboutyou>
+
+    <!-- Social Links -->
+    <div>
+      <SocialLinks></SocialLinks>
+    </div>
   </div>
 </template>
 
 <script async setup>
 import MyUserModel from "@/models/myUserModel.js";
-import { useClient } from "@/plugins/api.js";
-import { onBeforeMount, ref } from 'vue';
+import {useClient} from "@/plugins/api.js";
+import {onBeforeMount, ref} from 'vue';
+import Aboutyou from "@/views/main/Aboutyou.vue";
+import SocialLinks from "@/views/main/SocialLinks.vue";
 
 const client = useClient();
 
+const currentUserName = ref("Anonyme");
 const profilePictureUrl = ref('/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png');
 const bannerImageUrl = ref('/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png');
 
-const firstName = ref('');
-const lastName = ref('');
-const userName = ref('');
-const titre = ref('');
-const description = ref('');
+const bannerImage = ref(null);
+const profilePicture = ref(null);
 
-const isEditing = ref(false);
+const onBannerFileChange = (event) => {
+  const file = event.target.files[0];
+  if (file) {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      bannerImageUrl.value = e.target.result;
+    };
+    reader.readAsDataURL(file);
+  }
+};
+
+const onProfileFileChange = (event) => {
+  const file = event.target.files[0];
+  if (file) {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      profilePictureUrl.value = e.target.result;
+    };
+    reader.readAsDataURL(file);
+  }
+};
 
 const fetchUserData = async () => {
   try {
     const myUser = await client.get("/api/GetMyUser");
-    const currentUserModel = MyUserModel.createFromApiResult(myUser.data);
-    firstName.value = currentUserModel.firstName;
-    lastName.value = currentUserModel.lastName;
-    userName.value = currentUserModel.userName;
-    // Assignez d'autres champs si nécessaire
+
   } catch (error) {
     console.error('Error fetching user data:', error);
   }
 };
 
-const toggleEdit = () => {
-  isEditing.value = !isEditing.value;
+const changeTopColor = () => {
+  // Logic to change top color
+};
+
+const changeBottomColor = () => {
+  // Logic to change bottom color
 };
 
 onBeforeMount(fetchUserData);
 </script>
+
+<style scoped>
+.save-btn {
+  z-index: 10;
+}
+
+.icon-preview {
+  max-width: 250px;
+  max-height: 250px;
+}
+
+.custom-bg {
+  background-color: #F4F4F4;
+}
+</style>