From 385e2a3c3c9417e5a8fb63766cba617d92311fb0 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sun, 19 May 2024 01:02:46 -0400
Subject: [PATCH 1/3] =?UTF-8?q?Bourse=20alignement,=20Paiement=20compl?=
 =?UTF-8?q?=C3=A9t=C3=A9=20Recu=20modifi=C3=A9=20et=20le=20wallet=20est=20?=
 =?UTF-8?q?modifi=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/DefaultLayout.vue | 68 +++++++++++++++++++++++++++++++----
 1 file changed, 61 insertions(+), 7 deletions(-)

diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index 66dfd39..3c0d68d 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -71,8 +71,8 @@
                         </v-row>
                       </v-card-text>
 
-                      <v-data-table-virtual fixed-header :headers="headers" :items="currentUser.userTransactions" height="250"
-                        item-value="name">
+                      <v-data-table-virtual fixed-header :headers="headers" :items="currentUser.userTransactions"
+                        height="250" item-value="name">
                       </v-data-table-virtual>
 
                       <v-card-actions class="justify-center">
@@ -92,7 +92,7 @@
     </v-card>
 
     <!-- Mobile version -->
-    <v-card style="z-index: 9000; background-color: #f4f4f4;" class="hidden-md-and-up" hidden-md-and-up>
+    <v-card style="z-index: 2000; background-color: #f4f4f4;" class="hidden-md-and-up" hidden-md-and-up>
       <v-app-bar app>
         <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
         <v-row>
@@ -107,7 +107,7 @@
       <!-- Left-side Menu -->
       <v-navigation-drawer v-model="drawer" temporary>
         <v-list>
-          <v-list-item subtitle="email" title="ANONYME">
+          <v-list-item :title="currentUserName">
             <template v-slot:prepend>
               <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
                 class="mobile-profile-picture mini-profile-picture " alt="Avatar">
@@ -125,10 +125,57 @@
           <RouterLink :to="{ name: 'userbrowser' }">
             <v-list-item prepend-icon="mdi-account-multiple" title="Membres" value="friends"></v-list-item>
           </RouterLink>
+
           <!-- <v-list-item prepend-icon="mdi-newspaper" title="Contenu" value="content"></v-list-item>-->
-          <!-- <v-list-item prepend-icon="mdi-wallet" title="Portefeuille" value="wallet"></v-list-item>-->
-          <!-- <v-list-item style="margin-top: 110%;" prepend-icon="mdi-logout" title="Déconnexion"
-            value="logout"></v-list-item>-->
+          <v-list-item v-if="currentUser">
+            <v-dialog>
+
+              <template v-slot:activator="{ props: activatorProps }">
+                <v-btn v-bind="activatorProps" class="d-flex justify-start align-center full-width-btn"
+                  outlined="false">
+                  <v-icon left class="mr-4">mdi-wallet</v-icon>
+                  <p class="my-0">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>
+                          </v-col>
+                          <v-col>
+                            <h1 style="margin-bottom: 4%; font-size: 1.3rem;">{{ currentUser.totalBalance }}$</h1>
+                          </v-col>
+                        </v-row>
+                      </v-col>
+                      <v-col>
+
+                      </v-col>
+                    </v-row>
+                  </v-card-text>
+
+                  <v-data-table-virtual fixed-header :headers="headers" :items="currentUser.userTransactions"
+                    height="250" item-value="name">
+                  </v-data-table-virtual>
+
+                  <v-card-actions class="justify-center">
+                    <v-btn @click="isActive.value = false" text="Fermer"></v-btn>
+                  </v-card-actions>
+                </v-card>
+              </template>
+            </v-dialog>
+          </v-list-item>
+          <v-list-item v-if="currentUser" @click="logout()" style="margin-top: 110%;" prepend-icon="mdi-logout"
+            title="Déconnecter" value="logout"></v-list-item>
         </v-list>
       </v-navigation-drawer>
     </v-card>
@@ -142,6 +189,8 @@ import { onBeforeMount, ref } from 'vue';
 const client = useClient();
 
 const drawer = ref(false);
+
+
 const currentUserName = ref("INVITÉ");
 let currentUser = null;
 
@@ -167,6 +216,11 @@ function logout() {
   window.location.reload();
 }
 
+function openWalletModal() {
+
+}
+
+
 </script>
 
 

From 76e4d3156460566a8e5ff19fa3c5b06c3488e9c8 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sun, 19 May 2024 23:19:43 -0400
Subject: [PATCH 2/3] Update Modal wallet

---
 src/layouts/DefaultLayout.vue | 197 ++++++++++++----------------------
 1 file changed, 70 insertions(+), 127 deletions(-)

diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index 3c0d68d..2596b64 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -1,9 +1,8 @@
 <template>
 
   <body style="background-color: #f4f4f4;">
-
     <!-- PC Version -->
