133 lines
4.7 KiB
Vue
133 lines
4.7 KiB
Vue
<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="md:flex items-center mb-5">
|
|
<div class="flex-1 relative mb-5 md:mb-0 md:mr-10">
|
|
<div class="absolute inset-y-0 left-3 flex items-center z-[1]">
|
|
<svg class="flex-shrink-0 h-5 w-5 text-gray-light" xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24" fill="currentColor">
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M11 4a7 7 0 100 14 7 7 0 000-14zm-9 7a9 9 0 1118 0 9 9 0 01-18 0z" />
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M15.943 15.943a1 1 0 011.414 0l4.35 4.35a1 1 0 01-1.414 1.414l-4.35-4.35a1 1 0 010-1.414z" />
|
|
</svg>
|
|
</div>
|
|
<input
|
|
v-model="form.search"
|
|
class="relative w-full focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light !pl-10 h-14" placeholder="Поиск"
|
|
type="search">
|
|
</div>
|
|
<div>
|
|
<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">
|
|
<label for="user-sex-1" class="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">
|
|
<label for="user-sex-2" class="select-none ml-3 text-gray text-xs md:text-base">Мужской</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</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">
|
|
|
|
|
|
<div v-for="user in users" :key='user.id' class=" user-card relative">
|
|
<div class="absolute inset-x-0 top-4 z-10 flex justify-center">
|
|
<toggle
|
|
@clicked='susbscribe'
|
|
:user_id='user.id'
|
|
:enabled="user.is_sub"
|
|
textin='Подписаться' textout='Отписаться' />
|
|
|
|
</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>
|
|
|
|
</div>
|
|
|
|
<div v-show="users.length == 0">
|
|
<p class=" text-center md:text-2xl text-gray-light ">Пользователи не найдены</p>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import MetaHead from '@/Shared/MetaHead'
|
|
import Toggle from '@/Shared/Form/Toggle'
|
|
import UserAvatar from '@/Shared/Misc/UserAvatar'
|
|
import UserBanner from '@/Shared/Misc/UserBanner'
|
|
import Layout from '@/Shared/Layout'
|
|
import throttle from 'lodash/throttle'
|
|
import pickBy from 'lodash/pickBy'
|
|
import { Inertia } from "@inertiajs/inertia";
|
|
|
|
export default {
|
|
components: {
|
|
MetaHead,
|
|
UserAvatar,
|
|
UserBanner,
|
|
Toggle,
|
|
},
|
|
layout: Layout,
|
|
props: {
|
|
users: Array,
|
|
filters: Object,
|
|
},
|
|
data() {
|
|
return {
|
|
form: {
|
|
search: this.filters.search,
|
|
sex: this.filters.sex,
|
|
},
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
form: {
|
|
handler: throttle(function() {
|
|
let query = pickBy(this.form)
|
|
Inertia.get(this.route('users.index', Object.keys(query).length ? query : { remember: 'forget' }),
|
|
{},
|
|
{
|
|
preserveScroll: true,
|
|
preserveState: true,
|
|
}
|
|
)
|
|
}, 300),
|
|
deep: true,
|
|
},
|
|
},
|
|
methods:{
|
|
susbscribe(user_id)
|
|
{
|
|
Inertia.post(route('users.subs', user_id), {}, { preserveScroll: true, preserveState: true })
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|