#42 wallet and plugged to the backend

src/layouts/DefaultLayout.vue

@@ -9,10 +9,6 @@
           <v-menu>
             <template v-slot:activator="{ props }">
               <v-row>
-
-
-
-
                 <!-- Colonne de droite -->
                 <v-col class="text-right d-flex align-center justify-end">
                   <div class="d-flex align-center ">
@@ -34,9 +30,89 @@
                   <v-btn class="full-width-btn" flat>Inscription</v-btn>
                 </router-link>
               </v-list-item>
-              <!-- <v-list-item>
+              <v-list-item v-if="currentUser">
-                <v-btn class="full-width-btn" flat>Mon profil</v-btn>
+                <v-dialog transition="dialog-top-transition" width="auto">
-              </v-list-item>-->
+                  <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>
+                  </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;">{{ 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-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>
+              <v-list-item v-if="currentUser">
+                <v-btn @click="logout()" class="full-width-btn" flat>Déconnecter</v-btn>
+              </v-list-item>
             </v-list>
           </v-menu>
         </v-row>
@@ -90,16 +166,29 @@
 <script async setup>
 import { onBeforeMount, ref } from 'vue';
 import {useClient} from "@/plugins/api.js";
+import MyUserModel from "@/models/myUserModel.js";
 const client = useClient();
 
 const drawer = ref(false);
 const currentUserName = ref("INVITÉ");
+let currentUser = null;
 
 onBeforeMount(async () => {
+  try {
     const myUser = await client.get("/api/GetMyUser");
-  currentUserName.value = myUser.data.firstName + " " + myUser.data.lastName;
+    const currentUserModel = MyUserModel.createFromApiResult(myUser.data);
+    currentUser = currentUserModel;
+    currentUserName.value = currentUserModel.firstName + " " + currentUserModel.lastName
+  } catch(error) {
+    console.log("User not logged")
+  }
 })
 
+function logout(){
+  localStorage.removeItem('jwt');
+  window.location.reload();
+}
+
 </script>
 
 

src/models/myUserModel.js

@@ -0,0 +1,15 @@
+import UserTransactionsModel from "@/models/userTransactionsModel.js";
+
+export default class MyUserModel
+{
+    id = "";
+    firstName = "";
+    lastName = "";
+    userName = "";
+    totalBalance = "";
+    userTransactions = new UserTransactionsModel()
+
+    static createFromApiResult(apiResult){
+        return Object.assign(new MyUserModel(), apiResult);
+    }
+}

src/models/userTransactionsModel.js

@@ -0,0 +1,12 @@
+export default class UserTransactionsModel
+{
+    amount = "";
+    currency = "";
+    tipMessage = "";
+    created = "";
+
+
+createFromApiResult(apiResult){
+        return Object.assign(apiResult, new UserTransactionsModel())
+    }
+}