Files
myprojplanet_vite/src/views/user/myprofile/myprofile.vue
2022-12-17 22:12:18 +01:00

465 lines
14 KiB
Vue
Executable File

<template>
<div v-if="isDebugOn" class="bg-red text-white">
<div v-if="!!tools.isLogged()">Logged: {{ tools.isLogged() }}</div>
<div v-if="!!tools.isUserOk()">UserOk: {{ tools.isUserOk() }}</div>
<div v-if="caricato">caricato: {{ caricato }}</div>
<div v-if="myuser">myuser: {{ myuser.username }}</div>
</div>
<div v-if="!tools.isLogged()">
<CCheckIfIsLogged></CCheckIfIsLogged>
</div>
<div
v-if="!caricato"
class="fit column no-wrap justify-evenly items-center content-start"
>
<q-skeleton type="QAvatar" size="140px" height="140px" animation="fade" />
<q-card flat bordered style="width: 250px">
<div class="text-h6">
<q-skeleton :animation="animation" />
</div>
<div class="col-12 text-h7 text-grey text-center">
{{ username }}
</div>
<div class="col-12 text-h7">
<q-skeleton :animation="animation" />
</div>
<div class="col-12 text-h8 q-mt-sm">
<q-skeleton :animation="animation" />
</div>
<div class="col-12 text-h8 q-mt-sm">
<q-skeleton :animation="animation" />
</div>
</q-card>
</div>
<div v-else-if="tools.isUserOk() || tools.isLogged()">
<div v-if="myuser">
<CNotifAtTop />
<div class="q-gutter-sm q-pa-sm q-pb-md">
<div
v-if="myuser && myuser.date_reg"
class="fit column no-wrap justify-evenly items-center content-start"
>
<div class="">
<q-avatar size="140px">
<q-img
:src="myuser.profile ? getImgUser(myuser.profile) : ''"
:alt="username"
img-class="imgprofile"
height="140px"
@click="showPic = true"
/>
<q-badge
v-if="tools.isUserOnline(myuser)"
align="top"
floating
color="green"
>online</q-badge
>
</q-avatar>
</div>
<div class="last_access">
OnLine: {{ tools.timeAgo(myuser.lasttimeonline) }}
</div>
<div v-if="myuser.reported">
<CTitleBanner
title="⚠️ L'utente è stato Segnalato per comportamento non idoneo."
bgcolor="bg-red"
clcolor="text-white"
>
</CTitleBanner>
</div>
<div v-if="site && site.confpages && site.confpages.showNameSurname">
<div class="text-h6">
<span v-if="checkifShow('name') && myuser.name">
{{ myuser.name }}</span
>
<span v-if="checkifShow('surname') && myuser.surname"
>&nbsp;{{ myuser.surname }}</span
>
</div>
</div>
<div class="col-12 text-h7 text-blue text-shadow-2">
{{ myuser.username }}
</div>
<div class="col-12 text-h7">
<span v-if="myuser.profile && myuser.profile.born_city_id">
<CMyFieldRec
title=""
table="users"
tablesel="cities"
:id="myuser._id"
:rec="myuser"
field="profile.born_city_id"
:canEdit="false"
:canModify="false"
>
</CMyFieldRec>
{{ myuser.profile.born_city_str }}</span
>
<span
v-if="
myuser.profile &&
myuser.profile.nationality &&
myuser.profile.nationality !== 'Italia'
"
>({{ myuser.profile.nationality }})</span
>
</div>
<div v-if="myuser._id" class="col-12 text-h8 q-mt-sm">
<span v-if="myuser.profile.qualifica">
<em
><span class="qualifica">{{
myuser.profile.qualifica
}}</span></em
>
</span>
</div>
<div v-if="myuser._id" class="col-12 text-h8 q-mt-sm">
{{ myuser.profile.biografia }}
</div>
<div v-if="!isMyRecord(myuser.username)">
<div
class="row centeritems q-ma-sm q-pa-sm"
v-if="userStore.IsReqFriendByUsername(myuser.username)"
>
<q-btn
icon="fas fa-user-plus"
color="positive"
:label="$t('friends.accept_friend')"
@click="
tools.addToMyFriends(
$q,
userStore.my.username,
myuser.username
)
"
/>
<q-btn
icon="fas fa-user-minus"
color="negative"
:label="$t('friends.reject_ask_friend')"
@click="
tools.refuseReqFriends(
$q,
userStore.my.username,
myuser.username
)
"
/>
</div>
<div v-else>
<q-btn
v-if="
!userStore.IsMyFriendByUsername(myuser.username) &&
!userStore.IsAskedFriendByUsername(myuser.username)
"
icon="fas fa-user-plus"
color="primary"
:label="$t('friends.ask_friend')"
@click="
tools.setRequestFriendship(
$q,
userStore.my.username,
myuser.username,
true
)
"
/>
</div>
<q-btn
v-if="userStore.IsMyFriendByUsername(myuser.username)"
rounded
icon="fas fa-ellipsis-h"
>
<q-menu>
<q-list v-if="true" style="min-width: 150px">
<q-item
clickable
icon="fas fa-user-minus"
v-close-popup
@click="
tools.removeFromMyFriends(
$q,
userStore.my.username,
myuser.username
)
"
>
<q-item-section>{{
$t('friends.remove_from_myfriends')
}}</q-item-section>
</q-item>
<q-item
clickable
icon="fas fa-ban"
v-close-popup
@click="
tools.blockUser(
$q,
userStore.my.username,
myuser.username
)
"
>
<q-item-section>{{
$t('friends.block_user')
}}</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click="
tools.reportUser(
$q,
userStore.my.username,
myuser.username
)
"
>
<q-item-section avatar>
<q-icon color="negative" name="fas fa-user-minus" />
</q-item-section>
<q-item-section>{{
$t('friends.report_user')
}}</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-btn
v-if="
userStore.IsAskedFriendByUsername(myuser.username) &&
!userStore.IsMyFriendByUsername(myuser.username)
"
icon="fas fa-user-minus"
:label="$t('friends.cancel_ask_friend_short')"
@click="
tools.cancelReqFriends(
$q,
userStore.my.username,
myuser.username
)
"
/>
</div>
<div class="myrow justify-evenly items-center q-pa-sm q-ma-sm">
<div class="col-md-6 col-sm-6 q-ma-xs col-xs-12">
<q-btn
v-if="getLinkUserTelegram()"
icon="fab fa-telegram"
color="blue"
type="a"
size="md"
rounded
:label="$t('msgs.telegrammsg')"
:href="getLinkUserTelegram()"
target="__blank"
>
</q-btn>
<div v-else-if="myuser.email" class="row">
<CLabel
v-bind="$attrs"
:copy="true"
:value="myuser.email"
:label="$t('reg.email')"
/>
<q-btn
outline
icon="fas fa-envelope"
:color="$q.dark.isActive ? `shite` : `black`"
type="a"
size="md"
:label="$t('msgs.send_email')"
:href="tools.getemailto(myuser.email)"
target="__blank"
>
</q-btn>
</div>
</div>
<div class="col-md-6 col-sm-6 q-ma-xs col-xs-12">
<q-btn
icon="fas fa-house-user"
size="md"
color="orange"
:label="$t('profile.myactivities')"
:to="`/skills/` + myuser.username"
>
</q-btn>
</div>
<div class="col-md-6 col-sm-6 q-ma-xs col-xs-12">
<q-btn
v-if="
userStore.IsMyCircuitByUser(myuser).length > 0 &&
myuser.username !== myusername() &&
userStore.my.profile.calc.numGoodsAndServices > 0
"
icon="fas fa-coins"
color="green"
size="md"
rounded
:label="$t('circuit.sendcoins')"
@click="showsendCoinTo = true"
>
</q-btn>
</div>
<div v-if="myuser._id" class="col-md-6 col-sm-6 q-ma-xs col-xs-12">
<q-btn
v-if="getLinkWebSite()"
icon="fas fa-globe"
color="blue"
type="a"
size="md"
rounded
:label="$t('reg.website')"
:href="getLinkWebSite()"
target="__blank"
>
</q-btn>
</div>
</div>
<div class="myrow justify-evenly items-center q-pa-sm q-ma-sm">
<div v-if="myuser._id" class="col-12">
<q-btn
v-if="myuser.username === myusername()"
icon="fas fa-share-alt"
color="blue"
size="md"
rounded
:label="$t('reg.link_reg_and_msg')"
@click="
tools.sendMsgTelegramCmd(
$q,
$t,
shared_consts.MsgTeleg.SHARE_MSGREG,
true
)
"
>
</q-btn>
</div>
</div>
</div>
<div
v-if="
myuser &&
myuser._id &&
(userStore.IsMyFriendByUsername(myuser.username) ||
isMyRecord(myuser.username))
"
>
<CTitleBanner
class=""
:title="$t('dashboard.info')"
bgcolor="bg-primary"
clcolor="text-white"
myclass="myshad"
:canopen="true"
>
<div
v-if="myuser.profile"
class="fit column no-wrap justify-evenly content-start"
>
<div class="col-md-6 col-sm-6 q-ma-xs col-xs-12">
<CDateTime
v-if="
checkifShow('profile.dateofbirth') &&
!!myuser.profile.dateofbirth
"
v-model:value="myuser.profile.dateofbirth"
:label="$t('reg.dateofbirth')"
:canEdit="false"
>
</CDateTime>
<CLabel
v-if="!!myuser.profile.cell"
v-bind="$attrs"
:copy="true"
:value="myuser.profile.intcode_cell + myuser.profile.cell"
label="Cellulare"
/>
<!--
<CMyFieldRec
table="users"
:id="myuser._id"
:rec="myuser"
field="profile.cell"
class="cursor-pointer"
:canEdit="false"
:disable="true"
:canModify="false">
</CMyFieldRec>
-->
</div>
</div>
</CTitleBanner>
</div>
<div class="col-md-6 col-sm-6 q-ma-xs col-xs-12">
<CLabel v-if="!!myuser.useraport" :label="t('profile.aportador_him')">
<CMyUser
:mycontact="myuser.useraport"
:visu="costanti.FIND_PEOPLE"
@setCmd="tools.setCmd"
>
</CMyUser>
</CLabel>
</div>
</div>
<q-dialog v-model="showPic" full-height full-width>
<img :src="getImgUser()" :alt="username" class="full-width" />
</q-dialog>
<div v-if="showsendCoinTo">
<CSendCoins
:showprop="showsendCoinTo"
:to_user="myuser"
@close="showsendCoinTo = false"
>
</CSendCoins>
</div>
<q-page-sticky
v-if="myuser.username === myusername()"
position="top-right"
:offset="[18, 18]"
>
<q-btn
fab
glossy
class="semi-transparent"
icon="fas fa-pencil-alt"
color="primary"
to="/editprofile"
/>
</q-page-sticky>
</div>
<div v-else-if="caricato">
<h2>Utente {{ username }} non trovato</h2>
({{ filtroutente }})
</div>
</div>
<div v-else>
<CUserNonVerif></CUserNonVerif>
</div>
</template>
<script lang="ts" src="./myprofile.ts">
</script>
<style lang="scss" scoped>
@import './myprofile.scss';
</style>