continua upgrade Vue 3

src/components/Header/Header.ts

@@ -9,20 +9,22 @@ import { shared_consts } from '@src/common/shared_vuejs'
 import { useI18n } from '@src/boot/i18n'
 import { boot } from 'quasar/wrappers'
 import { useRouter } from 'vue-router'
-import MixinUsers from '../../mixins/mixin-users'
 import { static_data } from '../../db/static_data'
 import messagePopover from '../../layouts/toolbar/messagePopover/messagePopover.vue'
 import drawer from '../../layouts/drawer/drawer.vue'
+import CMyAvatar from '../../components/CMyAvatar/CMyAvatar'
 import { toolsext } from '@store/Modules/toolsext'
 import { useGlobalStore } from '@store/globalStore'
 import { useTestStore } from '@store/testStore'
 import { useUserStore } from '@store/UserStore'
 
+import MixinUsers from '../../mixins/mixin-users'
+
+
 export default defineComponent({
   name: 'Header',
-  mixins: [MixinUsers],
   components: {
-    drawer, messagePopover, // CSigninNoreg, CMyAvatar, CMyCart
+    drawer, messagePopover, CMyAvatar, // CSigninNoreg, CMyCart
   },
   props: {
     extraContent: {
@@ -36,7 +38,6 @@ export default defineComponent({
   },
 
   setup() {
-    const store = inject('store')
     const $q = useQuasar()
     const { t } = useI18n()
 
@@ -59,6 +60,27 @@ export default defineComponent({
 
     const stateconn = ref(globalStore.stateConnection)
 
+    const {
+      getUsernameChatByMsg,
+      getMyUsername,
+      Username,
+      myName,
+      mySurname,
+      myCell,
+      Verificato,
+      MadeGift,
+      Email,
+      getMyImg,
+      getMyImgforIcon,
+      getImgByMsg,
+      getUserByUsername,
+      getImgByUsername,
+      isValidUsername,
+      getNumMsg,
+      getNumMsgUnread,
+      getMsgText,
+      paotest } = MixinUsers();
+
     function isonline() {
       return globalStore.stateConnection === 'online'
     }
@@ -82,8 +104,7 @@ export default defineComponent({
     }
 
     function getcolormenu() {
-      // @ts-ignore
-      return this.isSocio ? 'green-7' : 'white'
+      return isSocio.value ? 'green-7' : 'white'
     }
 
     function isTutor() {
@@ -267,7 +288,7 @@ export default defineComponent({
           registration.unregister()
         }
       })
-      window.location.reload(true)
+      window.location.reload()
     }
 
     function changeIconConn() {
@@ -432,13 +453,13 @@ export default defineComponent({
     onMounted(mounted)
 
     return {
-      store,
       static_data,
       globalStore,
       leftDrawerOpen,
       rightDrawerOpen,
       rightCartOpen,
       lang,
+      langshort,
       isLogged,
       isEmailVerified,
       getnumOrdersCart,
@@ -453,6 +474,31 @@ export default defineComponent({
       imglogo,
       getappname,
       toggleanimation,
+      getClassColorHeader,
+      getcart,
+      getnumItemsCart,
+      isTutor,
+      isZoomeri,
+      isTratuttrici,
+      getUsernameChatByMsg,
+      getMyUsername,
+      Username,
+      myName,
+      mySurname,
+      myCell,
+      Verificato,
+      MadeGift,
+      Email,
+      getMyImg,
+      getMyImgforIcon,
+      getImgByMsg,
+      getUserByUsername,
+      getImgByUsername,
+      isValidUsername,
+      getNumMsg,
+      getNumMsgUnread,
+      getMsgText,
+      paotest,
     }
   },
 

src/components/Header/Header.vue

@@ -104,13 +104,13 @@
         <!-- BUTTON USER BAR -->
 
         <q-btn
-          class="q-mx-xs" v-if="static_data.functionality.SHOW_USER_MENU && !isLogged" dense flat round
+          class="q-mx-xs" v-if="static_data.functionality.SHOW_USER_MENU && !isLogged()" dense flat round
           icon="menu"
           @click="rightDrawerOpen = !rightDrawerOpen">
         </q-btn>
 
         <q-btn
-          class="q-mx-xs" v-if="static_data.functionality.ENABLE_ECOMMERCE && isLogged" round dense flat
+          class="q-mx-xs" v-if="static_data.functionality.ENABLE_ECOMMERCE && isLogged()" round dense flat
           @click="rightCartOpen = !rightCartOpen" icon="fas fa-shopping-cart">
 
           <q-badge v-if="getnumItemsCart > 0" color="red" floating transparent>
@@ -123,14 +123,14 @@
           round dense flat
           to="/orderinfo" icon="fas fa-list-ol">
 
-          <q-badge v-if="getnumOrdersCart > 0" color="blue" floating transparent>
-            {{ getnumOrdersCart }}
+          <q-badge v-if="getnumOrdersCart() > 0" color="blue" floating transparent>
+            {{ getnumOrdersCart() }}
           </q-badge>
         </q-btn>
 
         <q-btn
-          class="q-mx-xs" v-if="static_data.functionality.SHOW_USER_MENU && isLogged" round dense flat
-          @click="rightDrawerOpen = !rightDrawerOpen" :icon="getMyImgforIcon" :color="getcolormenu">
+          class="q-mx-xs" v-if="static_data.functionality.SHOW_USER_MENU && isLogged()" round dense flat
+          @click="rightDrawerOpen = !rightDrawerOpen" :icon="getMyImgforIcon()" :color="getcolormenu()">
           <!--<q-badge v-if="isSocio" color="green" floating transparent>
             s
           </q-badge>-->
@@ -159,7 +159,7 @@
         class="absolute-top-right" style="margin-right: 10px; color: white;"
         dense flat round icon="close" @click="rightCartOpen = !rightCartOpen">
       </q-btn>
-      <div v-if="isLogged" class="text-weight-bold text-cart">Carrello
+      <div v-if="isLogged()" class="text-weight-bold text-cart">Carrello
       </div>
       <CMyCart></CMyCart>
     </q-drawer>
@@ -180,22 +180,22 @@
             dense flat round icon="close" @click="rightDrawerOpen = !rightDrawerOpen">
           </q-btn>
 
-          <div v-if="isLogged" class="text-weight-bold text-user">{{ Username }} - {{ myName }}
+          <div v-if="isLogged()" class="text-weight-bold text-user">{{ Username() }} - {{ myName() }}
           </div>
           <div class="row justify-evenly q-pa-xs-sm">
-            <div v-if="isLogged && isAdmin" class="text-weight-bold text-user bg-red q-px-xs">Admin</div>
+            <div v-if="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="isManager" class="text-weight-bold text-user bg-blue q-px-xs">Segreteria</div>
-            <div v-if="isTutor" class="text-weight-bold text-user q-px-xs">Tutor</div>
-            <div v-if="isTratuttrici" class="text-weight-bold text-user q-px-xs">Editor</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="isManager()" class="text-weight-bold text-user bg-blue q-px-xs">Segreteria</div>
+            <div v-if="isTutor()" class="text-weight-bold text-user q-px-xs">Tutor</div>
+            <div v-if="isTratuttrici()" class="text-weight-bold text-user q-px-xs">Editor</div>
           </div>
-          <div v-if="!isLogged" class="text-user text-italic bg-red">
+          <div v-if="!isLogged()" class="text-user text-italic bg-red">
             {{ t('user.loggati') }}
           </div>
 
-          <div v-if="isLogged && !isEmailVerified" class="text-verified">{{
+          <div v-if="isLogged() && !isEmailVerified()" class="text-verified">{{
               t('components.authentication.email_verification.verify_email')
             }}
           </div>
@@ -203,7 +203,7 @@
           <!--<span class="text-white" v-if="Verificato"> {{t('reg.verificato')}} </span>-->
           <!--<span class="text-white background-red" v-else> {{t('reg.non_verificato')}} </span>-->
 
-          <div v-if="isLogged" id="user-actions" class="column justify-center q-gutter-sm q-ma-sm center-150">
+          <div v-if="isLogged()" id="user-actions" class="column justify-center q-gutter-sm q-ma-sm center-150">
             <q-btn rounded color="primary" icon="person" to="/profile">{{ t('pages.profile') }}</q-btn>
             <!--<q-btn round color="warning" icon="lock"></q-btn>-->
             <q-btn rounded color="negative" icon="exit_to_app" @click='logoutHandler'>{{ t('login.esci') }}</q-btn>
@@ -211,7 +211,7 @@
 
         </div>
         <div style="margin-top:120px;"></div>
-        <div v-show="!isLogged">
+        <div v-show="!isLogged()">
 
           <div class="q-ma-md" style="">
             <CSigninNoreg :showregbutt="true">
@@ -221,7 +221,7 @@
         </div>
 
       </div>
-      <div v-if="isLogged" class="q-mt-lg"></div>
+      <div v-if="isLogged()" class="q-mt-lg"></div>
 
       <slot></slot>