Adds ChangeBanner for Creators

2024-08-05 16:34:09 -04:00
parent 743bfea56e
commit bd30b58463
5 changed files with 140 additions and 167 deletions
--- a/src/stores/userStore.js
+++ b/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}
    })
--- a/src/views/Profile/Dialogs/PageInformations/BannerPicker.vue
+++ b/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="/images/hutopymedia/banners/tutorialbanner.png"
-        class="w-full transition duration-200 ease-in-out transform"
-        alt="Tutorial Banner"
-    >
-    </div>
-    <v-file-input
-        variant="outlined"
-        accept="image/*"
-        label="File input"
-    ></v-file-input>
+  <img
+      :src="fileUrl"
+      class="mb-5 w-full transition duration-200 ease-in-out transform"
+      alt="Aperçu de la bannière"
+  >

-    <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>
+  <v-file-input
+      v-model="selectedFile"
+      variant="outlined"
+      accept="image/*"
+      label="Votre bannière"
+      @change="onFileSelected"
+  ></v-file-input>
+
+  <div class="flex justify-end space-x-4">
+    <v-btn color="black" variant="text">Annuler</v-btn>
+    <v-btn color="#A6147D" @click="publish">Enregistrer</v-btn>
  </div>
+
 </template>

 <script setup>
-import { ref } from 'vue';
+import {ref} from 'vue'
+import {useClient} from '@/plugins/api.js'

-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.');
+const props = defineProps({
+  creator: {
+    required: true
  }
-};
-</script>
+})

-<style scoped>
-.p-4 {
-  padding: 1rem;
+const selectedFile = ref("")
+const fileUrl = ref(props.creator.storedDataUrls.bannerPictureUrl)
+
+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
+  }
 }
-.mb-4 {
-  margin-bottom: 1rem;
+
+const client = useClient()
+const publish = async () => {
+  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)
+  }
 }
-.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>
+
+</script>
--- a/src/views/Profile/PageInformations.vue
+++ b/src/views/Profile/PageInformations.vue
@@ -1,27 +1,76 @@
-<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>
      <div class="flex flex-col w-full">

        <button
-           @click="openModal('ColorTopBanner')"
+            @click="openModal('ColorTopBanner')"
            class="flex justify-end h-10 align-center bg-fuchsia-800 text-white px-5 hover:brightness-150">
          <v-icon>mdi-eyedropper-variant</v-icon>
        </button>

-        <button >
+        <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,10 +156,11 @@
        <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>
+            <v-icon>mdi-chevron-right</v-icon>
          </span>
        </button>

@@ -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 {
--- a/src/views/contents/PostContent.vue
+++ b/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">
-        </v-file-input>
+            @change="onFileSelected"
+        ></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 url = ref("");
-const title = ref("");
-const description = ref("");
+const selectedFile = ref("")
+const url = ref("")
+const title = 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}`)
  }
-
 }


--- a/src/views/contents/PublishContentButton.vue
+++ b/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)