Modification layout de la page Creator (dynamique)

src/layouts/UserProfile.vue

@@ -0,0 +1,44 @@
+  <!-- Fiche test pour router -->
+<template>
+    <div v-if="user">
+        <h1>{{ user.name }}</h1>
+        <p>{{ user.bio }}</p>
+        <!-- Afficher plus de contenu utilisateur ici -->
+    </div>
+    <div v-else>
+        <p>Utilisateur non trouvé</p>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            user: null
+        };
+    },
+    created() {
+        this.fetchUser();
+    },
+    watch: {
+        '$route.params.username': 'fetchUser'
+    },
+    methods: {
+        fetchUser() {
+            const username = this.$route.params.username;
+            fetch(`https://api.hutopy.ca/users/${username}`)
+                .then(response => response.json())
+                .then(data => {
+                    if (data) {
+                        this.user = data;
+                    } else {
+                        this.user = null;
+                    }
+                })
+                .catch(() => {
+                    this.user = null;
+                });
+        }
+    }
+};
+</script>

src/router/index.js

@@ -8,22 +8,21 @@ import HelpAndContact from '@/views/tos/HelpAndContact.vue'
 import TermsAndConditions from '@/views/tos/TermsAndConditions.vue'
 import Transactions from '@/views/tos/Transactions.vue'
 import { createRouter, createWebHistory } from 'vue-router'
+import UserProfile from '../layouts/UserProfile.vue'
 import LoginView from '../views/LoginView.vue'
 import PaymentCompleted from '../views/PayementCompleted.vue'
 import SignupView from '../views/SignupView.vue'
-import UserBrowser from '../views/UsersBrowser.vue'
 import ContactView from '../views/main/ContactView.vue'
 import CreatorFolio from '../views/main/CreatorFolio.vue'
 import HomeView from '../views/main/HomeView.vue'
+import UserBrowser from '../views/main/UsersBrowser.vue'
 import YourProfile from '../views/main/YourProfile.vue'
 import ChloeBeaugrand from '../views/manualusers/ChloeProfile.vue'
 import Hutopy from '../views/manualusers/HutopyProfile.vue'
 import Leffet from '../views/manualusers/LeffetProfile.vue'
 import MathieuCaron from '../views/manualusers/MathieuCaron.vue'
 
