From 5375e9d7282ed98ec0b0a7669990e2c4ce835485 Mon Sep 17 00:00:00 2001
From: paoloar77 <paolo.arena77@gmail.com>
Date: Mon, 3 Jan 2022 21:53:41 +0100
Subject: [PATCH]  - MyProfile  - Immagine profilo e small

---
 src/common/shared_vuejs.ts                    |   3 +-
 src/components/CCopyBtn/CCopyBtn.scss         |   5 -
 .../CEventsCalendar/CEventsCalendar.vue       |   8 +-
 src/components/CGallery/CGallery.scss         |   5 -
 src/components/CGridTableRec/CGridTableRec.ts |   9 +-
 .../CGridTableRec/CGridTableRec.vue           |  12 +-
 src/components/CMyEditor/CMyEditor.vue        |   3 +-
 src/components/CMyPopupEdit/CMyPopupEdit.ts   |  13 ++
 src/components/CMyPopupEdit/CMyPopupEdit.vue  |  38 +++-
 src/components/CMyTeacher/CMyTeacher.vue      |   2 +-
 src/components/CSkill/CSkill.scss             |   1 +
 src/components/CSkill/CSkill.ts               |  39 ++++-
 src/components/CSkill/CSkill.vue              |   2 +
 src/components/CTitleBanner/CTitleBanner.ts   |   8 +-
 src/components/CTitleBanner/CTitleBanner.vue  |   4 +-
 src/components/Header/Header.ts               |   8 +-
 src/css/app.scss                              |  24 ++-
 src/db/lang/ws_it.js                          |   1 +
 src/db/static_data.ts                         |  13 +-
 src/mixins/mixin-users.ts                     |   8 +-
 src/model/GlobalStore.ts                      |   2 +
 src/rootgen/admin/eventlist/eventlist.vue     |   4 +-
 src/rootgen/admin/newsletter/newsletter.ts    |   2 +-
 src/store/Modules/costanti.ts                 |   6 +
 src/store/Modules/fieldsTable.ts              |   9 +-
 src/store/Modules/serv_constants.ts           |  20 +++
 src/store/Modules/tools.ts                    |  15 +-
 src/store/UserStore.ts                        |  24 +++
 src/views/login/signup/signup.ts              |   2 +-
 .../projects/proj-list/proj-list.vue.off      |   2 +-
 .../editprofile.scss}                         |   0
 .../profile.ts => editprofile/editprofile.ts} |   2 +-
 .../editprofile.vue}                          | 163 ++++++++++--------
 src/views/user/myprofile/myprofile.scss       |  18 ++
 src/views/user/myprofile/myprofile.ts         |  88 ++++++++++
 src/views/user/myprofile/myprofile.vue        | 105 +++++++++++
 src/views/user/test/test.vue                  |   2 +-
 37 files changed, 542 insertions(+), 128 deletions(-)
 rename src/views/user/{profile/profile.scss => editprofile/editprofile.scss} (100%)
 rename src/views/user/{profile/profile.ts => editprofile/editprofile.ts} (99%)
 rename src/views/user/{profile/profile.vue => editprofile/editprofile.vue} (77%)
 create mode 100755 src/views/user/myprofile/myprofile.scss
 create mode 100755 src/views/user/myprofile/myprofile.ts
 create mode 100755 src/views/user/myprofile/myprofile.vue

