62 lines
2.1 KiB
Vue
Executable File
62 lines
2.1 KiB
Vue
Executable File
<script setup>
|
|
import { useInfinityScroll } from '@/includes/composables/useInfinityScroll'
|
|
import MessangerModal from '@/Shared/Messanger/MessangerModal.vue'
|
|
import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
|
|
import UserBanner from '@/Shared/Misc/UserBanner.vue'
|
|
import axios from 'axios'
|
|
import debounce from 'lodash/debounce'
|
|
import { ref, watch } from 'vue'
|
|
|
|
const search = ref('')
|
|
const refMessangerModal = ref()
|
|
const { domNodeFn, cursor, loading, error, callAPI, data: userLists } = useInfinityScroll(async () => {
|
|
const url = search.value ? `user-friend/?search=${search.value}&cursor=${cursor.value}` : `user-friend/?cursor=${cursor.value}`
|
|
const res = await axios.get(url)
|
|
return res.data
|
|
})
|
|
callAPI()
|
|
watch(search, debounce(() => {
|
|
callAPI()
|
|
}, 500))
|
|
|
|
|
|
function openModalMessanger(user) {
|
|
refMessangerModal.value.openAction(user)
|
|
}
|
|
</script>
|
|
<template>
|
|
<div v-if="userLists" class="mt-5 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 cards-block rounded-md bg-indigo-200 grid gap-2 lg:gap-4 grid-cards ">
|
|
<messanger-modal ref="refMessangerModal" />
|
|
<div
|
|
v-for="user in userLists"
|
|
:ref="el => domNodeFn(el, user.id)"
|
|
:key="user.id"
|
|
class="user-card relative cursor-pointer"
|
|
@click="openModalMessanger(user)"
|
|
>
|
|
<div class="absolute inset-x-0 bottom-4 z-10 flex justify-center">
|
|
<div class="flex flex-col items-center">
|
|
<div class="flex-shrink-0">
|
|
<user-avatar :user="user" size="small"
|
|
class="border border-white shadow-classic h-20 w-20 text-lg"
|
|
/>
|
|
</div>
|
|
<div class="mt-2 text-white text-sm text-center">
|
|
<p class="">
|
|
{{ user.name }}
|
|
</p>
|
|
<p class="text-xs">
|
|
{{ user.username }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gradient-profile relative overflow-hidden">
|
|
<user-banner class="h-72 bg-indigo-300" :user="user"
|
|
size="banner"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|