feat:#636 - working profile picture upload dialog

globe-and-citizen · Nov 5, 2024 · 11a8db4 · 11a8db4
1 parent cb3d249
commit 11a8db4
Showing 1 changed file with 97 additions and 60 deletions.
diff --git a/src/components/Profile/ProfileTab.vue b/src/components/Profile/ProfileTab.vue
@@ -7,48 +7,15 @@
         </template>
         <template v-else-if="user.photoURL">
           <q-img :src="user.photoURL" spinner-color="primary" spinner-size="3rem">
-            <div class="photo">
+            <div class="photo" @click="openUploadDialog">
               <q-icon class="absolute-center q-mx-auto" color="grey-6" name="upload" />
-              <q-file
-                accept="image/*"
-                borderless
-                class="absolute-full cursor-pointer"
-                dense
-                max-file-size="5242880"
-                style="height: 5rem"
-                v-model="newPhoto"
-                @rejected="onRejected"
-                @update:model-value="uploadPhoto"
-              >
-                <template v-slot:file>
-                  <q-chip class="hidden" />
-                </template>
-              </q-file>
             </div>
           </q-img>
         </template>
         <template v-else>
-          <div class="q-avatar__content flex flex-center q-mx-auto bg-primary text-white">
+          <div class="q-avatar__content flex flex-center q-mx-auto bg-primary text-white" @click="openUploadDialog">
             {{ user.displayName.charAt(0).toUpperCase() }}
           </div>
-          <div class="photo">
-            <q-icon class="absolute-center q-mx-auto" color="grey-6" name="upload" />
-            <q-file
-              accept="image/*"
-              borderless
-              class="absolute-full cursor-pointer"
-              dense
-              max-file-size="5242880"
-              style="height: 5rem"
-              v-model="newPhoto"
-              @rejected="onRejected"
-              @update:model-value="uploadPhoto"
-            >
-              <template v-slot:file>
-                <q-chip class="hidden" />
-              </template>
-            </q-file>
-          </div>
         </template>
       </q-avatar>
       <q-input
@@ -81,7 +48,7 @@
           class="self-center"
           flat
           dense
-          @click="onDeleteWalletAddressDialog()"
+          @click="onDeleteWalletAddressDialog"
         >
           <q-tooltip>Delete</q-tooltip>
         </q-btn>
@@ -98,6 +65,33 @@
 
     <q-btn class="full-width q-my-lg" color="primary" label="Save" padding="12px" rounded type="submit" />
   </q-form>
+
+  <q-dialog v-model="uploadDialog.show">
+    <q-card style="min-width: 300px">
+      <q-card-section class="q-pb-none">
+        <h6 class="q-my-sm">Upload Profile Picture</h6>
+      </q-card-section>
+
+      <q-card-section style="min-height: 200px">
+        <q-img
+          v-if="previewImage"
+          :src="previewImage"
+          class="q-mb-sm"
+          spinner-color="primary"
+          spinner-size="3rem"
+          style="max-width: 100%; max-height: 200px"
+        />
+        <q-file v-model="newPhoto" accept="image/*" label="Choose a file" @update:model-value="changePhoto()" class="q-mb-md" dense />
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn v-if="newPhoto || previewImage" color="negative" label="Delete" @click="deleteImage" flat />
+        <q-btn color="primary" label="Cancel" v-close-popup />
+        <q-btn color="primary" label="Save" v-close-popup @click="uploadPhotoToDB" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
   <q-dialog v-model="removeWalletAddressDialog.show">
     <q-card>
       <q-card-section class="q-pb-none">
@@ -108,7 +102,7 @@
       </q-card-section>
       <q-card-actions align="right">
         <q-btn color="primary" label="Cancel" v-close-popup />
-        <q-btn color="negative" data-test="confirm-remove-wallet" label="Remove" @click="onRemoveWalletAddress()" />
+        <q-btn color="negative" data-test="confirm-remove-wallet" label="Remove" v-close-popup @click="onRemoveWalletAddress" />
       </q-card-actions>
     </q-card>
   </q-dialog>
@@ -117,7 +111,7 @@
 <script setup>
 import { useErrorStore, useStorageStore, useUserStore } from 'app/src/stores'
 import { Notify, useQuasar } from 'quasar'
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, onMounted } from 'vue'
 import Web3ModalComponent from './Web3ModalComponent.vue'
 import { useWalletStore } from 'app/src/stores'
 import { customWeb3modal } from 'src/web3/walletConnect'