-    <v-card style="z-index: 1000; background-color: #ffff;" class="hidden-sm-and-down" hidden-sm-and-down elevation="5">
+    <v-card style="z-index: 1000; background-color: #ffff;" class="hidden-sm-and-down" elevation="5">
       <v-container style="z-index: 2000; margin-bottom: .8%; margin-top: -.3%; margin-right: 1%;">
         <v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
           <v-menu>
@@ -11,10 +10,10 @@
               <v-row>
                 <!-- Colonne de droite -->
                 <v-col class="text-right d-flex align-center justify-end">
-                  <div class="d-flex align-center ">
+                  <div class="d-flex align-center">
                     <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
                       class="header-profile-icon mr-2" alt="Logo">
-                    <v-btn flat style="min-width: 200px; font-size: 1.3rem;" dark v-bind="props">
+                    <v-btn flat style="min-width: 200px; font-size: 1.3rem;" dark v-bind="props" ref="walletActivator">
                       {{ currentUserName }}
                     </v-btn>
                   </div>
@@ -22,7 +21,6 @@
               </v-row>
             </template>
 
-
             <!-- Dropdown Menu Profile/Connection -->
             <v-list style="padding: 0;">
               <v-list-item v-if="!currentUser">
@@ -31,56 +29,10 @@
                 </router-link>
               </v-list-item>
               <v-list-item v-if="currentUser">
-                <v-dialog transition="dialog-top-transition" width="auto">
-                  <template v-slot:activator="{ props: activatorProps }">
-                    <div class="d-flex justify-center">
-                      <v-btn v-bind="activatorProps"
-                        class="d-flex align-start align-center main-background full-width-btn" elevation="0"
-                        outlined="false">
-                        <v-icon left class="mr-4">mdi-wallet</v-icon>
-                        <p>Bourse</p>
-                      </v-btn>
-                    </div>
-                  </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>
-                              </v-col>
-                              <v-col>
-                                <h1 style="margin-bottom: 4%; font-size: 1.3rem;">{{ currentUser.totalBalance }}$</h1>
-                              </v-col>
-                            </v-row>
-                          </v-col>
-                          <v-col>
-
-                          </v-col>
-                        </v-row>
-                      </v-card-text>
-
-                      <v-data-table-virtual fixed-header :headers="headers" :items="currentUser.userTransactions"
-                        height="250" item-value="name">
-                      </v-data-table-virtual>
-
-                      <v-card-actions class="justify-center">
-                        <v-btn @click="isActive.value = false" text="Fermer"></v-btn>
-                      </v-card-actions>
-                    </v-card>
-                  </template>
-                </v-dialog>
+                <v-btn @click="openWalletDialog" class="full-width-btn" flat>
+                  <v-icon left class="mr-4">mdi-wallet</v-icon>
+                  <p>Bourse</p>
+                </v-btn>
               </v-list-item>
               <v-list-item v-if="currentUser">
                 <v-btn @click="logout()" class="full-width-btn" flat>Déconnecter</v-btn>
@@ -92,12 +44,11 @@
     </v-card>
 
     <!-- Mobile version -->
-    <v-card style="z-index: 2000; background-color: #f4f4f4;" class="hidden-md-and-up" hidden-md-and-up>
+    <v-card style="z-index: 2000; background-color: #f4f4f4;" class="hidden-md-and-up">
       <v-app-bar app>
         <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
         <v-row>
           <v-col cols="11" class="d-flex align-center justify-center">
-
             <!-- Logo Top bar -->
             <img src="/images/hutopymedia/banners/hutopy.png" class="mobile-header" alt="Logo">
           </v-col>
@@ -110,7 +61,7 @@
           <v-list-item :title="currentUserName">
             <template v-slot:prepend>
               <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
-                class="mobile-profile-picture mini-profile-picture " alt="Avatar">
+                class="mobile-profile-picture mini-profile-picture" alt="Avatar">
             </template>
           </v-list-item>
         </v-list>
@@ -119,79 +70,66 @@
         <v-divider></v-divider>
         <v-list density="compact" nav>
           <h1 class="h1-navigation">Navigation</h1>
-          <router-link :to="{ name: 'home' }" class="">
+          <router-link :to="{ name: 'home' }">
             <v-list-item prepend-icon="mdi-home" title="Accueil" value="home"></v-list-item>
           </router-link>
-          <RouterLink :to="{ name: 'userbrowser' }">
+          <router-link :to="{ name: 'userbrowser' }">
             <v-list-item prepend-icon="mdi-account-multiple" title="Membres" value="friends"></v-list-item>
-          </RouterLink>
+          </router-link>
 
