WIP Sync

frontend/vue-app/src/components/profile/UserProfile.vue

@@ -105,7 +105,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import EntityEditForm from '../shared/EntityEditForm.vue'
 import ModalDialog from '../shared/ModalDialog.vue'
@@ -172,52 +172,9 @@ function onAddImage({ id, file }: { id: string; file: File }) {
   } else {
     localImageFile.value = null
     initialData.value.image_id = id
-    updateAvatar(id)
   }
 }
 
-async function updateAvatar(imageId: string) {
-  errorMsg.value = ''
-  successMsg.value = ''
-  //todo update avatar loading state
-  try {
-    const res = await fetch('/api/user/avatar', {
-      method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ image_id: imageId }),
-    })
-    if (!res.ok) throw new Error('Failed to update avatar')
-    initialData.value.image_id = imageId
-    successMsg.value = 'Avatar updated!'
-  } catch {
-    //errorMsg.value = 'Failed to update avatar.'
-    //todo update avatar error handling
-    errorMsg.value = ''
-  }
-}
-
-watch(localImageFile, async (file) => {
-  if (!file) return
-  errorMsg.value = ''
-  successMsg.value = ''
-  const formData = new FormData()
-  formData.append('file', file)
-  formData.append('type', '2')
-  formData.append('permanent', 'true')
-  try {
-    const resp = await fetch('/api/image/upload', {
-      method: 'POST',
-      body: formData,
-    })
-    if (!resp.ok) throw new Error('Image upload failed')
-    const data = await resp.json()
-    initialData.value.image_id = data.id
-    await updateAvatar(data.id)
-  } catch {
-    errorMsg.value = 'Failed to upload avatar image.'
-  }
-})
-
 function handleSubmit(form: {
   image_id: string | null
   first_name: string
@@ -226,6 +183,43 @@ function handleSubmit(form: {
 }) {
   errorMsg.value = ''
   loading.value = true
+
+  // Handle image upload if local file
+  let imageId = form.image_id
+  if (imageId === 'local-upload' && localImageFile.value) {
+    const formData = new FormData()
+    formData.append('file', localImageFile.value)
+    formData.append('type', '1')
+    formData.append('permanent', 'true')
+    fetch('/api/image/upload', {
+      method: 'POST',
+      body: formData,
+    })
+      .then(async (resp) => {
+        if (!resp.ok) throw new Error('Image upload failed')
+        const data = await resp.json()
+        imageId = data.id
+        // Now update profile
+        return updateProfile({
+          ...form,
+          image_id: imageId,
+        })
+      })
+      .catch(() => {
+        errorMsg.value = 'Failed to upload image.'
+        loading.value = false
+      })
+  } else {
+    updateProfile(form)
+  }
+}
+
+async function updateProfile(form: {
+  image_id: string | null
+  first_name: string
+  last_name: string
+  email: string
+}) {
   fetch('/api/user/profile', {
     method: 'PUT',
     headers: { 'Content-Type': 'application/json' },