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

Update Modal wallet

Browse Source
This commit is contained in:
PascalMarchesseault
2024-05-19 23:19:43 -04:00
parent 385e2a3c3c
commit 76e4d31564
1 changed files with 70 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
src/layouts/DefaultLayout.vue
View File

@@ -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>
.mobile-navigation-container {
background-color: #a30e79;
}
.h1-navigation {
padding-left: 20%;
font-size: 1.4rem;
font-weight: 800;
}
</style>