From a8d6c420601c4372f70eebb6a1bee0553df4e5b8 Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad0@hotmail.com>
Date: Wed, 7 Aug 2024 14:25:49 -0400
Subject: [PATCH] Adds About for Creators

---
 .../Dialogs/PageInformations/About.vue        |  67 ++++++++++++
 src/views/Profile/PageInformations.vue        |  45 ++++----
 src/views/creators/CreatorAbout.vue           |  55 ++++++++++
 src/views/creators/CreatorAboutYou.vue        | 102 ------------------
 src/views/creators/CreatorBanner.vue          |  10 +-
 src/views/creators/CreatorDescriptionBtn.vue  |  89 ---------------
 src/views/main/Profile.vue                    |  27 ++---
 7 files changed, 166 insertions(+), 229 deletions(-)
 create mode 100644 src/views/Profile/Dialogs/PageInformations/About.vue
 create mode 100644 src/views/creators/CreatorAbout.vue
 delete mode 100644 src/views/creators/CreatorAboutYou.vue
 delete mode 100644 src/views/creators/CreatorDescriptionBtn.vue

diff --git a/src/views/Profile/Dialogs/PageInformations/About.vue b/src/views/Profile/Dialogs/PageInformations/About.vue
new file mode 100644
index 0000000..2f0ab42
--- /dev/null
+++ b/src/views/Profile/Dialogs/PageInformations/About.vue
@@ -0,0 +1,67 @@
+<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.about.title)
+const description = ref(props.creator.about.description)
+
+const client = useClient()
+const save = async () => {
+  try {
+    await client.post(
+        `/api/creators/${props.creator.id}/about`,
+        {
+          "title": title.value || null,
+          "description": description.value || null
+        })
+
+    props.creator.about.title = title
+    props.creator.about.description = description
+
+    emits('closeRequested')
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const cancel = () => {
+  emits('closeRequested')
+}
+
+</script>
+
+<template>
+  <div class="pb-5 text-2xl">About</div>
+
+  <div class="flex flex-row align-center">
+    <v-text-field
+        variant="outlined"
+        v-model="title"
+        label="Titre"
+        outlined
+    ></v-text-field>
+  </div>
+
+
+  <div class="flex flex-row align-center">
+    <v-text-field
+        variant="outlined"
+        v-model="description"
+        label="Description"
+        outlined
+    ></v-text-field>
+  </div>
+
+  <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>
+</template>
diff --git a/src/views/Profile/PageInformations.vue b/src/views/Profile/PageInformations.vue
index 1ef3396..16e6b8f 100644
--- a/src/views/Profile/PageInformations.vue
+++ b/src/views/Profile/PageInformations.vue
@@ -1,10 +1,11 @@
 <script setup>
 import {ref} from 'vue'
+import {useUserStore} from "@/stores/userStore.js"
 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"
+import About from "@/views/Profile/Dialogs/PageInformations/About.vue";
 
 const userStore = useUserStore()
 
@@ -16,7 +17,8 @@ const componentsMap = {
   BannerPicker,
   LogoPicker,
   Socials,
-  ColorsPicker
+  ColorsPicker,
+  About
 };
 
 const openDialog = (component, colorName = null) => {
@@ -58,31 +60,32 @@ const closeDialog = () => {
       <div class="py-5 uppercase ml-4">Informations</div>
 
       <div class="flex flex-col w-full">
-        <button
-            @click="openDialog('Socials')"
-            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">   Nom de la page </span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.xUrl }}</span>
-          <span class="flex-none">          
-                        <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
 
         <button
             @click="openDialog('Socials')"
             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"> Titre </span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.xUrl }}</span>
-          <span class="flex-none">          
-                        <v-icon>mdi-chevron-right</v-icon>
+          <span class="flex-none pa-2 min-w-32 text-left">Nom</span>
+          <span class="flex-auto text-left pr-6">{{ userStore.creator.name }}</span>
+          <span class="flex-none">  
+            <v-icon>mdi-chevron-right</v-icon>
           </span>
         </button>
 
         <button
-            @click="openDialog('Socials')"
+            @click="openDialog('About')"
+            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">Titre</span>
+          <span class="flex-auto text-left pr-6">{{ userStore.creator.about.title }}</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button
+            @click="openDialog('About')"
             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="pa-2 min-w-32 text-left"> Description </span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.websiteUrl }}</span>
+          <span class="pa-2 min-w-32 text-left">Description</span>
+          <span class="flex-auto text-left pr-6">{{ userStore.creator.about.description }}</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>
@@ -91,7 +94,6 @@ const closeDialog = () => {
       </div>
     </div>
 
-    
     <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">
@@ -145,7 +147,7 @@ const closeDialog = () => {
             @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>
+          <span class="flex-auto text-left pr-6">Couleur des entêtes de menus</span>
           <span class="flex-none">
            <v-icon>mdi-eyedropper-variant</v-icon>
           </span>
@@ -182,7 +184,8 @@ const closeDialog = () => {
         <button
             @click="openDialog('Socials')"
             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/x.svg" width="23px" height="23px"></span>
+          <span class="flex-none pa-2 min-w-32 text-left">    <img src="/images/hutopymedia/icons/x.svg" width="23px"
+                                                                   height="23px"></span>
           <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.xUrl }}</span>
           <span class="flex-none">          
                         <v-icon>mdi-chevron-right</v-icon>
diff --git a/src/views/creators/CreatorAbout.vue b/src/views/creators/CreatorAbout.vue
new file mode 100644
index 0000000..4b8072d
--- /dev/null
+++ b/src/views/creators/CreatorAbout.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <button
+        class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 mr-2"
+        @click="AboutUs = true"
+    >
+      <v-icon style="font-size: 35px; height: 35px; width: 55px;">
+        mdi-information
+      </v-icon>
+    </button>
+
+    <v-dialog v-model="AboutUs" max-width="500px">
+      <v-card>
+
+        <v-card-title>
+          {{ creator.about.title }}
+        </v-card-title>
+
+        <v-card-text class="scrollable-content">
+          {{ creator.about.description }}
+        </v-card-text>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn text class="ml-auto" @click="AboutUs = false">Fermer</v-btn>
+        </v-card-actions>
+
+      </v-card>
+    </v-dialog>
+
+  </div>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+
+const AboutUs = ref(false);
+
+const props = defineProps({
+  creator: {type: Object, required: true},
+});
+
+</script>
+
+<style scoped>
+.scrollable-content {
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.scrollable-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+</style>
diff --git a/src/views/creators/CreatorAboutYou.vue b/src/views/creators/CreatorAboutYou.vue
deleted file mode 100644
index 75ce31d..0000000
--- a/src/views/creators/CreatorAboutYou.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-  <div class="py-8" ref="container">
-    <div class="text-center text-2xl py-4 border-t-4">À propos de vous</div>
-    <div class="px-5 relative">
-      <div class="flex flex-col space-y-4">
-        <div>
-          <div class="flex justify-between items-center mb-2">
-            <label class="text-lg">Prénom</label>
-          </div>
-          <v-text-field v-model="user.firstName" label="Prénom" variant="outlined"></v-text-field>
-        </div>
-
-        <div>
-          <div class="flex justify-between items-center mb-2">
-            <label class="text-lg">Nom</label>
-          </div>
-          <v-text-field v-model="user.lastName" label="Nom" variant="outlined"></v-text-field>
-        </div>
-
-        <div>
-          <div class="flex justify-between items-center mb-2">
-            <label class="text-lg">Occupation</label>
-          </div>
-          <v-text-field v-model="user.occupation" label="Occupation" variant="outlined"></v-text-field>
-        </div>
-
-        <div>
-          <div class="flex justify-between items-center mb-2">
-            <label class="text-lg">Courriel</label>
-          </div>
-          <v-text-field disabled v-model="user.email" label="Courriel" variant="outlined"></v-text-field>
-        </div>
-
-        <div>
-          <div class="flex justify-between items-center mb-2">
-            <label class="text-lg">Téléphone</label>
-          </div>
-          <v-text-field v-model="user.phoneNumber" label="Téléphone" variant="outlined"></v-text-field>
-        </div>
-
-        <div>
-          <div class="flex justify-between items-center mb-2">
-            <label class="text-lg">Date de naissance (JJ/MM/AAAA)</label>
-          </div>
-          <v-text-field v-model="user.birthDate" label="Date de naissance" variant="outlined"
-                        :rules="[dateRule]"></v-text-field>
-        </div>
-
-        <div>
-          <div class="flex justify-between items-center mb-2">
-            <label class="text-lg">Pays</label>
-          </div>
-          <v-text-field v-model="user.country" label="Pays" variant="outlined"></v-text-field>
-        </div>
-
-        <div>
-          <div class="flex justify-between items-center mb-2">
-            <label class="text-lg">Ville</label>
-          </div>
-          <v-text-field v-model="user.city" label="Ville" variant="outlined"></v-text-field>
-        </div>
-
-        <div>
-          <div class="flex justify-between items-center mb-2">
-            <label class="text-lg">Adresse</label>
-          </div>
-          <v-text-field v-model="user.address" label="Adresse" variant="outlined"></v-text-field>
-        </div>
-
-        <div>
-          <div class="flex justify-between items-center mb-2">
-            <label class="text-lg">Titre A propos</label>
-          </div>
-          <v-text-field v-model="user.about" label="Titre A propos" variant="outlined"></v-text-field>
-        </div>
-
-        <div>
-          <div class="flex justify-between items-center mb-2">
-            <label class="text-lg">Description</label>
-          </div>
-          <v-textarea v-model="user.description" label="Description" variant="outlined"></v-textarea>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-
-const props = defineProps({
-  user
-});
-
-const dateRule = value => {
-  const datePattern = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/(19|20)\d{2}$/;
-  return datePattern.test(value) || 'Format de date invalide (JJ/MM/AAAA)';
-};
-</script>
-
-<style scoped>
-/* Votre style ici */
-</style>
diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index 82a8891..11d2081 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -60,13 +60,13 @@
 
         <!-- Buttons -->
         <div class="flex flex-wrap items-center  mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4">
-          <AboutYou :creator="creator"></AboutYou>
+
+          <creator-about :creator="creator"></creator-about>
 
           <subscribe-button :creator="creator"></subscribe-button>
 
-          <publish-content-button :creator="creator"/>
-
-
+          <publish-content-button :creator="creator"></publish-content-button>
+          
         </div>
       </div>
     </div>
@@ -74,7 +74,7 @@
 </template>
 
 <script setup>
-import AboutYou from "@/views/creators/CreatorDescriptionBtn.vue";
+import CreatorAbout from "@/views/creators/CreatorAbout.vue";
 import SubscribeButton from "@/views/creators/SubscribeButton.vue";
 import PublishContentButton from "@/views/contents/PublishContentButton.vue";
 
diff --git a/src/views/creators/CreatorDescriptionBtn.vue b/src/views/creators/CreatorDescriptionBtn.vue
deleted file mode 100644
index 1672880..0000000
--- a/src/views/creators/CreatorDescriptionBtn.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <div>
-    <button
-        class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 mr-2"
-        @click="AboutUs = true"
-    >
-      <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-information</v-icon>
-    </button>
-
-    <v-dialog v-model="AboutUs" max-width="500px">
-      <v-card>
-        <v-card-title>
-          À propos
-          <br><br>
-          <div class="flex justify-center">{{ creator.about }}</div>
-          <br>
-        </v-card-title>
-        <v-card-text class="scrollable-content">
-          {{ creator.description }}
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn text class="ml-auto" @click="AboutUs = false">Fermer</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-
-const AboutUs = ref(false);
-
-const props = defineProps({
-  creator: { type: Object, required: true },
-});
-
-onMounted(() => {
-  const style = document.createElement('style');
-  style.innerHTML = `
-    .scrollable-content::-webkit-scrollbar-thumb {
-      background-color: ${props.creator.colors.menu};
-      border-radius: 10px;
-    }
-    .scrollable-content::-webkit-scrollbar-thumb:hover {
-      background-color: ${shadeColor(props.creator.colors.accent, -10)};
-    }
-  `;
-  document.head.appendChild(style);
-});
-
-function shadeColor(color, percent) {
-  const f = parseInt(color.slice(1), 16),
-      t = percent < 0 ? 0 : 255,
-      p = percent < 0 ? percent * -1 : percent,
-      R = f >> 16,
-      G = (f >> 8) & 0x00ff,
-      B = f & 0x0000ff;
-  return (
-      "#" +
-      (
-          0x1000000 +
-          (Math.round((t - R) * p) + R) * 0x10000 +
-          (Math.round((t - G) * p) + G) * 0x100 +
-          (Math.round((t - B) * p) + B)
-      )
-          .toString(16)
-          .slice(1)
-  );
-}
-</script>
-
-<style scoped>
-.scrollable-content {
-  max-height: 600px;
-  overflow-y: auto;
-}
-
-.scrollable-content::-webkit-scrollbar {
-  width: 6px;
-}
-
-.transparent-btn {
-  background-color: transparent;
-  color: inherit;
-  box-shadow: none;
-}
-</style>
diff --git a/src/views/main/Profile.vue b/src/views/main/Profile.vue
index 906543a..7c0c5a0 100644
--- a/src/views/main/Profile.vue
+++ b/src/views/main/Profile.vue
@@ -1,18 +1,19 @@
 <template>
   <div class="flex flex-col md:flex-row">
+
     <!-- Left Menu -->
     <div class="bg-[#f4f4f4] z-20 w-full md:max-w-xs fixed md:sticky md:top-0 md:flex md:flex-col top-0">
       <div class="sticky top-20 z-30 bg-[#f4f4f4]">
         <div class="flex flex-col items-center md:items-start md:pl-4 mt-16">
           <h1 class="text-2xl py-4 font-bold text-center md:text-left">Gérer votre compte Hutopy</h1>
-          
+
           <div class="relative flex items-center md:mt-0 w-full">
             <!-- Navigation buttons for small screens -->
             <button @click="scrollLeftFunc"
                     class="rounded p-1 absolute left-2 z-10 md:hidden text-fuchsia-800 bg-[#f4f4f4] text-2xl ">
               <v-icon>mdi-chevron-left</v-icon>
             </button>
-            
+
             <div
                 ref="scrollContainer"
                 class="flex md:flex-col space-x-2 space-y-0 md:space-x-0 md:space-y-2 p-4 items-center md:items-start overflow-x-scroll md:overflow-x-visible mx-2 md:mx-0 custom-scroll min-w-[400px] px-1"
@@ -20,29 +21,34 @@
                 @mouseleave="mouseLeave"
                 @mouseup="mouseUp"
                 @mousemove="mouseMove">
+
               <v-btn variant="text" @click="currentComponent = 'PageInformations'">
                 <v-icon class="mr-2">mdi-file-edit-outline</v-icon>
                 Informations de votre page
               </v-btn>
+
               <v-btn variant="text" @click="currentComponent = 'PersonnalInfo'">
                 <v-icon class="mr-2">mdi-information</v-icon>
                 Informations personnelles
               </v-btn>
+
               <v-btn variant="text" @click="currentComponent = 'ManageAccount'">
                 <v-icon class="mr-2">mdi-account</v-icon>
                 Gestion de Comptes
               </v-btn>
+
               <v-btn variant="text" @click="currentComponent = 'AccountSecurity'">
                 <v-icon class="mr-2">mdi-security</v-icon>
                 Sécurité
               </v-btn>
+
             </div>
             <button @click="scrollRightFunc"
                     class="rounded p-1 absolute right-2 z-10 md:hidden text-fuchsia-800 bg-[#f4f4f4] text-2xl">
               <v-icon>mdi-chevron-right</v-icon>
             </button>
           </div>
-        
+
         </div>
       </div>
     </div>
@@ -50,33 +56,30 @@
     <!-- Mid Content -->
     <div class="flex flex-col flex-1 align-center py-12 p-3 mt-28 md:mt-0">
       <template v-if="currentComponent === 'ManageAccount'">
-        <ManageAccount/>
+        <manage-account></manage-account>
       </template>
       <template v-else-if="currentComponent === 'PageInformations'">
-        <PageInformations/>
+        <page-informations></page-informations>
       </template>
       <template v-else-if="currentComponent === 'PersonnalInfo'">
-        <PersonnalInfo/>
+        <personnal-info></personnal-info>
       </template>
       <template v-else-if="currentComponent === 'AccountSecurity'">
-        <AccountSecurity/>
+        <account-security></account-security>
       </template>
     </div>
   </div>
-  
+
 </template>
 
 <script setup>
 import {ref, onMounted} from "vue";
-import {useUserStore} from "@/stores/userStore.js";
 import ManageAccount from "@/views/Profile/ManageAccount.vue";
 import PageInformations from "@/views/Profile/PageInformations.vue";
 import PersonnalInfo from "@/views/Profile/PersonnalInfo.vue";
 import AccountSecurity from "@/views/Profile/AccountSecurity.vue";
 
-const userStore = useUserStore();
-
-const currentComponent = ref('PageInformations'); // Default component
+const currentComponent = ref('PersonnalInfo'); // Default component
 const isDown = ref(false);
 const startX = ref(0);
 const scrollLeft = ref(0);