diff --git a/src/common/shared_vuejs.ts b/src/common/shared_vuejs.ts
index 8b81ef75..ab74a4fe 100755
--- a/src/common/shared_vuejs.ts
+++ b/src/common/shared_vuejs.ts
@@ -45,12 +45,13 @@ export const shared_consts = {
   REPORT_FILT_ATTIVITA: 2,
 
   TAB_COUNTRY: 'countries',
+  TAB_CITIES: 'cities',
   TAB_PHONES: 'phones',
   TAB_SETTINGS: 'settings',
 
   KEY_TO_CRYPTED: ['PWD_FROM'],
 
-  TablePickup: ['countries', 'phones'],
+  TablePickup: ['countries', 'phones', 'cities'],
 
   CashType: {
     None: 0,
diff --git a/src/components/CCopyBtn/CCopyBtn.scss b/src/components/CCopyBtn/CCopyBtn.scss
index 02d3a55c..a216597a 100755
--- a/src/components/CCopyBtn/CCopyBtn.scss
+++ b/src/components/CCopyBtn/CCopyBtn.scss
@@ -21,11 +21,6 @@ $grayshadow: #555;
   height: 200px;
 }
 
-.myimg-view {
-  border-radius: 5px !important;
-  height: 80px;
-}
-
 .q-img {
   &__image {
     border-radius: 10px !important;
diff --git a/src/components/CEventsCalendar/CEventsCalendar.vue b/src/components/CEventsCalendar/CEventsCalendar.vue
index 30471637..b181a245 100755
--- a/src/components/CEventsCalendar/CEventsCalendar.vue
+++ b/src/components/CEventsCalendar/CEventsCalendar.vue
@@ -11,7 +11,7 @@
     <div>
       <!-- display an myevent -->
       <q-dialog v-model="displayEvent">
-        <q-card v-if="myevent" :style="`min-width: ` + tools.myheight_dialog() + `px;`">
+        <q-card v-if="myevent" class="dialog_card">
           <q-toolbar class="bg-primary text-white">
             <!--<q-toolbar :class="tools.displayClasses(myevent)"-->
             <!--:style="tools.displayStyles(myevent) + ` min-width: `+ tools.myheight_dialog() + `px;`">-->
@@ -120,7 +120,7 @@
       <!-- id_bookedeventadd/edit an myevent -->
 
       <q-dialog v-model="addEvent" no-backdrop-dismiss persistent>
-        <q-card v-if="addEvent" :style="`min-width: `+ tools.myheight_dialog() + `px;`">
+        <q-card v-if="addEvent" class="dialog_card">
           <q-toolbar class="bg-primary text-white">
             <q-toolbar-title>
               {{ addOrUpdateEvent() }} {{ $t('cal.event') }}
@@ -350,7 +350,7 @@
       </q-dialog>
 
       <q-dialog v-model="bookEventpage.show" no-backdrop-dismiss>
-        <q-card v-if="bookEventpage.show" :style="`min-width: `+ tools.myheight_dialog() + `px;`">
+        <q-card v-if="bookEventpage.show" class="dialog_card">
           <q-toolbar class="bg-primary text-white">
             <q-toolbar-title>
               {{ $t('cal.booking') }}
@@ -481,7 +481,7 @@
       </q-dialog>
 
       <q-dialog v-model="askInfopage.show" no-backdrop-dismiss>
-        <q-card v-if="askInfopage.show" :style="`min-width: `+ tools.myheight_dialog() + `px;`">
+        <q-card v-if="askInfopage.show" class="dialog_card">
           <q-toolbar class="bg-primary text-white">
             <q-toolbar-title>
               {{ $t('cal.booking') }}
diff --git a/src/components/CGallery/CGallery.scss b/src/components/CGallery/CGallery.scss
index 271a7140..9c9a074e 100755
--- a/src/components/CGallery/CGallery.scss
+++ b/src/components/CGallery/CGallery.scss
@@ -32,11 +32,6 @@ $grayshadow: #555;
 }
 
 
-.myimg-view {
-  border-radius: 5px !important;
-  height: 80px;
-}
-
 .q-img {
   &__image {
     border-radius: 10px !important;
diff --git a/src/components/CGridTableRec/CGridTableRec.ts b/src/components/CGridTableRec/CGridTableRec.ts
index 35c07c96..a487a53f 100755
--- a/src/components/CGridTableRec/CGridTableRec.ts
+++ b/src/components/CGridTableRec/CGridTableRec.ts
@@ -135,7 +135,7 @@ export default defineComponent({
       type: Object as PropType<IPagination>,
       required: false,
       default: () => {
-        return { sortBy: 'desc', descending: false, page: 1, rowsNumber: 10, rowsPerPage: 10 }
+        return { sortBy: 'desc', descending: false, page: 1, rowsNumber: 0, rowsPerPage: 10 }
       },
     },
     defaultnewrec: {
@@ -216,11 +216,16 @@ export default defineComponent({
       return lab
     })
 
-    watch(searchList.value, (to: any, from: any) =>  {
+    watch(() => searchList.value, (to: any, from: any) =>  {
       console.log('watch searchlist', to)
       refresh()
     })
 
+    watch(() => props.filtercustom, (to: any, from: any) =>  {
+      console.log('filtercustom', to)
+      refresh()
+    })
+
     function searchval(newval: any, table: any) {
       console.log('searchval', newval, table)
       tools.setCookie(tools.COOK_SEARCH + table, newval)
diff --git a/src/components/CGridTableRec/CGridTableRec.vue b/src/components/CGridTableRec/CGridTableRec.vue
index 6f39cc10..d849483d 100755
--- a/src/components/CGridTableRec/CGridTableRec.vue
+++ b/src/components/CGridTableRec/CGridTableRec.vue
@@ -169,8 +169,8 @@
           </span>
         </div>
 
-        <div
-          class="row justify-center vertical-middle">
+        <div v-if="(prop_search || canEdit)"
+             class="row justify-center vertical-middle">
 
           <div v-if="prop_search" class="q-mr-sm">
             <q-input
@@ -184,7 +184,7 @@
 
           <q-space></q-space>
           <q-select
-            v-if="mytable"
+            v-if="mytable && pagination.rowsNumber > 0 && (prop_search || canEdit)"
             v-model="colVisib"
             rounded
             outlined
@@ -202,7 +202,7 @@
 
         </div>
 
-        <div v-if="pagination.rowsNumber > 0">{{ pagination.rowsNumber }} elementi trovati</div>
+        <div v-if="pagination.rowsNumber > 0 && prop_search">{{ pagination.rowsNumber }} elementi trovati</div>
       </template>
 
       <template v-slot:body="props">
@@ -364,7 +364,7 @@
       </div>
     </div>
     <q-dialog v-model="newRecordBool" @hide="hidewindow">
-      <q-card :style="`min-width: `+ tools.myheight_dialog() + `px;`">
+      <q-card class="dialog_card">
         <q-bar dense class="bg-primary text-white">
           Nuovo:
           <q-space/>
@@ -404,7 +404,7 @@
       </q-card>
     </q-dialog>
     <q-dialog v-model="editRecordBool">
-      <q-card :style="`min-width: `+ tools.myheight_dialog() + `px;`">
+      <q-card class="dialog_card">
         <q-bar dense class="bg-primary text-white">
           <span v-if="mytitle">{{ mytitle }}</span>
           <span v-else>{{ recModif[col_title] }}</span>
diff --git a/src/components/CMyEditor/CMyEditor.vue b/src/components/CMyEditor/CMyEditor.vue
index ce9bfa1f..b653e74c 100755
--- a/src/components/CMyEditor/CMyEditor.vue
+++ b/src/components/CMyEditor/CMyEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <q-card :style="`min-width: `+ tools.myheight_dialog() + `px;` ">
+    <q-card class="dialog_card">
       <q-toolbar v-if="showButtons" class="bg-primary text-white" style="min-height: 30px;">
         <q-toolbar-title>
           Editor
@@ -25,6 +25,7 @@
           </q-btn>
           <q-editor
             ref="editor"
+            content-class="wrap_anywhere"
             toolbar-text-color="white"
             toolbar-toggle-color="yellow-8"
             toolbar-bg="primary"
diff --git a/src/components/CMyPopupEdit/CMyPopupEdit.ts b/src/components/CMyPopupEdit/CMyPopupEdit.ts
index f23fd61a..41213ba3 100755
--- a/src/components/CMyPopupEdit/CMyPopupEdit.ts
+++ b/src/components/CMyPopupEdit/CMyPopupEdit.ts
@@ -157,6 +157,7 @@ export default defineComponent({
     const myvalueprec = ref('false')
     const countryname = ref('')
     const visueditor = ref(false)
+    const visuhtml = ref(false)
     const showeditor = ref(false)
 
     const myImgGall = ref(<IImgGallery[]>[{}])
@@ -477,6 +478,17 @@ export default defineComponent({
             return ''
         } else {
           let mystr = ''
+          let mylink = ''
+
+          if (col.link)
+            mylink = col.link.replace(col.name, val)
+          if (col.tipovisu === costanti.TipoVisu.LINK && col.link) {
+            return "<a href='"+mylink+"'>" + val + '</a>'
+          } else if (col.tipovisu === costanti.TipoVisu.BUTTON && col.link) {
+            return ''
+          }
+
+
           if (props.showall) {
             return val
           } else {
@@ -586,6 +598,7 @@ export default defineComponent({
       myvalue,
       countryname,
       visueditor,
+      visuhtml,
       showeditor,
       isviewfield,
       changeval,
diff --git a/src/components/CMyPopupEdit/CMyPopupEdit.vue b/src/components/CMyPopupEdit/CMyPopupEdit.vue
index d2ff830b..a40668de 100755
--- a/src/components/CMyPopupEdit/CMyPopupEdit.vue
+++ b/src/components/CMyPopupEdit/CMyPopupEdit.vue
@@ -2,7 +2,7 @@
   <div :class="getclassCol(col)">
     <div v-if="(visInNewRec(col) && visulabel) || !visulabel " style="flex-grow: 1;">
       <div
-        :class="{ editor: (col.fieldtype === costanti.FieldType.html) && !isInModif, flex: true, 'justify-center': true }">
+        :class="{ flex: true, 'justify-center': true }">
         <div>
           <!-- Edit Value -->
           <div v-if="col.fieldtype === costanti.FieldType.boolean">
@@ -24,8 +24,10 @@
           <div v-else-if="col.fieldtype === costanti.FieldType.string">
             <div v-if="visulabel || isInModif" class="flex">
               <q-input
+                v-bind="$attrs"
                 v-model="myvalue"
                 autogrow
+                :disable="disable"
                 @keyup.enter.stop
                 @update:model-value="changevalRec"
                 autofocus
@@ -33,12 +35,21 @@
               </q-input>
             </div>
             <div v-else>
-              <span v-html="visuValByType(myvalue, col, row)"></span>
+
+              <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)">
+                {{ myvalue }}
+              </q-btn>
+              <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>
+              <span v-else v-html="visuValByType(myvalue, col, row)"></span>
             </div>
           </div>
           <div v-else-if="col.fieldtype === costanti.FieldType.number">
             <div v-if="canEdit || isInModif">
               <q-input
+                v-bind="$attrs"
                 v-model="myvalue"
                 @update:model-value="Savedb"
                 type="number"
@@ -316,10 +327,28 @@
               </div>
             </div>
             <div v-else>
-              <div v-html="visuValByType(myvalue, col, row)" @click="visueditor = true"></div>
+              <q-btn
+                v-if="myvalue"
+                :label="$t('cal.details')" color="primary" text-color="white"
+                @click="visuhtml = true">
+              </q-btn>
+              <!--<div v-html="visuValByType(myvalue, col, row)" @click="visueditor = true"></div>-->
+
               <div v-if="!isFieldDb()">
+                <q-dialog v-model="visuhtml" full-height full-width auto-close>
+                  <q-card>
+                    <q-bar dense class="bg-primary text-white">
+                      <q-space/>
+                    </q-bar>
+                    <q-card-section class="inset-shadow">
+                      <q-card class="dialog_card">
+                        <div v-html="myvalue" class="wrap_anywhere"></div>
+                      </q-card>
+                    </q-card-section>
+                  </q-card>
+                </q-dialog>
                 <q-dialog v-model="visueditor" no-backdrop-dismiss persistent full-height full-width>
-                  <q-card :style="`min-width: `+ tools.myheight_dialog() + `px;`">
+                  <q-card class="dialog_card">
                     <q-card-section>
                       <CMyEditor
                         v-if="visueditor" v-model:value="myvalue" :title="col.title" @keyup.enter.stop
@@ -369,6 +398,7 @@
             </div>
             <div v-else-if="col.fieldtype === costanti.FieldType.string">
               <q-input
+                v-bind="$attrs"
                 v-model="scope.value"
                 autogrow
                 @keyup.enter.stop
diff --git a/src/components/CMyTeacher/CMyTeacher.vue b/src/components/CMyTeacher/CMyTeacher.vue
index 910cefe2..8b9edbec 100755
--- a/src/components/CMyTeacher/CMyTeacher.vue
+++ b/src/components/CMyTeacher/CMyTeacher.vue
@@ -1,7 +1,7 @@
 <template>
     <span>
         <q-dialog v-model="showuserdetails" v-if="myop">
-            <q-card :style="`min-width: `+ tools.myheight_dialog() + `px;`">
+            <q-card class="dialog_card">
                 <q-toolbar class="bg-primary text-white">
                     <q-toolbar-title>
                         {{ myop.name }} {{ myop.surname }}
diff --git a/src/components/CSkill/CSkill.scss b/src/components/CSkill/CSkill.scss
index ab083089..935e5c5e 100755
--- a/src/components/CSkill/CSkill.scss
+++ b/src/components/CSkill/CSkill.scss
@@ -27,3 +27,4 @@
 .q-img__content > div{
   background: rgba(0,0,0,0.17) !important;
 }
+
diff --git a/src/components/CSkill/CSkill.ts b/src/components/CSkill/CSkill.ts
index def5e920..62cfe560 100755
--- a/src/components/CSkill/CSkill.ts
+++ b/src/components/CSkill/CSkill.ts
@@ -25,6 +25,11 @@ export default defineComponent({
         return []
       }
     },
+    username: {
+      type: String,
+      required: false,
+      default: ''
+    }
   },
   components: {
     CMyFieldDb, CGridTableRec,
@@ -44,7 +49,7 @@ export default defineComponent({
           data: {},
           field: 'myskills'
         }
-      };
+      }
 
       if (props.defaultnewrec) {
 
@@ -72,13 +77,23 @@ export default defineComponent({
 
 
     function extraparams() {
+      let lk_tab = 'users'
+      let lk_LF = 'userId'
+      let lk_FF = '_id'
+      let lk_as = 'user'
+      let af_objId_tab = 'myId'
+
+      if (props.username) {
+        // lk_LF = 'username'
+      }
+
       return {
         lookup1: {
-          lk_tab: 'users',
-          lk_LF: 'userId',
-          lk_FF: '_id',
-          lk_as: 'user',
-          af_objId_tab: 'myId',
+          lk_tab,
+          lk_LF,
+          lk_FF,
+          lk_as,
+          af_objId_tab,
           lk_proj: {
             idSkill: 1,
             idSubSkill: 1,
@@ -97,12 +112,24 @@ export default defineComponent({
       }
     }
 
+    function getFilterCustom() {
+      /*if (props.username) {
+        return [
+          { username: props.username }
+        ]
+      } else {
+        return props.filtercustom
+      }*/
+
+    }
+
     return {
       tools,
       costanti,
       colmySkills,
       getdefaultnewrec,
       extraparams,
+      getFilterCustom,
     }
   },
 })
diff --git a/src/components/CSkill/CSkill.vue b/src/components/CSkill/CSkill.vue
index 65e86b24..931f2607 100755
--- a/src/components/CSkill/CSkill.vue
+++ b/src/components/CSkill/CSkill.vue
@@ -2,6 +2,7 @@
   <div>
     <div class="q-ma-sm q-gutter-sm q-pa-xs">
       <CGridTableRec
+        v-if="filtercustom.length > 0"
         prop_mytable="myskills"
         prop_mytitle=""
         :prop_mycolumns="colmySkills"
@@ -13,6 +14,7 @@
         noresultLabel="Il filtro selezionato non ha trovato nessun risultato"
         :defaultnewrec="getdefaultnewrec"
         :filtercustom="filtercustom"
+        v-bind="$attrs"
         :extraparams="extraparams()">
 
       </CGridTableRec>
diff --git a/src/components/CTitleBanner/CTitleBanner.ts b/src/components/CTitleBanner/CTitleBanner.ts
index c1a0469e..f93a80cc 100755
--- a/src/components/CTitleBanner/CTitleBanner.ts
+++ b/src/components/CTitleBanner/CTitleBanner.ts
@@ -70,9 +70,11 @@ export default defineComponent({
     }
 
     function apri() {
-      myvisible.value = !myvisible.value
-      if (myvisible.value)
-        emit('apri')
+      if (props.canopen) {
+        myvisible.value = !myvisible.value
+        if (myvisible.value)
+          emit('apri')
+      }
     }
 
     function getclass() {
diff --git a/src/components/CTitleBanner/CTitleBanner.vue b/src/components/CTitleBanner/CTitleBanner.vue
index 53be5661..b6223499 100755
--- a/src/components/CTitleBanner/CTitleBanner.vue
+++ b/src/components/CTitleBanner/CTitleBanner.vue
@@ -24,8 +24,8 @@
           <slot></slot>
         </div>
         <div
-v-if="imgpreview" class="text-center cursor-pointer clBorderSteps" style="opacity: 0.5;"
-             @click="myvisible = !myvisible">
+          v-if="imgpreview" class="text-center cursor-pointer clBorderSteps" style="opacity: 0.5;"
+          @click="myvisible = !myvisible">
           <q-img :src="imgpreview" class="img"></q-img>
         </div>
       </div>
diff --git a/src/components/Header/Header.ts b/src/components/Header/Header.ts
index f42dbf2d..a990d7f0 100755
--- a/src/components/Header/Header.ts
+++ b/src/components/Header/Header.ts
@@ -345,9 +345,13 @@ export default defineComponent({
 
     function getappname() {
       let mystr = tools.getsuffisso() + tools.getappname(tools.isMobile())
-      //if (!tools.isMobile()) {
+      if (!tools.isMobile()) {
+        //if (!tools.isMobile()) {
         mystr += ' ' + getAppVersion()
-      //}
+        //}
+      } else {
+        mystr = ''
+      }
 
       return mystr
 
diff --git a/src/css/app.scss b/src/css/app.scss
index 2f374caa..102413e7 100755
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -869,7 +869,29 @@ $heightBtn: 100%;
 
 .combowidth {
   min-width: 150px;
-  @media (max-width: 400px) {
+  @media (max-width: 450px) {
     min-width: 300px;
   }
 }
+
+.myimg-view {
+  border-radius: 5px !important;
+  height: 80px;
+}
+
+.dialog_card{
+  min-width: 100%;
+  width: 100% !important;
+  margin-left: 2px !important;
+  margin-right: 2px !important;
+
+  @media (max-width: 600px) {
+    width: auto;
+    min-width: auto;
+  }
+
+}
+
+.wrap_anywhere {
+  overflow-wrap: anywhere;
+}
diff --git a/src/db/lang/ws_it.js b/src/db/lang/ws_it.js
index 30e6edeb..85224b26 100755
--- a/src/db/lang/ws_it.js
+++ b/src/db/lang/ws_it.js
@@ -23,6 +23,7 @@ const msg_website_it = {
   pages: {
     home: 'Home',
     profile: 'Profilo',
+    profile2: 'ProfiloU',
     test: 'Test',
     projects: 'Progetti',
     report: 'Report Ore',
diff --git a/src/db/static_data.ts b/src/db/static_data.ts
index 9c4b9277..07aeb8ff 100755
--- a/src/db/static_data.ts
+++ b/src/db/static_data.ts
@@ -383,11 +383,22 @@ const baseroutes: IListRoutes[] = [
     path: '/profile',
     materialIcon: 'fas fa-user',
     name: 'pages.profile',
-    component: () => import('@/views/user/profile/profile.vue'),
+    component: () => import('@/views/user/editprofile/editprofile.vue'),
     meta: { requiresAuth: true },
     inmenu: true,
     infooter: true,
   },
+  {
+    active: true,
+    order: 130,
+    path: '/my/:username',
+    materialIcon: 'fas fa-user',
+    name: 'pages.profile2',
+    component: () => import('@/views/user/myprofile/myprofile.vue'),
+    meta: { requiresAuth: true },
+    inmenu: false,
+    infooter: false,
+  },
   {
     active: true,
     order: 120,
diff --git a/src/mixins/mixin-users.ts b/src/mixins/mixin-users.ts
index 1a2508b5..06ffc8b0 100755
--- a/src/mixins/mixin-users.ts
+++ b/src/mixins/mixin-users.ts
@@ -2,6 +2,8 @@ import { IMessage } from '@src/model'
 import { useUserStore } from '@store/UserStore'
 import { useGlobalStore } from '@store/globalStore'
 import { useProducts } from '@store/Products'
+import { serv_constants } from '@store/Modules/serv_constants'
+import { tools } from '@store/Modules/tools'
 
 // You can declare a mixin as the same style as components.
 export default function () {
@@ -70,8 +72,10 @@ export default function () {
 
   function getMyImgforIcon() {
     const userStore = useUserStore()
-    const ris = userStore.getImgByUsername(userStore.my.username)
-    return (ris !== '') ? `img:${ris}` : 'fas fa-user'
+    const mypath = userStore.getImgByUsername(userStore.my.username)
+    let img_small = tools.baseurl(mypath) + '/' + serv_constants.PREFIX_IMG_SMALL + tools.getLastItem(mypath);
+    console.log('img_small', img_small)
+    return (img_small !== '') ? `img:${img_small}` : 'fas fa-user'
   }
 
   function getIconCart() {
diff --git a/src/model/GlobalStore.ts b/src/model/GlobalStore.ts
index 23dd958f..916ad8f2 100755
--- a/src/model/GlobalStore.ts
+++ b/src/model/GlobalStore.ts
@@ -491,6 +491,8 @@ export interface IColGridTable {
   askaction?: string
   foredit?: boolean
   fieldtype?: number
+  tipovisu?: number
+  link?: string
   jointable?: string
   resultjoin?: string[]
   visuonlyEditVal?: boolean
diff --git a/src/rootgen/admin/eventlist/eventlist.vue b/src/rootgen/admin/eventlist/eventlist.vue
index f70fb871..074713f3 100755
--- a/src/rootgen/admin/eventlist/eventlist.vue
+++ b/src/rootgen/admin/eventlist/eventlist.vue
@@ -101,7 +101,7 @@
         </tbody>
       </q-markup-table>
       <q-dialog v-model="shownote">
-        <q-card v-if="eventsel" :style="`min-width: ` + tools.myheight_dialog() + `px;`">
+        <q-card v-if="eventsel" class="dialog_card">
           <q-toolbar class="bg-primary text-white">
             <q-toolbar-title>
               Note: {{ eventsel.title }}
@@ -122,7 +122,7 @@
         </q-card>
       </q-dialog>
       <q-dialog v-model="showpeople">
-        <q-card v-if="eventsel" :style="`min-width: ` + tools.myheight_dialog() + `px;`">
+        <q-card v-if="eventsel" class="dialog_card">
           <q-toolbar class="bg-primary text-white">
             <q-toolbar-title>
               {{ eventsel.title }}
diff --git a/src/rootgen/admin/newsletter/newsletter.ts b/src/rootgen/admin/newsletter/newsletter.ts
index ecf7ef24..8891583e 100755
--- a/src/rootgen/admin/newsletter/newsletter.ts
+++ b/src/rootgen/admin/newsletter/newsletter.ts
@@ -80,7 +80,7 @@ export default defineComponent({
       }
     }
 
-    watch(idparam, (newval, oldval) => {
+    watch(() => idparam, (newval, oldval) => {
       tab.value = idparam.value
     })
 
diff --git a/src/store/Modules/costanti.ts b/src/store/Modules/costanti.ts
index b3610abf..0220838f 100755
--- a/src/store/Modules/costanti.ts
+++ b/src/store/Modules/costanti.ts
@@ -49,6 +49,7 @@ export const costanti = {
     hours: 8000,
     crypted: 9000,
   },
+
   FieldTypeArr: [
     { label: 'Boolean', value: 1 },
     { label: 'Date', value: 2 },
@@ -59,5 +60,10 @@ export const costanti = {
     { label: 'Number', value: 64 },
   ],
 
+  TipoVisu: {
+    TESTO: 1,
+    LINK: 2,
+    BUTTON: 3,
+  },
 
 }
diff --git a/src/store/Modules/fieldsTable.ts b/src/store/Modules/fieldsTable.ts
index 05e0e98d..71dbb09d 100755
--- a/src/store/Modules/fieldsTable.ts
+++ b/src/store/Modules/fieldsTable.ts
@@ -59,6 +59,8 @@ function AddCol(params: IColGridTable) {
     action: (params.action === undefined) ? '' : params.action,
     foredit: (params.foredit === undefined) ? true : params.foredit,
     fieldtype: (params.fieldtype === undefined) ? costanti.FieldType.string : params.fieldtype,
+    tipovisu: (params.tipovisu === undefined) ? costanti.TipoVisu.TESTO : params.tipovisu,
+    link: (params.link === undefined) ? '' : params.link,
     visuonlyEditVal: (params.visuonlyEditVal === undefined) ? false : params.visuonlyEditVal,
     askaction: (params.askaction === undefined) ? '' : params.askaction,
     jointable: (params.jointable === undefined) ? '' : params.jointable,
@@ -389,7 +391,7 @@ 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 }),
+  AddCol({ name: 'username', label_trans: 'reg.username', foredit: false, tipovisu: costanti.TipoVisu.LINK, link: '/my/username' }),
   AddCol({
     name: 'idSkill',
     label_trans: 'skill.name',
@@ -1309,6 +1311,10 @@ export const fieldsTable = {
     AddCol({
       name: 'profile.nationality', field: 'profile', subfield: 'nationality', label_trans: 'reg.nationality',
     }),
+    AddCol({ name: 'profile.dateofbirth', label_trans: 'reg.dateofbirth', fieldtype: costanti.FieldType.onlydate }),
+    AddCol({ name: 'profile.born_city', label_trans: 'reg.born_city', fieldtype: costanti.FieldType.string }),
+    AddCol({ name: 'profile.born_province', label_trans: 'reg.born_province', fieldtype: costanti.FieldType.string }),
+    AddCol({ name: 'profile.born_country', label_trans: 'reg.born_country', fieldtype: costanti.FieldType.string }),
     AddCol({
       name: 'profile.cell', field: 'profile', subfield: 'cell', label_trans: 'reg.cell',
     }),
@@ -1457,6 +1463,7 @@ export const fieldsTable = {
   tableRemotePickup: [
     'countries',
     'phones',
+    'cities',
   ],
 
   tableWithUsername: [
diff --git a/src/store/Modules/serv_constants.ts b/src/store/Modules/serv_constants.ts
index 505a6977..4feda00d 100755
--- a/src/store/Modules/serv_constants.ts
+++ b/src/store/Modules/serv_constants.ts
@@ -36,4 +36,24 @@ export const serv_constants = {
   RIS_UNSUBSCRIBED_STR: 'unsubscribed',
   RIS_UNSUBSCRIBED_NOT_EXIST: -5,
 
+  LIST_END: '10000000',
+  LIST_START: null,
+
+  PREFIX_IMG: 'm_',
+  PREFIX_IMG_SMALL: 'sm_',
+
+  Privacy: {
+    all: 'all',
+    friends: 'friends',
+    mygroup: 'mygroup',
+    onlyme: 'onlyme',
+    inherited: 'inherited'
+  },
+
+  TypeProj: {
+    TYPE_PROJECT: 1,
+    TYPE_SUBDIR: 2,
+  }
+
+
 }
diff --git a/src/store/Modules/tools.ts b/src/store/Modules/tools.ts
index fc85fde4..e7b0fb1a 100644
--- a/src/store/Modules/tools.ts
+++ b/src/store/Modules/tools.ts
@@ -96,7 +96,7 @@ export const tools = {
     'yellow',
   ],
 
-  MAX_CHARACTERS: 60,
+  MAX_CHARACTERS: 200,
   projects: 'projects',
   todos: 'todos',
   EMPTY: 0,
@@ -3338,7 +3338,7 @@ export const tools = {
     return ''
   },
   getsuffisso() {
-    if (this.isTest()) return 'TEST: '
+    if (this.isTest()) return 'T: '
     return ''
   },
 
@@ -4360,7 +4360,16 @@ export const tools = {
       col = 'green-5'
     }
     return col
-  }
+  },
+
+  baseurl(folder: string) {
+    return folder.substring(0, folder.lastIndexOf('/'))
+  },
+
+  getLastItem(thePath: string) {
+    return thePath.substring(thePath.lastIndexOf('/') + 1)
+  },
+
 // getLocale() {
   //   if (navigator.languages && navigator.languages.length > 0) {
   //     return navigator.languages[0]
diff --git a/src/store/UserStore.ts b/src/store/UserStore.ts
index 7e3a8d7d..8c68b9fa 100755
--- a/src/store/UserStore.ts
+++ b/src/store/UserStore.ts
@@ -176,6 +176,16 @@ export const useUserStore = defineStore('UserStore', {
       return ''
     },
 
+    getImgByProfile(userparam: IUserFields): string {
+
+      try{
+        if (userparam.profile && userparam.profile.img) {
+          return 'upload/profile/' + userparam.username + '/' + userparam.profile.img
+        }
+      }catch (e) {}
+      return 'images/noimg.png'
+    },
+
     getRefLink(username: string): string {
       if (username === '')
         username = this.my.username
@@ -805,5 +815,19 @@ export const useUserStore = defineStore('UserStore', {
         return false
       }
     },
+
+    async loadUserProfile(username: string) {
+      const data = {
+        username
+      }
+
+      return Api.SendReq('/users/profile', 'POST', data)
+        .then((res) => {
+          return res.data
+        }).catch((error) => {
+          return {}
+        })
+
+    }
   },
 })
diff --git a/src/views/login/signup/signup.ts b/src/views/login/signup/signup.ts
index ee98cca5..c7666dea 100755
--- a/src/views/login/signup/signup.ts
+++ b/src/views/login/signup/signup.ts
@@ -17,7 +17,7 @@ export default defineComponent({
     const invited = computed(() => $route.params.invited)
 
     // @ts-ignore
-    watch(invited, (newval, oldval) => {
+    watch(() => invited, (newval, oldval) => {
       console.log('$route.params.invited')
       adult.value = !!$route.params.invited
     })
diff --git a/src/views/projects/proj-list/proj-list.vue.off b/src/views/projects/proj-list/proj-list.vue.off
index 79999b90..6121e8b1 100755
--- a/src/views/projects/proj-list/proj-list.vue.off
+++ b/src/views/projects/proj-list/proj-list.vue.off
@@ -3,7 +3,7 @@
     <div class="panel">
 
       <q-dialog v-model="shownewsubproj">
-        <q-card :style="`min-width: `+ tools.myheight_dialog() + `px;`">
+        <q-card class="dialog_card">
           <q-toolbar class="bg-primary text-white">
             <q-toolbar-title>
               Nuovo
diff --git a/src/views/user/profile/profile.scss b/src/views/user/editprofile/editprofile.scss
similarity index 100%
rename from src/views/user/profile/profile.scss
rename to src/views/user/editprofile/editprofile.scss
diff --git a/src/views/user/profile/profile.ts b/src/views/user/editprofile/editprofile.ts
similarity index 99%
rename from src/views/user/profile/profile.ts
rename to src/views/user/editprofile/editprofile.ts
index e92f643f..5497b983 100755
--- a/src/views/user/profile/profile.ts
+++ b/src/views/user/editprofile/editprofile.ts
@@ -14,7 +14,7 @@ import { costanti } from '@costanti'
 
 
 export default defineComponent({
-  name: 'ProfileMy',
+  name: 'EditProfile',
   components: { CProfile, CTitleBanner, CMyFieldDb, CSkill },
   props: {},
   setup() {
diff --git a/src/views/user/profile/profile.vue b/src/views/user/editprofile/editprofile.vue
similarity index 77%
rename from src/views/user/profile/profile.vue
rename to src/views/user/editprofile/editprofile.vue
index 92dd1731..362451ff 100755
--- a/src/views/user/profile/profile.vue
+++ b/src/views/user/editprofile/editprofile.vue
@@ -1,4 +1,4 @@
-<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
+<template>
   <div class="q-gutter-sm q-pa-xs q-pb-md">
 
     <CTitleBanner
@@ -20,21 +20,20 @@
             :type="costanti.FieldType.string">
           </CMyFieldDb>
         </div>
-        <div class="myrow">
-          <CMyFieldDb
-            :title="$t('reg.photo')"
-            table="users"
-            mykey="profile"
-            mysubkey="img"
-            :type="costanti.FieldType.image">
-          </CMyFieldDb>
-        </div>
         <div class="myrow">
           <CMyFieldDb
             :title="$t('reg.username')"
             table="users"
             mykey="username"
             :disable="true"
+            :readonly="true"
+            :type="costanti.FieldType.string">
+          </CMyFieldDb>
+          <CMyFieldDb
+            :title="$t('reg.username_telegram')"
+            table="users"
+            mykey="profile"
+            mysubkey="username_telegram"
             :type="costanti.FieldType.string">
           </CMyFieldDb>
           <CMyFieldDb
@@ -46,53 +45,13 @@
           </CMyFieldDb>
         </div>
 
-        <div class="myrow">
-          <CMyFieldDb
-            :title="$t('reg.nationality')"
-            table="users"
-            tablesel="countries"
-            mykey="profile"
-            :useinput="false"
-            mysubkey="nationality"
-            :pickup="true"
-            :type="costanti.FieldType.nationality">
-          </CMyFieldDb>
-
-          <CMyFieldDb
-            :title="$t('reg.dateofbirth')"
-            table="users"
-            mykey="profile"
-            mysubkey="dateofbirth"
-            :type="costanti.FieldType.date">
-          </CMyFieldDb>
-        </div>
-
-        <div class="myrow">
-
-          <CMyFieldDb
-            :title="$t('reg.intcode_cell')"
-            table="users"
-            mykey="profile"
-            mysubkey="intcode_cell"
-            :type="costanti.FieldType.intcode"
-            tablesel="phones"
-            :pickup="true">
-          </CMyFieldDb>
-          <CMyFieldDb
-            :title="$t('reg.cell')"
-            table="users"
-            mykey="profile"
-            mysubkey="cell"
-            :type="costanti.FieldType.string">
-          </CMyFieldDb>
-        </div>
-
         <br/>
         <div class="myrow justify-center">
           <q-btn
             push
             rounded
-            color="primary"
+            color="white"
+            text-color="blue"
             size="md"
             to="/requestresetpwd"
             :label="$t('reg.modificapassword')">
@@ -102,6 +61,85 @@
 
     </CTitleBanner>
 
+    <CTitleBanner
+      class="q-pa-xs" title="Informazioni su di te" bgcolor="bg-primary" clcolor="text-white"
+      myclass="myshad" :canopen="true">
+
+      <div class="myrow">
+        <CMyFieldDb
+          :title="$t('reg.photo')"
+          table="users"
+          mykey="profile"
+          mysubkey="img"
+          :type="costanti.FieldType.image">
+        </CMyFieldDb>
+      </div>
+
+      <CMyFieldDb
+        title="Biografia"
+        table="users"
+        mykey="profile"
+        mysubkey="biografia"
+        maxlength="200"
+        :showall="true"
+        :type="costanti.FieldType.string">
+      </CMyFieldDb>
+
+      <div class="myrow">
+        <CMyFieldDb
+          :title="$t('reg.nationality')"
+          table="users"
+          tablesel="countries"
+          mykey="profile"
+          :useinput="false"
+          mysubkey="nationality"
+          :pickup="true"
+          :type="costanti.FieldType.nationality">
+        </CMyFieldDb>
+
+        <CMyFieldDb
+          :title="$t('reg.residency_city')"
+          table="users"
+          tablesel="cities"
+          mykey="profile"
+          :useinput="false"
+          mysubkey="born_city"
+          :pickup="true"
+          :type="costanti.FieldType.string">
+        </CMyFieldDb>
+
+        <CMyFieldDb
+          :title="$t('reg.dateofbirth')"
+          table="users"
+          mykey="profile"
+          mysubkey="dateofbirth"
+          :type="costanti.FieldType.date">
+        </CMyFieldDb>
+      </div>
+
+      <div class="myrow">
+
+        <CMyFieldDb
+          :title="$t('reg.intcode_cell')"
+          table="users"
+          mykey="profile"
+          mysubkey="intcode_cell"
+          :type="costanti.FieldType.intcode"
+          tablesel="phones"
+          :pickup="true">
+        </CMyFieldDb>
+        <CMyFieldDb
+          :title="$t('reg.cell')"
+          table="users"
+          mykey="profile"
+          mysubkey="cell"
+          :type="costanti.FieldType.string">
+        </CMyFieldDb>
+      </div>
+
+
+    </CTitleBanner>
+
     <CTitleBanner
       class="q-pa-xs" title="Competenze e Talenti" bgcolor="bg-primary" clcolor="text-white"
       myclass="myshad" :canopen="true">
@@ -113,21 +151,6 @@
 
 
     </CTitleBanner>
-    <CTitleBanner
-      class="q-pa-xs" title="Informazioni su di te" bgcolor="bg-primary" clcolor="text-white"
-      myclass="myshad" :canopen="true">
-
-      <div class="column">
-        <div class="myrow">
-          <CMyFieldDb
-            title="Biografia"
-            table="users"
-            mykey="profile"
-            mysubkey="biografia"
-            :type="costanti.FieldType.string">
-          </CMyFieldDb>
-        </div>
-      </div>
 
       <!--
       <div class="column">
@@ -188,8 +211,6 @@
       </div>
       -->
 
-    </CTitleBanner>
-
     <!--
     <CTitleBanner class="q-pa-xs" :title="$t('pages.payment')" bgcolor="bg-primary" clcolor="text-white"
                    myclass="myshad" :canopen="true">
@@ -272,11 +293,11 @@
   </div>
 </template>
 
-<script lang="ts" src="./profile.ts">
+<script lang="ts" src="./editprofile.ts">
 </script>
 
 <style lang="scss" scoped>
-@import './profile.scss';
+@import './editprofile.scss';
 </style>
 
 
diff --git a/src/views/user/myprofile/myprofile.scss b/src/views/user/myprofile/myprofile.scss
new file mode 100755
index 00000000..e2710649
--- /dev/null
+++ b/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);
+}
diff --git a/src/views/user/myprofile/myprofile.ts b/src/views/user/myprofile/myprofile.ts
new file mode 100755
index 00000000..6963f71a
--- /dev/null
+++ b/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,
+    }
+  }
+})
diff --git a/src/views/user/myprofile/myprofile.vue b/src/views/user/myprofile/myprofile.vue
new file mode 100755
index 00000000..f4df25f0
--- /dev/null
+++ b/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>
+
diff --git a/src/views/user/test/test.vue b/src/views/user/test/test.vue
index 5600c904..2aa21757 100755
--- a/src/views/user/test/test.vue
+++ b/src/views/user/test/test.vue
@@ -1,4 +1,4 @@
-<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
+<template>
   <div class="q-gutter-sm q-pa-xs q-pb-md">