Последняя версия с сервера прошлого разработчика
This commit is contained in:
161
resources/js/Shared/Partials/ProfileHeader.vue
Executable file
161
resources/js/Shared/Partials/ProfileHeader.vue
Executable file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="gradient-profile relative">
|
||||
<user-banner class="h-56 xl:h-80 bg-indigo-200" :user="user"
|
||||
size="hero"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<messanger-modal ref="messangerModal" />
|
||||
|
||||
<div class="-mt-24 xl:-mt-32 relative xl:container xl:mx-auto px-2 md:px-3">
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<div class="flex-shrink-0 self-center md:self-start md:mr-6 2xl:mr-10">
|
||||
<user-avatar :user="user" size="medium"
|
||||
class="shadow-classic object-cover w-48 h-48 xl:w-64 xl:h-64 text-5xl"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<div class="h-24 xl:h-32 hidden md:block"></div>
|
||||
<div class="mt-2 ">
|
||||
<div class="-mx-2 -my-2 lg:-mx-4 lg:-my-4 flex flex-col md:flex-row flex-wrap xl:flex-nowrap">
|
||||
<div class="max-w-[350px] text-center md:text-left mx-2 my-2 lg:mx-4 lg:my-4 flex flex-shrink-0 flex-col self-center md:self-start">
|
||||
<h1 class="md:mb-3 text-2xl xl:text-4xl font-semibold text-white">
|
||||
{{ user.name }}
|
||||
</h1>
|
||||
<h2 class="text-base xl:text-xl text-gray-light">
|
||||
@{{ user.username }}
|
||||
</h2>
|
||||
</div>
|
||||
<!-- self-center -->
|
||||
<div class="mx-2 my-2 lg:mx-4 lg:my-4 self-center md:self-start flex flex-1 flex-col">
|
||||
<div class="md:mt-2">
|
||||
<div class="flex 2xl:text-lg text-white -mx-4">
|
||||
<inertia-link :href="route('profile.user', user.username)" class="block mx-4">
|
||||
<span class="text-orange">{{ counts.feeds }}</span> {{ countPosts }}
|
||||
</inertia-link>
|
||||
<inertia-link :href="route('profile.subs', user.username)" class="block mx-4">
|
||||
<span class="text-orange">{{ counts.subscribers }}</span> {{ countSubs }}
|
||||
</inertia-link>
|
||||
<inertia-link :href="route('profile.readers', user.username)" class="block mx-4">
|
||||
<span class="text-orange">{{ counts.readers }}</span> {{ countReaders }}
|
||||
</inertia-link>
|
||||
</div>
|
||||
<div class="mt-4 text-gray-light text-sm min-h-[20px]">
|
||||
{{ user.about }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mx-2 my-2 lg:mx-4 lg:my-4 2xl:flex-shrink-0 self-center text-center">
|
||||
<inertia-link v-if="user.is_auth_user" class="inline-flex tracking-wide items-center px-4 py-3 border border-white text-sm 2xl:text-base text-white rounded-full bg-transparent hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2"
|
||||
:href="route('setting.index')"
|
||||
>
|
||||
Редактировать профиль
|
||||
</inertia-link>
|
||||
<div v-else>
|
||||
<button v-if="$page.props.auth.user && (user.private === false || packageCompleted)" class="pt-2 default flex items-center text-white"
|
||||
@click="openModalMessanger"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24"
|
||||
height="24" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round" class="flex-shrink-0 mr-2"
|
||||
><line x1="22" y1="2"
|
||||
x2="11" y2="13"
|
||||
></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
|
||||
написать сообщение
|
||||
</button>
|
||||
|
||||
<toggle
|
||||
v-if="$page.props.auth.user && user.private === false"
|
||||
:user_id="user.id"
|
||||
class="mt-3"
|
||||
:enabled="user.is_sub"
|
||||
textin="Подписаться"
|
||||
textout="Отписаться" @clicked="susbscribe"
|
||||
/>
|
||||
<div v-if="authUserActiveSubscription">
|
||||
<toggle
|
||||
v-if="user.is_sub && (user.private === false || packageCompleted)"
|
||||
class="mt-3"
|
||||
:user_id="user.id"
|
||||
:enabled="is_leader"
|
||||
:disabled="limitLeader === true && user.is_leader === false ? true : false"
|
||||
textin="Сделать лидером"
|
||||
textout="Убрать лидера" @clicked="leader"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import helper from '@/includes/helper'
|
||||
import { Inertia } from '@inertiajs/inertia'
|
||||
|
||||
import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
|
||||
import UserBanner from '@/Shared/Misc/UserBanner.vue'
|
||||
import Toggle from '@/Shared/Form/Toggle.vue'
|
||||
import MessangerModal from '@/Shared/Messanger/MessangerModal.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Toggle,
|
||||
UserAvatar,
|
||||
UserBanner,
|
||||
MessangerModal,
|
||||
},
|
||||
props: {
|
||||
user: Object,
|
||||
counts: Object,
|
||||
is_leader: Boolean,
|
||||
authUserActiveSubscription: Boolean,
|
||||
limitLeader: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
packageCompleted: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
countPosts() {
|
||||
return helper.declNumPosts(this.counts.feeds)
|
||||
},
|
||||
countSubs() {
|
||||
return helper.declNumSubs(this.counts.subscribers)
|
||||
},
|
||||
countReaders() {
|
||||
return helper.declNumReaders(this.counts.readers)
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
openModalMessanger() {
|
||||
this.$refs.messangerModal.openAction(this.user)
|
||||
},
|
||||
susbscribe(user_id) {
|
||||
Inertia.post(
|
||||
route('users.subs', user_id),
|
||||
{},
|
||||
{ preserveScroll: true, preserveState: true }
|
||||
)
|
||||
},
|
||||
leader(user_id) {
|
||||
Inertia.post(
|
||||
route('users.leader', user_id),
|
||||
{ vote: this.is_leader },
|
||||
{ preserveScroll: true, preserveState: true }
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user