-const router = createRouter({
+const routes = [
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
   {
     path: '/',
     name: 'main',
@@ -34,7 +33,6 @@ const router = createRouter({
     name: 'creatorfolio',
     component: CreatorFolio
   },
-
   {
     path: '/paymentcompleted',
     name: 'PayementCompleted',
@@ -90,69 +88,67 @@ const router = createRouter({
     name: 'guideforcreators',
     component: GuideForCreators
   },
-
   {
     path: '/about',
     name: 'about',
     component: About
   },
-
   {
     path: '/transactions',
     name: 'transactions',
     component: Transactions
   },
-
   {
     path: '/Hutopy',
     name: 'Hutopy',
     component: Hutopy
   },
-
   {
     path: '/Leffet',
     name: 'Leffet',
     component: Leffet
   },
-
   {
     path: '/userbrowser',
     name: 'userbrowser',
     component: UserBrowser
   },
-
   {
     path: '/chloebeaugrand',
     name: 'chloebeaugrand',
     component: ChloeBeaugrand
   },
-
   {
     path: '/guillaumeaime',
     name: 'guillaumeaime',
     component: GuillaumeAime
   },
-
   {
     path: '/mathieucaron',
     name: 'mathieucaron',
     component: MathieuCaron
   },
-
   {
     path: '/arps',
     name: 'arps',
     component: ARPS
   },
-
   {
-      path: '/guillaumeaime',
+    path: '/:username',
-      name: 'guillaumeaime',
+    name: 'user-profile',
-      component: GuillaumeAime
+    component: UserProfile
   },
 
+  {
+    path: '/creatorFolio',
+    name: 'creatorFolio',
+    component: CreatorFolio
+  }
+]
 
-  ],
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes,
   scrollBehavior(to, from, savedPosition) {
     return { top: 0 };
   }

src/views/main/CreatorFolio.vue

@@ -109,7 +109,7 @@
     <!-- "Core (Menu / Center / Donation)" -->
     <v-row>
       <!-- "Menu" -->
-      <v-col cols="2" md="3" lg="4" xl="4" xxl="4" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
+      <v-col cols="2" md="3" lg="3" xl="3" xxl="2" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
         <v-col style="margin: 0;">
           <v-row class="Hutopy-menu-sticky-mobile">
             <v-spacer></v-spacer>
@@ -129,90 +129,6 @@
                         </v-btn>
                       </router-link>
                     </v-list-item>
-
-                    <v-list-item>
-                      <v-dialog transition="dialog-top-transition" width="auto">
-                        <!-- <template v-slot:activator="{ props: activatorProps }">
-                           <v-btn v-bind="activatorProps" text class="d-flex align-start align-center main-background"
-                            elevation="0" outlined="false">
-                            <v-icon left class="mr-4">mdi-wallet</v-icon>
-                            <p @click="isActive.value = false">Bourse</p>
-                          </v-btn>
-                        </template>-->
-
-                        <!-- Wallet Modale -->
-                        <template v-slot:default="{ isActive }">
-                          <v-card style="border-radius: 30px;">
-                            <div class="text-center" style=" margin-top: 2%; margin-bottom: 2%;">
-                              <v-icon left size="48">mdi-wallet</v-icon>
-                              <v-toolbar title="PORTEFEUILLE"
-                                style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
-                            </div>
-                            <v-card-text class="text-h1 pa-12">
-                              <v-row>
-                                <v-col>
-                                  <v-row>
-                                    <v-col cols="7">
-                                      <h1 style="margin-bottom: 4%; font-size: 1.3rem;">Balance actuelle</h1>
-                                      <h1 style="margin-bottom: 4%; font-size: 1.3rem;">Montant reçu</h1>
-                                      <h1 style="margin-bottom: 4%; font-size: 1.3rem;">Dernier don</h1>
-                                    </v-col>
-                                    <v-col>
-                                      <h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
-                                      <h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
-                                      <h1 style="margin-bottom: 4%; font-size: 1.3rem;">2024-10-04</h1>
-                                      <p></p>
-                                    </v-col>
-                                  </v-row>
-                                </v-col>
-                                <v-col>
-                                  <v-row>
-                                    <v-col cols="8">
-                                      <h1 style="margin-bottom: 4%; font-size: 1.2rem;">Dons</h1>
-                                      <h1 style="margin-bottom: 4%; font-size: 1.2rem;">Montant retiré</h1>
-                                    </v-col>
-                                    <v-col>
-                                      <h1 style="margin-bottom: 4%; font-size: 1.2rem;">0</h1>
-                                      <h1 style="margin-bottom: 4%; font-size: 1.2rem;">0$</h1>
-                                      <p></p>
-                                    </v-col>
-                                  </v-row>
-                                </v-col>
-                              </v-row>
-                            </v-card-text>
-
-                            <v-card-actions class="justify-center">
-                              <v-btn text="Fermer" @click="isActive.value = false"></v-btn>
-                            </v-card-actions>
-                          </v-card>
-
-                          <v-card style="border-radius: 25px; margin-top: 3%; height: 30px;">
-                            <v-row>
-                              <v-col style="margin-right: -2%;" cols="1"
-                                class="text-truncate text-center font-weight-bold">#T</v-col>
-                              <v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
-                                class="text-truncate text-center font-weight-bold">$</v-col>
-                              <v-col cols="2" class="text-truncate text-center font-weight-bold">Date</v-col>
-                              <v-col cols="3" class="text-truncate text-center font-weight-bold"
-                                style="margin-right: 2%; background-color: #fbccee">Name</v-col>
-                              <v-col cols="5" class="text-truncate text-center font-weight-bold">message</v-col>
-                            </v-row>
-                          </v-card>
-
-                          <v-card style=" border-radius: 25px; margin-top: .5%; max-height: 450px;">
-                            <v-row>
-                              <v-col style="margin-right: -2%;" cols="1" class="text-truncate">1</v-col>
-                              <v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
-                                class="text-truncate">10$</v-col>
-                              <v-col cols="2" class="text-truncate">20-10-2025</v-col>
-                              <v-col cols="3" class="text-truncate"
-                                style="margin-right: 2%;  background-color: #fbccee">Pascal</v-col>
-                              <v-col cols="5" class="text-truncate">Good Job</v-col>
-                            </v-row>
-                          </v-card>
-                        </template>
-                      </v-dialog>
-                    </v-list-item>
                   </v-list>
                 </v-col>
               </v-container>
@@ -223,7 +139,9 @@
       </v-col>
 
       <!-- Profile Info Picture name title & description -->
-      <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
+      <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="6" xl="6" xxl="8">
+        <v-row class="d-flex justify-center align-center">
+          <v-col xl="10" xxl="8">
             <v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
               <v-container>
                 <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
@@ -282,12 +200,18 @@
                 </v-container>
               </v-container>
             </v-container>
+          </v-col>
+        </v-row>
 
-
+        <v-row class="d-flex justify-center align-center">
+          <v-col xl="10" xxl="8">
             <PostContentMenu style="margin-top: -30px;"></PostContentMenu>
-
+          </v-col>
+        </v-row>
 
         <!-- Card youtube balado -->
+        <v-row class="d-flex justify-center align-center">
+          <v-col xl="10" xxl="8">
             <v-container>
               <v-card class="flow-menu m-0 youtube-card">
                 <!-- Title, date and btn -->
@@ -328,10 +252,14 @@
                     <p class="text-justify pa-10" style="margin-bottom: -50px; font-size: 1em">C’est un honneur de vous
                       présenter
                       mon tout premier balado. Dans ce premier épisode, les passionnés de cinéma et de gadgets seront
-                  particulièrement gâtés, car je dévoile les gadgets que j'utilise professionnellement. Par la suite, je
+                      particulièrement gâtés, car je dévoile les gadgets que j'utilise professionnellement. Par la
-                  partage mon itinéraire professionnel peu conventionnel : de mes débuts dans le secteur bovin à travers
+                      suite,
+                      je
+                      partage mon itinéraire professionnel peu conventionnel : de mes débuts dans le secteur bovin à
+                      travers
                       le
-                  Canada, à mon poste actuel comme directeur marketing chez Journal Mobile, jusqu'à la direction de mon
+                      Canada, à mon poste actuel comme directeur marketing chez Journal Mobile, jusqu'à la direction de
+                      mon
                       agence
                       créative, Alliés. Enfin, je vous invite à découvrir un autre aspect de ma vie à travers ma page
                       personnelle,
@@ -353,138 +281,12 @@
                 </div>
               </v-card>
             </v-container>
-
-
-        <!-- Card nouvelle boutique -->
-        <v-container>
-          <v-card class="flow-menu m-0 youtube-card">
-            <!-- Title, date and btn -->
-            <v-col>
-              <v-row>
-                <v-col class="text-center">
-                  <h1 class="card-title">
-                    NOUVELLE BOUTIQUE À SAINT-HYACINTHE</h1>
-                </v-col>
-
-                <!--<v-col class="text-right">
-<v-btn class="btn-card-options" flat tile elevation="0">
-                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
-                  </v-btn>          (a intégrer)
-                </v-col> -->
-              </v-row>
-
-            </v-col>
-
-            <!-- Card core Video/image & text -->
-            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
-              <v-container>
-                <v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/nouvelleboutique.jpg"
-                  title="Guillaumem"></v-img>
-
-                <!-- Date -->
-                <v-row class="text-right">
-                  <v-col>
-                    <h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
-                      24-04-2024
-                    </h1>
           </v-col>
         </v-row>
-
-
-                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">J’ai découvert une nouvelle
-                  boutique
-                  à St-Hyacinthe qui embrasse exactement ma philosophie derrière la page Guillaume Aime: faire découvrir
-                  le
-                  savoir-faire québécois !
-
-                  J’y ai croisé Carl Vaillancourt, copropriétaire de l’entreprise Espace Karibou au Centre-ville
-                  Saint-Hyacinthe ainsi que mon ami Marc-Olivier Hébert de la Fondation L'effet.
-
-                  Je vous invite à découvrir cette boutique sur la rue Cascade à St-Hyacinthe. Bravo à Karianne Hamel et
-                  Carl
-                  pour ce projet!</p>
-
-
-                <!-- Like dislike commment Section -->
-                <div style="height: 20px;"></div>
-                <div
-                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-
-                <!-- Comments -->
-                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
-                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
-              </v-container>
-            </div>
-          </v-card>
-        </v-container>
-
-        <!-- Card nouvelle boutique -->
-        <v-container>
-          <v-card class="flow-menu m-0 youtube-card">
-            <!-- Title, date and btn -->
-            <v-col>
-              <v-row>
-                <v-col class="text-center">
-                  <h1 class="card-title">
-                    C'EST PARTI POUR 2024!</h1>
-                </v-col>
-                <!--
-                <v-col class="text-right">
-                 <v-btn class="btn-card-options" flat tile elevation="0">
-                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
-                  </v-btn>          (a intégrer)
-                </v-col>  -->
-              </v-row>
-
-            </v-col>
-
-            <!-- Card core Video/image & text -->
-            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
-              <v-container>
-                <v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/cestparti.jpg"
-                  title="Guillaumem"></v-img>
-
-                <!-- Date -->
-                <v-row class="text-right">
-                  <v-col>
-                    <h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
-                      22-04-2024
-                    </h1>
-                  </v-col>
-                </v-row>
-
-                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">C'est parti pour 2024 ! De
-                  retour au
-                  travail officiellement ce matin afin d'aider les entreprises de la région à rayonner ! Mettre en
-                  lumière les
-                  entrepreneurs et leur unicité, c'est ma passion ! Si jamais tu as besoin d'aide dans ce domaine,
-                  n'hésite
-                  pas à me contacter.</p>
-
-                <!-- Like dislike commment Section -->
-                <div style="height: 20px;"></div>
-                <div
-                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-                </div>
-
-                <!-- Comments -->
-                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
-                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
-              </v-container>
-            </div>
-          </v-card>
-        </v-container>
-
-
       </v-col>
 
       <!-- "Large-Monitor-RightCol" Donation -->
-      <v-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
+      <v-col cols="2" md="3" lg="3" xl="2" xxl="2" class="hidden-sm-and-down" hidden-sm-and-up>
         <v-row>
           <v-col>
             <v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ;  bottom: 0;">

src/views/main/UsersBrowser.vue

@@ -236,7 +236,7 @@
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
 import { ref } from 'vue';
-import StripePayment from './StripePayment.vue';
+import StripePayment from '../StripePayment.vue';
 let imageSrc = '/images/usersmedia/HutopyProfile/banners/banner01.png';
 let profilePicture = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png';
 let name = 'Hutopy'

src/views/main/YourProfile.vue

@@ -3,10 +3,12 @@
   <body style="background-color:#f4f4f4">
     <DefaultLayout></DefaultLayout>
 
-    <v-row style="background-color: #6b0065; height: 100px; margin-top: -50px; margin-bottom: -25px;"></v-row>
+    <v-row style="background-color: #6b0065; height: 100px; margin-top: -50px; margin-bottom: -25px;">
+    </v-row>
 
     <v-row justify="center">
       <v-col cols="12">
+
         <v-img class="profile-banner " max-height="375" :src="bannerImageUrl" cover
           style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
       </v-col>
@@ -38,10 +40,11 @@
                   </v-btn>
                 </v-col>
 
+
               </v-col>
               <v-spacer></v-spacer>
             </v-row>
-            <p class="text-center" style="margin-bottom: 10px; font-size: 2rem; font-weight: 600;">{{ userName }}</p>
+            <p class="text-center" style="margin-bottom: 10px; font-size: 2.5rem; font-weight: 600;">User Name</p>
             <p class="text-center" style="margin-bottom: 50px; font-size: 1.2rem">Informations personnelles</p>
 
             <v-form>