Files
salvato.newfreeplanet/src/views/user/myprofile/myprofile.vue

840 lines
28 KiB
Vue
Executable File

<template>
<div v-if="isDebugOn" class="bg-red text-white">
<span v-if="!!tools.isLogged()">Logged: {{ tools.isLogged() }}</span> -
<span v-if="!!tools.isUserOk()">UserOk: {{ tools.isUserOk() }}</span> -
<span v-if="caricato">caricato: {{ caricato }}</span> -
<span v-if="userStore.userprofile"
>userStore.userprofile: {{ userStore.userprofile.username }}</span
>
</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.isLogged()">
<div class="q-gutter-sm q-pa-sm q-pb-md">
<div
v-if="userStore.userprofile && userStore.userprofile.date_reg"
class="fit column no-wrap justify-evenly items-center content-start"
>
<div class="">
<q-avatar size="140px">
<q-img
:src="
userStore.userprofile.profile
? getImgUser(userStore.userprofile.profile)
: ''
"
:alt="username"
img-class="imgprofile"
height="140px"
@click="showPic = true"
/>
<q-badge
v-if="tools.isUserOnline(userStore.userprofile)"
align="top"
floating
color="green"
>online</q-badge
>
<q-badge
v-if="
userStore.IsHandShakeByUsername(userStore.userprofile.username)
"
align="bottom"
floating
color="red"
><q-icon name="fas fa-handshake"></q-icon
></q-badge>
</q-avatar>
</div>
<div class="last_access">
OnLine:
<CTimeAgo :datetime="userStore.userprofile.lasttimeonline" />
</div>
<div v-if="userStore.userprofile.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') && userStore.userprofile.name">
{{ userStore.userprofile.name }}</span
>
<span v-if="checkifShow('surname') && userStore.userprofile.surname"
>&nbsp;{{ userStore.userprofile.surname }}</span
>
</div>
</div>
<div class="col-12 text-h7 text-blue text-shadow-2">
{{ userStore.userprofile.username }}
</div>
<div
v-if="
userStore.userprofile && userStore.userprofile.profile.qualifica
"
class="col-12 text-h8 q-mt-sm"
>
<span v-if="userStore.userprofile.profile.qualifica">
<em
><div class="qualifica">
{{ userStore.userprofile.profile.qualifica }}
</div></em
>
</span>
</div>
<div
v-if="
userStore.userprofile && userStore.userprofile.profile.biografia
"
class="col-12 text-h8 q-mt-sm"
>
{{ userStore.userprofile.profile.biografia }}
</div>
</div>
</div>
<CCheckIfIsLogged></CCheckIfIsLogged>
</div>
<div v-else-if="tools.isUserOk() || tools.isLogged()">
<div v-if="userStore.userprofile">
<CNotifAtTop />
<div class="q-gutter-sm q-pa-sm q-pb-md">
<div
v-if="userStore.userprofile && userStore.userprofile.date_reg"
class="fit column no-wrap justify-evenly items-center content-start"
>
<div class="">
<q-avatar size="140px">
<q-img
:src="
userStore.userprofile.profile
? getImgUser(userStore.userprofile.profile)
: ''
"
:alt="username"
img-class="imgprofile"
height="140px"
@click="showPic = true"
/>
<q-badge
v-if="tools.isUserOnline(userStore.userprofile)"
align="top"
floating
color="green"
>online</q-badge
>
<q-badge
v-if="!tools.isVerifiedByUser(userStore.userprofile)"
align="bottom"
floating
color="red"
>Da Ammettere</q-badge
>
</q-avatar>
</div>
<div class="last_access">
OnLine:
<CTimeAgo :datetime="userStore.userprofile.lasttimeonline" />
</div>
<div v-if="userStore.userprofile.reported">
<CTitleBanner
title="⚠️ L'utente è stato Segnalato per comportamento non idoneo."
bgcolor="bg-red"
clcolor="text-white"
>
</CTitleBanner>
</div>
<div>
<q-inner-loading :showing="spinner_visible">
<q-spinner-tail size="3em" color="primary" />
</q-inner-loading>
</div>
<div v-if="site && site.confpages && site.confpages.showNameSurname">
<div class="text-h6">
<span v-if="checkifShow('name') && userStore.userprofile.name">
{{ userStore.userprofile.name }}</span
>
<span
v-if="checkifShow('surname') && userStore.userprofile.surname"
>&nbsp;{{ userStore.userprofile.surname }}</span
>
</div>
</div>
<div class="col-12 text-h7 text-blue text-shadow-2">
{{ userStore.userprofile.username }}
</div>
<div
v-if="
userStore.userprofile.profile.qualifica &&
userStore.userprofile._id
"
class="col-12 text-h8 q-mt-sm"
>
<span v-if="userStore.userprofile.profile.qualifica">
<em
><div class="qualifica">
{{ userStore.userprofile.profile.qualifica }}
</div></em
>
</span>
</div>
<CContactUser
:myuser="userStore.userprofile"
:showBtnActivities="false"
:showBtnRis="true"
:sendRIS="tools.isUserOk() ? sendRIS : false"
:causalDest="causalDest"
@showed="showed"
/>
<div>
<div class="row justify-center">
<q-btn
v-if="
userStore.userprofile.profile &&
userStore.userprofile.profile.handshake &&
userStore.userprofile.profile.handshake.length > 0
"
:label="quantiHandShake"
class="q-my-sm"
color="grey-3"
:text-color="$q.dark.isActive ? 'black' : 'black'"
rounded
icon="fas fa-handshake"
@click="
usersList.show = true;
usersList.title = 'Lista Strette di mano';
usersList.list = userStore.userprofile.profile.handshake;
"
>
</q-btn>
<q-btn
v-if="
userStore.userprofile.username !== myusername() &&
handshake_inCommon &&
handshake_inCommon.length > 0
"
:label="quanteHandShakeInCommon"
class="q-my-sm"
:text-color="$q.dark.isActive ? 'black' : 'black'"
rounded
icon="fas fa-handshake"
@click="
usersList.show = true;
usersList.title = 'Strette di mano in Comune';
usersList.list = handshake_inCommon;
"
>
</q-btn>
</div>
<div
v-if="userStore.userprofile.username !== myusername()"
class="row justify-center"
>
<q-chip
v-if="
userStore.IsHandShakeByMe(userStore.userprofile) &&
userStore.IsHandShakeByUsername(
userStore.userprofile.username
)
"
color="green"
dense
class="chipbooked shadow-5 q-pa-sm2"
size="md"
text-color="white"
icon="fas fa-handshake"
>
<span
>&nbsp;<em
class="q-pa-xxs text-white rounded-borders shadow-2"
>
{{
$t('db.both_fiducia', {
username: userStore.userprofile.username,
})
}}
</em></span
>
</q-chip>
<q-chip
v-else-if="
!userStore.IsHandShakeByMe(userStore.userprofile) &&
userStore.IsHandShakeByUsername(
userStore.userprofile.username
)
"
color="blue"
dense
class="cltexth4 chipbooked shadow-5 q-pa-sm2"
size="md"
text-color="white"
icon="fas fa-handshake"
>
<span
>&nbsp;<em
class="q-pa-xxs text-white rounded-borders shadow-2"
>
{{
$t('db.handshake_him', {
username: userStore.userprofile.username,
})
}}
</em></span
>
</q-chip>
<q-chip
v-else-if="
userStore.IsHandShakeByMe(userStore.userprofile) &&
!userStore.IsHandShakeByUsername(
userStore.userprofile.username
)
"
color="blue"
dense
class="cltexth4 chipbooked shadow-5 q-pa-sm2"
size="md"
text-color="white"
icon="fas fa-handshake"
>
<span
>&nbsp;<em
class="q-pa-xxs text-white rounded-borders shadow-2"
>
{{
$t('db.handshake_you', {
username: userStore.userprofile.username,
})
}}
</em></span
>
</q-chip>
</div>
<!--HANDSHAKE-->
<div
v-if="
!isMyRecord(userStore.userprofile.username) && tools.isUserOk()
"
>
<div
class="row centeritems q-pa-sm"
v-if="!userStore.IsHandShakeByMe(userStore.userprofile)"
>
<q-btn
v-if="
userStore.IsHandShakeByUsername(
userStore.userprofile.username
)
"
icon="fas fa-handshake"
color="positive"
dense
:label="$t('handshake.accept_you_too_handshake')"
@click="
tools.addToMyHandShake(
$q,
userStore.my.username,
userStore.userprofile.username
)
"
/>
<q-btn
v-else
icon="fas fa-handshake"
color="positive"
dense
:label="$t('handshake.accept_handshake')"
@click="
tools.addToMyHandShake(
$q,
userStore.my.username,
userStore.userprofile.username
)
"
/>
</div>
</div>
</div>
<div
v-if="!isMyRecord(userStore.userprofile.username)"
class="q-ma-sm"
>
<div class="row justify-center">
<div
class="row centeritems q-ma-sm q-pa-sm"
v-if="
costanti.ENABLE_FRIENDS &&
userStore.IsReqFriendByUsername(
userStore.userprofile.username
)
"
>
<q-btn
icon="fas fa-user-plus"
color="positive"
dense
:label="$t('friends.accept_friend')"
@click="
tools.addToMyFriends(
$q,
userStore.my.username,
userStore.userprofile.username
)
"
/>
<q-btn
icon="fas fa-user-minus"
outline
color="negative"
:label="$t('friends.reject_ask_friend')"
@click="
tools.refuseReqFriends(
$q,
userStore.my.username,
userStore.userprofile.username
)
"
/>
</div>
<div v-else>
<q-btn
v-if="
costanti.ENABLE_FRIENDS &&
!userStore.IsMyFriendByUsername(
userStore.userprofile.username
) &&
!userStore.IsAskedFriendByUsername(
userStore.userprofile.username
)
"
icon="fas fa-user-plus"
color="primary"
dense
:label="$t('friends.ask_friend')"
@click="
tools.setRequestFriendship(
$q,
userStore.my.username,
userStore.userprofile.username,
true
)
"
/>
</div>
</div>
<div class="row justify-center">
<q-btn
v-if="
userStore.IsMyFriendByUsername(
userStore.userprofile.username
) || userStore.IsHandShakeByMe(userStore.userprofile)
"
class="text-center"
rounded
dense
icon="fas fa-ellipsis-h"
>
<q-menu>
<q-list style="min-width: 150px">
<q-item
v-if="userStore.IsHandShakeByMe(userStore.userprofile)"
clickable
v-close-popup
@click="
tools.removeFromMyHandShake(
$q,
userStore.my.username,
userStore.userprofile.username
)
"
>
<q-item-section avatar>
<q-icon
color="negative"
name="fas fa-handshake-slash"
/>
</q-item-section>
<q-item-section>{{
$t('handshake.remove_from_myhandshake')
}}</q-item-section>
</q-item>
<q-item
v-if="
costanti.ENABLE_FRIENDS &&
userStore.IsMyFriendByUsername(
userStore.userprofile.username
)
"
clickable
icon="fas fa-user-minus"
outline
v-close-popup
@click="
tools.removeFromMyFriends(
$q,
userStore.my.username,
userStore.userprofile.username
)
"
>
<q-item-section avatar>
<q-icon color="negative" name="fas fa-user-minus" />
</q-item-section>
<q-item-section>{{
$t('friends.remove_from_myfriends')
}}</q-item-section>
</q-item>
<q-item
v-if="
userStore.IsMyFriendByUsername(
userStore.userprofile.username
)
"
clickable
icon="fas fa-ban"
v-close-popup
@click="
tools.blockUser(
$q,
userStore.my.username,
userStore.userprofile.username
)
"
>
<q-item-section avatar>
<q-icon color="negative" name="fas fa-ban" />
</q-item-section>
<q-item-section>{{
$t('friends.block_user')
}}</q-item-section>
</q-item>
<q-item
v-if="
userStore.IsMyFriendByUsername(
userStore.userprofile.username
)
"
clickable
v-close-popup
@click="
tools.reportUser(
$q,
userStore.my.username,
userStore.userprofile.username
)
"
>
<q-item-section avatar>
<q-icon color="negative" name="fas fa-flag" />
</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="
costanti.ENABLE_FRIENDS &&
userStore.IsAskedFriendByUsername(
userStore.userprofile.username
) &&
!userStore.IsMyFriendByUsername(
userStore.userprofile.username
)
"
icon="fas fa-user-minus"
outline
dense
:label="$t('friends.cancel_ask_friend_short')"
@click="
tools.cancelReqFriends(
$q,
userStore.my.username,
userStore.userprofile.username
)
"
/>
</div>
</div>
<q-tabs
v-model="tab"
dense
no-caps
class="bg-indigo text-white shadow-2 q-mt-sm full-width"
>
<q-tab
name="attivita"
:label="t('profile.annunci')"
icon="fas fa-pencil-alt"
/>
<q-tab
name="info"
:label="t('profile.info_pers')"
icon="fas fa-user"
/>
</q-tabs>
<q-tab-panels v-model="tab" animated keep-alive>
<q-tab-panel name="attivita">
<CMyActivities :introUser="false"></CMyActivities>
</q-tab-panel>
<q-tab-panel name="info">
<div
v-if="
userStore.userprofile._id &&
userStore.userprofile.profile.biografia
"
class="col-12 text-h8 q-mt-sm"
>
{{ userStore.userprofile.profile.biografia }}
<br />
</div>
<div
v-if="
userStore.userprofile &&
userStore.userprofile._id &&
tools.isUserOk()
"
>
<div
v-if="userStore.userprofile.profile"
class="fit column no-wrap justify-evenly content-start"
>
<div class="col-md-6 col-sm-6 q-ma-xs col-xs-12">
<CLabel
v-if="!!userStore.userprofile.profile.resid_province"
v-bind="$attrs"
:copy="false"
:value="
globalStore.getProvinceByProv(
userStore.userprofile.profile.resid_province
)
"
label="Provincia"
/>
<CLabel
v-if="!!userStore.userprofile.profile.resid_card"
v-bind="$attrs"
:copy="false"
:value="userStore.userprofile.profile.resid_card"
label="Zona"
/>
<CDateTime
v-if="
checkifShow('profile.dateofbirth') &&
!!userStore.userprofile.profile.dateofbirth
"
v-model:value="userStore.userprofile.profile.dateofbirth"
:label="$t('reg.dateofbirth')"
:canEdit="false"
>
</CDateTime>
<CLabel
v-if="!!getLinkWebSite()"
v-bind="$attrs"
:copy="false"
label="Sito Web"
>
<span
v-html="
tools.getlinkhref(getLinkWebSite(), getLinkWebSite())
"
/>
</CLabel>
<CLabel
v-if="!!userStore.userprofile.profile.cell"
v-bind="$attrs"
:copy="true"
:value="
userStore.userprofile.profile.intcode_cell +
userStore.userprofile.profile.cell
"
label="Cellulare"
/>
<!--
<CMyFieldRec
table="users"
:id="userStore.userprofile._id"
:rec="userStore.userprofile"
field="profile.cell"
class="cursor-pointer"
:canEdit="false"
:disable="true"
:canModify="false">
</CMyFieldRec>
-->
<div class="col-md-6 col-sm-6 q-ma-xs col-xs-12">
<CLabel
v-if="!!userStore.userprofile.useraport"
:label="t('profile.aportador_him')"
>
<CMyUser
:mycontact="userStore.userprofile.useraport"
:visu="costanti.FIND_PEOPLE"
@setCmd="tools.setCmd"
>
</CMyUser>
</CLabel>
</div>
</div>
</div>
</div>
</q-tab-panel>
</q-tab-panels>
</div>
</div>
<q-page-sticky
position="top-right"
:offset="[18, 18]"
class="z-top"
>
<q-fab
icon="fas fa-ellipsis-v"
color="accent"
external-label
vertical-actions-align="right"
direction="down"
>
<q-fab-action
@click="tools.copyToClip($q, getlinkpage(), true)"
color="primary"
icon="fas fa-link"
label-position="right"
:label="$t('profile.share_link')"
/>
<q-fab-action
label-position="right"
v-if="userStore.userprofile.username === myusername()"
color="secondary"
icon="fas fa-user-edit"
:label="$t('shared.edit_profile')"
@click.stop="gotoPage('/editprofile')"
/>
</q-fab>
</q-page-sticky>
<q-dialog v-model="showPic" full-height full-width>
<img :src="getImgUser()" :alt="username" class="full-width" />
</q-dialog>
<div
class="absolute-top-right q-mr-sm q-my-md"
style="margin-top: 50px !important"
>
<div class="column">
<q-btn
v-if="userStore.userprofile.username === myusername() && false"
flat
round
icon="fas fa-ellipsis-h"
style="z-index: 1"
>
<q-menu>
<q-list v-if="true" style="min-width: 200px">
<q-item
clickable
v-close-popup
@click.stop="gotoPage('/editprofile')"
>
<q-item-section avatar>
<q-icon color="blue" name="fas fa-pencil-alt" />
</q-item-section>
<q-item-section>
{{ $t('shared.edit_profile') }}
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<!--<q-btn
flat
round
color="blue"
icon="share"
style="z-index: 1"
@click.stop="tools.copyToClip($q, getlinkpage(), true)"
>
</q-btn>-->
</div>
</div>
</div>
<div v-else-if="caricato">
<h2>Utente {{ username }} non trovato</h2>
({{ filtroutente }})
</div>
</div>
<div v-else>
<CUserNonVerif></CUserNonVerif>
</div>
<q-dialog v-model="usersList.show">
<q-card class="dialog_card">
<q-toolbar class="bg-primary text-white">
<q-toolbar-title>
{{ usersList.title }}
</q-toolbar-title>
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
</q-toolbar>
<q-card-section class="inset-shadow">
<div v-for="(rec, i) in usersList.list" :key="i">
<CMyUser
:mycontact="rec"
:visu="costanti.FIND_PEOPLE"
@setCmd="tools.setCmd"
>
</CMyUser>
</div>
</q-card-section>
</q-card>
</q-dialog>
</template>
<script lang="ts" src="./myprofile.ts">
</script>
<style lang="scss" scoped>
@import './myprofile.scss';
</style>