From c2df527d4ca3fe823f6be75478e64110efa02b97 Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Wed, 4 Sep 2024 13:46:02 -0400
Subject: [PATCH] Fixes some issues during edits of user profile

---
 src/stores/userStore.js                      | 22 ++++++++++++--
 src/views/profile/account/AccountPage.vue    | 30 ++++++++++--------
 src/views/profile/account/AddressDialog.vue  |  6 ----
 src/views/profile/account/BirthdayDialog.vue |  1 -
 src/views/profile/account/PhoneDialog.vue    |  4 +--
 src/views/profile/account/PortraitDialog.vue | 32 +++++++++++++++++---
 src/views/profile/creators/BannerPicker.vue  |  2 +-
 7 files changed, 65 insertions(+), 32 deletions(-)

diff --git a/src/stores/userStore.js b/src/stores/userStore.js
index 359f550..499270e 100644
--- a/src/stores/userStore.js
+++ b/src/stores/userStore.js
@@ -107,7 +107,7 @@ export const useUserStore = defineStore(
                 console.error(error)
             }
         }
-        
+
         async function changeBirthday(birthdate) {
             try {
                 await client.post(
@@ -120,7 +120,7 @@ export const useUserStore = defineStore(
                 console.error(error)
             }
         }
-        
+
         async function changePhone(phoneNumber) {
             try {
                 await client.post(
@@ -133,7 +133,7 @@ export const useUserStore = defineStore(
                 console.error(error)
             }
         }
-        
+
         async function changeEmail(email) {
             try {
                 await client.post(
@@ -159,6 +159,21 @@ export const useUserStore = defineStore(
                 console.error(error)
             }
         }
+        
+        async function changePortrait(selectedFile) {
+            try {
+                const formData = new FormData();
+                formData.append('file', selectedFile)
+
+                const response = await client.post(
+                    `/api/users/portrait`,
+                    formData)
+                    
+                user.value.portraitUrl = `${response.data.blobUrl}?${Date.now()}` // the Date.now() is for cache-busting
+            } catch (error) {
+                console.error(error)
+            }
+        }
 
         return {
             user,
@@ -173,6 +188,7 @@ export const useUserStore = defineStore(
             changePhone,
             changeEmail,
             changeAddress,
+            changePortrait,
             fetchCurrentUserProfile,
             fetchCurrentCreatorProfile
         }
diff --git a/src/views/profile/account/AccountPage.vue b/src/views/profile/account/AccountPage.vue
index f65f98e..de619f6 100644
--- a/src/views/profile/account/AccountPage.vue
+++ b/src/views/profile/account/AccountPage.vue
@@ -18,12 +18,12 @@
         <span class="value">Un portrait vous permet de personnaliser votre profil</span>
         <span>
             <img
-                :src="userStore.portraitUrl"
+                :src="userStore.user.portraitUrl"
                 alt="Profile Image"
                 class="rounded-full"
                 width="48px"
-                height="48px">
-          </span>
+                height="48px"/>
+        </span>
       </button>
 
       <button
@@ -41,7 +41,7 @@
         <span class="value">{{ userStore.user.alias }}</span>
         <span><v-icon>mdi-chevron-right</v-icon></span>
       </button>
-      
+
       <button
           class="editableValue"
           @click="openEditBirthday">
@@ -94,27 +94,32 @@
   <!-- Modal -->
   <v-dialog v-model="dialogEditPortraitShown" max-width="600px">
     <portrait-dialog
+        :portrait-url="userStore.user.portraitUrl"
         @close="handleCloseEditPortrait"
         @save="handleSaveEditPortrait"
     ></portrait-dialog>
   </v-dialog>
-  
+
   <v-dialog v-model="dialogEditFullnameShown" max-width="600px">
     <fullname-dialog
+        :firstname="userStore.user.firstname"
+        :lastname="userStore.user.lastname"
         @close="handleCloseEditFullname"
         @save="handleSaveEditFullname"
     ></fullname-dialog>
   </v-dialog>
-  
+
   <v-dialog v-model="dialogEditAliasShown" max-width="600px">
     <alias-dialog
+        :alias="userStore.user.alias"
         @close="handleCloseEditAlias"
         @save="handleSaveEditAlias"
     ></alias-dialog>
   </v-dialog>
-  
+
   <v-dialog v-model="dialogEditBirthdayShown" max-width="600px">
     <birthday-dialog
+        :birth-date="userStore.user.birthDate"
         @close="handleCloseEditBirthday"
         @save="handleSaveEditBirthday"
     ></birthday-dialog>
@@ -122,6 +127,7 @@
 
   <v-dialog v-model="dialogEditPhoneShown" max-width="600px">
     <phone-dialog
+        :phone="userStore.user.phoneNumber"
         @close="handleCloseEditPhone"
         @save="handleSaveEditPhone"
     ></phone-dialog>
@@ -129,6 +135,7 @@
 
   <v-dialog v-model="dialogEditEmailShown" max-width="600px">
     <email-dialog
+        :email="userStore.user.email"
         @close="handleCloseEditEmail"
         @save="handleSaveEditEmail"
     ></email-dialog>
@@ -136,11 +143,11 @@
 
   <v-dialog v-model="dialogEditAddressShown" max-width="600px">
     <address-dialog
+        :address="userStore.user.address"
         @close="handleCloseEditAddress"
         @save="handleSaveEditAddress"
     ></address-dialog>
   </v-dialog>
-
 </template>
 
 <script setup>
@@ -168,8 +175,8 @@ function handleCloseEditPortrait() {
   dialogEditPortraitShown.value = false
 }
 
-function handleSaveEditPortrait(portraitUrl) {
-  console.log(`going to save portrait: ${portraitUrl}`)
+function handleSaveEditPortrait(portraitData) {
+  userStore.changePortrait(portraitData)
   dialogEditPortraitShown.value = false
 }
 
@@ -273,11 +280,9 @@ function handleSaveEditAddress(address) {
   userStore.changeAddress(address)
   dialogEditAddressShown.value = false
 }
-
 </script>
 
 <style>
-
 .editableValue {
   @apply py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full;
   @apply hover:bg-[#A6147D] hover:text-white hover:opacity-90;
@@ -290,5 +295,4 @@ function handleSaveEditAddress(address) {
 .value {
   @apply flex-auto pr-6 text-left;
 }
-
 </style>
diff --git a/src/views/profile/account/AddressDialog.vue b/src/views/profile/account/AddressDialog.vue
index 40d8e08..d39ecca 100644
--- a/src/views/profile/account/AddressDialog.vue
+++ b/src/views/profile/account/AddressDialog.vue
@@ -29,14 +29,8 @@ import {ref} from 'vue';
 const props = defineProps(['address'])
 const emit = defineEmits(['close', 'save'])
 
-const title = ref(props.title);
 const address = ref(props.address);
 
 const requestClose = () => emit('close')
 const requestSave = () => emit('save', address.value)
-
-
 </script>
-
-<style scoped>
-</style>
diff --git a/src/views/profile/account/BirthdayDialog.vue b/src/views/profile/account/BirthdayDialog.vue
index ab5721a..8c88a33 100644
--- a/src/views/profile/account/BirthdayDialog.vue
+++ b/src/views/profile/account/BirthdayDialog.vue
@@ -23,7 +23,6 @@
   </v-card>
 </template>
 
-
 <script setup>
 import {ref} from 'vue';
 
diff --git a/src/views/profile/account/PhoneDialog.vue b/src/views/profile/account/PhoneDialog.vue
index dfd6963..78862f0 100644
--- a/src/views/profile/account/PhoneDialog.vue
+++ b/src/views/profile/account/PhoneDialog.vue
@@ -1,5 +1,4 @@
 <template>
-
   <v-card>
     <v-card-title>
       Numéro de téléphone
@@ -23,7 +22,6 @@
     </v-card-actions>
   
   </v-card>
-
 </template>
 
 <script setup>
@@ -32,7 +30,7 @@ import {ref} from 'vue';
 const props = defineProps(['phone'])
 const emit = defineEmits(['close', 'save'])
 
-const phone = ref(props.email)
+const phone = ref(props.phone)
 
 const requestClose = () => emit('close')
 const requestSave = () => emit('save', phone.value)
diff --git a/src/views/profile/account/PortraitDialog.vue b/src/views/profile/account/PortraitDialog.vue
index a2f5757..03d02b9 100644
--- a/src/views/profile/account/PortraitDialog.vue
+++ b/src/views/profile/account/PortraitDialog.vue
@@ -5,10 +5,19 @@
     </v-card-title>
 
     <div class="m-4">
-      <v-text-field
+      <img
+          :src="portraitData"
+          class="mb-5 w-full transition duration-200 ease-in-out transform"
+          alt="Aperçu de la bannière"
+      />
+
+      <v-file-input
+          @change="onSelectedFileChanged"
+          v-model="selectedFile"
           variant="outlined"
-          v-model="portraitUrl"
-      ></v-text-field>
+          accept="image/*"
+          label="Votre bannière"
+      ></v-file-input>
     </div>
 
     <v-card-actions>
@@ -29,8 +38,21 @@ import {ref} from 'vue';
 const props = defineProps(['portraitUrl'])
 const emit = defineEmits(['close', 'save'])
 
-const portraitUrl = ref(props.portraitUrl)
+const portraitData = ref(props.portraitUrl)
+
+const selectedFile = ref({})
+const onSelectedFileChanged = () => {
+  if (selectedFile.value) {
+    const reader = new FileReader()
+    reader.onload = (event) => {
+      portraitData.value = event.target.result
+    }
+    reader.readAsDataURL(selectedFile.value)
+  } else {
+    portraitData.value = null
+  }
+}
 
 const requestClose = () => emit('close')
-const requestSave = () => emit('save', portraitUrl.value)
+const requestSave = () => emit('save', selectedFile.value)
 </script>
diff --git a/src/views/profile/creators/BannerPicker.vue b/src/views/profile/creators/BannerPicker.vue
index 90d5f4d..fe1bd6a 100644
--- a/src/views/profile/creators/BannerPicker.vue
+++ b/src/views/profile/creators/BannerPicker.vue
@@ -36,7 +36,7 @@ const props = defineProps({
 
 const emits = defineEmits(['closeRequested'])
 
-const selectedFile = ref("")
+const selectedFile = ref({})
 const fileUrl = ref(props.creator.images.banner)
 
 const onFileSelected = () => {