site/resources/js/Shared/Partials/ProfileHeader.vue

<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>