Fixes some issues during edits of user profile

src/stores/userStore.js

@@ -160,6 +160,21 @@ export const useUserStore = defineStore(
             }
         }
         
+        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,
             creator,
@@ -173,6 +188,7 @@ export const useUserStore = defineStore(
             changePhone,
             changeEmail,
             changeAddress,
+            changePortrait,
             fetchCurrentUserProfile,
             fetchCurrentCreatorProfile
         }

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">
+                height="48px"/>
-          </span>
+        </span>
       </button>
 
       <button
@@ -94,6 +94,7 @@
   <!-- Modal -->
   <v-dialog v-model="dialogEditPortraitShown" max-width="600px">
     <portrait-dialog
+        :portrait-url="userStore.user.portraitUrl"
         @close="handleCloseEditPortrait"
         @save="handleSaveEditPortrait"
     ></portrait-dialog>
@@ -101,6 +102,8 @@
 
   <v-dialog v-model="dialogEditFullnameShown" max-width="600px">
     <fullname-dialog
+        :firstname="userStore.user.firstname"
+        :lastname="userStore.user.lastname"
         @close="handleCloseEditFullname"
         @save="handleSaveEditFullname"
     ></fullname-dialog>
@@ -108,6 +111,7 @@
 
   <v-dialog v-model="dialogEditAliasShown" max-width="600px">
     <alias-dialog
+        :alias="userStore.user.alias"
         @close="handleCloseEditAlias"
         @save="handleSaveEditAlias"
     ></alias-dialog>
@@ -115,6 +119,7 @@
 
   <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) {
+function handleSaveEditPortrait(portraitData) {
-  console.log(`going to save portrait: ${portraitUrl}`)
+  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>

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>

src/views/profile/account/BirthdayDialog.vue

@@ -23,7 +23,6 @@
   </v-card>
 </template>
 
-
 <script setup>
 import {ref} from 'vue';
 

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)

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"
+          accept="image/*"
-      ></v-text-field>
+          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>

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 = () => {