continua upgrade Vue 3

src/components/CMyAvatar/CMyAvatar.scss

@@ -0,0 +1,4 @@
+.myflex{
+  display: flex;
+  flex: 1;
+}

src/components/CMyAvatar/CMyAvatar.ts

@@ -0,0 +1,62 @@
+import { defineComponent, onMounted, ref, watch } from 'vue'
+import { useUserStore } from '@store/UserStore'
+
+export default defineComponent({
+  name: 'CMyAvatar',
+  props: {
+    myimg: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    size: {
+      type: String,
+      required: false,
+      default: '40px',
+    },
+  },
+
+  setup(props) {
+
+    let myicon = ref('')
+    let myimgint = ref('')
+
+    const userStore = useUserStore()
+    const imgprofile = ref(userStore.my.profile.img)
+
+    function refresh() {
+      if (!props.myimg) {
+        myicon.value = 'fas fa-user-circle'
+      } else {
+        myimgint.value = props.myimg
+      }
+      // console.log('myimgint', this.myimgint)
+    }
+
+    watch(
+      imgprofile,
+      // @ts-ignore
+      (value: string, oldValue: string) => {
+        userStore.my.profile.img = value
+        refresh()
+      },
+    )
+
+
+    watch(
+      // @ts-ignore
+      props.myimg,
+      // @ts-ignore
+      (value: string, oldValue: string) => {
+        myimgint.value = ''
+        refresh()
+      },
+    )
+
+    onMounted(refresh)
+
+    return {
+      myimgint,
+    }
+  },
+})

src/components/CMyAvatar/CMyAvatar.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+        <q-avatar v-if="!myimgint" class="q-mb-sx center_img" :icon="myicon" :font-size="size">
+
+        </q-avatar>
+        <q-avatar v-if="myimgint" class="q-mb-sx center_img">
+            <img :src="myimgint" :font-size="size" alt="my avatar">
+        </q-avatar>
+    </div>
+</template>
+
+<script lang="ts" src="./CMyAvatar.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CMyAvatar.scss';
+</style>

src/components/CMyAvatar/index.ts

@@ -0,0 +1 @@
+export { default as CMyAvatar } from './CMyAvatar.vue'

src/components/CMyCart/CMyCart.scss

@@ -0,0 +1,18 @@
+.card .product-image {
+  height: 300px;
+}
+
+html, body {
+  margin:0;
+  padding:0;
+  height:100%;
+}
+
+.text-title {
+  font-size: 0.9rem;
+}
+
+.centeritems{
+  place-content: center;
+}
+

src/components/CMyCart/CMyCart.ts.old

@@ -0,0 +1,55 @@
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { tools } from '../../store/Modules/tools'
+import MixinBase from '@src/mixins/mixin-base'
+import { CTitleBanner } from '@components'
+import { CCardState } from '../CCardState'
+import { CCopyBtn } from '../CCopyBtn'
+
+import { IOrder, IProduct } from '@src/model'
+import { CSingleCart } from '../../components/CSingleCart'
+import MixinUsers from '@src/mixins/mixin-users'
+import { computed, defineComponent, ref } from "vue"
+import { useGlobalStore } from "@store/globalStore"
+
+@Component({
+  name: 'CMyCart',
+  components: { CTitleBanner, CCardState, CCopyBtn, CSingleCart }
+})
+
+export default defineComponent({
+  name: 'CMyCart',
+  props: {},
+
+  setup() {
+    const globalStore = useGlobalStore()
+    
+    const myCart = computed(() => Products.cart)
+    const myTotalPrice = computed(() => {
+      if (Products.cart) {
+        return Products.cart.totalPrice
+      } else {
+        return 0
+      }
+    })
+
+    const ordersCart = computed(() => {
+      if (!!Products.cart) {
+        return Products.cart.items
+      } else {
+        return null
+      }
+    })
+
+    const numOrders = computed(() => {
+      if (!!Products.cart) {
+        return Products.cart.items.length
+      } else {
+        return 0
+      }
+    })
+    
+
+  function closecart() {
+    globalStore.rightCartOpen = false
+  }
+}

src/components/CMyCart/CMyCart.vue.old

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div id="mycontainer">
+      <div class="myheader row justify-between">
+        <div class="col-6">
+          <q-btn class="q-mx-xs" round dense flat icon="fas fa-shopping-cart">
+
+            <q-badge v-if="getnumItemsCart > 0" color="red" floating transparent>
+              {{ getnumItemsCart }}
+            </q-badge>
+          </q-btn>
+        </div>
+        <div class="col-6" style="text-align: right">
+          <span v-if="myTotalPrice" class="text-grey q-mr-xs">Totale:</span> <span
+          class="text-subtitle1 q-mr-sm ">€ {{ myTotalPrice.toFixed(2) }}</span>
+        </div>
+      </div>
+      <q-separator></q-separator>
+      <div id="mybody">
+        <div v-for="(rec, index) in ordersCart" :key="index" class="col">
+
+          <CSingleCart
+            :order="rec.order"
+            :showall="false">
+          </CSingleCart>
+
+        </div>
+      </div>
+      <div v-if="numOrders === 0" style="text-align: center" class="text-grey">
+        Il Carrello è Vuoto
+      </div>
+      <div v-else style="text-align: center">
+        <q-btn rounded icon="fas fa-shopping-cart" color="green" label="Vai alla Cassa" class="q-mb-sm" to="/checkout" @click="closecart"></q-btn>
+      </div>
+    </div>
+  </div>
+
+  </div>
+</template>
+
+<script lang="ts" src="./CMyCart.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMyCart.scss';
+</style>

src/components/CMyCart/index.ts

@@ -0,0 +1 @@
+export { default as CMyCart } from './CMyCart.vue'

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>
 

src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './logo'
 export * from './CMyPage'
+export * from './CMyAvatar'
 export * from './CTitle'
 export * from './CImgTitle'
 export * from './BannerCookies'