From 70a63d06b9d58fdd1e8ddcc2ffb379ee957c1121 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Thu, 12 Dec 2024 00:14:06 -0500
Subject: [PATCH] Fixes fixe update title, Fixe banner and logo picker, fixe
 color, fixe homepage

---
 src/views/creators/BannerActions.vue        |  2 +-
 src/views/creators/CreatorBanner.vue        |  2 +-
 src/views/creators/CreatorHome.vue          | 50 ++++++++++-------
 src/views/creators/FullscreenImage.vue      | 58 +++++++++++++++++++
 src/views/profile/creators/BannerPicker.vue | 14 ++---
 src/views/profile/creators/ChangeTitle.vue  | 62 +++++++++++++++++++++
 src/views/profile/creators/CreatorPage.vue  | 29 +++++++---
 src/views/profile/creators/LogoPicker.vue   | 17 +++---
 8 files changed, 187 insertions(+), 47 deletions(-)
 create mode 100644 src/views/creators/FullscreenImage.vue
 create mode 100644 src/views/profile/creators/ChangeTitle.vue

diff --git a/src/views/creators/BannerActions.vue b/src/views/creators/BannerActions.vue
index a5d97b0..85d9a32 100644
--- a/src/views/creators/BannerActions.vue
+++ b/src/views/creators/BannerActions.vue
@@ -178,7 +178,7 @@ onBeforeUnmount(() => {
         class="rounded-b-2xl -mt-3 h-12 px-36 flex flex-col items-center justify-center"
         :style="{ backgroundColor: brandingStore.colors.secondary, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }"
     >
-      <div class="flex justify-evenly mt-3 w-full">
+      <div class="flex justify-evenly mt-4 w-full">
         <div class="flex flex-row space-x-6 justify-center">
           <a
               v-for="socialNetwork in GetSocialsUrls()"
diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index 16ac52d..2f0ff60 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -24,7 +24,7 @@
   <div v-if="isMobile">
     <div class="shadow-lg rounded-2xl ">
       <div class="relative z-20">
-        <div class="min-h-8 shadow-2xl flex items-center px-2 py-2 borde   "
+        <div class="shadow-2xl flex items-center px-2 py-2"
              :style="{ backgroundColor: branding.colors.primary, color: branding.colors.onPrimary }">
   
           <router-link to="/">
diff --git a/src/views/creators/CreatorHome.vue b/src/views/creators/CreatorHome.vue
index f7bfe14..cbee2f1 100644
--- a/src/views/creators/CreatorHome.vue
+++ b/src/views/creators/CreatorHome.vue
@@ -22,16 +22,14 @@
         Annuler
       </button>
     </div>
-
-
-
+   
     <!-- Titre principal -->
     <div v-if="isEditMode">
       <div class="text-2xl py-2"> Titre</div>
       <textarea v-model="editableMainTitle" class="w-full p-2 border rounded-md h-24"
                 :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
     </div>
-    <h1 v-else-if="mainTitle" class="text-2xl font-bold text-center ">{{ mainTitle }}</h1>
+    <h1 v-else-if="mainTitle" class="text-4xl font-bold text-center ">{{ mainTitle }}</h1>
 
     <!-- Image principale -->
     <div class="relative flex justify-center">
@@ -40,10 +38,12 @@
         <img :src="mainImageUrl || fallbackImage"
              alt="Image principale"
              class="rounded-md max-w-full h-auto cursor-pointer"/>
-      </label>
+      </label>     
       <img v-else-if="mainImageUrl" :src="mainImageUrl"
            alt="Image principale"
-           class="rounded-md max-w-full h-auto"/>
+           class="rounded-md max-w-full h-auto cursor-pointer"
+           @click="openFullscreen(mainImageUrl)"/>
+   
       <button v-if="isEditMode" @click="deleteImage('mainImageUrl')"
               class="absolute top-10 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
         X
@@ -117,8 +117,8 @@
     </h2>
 
     <!-- 4 images côte à côte -->
-
-    <div>
+    <FullscreenImage ref="fullscreenImage" :image-url="currentImage" />      
+      <div>
       <div v-if="isEditMode" class="text-2xl py-2">Images</div>
       <div class="grid grid-cols-1 gap-4 md:grid-cols-4">
         <!-- Première image -->
@@ -129,9 +129,9 @@
                  alt="Image 1"
                  class="rounded-md max-w-full h-auto cursor-pointer" />
           </label>
-          <img v-else-if="image1Url" :src="image1Url"
-               alt="Image 1"
-               class="rounded-md max-w-full h-auto" />
+          <div v-if="image1Url" @click="openFullscreen(image1Url)">
+            <img :src="image1Url" alt="Image 1" class="rounded-md max-w-full h-auto cursor-pointer" />
+          </div>
           <button v-if="isEditMode" @click="deleteImage('image1Url')"
                   class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
             X
@@ -146,9 +146,9 @@
                  alt="Image 2"
                  class="rounded-md max-w-full h-auto cursor-pointer" />
           </label>
-          <img v-else-if="image2Url" :src="image2Url"
-               alt="Image 2"
-               class="rounded-md max-w-full h-auto" />
+          <div v-if="image2Url" @click="openFullscreen(image2Url)">
+            <img :src="image2Url" alt="Image 2" class="rounded-md max-w-full h-auto cursor-pointer" />
+          </div>
           <button v-if="isEditMode" @click="deleteImage('image2Url')"
                   class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
             X
@@ -163,9 +163,9 @@
                  alt="Image 3"
                  class="rounded-md max-w-full h-auto cursor-pointer" />
           </label>
-          <img v-else-if="image3Url" :src="image3Url"
-               alt="Image 3"
-               class="rounded-md max-w-full h-auto" />
+          <div v-if="image3Url" @click="openFullscreen(image3Url)">
+            <img :src="image3Url" alt="Image 3" class="rounded-md max-w-full h-auto cursor-pointer" />
+          </div>
           <button v-if="isEditMode" @click="deleteImage('image3Url')"
                   class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
             X
@@ -180,9 +180,9 @@
                  alt="Image 4"
                  class="rounded-md max-w-full h-auto cursor-pointer" />
           </label>
-          <img v-else-if="image4Url" :src="image4Url"
-               alt="Image 4"
-               class="rounded-md max-w-full h-auto" />
+          <div v-if="image4Url" @click="openFullscreen(image4Url)">
+            <img :src="image4Url" alt="Image 4" class="rounded-md max-w-full h-auto cursor-pointer" />
+          </div>
           <button v-if="isEditMode" @click="deleteImage('image4Url')"
                   class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
             X
@@ -301,12 +301,12 @@
 <script setup>
 import {ref, onMounted, computed} from "vue";
 import { useClient } from "@/plugins/api.js";
-
 import {useBrandingStore} from "@/stores/brandingStore.js";
 import {useAuthStore} from "@/stores/authStore.js";
 import { useCreatorProfileStore } from "@/stores/creatorProfileStore.js";
 import { useDisplay } from "vuetify";
 import { watch} from "vue";
+import FullscreenImage from "@/views/creators/FullscreenImage.vue";
 
 const { smAndDown } = useDisplay();
 const isMobileView = ref(smAndDown.value);
@@ -322,6 +322,14 @@ const isEditMode = ref(false);
 
 const authStore = useAuthStore();
 
+const currentImage = ref("");
+const fullscreenImage = ref(null);
+
+function openFullscreen(imageUrl) {
+  currentImage.value = imageUrl;
+  fullscreenImage.value.open();
+}
+
 watch(smAndDown, (newVal) => {
   isMobileView.value = newVal;
 });
diff --git a/src/views/creators/FullscreenImage.vue b/src/views/creators/FullscreenImage.vue
new file mode 100644
index 0000000..d74fd5b
--- /dev/null
+++ b/src/views/creators/FullscreenImage.vue
@@ -0,0 +1,58 @@
+<template>
+  <v-dialog v-model="isVisible" fullscreen hide-overlay transition="fade-transition">
+    <v-card class="pa-0" :style="{ backgroundColor: brandingStore.colors.background, color: brandingStore.colors.onBackground }">
+      <v-btn
+          class="close-button"
+          icon
+          :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
+          @click="close"
+      >
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+      <v-img :src="imageUrl" class="fullscreen-image"></v-img>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+import {ref} from "vue";
+import {useBrandingStore} from "@/stores/brandingStore.js";
+
+const brandingStore = useBrandingStore();
+
+const props = defineProps({
+  imageUrl: {
+    type: String,
+    required: true,
+  },
+});
+
+const isVisible = ref(false);
+
+function open() {
+  isVisible.value = true;
+}
+
+function close() {
+  isVisible.value = false;
+}
+
+defineExpose({
+  open,
+});
+</script>
+
+<style scoped>
+.fullscreen-image {
+  height: 100vh;
+  width: 100%;
+  object-fit: contain;
+}
+
+.close-button {
+  position: absolute;
+  top: 50px;
+  right: 50px;
+  z-index: 10;
+}
+</style>
diff --git a/src/views/profile/creators/BannerPicker.vue b/src/views/profile/creators/BannerPicker.vue
index fe1bd6a..ba19884 100644
--- a/src/views/profile/creators/BannerPicker.vue
+++ b/src/views/profile/creators/BannerPicker.vue
@@ -4,7 +4,7 @@
   </h2>
 
   <img
-      :src="fileUrl"
+      :src="fileUrl || fallbackUrl"
       class="mb-5 w-full transition duration-200 ease-in-out transform"
       alt="Aperçu de la bannière"
   >
@@ -21,12 +21,11 @@
     <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'
+import { ref } from 'vue'
+import { useClient } from '@/plugins/api.js'
 
 const props = defineProps({
   creator: {
@@ -38,6 +37,7 @@ const emits = defineEmits(['closeRequested'])
 
 const selectedFile = ref({})
 const fileUrl = ref(props.creator.images.banner)
+const fallbackUrl = '/images/hutopymedia/banners/hutopyul.png' 
 
 const onFileSelected = () => {
   if (selectedFile.value) {
@@ -54,12 +54,13 @@ const onFileSelected = () => {
 const client = useClient()
 const publish = async () => {
   try {
-    const formData = new FormData();
+    const formData = new FormData()
     formData.append('file', selectedFile.value)
 
     await client.post(
         `/api/creators/${props.creator.id}/banner`,
-        formData)
+        formData
+    )
 
     props.creator.images.banner = fileUrl
     emits('closeRequested')
@@ -71,5 +72,4 @@ const publish = async () => {
 const cancel = () => {
   emits('closeRequested')
 }
-
 </script>
diff --git a/src/views/profile/creators/ChangeTitle.vue b/src/views/profile/creators/ChangeTitle.vue
new file mode 100644
index 0000000..0ad2485
--- /dev/null
+++ b/src/views/profile/creators/ChangeTitle.vue
@@ -0,0 +1,62 @@
+<script setup>
+import { ref } from 'vue';
+import { useClient } from '@/plugins/api.js';
+
+const props = defineProps({
+  creator: {
+    required: true
+  }
+});
+
+const emits = defineEmits(['closeRequested']);
+
+const title = ref(props.creator.title);
+
+const client = useClient();
+
+const save = async () => {
+  try {
+    await client.post(
+        `/api/creators/${props.creator.id}/title`,
+        {
+          title: title.value
+        }
+    );
+
+    props.creator.title = title.value;
+    emits('closeRequested');
+  } catch (error) {
+    console.error('Error saving title:', error);
+  }
+};
+
+const cancel = () => {
+  emits('closeRequested');
+};
+</script>
+
+<template>
+  <div class="pb-5 text-2xl">Modifier le Titre</div>
+  <div class="flex flex-col space-y-4">
+    <v-text-field
+        variant="outlined"
+        v-model="title"
+        label="Titre"
+        outlined
+    ></v-text-field>
+
+    <div class="flex justify-end space-x-4">
+      <v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
+      <v-btn color="#A6147D" @click="save">Enregistrer</v-btn>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.flex {
+  display: flex;
+}
+.space-y-4 > * + * {
+  margin-top: 1rem;
+}
+</style>
diff --git a/src/views/profile/creators/CreatorPage.vue b/src/views/profile/creators/CreatorPage.vue
index 47b779f..18f29ed 100644
--- a/src/views/profile/creators/CreatorPage.vue
+++ b/src/views/profile/creators/CreatorPage.vue
@@ -9,6 +9,7 @@ import CreateCreator from "./CreateCreator.vue";
 import {useClient} from "@/plugins/api.js";
 import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
 import {useUserProfileStore} from "@/stores/userProfileStore.js";
+import ChangeTitle from "@/views/profile/creators/ChangeTitle.vue";
 
 const creatorProfileStore = useCreatorProfileStore()
 const imageBanner = computed(() => creatorProfileStore.creator.images.banner || '/images/placeholders/banner.png')
@@ -22,7 +23,8 @@ const componentsMap = {
   LogoPicker,
   Socials,
   ColorsPicker,
-  CreateCreator
+  CreateCreator,
+  ChangeTitle
 };
 
 async function requestAccept(creatorName) {
@@ -100,7 +102,17 @@ const closeDialog = () => {
         </div>
         <div class="flex flex-col w-full">
           <button
-
+              @click="openDialog('ChangeTitle')"
+              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">{{ $t('creatorinfopage.title') }}</span>
+            <span class="flex-auto text-left pr-6 capitalize">{{ creatorProfileStore.creator.title }}</span>
+            <span class="flex-none">  
+    <v-icon>mdi-chevron-right</v-icon>
+  </span>
+          </button>
+        </div>
+        <div class="flex flex-col w-full">
+          <button
               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 rounded-b-2xl">
             <span class="flex-none pa-2 min-w-32 text-left">Stripe Account</span>
             <span class="flex-auto text-left pr-6 capitalize">asdasd038338</span>
@@ -116,16 +128,15 @@ const closeDialog = () => {
         <div class="flex flex-col w-full gap-4">
 
 
+          <button
+              @click="openDialog('ColorsPicker')"
+              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">
 
-            <button
-                @click="openDialog('ColorsPicker')"
-                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-auto text-left pr-6 capitalize">  Choisissez votre palette de couleurs. </span>
-              <span class="flex-none">  
+            <span class="flex-auto text-left pr-6 capitalize">  Choisissez votre palette de couleurs. </span>
+            <span class="flex-none">  
             <v-icon>mdi-chevron-right</v-icon>
           </span>
-            </button>    
+          </button>
 
           <button>
             <img
diff --git a/src/views/profile/creators/LogoPicker.vue b/src/views/profile/creators/LogoPicker.vue
index a366bd6..441443c 100644
--- a/src/views/profile/creators/LogoPicker.vue
+++ b/src/views/profile/creators/LogoPicker.vue
@@ -5,9 +5,9 @@
 
   <div class="flex justify-center mb-5">
     <img
-        :src="fileUrl"
+        :src="fileUrl || fallbackUrl"
         class="w-full transition duration-200 ease-in-out transform max-w-[400px]"
-        alt="Aperçu de la bannière"
+        alt="Aperçu du logo"
     />
   </div>
 
@@ -23,12 +23,12 @@
     <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'
+import { ref } from 'vue'
+import { useClient } from '@/plugins/api.js'
 
 const props = defineProps({
   creator: {
@@ -40,6 +40,7 @@ const emits = defineEmits(['closeRequested'])
 
 const selectedFile = ref("")
 const fileUrl = ref(props.creator.images.logo)
+const fallbackUrl = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png' // Chemin de votre image de secours
 
 const onFileSelected = () => {
   if (selectedFile.value) {
@@ -63,8 +64,8 @@ const publish = async () => {
         `/api/creators/${props.creator.id}/logo`,
         formData)
 
-    props.creator.images.logoUrl = fileUrl
-    emits('closeRequested')
+    props.creator.images.logo = fileUrl.value;
+    emits('closeRequested');
   } catch (error) {
     console.error(error)
   }
@@ -73,5 +74,5 @@ const publish = async () => {
 const cancel = () => {
   emits('closeRequested')
 }
-
 </script>
+