myprojplanet_vite/src/components/MyHeader/MyHeader.vue

<template>
  <div>
    <q-header v-if="site" reveal elevated :class="getClassColorHeader" :style="`color: ` + getColorText + `;`">
      <q-toolbar color="primary" :glossy="!$q.platform.is.ios && !$q.platform.is.android" :inverted="$q.platform.is.ios"
        class="toolbar">
        <q-btn flat dense round @click="clickMenu3Orizz" aria-label="Menu">
          <q-icon name="menu" />
        </q-btn>

        <div v-if="$q.platform.is.desktop">
          <!--I'm only rendered on desktop!-->
        </div>

        <div v-if="$q.platform.is.mobile">
          <!--I'm only rendered on mobile!-->
        </div>

        <div v-if="$q.platform.is.electron">
          <!--I'm only rendered on Electron!-->
        </div>

        <q-btn size="md" id="newvers" v-if="isNewVersionAvailable() || data.updateExists" color="secondary" rounded
          icon="refresh" class="btnNewVersShow" @click="RefreshApp()" :label="t('notification.newVersionAvailable')">
        </q-btn>

        <q-toolbar-title class="row items-center">
          <q-avatar @click="toHome" class="imglink">
            <img :src="imglogo()" height="27" alt="Immagine Logo" />
          </q-avatar>
          <div v-if="$q.screen.gt.xs" class="q-mx-sm titlesite">
            {{ getappname() }}
          </div>
        </q-toolbar-title>

        <!--
                        <div v-if="isAdmin">
                            <q-btn flat dense round aria-label="">
                                <q-icon :class="clCloudUpload" nametranslate="cloud_upload"></q-icon>
                            </q-btn>

                            <q-btn flat dense round aria-label="">
                                <q-icon :class="clCloudUp_Indexeddb" nametranslate="arrow_upward"></q-icon>
                            </q-btn>

                        </div>
        -->

        <div v-if="site.confpages && site.confpages.show_darkopt" class="text-h7">
          <q-toggle :icon="'fas fa-moon'" v-model="dark"> </q-toggle>
        </div>
        <div v-if="
          tools.isLogged() &&
          (isAdmin() || tools.isEditor() || tools.isGrafico())
        " class="text-h7">
          <q-toggle :icon="'fas fa-pencil-alt'" v-model="editOn"> </q-toggle>
        </div>
        <q-btn v-if="!isonline() && site.confpages && site.confpages.showConnected" flat dense round
          aria-label="Connection">
          <q-icon :name="iconConn" :class="clIconConn"></q-icon>
          <q-icon v-if="isUserNotAuth" name="device_unknown"></q-icon>
        </q-btn>

        <q-btn-dropdown stretch v-if="isfinishLoading && static_data.lang_available.length > 1" flat :label="langshort"
          auto-close>
          <q-list bordered>
            <q-item clickable v-ripple v-for="langrec in static_data.lang_available" :key="langrec.value"
              @click="lang = langrec.value">
              <q-item-section avatar>
                <img :src="langrec.image" class="flagimg" alt="flag" />
              </q-item-section>
              <q-item-section>
                {{ langrec.label }}
              </q-item-section>
            </q-item>
          </q-list>
        </q-btn-dropdown>

        <div v-if="site.confpages && site.confpages.showMsgs">
          <message-popover></message-popover>
        </div>
        <div v-if="site.confpages?.showCoins || site.confpages?.showRIS">
          <coinsPopover v-model="rightCoinsOpen"></coinsPopover>
        </div>
        <div v-if="site.confpages && site.confpages.showNotif">
          <notifPopover v-model="rightNotifOpen"></notifPopover>
        </div>

        <!--
        <div class="right-itens">
            <label>{{ t('msg.hello') }}</label> <span v-model="prova"></span> !
        </div>-->

        <!-- BUTTON USER BAR -->

        <q-btn class="q-mx-xs" v-if="
          site.confpages && site.confpages.enableEcommerce && tools.isLogged()
        " round dense flat @click="rightCartOpen = !rightCartOpen" icon="fas fa-shopping-cart">
          <q-badge v-if="getnumItemsCart() > 0" color="red" floating transparent>
            {{ getnumItemsCart() }}
          </q-badge>
        </q-btn>

        <q-btn class="q-mx-xs" v-if="
          site.confpages &&
          site.confpages.enableEcommerce &&
          tools.isLogged() &&
          getnumOrdersCart() > 0
        " round dense flat to="/orderinfo" icon="fas fa-list-ol">
          <q-badge v-if="getnumOrdersCart() > 0" color="blue" floating transparent>
            {{ getnumOrdersCart() }}
          </q-badge>
        </q-btn>

        <q-btn class="q-mx-xs" v-if="
          site.confpages && site.confpages.showUserMenu && !tools.isLogged()
        " dense flat round icon="fas fa-user" @click="rightDrawerOpen = !rightDrawerOpen">
        </q-btn>
        <q-avatar v-else-if="
          site.confpages &&
          site.confpages.showUserMenu &&
          tools.isLogged() &&
          getMyImg() &&
          $q.screen.gt.sm
        " size="36px" class="center_img cursor-pointer" @click="rightDrawerOpen = !rightDrawerOpen">
          <q-img ratio="1" fit="cover" :src="getMyImg()" :alt="Username()" img-class="imgprofile_small"
            stretch="false" />
        </q-avatar>
        <q-btn v-else-if="$q.screen.gt.xs" class="q-mx-xs iconprofile_small" round dense flat
          @click="rightDrawerOpen = !rightDrawerOpen" :icon="getMyImgforIcon()" :color="getcolormenu()">
        </q-btn>
      </q-toolbar>
    </q-header>

    <q-drawer side="left" bordered :show-if-above="globalStore.leftDrawerOpen" :breakpoint="800"
      v-model="leftDrawerOpen" :content-class="['bg-grey-1', 'q-pa-sm']" :content-style="{ padding: '0px' }">
      <drawer :clBase="clBase"></drawer>
    </q-drawer>

    <!-- USER BAR -->
    <q-drawer v-if="site.confpages && site.confpages.enableEcommerce" v-model="rightCartOpen" class="q-drawer-cart"
      side="right" elevated>
      <q-btn class="absolute-top-right" :style="`margin-right: 10px; color:` + getColorText + `;`" dense flat round
        icon="close" @click="rightCartOpen = !rightCartOpen">
      </q-btn>

      <CSelectUserActive></CSelectUserActive>

      <div v-if="tools.isLogged()" class="text-weight-bold text-cart">
        {{ $t("ecomm.carrello_di", { user: products.userActive.username }) }}
      </div>
      <CMyCart v-if="isfinishLoading"></CMyCart>
    </q-drawer>
    <!-- USER BAR -->
    <q-drawer v-if="site.confpages && site.confpages.showUserMenu" v-model="rightDrawerOpen" side="right" elevated>
      <div id="profile">
        <q-img class="absolute-top" src="/images/landing_first_section.png" style="height: 150px" alt="section page">
        </q-img>
        <div class="absolute-top bg-transparent text-black center_img" style="margin-top: 10px">
          <div :class="`text-center q-ma-xs boldhigh text-` + getColorText + ` text-h7`
            ">
            {{ t("header.area_personale") }}
          </div>

          <q-avatar size="80px" class="center_img q-ma-md">
            <q-img fit="cover" :src="getMyImg()" :alt="Username()" img-class="imgprofile" height="80px" />
          </q-avatar>

          <!--<CMyAvatar :myimg="getMyImg()"></CMyAvatar>-->

          <q-btn class="absolute-top-right" :style="`margin-right: 10px; color: ` + getColorText + `;`" dense flat round
            icon="close" @click="rightDrawerOpen = !rightDrawerOpen">
          </q-btn>

          <div v-if="tools.isLogged()" class="text-weight-bold text-user">
            {{ Username() }}<span v-if="myName()"> - {{ myName() }}</span>
            <span v-if="mySurname()">&nbsp;{{ mySurname() }}</span>
          </div>
          <div class="row justify-evenly q-pa-xs-sm">
            <div v-if="tools.isLogged() && isAdmin()" class="text-weight-bold text-user bg-red q-px-xs">
              Admin
            </div>
            <div v-if="isSocio" class="text-weight-bold text-user q-px-xs">
              Socio
            </div>
            <div v-if="isSocioResidente()" class="text-weight-bold text-user q-px-xs bg-amber">
              Residente
            </div>
            <div v-if="isConsiglio()" class="text-weight-bold text-user q-px-xs bg-deep-orange-10">
              Consiglio
            </div>
            <div v-if="tools.isManager()" class="text-weight-bold text-user bg-blue q-px-xs">
              Segreteria
            </div>
            <div v-if="tools.isEditor()" class="text-weight-bold text-user bg-indigo q-px-xs">
              Editore
            </div>
            <div v-if="tools.isCommerciale()" class="text-weight-bold text-user bg-brown q-px-xs">
              Commerciale
            </div>
            <div v-if="isFacilitatore()" class="text-weight-bold text-user q-px-xs">
              Facilitatore
            </div>
            <div v-if="isTratuttrici()" class="text-weight-bold text-user q-px-xs">
              Editor
            </div>
          </div>
          <div v-if="!tools.isLogged()" class="text-user text-italic bg-red">
            {{ t("user.loggati") }}
          </div>

          <div v-if="tools.isLogged() && !tools.isVerified()" class="text-verified">
            {{ t("components.authentication.email_verification.verify_email") }}
          </div>

          <div v-if="tools.isLogged()" class="text-verified">
            <!-- <span class="text-white" v-if="Verificato()"> {{t('reg.verificato')}} </span> -->
            <span class="text-user text-italic bg-red" v-if="!tools.Verificato()">
              {{ t("reg.non_verificato") }}
            </span>
          </div>

          <div v-if="tools.isLogged()" id="user-actions" class="column justify-center q-gutter-sm q-ma-sm center-150">
            <q-btn rounded color="primary" icon="person" :to="`/my/` + getMyUsername()">{{ t("pages.profile") }}
            </q-btn>

            <q-btn rounded color="negative" icon="exit_to_app" @click="logoutHandler">{{ t("login.esci") }}</q-btn>
          </div>
        </div>
        <div style="margin-top: 120px"></div>
        <div v-show="!tools.isLogged()">
          <div class="q-ma-md" style="">
            <CSigninNoreg :showregbutt="site.confpages && site.confpages.showRegButton">
            </CSigninNoreg>
          </div>
        </div>
      </div>
      <div v-if="tools.isLogged()" class="q-mt-lg"></div>

    </q-drawer>
  </div>
</template>

<script lang="ts" src="./MyHeader.ts">
</script>

<style lang="scss" scoped>
@import "./MyHeader.scss";
</style>