Creare Visualizzazione Nuova della scheda della MySkill (Bacheca)

src/components/CFinder/CFinder.vue

@@ -21,7 +21,8 @@
         col_title="descr"
         col_footer="idCity"
         col_tabfooter="mycities"
-        :vertical="-1"
+        :vertical="costanti.VISUTABLE_LISTA"
+        :showType="costanti.SHOW_MYSKILL"
         :nodataLabel="idSector > 0 ? 'Nessuna Competenza trovata': 'Selezionare un Settore'"
         :prop_search="true"
         :finder="true"

src/components/CGridTableRec/CGridTableRec.ts

@@ -32,6 +32,7 @@ import { useQuasar } from 'quasar'
 import { costanti } from '@costanti'
 import translate from '@/globalroutines/util'
 import { toolsext } from '@store/Modules/toolsext'
+import { CMySkill } from '@/components/CMySkill'
 
 export default defineComponent({
   name: 'CGridTableRec',
@@ -204,7 +205,7 @@ export default defineComponent({
       default: '',
     },
   },
-  components: { CMyPopupEdit, CTitleBanner, CMyFieldDb, CMySelect, CMyFriends, CMyGroups, CMyUser },
+  components: { CMyPopupEdit, CTitleBanner, CMyFieldDb, CMySelect, CMyFriends, CMyGroups, CMyUser, CMySkill },
   setup(props, { emit }) {
     const $q = useQuasar()
     const { t } = useI18n()
@@ -900,7 +901,7 @@ export default defineComponent({
       pagination.value = props.prop_pagination
 
       myvertical.value = props.vertical
-      myvertical.value = tools.getCookie('myv_' + props.prop_mytable, props.vertical)
+      // myvertical.value = tools.getCookie('myv_' + props.prop_mytable, props.vertical)
 
       showfilteradv.value = tools.getCookie('s_adv', false)
     }

src/components/CGridTableRec/CGridTableRec.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="$q.screen.lt.sm ? `` : `q-pa-xs`" v-if="isfinishLoading">
-    <div class="centermydiv q-ma-sm" style="text-align: center">
+    <div class="centermydiv q-my-sm" style="text-align: center">
       <q-btn
         v-if="mytable && visButtRow()" rounded dense color="primary"
         size="lg"
@@ -35,7 +35,8 @@
       <q-spinner-tail size="2em" color="primary"/>
     </q-inner-loading>
     <q-table
-      :grid="myvertical === costanti.VISUTABLE_SCHEDA_USER || myvertical === 2 || myvertical === costanti.VISUTABLE_SCHEDA_GROUP"
+      :grid="(myvertical === costanti.VISUTABLE_SCHEDA_USER || myvertical === 2 || myvertical === costanti.VISUTABLE_SCHEDA_GROUP)"
+      :grid-header="false"
       flat
       bordered
       class="my-sticky-header-table"
@@ -258,9 +259,9 @@
         <div v-if="choose_visutype" class="">
           <q-radio v-model="myvertical" :val="2" label="Lista"
                    @update:model-value="tools.setCookie('myv_' + prop_mytable, myvertical) "/>
-          <q-radio v-if="mytable === toolsext.TABMYGROUPS" v-model="myvertical" :val="costanti.VISUTABLE_SCHEDA_GROUP" label="Scheda"
+          <q-radio v-if="mytable === toolsext.TAB" v-model="myvertical" :val="costanti.VISUTABLE_SCHEDA_GROUP" label="Scheda"
                    @update:model-value="tools.setCookie('myv_' + prop_mytable, myvertical) "/>
-          <q-radio v-else v-model="myvertical" :val="costanti.VISUTABLE_SCHEDA_USER" label="Scheda"
+          <q-radio v-else-if="mytable !== toolsext.TABMYGROUPS && !finder" v-model="myvertical" :val="costanti.VISUTABLE_SCHEDA_USER" label="Scheda"
                    @update:model-value="tools.setCookie('myv_' + prop_mytable, myvertical) "/>
           <q-radio v-if="$q.screen.gt.xs" v-model="myvertical" :val="0" label="Tabella"
                    @update:model-value="tools.setCookie('myv_' + prop_mytable, myvertical) "/>
@@ -313,7 +314,15 @@
       </template>
 
       <template v-slot:item="props">
-        <div v-if="((showType === costanti.SHOW_USERINFO) && myvertical !== costanti.VISUTABLE_SCHEDA_USER) || ((myvertical === 2) && (shared_consts.TABLES_VISU_LISTA_USER.includes(tablesel)))" class="fill-all-width">
+        <div v-if="showType === costanti.SHOW_MYSKILL">
+          <CMySkill
+            :prop_myskill="props.row"
+            :visu="visufind"
+          >
+          </CMySkill>
+
+        </div>
+        <div v-else-if="((showType === costanti.SHOW_USERINFO) && myvertical !== costanti.VISUTABLE_SCHEDA_USER) || ((myvertical === 2) && (shared_consts.TABLES_VISU_LISTA_USER.includes(tablesel)))" class="fill-all-width">
           <div>
             <CMyUser
               :mycontact="props.row"

src/components/CMyPopupEdit/CMyPopupEdit.vue

@@ -432,6 +432,7 @@
               </div>
             </div>
             <div v-else>
+              <!--
               <div class="row justify-evenly">
                 <q-btn
                   v-if="myvalue"
@@ -448,6 +449,7 @@
                 >
                 </q-btn>
               </div>
+              -->
               <!--<div v-html="visuValByType(myvalue, col, row)" @click="visueditor = true"></div>-->
 
               <div v-if="!isFieldDb()">

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'

src/components/CProvaPao/CProvaPao.ts

@@ -10,3 +10,5 @@ export default defineComponent({
     },
   },
 })
+
+

src/components/index.ts

@@ -42,4 +42,5 @@ export * from './CMyGroups'
 export * from './CDashboard'
 export * from './CMainView'
 export * from './CBigBtn'
+export * from './CMySkill'
 // export * from './CPreloadImages'