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

-Added Profile.vue and his components - select color and upload pictures UI

Browse Source
This commit is contained in:
PascalMarchesseault
2024-06-28 02:08:58 -04:00
parent 411049cc6d
commit e8fac33d81
5 changed files with 196 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/views/main/Profile.vue
View File

@@ -1,125 +1,37 @@
<template>
<div class="flex flex-col max-w-4xl mx-auto rounded-3xl shadow-2xl mt-16 mb-16 custom-bg">
<div class="px-2">
<div class="flex flex-col max-w-2xl mx-auto rounded-3xl shadow-2xl mt-2 mb-16">
<!-- Titre -->
<div class="text-center md:text-6xl text-2xl p-10 bg-white rounded-t-3xl border-b-4 border-b-gray-200">
<div
class="text-center text-4xl bg-fuchsia-900 p-3 rounded-t-3xl border-b-4 border-b-gray-200 font-sans text-white">
Personnaliser votre profil
</div>
<!-- Banner -->
<div class="py-5" >
<div class="flex justify-between items-center px-5 py-5">
<div>Photo de couverture</div>
</div>
<div>
<div class="bg-fuchsia-900 h-10"></div>
<img :src="bannerImageUrl" alt="Banner Image">
<div class="bg-fuchsia-900 h-14 flex justify-center items-center">
<div class="space-x-4">
<v-btn @click="changeTopColor">Couleur Haut</v-btn>
<v-btn @click="changeBottomColor">Couleur Bas</v-btn>
<v-btn @click="changeBottomColor">Couleur d'accent</v-btn>
</div>
</div>
</div>
</div>
<div class="px-3">
<v-file-input v-model="bannerImage" label="Téléverser une nouvelle bannière"
@change="onBannerFileChange"></v-file-input>
</div>
<!-- Profile -->
<div>
<div class="flex justify-between items-center px-5 py-5">
<div>Photo de profil</div>
</div>
<div class="flex justify-center pb-4">
<img :src="profilePictureUrl" class="rounded-full max-w-48 max-w-48" alt="Profile Image">
</div>
<div class="px-3">
<v-file-input v-model="profilePicture" label="Téléverser une nouvelle photo de profil"
@change="onProfileFileChange"></v-file-input>
</div>
</div>
<!-- Informations -->
<ProfileBanner></ProfileBanner>
<Aboutyou></Aboutyou>
<SocialLinks></SocialLinks>
<!-- Social Links -->
<div>
<SocialLinks></SocialLinks>
<div class="sticky inset-x-0 bottom-0 flex justify-center px-4 pb-4">
<div class="flex space-x-2">
<v-btn class="save-btn" @click="saveAll">Enregistrer</v-btn>
<router-link :to="`/${currentUserName}`">
<v-btn class="save-btn">Retour</v-btn>
</router-link>
</div>
</div>
</div>
</div>
</template>
<script async setup>
import MyUserModel from "@/models/myUserModel.js";
import {useClient} from "@/plugins/api.js";
import {onBeforeMount, ref} from 'vue';
import Aboutyou from "@/views/main/Aboutyou.vue";
import SocialLinks from "@/views/main/SocialLinks.vue";
const client = useClient();
const currentUserName = ref("Anonyme");
const profilePictureUrl = ref('/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png');
const bannerImageUrl = ref('/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png');
const bannerImage = ref(null);
const profilePicture = ref(null);
const onBannerFileChange = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
bannerImageUrl.value = e.target.result;
};
reader.readAsDataURL(file);
}
};
const onProfileFileChange = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
profilePictureUrl.value = e.target.result;
};
reader.readAsDataURL(file);
}
};
const fetchUserData = async () => {
try {
const myUser = await client.get("/api/GetMyUser");
} catch (error) {
console.error('Error fetching user data:', error);
}
};
const changeTopColor = () => {
// Logic to change top color
};
const changeBottomColor = () => {
// Logic to change bottom color
};
onBeforeMount(fetchUserData);
import ProfileBanner from "@/views/main/ProfileBanner.vue";
</script>
<style scoped>
.save-btn {
z-index: 10;
}
.icon-preview {
max-width: 250px;
max-height: 250px;
}
.custom-bg {
background-color: #F4F4F4;
}
</style>