137 lines
5.6 KiB
Vue
137 lines
5.6 KiB
Vue
<template>
|
||
|
||
<meta-head title="Подписчики"></meta-head>
|
||
|
||
<profile-header :user='user' :counts='counts' />
|
||
<profile-menu :user='user' />
|
||
|
||
|
||
<div class="mt-12 xl:container xl:mx-auto px-2 md:px-3">
|
||
|
||
<div class="cards-block rounded-md bg-indigo-200 shadow-classic p-2 lg:p-5">
|
||
|
||
<div class=" space-y-3 md:space-y-0 md:flex items-center">
|
||
<div class="flex-1 md:mr-10">
|
||
<div class="relative">
|
||
<div class="absolute inset-y-0 left-3 flex items-center z-10">
|
||
<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 " placeholder="Поиск" type="search"/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex space-x-6 md:mr-10">
|
||
<div class="flex items-center">
|
||
<input id="user-sex-1" v-model="form.sub" 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.sub" value="0" 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 class="text-gray-light">
|
||
<button @click="resetSearch()" class="default">Сбросить</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-show="subscribers.length" class="mt-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 grid gap-2 lg:gap-4 grid-cards">
|
||
<div v-for="subscriber in subscribers" :key='subscriber.id' class=" user-card relative">
|
||
<div v-if="user.is_auth_user" class="absolute inset-x-0 top-4 z-10 flex justify-center">
|
||
<toggle
|
||
@clicked='susbscribe'
|
||
:user_id='subscriber.id'
|
||
:enabled="subscriber.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', subscriber.username)" class="block flex-shrink-0">
|
||
<user-avatar :user='subscriber' size='small' class="border border-white shadow-classic h-20 w-20 text-lg" />
|
||
</inertia-link>
|
||
<inertia-link :href="route('profile.user', subscriber.username)" class="mt-2 block text-white text-sm text-center">
|
||
<p>{{subscriber.name}}</p>
|
||
<p class="text-xs">{{subscriber.username}}</p>
|
||
</inertia-link>
|
||
</div>
|
||
</div>
|
||
<div class="gradient-profile relative overflow-hidden">
|
||
<user-banner class="w-full h-72 bg-indigo-300" :user='subscriber' size='banner' />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div v-show="subscribers.length == 0">
|
||
<p class=" text-center md:text-2xl text-gray-light">Пользователи не найдены</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import Layout from '@/Shared/Layout'
|
||
import MetaHead from '@/Shared/MetaHead'
|
||
import ProfileHeader from '@/Shared/Partials/ProfileHeader'
|
||
import ProfileMenu from '@/Shared/Partials/ProfileMenu'
|
||
import UserAvatar from '@/Shared/Misc/UserAvatar'
|
||
import UserBanner from '@/Shared/Misc/UserBanner'
|
||
import Toggle from '@/Shared/Form/Toggle'
|
||
import pickBy from 'lodash/pickBy';
|
||
import throttle from 'lodash/throttle';
|
||
import { Inertia } from "@inertiajs/inertia";
|
||
|
||
export default {
|
||
layout: Layout,
|
||
components: {
|
||
MetaHead,
|
||
Toggle,
|
||
UserAvatar,
|
||
UserBanner,
|
||
ProfileHeader,
|
||
ProfileMenu,
|
||
},
|
||
props: {
|
||
user: Object,
|
||
subscribers: Array,
|
||
counts: Object,
|
||
filters: Object,
|
||
},
|
||
data() {
|
||
return {
|
||
form: {
|
||
search: this.filters.search,
|
||
sub: this.filters.sub,
|
||
},
|
||
}
|
||
},
|
||
watch: {
|
||
form: {
|
||
handler: throttle(function() {
|
||
let query = pickBy(this.form)
|
||
const params = Object.keys(query).length ? query : { remember: 'forget' };
|
||
|
||
const url = route('profile.subs', this.user.username);
|
||
Inertia.get(url, params, { replace: true, preserveScroll: true, preserveState: true } )
|
||
}, 300),
|
||
deep: true,
|
||
},
|
||
},
|
||
|
||
|
||
methods:{
|
||
resetSearch(){
|
||
this.form.search = '';
|
||
this.form.sub = '';
|
||
},
|
||
susbscribe(user_id)
|
||
{
|
||
Inertia.post(route('users.subs', user_id), {}, { preserveScroll: true, preserveState: true })
|
||
},
|
||
}
|
||
|
||
}
|
||
</script>
|