From 5842fa69e1941b956207fed97575ec3f39849b08 Mon Sep 17 00:00:00 2001
From: paoloar77 <paolo.arena77@gmail.com>
Date: Wed, 26 Jan 2022 01:31:07 +0100
Subject: [PATCH] - Pagina MySkills personale

---
 _ALL_SITES/insiemesipuo.app/db/static_data.ts | 11 +++
 src/components/CFinder/CFinder.vue            |  4 +-
 src/components/CGallery/CGallery.vue          |  1 -
 src/components/CGridTableRec/CGridTableRec.ts | 27 ++++-
 .../CGridTableRec/CGridTableRec.vue           | 34 ++++---
 src/components/CMyPopupEdit/CMyPopupEdit.ts   | 13 ++-
 src/components/CMyPopupEdit/CMyPopupEdit.vue  | 65 +++++++++---
 src/components/CMySelect/CMySelect.ts         | 70 +++++++++++--
 src/components/CMySelect/CMySelect.vue        |  3 +-
 src/components/CSkill/CSkill.ts               | 16 ++-
 src/components/CSkill/CSkill.vue              |  4 +-
 src/css/app.scss                              |  4 +-
 src/db/static_data.ts                         | 11 +++
 src/model/GlobalStore.ts                      |  4 +
 src/statics/lang/it.js                        |  3 +
 src/store/Modules/fieldsTable.ts              | 70 ++++++++++---
 src/store/Modules/tools.ts                    | 18 ++--
 src/store/UserStore.ts                        | 14 +++
 src/views/user/editprofile/editprofile.vue    |  2 +-
 src/views/user/mypageskill/mypageskill.scss   | 18 ++++
 src/views/user/mypageskill/mypageskill.ts     | 99 +++++++++++++++++++
 src/views/user/mypageskill/mypageskill.vue    | 52 ++++++++++
 src/views/user/myprofile/myprofile.vue        |  6 +-
 23 files changed, 478 insertions(+), 71 deletions(-)
 create mode 100755 src/views/user/mypageskill/mypageskill.scss
 create mode 100755 src/views/user/mypageskill/mypageskill.ts
 create mode 100755 src/views/user/mypageskill/mypageskill.vue

diff --git a/_ALL_SITES/insiemesipuo.app/db/static_data.ts b/_ALL_SITES/insiemesipuo.app/db/static_data.ts
index 7836b55a..74c5a29c 100755
--- a/_ALL_SITES/insiemesipuo.app/db/static_data.ts
+++ b/_ALL_SITES/insiemesipuo.app/db/static_data.ts
@@ -387,6 +387,17 @@ const baseroutes: IListRoutes[] = [
     inmenu: false,
     infooter: false,
   },
