Friends, search

src/views/user/myfriends/myfriends.ts

@@ -3,22 +3,23 @@ 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, watch } from 'vue'
+import { computed, defineComponent, onMounted, ref } from 'vue'
 import { useUserStore } from '@store/UserStore'
 import { useRoute, useRouter } from 'vue-router'
-import { useGlobalStore } from '@store/globalStore'
 import { useI18n } from '@/boot/i18n'
-import { toolsext } from '@store/Modules/toolsext'
 import { useQuasar } from 'quasar'
 import { costanti } from '@costanti'
-import { IUserFields, IUserProfile } from 'model'
+import { ISearchList, IUserFields } from 'model'
 import { shared_consts } from '@/common/shared_vuejs'
+import { colmyUserPeople } from '@store/Modules/fieldsTable'
 
 
 export default defineComponent({
   name: 'myuser',
-  components: { CProfile, CTitleBanner, CMyFieldDb, CSkill, CDateTime },
+  components: { CProfile, CTitleBanner, CMyFieldDb, CSkill, CDateTime, CGridTableRec, CMyUser},
   props: {},
   setup() {
     const userStore = useUserStore()
@@ -28,21 +29,25 @@ export default defineComponent({
     const { t } = useI18n()
 
     const username = ref('')
-    const filter = ref(costanti.FRIENDS)
-    const listFriends = ref([])
-    const listTrusted = 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) {
+      } else if (filter.value === costanti.ASK_TRUST) {
         arr = listTrusted.value.filter((user: IUserFields) => user.verified_by_aportador === undefined)
-      }else if (filter.value === costanti.TRUSTED) {
+      } else if (filter.value === costanti.TRUSTED) {
         arr = listTrusted.value.filter((user: IUserFields) => user.verified_by_aportador)
-      }else if (filter.value === costanti.REEJECTED) {
+      } else if (filter.value === costanti.REEJECTED) {
         arr = listTrusted.value.filter((user: IUserFields) => user.verified_by_aportador === false)
       }
 
@@ -84,51 +89,142 @@ export default defineComponent({
       }
     }
 
-    function mounted() {
-      username.value = userStore.my.username
-      loadFriends()
-    }
-
-    function getImgUser(profile: IUserFields) {
-      return userStore.getImgByProfile(profile)
-    }
-
     function setRequestTrust(usernameDest: string, value: any) {
-      userStore.setFriendsCmd($q, t, username.value, usernameDest, shared_consts.FRIENDSCMD.SETTRUST, value).then((res) => {
-        if (res) {
-          const myuser: IUserFields|undefined = listTrusted.value.find((rec: IUserFields) => rec.username === usernameDest )
-          if (myuser) {
-            listFriends.value.push(myuser)
-            listTrusted.value = listTrusted.value.filter((rec: IUserFields) => rec.username !== usernameDest)
-          }
-          tools.showPositiveNotif($q, t('db.trusted'))
+      let msg = ''
+      if (value) {
+        msg = t('db.domanda_trusted', { username: usernameDest })
+      } else {
+        msg = t('db.domanda_rejectedtrust', { username: usernameDest })
+      }
 
-        } else {
-          tools.showNegativeNotif($q, t('db.recfailed'))
-        }
+      $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) {
-      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'))
-        }
+      $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) {
-      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.blockedfriend'))
-        }
+      $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 naviga(path: string) {
-      $router.push(path)
+    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 = []
+    }
+
+    function extraparams() {
+      let lk_tab = 'users'
+      let lk_LF = 'userId'
+      let lk_FF = '_id'
+      let lk_as = 'user'
+      let af_objId_tab = 'myId'
+
+      return {
+        lookup1: {
+          lk_tab,
+          lk_LF,
+          lk_FF,
+          lk_as,
+          af_objId_tab,
+          lk_proj: {
+            username: 1,
+            name: 1,
+            'profile.img': 1,
+          }
+        }
+      }
     }
 
     onMounted(mounted)
@@ -137,7 +233,7 @@ export default defineComponent({
       listfriends: listFriends,
       tools,
       costanti,
-      getImgUser,
+      shared_consts,
       filtroutente,
       filter,
       listfriendsfiltered,
@@ -145,10 +241,12 @@ export default defineComponent({
       numAskTrust,
       numTrusted,
       numRejected,
-      setRequestTrust,
-      removeFromMyFriends,
-      blockUser,
-      naviga,
+      arrfilterand,
+      filtercustom,
+      searchList,
+      colmyUserPeople,
+      extraparams,
+      setCmd,
     }
   }
 })

src/views/user/myfriends/myfriends.vue

@@ -12,6 +12,7 @@
         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},
@@ -20,75 +21,42 @@
       />
     </div>
 
-    <q-list>
-      <q-item v-for="(contact, index) in listfriendsfiltered" :key="index" class="q-my-sm" clickable>
-        <q-item-section avatar @click="naviga(`/my/` + contact.username)">
-          <q-avatar size="60px">
-            <q-img :src="getImgUser(contact)" :alt="contact.username" img-class="imgprofile" height="60px" />
-          </q-avatar>
-        </q-item-section>
+    <div v-if="filter === costanti.FIND_PEOPLE">
+      <CGridTableRec
+        prop_mytable="users"
+        prop_mytitle=""
+        :prop_mycolumns="colmyUserPeople"
+        prop_colkey="_id"
+        col_title="username"
+        :vertical="true"
+        nodataLabel=" "
+        :prop_search="true"
+        hint="Username da trovare"
+        :finder="true"
+        :finder_noNull="true"
+        :options="shared_consts.OPTIONS_SEARCH_ONLY_FULL_WORDS"
+        :butt_modif_new="false"
+        noresultLabel="Username non trovato"
+        :arrfilters="arrfilterand"
+        :filtercustom="filtercustom"
+        :prop_searchList="searchList"
+        :showType="costanti.SHOW_USERINFO"
+        keyMain=""
+        :extraparams="extraparams()">
 
-        <q-item-section @click="naviga(`/my/` + contact.username)">
-          <q-item-label><strong>{{ contact.name }} {{ contact.surname }}</strong> ({{ contact.username }})
-          </q-item-label>
-          <q-item-label caption lines="1">{{ contact.email }}</q-item-label>
-        </q-item-section>
-
-
-        <q-item-section side v-if="filter === costanti.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="removeFromMyFriends(contact.username)">
-                    <q-item-section>{{$t('friends.remove_from_myfriends')}}</q-item-section>
-                  </q-item>
-                </q-list>
-                <q-list style="min-width: 150px">
-                  <q-item clickable icon="fas fa-ban" v-close-popup @click="blockUser(contact.username)">
-                    <q-item-section>{{$t('friends.block_user')}}</q-item-section>
-                  </q-item>
-                </q-list>
-              </q-menu>
-            </q-btn>
-          </q-item-label>
-        </q-item-section>
-        <q-item-section side v-if="filter === costanti.ASK_TRUST">
-          <q-item-label>
-            <q-btn color="positive" :label="$t('friends.accept')" @click="setRequestTrust(contact.username, true)"/>
-          </q-item-label>
-          <q-item-label>
-            <q-btn color="negative" :label="$t('friends.reject')" @click="setRequestTrust(contact.username, false)"/>
-          </q-item-label>
-        </q-item-section>
-        <q-item-section side v-if="filter === costanti.TRUSTED">
-          <q-item-label>
-            <q-btn rounded icon="fas fa-ellipsis-h">
-              <q-menu>
-                <q-list style="min-width: 200px">
-                  <q-item clickable v-close-popup @click="removeFromMyFriends(contact.username)">
-                    <q-item-section>{{$t('friends.reject')}}</q-item-section>
-                  </q-item>
-                </q-list>
-              </q-menu>
-            </q-btn>
-          </q-item-label>
-        </q-item-section>
-        <q-item-section side v-if="filter === costanti.REEJECTED">
-          <q-item-label>
-            <q-btn rounded icon="fas fa-ellipsis-h">
-              <q-menu>
-                <q-list style="min-width: 200px">
-                  <q-item clickable icon="fas fa-user-minus" v-close-popup @click="setRequestTrust(contact.username, false)">
-                    <q-item-section>{{$t('friends.accept')}}</q-item-section>
-                  </q-item>
-                </q-list>
-              </q-menu>
-            </q-btn>
-          </q-item-label>
-        </q-item-section>
-      </q-item>
-    </q-list>
+      </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>
 
   </div>
 </template>