jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged PR 54: #42 wallet and plugged to the backend

Browse Source 
#42 wallet and plugged to the backend

Related work items: #42
This commit is contained in:
Dominic Villemure
2024-05-18 04:28:23 +00:00
parent 70d158705b 81953890d8
commit e7c462621b
3 changed files with 125 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/layouts/DefaultLayout.vue
View File

@@ -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-btn class="full-width-btn" flat>Mon profil</v-btn>
</v-list-item>-->
<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>
</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 () => {
const myUser = await client.get("/api/GetMyUser");
currentUserName.value = myUser.data.firstName + " " + myUser.data.lastName;
try {
const myUser = await client.get("/api/GetMyUser");
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>

15
src/models/myUserModel.js Normal file
View File

@@ -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);
}
}

12
src/models/userTransactionsModel.js Normal file
View File

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