From 672c9d89724ab5bb54129a7f71148f14b9e03970 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Malin=20Haugland=20H=C3=B8li?= <malin.holi@gmail.com>
Date: Fri, 3 May 2024 13:46:29 +0200
Subject: [PATCH] refactor: :lipstick: Update styles and removed uploading
profile picture for avatars
---
src/components/ModalEditAvatar.vue | 29 ++++++++---------------------
src/stores/userStore.ts | 11 ++++++-----
src/views/ConfigBiometricView.vue | 6 +++---
src/views/UserChallengesView.vue | 4 ++--
4 files changed, 19 insertions(+), 31 deletions(-)
diff --git a/src/components/ModalEditAvatar.vue b/src/components/ModalEditAvatar.vue
index 459190f..0b0ebcf 100644
--- a/src/components/ModalEditAvatar.vue
+++ b/src/components/ModalEditAvatar.vue
@@ -22,13 +22,11 @@
</div>
<button @click="cycleArray('next')">â–¶</button>
</div>
- <div class="flex flex-row items-center gap-4 mx-auto">
- <button @click="saveAvatar" class="primary save-button basis-1/2">Lagre</button>
- <button @click="openFileExplorer" class="primary basis-1/2">
- Upload New Avatar
- </button>
+ <div class="flex flex-row items-center justify-center mx-auto">
+ <button @click="saveAvatar" class="primary save-button">Lagre</button>
+
</div>
- <input type="file" ref="fileInput" @change="handleFileUpload" hidden />
+
</div>
</div>
</template>
@@ -77,8 +75,7 @@ const openModal = () => {
const urlProfilePicture = userStore.profilePicture
// Check if a profile picture URL exists and append it to the avatars list
const img = localStorage.getItem('profilePicture') as string
- console.log(state.avatars)
- console.log(img)
+
if (state.avatars.includes(state.selectedPublicImg) || state.avatars.includes(img)) {
// Remove the public asset from the list if it's already selected
state.avatars = state.avatars.filter((avatar) => avatar !== state.selectedPublicImg)
@@ -113,23 +110,13 @@ const cycleArray = (direction: string) => {
}
}
-const handleFileUpload = async (event: any) => {
- const input = event.target
- if (input.files && input.files[0]) {
- const file = input.files[0]
- // Clear any existing temporary blob URLs
- state.avatars = state.avatars.filter((avatar) => !avatar.startsWith('blob:'))
- state.newFile = file // Save the new file object for later upload
- state.avatars.push(URL.createObjectURL(file)) // Add the blob URL for preview
- state.currentAvatarIndex = state.avatars.length - 1 // Set this new avatar as current
- }
-}
+
const saveAvatar = async () => {
- if (state.newFile && currentAvatar.value.startsWith('blob:')) {
+ if ( currentAvatar.value.startsWith('blob:')) {
// If there's a new file selected, upload it
const formData = new FormData()
- formData.append('file', state.newFile)
+ formData.append('file', currentAvatar.value)
await userStore.uploadProfilePicture(formData)
} else if (currentAvatar.value.startsWith('/')) {
// If it's a public asset, fetch it as a blob and upload
diff --git a/src/stores/userStore.ts b/src/stores/userStore.ts
index 5394456..369745b 100644
--- a/src/stores/userStore.ts
+++ b/src/stores/userStore.ts
@@ -266,13 +266,14 @@ export const useUserStore = defineStore('user', () => {
if (imageResponse.data.type.startsWith('image/')) {
profilePicture.value = URL.createObjectURL(imageResponse.data);
console.log('Profile picture retrieved:', profilePicture.value);
- } else {
- throw new Error('Not a valid image file');
}
} catch (error) {
- console.error('Failed to retrieve profile picture:', error);
- // Set to default image or keep it blank
- profilePicture.value = ''; // Assuming you want to keep it blank as per your initial setup
+ if (axios.isAxiosError(error) && error.response && error.response.status === 400) {
+ console.error('No profile picture found:', error.response.data);
+ } else {
+ console.error('Error fetching profile picture:', error);
+ }
+ profilePicture.value = '';
}
}
diff --git a/src/views/ConfigBiometricView.vue b/src/views/ConfigBiometricView.vue
index 0a6647a..44bdf9d 100644
--- a/src/views/ConfigBiometricView.vue
+++ b/src/views/ConfigBiometricView.vue
@@ -6,9 +6,9 @@
<img alt="bioAuthTouch" class="w-40 h-40" src="@/assets/bioAuthTouch.png" />
<img alt="bioAuthFace" class="w-40 h-40" src="@/assets/bioAuthFace.png" />
</div>
- <div class="flex flex-col gap-5">
- <button @click="bioRegister">Legg til nå!</button>
- <button @click="router.push({ name: 'configurations1' })">Jeg gjør det senere</button>
+ <div class="flex flex-col gap-6">
+ <button class="font-bold mt-10" @click="bioRegister">Legg til nå!</button>
+ <button class="font-bold" @click="router.push({ name: 'configurations1' })">Jeg gjør det senere</button>
</div>
</div>
</template>
diff --git a/src/views/UserChallengesView.vue b/src/views/UserChallengesView.vue
index 652538a..a14c3d3 100644
--- a/src/views/UserChallengesView.vue
+++ b/src/views/UserChallengesView.vue
@@ -62,7 +62,7 @@ onMounted(async () => {
:key="challenge.id"
:challenge-instance="challenge"
/>
- <p v-if="!activeChallenges">Du har ingen aktive spareutfordringer😢</p>
+ <p v-if="activeChallenges.length == 0">Du har ingen aktive spareutfordringer😢</p>
</div>
<PageControl
:currentPage="currentPageActive"
@@ -78,7 +78,7 @@ onMounted(async () => {
:key="challenge.id"
:challenge-instance="challenge"
/>
- <p v-if="!completedChallenges">Du har ingen fullførte spareutfordringer😢</p>
+ <p v-if="completedChallenges.length == 0">Du har ingen fullførte spareutfordringer😢</p>
</div>
<PageControl
:currentPage="currentPageCompleted"
--
GitLab