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

I added the modal files and connected them to their buttons. I need to complete every modal file.

Browse Source
This commit is contained in:
PascalMarchesseault
2024-07-26 12:21:21 -04:00
parent fc95f59490
commit 81d2ae4fda
24 changed files with 428 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/views/Profile/PersonnalInfo.vue Normal file
View File

@@ -0,0 +1,166 @@
<template>
<div class="flex flex-col items-center w-full">
<h1 class="uppercase pb-5 text-2xl">
<v-icon class="mr-2">mdi-information</v-icon> Informations personnelles
</h1>
<div class="border rounded-2xl w-full max-w-[800px]">
<div class="py-5 uppercase ml-4">Information de base</div>
<div class="flex flex-col w-full">
<button
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
@click="openModal('Name')">
<span class="min-w-32 text-left">Photo de profil</span>
<span class="flex-auto pr-6 text-left">Une photo de profil aide à personnaliser votre compte</span>
<span class="flex-none">
<img
:src="'/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
alt="Profile Image"
class="ml-2 rounded-full"
style="width: 48px; height: 48px;">
</span>
</button>
<button
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
@click="openModal('Name')">
<span class="pa-2 min-w-32 text-left">Nom</span>
<span class="flex-auto text-left pr-6">Pascal Marchesseault</span>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
</span>
</button>
<button
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
@click="openModal('Birthday')">
<span class="flex-none pa-2 min-w-32 text-left">Anniversaire</span>
<span class="flex-auto text-left pr-6">27 octobre 1988</span>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
</span>
</button>
<button
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out rounded-b-2xl w-full"
@click="openModal('Gender')">
<span class="flex-none pa-2 min-w-32 text-left">Genre</span>
<span class="flex-auto text-left pr-6">Homme</span>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
</span>
</button>
</div>
</div>
</div>
<!-- Phone & email -->
<div class="flex flex-col items-center mt-10 w-full">
<div class="border rounded-2xl w-full max-w-[800px]">
<div class="py-5 uppercase ml-4">Coordonnées</div>
<div class="flex flex-col w-full">
<button
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
@click="openModal('Email')">
<span class="min-w-32 text-left">Courriel</span>
<span class="flex-auto pr-6 text-left">marchesseault_pascal@hotmail.com</span>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
</span>
</button>
<button
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl"
@click="openModal('Phone')">
<span class="pa-2 min-w-32 text-left">Téléphone</span>
<span class="flex-auto text-left pr-6">(581) 999-7540</span>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
</span>
</button>
</div>
</div>
</div>
<!-- Address -->
<div class="flex flex-col items-center mt-10 w-full">
<div class="border rounded-2xl w-full max-w-[800px]">
<div class="py-5 uppercase ml-4">Adresses</div>
<div class="flex flex-col w-full">
<button
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
@click="openModal('AdressesHome')">
<span class="min-w-32 text-left">Domicile</span>
<span class="flex-auto pr-6 text-left">2127 Rue De Casson, Trois-Rivières, Qc</span>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
</span>
</button>
<button
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl"
@click="openModal('AdressesWork')">
<span class="pa-2 min-w-32 text-left">Travail</span>
<span class="flex-auto pr-6 text-left">2127 Rue De Casson, Trois-Rivières, Qc</span>
<span class="flex-none">
<v-icon>mdi-chevron-right</v-icon>
</span>
</button>
</div>
</div>
</div>
<!-- Modal -->
<v-dialog v-model="dialog" max-width="600px">
<v-card>
<v-card-title>
<v-spacer></v-spacer>
</v-card-title>
<v-card-text>
<component :is="currentComponent"></component>
</v-card-text>
</v-card>
</v-dialog>
</template>
<script setup>
import { ref } from 'vue';
import Name from '@/views/Profile/Dialogs/PersonnalInfo/Name.vue';
import AdressesHome from '@/views/Profile/Dialogs/PersonnalInfo/AdressesHome.vue';
import AdressesWork from '@/views/Profile/Dialogs/PersonnalInfo/AdressesWork.vue';
import Birthday from '@/views/Profile/Dialogs/PersonnalInfo/Birthday.vue';
import Email from '@/views/Profile/Dialogs/PersonnalInfo/Email.vue';
import Gender from '@/views/Profile/Dialogs/PersonnalInfo/Gender.vue';
import Phone from '@/views/Profile/Dialogs/PersonnalInfo/Phone.vue';
const dialog = ref(false);
const currentComponent = ref('');
const componentsMap = {
Name,
AdressesHome,
AdressesWork,
Birthday,
Email,
Gender,
Phone
};
const openModal = (component) => {
currentComponent.value = componentsMap[component];
dialog.value = true;
};
</script>
<style>
.HoverBtn:hover {
@apply bg-[#A6147D] text-white;
@apply hover:opacity-90; /* Réduire l'opacité au survol */
}
</style>