Lista Friends

src/views/user/myfriends/myfriends.ts

@@ -0,0 +1,101 @@
+import { CMyFieldDb } from '@/components/CMyFieldDb'
+import { CTitleBanner } from '@/components/CTitleBanner'
+import { CProfile } from '@/components/CProfile'
+import { CSkill } from '@/components/CSkill'
+import { CDateTime } from '@/components/CDateTime'
+import { tools } from '@store/Modules/tools'
+import { computed, defineComponent, onMounted, ref, watch } from 'vue'
+import { useUserStore } from '@store/UserStore'
+import { useRoute, useRouter } from 'vue-router'
+import { useGlobalStore } from '@store/globalStore'
+import { useI18n } from '@/boot/i18n'
+import { toolsext } from '@store/Modules/toolsext'
+import { useQuasar } from 'quasar'
+import { costanti } from '@costanti'
+import { IUserFields, IUserProfile } from 'model'
+
+
+export default defineComponent({
+  name: 'myuser',
+  components: { CProfile, CTitleBanner, CMyFieldDb, CSkill, CDateTime },
+  props: {},
+  setup() {
+    const userStore = useUserStore()
+    const $route = useRoute()
+    const { t } = useI18n()
+
+    const username = ref('')
+    const filter = ref(costanti.FRIENDS)
+    const listFriends = ref([])
+    const listTrusted = ref([])
+
+    const filtroutente = ref(<any[]>[])
+
+    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)
+      }else if (filter.value === costanti.TRUSTED) {
+        arr = listTrusted.value.filter((user: IUserFields) => !user.verified_by_aportador)
+      }
+
+      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)
+      return (arr) ? arr.length : 0
+    })
+
+    const numAskTrusted = computed(() => {
+      const arr = listTrusted.value.filter((user: IUserFields) => user.verified_by_aportador)
+      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 mounted() {
+      username.value = userStore.my.username
+      loadFriends()
+    }
+
+    function getImgUser(profile: IUserFields) {
+      return userStore.getImgByProfile(profile)
+    }
+
+    onMounted(mounted)
+
+    return {
+      listfriends: listFriends,
+      tools,
+      costanti,
+      getImgUser,
+      filtroutente,
+      filter,
+      listfriendsfiltered,
+      numFriends,
+      numAskTrust,
+      numAskTrusted,
+    }
+  }
+})

src/views/user/myfriends/myfriends.vue

@@ -0,0 +1,49 @@
+<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
+        toggle-color="primary"
+        color="white"
+        text-color="primary"
+        :options="[
+          {label: $t('mypages.friends') + ' (' + numFriends + ')', value: costanti.FRIENDS},
+          {label: $t('mypages.request_trust') + ' (' + numAskTrust + ')', value: costanti.ASK_TRUST},
+          {label: $t('mypages.trusted') + ' (' + numAskTrusted + ')', value: costanti.TRUSTED}
+        ]"
+      />
+    </div>
+
+    <q-list bordered>
+      <q-item v-for="(contact, index) in listfriendsfiltered" :key="index" class="q-my-sm" clickable v-ripple>
+        <q-item-section avatar>
+          <q-avatar>
+            <img :src="getImgUser(contact)" :alt="contact.username">
+          </q-avatar>
+        </q-item-section>
+
+        <q-item-section>
+          <q-item-label>{{ contact.name }} {{ contact.surname }}</q-item-label>
+          <q-item-label caption lines="1">{{ contact.email }}</q-item-label>
+        </q-item-section>
+
+        <q-item-section side>
+          <q-icon name="chat_bubble" color="green" />
+        </q-item-section>
+      </q-item>
+    </q-list>
+
+  </div>
+</template>
+
+<script lang="ts" src="./myfriends.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './myfriends.scss';
+</style>
+