Adds ChangeBanner for Creators

src/stores/userStore.js

@@ -52,26 +52,5 @@ export const useUserStore = defineStore(
             }
         }
 
-        async function updateCurrentUser(userModel, profilePicture) {
-            const client = useClient()
-            await client.patch("/api/UpdateMyUser/profile", userModel)
-
-            if (typeof userModel.storedDataUrls.profilePictureUrl !== "object") {
-                const haveNewProfilePicture = profilePicture !== null && profilePicture.size !== 0;
-                const updateProfilePictureEndpoint = haveNewProfilePicture ? `/api/UpdateMyUser/profile-picture` : `/api/UpdateMyUser/profile-picture?url=${userModel.storedDataUrls.profilePictureUrl}`;
-                const response = await client.post(updateProfilePictureEndpoint, profilePicture, {
-                    headers: {
-                        'Content-Type': profilePicture?.type ?? "application/octet-stream",
-                    }
-                });
-
-                if (haveNewProfilePicture) {
-                    this.user.value.portraitUrl = response.data;
-                }
-            }
-
-            this.user.value = userModel;
-        }
-
         return {user, creator, alias, portraitUrl}
     })

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

@@ -1,73 +1,68 @@
 <template>
-  <div class="p-4">
+  <h2 class="text-2xl font-semibold mb-4 flex justify-center">
+    Bannière
+  </h2>
 
-    <h2 class="text-2xl font-semibold mb-4 flex justify-center">Sélectionne ta bannière</h2>
-    <div class="mb-5">
   <img
-        @click="openModal('BannerPicker')"
+      :src="fileUrl"
-        src="/images/hutopymedia/banners/tutorialbanner.png"
+      class="mb-5 w-full transition duration-200 ease-in-out transform"
-        class="w-full transition duration-200 ease-in-out transform"
+      alt="Aperçu de la bannière"
-        alt="Tutorial Banner"
   >
-    </div>
+
   <v-file-input
+      v-model="selectedFile"
       variant="outlined"
       accept="image/*"
-        label="File input"
+      label="Votre bannière"
+      @change="onFileSelected"
   ></v-file-input>
 
   <div class="flex justify-end space-x-4">
-      <v-btn variant="plain" color="black">Annuler</v-btn>
+    <v-btn color="black" variant="text">Annuler</v-btn>
-      <v-btn color="#A6147D">Enregistrer</v-btn>
+    <v-btn color="#A6147D" @click="publish">Enregistrer</v-btn>
-    </div>
   </div>
+
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import {ref} from 'vue'
+import {useClient} from '@/plugins/api.js'
 
-const bannerUrl = ref(null);
+const props = defineProps({
+  creator: {
+    required: true
+  }
+})
 
