myprojplanet_vite/src/views/user/myprofile/myprofile.vue

<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="myuser">myuser: {{ myuser.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="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-badge
              v-if="userStore.IsHandShakeByUsername(myuser.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="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>
    </div>
    <CCheckIfIsLogged></CCheckIfIsLogged>
  </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: <CTimeAgo :datetime="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="userStore.IsHandShakeByUsername(myuser.username)">
            <q-chip
              color="green"
              dense
              class="cltexth4 chipbooked shadow-5 q-pa-sm2"
              size="md"
              icon="fas fa-handshake"
            >
              <span
                >&nbsp;<em class="q-pa-xxs text-white rounded-borders shadow-2">
                  {{ $t('db.addtohandshake', { username: myuser.username }) }}
                </em></span
              >
            </q-chip>
          </div>
          <q-btn
            v-if="
              myuser.profile &&
              myuser.profile.handshake &&
              myuser.profile.handshake.length > 0
            "
            :label="quantiHandShake"
            class="q-my-sm"
            :text-color="$q.dark.isActive ? 'black' : 'black'"
            rounded
            icon="fas fa-handshake"
            @click="
              usersList.show = true;
              usersList.title = 'Lista Strette di mano';
              usersList.list = myuser.profile.handshake;
            "
          >
          </q-btn>
          <q-btn
            v-if="
              myuser.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>

          <!--HANDSHAKE-->
          <div v-if="!isMyRecord(myuser.username)">
            <div
              class="row centeritems q-ma-sm q-pa-sm"
              v-if="userStore.IsReqHandShakeByUsername(myuser.username)"
            >
              <q-btn
                icon="fas fa-handshake"
                color="positive"
                :label="$t('handshake.accept_handshake')"
                @click="
                  tools.addToMyHandShake(
                    $q,
                    myuser.username,
                    userStore.my.username
                  )
                "
              />
              <q-btn
                icon="fas fa-handshake-alt-slash"
                color="negative"
                :label="$t('handshake.reject_ask_handshake')"
                @click="
                  tools.refuseReqHandShake(
                    $q,
                    myuser.username,
                    userStore.my.username
                  )
                "
              />
            </div>
            <div v-else>
              <q-btn
                v-if="
                  !userStore.IsHandShakeByUsername(myuser.username) &&
                  !userStore.IsAskedHandShakeByUsername(myuser.username)
                "
                icon="fas fa-handshake"
                color="primary"
                :label="$t('handshake.ask_handshake')"
                @click="
                  tools.setRequestHandShake(
                    $q,
                    userStore.my.username,
                    myuser.username,
                    true
                  )
                "
              />
            </div>

            <q-btn
              v-if="
                userStore.IsAskedHandShakeByUsername(myuser.username) &&
                !userStore.IsHandShakeByUsername(myuser.username)
              "
              icon="fas fa-handshake-alt-slash"
              :text-color="$q.dark.isActive ? 'black' : 'black'"
              :label="$t('handshake.cancel_ask_handshake_short')"
              @click="
                tools.cancelReqHandShake(
                  $q,
                  userStore.my.username,
                  myuser.username
                )
              "
            />
          </div>
          <div v-if="!isMyRecord(myuser.username)" class="q-ma-sm">
            <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>

          <CContactUser :myuser="myuser" :showBtnActivities="true" />
        </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>

      <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>
  <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>