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] 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>
