From 8963a3262f900d0b69a3219e2934780879285922 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sat, 18 May 2024 02:06:24 -0400
Subject: [PATCH] About us pictures

---
 src/layouts/DefaultLayout.vue   | 77 ++++++++++++---------------------
 src/views/PayementCompleted.vue |  4 +-
 src/views/tos/About.vue         |  2 -
 3 files changed, 30 insertions(+), 53 deletions(-)

diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index e7c774c..d59a345 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -25,7 +25,7 @@
 
             <!-- Dropdown Menu Profile/Connection -->
             <v-list style="padding: 0;">
-              <v-list-item>
+              <v-list-item v-if="!currentUser">
                 <router-link :to="{ name: 'contact' }">
                   <v-btn class="full-width-btn" flat>Inscription</v-btn>
                 </router-link>
@@ -33,20 +33,25 @@
               <v-list-item v-if="currentUser">
                 <v-dialog transition="dialog-top-transition" width="auto">
                   <template v-slot:activator="{ props: activatorProps }">
-                     <v-btn v-bind="activatorProps" class="d-flex align-start align-center main-background"
-                      elevation="0" outlined="false">
-                      <v-icon left class="mr-4">mdi-wallet</v-icon>
-                      <p>Bourse</p>
-                    </v-btn>
+                    <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>
+                          style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
                       </div>
                       <v-card-text class="text-h1 pa-12">
                         <v-row>
@@ -54,59 +59,26 @@
                             <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;">{{ currentUser.totalBalance }}$</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-data-table-virtual :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>
-
-                    <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">Message</v-col>
-                      </v-row>
-                    </v-card>
-
-                    <v-card style=" border-radius: 25px; margin-top: .5%; max-height: 450px;">
-                      <v-row v-for="(transaction, i) in currentUser.userTransactions" :key="i">
-                        <v-col style="margin-right: -2%;" cols="1" class="text-truncate">{{ i + 1 }}</v-col>
-                        <v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
-                               class="text-truncate">{{ transaction.amount }}$</v-col>
-                        <v-col cols="2" class="text-truncate">{{ transaction.created }}</v-col>
-                        <v-col cols="5" class="text-truncate" style="margin-right: 2%;  background-color: #fbccee">{{ transaction.tipMessage }}</v-col>
-                      </v-row>
-                    </v-card>
                   </template>
                 </v-dialog>
               </v-list-item>
@@ -164,27 +136,34 @@
 </template>
 
 <script async setup>
-import { onBeforeMount, ref } from 'vue';
-import {useClient} from "@/plugins/api.js";
 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É");
 let currentUser = null;
 
+const headers = ref([
+  { title: 'Transaction', value: 'index', width: '10%' },
+  { title: 'Montant', value: 'amount', width: '10%' },
+  { title: 'Date', value: 'created', width: '10%' },
+  { title: 'Message', value: 'tipMessage', width: '60%' }
+]);
+
 onBeforeMount(async () => {
   try {
     const myUser = await client.get("/api/GetMyUser");
     const currentUserModel = MyUserModel.createFromApiResult(myUser.data);
     currentUser = currentUserModel;
     currentUserName.value = currentUserModel.firstName + " " + currentUserModel.lastName
-  } catch(error) {
+  } catch (error) {
     console.log("User not logged")
   }
 })
 
-function logout(){
+function logout() {
   localStorage.removeItem('jwt');
   window.location.reload();
 }
diff --git a/src/views/PayementCompleted.vue b/src/views/PayementCompleted.vue
index 7a54e56..8af6c9f 100644
--- a/src/views/PayementCompleted.vue
+++ b/src/views/PayementCompleted.vue
@@ -35,9 +35,9 @@
                 <!-- Ok btn -->
                 <v-row>
                   <v-row style="margin-left: 30px; margin-right: 30px; margin-bottom: 10px;">
-                    <v-text-field variant="underlined" style=" opacity: 0.80; margin-right: 10px;" v-model="email"
+                    <v-text-field variant="underlined" style=" margin-right: 10px;" v-model="email"
                       label="Email"></v-text-field>
-                    <v-btn variant="plain" style="margin-top: 10px;" @click="getReceipt">Reçu</v-btn>
+                    <v-btn color="#6b0065" variant="outlined" style="margin-top: 10px;" @click="getReceipt">Reçu</v-btn>
                   </v-row>
                   <v-col cols="12">
 
diff --git a/src/views/tos/About.vue b/src/views/tos/About.vue
index 11e4e44..bd4576d 100644
--- a/src/views/tos/About.vue
+++ b/src/views/tos/About.vue
@@ -136,9 +136,7 @@
                                         positive et enrichissante pour tous les utilisateurs.</v-typography>
                                 </div>
                             </v-card>
-                        </v-row>
 
-                        <v-row justify="center">
                             <v-card max-width="250px" style="margin: 10px;">
                                 <img class="member-profile-picture"
                                     src="/images/hutopymedia/tospage/membersPictures/profileChloe.png"