Refactored ProfilePicture

nuxt-app/components/ProfileCreationMainInfos.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import ProfilePicture from '~/components/ProfilePicture.vue'
 import { useProfileCreationStore } from '~/composables/useProfileCreationStore'
 import { computed, ref, watch } from 'vue'
 
@@ -30,6 +29,10 @@ function updateFirstName(value: string) {
 function updateLastName(value: string) {
     store.updateMainInfos({ ...mainInfos.value, lastName: value })
 }
+
+function updatePicture(file: File, previewUrl: string) {
+  store.updateProfilePicture(file, previewUrl)
+}
 </script>
 
 <template>
@@ -41,7 +44,9 @@ function updateLastName(value: string) {
         </div>
 
         <div class="intro-text mb-2 mt-5 text-base font-light text-white md:text-4xl" v-html="introText"></div>
-        <ProfilePicture class="mb-10" />
+        <div class="flex w-full flex-col items-center justify-center my-10">
+          <ProfilePictureEditable @updated-profile-picture="updatePicture" class="h-24 w-24 md:h-64 md:w-64" />
+        </div>
         <div class="flex w-full flex-col items-center justify-center">
             <InputFieldWithHeadline
                 v-model="firstName"

nuxt-app/components/ProfilePicture.vue

@@ -1,44 +1,29 @@
 <script setup lang="ts">
 import EmptyProfilePicture from '~/assets/images/profile-picture-empty.svg'
-import { useProfileCreationStore } from '~/composables/useProfileCreationStore'
-import { ref } from 'vue'
+import type { DirectusFileItem } from '~/types'
+import type { ComputedRef } from 'vue'
 
-const store = useProfileCreationStore()
-const fileInput = ref<HTMLInputElement | null>(null)
+const props = defineProps<{
+    image: DirectusFileItem | string | null
+}>()
 
-const handleFileUpload = (event: Event) => {
-    const target = event.target as HTMLInputElement
-    if (target.files && target.files.length > 0) {
-        const file = target.files[0]
-        const previewUrl = URL.createObjectURL(file)
-        store.updateProfilePicture(file, previewUrl)
-    }
-}
+const directusImage: ComputedRef<DirectusFileItem | null> = computed(() => {
+    return typeof props.image !== 'undefined' && typeof props.image !== 'string' ? props.image : null
+})
 
-const triggerFileInput = () => {
-    fileInput.value?.click()
-}
+const urlImage: ComputedRef<string | null> = computed(() => {
+    return typeof props.image === 'string' ? props.image : null
+})
 </script>
 
 <template>
-    <div class="mt-10 flex flex-col items-center justify-center">
+    <div class="flex flex-col items-center justify-center">
         <div
-            class="profile-picture flex h-24 w-24 flex-col items-center justify-center rounded-full border-4 border-white bg-gradient-to-t from-white/20 to-white/80 md:h-64 md:w-64"
+            class="profile-picture flex flex-col items-center justify-center overflow-clip rounded-full border-4 border-white bg-gradient-to-t from-white/20 to-white/80"
         >
-            <img
-                v-if="store.profilePicture.previewUrl"
-                :src="store.profilePicture.previewUrl"
-                alt="Profile Picture"
-                class="h-full w-full rounded-full object-cover"
-            />
-            <EmptyProfilePicture v-else />
+            <DirectusImage v-if="directusImage" :image="directusImage" :sizes="''" class="h-full w-full object-cover" />
+            <img v-else-if="urlImage" :src="urlImage" alt="Profile Picture" class="h-full w-full object-cover" />
+            <EmptyProfilePicture v-else class="h-full w-full" />
         </div>
-        <input ref="fileInput" type="file" accept="image/*" class="hidden" @change="handleFileUpload" />
-        <PrimaryPbButton
-            class="mt-5 w-44 border-[1.4px] text-base font-light italic tracking-normal md:w-72 md:py-2 md:text-2xl md:tracking-wide"
-            @click="triggerFileInput"
-        >
-            Profilbild hochladen
-        </PrimaryPbButton>
     </div>
 </template>

nuxt-app/components/ProfilePictureEditable.vue

@@ -0,0 +1,58 @@
+<script setup lang='ts'>
+import { type ComputedRef, ref } from 'vue';
+import type { DirectusFileItem } from '~/types';
+
+const emit = defineEmits<{
+  (e: 'updatedProfilePicture', file: File, previewUrl: string): void
+}>()
+
+const props = defineProps<{
+  image?: DirectusFileItem | null,
+}>();
+
+const fileInput = ref<HTMLInputElement | null>(null);
+const updatedImagePath = ref<string | null>(null);
+
+const currentImage: ComputedRef<DirectusFileItem | string | null> = computed(() => {
+  if (updatedImagePath.value) {
+    return updatedImagePath.value
+  }
+
+  if (props.image) {
+    return props.image
+  }
+
+  return null;
+})
+
+const handleFileSelection = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  if (target.files && target.files.length > 0) {
+    const file = target.files[0];
+    const previewUrl = URL.createObjectURL(file);
+    updatedImagePath.value = previewUrl;
+    emit('updatedProfilePicture', file, previewUrl);
+  }
+};
+
+const triggerFileInput = () => {
+  fileInput.value?.click();
+};
+</script>
+
+<template>
+  <div class='flex flex-col items-center justify-center'>
+    <div
+      class='profile-picture flex flex-col items-center justify-center rounded-full border-4 border-white bg-gradient-to-t from-white/20 to-white/80 '
+    >
+      <ProfilePicture :image='currentImage' />
+    </div>
+    <input ref='fileInput' type='file' accept='image/*' class='hidden' @change='handleFileSelection'/>
+    <PrimaryPbButton
+      class='mt-5 w-44 border-[1.4px] text-base font-light italic tracking-normal md:w-72 md:py-2 md:text-2xl md:tracking-wide'
+      @click='triggerFileInput'
+    >
+      Profilbild hochladen
+    </PrimaryPbButton>
+  </div>
+</template>

nuxt-app/pages/profiles/[slug].vue

@@ -3,18 +3,8 @@
       <article class='text-white mb-10'>
         <div class="container px-6 pt-32 md:pl-48 md:pt-40 lg:pr-8 lg:pt-56 2xl:pt-64 3xl:px-8">
           <div class='flex mb-6 items-center'>
-            <div>
-              <div
-                class="h-24 w-24 rounded-full border-4 border-white md:h-64 md:w-64"
-              >
-                <DirectusImage
-                  v-if="profile.profile_image"
-                  :image="profile.profile_image"
-                  :sizes="'md:200px'"
-                  class='h-full w-full rounded-full object-cover'
-                />
-                <EmptyProfilePicture v-else />
-              </div>
+            <div class='h-24 w-24 md:h-64 md:w-64'>
+              <ProfilePicture :image='profile.profile_image' />
             </div>
             <div class='h-full flex flex-col pl-6'>
               <h1>
@@ -58,8 +48,6 @@ import { getMetaInfo } from '~/helpers'
 import type { DirectusProfileItem } from '~/types';
 import { computed, type ComputedRef } from 'vue'
 import { generateProfile } from '~/helpers/jsonLdGenerator';
-import DirectusImage from '~/components/DirectusImage.vue';
-import EmptyProfilePicture from 'assets/images/profile-picture-empty.svg';
 
 // Add route and router
 const route = useRoute()