Последняя версия с сервера прошлого разработчика
This commit is contained in:
175
resources/js/Pages/User/Index.vue
Executable file
175
resources/js/Pages/User/Index.vue
Executable file
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<meta-head title="Пользователи"></meta-head>
|
||||
|
||||
<div class="mt-16 container mx-auto px-2 md:px-6 2xl:px-28 buttons-filter-line">
|
||||
<div class="mb-5">
|
||||
<search-filter v-model="form.search" class="w-full max-w-3xl mr-4"
|
||||
@reset="reset"
|
||||
>
|
||||
<label class="text-xs md:text-base block text-gray mb-2">Пол:</label>
|
||||
<div class="flex space-x-6">
|
||||
<div class="flex items-center">
|
||||
<input id="user-sex-1" v-model="form.sex"
|
||||
value="1" type="radio"
|
||||
class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent cursor-pointer"
|
||||
>
|
||||
<label for="user-sex-1" class="cursor-pointer select-none ml-3 text-gray text-xs md:text-base">Женский</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<input id="user-sex-2" v-model="form.sex"
|
||||
value="2" type="radio"
|
||||
class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent cursor-pointer"
|
||||
>
|
||||
<label for="user-sex-2" class="cursor-pointer select-none ml-3 text-gray text-xs md:text-base">Мужской</label>
|
||||
</div>
|
||||
</div>
|
||||
</search-filter>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-show="users.length" class="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 cards-block rounded-md bg-indigo-200 shadow-classic grid gap-2 lg:gap-4 grid-cards p-2 lg:p-5">
|
||||
<InfinityScroll :node-element="lastNodeLement" :next-cursor="nextCursor"
|
||||
@fromPagination="putFromPagination"
|
||||
>
|
||||
<div
|
||||
v-for="user in userLists"
|
||||
:key="user.id"
|
||||
:ref="el => { if (el && user.id === lastElementID) lastNodeLement = el }"
|
||||
class="user-card relative"
|
||||
>
|
||||
<div v-if="!user.private" class="absolute inset-x-0 top-4 z-10 flex justify-center">
|
||||
<toggle
|
||||
:user_id="user.id"
|
||||
:enabled="user.is_sub"
|
||||
textin="Подписаться"
|
||||
textout="Отписаться" @clicked="susbscribe"
|
||||
/>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-4 z-10 flex justify-center">
|
||||
<div class="flex flex-col items-center">
|
||||
<inertia-link :href="route('profile.user', user.username)" class="block flex-shrink-0">
|
||||
<user-avatar :user="user" size="small"
|
||||
class="border border-white shadow-classic h-20 w-20 text-lg"
|
||||
/>
|
||||
</inertia-link>
|
||||
<inertia-link :href="route('profile.user', user.username)" class="mt-2 block text-white text-sm text-center">
|
||||
<p class="">
|
||||
{{ user.name }}
|
||||
</p>
|
||||
<p class="text-xs">
|
||||
{{ user.username }}
|
||||
</p>
|
||||
</inertia-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gradient-profile relative overflow-hidden">
|
||||
<user-banner class="h-72 bg-indigo-300" :user="user"
|
||||
size="banner"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</InfinityScroll>
|
||||
</div>
|
||||
|
||||
<div v-show="users.length == 0">
|
||||
<p class="text-center md:text-2xl text-gray-light">
|
||||
Пользователи не найдены
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { Inertia } from '@inertiajs/inertia'
|
||||
import throttle from 'lodash/throttle'
|
||||
import pickBy from 'lodash/pickBy'
|
||||
import mapValues from 'lodash/mapValues'
|
||||
|
||||
import Layout from '@/Shared/Layout.vue'
|
||||
import MetaHead from '@/Shared/MetaHead.vue'
|
||||
import Toggle from '@/Shared/Form/Toggle.vue'
|
||||
import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
|
||||
import UserBanner from '@/Shared/Misc/UserBanner.vue'
|
||||
import SearchFilter from '@/Shared/Form/SearchFilter.vue'
|
||||
import InfinityScroll from '@/Shared/Misc/InfinityScroll.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MetaHead,
|
||||
UserAvatar,
|
||||
UserBanner,
|
||||
Toggle,
|
||||
InfinityScroll,
|
||||
SearchFilter,
|
||||
},
|
||||
layout: Layout,
|
||||
props: {
|
||||
nextCursor: String,
|
||||
users: Array,
|
||||
filters: Object,
|
||||
per_page: Number,
|
||||
},
|
||||
|
||||
setup() {
|
||||
const containerRef = ref(null)
|
||||
return {
|
||||
lastNodeLement: containerRef,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userLists: [],
|
||||
form: {
|
||||
search: this.filters.search,
|
||||
sex: this.filters.sex,
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
lastElementID() {
|
||||
return this.userLists[this.userLists.length - 1]?.id
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
users() {
|
||||
this.updateRequest()
|
||||
},
|
||||
form: {
|
||||
deep: true,
|
||||
handler: throttle(function () {
|
||||
Inertia.get(this.route('users.index'), pickBy(this.form), {
|
||||
preserveState: true,
|
||||
})
|
||||
}, 500),
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.updateRequest()
|
||||
},
|
||||
|
||||
methods: {
|
||||
putFromPagination(lists) {
|
||||
for (let list of lists) {
|
||||
this.userLists.push(list)
|
||||
}
|
||||
},
|
||||
|
||||
susbscribe(user_id) {
|
||||
Inertia.post(
|
||||
route('users.subs', user_id),
|
||||
{},
|
||||
{ preserveScroll: true, preserveState: true }
|
||||
)
|
||||
},
|
||||
updateRequest() {
|
||||
this.userLists = this.users
|
||||
},
|
||||
reset() {
|
||||
this.form = mapValues(this.form, () => null)
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user