Creare Visualizzazione Nuova della scheda della MySkill (Bacheca)

src/components/CMySkill/CMySkill.scss

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

src/components/CMySkill/CMySkill.ts

@@ -0,0 +1,72 @@
+import { defineComponent, onMounted, PropType, ref, watch } from 'vue'
+import { useUserStore } from '@store/UserStore'
+import { IImgGallery, IMySkill, IUserFields, IUserProfile } from 'model'
+import { costanti } from '@costanti'
+import { shared_consts } from '@/common/shared_vuejs'
+import { fieldsTable } from '@store/Modules/fieldsTable'
+import { tools } from '@store/Modules/tools'
+import { useQuasar } from 'quasar'
+import { useI18n } from '@/boot/i18n'
+import { useRoute, useRouter } from 'vue-router'
+
+export default defineComponent({
+  name: 'CMySkill',
+  emits: ['setCmd'],
+  props: {
+    prop_myskill: {
+      type: Object as PropType<IMySkill | null>,
+      required: false,
+      default: null,
+    },
+  },
+
+  setup(props, { emit }) {
+
+    const userStore = useUserStore()
+    const $q = useQuasar()
+    const { t } = useI18n()
+    const $router = useRouter()
+    const $route = useRoute()
+
+    const username = ref('')
+
+    const myskill = ref(<IMySkill | null>null)
+
+    watch(() => props.prop_myskill, (newval, oldval) => {
+      console.log('watch: myskill')
+      mounted()
+    })
+
+    function mounted() {
+      if (props.prop_myskill) {
+        myskill.value = props.prop_myskill
+      }
+    }
+
+    function getImgUser(profile: IUserFields) {
+      return userStore.getImgByProfile(profile)
+    }
+
+    function naviga(path: string) {
+      $router.push(path)
+    }
+
+    function setCmd($q: any, cmd: number, myusername: string, value: any, groupname: string) {
+      emit('setCmd', $q, cmd, myusername, value, groupname)
+    }
+
+    onMounted(mounted)
+
+    return {
+      myskill,
+      costanti,
+      getImgUser,
+      naviga,
+      setCmd,
+      shared_consts,
+      userStore,
+      tools,
+      fieldsTable,
+    }
+  },
+})

src/components/CMySkill/CMySkill.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="q-py-xs centermydiv" :style="`min-width: `+ (tools.getwidth($q) - 20) +`px;`">
+    <q-item v-if="myskill" clickable v-ripple>
+      <q-item-section avatar @click="naviga(`/my/` + myskill.username)">
+        <q-badge class="q-my-xs self-center" :color="myskill.adType === 1 ? 'green' : 'red'">
+          {{ fieldsTable.getValByTabAndId('myskills', 'adType', myskill.adType) }}
+          <q-icon :name="myskill.adType === 1 ? 'fas fa-street-view' : 'fas fa-search'" color="white"
+                  class="q-ml-xs"/>
+        </q-badge>
+        <q-avatar size="60px">
+          <q-img :src="getImgUser(myskill)" :alt="myskill.username" img-class="imgprofile" height="60px"/>
+        </q-avatar>
+      </q-item-section>
+
+      <q-item-section @click="naviga(`/mypage/` + myskill._id)">
+        <q-item-label class="full-width">
+          <span v-for="(rec, ind) of myskill.recSkill" :key="ind"> <q-chip
+            dense
+            class="text-center shadow-5 glossy bg-blue chipmodif">{{ rec.descr }}</q-chip></span>
+          <span v-for="(rec, ind) of myskill.myskill" :key="ind"> <q-chip
+            dense
+            class="text-center shadow-5 glossy bg-green chipmodif">{{ rec.descr }}</q-chip></span>
+
+          <!--<span> - {{ myskill.profile.qualifica }}</span>-->
+        </q-item-label>
+        <q-item-label lines="3">{{ myskill.descr }}<br>
+        </q-item-label>
+        <q-item-label overline lines="1" style="text-align: right">
+          <span class="text-weight-bold">{{ myskill.username }}</span> -
+          <span v-for="(rec, ind) of myskill.mycities" :key="ind">{{ rec.comune }}</span>
+        </q-item-label>
+      </q-item-section>
+
+    </q-item>
+    <q-separator inset="item"/>
+  </div>
+
+</template>
+
+<script lang="ts" src="./CMySkill.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMySkill.scss';
+</style>

src/components/CMySkill/index.ts

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