156 lines
6.3 KiB
Vue
156 lines
6.3 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.leader" 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.leader" 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="readers.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="reader in readers" :key='reader.id' class="group mb-5 user-card relative">
|
||
<div v-if="user.is_auth_user" class="absolute inset-x-0 top-4 z-10 flex justify-center">
|
||
<toggle
|
||
@clicked='leader'
|
||
:user_id='reader.id'
|
||
:enabled="reader.is_leader"
|
||
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', reader.username)" class="block flex-shrink-0">
|
||
<user-avatar :user='reader' size='small' class="border border-white shadow-classic h-20 w-20 text-lg" />
|
||
</inertia-link>
|
||
<inertia-link :href="route('profile.user', reader.username)" class="mt-2 block text-white text-sm text-center">
|
||
<p>{{reader.name}}</p>
|
||
<p class="text-xs">{{reader.username}}</p>
|
||
</inertia-link>
|
||
</div>
|
||
</div>
|
||
<div class="gradient-profile relative overflow-hidden">
|
||
<user-banner class="w-full h-72 bg-indigo-300" :user='reader' size='banner' />
|
||
</div>
|
||
<div v-if="user.is_auth_user" class="transition-opacity sm:opacity-0 group-hover:opacity-100 absolute w-full text-center">
|
||
<button @click="susbscribe(reader.id)" class="leading-none focus:outline-none hover:underline text-sm text-orange-dark">Отписаться</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div v-show="readers.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 filter from 'lodash/filter';
|
||
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,
|
||
readers: Array,
|
||
counts: Object,
|
||
filters: Object,
|
||
},
|
||
data() {
|
||
return {
|
||
form: {
|
||
search: this.filters.search,
|
||
leader: this.filters.leader,
|
||
},
|
||
}
|
||
},
|
||
watch: {
|
||
form: {
|
||
handler: throttle(function() {
|
||
let query = pickBy(this.form)
|
||
const params = Object.keys(query).length ? query : { remember: 'forget' };
|
||
|
||
const url = route('profile.readers', this.user.username);
|
||
Inertia.get(url, params, { replace: true, preserveScroll: true, preserveState: true } )
|
||
}, 300),
|
||
deep: true,
|
||
},
|
||
},
|
||
|
||
methods:{
|
||
resetSearch(){
|
||
this.form.search = '';
|
||
this.form.leader = '';
|
||
},
|
||
|
||
susbscribe(user_id)
|
||
{
|
||
Inertia.post(route('users.subs', user_id), {}, { preserveScroll: true, preserveState: true })
|
||
},
|
||
|
||
leader(user_id)
|
||
{
|
||
let current_user = filter(this.readers, function (x) {
|
||
return x.id === user_id;
|
||
});
|
||
if(current_user){
|
||
current_user = current_user[0];
|
||
Inertia.post(route('users.leader', user_id), {vote: current_user.is_leader}, { preserveScroll: true, preserveState: true })
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|