other components...

src/components/CMyTeacher/CMyTeacher.scss

@@ -0,0 +1,92 @@
+$heightBtn: 100%;
+$grayshadow: #555;
+
+.text-subtitle-carica {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .1rem .1rem .1rem $grayshadow;
+}
+
+.text-subtitle-certificato {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+@media (max-width: 718px) {
+  // PER VERSIONE MOBILE
+  .text-subtitle-carica {
+    font-size: 1rem;
+  }
+}
+
+.op {
+  text-align: center !important;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .1rem .1rem .1rem $grayshadow;
+
+  &__cell {
+    font-size: 1rem;
+    color: red;
+  }
+
+  &__email {
+    font-size: 1rem;
+    color: #3b5998;
+  }
+
+  &__email a {
+    text-decoration: none;
+  }
+
+  &__facebook a {
+    font-size: 1rem;
+    text-decoration: none;
+  }
+
+  &__storia {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    text-align: justify;
+  }
+}
+
+.myimg {
+  border-radius: 300px !important;
+}
+
+.q-img {
+  &__image {
+    border-radius: 300px !important;
+  }
+}
+
+.myflex {
+  display: flex;
+  flex: 1;
+}
+
+.mybase {
+  color: black;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  letter-spacing: 0.03333em;
+
+  &__teacher {
+    margin-top: 5px;
+
+    &-content {
+      color: darkblue;
+    }
+
+    &-content:hover {
+
+    }
+  }
+
+}

src/components/CMyTeacher/CMyTeacher.ts

@@ -0,0 +1,58 @@
+import { computed, defineComponent, ref, watch } from 'vue'
+
+import { tools } from '@store/Modules/tools'
+import { CMyAvatar } from '../CMyAvatar'
+import MixinOperator from '../../mixins/mixin-operator'
+import MixinUsers from '../../mixins/mixin-users'
+import { useGlobalStore } from '@store/globalStore'
+
+
+export default defineComponent({
+  name: 'CMyTeacher',
+  components: { CMyAvatar },
+  props: {
+    username: {
+      type: String,
+      required: true,
+      default: '',
+    },
+  },
+  setup(props) {
+
+    const globalStore = useGlobalStore()
+    const showuserdetails = ref(false)
+    const autoplaydiscsaved = ref(0)
+    const tab = ref('one')
+
+    const { getOperatorByUsername, getImgTeacherByUsername, getTeacherByUsername } = MixinOperator()
+    const { isValidUsername } = MixinUsers()
+
+    const myop = computed(() => {
+      return getOperatorByUsername(props.username)
+    })
+
+    watch(showuserdetails, (value: any, old: any) => {
+      if (!showuserdetails.value) {
+        globalStore.autoplaydisc = autoplaydiscsaved.value
+      }
+    })
+
+    function executeclick(event: any) {
+      console.log('executeclick')
+      showuserdetails.value = true
+
+      autoplaydiscsaved.value = globalStore.autoplaydisc
+      globalStore.autoplaydisc = 0
+    }
+    return {
+      tab,
+      executeclick,
+      showuserdetails,
+      getImgTeacherByUsername,
+      isValidUsername,
+      getTeacherByUsername,
+      myop,
+      tools,
+    }
+  },
+})

src/components/CMyTeacher/CMyTeacher.vue

@@ -0,0 +1,84 @@
+<template>
+    <span>
+        <q-dialog v-model="showuserdetails" v-if="myop">
+            <q-card :style="`min-width: `+ tools.myheight_dialog() + `px;`">
+                <q-toolbar class="bg-primary text-white">
+                    <q-toolbar-title>
+                        {{ myop.name }} {{ myop.surname }}
+                    </q-toolbar-title>
+                    <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
+                </q-toolbar>
+                <q-card-section class="text-center inset-shadow">
+                    <div style="width: 200px; float: left;">
+                        <q-img :src="`statics/images/` + myop.img" class="myimg" :alt="`${myop.name} ${myop.surname}`">
+                        </q-img>
+                    </div>
+
+                    <div class="text-h6 text-trans">{{ myop.name }} {{ myop.surname }}</div>
+                    <div class="text-subtitle-carica text-trans">{{ myop.qualification }}</div>
+                    <div class="text-subtitle-carica">{{ myop.disciplines }}</div>
+                    <div v-if="myop.certifications" class="text-subtitle-certificato">{{ myop.certifications }}</div>
+                    <div class="op__cell">
+                        <q-icon class="flex-icon" name="mobile_friendly" v-if="myop.cell"></q-icon>
+                        <span class="q-mx-sm">{{ myop.cell }}</span>
+
+                        <div class="row justify-center margin_buttons">
+                            <q-btn
+                              v-if="myop.email" fab-mini icon="fas fa-envelope"
+                              color="blue-grey-6" type="a"
+                              size="sm"
+                              :href="tools.getemailto(myop.email)" target="__blank">
+                            </q-btn>
+                            <q-btn
+                              v-if="tools.getHttpForWhatsapp(myop.cell)" fab-mini icon="fab fa-whatsapp"
+                              color="green" type="a"
+                              size="sm"
+                              :href="tools.getHttpForWhatsapp(myop.cell)" target="__blank">
+                            </q-btn>
+
+                            <q-btn
+                              v-if="tools.getHttpForTelegram(myop.usertelegram)" fab-mini icon="fab fa-telegram"
+                              color="blue" type="a"
+                              size="sm"
+                              :href="tools.getHttpForTelegram(myop.usertelegram)" target="__blank">
+                            </q-btn>
+                        </div>
+                    </div>
+                    <div class="op__email">
+                        <q-icon class="flex-icon" name="contact_mail"></q-icon>&nbsp;
+                        <a :href="tools.getemailto(myop.email)" target="_blank">{{ myop.email }}
+                        </a>
+                    </div>
+
+                    <div class="op__facebook" v-if="myop.paginafb">
+                        <a :href="myop.paginafb" target="_blank">
+                            <i aria-hidden="true" class="q-icon fab fa-facebook-f icon_contact links"></i> Pagina
+                            Facebook
+                        </a>
+                    </div>
+
+                    <br>
+                    <div class="op__storia" v-html="myop.info"></div>
+
+                </q-card-section>
+                <q-card-actions align="center">
+                    <q-btn rounded dense :label="$t('dialog.close')" color="primary" v-close-popup></q-btn>
+                </q-card-actions>
+            </q-card>
+        </q-dialog>
+        <q-chip
+          clickable
+          v-if="getImgTeacherByUsername(username) && isValidUsername(username)" @click="executeclick"
+          class="mybase__teacher-content">
+            <CMyAvatar :myimg="getImgTeacherByUsername(username)"></CMyAvatar>
+            <span>{{ getTeacherByUsername(username) }}</span>
+        </q-chip>
+    </span>
+</template>
+
+<script lang="ts" src="./CMyTeacher.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMyTeacher.scss';
+</style>

src/components/CMyTeacher/index.ts

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