144 lines
3.5 KiB
Vue
144 lines
3.5 KiB
Vue
<script setup>
|
|
import { useRouter } from 'vue-router';
|
|
import { useAuthStore } from '../stores/auth';
|
|
import { useNotificationsStore } from '../stores/notifications';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { ref } from 'vue';
|
|
import { onMounted } from 'vue';
|
|
import CustomRadioInput from './ui/CustomRadioInput.vue';
|
|
import { watch } from 'vue';
|
|
|
|
const lang = ref(null);
|
|
|
|
const noty = useNotificationsStore();
|
|
const auth = useAuthStore();
|
|
const router = useRouter();
|
|
const { t, locale } = useI18n();
|
|
|
|
onMounted(() => {
|
|
lang.value = localStorage.getItem('lang') ?? 'es';
|
|
locale.value = lang.value;
|
|
});
|
|
|
|
watch(lang, () => {
|
|
locale.value = lang.value
|
|
localStorage.setItem('lang', lang.value)
|
|
})
|
|
|
|
const closePopup = () => {
|
|
noty.toggleProfile()
|
|
}
|
|
|
|
const handleEditProfile = () => {
|
|
closePopup();
|
|
router.push({name: 'profile'})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="noty.openProfile"
|
|
>
|
|
<div
|
|
class="content-profile"
|
|
@click="closePopup()"
|
|
>
|
|
</div>
|
|
<div
|
|
class="profile-card">
|
|
<i class="fa-solid fa-xmark close-icon" @click="closePopup()"></i>
|
|
<h3>{{auth.user?.first_name}} {{ auth.user?.last_name }}</h3>
|
|
<p>{{ auth.user?.email }}</p>
|
|
<p>{{ auth.user?.phone }}</p>
|
|
<p class="section-prefs">{{ t('global.prefs') }}</p>
|
|
<p class="label-item">{{ t('global.lang') }}:</p>
|
|
<CustomRadioInput
|
|
value="es"
|
|
:label="t('global.es')"
|
|
name="lang"
|
|
v-model:typeselected="lang"
|
|
/>
|
|
<CustomRadioInput
|
|
value="en"
|
|
:label="t('global.en')"
|
|
name="lang"
|
|
v-model:typeselected="lang"
|
|
/>
|
|
<br>
|
|
<button
|
|
class="btn btn-dark"
|
|
data-toggle="modal"
|
|
data-target="#editProfileModal"
|
|
@click="handleEditProfile()"
|
|
>{{ t('buttons.editProfile') }}</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.content-profile {
|
|
position: fixed;
|
|
z-index: 1000;
|
|
width: 100wv;
|
|
right: 0px;
|
|
top: 0px;
|
|
left: 0px;
|
|
cursor: pointer;
|
|
bottom: 0px;
|
|
background-color: #000;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.profile-card {
|
|
position: fixed;
|
|
right: 20px;
|
|
top: 70px;
|
|
z-index: 2000;
|
|
width: 320px;
|
|
background-color: #FFF;
|
|
opacity: 1;
|
|
border-radius: 13px;
|
|
padding: 20px 32px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* flex-wrap: nowrap; */
|
|
/* overflow: hidden; */
|
|
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
|
|
}
|
|
|
|
.section-prefs {
|
|
margin-top: 20px !important;
|
|
font-size: 1rem !important;
|
|
color: grey;
|
|
}
|
|
|
|
.label-item {
|
|
font-weight: 900 !important;
|
|
font-size: 1.2rem !important;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.profile-card h3 {
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.profile-card p {
|
|
margin-top: 8px;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.close-icon {
|
|
display: flex;
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 16px;
|
|
cursor: pointer;
|
|
font-size: 24px;
|
|
}
|
|
</style> |