- Add to Friends

- remove from Friend list
- Cancel Ask Friend
.... OK !

_ALL_SITES/popolodelnuovomondo.app/quasar.conf.js

@@ -217,6 +217,7 @@ module.exports = configure((ctx) => ({
       'QCarouselSlide',
       'QPageScroller',
       'QAvatar',
+      'QSkeleton',
       'QImg',
       'QSplitter',
       'QRating',

package.json

@@ -23,25 +23,25 @@
   "dependencies": {
     "axios": "0.21.4",
     "@vue/eslint-config-standard": "5.1.2",
-    "@quasar/extras": "^1.12.2",
+    "@quasar/extras": "^1.12.3",
-    "@quasar/quasar-ui-qcalendar": "^4.0.0-beta.11",
+    "@quasar/quasar-ui-qcalendar": "^4.0.0-beta.12",
     "@vue/compat": "^3.2.26",
     "@vue/compiler-sfc": "^3.2.26",
-    "@vuelidate/core": "^2.0.0-alpha.32",
+    "@vuelidate/core": "^2.0.0-alpha.33",
-    "@vuelidate/validators": "^2.0.0-alpha.25",
+    "@vuelidate/validators": "^2.0.0-alpha.26",
-    "acorn": "^8.6.0",
+    "acorn": "^8.7.0",
-    "autoprefixer": "^10.4.0",
+    "autoprefixer": "^10.4.2",
     "bcryptjs": "^2.4.3",
-    "core-js": "^3.20.0",
+    "core-js": "^3.20.2",
     "crypto": "^1.0.1",
-    "date-fns": "^2.27.0",
+    "date-fns": "^2.28.0",
-    "dotenv": "^10.0.0",
+    "dotenv": "^11.0.0",
     "echarts": "^5.2.2",
-    "eslint-plugin-quasar": "^1.0.0",
+    "eslint-plugin-quasar": "^1.1.0",
     "eslint-plugin-standard": "^5.0.0",
-    "graphql": "^16.1.0",
+    "graphql": "^16.2.0",
     "graphql-tag": "^2.12.6",
-    "gsap": "^3.9.0",
+    "gsap": "^3.9.1",
     "jquery": "^3.6.0",
     "js-cookie": "^3.0.1",
     "localforage": "^1.10.0",
@@ -49,7 +49,7 @@
     "normalize.css": "^8.0.1",
     "npm": "^8.3.0",
     "nprogress": "^0.2.0",
-    "pinia": "^2.0.6",
+    "pinia": "^2.0.9",
     "prerender-spa-plugin": "^3.4.0",
     "quasar": "^2.3.4",
     "quasar-extras": "^2.0.9",
@@ -72,9 +72,9 @@
   },
   "devDependencies": {
     "node-sass": "6.0.1",
-    "webpack": "^5.0.0",
+    "webpack": "^5.66.0",
-    "@quasar/app": "^3.2.5",
+    "@quasar/app": "^3.2.6",
-    "@quasar/quasar-app-extension-qcalendar": "^4.0.0-beta.11",
+    "@quasar/quasar-app-extension-qcalendar": "^4.0.0-beta.12",
     "@types/bcryptjs": "^2.4.2",
     "@types/dotenv": "^8.2.0",
     "@types/googlemaps": "^3.43.3",
@@ -86,24 +86,24 @@
     "@types/vuelidate": "^0.7.15",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
-    "eslint": "^8.4.1",
+    "eslint": "^8.6.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.2.0",
-    "eslint-plugin-vue": "^8.2.0",
+    "eslint-plugin-vue": "^8.3.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "http-proxy-middleware": "^2.0.1",
     "jest": "^27.4.5",
     "json-loader": "^0.5.7",
-    "npm-check-updates": "^12.0.5",
+    "npm-check-updates": "^12.1.0",
     "optimize-css-assets-webpack-plugin": "^6.0.1",
     "postcss": "^8.4.5",
     "postcss-loader": "^6.2.1",
     "sass-loader": "^12.4.0",
     "strip-ansi": "=7.0.1",
-    "ts-jest": "^27.1.1",
+    "ts-jest": "^27.1.2",
     "ts-loader": "^9.2.6",
     "tslint": "^6.1.3",
     "tslint-config-standard": "^9.0.0",

src/App.scss

@@ -206,6 +206,10 @@ $heightBtn: 100%;
   text-shadow: .15rem .15rem .15rem $grayshadow;
 }
 
+.text-shadow-2 {
+  text-shadow: .07rem .07rem .07rem $grayshadow;
+}
+
 .citazione{
   font-size: 0.75rem;
   font-family: "Lucida Calligraphy", serif;

src/common/shared_vuejs.ts

@@ -45,8 +45,11 @@ export const shared_consts = {
 
   FRIENDSCMD: {
     SETTRUST: 121,
+    REQFRIEND: 125,
     SETFRIEND: 132,
     REMOVE_FROM_MYFRIENDS: 144,
+    REFUSE_REQ_FRIEND: 145,
+    CANCEL_REQ_FRIEND: 146,
     BLOCK_USER: 155,
     FIND_PEOPLE: 166,
   },

src/components/CGridTableRec/CGridTableRec.scss

@@ -41,3 +41,7 @@
   padding: 4px 8px !important;
 }
 
+
+.q-table__top{
+  padding-top: 0 !important;
+}

src/components/CGridTableRec/CGridTableRec.ts

@@ -12,14 +12,12 @@ import {
   ISearchList,
   IPagination,
   IParamDialog,
-  IEvents,
+  IMySkill
-  IDataToSet,
+} from 'model'
-  IMySkill, ISkill
+import { lists } from '@store/Modules/lists'
-} from '../../model'
+import { IParamsQuery } from 'model'
-import { lists } from '../../store/Modules/lists'
-import { IParamsQuery } from '../../model/GlobalStore'
-import { CMyUser } from '../CMyUser'
 import { CMyPopupEdit } from '../CMyPopupEdit'
+import { CMyFriends } from '../CMyFriends'
 import { CMyFieldDb } from '../CMyFieldDb'
 import { CMySelect } from '../CMySelect'
 import { CTitleBanner } from '../CTitleBanner'
@@ -28,9 +26,7 @@ import { useUserStore } from '@store/UserStore'
 import { useGlobalStore } from '@store/globalStore'
 import { useQuasar } from 'quasar'
 import { costanti } from '@costanti'
-import { useCalendarStore } from '@store/CalendarStore'
 import translate from '@/globalroutines/util'
-import { toolsext } from '@store/Modules/toolsext'
 
 export default defineComponent({
   name: 'CGridTableRec',
@@ -167,8 +163,13 @@ export default defineComponent({
       required: false,
       default: '',
     },
+    showCol: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
   },
-  components: { CMyPopupEdit, CTitleBanner, CMyFieldDb, CMySelect, CMyUser },
+  components: { CMyPopupEdit, CTitleBanner, CMyFieldDb, CMySelect, CMyFriends },
   setup(props, { emit }) {
     const $q = useQuasar()
     const { t } = useI18n()
@@ -189,7 +190,7 @@ export default defineComponent({
     const mytitle = ref('')
     const mycolumns = ref([])
     const colkey = ref('')
-    const search = ref('')
+    const search = ref('paoloar773')
 
     const tablesel = ref('')
 
@@ -222,6 +223,8 @@ export default defineComponent({
 
     const selected: any = ref([])
 
+    const filter = ref(0)
+
     const mycodeid = toRef(props, 'prop_codeId')
 
     const valoriopt = computed(() => (item: any, addall: boolean) => {
@@ -1232,6 +1235,7 @@ export default defineComponent({
       checkIfShowRec,
       valoriopt,
       labelcombo,
+      filter,
     }
   }
 })

src/components/CGridTableRec/CGridTableRec.vue

@@ -8,7 +8,7 @@
         @click="createNewRecordDialog"></q-btn>
     </div>
 
-    <div :class="$q.screen.lt.sm ? `` : `q-gutter-md q-ma-xs`  + ` row`">
+    <div v-if="butt_modif_new || mytitle" :class="$q.screen.lt.sm ? `` : `q-gutter-md q-ma-xs`  + ` row`">
       <div class="q-table__title" style="min-width: 150px;">{{ mytitle }}</div>
       <q-space></q-space>
       <div v-if="butt_modif_new">
@@ -99,7 +99,7 @@
       <template v-slot:top-left>
 
         <div v-if="searchList"
-          :class="$q.screen.lt.sm ? `` : `row`  + ` text-blue`">
+             :class="$q.screen.lt.sm ? `` : `row`  + ` text-blue`">
           <span v-for="(item, index) in searchList" :key="index">
             <CMySelect
               v-if="item.type === costanti.FieldType.select"
@@ -184,7 +184,7 @@
 
           <q-space></q-space>
           <q-select
-            v-if="mytable && pagination.rowsNumber > 0 && (prop_search || canEdit)"
+            v-if="mytable && pagination.rowsNumber > 0 && (prop_search || canEdit) && showCol"
             v-model="colVisib"
             rounded
             outlined
@@ -251,10 +251,15 @@
 
 
       <template v-slot:item="props">
-        <div v-if="showType === costanti.SHOW_USERINFO">
+        <div v-if="showType === costanti.SHOW_USERINFO" class="fill-all-width">
-          <CMyUser
+          <div>
-            :mycontact="props.row">
+            <CMyFriends
-          </CMyUser>
+              v-model="filter"
+              :finder="false"
+              :mycontact="props.row"
+              :visu="costanti.FIND_PEOPLE"
+            />
+          </div>
 
         </div>
         <div
@@ -316,16 +321,6 @@
           </q-card>
         </div>
       </template>
-
-      <!--
-                      <q-btn
-                              flat round dense
-                              :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
-                              @click="props.toggleFullscreen"
-                              class="q-ml-md">
-                      </q-btn>
-      -->
-      <!---->
     </q-table>
 
     <div v-if="rowclicksel">

src/components/CMyFriends/CMyFriends.ts

@@ -0,0 +1,365 @@
+import { CMyUser } from '@/components/CMyUser'
+import { computed, defineComponent, onMounted, PropType, ref, toRef } from 'vue'
+import { useUserStore } from '@store/UserStore'
+import { useI18n } from '@/boot/i18n'
+import { useQuasar } from 'quasar'
+import { costanti } from '@costanti'
+import { ISearchList, IUserFields } from 'model'
+import { shared_consts } from '@/common/shared_vuejs'
+import { tools } from '@store/Modules/tools'
+
+
+export default defineComponent({
+  name: 'CMyFriends',
+  components: { CMyUser },
+  emits: ['update:modelValue'],
+  props: {
+    modelValue: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    finder: {
+      type: Boolean,
+      required: true,
+    },
+    mycontact: {
+      type: Object as PropType<IUserFields | null>,
+      required: false,
+      default: null,
+    },
+    myusername: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    visu: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
+  setup(props, { emit }) {
+    const userStore = useUserStore()
+    const $q = useQuasar()
+    const { t } = useI18n()
+
+    const username = ref('')
+    const listTrusted = ref(<IUserFields[]>[])
+
+    const filtroutente = ref(<any[]>[])
+
+    const listfriendsfiltered = computed(() => {
+      let arr: any[] = []
+      try {
+        if (props.modelValue === costanti.FRIENDS) {
+          arr = userStore.my.profile.friends
+        } else if (props.modelValue === costanti.REQ_FRIENDS) {
+          arr = userStore.my.profile.req_friends
+        } else if (props.modelValue === costanti.ASK_SENT_FRIENDS) {
+          arr = userStore.my.profile.asked_friends
+        } else if (props.modelValue === costanti.ASK_TRUST) {
+          arr = listTrusted.value.filter((user: IUserFields) => user.verified_by_aportador === undefined)
+        } else if (props.modelValue === costanti.TRUSTED) {
+          arr = listTrusted.value.filter((user: IUserFields) => user.verified_by_aportador)
+        } else if (props.modelValue === costanti.REJECTED) {
+          arr = listTrusted.value.filter((user: IUserFields) => user.verified_by_aportador === false)
+        }
+      } catch (e) {
+        arr = []
+      }
+
+      return arr
+    })
+
+    const myoptions = computed(() => {
+      const mybutt = []
+      mybutt.push({ label: t('mypages.find_people'), value: costanti.FIND_PEOPLE })
+
+      if (numFriends.value > 0 || props.modelValue === costanti.FRIENDS)
+        mybutt.push({ label: t('mypages.friends') + ' (' + numFriends.value + ')', value: costanti.FRIENDS })
+
+      if (numReqFriends.value > 0 || props.modelValue === costanti.REQ_FRIENDS)
+        mybutt.push({
+          label: t('mypages.request_friends') + ' (' + numReqFriends.value + ')',
+          value: costanti.REQ_FRIENDS
+        })
+      if (numAskSentFriends.value > 0 || props.modelValue === costanti.ASK_SENT_FRIENDS)
+        mybutt.push({
+          label: t('mypages.request_sent_friends') + ' (' + numAskSentFriends.value + ')',
+          value: costanti.ASK_SENT_FRIENDS
+        })
+      if (numAskTrust.value > 0 || props.modelValue === costanti.ASK_TRUST)
+        mybutt.push({ label: t('mypages.request_trust') + ' (' + numAskTrust.value + ')', value: costanti.ASK_TRUST })
+      if (numTrusted.value > 0 || props.modelValue === costanti.TRUSTED)
+        mybutt.push({ label: t('mypages.trusted') + ' (' + numTrusted.value + ')', value: costanti.TRUSTED })
+      if (numRejected.value > 0 || props.modelValue === costanti.REJECTED)
+        mybutt.push({ label: t('mypages.rejected') + ' (' + numRejected.value + ')', value: costanti.REJECTED })
+
+      return mybutt
+    })
+
+    const numFriends = computed(() => {
+      const arr = userStore.my.profile.friends
+      return (arr) ? arr.length : 0
+    })
+
+    const numReqFriends = computed(() => {
+      const arr = userStore.my.profile.req_friends
+      return (arr) ? arr.length : 0
+    })
+
+    const numAskSentFriends = computed(() => {
+      const arr = userStore.my.profile.asked_friends
+      return (arr) ? arr.length : 0
+    })
+
+    const numAskTrust = computed(() => {
+      if (!listTrusted.value)
+        return 0
+      const arr = listTrusted.value.filter((user: IUserFields) => user.verified_by_aportador === undefined)
+      return (arr) ? arr.length : 0
+    })
+
+    const numTrusted = computed(() => {
+      if (!listTrusted.value)
+        return 0
+      const arr = listTrusted.value.filter((user: IUserFields) => user.verified_by_aportador)
+      return (arr) ? arr.length : 0
+    })
+
+    const numRejected = computed(() => {
+      if (!listTrusted.value)
+        return 0
+      const arr = listTrusted.value.filter((user: IUserFields) => user.verified_by_aportador === false)
+      return (arr) ? arr.length : 0
+    })
+
+    function loadFriends() {
+      // Carica il profilo di quest'utente
+      if (username.value) {
+        userStore.loadFriends(username.value).then((ris) => {
+          console.log('ris', ris)
+          if (ris) {
+            userStore.my.profile.friends = ris.listFriends ? ris.listFriends : []
+            userStore.my.profile.req_friends = ris.listRequestFriends ? ris.listRequestFriends : []
+            userStore.my.profile.asked_friends = ris.listSentRequestFriends ? ris.listSentRequestFriends : []
+            listTrusted.value = ris.listTrusted ? ris.listTrusted : []
+            filtroutente.value = [{ userId: userStore.my._id }]
+          }
+        })
+
+      }
+    }
+
+    function setRequestTrust(usernameDest: string, value: any) {
+      let msg = ''
+      if (value) {
+        msg = t('db.domanda_trusted', { username: usernameDest })
+      } else {
+        msg = t('db.domanda_rejectedtrust', { username: usernameDest })
+      }
+
+      $q.dialog({
+        message: msg,
+        ok: {
+          label: t('dialog.yes'),
+          push: true
+        },
+        cancel: {
+          label: t('dialog.cancel')
+        },
+        title: t('db.domanda')
+      }).onOk(() => {
+
+        userStore.setFriendsCmd($q, t, username.value, usernameDest, shared_consts.FRIENDSCMD.SETTRUST, value).then((res) => {
+          if (res) {
+            const myuser: IUserFields = listTrusted.value.find((rec: IUserFields) => rec.username === usernameDest)!
+            if (myuser) {
+              myuser.verified_by_aportador = value
+              if (value) {
+                // add to my friends
+                userStore.my.profile.friends = [...userStore.my.profile.friends, res]
+              } else {
+                // REMOVE to Trusted
+                listTrusted.value = listTrusted.value.filter((rec: IUserFields) => rec.username !== usernameDest)
+              }
+            }
+            tools.showPositiveNotif($q, t('db.trusted'))
+
+          } else {
+            tools.showNegativeNotif($q, t('db.recfailed'))
+          }
+        })
+      })
+    }
+
+    function setRequestFriendship(usernameDest: string, value: boolean) {
+      let msg = ''
+      if (value) {
+        msg = t('db.domanda_ask_friend', { username: usernameDest })
+      } else {
+        msg = t('db.domanda_revoke_friend', { username: usernameDest })
+      }
+
+      $q.dialog({
+        message: msg,
+        ok: {
+          label: t('dialog.yes'),
+          push: true
+        },
+        cancel: {
+          label: t('dialog.cancel')
+        },
+        title: t('db.domanda')
+      }).onOk(() => {
+
+        userStore.setFriendsCmd($q, t, username.value, usernameDest, shared_consts.FRIENDSCMD.REQFRIEND, value)
+          .then((res: any) => {
+            if (res) {
+              if (value) {
+                // ADD to req Friends
+                userStore.my.profile.asked_friends.push(res)
+                tools.showPositiveNotif($q, t('db.askedtofriend', { username: usernameDest }))
+              } else {
+                // REMOVE to req Friends
+                userStore.my.profile.asked_friends = userStore.my.profile.asked_friends.filter((rec: IUserFields) => rec.username !== usernameDest)
+                tools.showPositiveNotif($q, t('db.revoketofriend', { username: usernameDest }))
+              }
+
+            } else {
+              tools.showNegativeNotif($q, t('db.recfailed'))
+            }
+          })
+      })
+    }
+
+    function addToMyFriends(usernameDest: string) {
+      $q.dialog({
+        message: t('db.domanda_addtofriend', { username: usernameDest }),
+        ok: { label: t('dialog.yes'), push: true },
+        cancel: { label: t('dialog.cancel') },
+        title: t('db.domanda')
+      }).onOk(() => {
+
+        userStore.setFriendsCmd($q, t, username.value, usernameDest, shared_consts.FRIENDSCMD.SETFRIEND, null)
+          .then((res: any) => {
+            if (res) {
+              console.log('res = ', res)
+              userStore.my.profile.friends = [...userStore.my.profile.friends, res]
+              userStore.my.profile.req_friends = userStore.my.profile.req_friends.filter((rec: any) => rec.username !== usernameDest)
+              tools.showPositiveNotif($q, t('db.addedfriend'))
+            }
+          })
+      })
+    }
+
+    function removeFromMyFriends(usernameDest: string) {
+      $q.dialog({
+        message: t('db.domanda_removefriend', { username: usernameDest }),
+        ok: { label: t('dialog.yes'), push: true },
+        cancel: { label: t('dialog.cancel') },
+        title: t('db.domanda')
+      }).onOk(() => {
+
+        userStore.setFriendsCmd($q, t, username.value, usernameDest, shared_consts.FRIENDSCMD.REMOVE_FROM_MYFRIENDS, null).then((res) => {
+          if (res) {
+            userStore.my.profile.friends = userStore.my.profile.friends.filter((rec: IUserFields) => rec.username !== usernameDest)
+            tools.showPositiveNotif($q, t('db.removedfriend'))
+          }
+        })
+      })
+    }
+
+    function refuseReqFriends(usernameDest: string) {
+      $q.dialog({
+        message: t('db.domanda_removefriend', { username: usernameDest }),
+        ok: { label: t('dialog.yes'), push: true },
+        cancel: { label: t('dialog.cancel') },
+        title: t('db.domanda')
+      }).onOk(() => {
+
+        userStore.setFriendsCmd($q, t, username.value, usernameDest, shared_consts.FRIENDSCMD.REMOVE_FROM_MYFRIENDS, null).then((res) => {
+          if (res) {
+            userStore.my.profile.req_friends = userStore.my.profile.req_friends.filter((user: any) => user !== usernameDest)
+            tools.showPositiveNotif($q, t('db.removedfriend'))
+          }
+        })
+      })
+    }
+
+    function cancelReqFriends(usernameDest: string) {
+      $q.dialog({
+        message: t('db.domanda_cancel_req_friend', { username: usernameDest }),
+        ok: { label: t('dialog.yes'), push: true },
+        cancel: { label: t('dialog.cancel') },
+        title: t('db.domanda')
+      }).onOk(() => {
+
+        userStore.setFriendsCmd($q, t, username.value, usernameDest, shared_consts.FRIENDSCMD.CANCEL_REQ_FRIEND, null).then((res) => {
+          if (res) {
+            userStore.my.profile.asked_friends = userStore.my.profile.asked_friends.filter((rec: IUserFields) => rec.username !== usernameDest)
+            tools.showPositiveNotif($q, t('db.cancel_req_friend'))
+          }
+        })
+      })
+    }
+
+    function blockUser(usernameDest: string) {
+      $q.dialog({
+        message: t('db.domanda_blockuser', { username: usernameDest }),
+        ok: { label: t('dialog.yes'), push: true },
+        cancel: { label: t('dialog.cancel') },
+        title: t('db.domanda')
+      }).onOk(() => {
+        userStore.setFriendsCmd($q, t, username.value, usernameDest, shared_consts.FRIENDSCMD.BLOCK_USER, null).then((res) => {
+          if (res) {
+            userStore.my.profile.friends = userStore.my.profile.friends.filter((rec: IUserFields) => rec.username !== usernameDest)
+            tools.showPositiveNotif($q, t('db.blockedfriend'))
+          }
+        })
+      })
+    }
+
+    function setCmd(cmd: number, usernameDest: string, value: any = '') {
+      if (cmd === shared_consts.FRIENDSCMD.SETTRUST) {
+        setRequestTrust(usernameDest, value)
+      } else if (cmd === shared_consts.FRIENDSCMD.REMOVE_FROM_MYFRIENDS) {
+        removeFromMyFriends(usernameDest)
+      } else if (cmd === shared_consts.FRIENDSCMD.BLOCK_USER) {
+        blockUser(usernameDest)
+      } else if (cmd === shared_consts.FRIENDSCMD.SETFRIEND) {
+        addToMyFriends(usernameDest)
+      } else if (cmd === shared_consts.FRIENDSCMD.REQFRIEND) {
+        setRequestFriendship(usernameDest, value)
+      } else if (cmd === shared_consts.FRIENDSCMD.REFUSE_REQ_FRIEND) {
+        refuseReqFriends(usernameDest)
+      } else if (cmd === shared_consts.FRIENDSCMD.CANCEL_REQ_FRIEND) {
+        cancelReqFriends(usernameDest)
+      }
+    }
+
+    function mounted() {
+      username.value = userStore.my.username
+      loadFriends()
+
+    }
+
+    function updateValue(val: number) {
+      emit('update:modelValue', val)
+    }
+
+    onMounted(mounted)
+
+    return {
+      tools,
+      costanti,
+      shared_consts,
+      filtroutente,
+      listfriendsfiltered,
+      setCmd,
+      updateValue,
+      myoptions,
+    }
+  }
+})

src/components/CMyFriends/CMyFriends.vue

@@ -0,0 +1,53 @@
+<template>
+  <div v-if="finder" class="q-gutter-sm q-pa-sm q-pb-sm">
+    <q-btn-toggle
+      :model-value="modelValue"
+      @update:model-value="updateValue"
+      class="my-custom-toggle"
+      no-caps
+      rounded
+      unelevated
+      push
+      toggle-color="primary"
+      color="white"
+      text-color="primary"
+      :options="myoptions"
+    />
+  </div>
+  <div v-if="finder" class="">
+
+    <div v-if="modelValue === costanti.FIND_PEOPLE">
+      <slot></slot>
+    </div>
+    <div v-else>
+      <q-list>
+        <span v-for="(contact, index) in listfriendsfiltered" :key="index" class="q-my-sm" clickable>
+          <CMyUser
+            :mycontact="contact"
+            @setCmd="setCmd"
+            :visu="modelValue">
+          </CMyUser>
+        </span>
+      </q-list>
+    </div>
+  </div>
+  <div v-else>
+    <q-list class="width-container">
+      <span class="q-my-sm" clickable>
+      <CMyUser
+        :mycontact="mycontact"
+        @setCmd="setCmd"
+        :visu="visu">
+      </CMyUser>
+      </span>
+    </q-list>
+  </div>
+</template>
+
+<script lang="ts" src="./CMyFriends.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMyFriends';
+</style>
+

src/components/CMyFriends/index.ts

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

src/components/CMyUser/CMyUser.ts

@@ -81,6 +81,7 @@ export default defineComponent({
       naviga,
       setCmd,
       shared_consts,
+      userStore,
     }
   },
 })

src/components/CMyUser/CMyUser.vue

@@ -32,6 +32,39 @@
             </q-btn>
           </q-item-label>
         </q-item-section>
+        <q-item-section side v-if="visu === costanti.REQ_FRIENDS">
+          <q-item-label>
+            <q-btn rounded icon="fas fa-ellipsis-h">
+              <q-menu>
+                <q-list v-if="true" style="min-width: 150px">
+                  <q-item clickable v-close-popup @click="setCmd(shared_consts.FRIENDSCMD.SETFRIEND, contact.username)">
+                    <q-item-section>{{ $t('friends.accept_friend') }}</q-item-section>
+                  </q-item>
+                </q-list>
+                <q-list style="min-width: 150px">
+                  <q-item clickable icon="fas fa-user-minus" v-close-popup
+                          @click="setCmd(shared_consts.FRIENDSCMD.REQFRIEND, contact.username, false)">
+                    <q-item-section>{{ $t('friends.reject_ask_friend') }}</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-item-label>
+        </q-item-section>
+        <q-item-section side v-if="visu === costanti.ASK_SENT_FRIENDS">
+          <q-item-label>
+            <q-btn rounded icon="fas fa-ellipsis-h">
+              <q-menu>
+                <q-list style="min-width: 150px">
+                  <q-item clickable icon="fas fa-user-minus" v-close-popup
+                          @click="setCmd(shared_consts.FRIENDSCMD.CANCEL_REQ_FRIEND, contact.username)">
+                    <q-item-section>{{ $t('friends.cancel_ask_friend') }}</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-item-label>
+        </q-item-section>
         <q-item-section side v-if="visu === costanti.ASK_TRUST">
           <q-item-label>
             <q-btn color="positive" :label="$t('friends.accept_trust')" @click="setCmd(shared_consts.FRIENDSCMD.SETTRUST, contact.username, true)"/>
@@ -44,21 +77,44 @@
           <q-item-label>
             <q-btn rounded icon="fas fa-ellipsis-h">
               <q-menu>
-                <q-list v-if="true" style="min-width: 200px">
+                <q-list v-if="!userStore.IsMyFriendByUsername(contact.username)" style="min-width: 200px">
-                  <q-item clickable v-close-popup @click="setCmd(shared_consts.FRIENDSCMD.SETFRIEND, contact.username)">
+                  <q-item clickable v-close-popup @click="setCmd(shared_consts.FRIENDSCMD.REQFRIEND, contact.username, true)">
-                    <q-item-section>{{ $t('friends.accept_friend') }}</q-item-section>
+                    <q-item-section>{{ $t('friends.ask_friend') }}</q-item-section>
                   </q-item>
                 </q-list>
                 <q-list style="min-width: 200px">
                   <q-item clickable v-close-popup @click="setCmd(shared_consts.FRIENDSCMD.SETTRUST, contact.username, false)">
-                    <q-item-section>{{ $t('friends.reject_friend') }}</q-item-section>
+                    <q-item-section>{{ $t('friends.reject_trust') }}</q-item-section>
                   </q-item>
                 </q-list>
               </q-menu>
             </q-btn>
           </q-item-label>
         </q-item-section>
-        <q-item-section side v-if="visu === costanti.REEJECTED">
+        <q-item-section side v-if="visu === costanti.FIND_PEOPLE">
+          <q-item-label>
+            <q-btn v-if="contact.username !== userStore.my.username" rounded :icon="userStore.IsMyFriendByUsername(contact.username) ? `fas fa-ellipsis-h` : `fas fa-user`">
+              <q-menu>
+                <q-list v-if="(!userStore.IsMyFriendByUsername(contact.username) && !userStore.IsAskedFriendByUsername(contact.username))" style="min-width: 200px">
+                  <q-item clickable v-close-popup @click="setCmd(shared_consts.FRIENDSCMD.REQFRIEND, contact.username, true)">
+                    <q-item-section>{{ $t('friends.ask_friend') }}</q-item-section>
+                  </q-item>
+                </q-list>
+                <q-list v-else-if="(!userStore.IsMyFriendByUsername(contact.username) && userStore.IsAskedFriendByUsername(contact.username))" style="min-width: 200px">
+                  <q-item clickable v-close-popup @click="setCmd(shared_consts.FRIENDSCMD.REQFRIEND, contact.username, false)">
+                    <q-item-section>{{ $t('friends.cancel_ask_friend') }}</q-item-section>
+                  </q-item>
+                </q-list>
+                <q-list v-else-if="userStore.IsMyFriendByUsername(contact.username)" style="min-width: 200px">
+                  <q-item clickable v-close-popup @click="setCmd(shared_consts.FRIENDSCMD.REMOVE_FROM_MYFRIENDS, contact.username)">
+                    <q-item-section>{{ $t('friends.remove_from_myfriends') }}</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-item-label>
+        </q-item-section>
+        <q-item-section side v-if="visu === costanti.REJECTED">
           <q-item-label>
             <q-btn rounded icon="fas fa-ellipsis-h">
               <q-menu>

src/components/CSkill/CSkill.ts

@@ -112,24 +112,12 @@ export default defineComponent({
       }
     }
 
-    function getFilterCustom() {
-      /*if (props.username) {
-        return [
-          { username: props.username }
-        ]
-      } else {
-        return props.filtercustom
-      }*/
-
-    }
-
     return {
       tools,
       costanti,
       colmySkills,
       getdefaultnewrec,
       extraparams,
-      getFilterCustom,
     }
   },
 })

src/components/index.ts

@@ -36,4 +36,5 @@ export * from './CFacebookFrame'
 export * from './CVerifyEmail'
 export * from './CMyUser'
 export * from './CVerifyTelegram'
+export * from './CMyFriends'
 // export * from './CPreloadImages'

src/css/app.scss

@@ -902,3 +902,7 @@ $heightBtn: 100%;
   box-shadow: 0 0 45px rgba(246, 246, 246, 0.2);
   margin: 1px;
 }
+
+.fill-all-width {
+  width: -webkit-fill-available;
+}

src/model/UserStore.ts

@@ -44,6 +44,11 @@ export interface IUserProfile {
   socioresidente?: boolean
   consiglio?: boolean
   myshares: IShareWithUs[]
+  friends: any[]
+  req_friends: string[]
+
+  // in memory
+  asked_friends: any[]
 }
 
 export interface IPaymentType {
@@ -51,6 +56,7 @@ export interface IPaymentType {
   label: string
 }
 
+
 export interface IUserFields {
   _id: string
   ind_order?: number

src/statics/lang/es.js

@@ -627,7 +627,25 @@ const msg_es = {
     },
     privacy_policy: 'Política de privacidad',
     cookies: 'Utilizamos cookies para un mejor rendimiento web.',
-  },
+    mypages: {
+      find_people: 'Busca Personas',
+      friends: 'Amigos',
+      request_friends: 'Rich. Amicizia',
+      request_sent_friends: 'Rich. Inviate',
+      request_trust: 'Rich. Fiducia',
+      trusted: 'Fiducia Accettata',
+      rejected: 'Rifiutati',
+    },
+    friends: {
+      accept_trust: 'Accetta Fiducia',
+      accept_friend: 'Accetta Amicizia',
+      reject_trust: 'Rifiuta Fiducia',
+      remove_from_myfriends: 'Rimuovi dagli Amici',
+      block_user: 'Blocca Utente',
+      ask_friend: 'Chiedi l\'Amicizia',
+      cancel_ask_friend: 'Annulla la richiesta di Amicizia',
+      reject_ask_friend: 'Rifiuta la richiesta di Amicizia',
+    }  },
 };
 
 export default msg_es;

src/statics/lang/it.js

@@ -178,17 +178,23 @@ const msg_it = {
       duplicatedrecord: 'Vuoi Duplicare il record',
       recdupfailed: 'Errore durante la duplicazione del Record',
       friendsadded: 'Aggiunto alla lista di Amici',
-      blockedfriend: 'Utente Bloccato',
+      domanda_removefriend: 'Rimuovi dagli Amici {username}?',
       removedfriend: 'Rimosso dalla lista di Amici',
+      domanda_addtofriend: 'Aggiungere agli amici {username}?',
       addedfriend: 'Aggiunto alla lista di Amici',
       domanda_trusted: 'Accettare la Fiducia a {username}?',
-      domanda_rejectedtrust: 'Rifiutare la Fiducia a {username}?',
-      domanda_blockuser: 'Bloccare {username}?',
-      domanda: 'Domanda',
       trusted: 'Accettato la Fiducia',
+      domanda_ask_friend: 'Chiedere l\'Amicizia a {username}?',
+      askedtofriend: 'Chiesto l\'Amicizia a {username}',
+      domanda_revoke_friend: 'Revocare la richiesta di Amicizia a {username}?',
+      revoketofriend: 'Revocato la richiesta di Amicizia a {username}',
+      domanda_cancel_req_friend: 'Annullare la richiesta di Amicizia a {username}?',
+      cancel_req_friend: 'Annullata la richiesta di Amicizia a {username}',
+      domanda_rejectedtrust: 'Rifiutare la Fiducia a {username}?',
       rejected: 'Rifiutato la Fiducia',
-      domanda_addtofriend: 'Aggiungere agli amici {username}?',
+      domanda_blockuser: 'Bloccare {username}?',
-      domanda_removefriend: 'Rimuovi dagli Amici {username}?',
+      blockedfriend: 'Utente Bloccato',
+      domanda: 'Domanda',
     },
     components: {
       authentication: {
@@ -828,17 +834,21 @@ const msg_it = {
     mypages: {
       find_people: 'Cerca Persone',
       friends: 'Amici',
-      request_trust: 'Richieste',
+      request_friends: 'Rich. Amicizia',
-      trusted: 'Accettati',
+      request_sent_friends: 'Rich. Inviate',
+      request_trust: 'Rich. Fiducia',
+      trusted: 'Fiducia Accettata',
       rejected: 'Rifiutati',
     },
     friends: {
       accept_trust: 'Accetta Fiducia',
       accept_friend: 'Accetta Amicizia',
       reject_trust: 'Rifiuta Fiducia',
-      reject_friend: 'Rifiuta Fiducia',
       remove_from_myfriends: 'Rimuovi dagli Amici',
       block_user: 'Blocca Utente',
+      ask_friend: 'Chiedi l\'Amicizia',
+      cancel_ask_friend: 'Annulla la richiesta di Amicizia',
+      reject_ask_friend: 'Rifiuta la richiesta di Amicizia',
     }
   },
 

src/store/Modules/costanti.ts

@@ -15,7 +15,9 @@ export const costanti = {
   FRIENDS: 1,
   ASK_TRUST: 2,
   TRUSTED: 3,
-  REEJECTED: 4,
+  REJECTED: 4,
+  REQ_FRIENDS: 5,
+  ASK_SENT_FRIENDS: 6,
   FIND_PEOPLE: 10,
 
   FILTER_TUTTI: -100,

src/store/UserStore.ts

@@ -46,6 +46,9 @@ export const DefaultUser: IUserFields = {
     socio: false,
     socioresidente: false,
     myshares: [],
+    friends: [],
+    req_friends: [],
+    asked_friends: [],
   },
   cart: {
     userId: '',
@@ -81,10 +84,13 @@ export const DefaultProfile: IUserProfile = {
   saw_and_accepted: false,
   socio: false,
   socioresidente: false,
-  myshares: [],
   paymenttypes: [],
   qualified: false,
   qualified_2invitati: false,
+  myshares: [],
+  friends: [],
+  req_friends: [],
+  asked_friends: [],
 }
 
 export const useUserStore = defineStore('UserStore', {
@@ -129,6 +135,7 @@ export const useUserStore = defineStore('UserStore', {
       return true
     },
 
+
     IsMyGroup: (mystate: IUserState) => (userIdOwner: string): boolean => {
       // ++TODO Check if userIdOwner is on my groups
       // userIdOwner is on my groups ?
@@ -155,6 +162,27 @@ export const useUserStore = defineStore('UserStore', {
   },
 
   actions: {
+    IsMyFriendByUsername(username: string): boolean {
+      if (this.my.profile.friends)
+        return this.my.profile.friends.findIndex((rec) => rec.username === username) >= 0
+      else
+        return false
+    },
+
+    IsAskedFriendByUsername(username: string): boolean {
+      if (this.my.profile.asked_friends)
+        return this.my.profile.asked_friends.findIndex((rec) => rec.username === username) >= 0
+      else
+        return false
+    },
+
+    IsReqFriendByUsername(username: string): boolean {
+      if (this.my.profile.req_friends)
+        return this.my.profile.req_friends.includes(username)
+      else
+        return false
+    },
+
     getUserByUsername(username: string): IUserFields | null {
       // Check if is this User!
       if (this.my.username === username) return this.my
@@ -172,18 +200,19 @@ export const useUserStore = defineStore('UserStore', {
       const myrec = this.getUserByUsername(username)
       // console.log('myrec', myrec)
       if (myrec && myrec.profile && !!myrec.profile.img && myrec.profile.img !== '' && myrec.profile.img !== 'undefined') {
-        return costanti.DIR_UPLOAD+'profile/' + this.my.username + '/' + myrec.profile.img
+        return costanti.DIR_UPLOAD + 'profile/' + this.my.username + '/' + myrec.profile.img
       }
       return ''
     },
 
     getImgByProfile(userparam: IUserFields): string {
 
-      try{
+      try {
         if (userparam.profile && userparam.profile.img) {
           return costanti.DIR_UPLOAD + 'profile/' + userparam.username + '/' + userparam.profile.img
         }
-      }catch (e) {}
+      } catch (e) {
+      }
       return 'images/noimg.png'
     },
 
@@ -420,6 +449,9 @@ export const useUserStore = defineStore('UserStore', {
         this.my = { ...data }
         if (!this.my.profile) {
           this.my.profile = DefaultProfile
+
+          // Memory
+          this.my.profile.asked_friends = []
         }
 
         this.isAdmin = tools.isBitActive(this.my.perm, shared_consts.Permissions.Admin.value)
@@ -799,7 +831,7 @@ export const useUserStore = defineStore('UserStore', {
               verified_by_aportador,
               made_gift,
               perm,
-              profile: { img, teleg_id, myshares: [] },
+              profile: { img, teleg_id, myshares: [], friends: [], req_friends: [], asked_friends: [] },
             })
 
             isLogged = true
@@ -842,7 +874,7 @@ export const useUserStore = defineStore('UserStore', {
     },
 
     async setFriendsCmd($q: any, t: any, usernameOrig: string, usernameDest: string, cmd: number, value: any) {
-      return Api.SendReq('/users/friends/cmd', 'POST', {usernameOrig, usernameDest, cmd, value})
+      return Api.SendReq('/users/friends/cmd', 'POST', { usernameOrig, usernameDest, cmd, value })
         .then((res) => {
           return res.data
         }).catch((error) => {

src/views/user/myfriends/myfriends.ts

@@ -1,204 +1,32 @@
-import { CMyFieldDb } from '@/components/CMyFieldDb'
+import { CMyFriends } from '@/components/CMyFriends'
-import { CTitleBanner } from '@/components/CTitleBanner'
-import { CProfile } from '@/components/CProfile'
-import { CSkill } from '@/components/CSkill'
-import { CDateTime } from '@/components/CDateTime'
 import { CGridTableRec } from '@/components/CGridTableRec'
-import { CMyUser } from '@/components/CMyUser'
 import { tools } from '@store/Modules/tools'
-import { computed, defineComponent, onMounted, ref } from 'vue'
+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 { useQuasar } from 'quasar'
-import { costanti } from '@costanti'
-import { ISearchList, IUserFields } from 'model'
-import { shared_consts } from '@/common/shared_vuejs'
 import { colmyUserPeople } from '@store/Modules/fieldsTable'
-
+import { ISearchList } from 'model'
+import { costanti } from '@costanti'
+import { shared_consts } from '@/common/shared_vuejs'
 
 export default defineComponent({
-  name: 'myuser',
+  name: 'myfriends',
-  components: { CProfile, CTitleBanner, CMyFieldDb, CSkill, CDateTime, CGridTableRec, CMyUser},
+  components: { CMyFriends, CGridTableRec },
   props: {},
   setup() {
     const userStore = useUserStore()
-    const $router = useRouter()
     const $route = useRoute()
-    const $q = useQuasar()
     const { t } = useI18n()
 
-    const username = ref('')
-    const filter = ref(costanti.FIND_PEOPLE)
-    const listFriends = ref(<IUserFields[]>[])
-    const listTrusted = ref(<IUserFields[]>[])
-
-    const filtroutente = ref(<any[]>[])
-
     const arrfilterand: any = ref([])
     const filtercustom: any = ref([])
     const searchList = ref(<ISearchList[]>[])
 
-    const listfriendsfiltered = computed(() => {
+    const filter = ref(costanti.FIND_PEOPLE)
-      let arr: any[] = []
-      if (filter.value === costanti.FRIENDS) {
-        arr = listFriends.value
-      } else if (filter.value === costanti.ASK_TRUST) {
-        arr = listTrusted.value.filter((user: IUserFields) => user.verified_by_aportador === undefined)
-      } else if (filter.value === costanti.TRUSTED) {
-        arr = listTrusted.value.filter((user: IUserFields) => user.verified_by_aportador)
-      } else if (filter.value === costanti.REEJECTED) {
-        arr = listTrusted.value.filter((user: IUserFields) => user.verified_by_aportador === false)
-      }
-
-      return arr
-    })
-
-    const numFriends = computed(() => {
-      const arr = listFriends.value
-      return (arr) ? arr.length : 0
-    })
-
-    const numAskTrust = computed(() => {
-      const arr = listTrusted.value.filter((user: IUserFields) => user.verified_by_aportador === undefined)
-      return (arr) ? arr.length : 0
-    })
-
-    const numTrusted = computed(() => {
-      const arr = listTrusted.value.filter((user: IUserFields) => user.verified_by_aportador)
-      return (arr) ? arr.length : 0
-    })
-
-    const numRejected = computed(() => {
-      const arr = listTrusted.value.filter((user: IUserFields) => user.verified_by_aportador === false)
-      return (arr) ? arr.length : 0
-    })
-
-    function loadFriends() {
-      // Carica il profilo di quest'utente
-      if (username.value) {
-        userStore.loadFriends(username.value).then((ris) => {
-          console.log('ris', ris)
-          if (ris) {
-            listFriends.value = ris.listFriends
-            listTrusted.value = ris.listTrusted
-            filtroutente.value = [{ userId: userStore.my._id }]
-          }
-        })
-
-      }
-    }
-
-    function setRequestTrust(usernameDest: string, value: any) {
-      let msg = ''
-      if (value) {
-        msg = t('db.domanda_trusted', { username: usernameDest })
-      } else {
-        msg = t('db.domanda_rejectedtrust', { username: usernameDest })
-      }
-
-      $q.dialog({
-        message: msg,
-        ok: {
-          label: t('dialog.yes'),
-          push: true
-        },
-        cancel: {
-          label: t('dialog.cancel')
-        },
-        title: t('db.domanda')
-      }).onOk(() => {
-
-        userStore.setFriendsCmd($q, t, username.value, usernameDest, shared_consts.FRIENDSCMD.SETTRUST, value).then((res) => {
-          if (res) {
-            const myuser: IUserFields = listTrusted.value.find((rec: IUserFields) => rec.username === usernameDest)!
-            if (myuser) {
-              myuser.verified_by_aportador = value
-              if (value) {
-                // ADD to Trusted
-                listFriends.value.push(myuser)
-              } else {
-                // REMOVE to Trusted and to Friends
-                listFriends.value = listFriends.value.filter((rec: IUserFields) => rec.username !== usernameDest)
-              }
-            }
-            tools.showPositiveNotif($q, t('db.trusted'))
-
-          } else {
-            tools.showNegativeNotif($q, t('db.recfailed'))
-          }
-        })
-      })
-    }
-
-    function addToMyFriends(usernameDest: string) {
-      $q.dialog({
-        message: t('db.domanda_addtofriend', { username: usernameDest }),
-        ok: { label: t('dialog.yes'), push: true },
-        cancel: { label: t('dialog.cancel') },
-        title: t('db.domanda')
-      }).onOk(() => {
-
-        userStore.setFriendsCmd($q, t, username.value, usernameDest, shared_consts.FRIENDSCMD.SETFRIEND, null)
-          .then((res: any) => {
-            if (res) {
-              console.log('res = ', res)
-              listFriends.value = [...listFriends.value, res]
-              tools.showPositiveNotif($q, t('db.addedfriend'))
-            }
-          })
-      })
-    }
-
-    function removeFromMyFriends(usernameDest: string) {
-      $q.dialog({
-        message: t('db.domanda_removefriend', { username: usernameDest }),
-        ok: { label: t('dialog.yes'), push: true },
-        cancel: { label: t('dialog.cancel') },
-        title: t('db.domanda')
-      }).onOk(() => {
-
-        userStore.setFriendsCmd($q, t, username.value, usernameDest, shared_consts.FRIENDSCMD.REMOVE_FROM_MYFRIENDS, null).then((res) => {
-          if (res) {
-            listFriends.value = listFriends.value.filter((rec: IUserFields) => rec.username !== usernameDest)
-            tools.showPositiveNotif($q, t('db.removedfriend'))
-          }
-        })
-      })
-    }
-
-    function blockUser(usernameDest: string) {
-      $q.dialog({
-        message: t('db.domanda_blockuser', { username: usernameDest }),
-        ok: { label: t('dialog.yes'), push: true },
-        cancel: { label: t('dialog.cancel') },
-        title: t('db.domanda')
-      }).onOk(() => {
-        userStore.setFriendsCmd($q, t, username.value, usernameDest, shared_consts.FRIENDSCMD.BLOCK_USER, null).then((res) => {
-          if (res) {
-            listFriends.value = listFriends.value.filter((rec: IUserFields) => rec.username !== usernameDest)
-            tools.showPositiveNotif($q, t('db.blockedfriend'))
-          }
-        })
-      })
-    }
-
-    function setCmd(cmd: number, usernameDest: string, value: any = '') {
-      if (cmd === shared_consts.FRIENDSCMD.SETTRUST) {
-        setRequestTrust(usernameDest, value)
-      } else if (cmd === shared_consts.FRIENDSCMD.REMOVE_FROM_MYFRIENDS) {
-        removeFromMyFriends(usernameDest)
-      } else if (cmd === shared_consts.FRIENDSCMD.BLOCK_USER) {
-        blockUser(usernameDest)
-      } else if (cmd === shared_consts.FRIENDSCMD.SETFRIEND) {
-        addToMyFriends(usernameDest)
-      }
-    }
 
     function mounted() {
-      username.value = userStore.my.username
-      loadFriends()
-
       searchList.value = []
       filtercustom.value = []
       arrfilterand.value = []
@@ -227,26 +55,18 @@ export default defineComponent({
       }
     }
 
+
     onMounted(mounted)
 
     return {
-      listfriends: listFriends,
+      filter,
-      tools,
       costanti,
       shared_consts,
-      filtroutente,
-      filter,
-      listfriendsfiltered,
-      numFriends,
-      numAskTrust,
-      numTrusted,
-      numRejected,
       arrfilterand,
       filtercustom,
       searchList,
       colmyUserPeople,
       extraparams,
-      setCmd,
     }
   }
 })

src/views/user/myfriends/myfriends.vue

@@ -1,27 +1,9 @@
 <template>
-  <div class="q-gutter-sm q-pa-sm q-pb-md">
+  <div class="">
-    <div>
+    <CMyFriends
-      <q-btn-toggle
+      v-model="filter"
-        v-model="filter"
+      :finder="true"
-        class="my-custom-toggle"
+    >
-        no-caps
-        rounded
-        unelevated
-        push
-        toggle-color="primary"
-        color="white"
-        text-color="primary"
-        :options="[
-          {label: $t('mypages.find_people'), value: costanti.FIND_PEOPLE},
-          {label: $t('mypages.friends') + ' (' + numFriends + ')', value: costanti.FRIENDS},
-          {label: $t('mypages.request_trust') + ' (' + numAskTrust + ')', value: costanti.ASK_TRUST},
-          {label: $t('mypages.trusted') + ' (' + numTrusted + ')', value: costanti.TRUSTED},
-          {label: $t('mypages.rejected') + ' (' + numRejected + ')', value: costanti.REEJECTED}
-        ]"
-      />
-    </div>
-
-    <div v-if="filter === costanti.FIND_PEOPLE">
       <CGridTableRec
         prop_mytable="users"
         prop_mytitle=""
@@ -42,22 +24,11 @@
         :prop_searchList="searchList"
         :showType="costanti.SHOW_USERINFO"
         keyMain=""
+        :showCol="false"
         :extraparams="extraparams()">
 
       </CGridTableRec>
-    </div>
+    </CMyFriends>
-    <div v-else>
-      <q-list>
-        <span v-for="(contact, index) in listfriendsfiltered" :key="index" class="q-my-sm" clickable>
-          <CMyUser
-            :mycontact="contact"
-            @setCmd="setCmd"
-            :visu="filter">
-          </CMyUser>
-        </span>
-      </q-list>
-    </div>
-
   </div>
 </template>
 

src/views/user/myprofile/myprofile.vue

@@ -5,7 +5,7 @@
 
       <div class="">
         <q-avatar size="140px">
-          <q-img :src="getImgUser()" :alt="username" img-class="imgprofile" height="140px" @click="showPic = true" />
+          <q-img :src="getImgUser()" :alt="username" img-class="imgprofile" height="140px" @click="showPic = true"/>
         </q-avatar>
       </div>
 
@@ -14,11 +14,12 @@
           myuser.surname
         }}</span>
       </div>
-      <div class="col-12 text-h8 text-grey">
+      <div class="col-12 text-h7 text-blue text-shadow-2">
         {{ myuser.username }}
       </div>
       <div class="col-12 text-h7">
-        <span v-if="myuser.profile.born_city">{{ myuser.profile.born_city }}</span> <span v-if="myuser.profile.nationality">({{ myuser.profile.nationality }})</span>
+        <span v-if="myuser.profile.born_city">{{ myuser.profile.born_city }}</span> <span
+        v-if="myuser.profile.nationality">({{ myuser.profile.nationality }})</span>
       </div>
 
       <div class="col-12 text-h8 q-mt-sm">
@@ -45,6 +46,27 @@
 
       </div>
     </div>
+    <div v-else class="fit column no-wrap justify-evenly items-center content-start">
+      <q-skeleton type="QAvatar" size="140px" height="140px" animation="fade"/>
+      <q-card flat bordered style="width: 250px">
+        <div class="text-h6">
+          <q-skeleton :animation="animation"/>
+        </div>
+        <div class="col-12 text-h7 text-grey text-center">
+          {{ username }}
+        </div>
+        <div class="col-12 text-h7">
+          <q-skeleton :animation="animation"/>
+        </div>
+
+        <div class="col-12 text-h8 q-mt-sm">
+          <q-skeleton :animation="animation"/>
+        </div>
+        <div class="col-12 text-h8 q-mt-sm">
+          <q-skeleton :animation="animation"/>
+        </div>
+      </q-card>
+    </div>
 
     <CTitleBanner
       class="" :title="$t('dashboard.info')" bgcolor="bg-primary" clcolor="text-white"
@@ -84,7 +106,7 @@
   <q-dialog
     v-model="showPic"
     full-height full-width
-    >
+  >
 
     <img :src="getImgUser()" :alt="username" class="full-width">