+  {
+    active: true,
+    order: 130,
+    path: '/mypage/:idskill',
+    materialIcon: 'fas fa-user',
+    name: 'pages.profile2',
+    component: () => import('@/views/user/mypageskill/mypageskill.vue'),
+    meta: { requiresAuth: true },
+    inmenu: false,
+    infooter: false,
+  },
   /*{
     active: true,
     order: 6,
diff --git a/src/components/CFinder/CFinder.vue b/src/components/CFinder/CFinder.vue
index 0d3ceaed..fa9e8575 100755
--- a/src/components/CFinder/CFinder.vue
+++ b/src/components/CFinder/CFinder.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <div class="q-ma-sm q-gutter-sm q-pa-xs">
+  <div class="q-pa-sm bi-border-all">
+    <div class="q-ma-sm q-gutter-sm q-pa-xs bg-green">
       <CGridTableRec
         v-if="searchList.length > 0"
         prop_mytable="myskills"
diff --git a/src/components/CGallery/CGallery.vue b/src/components/CGallery/CGallery.vue
index fd8e8122..b3a5068e 100755
--- a/src/components/CGallery/CGallery.vue
+++ b/src/components/CGallery/CGallery.vue
@@ -1,7 +1,6 @@
 <template>
   <!--<div class="q-pa-md items-start " style="display: inline-flex; width: 800px;"> -->
   <div v-if="!edit">
-
     <div class="q-pa-md q-gutter-md">
       <q-card :class="getclass()" @click="apri">
         <div v-for="(mygallery, index) in getlistimages()" :key="index">
diff --git a/src/components/CGridTableRec/CGridTableRec.ts b/src/components/CGridTableRec/CGridTableRec.ts
index caebed53..24b237a5 100755
--- a/src/components/CGridTableRec/CGridTableRec.ts
+++ b/src/components/CGridTableRec/CGridTableRec.ts
@@ -70,6 +70,11 @@ export default defineComponent({
       required: false,
       default: false,
     },
+    visuinpage: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     showType: {
       type: Number,
       required: false,
@@ -962,7 +967,7 @@ export default defineComponent({
     }
 
     function visuIntestazCol(col: IColGridTable) {
-      if (col.fieldtype === costanti.FieldType.html || col.fieldtype === costanti.FieldType.listimages) {
+      if (col.fieldtype === costanti.FieldType.html || col.fieldtype === costanti.FieldType.listimages || col.noshowlabel) {
         return false
       } else {
         return true
@@ -1226,7 +1231,23 @@ export default defineComponent({
     }
 
     function checkIfShowRec(rec: any) {
-      return (rec._id > 0 && typeof rec._id === 'number') || rec._id !== 'number'
+      return ((rec._id > 0 && typeof rec._id === 'number') || rec._id !== 'number') && rec !== -100
+    }
+
+    function showColCheck(col: IColGridTable, newrec: boolean){
+      return (colVisib.value.includes(col.field! + col.subfield) || colVisib.value.includes(col.field + '.' + col.subfield)) &&
+        (!col.showOnlyNewRec || (col.showOnlyNewRec && newrec)) &&
+        (col.visible) &&
+        (!props.visuinpage || (col.visuinpage && props.visuinpage))
+    }
+
+    function getValueExtra(col: IColGridTable, record: any) {
+      if (record) {
+        if (col.filter_field! in record) {
+          return col.filter_field ? record[col.filter_field] || '' : ''
+        }
+      }
+      return ''
     }
 
     // onMounted(mounted)
@@ -1302,6 +1323,8 @@ export default defineComponent({
       labelcombo,
       filter,
       myvertical,
+      showColCheck,
+      getValueExtra,
     }
   }
 })
diff --git a/src/components/CGridTableRec/CGridTableRec.vue b/src/components/CGridTableRec/CGridTableRec.vue
index 9b7cad41..cb7af1b8 100755
--- a/src/components/CGridTableRec/CGridTableRec.vue
+++ b/src/components/CGridTableRec/CGridTableRec.vue
@@ -65,7 +65,7 @@
             :props="props"
             class="text-italic text-weight-bold"
           >
-            <span v-if="col && colVisib.includes(col.field + col.subfield)">
+            <span v-if="col && showColCheck(col, false)">
               {{ col.label }}
             </span>
 
@@ -167,7 +167,7 @@
               <template
                 v-if="item.arrvalue.length >= 1"
                 v-slot:selected-item="scope">
-                <div v-if="scope.opt[fieldsTable.getLabelByTable(item.table)]">
+                <div v-if="scope.opt[fieldsTable.getLabelByTable(item.table)] || (scope.opt && checkIfShowRec(scope.opt)) ">
                   <q-chip
                     removable
                     dense
@@ -178,7 +178,7 @@
                     class="q-my-none q-ml-xs q-mr-none"
                   >
                     <q-avatar color="primary" text-color="white" :icon="item.icon" size="12px"/>
-                    {{ scope.opt[fieldsTable.getLabelByTable(item.table)] }}
+                    {{ scope.opt[fieldsTable.getLabelByTable(item.table)] || (scope.opt) }}
                   </q-chip>
                 </div>
               </template>
@@ -252,7 +252,7 @@
           <q-td
             v-for="col in mycolumns" :key="col.name" :props="props">
             <div
-              v-if="colVisib.includes(col.field + col.subfield)" class="tdclass">
+              v-if="showColCheck(col, false)" class="tdclass">
               <div :class="getclrow(props.row)">
                 <CMyPopupEdit
                   :table="mytable"
@@ -307,8 +307,8 @@
           :style="props.selected ? 'transform: scale(0.95);' : ''"
         >
           <q-card :class="props.selected ? 'bg-grey-2' : ''" style="min-width: 200px;">
-            <q-bar dense class="bg-primary text-white">
-              <span class="ellipsis"> {{ props.row[col_title] }} </span>
+            <q-bar v-if="!visuinpage" dense class="bg-primary text-white full-height">
+              <span class=""> {{ props.row[col_title] }} </span>
               <q-space/>
               <q-btn
                 v-if="canModifyThisRec(props.row)"
@@ -328,10 +328,15 @@
               <q-list dense>
                 <div v-for="col in mycolumns" :key="col.name">
 
-                  <q-item v-if="colVisib.includes(col.field + col.subfield) &&
-                          (!col.noshowifnone || (col.noshowifnone && tools.getValue(props.row,col.field, col.subfield)))"
+                  <q-item v-if="showColCheck(col, false) &&
+                          (!col.noshowifnone || (col.noshowifnone && tools.getValue(props.row,col.field, col.subfield))
+                          )"
                           :class="clByCol(col)" class="riduci_pad">
 
+                    <q-item-section avatar v-if="col.icon">
+                      <q-item-label class="q-table__col"><q-icon :name="col.icon"></q-icon></q-item-label>
+                    </q-item-section>
+
                     <q-item-section avatar v-if="visuIntestazCol(col)">
                       <q-item-label class="q-table__col">{{ col.label }}</q-item-label>
                     </q-item-section>
@@ -373,7 +378,7 @@
       <div
         class="q-ma-xs q-pa-xs text-center rounded-borders q-list--bordered"
         v-for="mycol in mycolumns" :key="mycol.name">
-        <div v-if="colVisib.includes(mycol.field + mycol.subfield)">
+        <div v-if="showColCheck(mycol, false)">
           <div class="row items-center justify-center q-gutter-md q-ma-xs">
             <div class="q-ma-xs">
               <q-field rounded outlined bg-color="orange-3" dense>
@@ -386,6 +391,7 @@
               class="q-ma-sm q-pa-sm colmodif col-grow rounded-borders " style="border: 1px solid #bbb"
               @click="colclicksel = mycol">
 
+              mycol : {{mycol}}
               <CMyPopupEdit
                 :table="mytable"
                 :canEdit="true"
@@ -395,7 +401,7 @@
                 :mycol="mycol"
                 :showall="true"
                 :row="rowclicksel"
-                :tablesel="col.tablesel"
+                :tablesel="mycol.tablesel"
                 :field="mycol.field"
                 :subfield="mycol.subfield"
                 @save="SaveValdb"
@@ -420,7 +426,7 @@
           <div
             v-for="col in mycolumns" :key="col.name" class="newrec_fields">
             <div
-              v-if="colVisib.includes(col.field + col.subfield) && col.foredit">
+              v-if="showColCheck(col, true) && col.foredit">
               <div class="">
                 <CMyPopupEdit
                   :table="mytable"
@@ -431,6 +437,7 @@
                   :field="col.field"
                   :subfield="col.subfield"
                   :tablesel="col.tablesel"
+                  :value_extra="getValueExtra(col, newRecord)"
                   :isInModif="true"
                   minuteinterval="1"
                   :visulabel="true"
@@ -452,7 +459,7 @@
     </q-dialog>
     <q-dialog v-model="editRecordBool">
       <q-card class="dialog_card">
-        <q-bar dense class="bg-primary text-white">
+        <q-bar dense class="bg-primary text-white full-height">
           <span v-if="mytitle">{{ mytitle }}</span>
           <span v-else>{{ recModif[col_title] }}</span>
           <q-space/>
@@ -462,7 +469,7 @@
           <div
             v-for="col in mycolumns" :key="col.name">
             <div
-              v-if="colVisib.includes(col.field + col.subfield) && col.foredit">
+              v-if="showColCheck(col, false) && col.foredit">
               <div>
                 <CMyPopupEdit
                   :table="mytable"
@@ -474,6 +481,7 @@
                   v-model:row="recModif"
                   :field="col.field"
                   :subfield="col.subfield"
+                  :value_extra="getValueExtra(col, recModif)"
                   minuteinterval="1"
                   @save="SaveValue"
                   @show="selItem(recModif, col, true)"
diff --git a/src/components/CMyPopupEdit/CMyPopupEdit.ts b/src/components/CMyPopupEdit/CMyPopupEdit.ts
index be4c3497..e97b633a 100755
--- a/src/components/CMyPopupEdit/CMyPopupEdit.ts
+++ b/src/components/CMyPopupEdit/CMyPopupEdit.ts
@@ -120,6 +120,16 @@ export default defineComponent({
       required: false,
       default: '',
     },
+    field_extra: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    value_extra: {
+      type: [String, Number],
+      required: false,
+      default: '',
+    },
     table: {
       type: String,
       required: false,
@@ -511,7 +521,7 @@ export default defineComponent({
     }
 
     function visInNewRec(col: any) {
-      return !col.notShowInNewRec
+      return (!col.notShowInNewRec || (col.showOnlyNewRec && props.insertMode)) && (!col.noShowView || (col.noShowView && props.isInModif))
     }
 
     function getclassCol(col: any) {
@@ -637,6 +647,7 @@ export default defineComponent({
       fieldsTable,
       onInput,
       globalStore,
+      userStore,
       getTitleGall,
       getDirectoryGall,
       removephoto,
diff --git a/src/components/CMyPopupEdit/CMyPopupEdit.vue b/src/components/CMyPopupEdit/CMyPopupEdit.vue
index 1b4f527b..782bfbe7 100755
--- a/src/components/CMyPopupEdit/CMyPopupEdit.vue
+++ b/src/components/CMyPopupEdit/CMyPopupEdit.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="getclassCol(col)">
-    <div v-if="(visInNewRec(col) && visulabel) || !visulabel " style="flex-grow: 1;">
+    <div v-if="(visInNewRec(col) && visulabel) || (!visulabel && !col.showOnlyNewRec && !col.noShowView) " style="flex-grow: 1;">
       <div
         :class="{ flex: !isInModif, 'justify-center': true }">
         <div>
@@ -50,16 +50,19 @@
             </div>
             <div v-else>
 
-              <q-btn v-if="col.tipovisu === costanti.TipoVisu.LINK && myvalue" type="a" rounded dense size="sm"
-                     color="white" text-color="blue" icon="person" :to="col.link.replace(col.name, myvalue)">
-                <span :class="{disabled: disable }">{{ myvalue }}</span>
+              <q-btn v-if="col.tipovisu === costanti.TipoVisu.LINK && myvalue"
+                     type="a" rounded size="md"
+                     :class="{disabled: disable }"
+                     color="white" text-color="blue" :icon="`img:`+userStore.getImgByUsername(myvalue)" :to="col.link.replace(col.name, myvalue)"
+                     :label="myvalue"
+              >
               </q-btn>
               <q-avatar v-else-if="col.tipovisu === costanti.TipoVisu.LINKIMG && myvalue" size="60px">
 
                 <q-img :src="getImgUser(contact)" :alt="myvalue" img-class="imgprofile" height="60px"/>
               </q-avatar>
-              <q-btn v-else-if="col.tipovisu === costanti.TipoVisu.BUTTON && myvalue" rounded dense size="sm"
-                     color="primary" icon="person" :to="col.link.replace(col.name, myvalue)">{{ myvalue }}
+              <q-btn v-else-if="col.tipovisu === costanti.TipoVisu.BUTTON && myvalue" rounded size="sm"
+                     color="primary" icon="person" :to="col.link.replace(col.name, myvalue)" :label="myvalue">
               </q-btn>
               <span v-else :class="{disabled: disable }" v-html="visuValByType(myvalue, col, row)"></span>
             </div>
@@ -108,8 +111,8 @@
               :title="getTitleGall()"
               :directory="getDirectoryGall()"
               :imgGall="myvalue"
-              :edit="isviewfield()"
-              :canModify="canModify"
+              :edit="isviewfield() && isInModif"
+              :canModify="canModify && isInModif"
               @showandsave="Savedb">
             </CGallery>
           </div>
@@ -250,6 +253,9 @@
                 :multiple="true"
                 :withToggle="true"
                 :label="col.label"
+                :filter_table="col.filter_table"
+                :filter_field="col.filter_field"
+                :value_extra="value_extra"
                 v-model:arrvalue="myvalue"
                 @update:arrvalue="changevalRec"
                 :addall="false"
@@ -313,6 +319,9 @@
                 :pickup="col.fieldtype === costanti.FieldType.select_by_server"
                 :tablesel="col.type === costanti.FieldType.select_by_server ? tablesel : ''"
                 @update:value="changevalRec"
+                :filter_table="col.filter_table"
+                :filter_field="col.filter_field"
+                :value_extra="value_extra"
                 :optval="fieldsTable.getKeyByTable(col.jointable)"
                 :optlab="fieldsTable.getLabelByTable(col.jointable)"
                 :options="globalStore.getTableJoinByName(col.jointable, col.addall, col.filter)"
@@ -340,6 +349,9 @@
               :addall="false"
               :tablesel="col.tablesel"
               :pickup="true"
+              :filter_table="col.filter_table"
+              :filter_field="col.filter_field"
+              :value_extra="value_extra"
               label-color="primary"
               class="combowidth"
               color="primary"
@@ -356,6 +368,9 @@
                 :label="col.label"
                 v-model:value="myvalue"
                 @update:value="changevalRec"
+                :filter_table="col.filter_table"
+                :filter_field="col.filter_field"
+                :value_extra="value_extra"
                 :optval="fieldsTable.getKeyByTable(col.jointable)"
                 :optlab="fieldsTable.getLabelByTable(col.jointable)"
                 :options="globalStore.getTableJoinByName(col.jointable, col.addall, col.filter)"
@@ -385,7 +400,7 @@
               </p>
               <div v-if="!isFieldDb()">
                 <CMyEditor
-                  v-model:value="myvalue" :title="getTitleEditor(col, row)" @keyup.enter.stop
+                  v-model:value="myvalue" :title="getTitleEditor(col, row) && !isInModif" @keyup.enter.stop
                   :showButtons="false"
                   :canModify="canModify"
                   @update:value="changevalRec"
@@ -394,18 +409,29 @@
               </div>
             </div>
             <div v-else>
-              <q-btn
-                v-if="myvalue"
-                :label="$t('cal.details')" color="primary" text-color="white"
-                @click="visuhtml = true">
-              </q-btn>
+              <div class="row justify-evenly">
+                <q-btn
+                  v-if="myvalue"
+                  class="q-mx-md"
+                  icon="fas fa-info" color="primary" text-color="white"
+                  round
+                  @click="visuhtml = true">
+                </q-btn>
+
+                <q-btn
+                  v-if="myvalue && col.field_extra1"
+                  icon="far fa-file-alt" :label="col.titlepopupedit" color="primary" text-color="white"
+                  :to="`/mypage/`+row['_id']"
+                >
+                </q-btn>
+              </div>
               <!--<div v-html="visuValByType(myvalue, col, row)" @click="visueditor = true"></div>-->
 
               <div v-if="!isFieldDb()">
                 <q-dialog v-model="visuhtml" full-height full-width>
                   <q-card>
                     <q-bar dense class="bg-primary text-white">
-                      <span class="ellipsis"> {{ getTitleEditor(col, row) }} </span>
+                      <span> {{ getTitleEditor(col, row) }} </span>
                       <q-space/>
                       <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
                     </q-bar>
@@ -528,6 +554,9 @@
                 v-model:value="scope.value"
                 :pickup="col.fieldtype === costanti.FieldType.select_by_server"
                 :tablesel="col.type === costanti.FieldType.select_by_server ? tablesel : ''"
+                :filter_table="col.filter_table"
+                :filter_field="col.filter_field"
+                :value_extra="value_extra"
                 :optval="fieldsTable.getKeyByTable(col.jointable)"
                 :optlab="fieldsTable.getLabelByTable(col.jointable)"
                 :options="globalStore.getTableJoinByName(col.jointable, col.addall, col.filter)"
@@ -542,6 +571,9 @@
                 @update:arrvalue="changevalRec"
                 :addall="false"
                 :tablesel="tablesel"
+                :filter_table="col.filter_table"
+                :filter_field="col.filter_field"
+                :value_extra="value_extra"
                 :pickup="true"
                 label-color="primary"
                 class="combowidth"
@@ -589,6 +621,9 @@
                   v-model:value="scope.value"
                   @update:value="changevalRec"
                   :tablesel="tablesel"
+                  :filter_table="col.filter_table"
+                  :filter_field="col.filter_field"
+                  :value_extra="value_extra"
                   :pickup="pickup"
                   :optval="fieldsTable.getKeyByTable(tablesel)"
                   :optlab="fieldsTable.getLabelByTable(tablesel)"
diff --git a/src/components/CMySelect/CMySelect.ts b/src/components/CMySelect/CMySelect.ts
index b7b45548..b4a5f7f7 100755
--- a/src/components/CMySelect/CMySelect.ts
+++ b/src/components/CMySelect/CMySelect.ts
@@ -37,6 +37,26 @@ export default defineComponent({
       required: false,
       default: ''
     },
+    type: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    filter_table: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    filter_field: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    value_extra: {
+      type: [String, Number],
+      required: false,
+      default: ''
+    },
     optlab: [String, Function],
     optval: {
       type: String,
@@ -121,7 +141,7 @@ export default defineComponent({
         if (!props.multiselect_by_server) {
           valori.value = valoriload.value
         } else {
-          console.log('@@@ VALORI CHANGED (1)', valori.value)
+          // console.log('@@@ VALORI CHANGED (1)', valori.value)
         }
       },
     )
@@ -202,7 +222,7 @@ export default defineComponent({
     }
 
     function mounted() {
-      console.log(' #### mounted myselect', props.options, 'arrvalue', myarrvalue.value)
+      // console.log(' #### mounted myselect', props.options, 'arrvalue', myarrvalue.value)
       let rec: any
       if (props.options) {
         if (!props.multiselect_by_server) {
@@ -254,7 +274,7 @@ export default defineComponent({
         }
         // }
       }
-      console.log('@@@ VALORI CHANGED (4)', valori.value)
+      // console.log('@@@ VALORI CHANGED (4)', valori.value)
       if (!props.multiselect_by_server) {
         valori.value = valoriload.value
       } else {
@@ -269,7 +289,45 @@ export default defineComponent({
           console.log('Filter val', val, val.length)
           let myarr: any = []
 
-          if (val.length <= 1) {
+           if (!fieldsTable.tableRemotePickup.includes(props.tablesel)) {
+             myarr = props.options
+
+             let needle: any = props.value_extra
+
+             // console.log('needle', needle)
+             if (props.filter_table) {
+               // console.log('  FILTERTABLE', props.filter_field, myarr)
+               if (props.multiple) {
+                 myarr = myarr.filter((rec: any) => rec[props.filter_field] === needle)
+               } else {
+                 myarr = myarr.filter((rec: any) => rec[props.filter_field].includes(needle))
+               }
+               // console.log('  RISSSSSSSSS: ', myarr)
+             }
+             if (props.addall) {
+               let myobj: any = {}
+               if (typeof props.optlab === 'string') {
+                 myobj[props.optlab] = '(Tutti)'
+                 myobj[props.optval] = costanti.FILTER_TUTTI
+               }
+
+               if (myarr)
+                myarr = [myobj, ...myarr]
+               // console.log('     myarr: ', myarr)
+             }
+
+             if (myarr && myarr.length > 0) {
+               valori.value = myarr
+             } else {
+               if (props.filter_table) {
+                 valori.value = []
+               }
+             }
+
+             return
+           }
+
+           if (val.length <= 1) {
             console.log('@@@ LENGTH <= 1')
             abort()
             return
@@ -296,8 +354,6 @@ export default defineComponent({
             }
             // const needle = val.toLocaleLowerCase()
             // optFiltered.value = optFiltered.value.filter((v: any) => v.toLocaleLowerCase().indexOf(needle) > -1)
-          } else {
-            myarr = props.options
           }
 
           if (props.addall) {
@@ -313,7 +369,7 @@ export default defineComponent({
           if (myarr && myarr.length > 0) {
             valori.value = myarr
             if (props.multiselect_by_server) {
-              console.log('@@@ VALORI CHANGED (3)', valori.value)
+              // console.log('@@@ VALORI CHANGED (3)', valori.value)
             }
           }
 
diff --git a/src/components/CMySelect/CMySelect.vue b/src/components/CMySelect/CMySelect.vue
index 54109484..e32a8218 100755
--- a/src/components/CMySelect/CMySelect.vue
+++ b/src/components/CMySelect/CMySelect.vue
@@ -114,6 +114,7 @@
         @update:model-value="changeval"
         rounded
         outlined
+        @filter="filterFn"
         v-bind="$attrs"
         :input-class="myclass"
         :use-input="useinput"
@@ -149,7 +150,6 @@
           v-if="withToggle"
           v-slot:option="{ itemProps, opt, selected, toggleOption }">
           <q-item v-bind="itemProps">
-
             <q-item-section>
               <q-item-label>{{ opt[optlab] }}</q-item-label>
             </q-item-section>
@@ -174,6 +174,7 @@
         :option-value="optval"
         :option-label="optlab"
         @update:model-value="changeval"
+        @filter="filterFn"
         :label="label"
         emit-value
         options-selected-class="text-deep-orange"
diff --git a/src/components/CSkill/CSkill.ts b/src/components/CSkill/CSkill.ts
index f579514b..f1af56f3 100755
--- a/src/components/CSkill/CSkill.ts
+++ b/src/components/CSkill/CSkill.ts
@@ -25,6 +25,11 @@ export default defineComponent({
         return []
       }
     },
+    visuinpage: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     username: {
       type: String,
       required: false,
@@ -95,8 +100,12 @@ export default defineComponent({
           lk_as,
           af_objId_tab,
           lk_proj: {
+            recSkill: 1,
+            sector: 1,
             idSkill: 1,
             idSubSkill: 1,
+            idStatusSkill: 1,
+            idContribType: 1,
             idCity: 1,
             numLevel: 1,
             photos: 1,
@@ -104,11 +113,12 @@ export default defineComponent({
             subTitle: 1,
             date_created: 1,
             date_updated: 1,
-            comune: 1,
             userId: 1,
             username: 1,
             name: 1,
             surname: 1,
+            comune: 1,
+            mycities: 1,
             'profile.img': 1,
             'profile.qualifica': 1,
           }
@@ -120,8 +130,12 @@ export default defineComponent({
           lk_as: 'comune',
           af_objId_tab: '',
           lk_proj: {
+            recSkill: 1,
+            sector: 1,
             idSkill: 1,
             idSubSkill: 1,
+            idStatusSkill: 1,
+            idContribType: 1,
             idCity: 1,
             numLevel: 1,
             photos: 1,
diff --git a/src/components/CSkill/CSkill.vue b/src/components/CSkill/CSkill.vue
index 0f111711..425ee028 100755
--- a/src/components/CSkill/CSkill.vue
+++ b/src/components/CSkill/CSkill.vue
@@ -9,9 +9,11 @@
         prop_colkey="idSkill"
         col_title="subTitle"
         :vertical="true"
-        :choose_visutype="true"
+        :choose_visutype="!visuinpage"
+        :butt_modif_new="!visuinpage"
         nodataLabel="Nessuna Competenza inserita"
         :prop_search="false"
+        :visuinpage="visuinpage"
         noresultLabel="Il filtro selezionato non ha trovato nessun risultato"
         :defaultnewrec="getdefaultnewrec"
         :filtercustom="filtercustom"
diff --git a/src/css/app.scss b/src/css/app.scss
index 30178571..76e17c5e 100755
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -868,9 +868,9 @@ $heightBtn: 100%;
 }
 
 .combowidth {
-  min-width: 150px;
+  min-width: 100px;
   @media (max-width: 450px) {
-    min-width: 300px;
+    min-width: 250px;
   }
 }
 
diff --git a/src/db/static_data.ts b/src/db/static_data.ts
index a5a5d14d..f1c6ccbd 100755
--- a/src/db/static_data.ts
+++ b/src/db/static_data.ts
@@ -433,6 +433,17 @@ const baseroutes: IListRoutes[] = [
     inmenu: false,
     infooter: false,
   },
+  {
+    active: true,
+    order: 130,
+    path: '/mypage/:idSkill',
+    materialIcon: 'fas fa-user',
+    name: 'pages.profile2',
+    component: () => import('@/views/user/mypageskill/mypageskill.vue'),
+    meta: { requiresAuth: true },
+    inmenu: false,
+    infooter: false,
+  },
   {
     active: true,
     order: 2000,
diff --git a/src/model/GlobalStore.ts b/src/model/GlobalStore.ts
index f37c5f62..b4ef4f67 100755
--- a/src/model/GlobalStore.ts
+++ b/src/model/GlobalStore.ts
@@ -495,6 +495,7 @@ export interface IColGridTable {
   askaction?: string
   foredit?: boolean
   fieldtype?: number
+  noshowlabel?: boolean
   tipovisu?: number
   link?: string
   jointable?: string
@@ -506,6 +507,9 @@ export interface IColGridTable {
   notShowInNewRec?: boolean
   tablesel?: string
   notsave?: boolean
+  showOnlyNewRec?: boolean
+  visuinpage?: boolean
+  noShowView?: boolean
   maxlength?: number
   filter_table?: string
   filter_field?: string
diff --git a/src/statics/lang/it.js b/src/statics/lang/it.js
index a4e1bda8..b68c781b 100755
--- a/src/statics/lang/it.js
+++ b/src/statics/lang/it.js
@@ -409,6 +409,8 @@ const msg_it = {
       note_payment: 'Note Aggiuntive',
       country_pay: 'Paese di Destinazione Pagamenti',
       username_telegram: 'Username Telegram',
+      firstname_telegram: 'Nome Telegram',
+      lastname_telegram: 'Cognome Telegram',
       telegram: 'Chat Telegram \'{botname}\'',
       teleg_id: 'Telegram ID',
       teleg_id_old: 'OLD Tel ID',
@@ -656,6 +658,7 @@ const msg_it = {
       teacher: 'Condotto da',
       enterdate: 'Inserisci data',
       details: 'Dettagli',
+      open_details: 'Apri Pagina',
       infoextra: 'Date e Ora Extra:',
       alldayevent: 'Tutto il giorno',
       eventstartdatetime: 'Inizio',
diff --git a/src/store/Modules/fieldsTable.ts b/src/store/Modules/fieldsTable.ts
index f89f89fd..0c8ab1ae 100755
--- a/src/store/Modules/fieldsTable.ts
+++ b/src/store/Modules/fieldsTable.ts
@@ -70,7 +70,11 @@ function AddCol(params: IColGridTable) {
     addall: (params.addall === undefined) ? false : params.addall,
     filter: (params.filter === undefined) ? null : params.filter,
     noshowifnone: (params.noshowifnone === undefined) ? false : params.noshowifnone,
+    noshowlabel: (params.noshowlabel === undefined) ? false : params.noshowlabel,
     notShowInNewRec: (params.notShowInNewRec === undefined) ? false : params.notShowInNewRec,
+    showOnlyNewRec: (params.showOnlyNewRec === undefined) ? false : params.showOnlyNewRec,
+    visuinpage: (params.visuinpage === undefined) ? false : params.visuinpage,
+    noShowView: (params.noShowView === undefined) ? false : params.noShowView,
     notsave: (params.notsave === undefined) ? false : params.notsave,
     filter_table: (params.filter_table === undefined) ? '' : params.filter_table,
     maxlength: (params.maxlength === undefined) ? 0 : params.maxlength,
@@ -422,23 +426,35 @@ export const colmySkills = [
   }), */
   //AddCol({ name: 'name', label_trans: 'reg.name', fieldtype: costanti.FieldType.string }),
   //AddCol({ name: 'surname', label_trans: 'reg.surname', fieldtype: costanti.FieldType.string }),
