Adds ChangeLogo for Creator

src/views/Profile/Dialogs/PageInformations/LogoPicker.vue

@@ -0,0 +1,75 @@
+<template>
+  <h2 class="text-2xl font-semibold mb-4 flex justify-center">
+    Logo
+  </h2>
+
+  <img
+      :src="fileUrl"
+      class="mb-5 w-full transition duration-200 ease-in-out transform"
+      alt="Aperçu de la bannière"
+  >
+
+  <v-file-input
+      v-model="selectedFile"
+      variant="outlined"
+      accept="image/*"
+      label="Votre logo"
+      @change="onFileSelected"
+  ></v-file-input>
+
+  <div class="flex justify-end space-x-4">
+    <v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
+    <v-btn color="#A6147D" @click="publish">Enregistrer</v-btn>
+  </div>
+
+</template>
+
+<script setup>
+import {ref} from 'vue'
+import {useClient} from '@/plugins/api.js'
+
+const props = defineProps({
+  creator: {
+    required: true
+  }
+})
+
+const emits = defineEmits(['closeRequested'])
+
+const selectedFile = ref("")
+const fileUrl = ref(props.creator.storedDataUrls.profilePictureUrl)
+
+const onFileSelected = () => {
+  if (selectedFile.value) {
+    const reader = new FileReader()
+    reader.onload = (event) => {
+      fileUrl.value = event.target.result
+    }
+    reader.readAsDataURL(selectedFile.value)
+  } else {
+    fileUrl.value = null
+  }
+}
+
+const client = useClient()
+const publish = async () => {
+  try {
+    const formData = new FormData();
+    formData.append('file', selectedFile.value)
+
+    await client.post(
+        `/api/creators/${props.creator.id}/logo`,
+        formData)
+
+    props.creator.storedDataUrls.profilePictureUrl = fileUrl
+    emits('closeRequested')
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const cancel = () => {
+  emits('closeRequested')
+}
+
+</script>

src/views/Profile/Dialogs/PageInformations/ProfilePicturePicker.vue

@@ -1,77 +0,0 @@
-<template>
-  <div class="p-4">
-    <h2 class="text-2xl font-semibold mb-4 flex justify-center">Choisir Image de profil</h2>
-    <div class="flex justify-center mb-5">
-    <img
-        @click="openModal('ProfilePicturePicker')"
-        class=" custom-border  active:bg-gray-600 shadow flex items-center transition duration-200 ease-in-out w-48 h-48 rounded-full"
-        src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png"
-        alt="Profile Image"
-    >
-
-    </div>
-    <v-file-input
-        variant="outlined"
-        accept="image/*"
-        label="File input"
-    ></v-file-input>
-    <div v-if="bannerUrl" class="mt-4">
-      <h3 class="text-md font-semibold mb-2">Aperçu de la bannière:</h3>
-      <img :src="bannerUrl" alt="Banner Preview" class="w-full h-auto rounded shadow" />
-    </div>
-
-    <div class="flex justify-end space-x-4">
-      <v-btn variant="plain" color="black">Annuler</v-btn>
-      <v-btn color="#A6147D">Enregistrer</v-btn>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const bannerUrl = ref(null);
-
-const onFileChange = (event) => {
-  const file = event.target.files[0];
-  if (file && file.type.startsWith('image/')) {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      bannerUrl.value = e.target.result;
-    };
-    reader.readAsDataURL(file);
-  } else {
-    alert('Veuillez sélectionner une image.');
-  }
-};
-</script>
-
-<style scoped>
-.p-4 {
-  padding: 1rem;
-}
-.mb-4 {
-  margin-bottom: 1rem;
-}
-.mt-4 {
-  margin-top: 1rem;
-}
-.text-lg {
-  font-size: 1.125rem;
-}
-.font-semibold {
-  font-weight: 600;
-}
-.w-full {
-  width: 100%;
-}
-.h-auto {
-  height: auto;
-}
-.rounded {
-  border-radius: 0.25rem;
-}
-.shadow {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-</style>

src/views/Profile/PageInformations.vue

@@ -4,7 +4,7 @@ import Socials from '@/views/Profile/Dialogs/PageInformations/Socials.vue';
 import BannerPicker from '@/views/Profile/Dialogs/PageInformations/BannerPicker.vue';
 import ColorTopBanner from '@/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue';
 import ColorBottomBanner from "@/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue";
-import ProfilePicturePicker from "@/views/Profile/Dialogs/PageInformations/ProfilePicturePicker.vue";
+import LogoPicker from "@/views/Profile/Dialogs/PageInformations/LogoPicker.vue";
 import ColorBorder from "@/views/Profile/Dialogs/PageInformations/ColorBorder.vue";
 import ColorMenu from "@/views/Profile/Dialogs/PageInformations/ColorMenu.vue";
 import {useUserStore} from "@/stores/userStore.js";
@@ -15,13 +15,13 @@ const dialog = ref(false);
 const currentComponent = ref('');
 
 const componentsMap = {
-  Socials,
   BannerPicker,
+  LogoPicker,
+  Socials,
   ColorTopBanner,
   ColorBottomBanner,
-  ProfilePicturePicker,
   ColorBorder,
-  ColorMenu
+  ColorMenu,
 };
 
 const openDialog = (component) => {
@@ -83,9 +83,9 @@ const closeDialog = () => {
 
         <button class="flex justify-center my-5">
           <img
-              @click="openDialog('ProfilePicturePicker')"
+              @click="openDialog('LogoPicker')"
               class="custom-border hover:brightness-125 active:bg-gray-600 shadow flex items-center transition duration-200 ease-in-out w-48 h-48 rounded-full"
-              src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png"
+              :src="userStore.creator.storedDataUrls.profilePictureUrl"
               alt="Profile Image"
           >
         </button>

src/views/creators/CreatorBanner.vue

@@ -43,7 +43,7 @@
           <div class="absolute lg:ml-72 transform -translate-y-1/2 lg:-translate-y-1/2 z-20">
             <img
                 class="rounded-full border-solid border-2 z-20 lg:max-w-[200px] max-w-[200px] h-auto"
-                :src="creator.storedDataUrls.profilePictureUrl || '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png'"
+                :src="creator.storedDataUrls.profilePictureUrl"
                 alt="Profile Picture"
                 :style="{ borderColor: creator.profileColors.accent || '#A30E79', height: '150px' /* Adjust the height here */ }"
             />