- Add to Friends

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

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,
     }
   }
 })

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
-        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">
+  <div class="">
+    <CMyFriends
+      v-model="filter"
+      :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>
 

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">