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

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 {