Merge remote-tracking branch 'origin/main' into Homeview
This commit is contained in:
PascalMarchesseault
@@ -112,30 +112,104 @@
|
||||
<v-img src="../../../images/hutopy.png" alt="Description de l'image"
|
||||
style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
|
||||
<v-list dense class="main-background">
|
||||
<v-list-item-group>
|
||||
<router-link v-for="(item, index) in navigationItems" :key="index" :to="item.link">
|
||||
<v-list-item v-for="item in navigationItems">
|
||||
<router-link :to="item.link">
|
||||
<v-btn text class="d-flex align-start align-center main-background" elevation="0"
|
||||
outlined="false">
|
||||
<v-icon left class="mr-4">{{ item.icon }}</v-icon>
|
||||
{{ item.text }}
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
</v-col>
|
||||
<!-- Tools -->
|
||||
<v-col cols="12" class="px-0">
|
||||
<v-list dense class="d-flex align-start align-center main-background">
|
||||
<v-list-item-group>
|
||||
<router-link v-for="(item, index) in tools" :key="index" :to="item.link">
|
||||
<v-btn text class="btn-custom" elevation="0" outlined="false">
|
||||
<v-icon left class="mr-4">{{ item.icon }}</v-icon>
|
||||
{{ item.text }}
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-list-item-group>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-dialog transition="dialog-top-transition" width="auto">
|
||||
<template v-slot:activator="{ props: activatorProps }">
|
||||
<v-btn v-bind="activatorProps" text class="d-flex align-start align-center main-background" elevation="0"
|
||||
outlined="false">
|
||||
<v-icon left class="mr-4">mdi-wallet</v-icon>
|
||||
<p @click="isActive.value = false">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;">0$</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 text="Fermer" @click="isActive.value = false"></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">Name</v-col>
|
||||
<v-col cols="5" class="text-truncate text-center font-weight-bold">message</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
|
||||
<v-card style=" border-radius: 25px; margin-top: .5%; max-height: 450px;">
|
||||
<v-row>
|
||||
<v-col style="margin-right: -2%;" cols="1" class="text-truncate">1</v-col>
|
||||
<v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
|
||||
class="text-truncate">10$</v-col>
|
||||
<v-col cols="2" class="text-truncate">20-10-2025</v-col>
|
||||
<v-col cols="3" class="text-truncate"
|
||||
style="margin-right: 2%; background-color: #fbccee">Pascal</v-col>
|
||||
<v-col cols="5" class="text-truncate">Good Job</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-card>
|
||||
</template>
|
||||
</v-dialog>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-col>
|
||||
|
||||
<!-- Log-out -->
|
||||
<v-col cols="12" class="px-0 logout-button">
|
||||
<v-btn text class="d-flex align-start main-background align-center" elevation="0" outlined="false">
|
||||
@@ -149,96 +223,7 @@
|
||||
|
||||
|
||||
</v-row>
|
||||
|
||||
<v-row style="height: 1400px;"></v-row>
|
||||
|
||||
<!-- Wallet -->
|
||||
<v-row>
|
||||
<v-dialog transition="dialog-top-transition" width="auto">
|
||||
<template v-slot:activator="{ props: activatorProps }">
|
||||
<v-btn v-bind="activatorProps" text class="text-left" block size="x-large"
|
||||
style="margin-left: -20%; background-color: #f4f4f4; transform: scale(1.3);" elevation="0">
|
||||
<v-icon color="black">mdi-wallet</v-icon>
|
||||
<div @click="isActive.value = false">PORTEFEUILLE</div>
|
||||
</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;">0$</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 text="Fermer" @click="isActive.value = false"></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">Name</v-col>
|
||||
<v-col cols="5" class="text-truncate text-center font-weight-bold">message</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
|
||||
<v-card style=" border-radius: 25px; margin-top: .5%; max-height: 450px;">
|
||||
<v-row>
|
||||
<v-col style="margin-right: -2%;" cols="1" class="text-truncate">1</v-col>
|
||||
<v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
|
||||
class="text-truncate">10$</v-col>
|
||||
<v-col cols="2" class="text-truncate">20-10-2025</v-col>
|
||||
<v-col cols="3" class="text-truncate"
|
||||
style="margin-right: 2%; background-color: #fbccee">Pascal</v-col>
|
||||
<v-col cols="5" class="text-truncate">Good Job</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-card>
|
||||
</template>
|
||||
</v-dialog>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
</v-col>
|
||||
@@ -475,44 +460,31 @@
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import StripePayment from '../StripePayment.vue';
|
||||
|
||||
|
||||
let imageSrc = '../../../images/guillaimeaime3x.png';
|
||||
let profilePicture = '../../../images/guillaume.png';
|
||||
|
||||
let name = 'Guillaume Mousseau'
|
||||
let title = 'Créateur de contenus'
|
||||
let drawerbottom = false
|
||||
let navigationItems = [
|
||||
{ icon: 'mdi-home', text: 'Accueil', link: 'home' },
|
||||
{ icon: 'mdi-account-group', text: 'Amis', link: '/contact' },
|
||||
{ icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
|
||||
];
|
||||
let tools = [
|
||||
{ icon: 'mdi-wallet', text: 'Bourse', link: '/portefeuille' },
|
||||
]
|
||||
|
||||
|
||||
let items = [
|
||||
{icon: "icon", text: "text"},
|
||||
{icon: "icon2", text: "text2"},
|
||||
]
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageSrc: '../../../images/guillaimeaime3x.png',
|
||||
profilePicture: '../../../images/guillaume.png',
|
||||
name: 'Guillaume Mousseau',
|
||||
title: 'Créateur de contenus',
|
||||
facebookLink: 'www.facebook.com',
|
||||
instagramLink: 'www.instagram.com',
|
||||
xLink: 'x.com',
|
||||
tiktokLink: 'tiktok.com',
|
||||
drawer: false,
|
||||
drawerbottom: false,
|
||||
|
||||
items: [
|
||||
{ title: 'Item 1' },
|
||||
{ title: 'Item 2' },
|
||||
{ title: 'Item 3' },
|
||||
],
|
||||
navigationItems: [
|
||||
{ icon: 'mdi-home', text: 'Accueil', link: 'home' },
|
||||
{ icon: 'mdi-account-group', text: 'Amis', link: '/contact' },
|
||||
{ icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
|
||||
],
|
||||
tools: [
|
||||
{ icon: 'mdi-wallet', text: 'Bourse', link: '/portefeuille' },
|
||||
]
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.Hutopy-menu-sticky {
|
||||
position: sticky;
|
||||
|
||||
@@ -368,7 +368,7 @@
|
||||
</v-snackbar>
|
||||
|
||||
<v-list style="background-color: #F4F4F4;" lines="one">
|
||||
<v-list-item v-for=" item in itemList " :key="item" :title="item.id" :subtitle="item.title"></v-list-item>
|
||||
<v-list-item v-for=" item in itemList " :key="item" :title="item.firstName" :subtitle="item.lastName"></v-list-item>
|
||||
</v-list>
|
||||
<FooterLayout></FooterLayout>
|
||||
</div>
|
||||
@@ -392,10 +392,8 @@ let errorNoAccessSnackBar = ref(false);
|
||||
|
||||
async function callBackend() {
|
||||
try {
|
||||
const response = await client.get('/api/TodoItems?ListId=1&PageNumber=1&PageSize=10');
|
||||
const responseItems = response.data.items;
|
||||
const orderedResponseItems = responseItems.sort((a, b) => a.id - b.id);
|
||||
itemList.value = orderedResponseItems
|
||||
const response = await client.get('/api/JoinUs?PageNumber=1&PageSize=10');
|
||||
itemList.value = response.data.items;
|
||||
|
||||
} catch (error) {
|
||||
errorNoAccessSnackBar.value = true;
|
||||
|
||||
Reference in New Issue
Block a user