-  AddCol({ name: 'username', label_trans: 'reg.username', foredit: false, tipovisu: costanti.TipoVisu.LINK, link: '/my/username' }),
-  /*AddCol({
+  AddCol({ name: 'subTitle', label_trans: 'event.title', fieldtype: costanti.FieldType.string, noshowifnone: true, maxlength: 70, noshowlabel: true, noShowView: true }),
+  AddCol({
+    name: 'photos',
+    label_trans: 'skill.photos',
+    fieldtype: costanti.FieldType.listimages,
+    jointable: '',
+    noshowifnone: true,
+  }),
+  AddCol({
     name: 'idSector',
     label_trans: 'sectors.name',
     fieldtype: costanti.FieldType.select,
     required: true,
     jointable: 'sectors',
-
-  }), */
-  AddCol({ name: 'subTitle', label_trans: 'event.title', fieldtype: costanti.FieldType.string, noshowifnone: true, maxlength: 40 }),
+    notsave: true,
+    showOnlyNewRec: true,
+    visible: true,
+  }),
   AddCol({
     name: 'idSkill',
     label_trans: 'skill.name',
     fieldtype: costanti.FieldType.select,
     required: true,
     jointable: 'skills',
-    // filter_table: 'sectors',
+    filter_table: 'sectors',
+    filter_field: 'idSector',
+    noshowlabel: true,
+    icon: 'far fa-id-card',
+    visuinpage: true,
   }),
   AddCol({
     name: 'idSubSkill',
@@ -448,6 +464,9 @@ export const colmySkills = [
     jointable: 'subskills',
     filter_table: 'skills',
     filter_field: 'idSkill',
+    noshowlabel: true,
+    icon: 'fas fa-scroll',
+    visuinpage: true,
   }),
   AddCol({
     name: 'numLevel',
@@ -456,6 +475,9 @@ export const colmySkills = [
     required: true,
     jointable: 'levels',
     noshowifnone: true,
+    noshowlabel: true,
+    icon: 'fas fa-layer-group',
+    visuinpage: true,
   }),
   AddCol({
     name: 'idStatusSkill',
@@ -463,6 +485,7 @@ export const colmySkills = [
     fieldtype: costanti.FieldType.multiselect,
     jointable: 'statusSkills',
     noshowifnone: true,
+    visuinpage: true,
   }),
   AddCol({
     name: 'idContribType',
@@ -470,6 +493,9 @@ export const colmySkills = [
     fieldtype: costanti.FieldType.multiselect,
     jointable: 'contribtypes',
     noshowifnone: true,
+    noshowlabel: true,
+    icon: 'fas fa-hands-helping',
+    visuinpage: true,
   }),
   AddCol({
     name: 'idCity',
@@ -477,16 +503,13 @@ export const colmySkills = [
     fieldtype: costanti.FieldType.multiselect_by_server,
     jointable: 'cities',
     tablesel: 'cities',
+    noshowlabel: true,
+    icon: 'fas fa-map-marker-alt',
+    visuinpage: true,
   }),
-  AddCol({
-    name: 'photos',
-    label_trans: 'skill.photos',
-    fieldtype: costanti.FieldType.listimages,
-    jointable: '',
-    noshowifnone: true,
-  }),
+  AddCol({ name: 'username', label_trans: 'reg.username', foredit: false, tipovisu: costanti.TipoVisu.LINK, link: '/my/username', noshowlabel: true }),
   AddCol({ name: 'note', label_trans: 'proj.longdescr', fieldtype: costanti.FieldType.html, noshowifnone: true,
-    titlepopupedit: 'Dettagli', field_extra1: 'username', subfield_extra1: '' }),
+    titlepopupedit: 'Dettagli:', field_extra1: 'username', subfield_extra1: '' }),
   AddCol(DuplicateRec),
   AddCol(ModifRec),
   AddCol(DeleteRec),
@@ -1415,6 +1438,24 @@ export const fieldsTable = {
       label_trans: 'reg.manage_telegram',
       fieldtype: costanti.FieldType.boolean,
     }),
+    AddCol({
+      name: 'profile.username_telegram',
+      field: 'profile',
+      subfield: 'username_telegram',
+      label_trans: 'reg.username_telegram',
+    }),
+    AddCol({
+      name: 'profile.firstname_telegram',
+      field: 'profile',
+      subfield: 'firstname_telegram',
+      label_trans: 'reg.firstname_telegram',
+    }),
+    AddCol({
+      name: 'profile.lastname_telegram',
+      field: 'profile',
+      subfield: 'lastname_telegram',
+      label_trans: 'reg.lastname_telegram',
+    }),
     AddCol({
       name: 'profile.socio',
       field: 'profile',
@@ -1813,6 +1854,7 @@ export const fieldsTable = {
       columns: colCitys,
       colkey: '_id',
       collabel: 'comune',
+      // collabel: (rec: any) => `${rec.comune} (${rec.prov})`,
       remote: true,
     },
     {
diff --git a/src/store/Modules/tools.ts b/src/store/Modules/tools.ts
index f4dae790..6110d469 100644
--- a/src/store/Modules/tools.ts
+++ b/src/store/Modules/tools.ts
@@ -1470,11 +1470,15 @@ export const tools = {
     const myimage = dir + file
     // console.log('includes = ', static_data.preLoadImages.map((a) => a.imgname).includes(myimage), myimage)
     let ris = ''
-    // @ts-ignore
-    if (this.isMobile() && (preloadedimages().map((a) => a.imgname).includes(myimage))) {
-      ris = `${dir}mobile/${file}`
-    } else {
-      ris = myimage
+    try {
+      // @ts-ignore
+      if (this.isMobile() && (preloadedimages().map((a) => a.imgname).includes(myimage))) {
+        ris = `${dir}mobile/${file}`
+      } else {
+        ris = myimage
+      }
+    }catch (e) {
+      return myimage
     }
 
     // console.log('getimgbysize', ris)
@@ -3280,7 +3284,7 @@ export const tools = {
   },
   getCookie(mytok: any, def?: any) {
     const ris = Cookies.get(mytok)
-    console.log('getCookie', mytok, ris)
+    // console.log('getCookie', mytok, ris)
     if (!!ris) {
       return ris
     } else {
@@ -3289,7 +3293,7 @@ export const tools = {
   },
 
   setCookie(mytok: any, value: string) {
-    console.log('setCookie', mytok, value)
+    // console.log('setCookie', mytok, value)
     return Cookies.set(mytok, value)
   },
 
diff --git a/src/store/UserStore.ts b/src/store/UserStore.ts
index 63ecf3ff..d3dea4fd 100755
--- a/src/store/UserStore.ts
+++ b/src/store/UserStore.ts
@@ -857,6 +857,20 @@ export const useUserStore = defineStore('UserStore', {
 
     },
 
+    async loadSkill(idSkill: string) {
+      const data = {
+        idSkill
+      }
+
+      return Api.SendReq('/myskills/page', 'POST', data)
+        .then((res) => {
+          return res.data
+        }).catch((error) => {
+          return {}
+        })
+
+    },
+
     async loadFriends(username: string) {
       return Api.SendReq('/users/friends', 'POST', null)
         .then((res) => {
diff --git a/src/views/user/editprofile/editprofile.vue b/src/views/user/editprofile/editprofile.vue
index c9f320ee..60d1ac44 100755
--- a/src/views/user/editprofile/editprofile.vue
+++ b/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"
diff --git a/src/views/user/mypageskill/mypageskill.scss b/src/views/user/mypageskill/mypageskill.scss
new file mode 100755
index 00000000..558a623b
--- /dev/null
+++ b/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;
+}
diff --git a/src/views/user/mypageskill/mypageskill.ts b/src/views/user/mypageskill/mypageskill.ts
new file mode 100755
index 00000000..d92b1d89
--- /dev/null
+++ b/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,
+    }
+  }
+})
diff --git a/src/views/user/mypageskill/mypageskill.vue b/src/views/user/mypageskill/mypageskill.vue
new file mode 100755
index 00000000..b8fc8903
--- /dev/null
+++ b/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>
+
diff --git a/src/views/user/myprofile/myprofile.vue b/src/views/user/myprofile/myprofile.vue
index 775c29a0..9008d2a7 100755
--- a/src/views/user/myprofile/myprofile.vue
+++ b/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"