-          <!-- <v-list-item prepend-icon="mdi-newspaper" title="Contenu" value="content"></v-list-item>-->
-          <v-list-item v-if="currentUser">
-            <v-dialog>
-
-              <template v-slot:activator="{ props: activatorProps }">
-                <v-btn v-bind="activatorProps" class="d-flex justify-start align-center full-width-btn"
-                  outlined="false">
-                  <v-icon left class="mr-4">mdi-wallet</v-icon>
-                  <p class="my-0">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>
-                          </v-col>
-                          <v-col>
-                            <h1 style="margin-bottom: 4%; font-size: 1.3rem;">{{ currentUser.totalBalance }}$</h1>
-                          </v-col>
-                        </v-row>
-                      </v-col>
-                      <v-col>
-
-                      </v-col>
-                    </v-row>
-                  </v-card-text>
-
-                  <v-data-table-virtual fixed-header :headers="headers" :items="currentUser.userTransactions"
-                    height="250" item-value="name">
-                  </v-data-table-virtual>
-
-                  <v-card-actions class="justify-center">
-                    <v-btn @click="isActive.value = false" text="Fermer"></v-btn>
-                  </v-card-actions>
-                </v-card>
-              </template>
-            </v-dialog>
-          </v-list-item>
+          <v-list-item v-if="currentUser" @click="openWalletDialog" prepend-icon="mdi-wallet" title="Bourse"
+            value="wallet"></v-list-item>
           <v-list-item v-if="currentUser" @click="logout()" style="margin-top: 110%;" prepend-icon="mdi-logout"
             title="Déconnecter" value="logout"></v-list-item>
         </v-list>
       </v-navigation-drawer>
     </v-card>
+
+    <!-- Wallet Modal -->
+    <v-dialog v-model="walletDialog" transition="dialog-top-transition" width="auto">
+      <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>
+                </v-col>
+                <v-col>
+                  <h1 style="margin-bottom: 4%; font-size: 1.3rem;">{{ currentUser.totalBalance }}$</h1>
+                </v-col>
+              </v-row>
+            </v-col>
+            <v-col></v-col>
+          </v-row>
+        </v-card-text>
+
+        <v-data-table-virtual fixed-header :headers="headers" :items="currentUser.userTransactions" height="250"
+          item-value="name">
+        </v-data-table-virtual>
+
+        <v-card-actions class="justify-center">
+          <v-btn @click="walletDialog = false" text="Fermer"></v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </body>
 </template>
 
-<script async setup>
+<script setup>
 import MyUserModel from "@/models/myUserModel.js";
 import { useClient } from "@/plugins/api.js";
 import { onBeforeMount, ref } from 'vue';
 const client = useClient();
 
 const drawer = ref(false);
-
-
 const currentUserName = ref("INVITÉ");
+const walletDialog = ref(false);
 let currentUser = null;
 
 const headers = ref([
@@ -205,25 +143,22 @@ onBeforeMount(async () => {
     const myUser = await client.get("/api/GetMyUser");
     const currentUserModel = MyUserModel.createFromApiResult(myUser.data);
     currentUser = currentUserModel;
-    currentUserName.value = currentUserModel.firstName + " " + currentUserModel.lastName
+    currentUserName.value = currentUserModel.firstName + " " + currentUserModel.lastName;
   } catch (error) {
-    console.log("User not logged")
+    console.log("User not logged");
   }
-})
+});
 
 function logout() {
   localStorage.removeItem('jwt');
   window.location.reload();
 }
 
-function openWalletModal() {
-
+function openWalletDialog() {
+  walletDialog.value = true;
 }
-
-
 </script>
 
-
 <style scoped>
 .full-width-btn {
   width: 100%;
@@ -246,16 +181,15 @@ function openWalletModal() {
 
 .mobile-profile-picture {
   height: 40px;
-  border-radius: px;
+  border-radius: 50px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
   border: 2px solid #a30e79;
-  margin-right: 10px
+  margin-right: 10px;
 }
 
 .header-banner {
   border-top: 5px solid rgba(107, 0, 101, 1);
   margin-top: 15%;
-
 }
 
 .social-container {
@@ -271,12 +205,21 @@ function openWalletModal() {
   font-size: 1.4rem;
   font-weight: 800;
   color: white;
-  min-width: 400px;
-
 }
 
 .mobile-header {
   height: 50px;
-
+  width: auto;
+  border-radius: 10px;
 }
-</style>
\ No newline at end of file
+
+.mobile-navigation-container {
+  background-color: #a30e79;
+}
+
+.h1-navigation {
+  padding-left: 20%;
+  font-size: 1.4rem;
+  font-weight: 800;
+}
+</style>

From b39b0b2795d4a31201309decd43f7179fb92fedb Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Mon, 20 May 2024 22:52:08 -0400
Subject: [PATCH 3/3] cleaning

---
 src/layouts/DefaultLayout.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index 2596b64..f6ad4ce 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -105,7 +105,6 @@
                 </v-col>
               </v-row>
             </v-col>
-            <v-col></v-col>
           </v-row>
         </v-card-text>