- Pagina MySkills personale

src/views/user/editprofile/editprofile.vue

@@ -37,7 +37,7 @@
             :type="costanti.FieldType.string">
           </CMyFieldDb>
         </div>
-        <div class="row">
+        <div class="myrow">
           <CMyFieldDb
             :title="$t('reg.email')"
             table="users"

src/views/user/mypageskill/mypageskill.scss

@@ -0,0 +1,18 @@
+.profile {
+  width: 100%;
+  margin: 0 auto;
+  max-width: 450px;
+}
+
+.myrow{
+  display: flex;
+  @media (max-width: 600px) {
+    flex-flow: column;
+  }
+}
+
+.qualifica{
+  border: solid 2px #4198ef;
+  border-radius: 1rem;
+  padding: 5px;
+}

src/views/user/mypageskill/mypageskill.ts

@@ -0,0 +1,99 @@
+import { CMyFieldDb } from '@/components/CMyFieldDb'
+import { CTitleBanner } from '@/components/CTitleBanner'
+import { CProfile } from '@/components/CProfile'
+import { CDateTime } from '@/components/CDateTime'
+import { CMyPage } from '@/components/CMyPage'
+import { CSkill } from '@/components/CSkill'
+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 { IMySkill, IUserFields } from 'model'
+import { shared_consts } from '@/common/shared_vuejs'
+import { fieldsTable } from '@store/Modules/fieldsTable'
+
+import { colCitys } from '@store/Modules/fieldsTable'
+
+
+export default defineComponent({
+  name: 'myuser',
+  components: { CProfile, CTitleBanner, CMyFieldDb, CSkill, CDateTime, CMyPage },
+  props: {},
+  setup() {
+    const userStore = useUserStore()
+    const globalStore = useGlobalStore()
+    const $route = useRoute()
+    const $q = useQuasar()
+    const { t } = useI18n()
+
+    const animation = ref('fade')
+
+    const idSkill = computed(() => $route.params.idSkill ? $route.params.idSkill.toString() : 0)
+
+    const filtroutente = ref(<any[]>[])
+    const showPic = ref(false)
+
+    const myskill = ref(<IMySkill>{})
+
+    function profile() {
+      return userStore.my.profile
+    }
+
+    function myusername() {
+      return userStore.my.username
+    }
+
+    function loadSkill() {
+      // Carica il profilo di quest'utente
+      if (idSkill.value) {
+        userStore.loadSkill(idSkill.value).then((ris) => {
+          myskill.value = ris
+          if (ris.userId) {
+            filtroutente.value = [{ userId: ris.userId , _id: ris._id }]
+
+          }
+        })
+
+      }
+    }
+
+    watch(() => idSkill.value, (to: any, from: any) => {
+      loadSkill()
+    })
+
+    function mounted() {
+      loadSkill()
+    }
+
+    function checkifShow(col: string) {
+      //++Todo: checkifShow Permessi !
+      return true
+    }
+
+
+    onMounted(mounted)
+
+    return {
+      profile,
+      tools,
+      costanti,
+      myskill,
+      shared_consts,
+      checkifShow,
+      globalStore,
+      filtroutente,
+      showPic,
+      myusername,
+      userStore,
+      t,
+      animation,
+      fieldsTable,
+      colCitys,
+    }
+  }
+})

src/views/user/mypageskill/mypageskill.vue

@@ -0,0 +1,52 @@
+<template>
+  <CMyPage
+    :title='myskill.subTitle' imgbackground="images/calendario_eventi.jpg"
+    sizes="max-height: 100px" styleadd="bottom: -16px !important;">
+
+    <div class="q-ma-sm q-gutter-sm q-pa-xs">
+      <div v-if="!!myskill.note" v-html="myskill.note"></div>
+
+      <div v-for="(photo, index) in myskill.photos" :key="index">
+        <div v-if="!!photo.imagefile" class="text-center">
+
+          <q-img :src="'upload/profile/'+myskill.username+'/myskills/'+photo.imagefile" class="img"></q-img>
+        </div>
+      </div>
+
+      <div class="row justify-evenly">
+        <CSkill
+          :filtercustom="filtroutente"
+          :visuinpage="true"
+        >
+
+        </CSkill>
+      </div>
+
+      <div class="row justify-evenly q-mt-md">
+        <q-btn
+          type="a" rounded size="md"
+          color="white" text-color="blue" :icon="`img:`+userStore.getImgByUsername(myskill.username)"
+          :to="'/my/'+myskill.username"
+          :label="myskill.username"
+        >
+        </q-btn>
+
+      </div>
+
+    </div>
+
+
+
+    <br>
+    <br>
+
+  </CMyPage>
+</template>
+
+<script lang="ts" src="./mypageskill.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './mypageskill.scss';
+</style>
+

src/views/user/myprofile/myprofile.vue

@@ -54,9 +54,9 @@
         to="/editprofile">
       </q-btn>
 
-      <div class="row justify-evenly q-pa-sm q-ma-sm">
+      <div class="myrow justify-evenly items-center q-pa-sm q-ma-sm">
 
-        <div class="col-md-6 q-mx-sm">
+        <div class="col-6 q-ma-xs">
           <q-btn
             v-if="getLinkUserTelegram()" icon="fab fa-telegram"
             color="blue" type="a"
@@ -67,7 +67,7 @@
           </q-btn>
 
         </div>
-        <div class="col-md-6 q-mx-sm">
+        <div class="col-6 q-ma-xs">
           <q-btn
             v-if="getLinkWebSite()" icon="fas fa-globe"
             color="blue" type="a"