- Add to Friends

- remove from Friend list - Cancel Ask Friend .... OK !
2022-01-14 23:54:12 +01:00
parent 45993d05c5
commit bf74eb2a03
26 changed files with 1327 additions and 529 deletions
--- a/_ALL_SITES/popolodelnuovomondo.app/quasar.conf.js
+++ b/_ALL_SITES/popolodelnuovomondo.app/quasar.conf.js
@@ -217,6 +217,7 @@ module.exports = configure((ctx) => ({
      'QCarouselSlide',
      'QPageScroller',
      'QAvatar',
+      'QSkeleton',
      'QImg',
      'QSplitter',
      'QRating',
--- a/package.json
+++ b/package.json
@@ -23,25 +23,25 @@
  "dependencies": {
    "axios": "0.21.4",
    "@vue/eslint-config-standard": "5.1.2",
-    "@quasar/extras": "^1.12.2",
-    "@quasar/quasar-ui-qcalendar": "^4.0.0-beta.11",
+    "@quasar/extras": "^1.12.3",
+    "@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/validators": "^2.0.0-alpha.25",
-    "acorn": "^8.6.0",
-    "autoprefixer": "^10.4.0",
+    "@vuelidate/core": "^2.0.0-alpha.33",
+    "@vuelidate/validators": "^2.0.0-alpha.26",
+    "acorn": "^8.7.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",
-    "dotenv": "^10.0.0",
+    "date-fns": "^2.28.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",
-    "@quasar/app": "^3.2.5",
-    "@quasar/quasar-app-extension-qcalendar": "^4.0.0-beta.11",
+    "webpack": "^5.66.0",
+    "@quasar/app": "^3.2.6",
+    "@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",
--- a/src/App.scss
+++ b/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;
--- a/src/common/shared_vuejs.ts
+++ b/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,
  },
--- a/src/components/CGridTableRec/CGridTableRec.scss
+++ b/src/components/CGridTableRec/CGridTableRec.scss
@@ -41,3 +41,7 @@
  padding: 4px 8px !important;
 }

+
+.q-table__top{
+  padding-top: 0 !important;
+}
--- a/src/components/CGridTableRec/CGridTableRec.ts
+++ b/src/components/CGridTableRec/CGridTableRec.ts
@@ -12,14 +12,12 @@ import {
  ISearchList,
  IPagination,
  IParamDialog,
-  IEvents,
-  IDataToSet,
-  IMySkill, ISkill
-} from '../../model'
-import { lists } from '../../store/Modules/lists'
-import { IParamsQuery } from '../../model/GlobalStore'
-import { CMyUser } from '../CMyUser'
+  IMySkill
+} from 'model'
+import { lists } from '@store/Modules/lists'
+import { IParamsQuery } from 'model'
 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,
    }
  }
 })
--- a/src/components/CGridTableRec/CGridTableRec.vue
+++ b/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">
@@ -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">
-          <CMyUser
-            :mycontact="props.row">
-          </CMyUser>
+        <div v-if="showType === costanti.SHOW_USERINFO" class="fill-all-width">
+          <div>
+            <CMyFriends
+              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">
--- a/src/components/CMyFriends/CMyFriends.scss
+++ b/src/components/CMyFriends/CMyFriends.scss
--- a/src/components/CMyFriends/CMyFriends.ts
+++ b/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,
+    }
+  }
+})
--- a/src/components/CMyFriends/CMyFriends.vue
+++ b/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>
+
--- a/src/components/CMyFriends/index.ts
+++ b/src/components/CMyFriends/index.ts
@@ -0,0 +1 @@
+export {default as CMyFriends} from './CMyFriends.vue'
--- a/src/components/CMyUser/CMyUser.ts
+++ b/src/components/CMyUser/CMyUser.ts
@@ -81,6 +81,7 @@ export default defineComponent({
      naviga,
      setCmd,
      shared_consts,
+      userStore,
    }
  },
 })
--- a/src/components/CMyUser/CMyUser.vue
+++ b/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-item clickable v-close-popup @click="setCmd(shared_consts.FRIENDSCMD.SETFRIEND, contact.username)">
-                    <q-item-section>{{ $t('friends.accept_friend') }}</q-item-section>
+                <q-list v-if="!userStore.IsMyFriendByUsername(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 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>
--- a/src/components/CSkill/CSkill.ts
+++ b/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,
    }
  },
 })
--- a/src/components/index.ts
+++ b/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'
--- a/src/css/app.scss
+++ b/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;
+}
--- a/src/model/UserStore.ts
+++ b/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
--- a/src/statics/lang/es.js
+++ b/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;
--- a/src/statics/lang/it.js
+++ b/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_removefriend: 'Rimuovi dagli Amici {username}?',
+      domanda_blockuser: 'Bloccare {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',
-      trusted: 'Accettati',
+      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',
-      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',
    }
  },

--- a/src/store/Modules/costanti.ts
+++ b/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,
--- a/src/store/UserStore.ts
+++ b/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) => {
--- a/src/views/user/myfriends/myfriends.scss
+++ b/src/views/user/myfriends/myfriends.scss
--- a/src/views/user/myfriends/myfriends.ts
+++ b/src/views/user/myfriends/myfriends.ts
@@ -1,204 +1,32 @@
-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 { CMyFriends } from '@/components/CMyFriends'
 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',
-  components: { CProfile, CTitleBanner, CMyFieldDb, CSkill, CDateTime, CGridTableRec, CMyUser},
+  name: 'myfriends',
+  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(() => {
-      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)
-      }
-    }
+    const filter = ref(costanti.FIND_PEOPLE)

    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,
-      tools,
+      filter,
      costanti,
      shared_consts,
-      filtroutente,
-      filter,
-      listfriendsfiltered,
-      numFriends,
-      numAskTrust,
-      numTrusted,
-      numRejected,
      arrfilterand,
      filtercustom,
      searchList,
      colmyUserPeople,
      extraparams,
-      setCmd,
    }
  }
 })
--- a/src/views/user/myfriends/myfriends.vue
+++ b/src/views/user/myfriends/myfriends.vue
@@ -1,27 +1,9 @@
 <template>
-  <div class="q-gutter-sm q-pa-sm q-pb-md">
-    <div>
-      <q-btn-toggle
+  <div class="">
+    <CMyFriends
      v-model="filter"
-        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">
+      :finder="true"
+    >
      <CGridTableRec
        prop_mytable="users"
        prop_mytitle=""
@@ -42,22 +24,11 @@
        :prop_searchList="searchList"
        :showType="costanti.SHOW_USERINFO"
        keyMain=""
+        :showCol="false"
        :extraparams="extraparams()">

      </CGridTableRec>
-    </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="filter">
-          </CMyUser>
-        </span>
-      </q-list>
-    </div>
-
+    </CMyFriends>
  </div>
 </template>

--- a/src/views/user/myprofile/myprofile.vue
+++ b/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"
--- a/yarn.lock
+++ b/yarn.lock
				`@@ -0,0 +1 @@`
				`export {default as CMyFriends} from './CMyFriends.vue'`