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

Merged PR 62: Bourse alignement, Paiement complété Recu modifié et le wallet est modifié

Browse Source 
Bourse alignement, Paiement complété Recu modifié et le wallet est modifié
This commit is contained in:
Pascal Marchesseault
2024-05-22 00:01:02 +00:00
parent 01b8eed0ad b39b0b2795
commit f9f07c84a6
1 changed files with 74 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
src/layouts/DefaultLayout.vue
View File

@@ -1,9 +1,8 @@
<template> <template>
<body style="background-color: #f4f4f4;"> <body style="background-color: #f4f4f4;">
<!-- PC Version --> <!-- 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-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-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
<v-menu> <v-menu>
@@ -14,7 +13,7 @@
<div class="d-flex align-center"> <div class="d-flex align-center">
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png" <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
class="header-profile-icon mr-2" alt="Logo"> 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 }} {{ currentUserName }}
</v-btn> </v-btn>
</div> </div>
@@ -22,7 +21,6 @@
</v-row> </v-row>
</template> </template>
<!-- Dropdown Menu Profile/Connection --> <!-- Dropdown Menu Profile/Connection -->
<v-list style="padding: 0;"> <v-list style="padding: 0;">
<v-list-item v-if="!currentUser"> <v-list-item v-if="!currentUser">
@@ -31,22 +29,64 @@
</router-link> </router-link>
</v-list-item> </v-list-item>
<v-list-item v-if="currentUser"> <v-list-item v-if="currentUser">
<v-dialog transition="dialog-top-transition" width="auto"> <v-btn @click="openWalletDialog" class="full-width-btn" flat>
<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> <v-icon left class="mr-4">mdi-wallet</v-icon>
<p>Bourse</p> <p>Bourse</p>
</v-btn> </v-btn>
</div> </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>
</v-container>
</v-card>
<!-- Mobile version -->
<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>
</v-row>
</v-app-bar>
<!-- Left-side Menu -->
<v-navigation-drawer v-model="drawer" temporary>
<v-list>
<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">
</template> </template>
</v-list-item>
</v-list>
<!-- Left-side Button -->
<v-divider></v-divider>
<v-list density="compact" nav>
<h1 class="h1-navigation">Navigation</h1>
<router-link :to="{ name: 'home' }">
<v-list-item prepend-icon="mdi-home" title="Accueil" value="home"></v-list-item>
</router-link>
<router-link :to="{ name: 'userbrowser' }">
<v-list-item prepend-icon="mdi-account-multiple" title="Membres" value="friends"></v-list-item>
</router-link>
<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 Modale --> <!-- Wallet Modal -->
<template v-slot:default="{ isActive }"> <v-dialog v-model="walletDialog" transition="dialog-top-transition" width="auto">
<v-card style="border-radius: 30px;"> <v-card style="border-radius: 30px;">
<div class="text-center" style="margin-top: 2%; margin-bottom: 2%;"> <div class="text-center" style="margin-top: 2%; margin-bottom: 2%;">
<v-icon left size="48">mdi-wallet</v-icon> <v-icon left size="48">mdi-wallet</v-icon>
@@ -65,9 +105,6 @@
</v-col> </v-col>
</v-row> </v-row>
</v-col> </v-col>
<v-col>
</v-col>
</v-row> </v-row>
</v-card-text> </v-card-text>
@@ -76,66 +113,14 @@
</v-data-table-virtual> </v-data-table-virtual>
<v-card-actions class="justify-center"> <v-card-actions class="justify-center">
<v-btn @click="isActive.value = false" text="Fermer"></v-btn> <v-btn @click="walletDialog = false" text="Fermer"></v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</template>
</v-dialog> </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>
</v-container>
</v-card>
<!-- Mobile version -->
<v-card style="z-index: 9000; background-color: #f4f4f4;" class="hidden-md-and-up" 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>
</v-row>
</v-app-bar>
<!-- Left-side Menu -->
<v-navigation-drawer v-model="drawer" temporary>
<v-list>
<v-list-item subtitle="email" title="ANONYME">
<template v-slot:prepend>
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
class="mobile-profile-picture mini-profile-picture " alt="Avatar">
</template>
</v-list-item>
</v-list>
<!-- Left-side Button -->
<v-divider></v-divider>
<v-list density="compact" nav>
<h1 class="h1-navigation">Navigation</h1>
<router-link :to="{ name: 'home' }" class="">
<v-list-item prepend-icon="mdi-home" title="Accueil" value="home"></v-list-item>
</router-link>
<RouterLink :to="{ name: 'userbrowser' }">
<v-list-item prepend-icon="mdi-account-multiple" title="Membres" value="friends"></v-list-item>
</RouterLink>
<!-- <v-list-item prepend-icon="mdi-newspaper" title="Contenu" value="content"></v-list-item>-->
<!-- <v-list-item prepend-icon="mdi-wallet" title="Portefeuille" value="wallet"></v-list-item>-->
<!-- <v-list-item style="margin-top: 110%;" prepend-icon="mdi-logout" title="Déconnexion"
value="logout"></v-list-item>-->
</v-list>
</v-navigation-drawer>
</v-card>
</body> </body>
</template> </template>
<script async setup> <script setup>
import MyUserModel from "@/models/myUserModel.js"; import MyUserModel from "@/models/myUserModel.js";
import { useClient } from "@/plugins/api.js"; import { useClient } from "@/plugins/api.js";
import { onBeforeMount, ref } from 'vue'; import { onBeforeMount, ref } from 'vue';
@@ -143,6 +128,7 @@ const client = useClient();
const drawer = ref(false); const drawer = ref(false);
const currentUserName = ref("INVITÉ"); const currentUserName = ref("INVITÉ");
const walletDialog = ref(false);
let currentUser = null; let currentUser = null;
const headers = ref([ const headers = ref([
@@ -156,20 +142,22 @@ onBeforeMount(async () => {
const myUser = await client.get("/api/GetMyUser"); const myUser = await client.get("/api/GetMyUser");
const currentUserModel = MyUserModel.createFromApiResult(myUser.data); const currentUserModel = MyUserModel.createFromApiResult(myUser.data);
currentUser = currentUserModel; currentUser = currentUserModel;
currentUserName.value = currentUserModel.firstName + " " + currentUserModel.lastName currentUserName.value = currentUserModel.firstName + " " + currentUserModel.lastName;
} catch (error) { } catch (error) {
console.log("User not logged") console.log("User not logged");
} }
}) });
function logout() { function logout() {
localStorage.removeItem('jwt'); localStorage.removeItem('jwt');
window.location.reload(); window.location.reload();
} }
function openWalletDialog() {
walletDialog.value = true;
}
</script> </script>
<style scoped> <style scoped>
.full-width-btn { .full-width-btn {
width: 100%; width: 100%;
@@ -192,16 +180,15 @@ function logout() {
.mobile-profile-picture { .mobile-profile-picture {
height: 40px; height: 40px;
border-radius: px; border-radius: 50px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
border: 2px solid #a30e79; border: 2px solid #a30e79;
margin-right: 10px margin-right: 10px;
} }
.header-banner { .header-banner {
border-top: 5px solid rgba(107, 0, 101, 1); border-top: 5px solid rgba(107, 0, 101, 1);
margin-top: 15%; margin-top: 15%;
} }
.social-container { .social-container {
@@ -217,12 +204,21 @@ function logout() {
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 800; font-weight: 800;
color: white; color: white;
min-width: 400px;
} }
.mobile-header { .mobile-header {
height: 50px; height: 50px;
width: auto;
border-radius: 10px;
}
.mobile-navigation-container {
background-color: #a30e79;
}
.h1-navigation {
padding-left: 20%;
font-size: 1.4rem;
font-weight: 800;
} }
</style> </style>