-const onFileChange = (event) => {
+const selectedFile = ref("")
-  const file = event.target.files[0];
+const fileUrl = ref(props.creator.storedDataUrls.bannerPictureUrl)
-  if (file && file.type.startsWith('image/')) {
+
-    const reader = new FileReader();
+const onFileSelected = () => {
-    reader.onload = (e) => {
+  if (selectedFile.value) {
-      bannerUrl.value = e.target.result;
+    const reader = new FileReader()
-    };
+    reader.onload = (event) => {
-    reader.readAsDataURL(file);
+      fileUrl.value = event.target.result
+    }
+    reader.readAsDataURL(selectedFile.value)
   } else {
-    alert('Veuillez sélectionner une image.');
+    fileUrl.value = null
+  }
 }
-};
-</script>
 
-<style scoped>
+const client = useClient()
-.p-4 {
+const publish = async () => {
-  padding: 1rem;
+  try {
+    const formData = new FormData();
+    formData.append('file', selectedFile.value)
+
+    await client.post(
+        `/api/creators/${props.creator.id}/banner`,
+        formData)
+
+    props.creator.storedDataUrls.bannerPictureUrl = fileUrl
+  } catch (error) {
+    console.error(error)
   }
-.mb-4 {
-  margin-bottom: 1rem;
 }
-.mt-4 {
+
-  margin-top: 1rem;
+</script>
-}
-.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

@@ -1,6 +1,56 @@
-<template>
+<script setup>
+import {ref} from 'vue';
+import ModalFacebook from '@/views/Profile/Dialogs/PageInformations/ModalFacebook.vue';
+import ModalInstagram from '@/views/Profile/Dialogs/PageInformations/ModalInstagram.vue';
+import ModalLinkedIn from '@/views/Profile/Dialogs/PageInformations/ModalLinkedIn.vue';
+import ModalReddit from '@/views/Profile/Dialogs/PageInformations/ModalReddit.vue';
+import ModalTikTok from '@/views/Profile/Dialogs/PageInformations/ModalTikTok.vue';
+import ModalWebsite from '@/views/Profile/Dialogs/PageInformations/ModalWebsite.vue';
+import ModalX from '@/views/Profile/Dialogs/PageInformations/ModalX.vue';
+import ModalYoutube from '@/views/Profile/Dialogs/PageInformations/ModalYoutube.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 ColorBorder from "@/views/Profile/Dialogs/PageInformations/ColorBorder.vue";
+import ColorMenu from "@/views/Profile/Dialogs/PageInformations/ColorMenu.vue";
+import {useUserStore} from "@/stores/userStore.js";
+
+const userStore = useUserStore()
+
+const dialog = ref(false);
+const currentComponent = ref('');
+
+const componentsMap = {
+  ModalFacebook,
+  ModalInstagram,
+  ModalLinkedIn,
+  ModalReddit,
+  ModalTikTok,
+  ModalWebsite,
+  ModalX,
+  ModalYoutube,
+  BannerPicker,
+  ColorTopBanner,
+  ColorBottomBanner,
+  ProfilePicturePicker,
+  ColorBorder,
+  ColorMenu
+};
+
+const openModal = (component) => {
+  currentComponent.value = componentsMap[component];
+  dialog.value = true;
+};
+
+</script>
+
+<template>
   <div class="flex flex-col items-center w-full">
-    <h1 class="uppercase pb-5 text-2xl">   <v-icon class="mr-2">mdi-file-edit-outline</v-icon> Informations de votre page</h1>
+    <h1 class="uppercase pb-5 text-2xl">
+      <v-icon class="mr-2">mdi-file-edit-outline</v-icon>
+      Informations de votre page
+    </h1>
 
     <div class="border rounded-2xl w-full max-w-[800px]">
       <div class="py-5 uppercase ml-4">Bannière et image de profil</div>
@@ -15,13 +65,12 @@
         <button>
           <img
               @click="openModal('BannerPicker')"
-              src="/images/hutopymedia/banners/tutorialbanner.png"
+              :src="userStore.creator.storedDataUrls.bannerPictureUrl"
               class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
               alt="Tutorial Banner"
           >
         </button>
 
-
         <button
             @click="openModal('ColorBottomBanner')"
             class="flex justify-end h-10 align-center bg-fuchsia-600 text-white px-5 hover:brightness-150">
@@ -86,7 +135,8 @@
         <button
             @click="openModal('ModalX')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
-          <span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/hutopymedia/icons/black/xblack.png" class="w-5 h-5" ></span>
+          <span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/hutopymedia/icons/black/xblack.png"
+                                                                class="w-5 h-5"></span>
           <span class="flex-auto text-left pr-6">X</span>
           <span class="flex-none">          
                         <v-icon>mdi-chevron-right</v-icon>
@@ -106,7 +156,8 @@
         <button
             @click="openModal('ModalTikTok')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
-          <span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/externals/tiktok-black.png" class="w-5 h-5" ></span>
+          <span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/externals/tiktok-black.png"
+                                                                class="w-5 h-5"></span>
           <span class="flex-auto text-left pr-6">TikTok</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
@@ -151,75 +202,25 @@
   <!-- Modal -->
   <v-dialog v-model="dialog" max-width="600px">
     <v-card>
-      <v-card-title>
-
-        <v-spacer></v-spacer>
-
-      </v-card-title>
       <v-card-text>
-        <component :is="currentComponent"></component>
+        <component :is="currentComponent" :creator="userStore.creator"></component>
       </v-card-text>
     </v-card>
   </v-dialog>
 
-
 </template>
 
-
-
-<script setup>
-import { ref } from 'vue';
-import ModalFacebook from '@/views/Profile/Dialogs/PageInformations/ModalFacebook.vue';
-import ModalInstagram from '@/views/Profile/Dialogs/PageInformations/ModalInstagram.vue';
-import ModalLinkedIn from '@/views/Profile/Dialogs/PageInformations/ModalLinkedIn.vue';
-import ModalReddit from '@/views/Profile/Dialogs/PageInformations/ModalReddit.vue';
-import ModalTikTok from '@/views/Profile/Dialogs/PageInformations/ModalTikTok.vue';
-import ModalWebsite from '@/views/Profile/Dialogs/PageInformations/ModalWebsite.vue';
-import ModalX from '@/views/Profile/Dialogs/PageInformations/ModalX.vue';
-import ModalYoutube from '@/views/Profile/Dialogs/PageInformations/ModalYoutube.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 ColorBorder from "@/views/Profile/Dialogs/PageInformations/ColorBorder.vue";
-import ColorMenu from "@/views/Profile/Dialogs/PageInformations/ColorMenu.vue";
-
-const dialog = ref(false);
-const currentComponent = ref('');
-
-const componentsMap = {
-  ModalFacebook,
-  ModalInstagram,
-  ModalLinkedIn,
-  ModalReddit,
-  ModalTikTok,
-  ModalWebsite,
-  ModalX,
-  ModalYoutube,
-  BannerPicker,
-  ColorTopBanner,
-  ColorBottomBanner,
-  ProfilePicturePicker,
-  ColorBorder,
-  ColorMenu
-};
-
-const openModal = (component) => {
-  currentComponent.value = componentsMap[component];
-  dialog.value = true;
-};
-
-</script>
-
 <style>
 .HoverBtn:hover {
   @apply bg-[#A6147D] text-white;
-  @apply hover:opacity-90; /* Réduire l'opacité au survol */
+  @apply hover:opacity-90;
+  /* Réduire l'opacité au survol */
 }
 
 .HoverBtnpicture:hover {
   @apply bg-[#A6147D] text-white;
-  @apply hover:opacity-90; /* Réduire l'opacité au survol */
+  @apply hover:opacity-90;
+  /* Réduire l'opacité au survol */
 }
 
 .custom-border {

src/views/contents/PostContent.vue

@@ -10,11 +10,11 @@
       <v-form>
         <v-file-input
             v-model="selectedFile"
-            label="Select Image"
+            label="Choisisez votre contenu"
             accept="image/*"
             prepend-icon="mdi-camera"
-            @change="onFileSelected">
+            @change="onFileSelected"
-        </v-file-input>
+        ></v-file-input>
         
         <v-img
             v-if="url"
@@ -66,14 +66,14 @@ const props = defineProps({
     type: String,
     required: true
   }
-});
+})
 
-const client = useClient();
+const client = useClient()
 
-const selectedFile = ref("");
+const selectedFile = ref("")
-const url = ref("");
+const url = ref("")
-const title = ref("");
+const title = ref("")
-const description = ref("");
+const description = ref("")
 
 const onFileSelected = () => {
   if (selectedFile.value) {
@@ -99,7 +99,6 @@ const publish = async () => {
   } else {
     console.error(`Failed to create content ${response.data}`)
   }
-
 }
 
 

src/views/contents/PublishContentButton.vue

@@ -29,7 +29,7 @@ async function publishPost() {
   });
 
   try {
-    const response = await client.post(
+    await client.post(
         `/api/contents/`,
         formData,
         {
@@ -38,7 +38,6 @@ async function publishPost() {
           }
         })
     
-    console.log('Files uploaded successfully:', response.data);
     closeDialog()
   } catch (error) {
     console.error(error)