@@ -135,6 +129,8 @@ const user = ref(JSON.parse(JSON.stringify(userStore.getUser)))
 const addressUpdated = ref(false)
 const removeWalletAddressDialog = ref({ show: false })
 const isUpdate = ref(false)
+const uploadDialog = ref({ show: false })
+const previewImage = ref(null)
 
 watch([currentWalletAddress, user], () => {
   isUpdate.value = !!user.value.walletAddress
@@ -144,15 +140,37 @@ const walletAddress = computed(() => {
   return user.value.walletAddress || currentWalletAddress.value
 })
 
+onMounted(() => {
+  if (userStore?.getUser?.photoURL) {
+    previewImage.value = userStore.getUser.photoURL
+  }
+})
+
 function onRejected() {
   Notify.create({ type: 'negative', message: 'File size is too big. Max file size is 5MB.' })
 }
 
-async function uploadPhoto() {
-  await storageStore
-    .uploadFile(newPhoto.value, `users/${userStore.getUser.uid}`)
-    .then((url) => (user.value.photoURL = url))
-    .catch((error) => errorStore.throwError(error))
+async function uploadPhotoToDB() {
+  if (newPhoto.value) {
+    await storageStore
+      .uploadFile(newPhoto.value, `users/${userStore.getUser.uid}`)
+      .then((url) => {
+        user.value.photoURL = url
+        previewImage.value = url
+      })
+      .catch((error) => errorStore.throwError(error))
+  }
+  save()
+}
+
+function changePhoto() {
+  previewImage.value = ''
+  if (!newPhoto.value) {
+    return
+  }
+  const reader = new FileReader()
+  reader.readAsDataURL(newPhoto.value)
+  reader.onload = () => (previewImage.value = reader.result)
 }
 
 async function usernameValidator(username) {
@@ -170,24 +188,37 @@ function copyLink() {
 function switchAddressUpdated(value) {
   addressUpdated.value = value
 }
-function save() {
-  if (currentWalletAddress.value && addressUpdated.value === true) {
-    user.value.walletAddress = currentWalletAddress.value
-  }
 
-  userStore
-    .updateProfile(user.value)
-    .then(() => {
-      switchAddressUpdated(false)
-      $q.notify({ message: 'Profile successfully updated', type: 'positive' })
-    })
-    .catch((error) => errorStore.throwError(error, 'Error updating profile'))
+function openUserProfile() {
+  window.open(`${origin}fan/${user.value.username}`, '_blank', 'noopener, noreferrer')
+}
+
+const isUsernameSame = computed(() => {
+  return userStore.getUser?.username === user.value.username
+})
+
+function openUploadDialog() {
+  uploadDialog.value.show = true
+}
+
+function handleFileAdded(file) {
+  if (file && file.size <= 5 * 1024 * 1024) {
+    previewImage.value = URL.createObjectURL(file)
+  } else {
+    Notify.create({ type: 'negative', message: 'File size is too big. Max file size is 5MB.' })
+  }
 }
 
 function onDeleteWalletAddressDialog() {
   removeWalletAddressDialog.value.show = true
 }
 
+function deleteImage() {
+  previewImage.value = null
+  newPhoto.value = null
+  user.value.photoURL = ''
+}
+
 function onRemoveWalletAddress() {
   user.value.walletAddress = ''
   walletStore.getWalletInfo.wallet_address = ''
@@ -197,13 +228,19 @@ function onRemoveWalletAddress() {
   $q.notify({ message: 'Wallet address removed', type: 'negative' })
 }
 
-function openUserProfile() {
-  window.open(`${origin}fan/${user.value.username}`, '_blank', 'noopener, noreferrer')
-}
+function save() {
+  if (currentWalletAddress.value && addressUpdated.value === true) {
+    user.value.walletAddress = currentWalletAddress.value
+  }
 
-const isUsernameSame = computed(() => {
-  return userStore.getUser?.username === user.value.username
-})
+  userStore
+    .updateProfile(user.value)
+    .then(() => {
+      switchAddressUpdated(false)
+      $q.notify({ message: 'Profile successfully updated', type: 'positive' })
+    })
+    .catch((error) => errorStore.throwError(error, 'Error updating profile'))
+}
 </script>
 
 <style scoped lang="scss">