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

Added btn profile + add name user and last name into fields when connected

Browse Source
This commit is contained in:
PascalMarchesseault
2024-06-09 01:12:41 -04:00
parent 4cfcf91520
commit bc07a0a3b5
2 changed files with 89 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/layouts/DefaultLayout.vue
View File

@@ -35,7 +35,16 @@
</v-btn>
</v-list-item>
<v-list-item v-if="currentUser">
<v-btn @click="logout()" class="full-width-btn" flat>Déconnecter</v-btn>
<router-link :to="{ name: 'yourprofile' }">
<v-btn class="full-width-btn" flat>
<v-icon left class="mr-4">mdi-account-details</v-icon>
<p>Mon profil</p>
</v-btn>
</router-link>
</v-list-item>
<v-list-item v-if="currentUser">
<v-btn @click="handleLogout" class="full-width-btn" flat>Déconnecter</v-btn>
</v-list-item>
</v-list>
</v-menu>
@@ -80,9 +89,15 @@
<v-list-item prepend-icon="mdi-handshake" title="Aidez-nous" value="friends"></v-list-item>
</router-link>
<router-link :to="{ name: 'yourprofile' }">
<v-list-item prepend-icon="mdi-account-details" title="Mon profil" 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"
<v-list-item v-if="currentUser" @click="handleLogout" style="margin-top: 110%;" prepend-icon="mdi-logout"
title="Déconnecter" value="logout"></v-list-item>
</v-list>
</v-navigation-drawer>
@@ -135,7 +150,6 @@ Hutopy est plus qu'une plateforme ; c'est une communauté où la transformation
</v-btn>
<v-btn @click="walletDialog = false" text="Fermer"></v-btn>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
@@ -146,7 +160,10 @@ Hutopy est plus qu'une plateforme ; c'est une communauté où la transformation
import MyUserModel from "@/models/myUserModel.js";
import { useClient } from "@/plugins/api.js";
import { onBeforeMount, ref } from 'vue';
import { useRouter } from 'vue-router';
const client = useClient();
const router = useRouter();
const drawer = ref(false);
const currentUserName = ref("INVITÉ");
@@ -172,7 +189,17 @@ onBeforeMount(async () => {
function logout() {
localStorage.removeItem('jwt');
window.location.reload();
currentUser = null;
currentUserName.value = "INVITÉ";
}
function handleLogout() {
logout();
Reroot();
}
function Reroot() {
router.push('/');
}
function openWalletDialog() {

100
src/views/main/YourProfile.vue
View File

@@ -8,80 +8,97 @@
<v-row justify="center">
<v-col cols="12">
<v-img class="profile-banner " max-height="375" :src="bannerImageUrl" cover
<v-img class="profile-banner" max-height="375" :src="bannerImageUrl" cover
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
</v-col>
</v-row>
<v-row style="background-color: #6b0065; height: 100px; margin-top: -0px;" align="center">
<v-row style="background-color: #6b0065; height: 100px; margin-top: 0;" align="center">
<v-col cols="12" class="text-right">
<v-btn style="margin-right: 3%"> <v-icon>mdi-pencil</v-icon></v-btn>
<v-btn style="margin-right: 3%;"> <v-icon>mdi-pencil</v-icon></v-btn>
</v-col>
</v-row>
<v-row justify="center">
</v-row>
<v-container style="max-width: 800px; margin-top: -100px" class="d-flex justify-center align-center">
<v-container>
<v-row>
<v-col style="background-color: white; border-radius: 30px;" class=" col-shadow">
<v-row style="margin-bottom: 20px;">
<v-spacer></v-spacer>
<v-col style="margin-top: -70px;">
<v-row>
<v-img class="your-profile-picture" :src="profilePictureUrl"></v-img>
</v-row>
<v-col>
<v-btn style="margin-top: -30px;">
<v-icon>mdi-pencil</v-icon>
</v-btn>
</v-col>
<v-row justify="center">
<v-col style="background-color: white; border-radius: 30px;" class="col-shadow" cols="12">
<v-row justify="center" style="margin-bottom: 20px;">
<v-col cols="auto" class="d-flex justify-center">
<v-img class="your-profile-picture" :src="profilePictureUrl"></v-img>
</v-col>
<v-col cols="auto" class="d-flex justify-center align-center">
<v-btn style="margin-top: -30px;">
<v-icon>mdi-pencil</v-icon>
</v-btn>
</v-col>
<v-spacer></v-spacer>
</v-row>
<p class="text-center" style="margin-bottom: 10px; font-size: 2.5rem; font-weight: 600;">User Name</p>
<p class="text-center" style="margin-bottom: 50px; font-size: 1.2rem">Informations personnelles</p>
<p class="text-center" style="margin-bottom: 10px; font-size: 2.5rem; font-weight: 600;">
{{ userName }}
</p>
<p class="text-center" style="margin-bottom: 50px; font-size: 1.2rem">
{{ firstName }} {{ lastName }}
</p>
<v-form>
<v-text-field v-model="firstName" label="Prénom"></v-text-field>
<v-text-field v-model="lastName" label="Nom"></v-text-field>
<v-text-field v-model="titre" label="Titre"></v-text-field>
<v-text-field v-model="description" label="Description"></v-text-field>
<v-text-field variant="solo" v-model="firstName" label="Prénom" :readonly="!isEditing"></v-text-field>
<v-text-field variant="solo" v-model="lastName" label="Nom" :readonly="!isEditing"></v-text-field>
<v-text-field variant="solo" v-model="titre" label="Titre" :readonly="!isEditing"></v-text-field>
<v-text-field variant="solo" v-model="description" label="Description"
:readonly="!isEditing"></v-text-field>
</v-form>
<v-col class="text-right"> <!-- Aligner le contenu à droite -->
<v-col class="text-right">
<router-link :to="{ name: 'creatorfolio' }" class="">
<v-btn style="margin-right: 20px;">Retour</v-btn>
</router-link>
<v-btn>Éditer</v-btn>
<v-btn @click="toggleEdit">{{ isEditing ? 'Sauvegarder' : 'Éditer' }}</v-btn>
</v-col>
</v-col>
</v-row>
</v-container>
</v-container>
<FooterLayout></FooterLayout>
</body>
</template>
<script setup>
<script async setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import { ref } from 'vue';
import MyUserModel from "@/models/myUserModel.js";
import { useClient } from "@/plugins/api.js";
import { onBeforeMount, ref } from 'vue';
const client = useClient();
const profilePictureUrl = ref('/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png');
const bannerImageUrl = ref('/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png');
const firstName = ref('');
const lastName = ref('');
const userName = ref('');
const titre = ref('');
const description = ref('');
const isEditing = ref(false);
const fetchUserData = async () => {
try {
const myUser = await client.get("/api/GetMyUser");
const currentUserModel = MyUserModel.createFromApiResult(myUser.data);
firstName.value = currentUserModel.firstName;
lastName.value = currentUserModel.lastName;
userName.value = currentUserModel.userName;
// Assignez d'autres champs si nécessaire
} catch (error) {
console.error('Error fetching user data:', error);
}
};
const toggleEdit = () => {
isEditing.value = !isEditing.value;
};
onBeforeMount(fetchUserData);
</script>
<style>
@@ -89,7 +106,6 @@ const bannerImageUrl = ref('/images/usersmedia/guillaumeMousseau/banners/bannerG
width: 300px;
border-radius: 40px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
}
.row-shadow {