- MyProfile

- Immagine profilo e small

src/views/user/myprofile/myprofile.scss

@@ -0,0 +1,18 @@
+.profile {
+  width: 100%;
+  margin: 0 auto;
+  max-width: 450px;
+}
+
+.myrow{
+  display: flex;
+  @media (max-width: 600px) {
+    flex-flow: column;
+  }
+}
+
+.imgprofile{
+  border: 4px solid rgb(29, 118, 13);
+  border-radius: 16px;
+  box-shadow: 0 0 45px rgba(246, 246, 246, 0.2);
+}

src/views/user/myprofile/myprofile.ts

@@ -0,0 +1,88 @@
+import { CMyFieldDb } from '@/components/CMyFieldDb'
+import { CTitleBanner } from '@/components/CTitleBanner'
+import { CProfile } from '@/components/CProfile'
+import { CSkill } from '@/components/CSkill'
+import { CDateTime } from '@/components/CDateTime'
+import { tools } from '@store/Modules/tools'
+import { computed, defineComponent, onMounted, ref, watch } from 'vue'
+import { useUserStore } from '@store/UserStore'
+import { useRoute, useRouter } from 'vue-router'
+import { useGlobalStore } from '@store/globalStore'
+import { useI18n } from '@/boot/i18n'
+import { toolsext } from '@store/Modules/toolsext'
+import { useQuasar } from 'quasar'
+import { costanti } from '@costanti'
+import { IUserFields } from 'model'
+
+
+export default defineComponent({
+  name: 'myuser',
+  components: { CProfile, CTitleBanner, CMyFieldDb, CSkill, CDateTime },
+  props: {},
+  setup() {
+    const userStore = useUserStore()
+    const $route = useRoute()
+    const { t } = useI18n()
+
+    const username = computed(() => $route.params.username.toString())
+
+    const filtroutente = ref(<any[]>[])
+    const showPic = ref(false)
+
+    const myuser = ref(<IUserFields>{})
+
+    function profile() {
+      return userStore.my.profile
+    }
+
+    function loadProfile() {
+      // Carica il profilo di quest'utente
+      if (username.value) {
+        userStore.loadUserProfile(username.value).then((ris) => {
+          myuser.value = ris
+          filtroutente.value = [{ userId: myuser.value._id }]
+        })
+
+      }
+    }
+
+    watch(() => username, (to: any, from: any) => {
+      loadProfile()
+    })
+
+    function mounted() {
+      loadProfile()
+    }
+
+    function getImgUser() {
+      return userStore.getImgByProfile(myuser.value)
+    }
+
+    function checkifShow(col: string) {
+      //++Todo: checkifShow Permessi !
+      return true
+    }
+
+    function getLinkUserTelegram() {
+
+      if (!!myuser.value.profile.username_telegram) {
+        return 'https://t.me/' + myuser.value.profile.username_telegram
+      }
+    }
+
+    onMounted(mounted)
+
+    return {
+      username,
+      profile,
+      tools,
+      costanti,
+      myuser,
+      getImgUser,
+      checkifShow,
+      getLinkUserTelegram,
+      filtroutente,
+      showPic,
+    }
+  }
+})

src/views/user/myprofile/myprofile.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="q-gutter-sm q-pa-sm q-pb-md">
+
+    <div v-if="myuser.profile" class="fit column no-wrap justify-evenly items-center content-start">
+
+      <div class="">
+        <q-avatar size="140px">
+          <img :src="getImgUser()" :alt="username" class="imgprofile" @click="showPic = true">
+        </q-avatar>
+      </div>
+
+      <div class="text-h6">
+        <span v-if="checkifShow('name')"> {{ myuser.name }}</span> <span v-if="checkifShow('surname')">{{
+          myuser.surname
+        }}</span>
+      </div>
+      <div class="col-12 text-h8 text-grey">
+        {{ myuser.username }}
+      </div>
+      <div class="col-12 text-h7">
+        {{ myuser.profile.born_city }} ({{ myuser.profile.nationality }})
+      </div>
+
+      <div class="col-12 text-h8 q-mt-sm">
+        {{ myuser.profile.biografia }}
+      </div>
+
+      <div class="col-12 row justify-evenly q-mt-md">
+        <q-btn
+          v-if="getLinkUserTelegram()" icon="fab fa-telegram"
+          color="blue" type="a"
+          size="md"
+          rounded
+          :label="$t('msgs.message')"
+          :href="getLinkUserTelegram()" target="__blank">
+        </q-btn>
+        <q-btn
+          v-if="false"
+          icon="fab fa-telegram"
+          color="white"
+          text-color="black"
+          size="md"
+          rounded>
+        </q-btn>
+
+      </div>
+    </div>
+
+    <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-6 text-h6">
+          <CDateTime
+            v-if="checkifShow('profile.dateofbirth')"
+            v-model:value="myuser.profile.dateofbirth"
+            :label="$t('reg.dateofbirth')"
+            :canEdit="false">
+          </CDateTime>
+
+          <div v-if="myuser.profile.born_city"
+               class="col-6 text-h7">
+            {{ myuser.profile.born_city }}
+          </div>
+        </div>
+
+      </div>
+
+    </CTitleBanner>
+
+    <CTitleBanner
+      class="" title="Competenze e Talenti" bgcolor="bg-primary" clcolor="text-white"
+      myclass="myshad" :canopen="true">
+
+      <CSkill
+        :filtercustom="filtroutente"
+        :butt_modif_new="false"
+      >
+
+      </CSkill>
+
+
+    </CTitleBanner>
+
+  </div>
+  <q-dialog
+    v-model="showPic"
+    full-height full-width
+    >
+
+    <img :src="getImgUser()" :alt="username" class="full-width">
+
+  </q-dialog>
+
+</template>
+
+<script lang="ts" src="./myprofile.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './myprofile.scss';
+</style>
+