From b347fac69a94b14cea3efd92a73089325f8f228a Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad0@hotmail.com>
Date: Tue, 6 Aug 2024 02:48:39 -0400
Subject: [PATCH] Adds ChangeColors for Creators

---
 .../Dialogs/PageInformations/ColorBorder.vue  |  23 ---
 .../PageInformations/ColorBottomBanner.vue    |  26 ---
 .../Dialogs/PageInformations/ColorMenu.vue    |  23 ---
 .../PageInformations/ColorTopBanner.vue       |  26 ---
 .../Dialogs/PageInformations/ColorsPicker.vue | 161 ++++++++++++++++++
 src/views/Profile/PageInformations.vue        |  49 +++---
 src/views/creators/CreatorBanner.vue          |   7 +-
 7 files changed, 188 insertions(+), 127 deletions(-)
 delete mode 100644 src/views/Profile/Dialogs/PageInformations/ColorBorder.vue
 delete mode 100644 src/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue
 delete mode 100644 src/views/Profile/Dialogs/PageInformations/ColorMenu.vue
 delete mode 100644 src/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue
 create mode 100644 src/views/Profile/Dialogs/PageInformations/ColorsPicker.vue

diff --git a/src/views/Profile/Dialogs/PageInformations/ColorBorder.vue b/src/views/Profile/Dialogs/PageInformations/ColorBorder.vue
deleted file mode 100644
index ca34005..0000000
--- a/src/views/Profile/Dialogs/PageInformations/ColorBorder.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div>
-    <h2 class="title font-semibold  text-2xl">Couleur contour</h2>
-
-    <div  class="flex justify-center"><v-color-picker></v-color-picker></div>
-
-  </div>
-
-  <div class="flex justify-end space-x-4 mt-5">
-    <v-btn variant="plain" color="black">Annuler</v-btn>
-    <v-btn color="#A6147D">Enregistrer</v-btn>
-  </div>
-</template>
-
-<script setup>
-</script>
-
-<style scoped>
-.title {
-  text-align: center;
-  margin-bottom: 16px;
-}
-</style>
diff --git a/src/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue b/src/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue
deleted file mode 100644
index fbdaf3d..0000000
--- a/src/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <div>
-    <h2 class="title font-semibold  text-2xl">Couleur de la bannière inférieur</h2>
-
-    <div  class="flex justify-center"><v-color-picker></v-color-picker></div>
-
-  </div>
-
-  <div class="flex justify-end space-x-4 mt-5">
-    <v-btn variant="plain" color="black">Annuler</v-btn>
-    <v-btn color="#A6147D">Enregistrer</v-btn>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const color = ref('#FF0000');
-</script>
-
-<style scoped>
-.title {
-  text-align: center;
-  margin-bottom: 16px;
-}
-</style>
diff --git a/src/views/Profile/Dialogs/PageInformations/ColorMenu.vue b/src/views/Profile/Dialogs/PageInformations/ColorMenu.vue
deleted file mode 100644
index 26041c3..0000000
--- a/src/views/Profile/Dialogs/PageInformations/ColorMenu.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div>
-    <h2 class="title font-semibold  text-2xl">Couleur des Menus</h2>
-
-    <div  class="flex justify-center"><v-color-picker></v-color-picker></div>
-
-  </div>
-
-  <div class="flex justify-end space-x-4 mt-5">
-    <v-btn variant="plain" color="black">Annuler</v-btn>
-    <v-btn color="#A6147D">Enregistrer</v-btn>
-  </div>
-</template>
-
-<script setup>
-</script>
-
-<style scoped>
-.title {
-  text-align: center;
-  margin-bottom: 16px;
-}
-</style>
diff --git a/src/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue b/src/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue
deleted file mode 100644
index d7288c8..0000000
--- a/src/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <div>
-    <h2 class="title font-semibold  text-2xl">Couleur de la bannière supérieure</h2>
-    
-    <div  class="flex justify-center"><v-color-picker></v-color-picker></div>
-    
-  </div>
-
-  <div class="flex justify-end space-x-4 mt-5">
-    <v-btn variant="plain" color="black">Annuler</v-btn>
-    <v-btn color="#A6147D">Enregistrer</v-btn>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const color = ref('#FF0000');
-</script>
-
-<style scoped>
-.title {
-  text-align: center;
-  margin-bottom: 16px;
-}
-</style>
diff --git a/src/views/Profile/Dialogs/PageInformations/ColorsPicker.vue b/src/views/Profile/Dialogs/PageInformations/ColorsPicker.vue
new file mode 100644
index 0000000..c2f6937
--- /dev/null
+++ b/src/views/Profile/Dialogs/PageInformations/ColorsPicker.vue
@@ -0,0 +1,161 @@
+<script setup>
+import {ref, computed} from 'vue';
+import {useClient} from "@/plugins/api.js";
+
+const props = defineProps({
+  creator: {
+    required: true
+  },
+  colorName: {
+    type: String,
+    default: 'bannerTop'
+  }
+});
+
+const emits = defineEmits(['closeRequested']);
+
+const bannerTopColor = ref(props.creator.profileColors.bannerTop);
+const bannerBottomColor = ref(props.creator.profileColors.bannerBottom);
+const accentColor = ref(props.creator.profileColors.accent);
+const menuColor = ref(props.creator.profileColors.menu);
+
+const selectedColorName = ref(props.colorName);
+const selectedColor = computed({
+  get() {
+    switch (selectedColorName.value) {
+      case 'bannerTop':
+        return bannerTopColor.value;
+      case 'bannerBottom':
+        return bannerBottomColor.value;
+      case 'accent':
+        return accentColor.value;
+      case 'menu':
+        return menuColor.value;
+      default:
+        return bannerTopColor.value;
+    }
+  },
+  set(value) {
+    switch (selectedColorName.value) {
+      case 'bannerTop':
+        bannerTopColor.value = value;
+        break;
+      case 'bannerBottom':
+        bannerBottomColor.value = value;
+        break;
+      case 'accent':
+        accentColor.value = value;
+        break;
+      case 'menu':
+        menuColor.value = value;
+        break;
+    }
+  }
+});
+
+const selectColor = (colorName) => {
+  selectedColorName.value = colorName;
+};
+
+const client = useClient();
+const save = async () => {
+  try {
+    await client.post(
+        `/api/creators/${props.creator.id}/colors`,
+        {
+          "bannerTop": bannerTopColor.value || null,
+          "bannerBottom": bannerBottomColor.value || null,
+          "accent": accentColor.value || null,
+          "menu": menuColor.value || null
+        });
+
+    props.creator.profileColors.bannerTop = bannerTopColor.value;
+    props.creator.profileColors.bannerBottom = bannerBottomColor.value;
+    props.creator.profileColors.accent = accentColor.value;
+    props.creator.profileColors.menu = menuColor.value;
+
+    emits('closeRequested');
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+const cancel = () => {
+  emits('closeRequested');
+};
+</script>
+
+<template>
+  <h2 class="text-2xl font-semibold mb-4 flex justify-center">
+    Palette de Couleurs
+  </h2>
+
+  <div class="flex gap-6 justify-center items-start mt-5">
+    
+    <div class="grid grid-cols-2 grid-rows-2 gap-4">
+      <div
+          class="color-square"
+          :class="{ selected: selectedColorName === 'bannerTop' }"
+          :style="{ backgroundColor: bannerTopColor }"
+          @click="selectColor('bannerTop')"
+      >
+        <span class="color-name">Haut Banniere</span>
+      </div>
+
+      <div
+          class="color-square"
+          :class="{ selected: selectedColorName === 'bannerBottom' }"
+          :style="{ backgroundColor: bannerBottomColor }"
+          @click="selectColor('bannerBottom')"
+      >
+        <span class="color-name">Bas Banniere</span>
+      </div>
+
+      <div
+          class="color-square"
+          :class="{ selected: selectedColorName === 'accent' }"
+          :style="{ backgroundColor: accentColor }"
+          @click="selectColor('accent')"
+      >
+        <span class="color-name">Accent</span>
+      </div>
+
+      <div
+          class="color-square"
+          :class="{ selected: selectedColorName === 'menu' }"
+          :style="{ backgroundColor: menuColor }"
+          @click="selectColor('menu')"
+      >
+        <span class="color-name">Menu</span>
+      </div>
+    </div>
+    
+    <div class="w-px bg-gray-300 h-full"></div>
+    
+    <div class="flex-grow">
+      <v-color-picker v-model="selectedColor"></v-color-picker>
+    </div>
+  </div>
+
+  <div class="flex justify-end space-x-4 mt-4">
+    <v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
+    <v-btn color="#A6147D" @click="save">Enregistrer</v-btn>
+  </div>
+</template>
+
+<style scoped>
+.color-square {
+  @apply w-[150px] h-[150px];
+  @apply flex rounded-md cursor-pointer relative;
+  @apply items-center justify-center;
+  @apply font-bold text-white;
+}
+
+.color-square.selected {
+  @apply border-4 border-solid border-[crimson];
+}
+
+.color-name {
+  text-align: center;
+}
+</style>
diff --git a/src/views/Profile/PageInformations.vue b/src/views/Profile/PageInformations.vue
index c5e67f0..9607fae 100644
--- a/src/views/Profile/PageInformations.vue
+++ b/src/views/Profile/PageInformations.vue
@@ -1,32 +1,27 @@
 <script setup>
-import {ref} from 'vue';
-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 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";
+import {ref} from 'vue'
+import Socials from '@/views/Profile/Dialogs/PageInformations/Socials.vue'
+import BannerPicker from '@/views/Profile/Dialogs/PageInformations/BannerPicker.vue'
+import ColorsPicker from '@/views/Profile/Dialogs/PageInformations/ColorsPicker.vue'
+import LogoPicker from "@/views/Profile/Dialogs/PageInformations/LogoPicker.vue"
+import {useUserStore} from "@/stores/userStore.js"
 
 const userStore = useUserStore()
 
 const dialog = ref(false);
-const currentComponent = ref('');
+const currentComponent = ref('')
+const colorToEdit = ref(null)
 
 const componentsMap = {
   BannerPicker,
   LogoPicker,
   Socials,
-  ColorTopBanner,
-  ColorBottomBanner,
-  ColorBorder,
-  ColorMenu,
+  ColorsPicker
 };
 
-const openDialog = (component) => {
-  console.dir(userStore.creator)
+const openDialog = (component, colorName = null) => {
   currentComponent.value = componentsMap[component]
+  colorToEdit.value = colorName
   dialog.value = true
 }
 
@@ -39,11 +34,12 @@ const closeDialog = () => {
 
 <template>
 
-  <v-dialog v-model="dialog" max-width="600px">
+  <v-dialog v-model="dialog" max-width="800px">
     <v-card>
       <v-card-text>
         <component :is="currentComponent"
                    :creator="userStore.creator"
+                   :colorName="colorToEdit"
                    @closeRequested="closeDialog()"
         ></component>
       </v-card-text>
@@ -61,8 +57,10 @@ const closeDialog = () => {
       <div class="flex flex-col w-full">
 
         <button
-            @click="openDialog('ColorTopBanner')"
-            class="flex justify-end h-10 align-center bg-fuchsia-800 text-white px-5 hover:brightness-150">
+            @click="openDialog('ColorsPicker', 'bannerTop')"
+            class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150"
+            :style="{ backgroundColor: userStore.creator.profileColors.bannerTop }"
+        >
           <v-icon>mdi-eyedropper-variant</v-icon>
         </button>
 
@@ -76,8 +74,10 @@ const closeDialog = () => {
         </button>
 
         <button
-            @click="openDialog('ColorBottomBanner')"
-            class="flex justify-end h-10 align-center bg-fuchsia-600 text-white px-5 hover:brightness-150">
+            @click="openDialog('ColorsPicker', 'bannerBottom')"
+            class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150"
+            :style="{ backgroundColor: userStore.creator.profileColors.bannerBottom }"
+        >
           <v-icon>mdi-eyedropper-variant</v-icon>
         </button>
 
@@ -85,13 +85,14 @@ const closeDialog = () => {
           <img
               @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"
+              :style="{ borderColor: userStore.creator.profileColors.accent }"
               :src="userStore.creator.images.logo"
               alt="Profile Image"
           >
         </button>
 
         <button
-            @click="openDialog('ColorBorder')"
+            @click="openDialog('ColorsPicker', 'accent')"
             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="pa-2 min-w-32 text-left"><v-icon>mdi-circle-outline</v-icon></span>
           <span class="flex-auto text-left pr-6">Couleur du contour de la photo de profil.</span>
@@ -101,7 +102,7 @@ const closeDialog = () => {
         </button>
 
         <button
-            @click="openDialog('ColorMenu')"
+            @click="openDialog('ColorsPicker', 'menu')"
             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"> <v-icon>mdi-menu</v-icon></span>
           <span class="flex-auto text-left pr-6">couleur des entêtes de menus</span>
@@ -215,7 +216,7 @@ const closeDialog = () => {
 }
 
 .custom-border {
-  border: 3px solid #A6147D;
+  border: 3px solid;
 }
 
 </style>
diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index f744ee9..7ca98e2 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -53,10 +53,7 @@
         <!-- User Info -->
         <div class="mt-2 flex flex-col items-center lg:items-start lg:ml-64">
           <div class="text-3xl font-bold text-center lg:text-left md:mt-24 lg:mt-0 sm:mt-24 mt-24 text-white cap ">
-            <p class="capitalize">{{creator.name}}</p>
-          </div>
-          <div class="text-2xl text-center lg:text-left">
-            <p :style="{ color: creator.profileColors.accent }">{{ creator.occupation }}</p>
+            <p class="capitalize">{{ creator.name }}</p>
           </div>
           <div class="text-lg text-white">{{ creator.subscriberCount }} Abonnés</div>
         </div>
@@ -88,7 +85,7 @@ const props = defineProps({
 function GetSocialsUrls() {
 
   const socials = [];
-  
+
   if (props.creator.socials.facebookUrl !== null) {
     socials.push({
       icon: "mdi-facebook",