225 lines
8.3 KiB
Vue
225 lines
8.3 KiB
Vue
<template>
|
|
|
|
<div class="col-span-5 modal-body flex flex-col">
|
|
|
|
<div class="modal-head mb-3 px-2 py-4 md:py-4 md:px-6 flex justify-between items-center border-b border-indigo-100">
|
|
<div class="flex items-center space-x-4">
|
|
<inertia-link :href="route('profile.user', user.username)" class="flex-shrink-0 block">
|
|
<user-avatar :user='user' size='small' class="w-12 h-12 md:w-16 md:h-16 border-2 border-orange text-lg" />
|
|
</inertia-link>
|
|
<inertia-link :href="route('profile.user', user.username)" class="flex flex-col">
|
|
<p class="text-base md:text-xl font-semibold text-gray">{{user.name}}</p>
|
|
<p class="min-h-[24px]">
|
|
<span v-show="user.count_posts" class="md:mt-1 text-sm text-gray-light">{{user.count_posts}} {{countPosts}}</span>
|
|
</p>
|
|
</inertia-link>
|
|
</div>
|
|
<div class="text-white">
|
|
<dropdown-menu-point>
|
|
<MenuItems class="origin-top-right absolute right-0 mt-2 w-64 bg-indigo-200 shadow-lg max-h-60 rounded-md text-base ring-1 ring-indigo-100 overflow-auto focus:outline-none">
|
|
<MenuItem v-if="user.id === $page.props.auth.user.id">
|
|
<button @click="onRemoveFeed()" class="w-full group flex items-center px-4 py-2 text-base hover:bg-indigo-300 text-gray-light">
|
|
<MinusCircleIcon class="mr-3 h-5 w-5 text-gray-400 group-hover:text-orange" aria-hidden="true" />
|
|
Удалить
|
|
</button>
|
|
</MenuItem>
|
|
<MenuItem v-if="user.id !== $page.props.auth.user.id">
|
|
<inertia-link :href="route('video.create')" class="group flex items-center px-4 py-2 text-base hover:bg-indigo-300 text-gray-light">
|
|
<ExclamationIcon class="mr-3 h-5 w-5 text-gray-400 group-hover:text-orange" aria-hidden="true" />
|
|
Пожаловаться
|
|
</inertia-link>
|
|
</MenuItem>
|
|
</MenuItems>
|
|
</dropdown-menu-point>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div data-simplebar class="modal-feed max-h-[29rem] overflow-auto">
|
|
<div class="p-2 md:py-4 md:px-6 space-y-3 md:space-y-6">
|
|
|
|
<div v-if="entity.body" class="comment-line comment-line--head flex flex-col text-gray text-sm">
|
|
<div class="flex group">
|
|
<inertia-link :href="route('profile.user', user.username)" class="flex-shrink-0 block mr-3">
|
|
<user-avatar :user='user' size='small' class="w-10 h-10 border border-orange text-xs" />
|
|
</inertia-link>
|
|
<div>
|
|
<inertia-link :href="route('profile.user', user.username)" class="font-semibold underline inline-block mr-2">
|
|
{{user.username}}
|
|
</inertia-link>
|
|
{{entity.body}}
|
|
<div class="transition-opacity opacity-0 group-hover:opacity-100 flex space-x-4">
|
|
<span class="text-xs text-gray-light">{{entity.created_at_humans}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-for="comment in comments" :key='comment.id' class="comment-line flex flex-col text-gray text-sm">
|
|
<user-comment :creator_id='user.id' :comment='comment' />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer mt-auto p-2 md:py-4 md:px-6 border-t border-indigo-100">
|
|
|
|
<feed-paid-block
|
|
@onReplaceFeed='onReplaceFeed'
|
|
:is_paid='entity.is_paid'
|
|
:user_id='user.id'
|
|
:price='entity.price'
|
|
:feed_id='feed_id'
|
|
:paid_open='entity.paid_open'
|
|
class="text-white"
|
|
/>
|
|
|
|
<div class="misc-info mt-2 md:mt-0 mb-2 flex flex-row-reverse">
|
|
<div class="flex space-x-4">
|
|
<like-count @likeFeed='likeFeed' :likes='entity.likes' :liked='entity.liked' />
|
|
<comment-count :comments='entity.comments' />
|
|
<share-count />
|
|
</div>
|
|
<div class="mr-auto flex text-gray-light">
|
|
<button class="default">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 flex-shrink-0"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="modal-send flex">
|
|
<div class="flex-1">
|
|
<textarea required v-model="new_comment" class="pl-0 pr-2 resize-none bg-indigo-300 w-full outline-none focus:ring-transparent focus:border-transparent focus:ring-offset-0 text-base text-gray border-transparent" placeholder="Написать комментарий..."></textarea>
|
|
</div>
|
|
<div class="mt-1 flex-shrink-0 text-pink">
|
|
<button @click="addComment" class="default">
|
|
<svg class="w-8 h-8 flex-shrink-0">
|
|
<use xlink:href="#arrow-circle"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { Inertia } from "@inertiajs/inertia";
|
|
import axios from "axios";
|
|
import helper from "@/includes/helper";
|
|
import DropdownMenuPoint from "@/Shared/Form/DropdownMenuPoint";
|
|
import { MenuItem, MenuItems } from "@headlessui/vue";
|
|
import { MinusCircleIcon, ExclamationIcon } from "@heroicons/vue/solid";
|
|
import FeedPaidBlock from "@/Shared/FeedList/FeedPaidBlock";
|
|
import UserAvatar from "@/Shared/Misc/UserAvatar";
|
|
import LikeCount from "@/Shared/Misc/LikeCount";
|
|
import CommentCount from "@/Shared/Misc/CommentCount";
|
|
import ShareCount from "@/Shared/Misc/ShareCount";
|
|
import UserComment from "@/Shared/Partials/UserComment";
|
|
export default {
|
|
components: {
|
|
DropdownMenuPoint,
|
|
MenuItem,
|
|
MenuItems,
|
|
MinusCircleIcon,
|
|
ExclamationIcon,
|
|
UserAvatar,
|
|
LikeCount,
|
|
ShareCount,
|
|
CommentCount,
|
|
UserComment,
|
|
FeedPaidBlock,
|
|
},
|
|
props: {
|
|
user: Object,
|
|
entity: Object,
|
|
feed_id: Number,
|
|
},
|
|
emits: ["disableModal", "onRemoveFeed"],
|
|
data() {
|
|
return {
|
|
new_comment: null,
|
|
comments: [],
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
console.log(this.entity)
|
|
this.loadComments();
|
|
this.loadCountPostsUser();
|
|
},
|
|
unmounted() {
|
|
this.comments = [];
|
|
},
|
|
computed: {
|
|
countPosts() {
|
|
return helper.declNumPosts(this.user.count_posts);
|
|
},
|
|
},
|
|
methods: {
|
|
|
|
onReplaceFeed(data) {
|
|
this.entity.collection_medias = data.collection;
|
|
this.entity.preview = data.preview;
|
|
this.entity.paid_open = 1;
|
|
},
|
|
|
|
loadCountPostsUser() {
|
|
if (
|
|
typeof this.user.count_posts === "undefined" ||
|
|
parseInt(this.user.count_posts, 10) === 0
|
|
) {
|
|
axios.post(route("user.posts.count", this.user.id)).then(({ data }) => {
|
|
this.user.count_posts = data;
|
|
});
|
|
}
|
|
},
|
|
|
|
onRemoveFeed() {
|
|
this.$emit("onRemoveFeed", this.feed_id);
|
|
},
|
|
loadComments() {
|
|
this.$emit("disableModal", 1);
|
|
axios.post(route("feed.comments", this.feed_id)).then(({ data }) => {
|
|
for (const prop in data) {
|
|
this.comments.push(data[prop]);
|
|
}
|
|
this.$emit("disableModal", 0);
|
|
});
|
|
},
|
|
|
|
addComment() {
|
|
this.$emit("disableModal", 1);
|
|
axios
|
|
.post(route("feed.comments.add", this.feed_id), {
|
|
body: this.new_comment,
|
|
})
|
|
.then(({ data }) => {
|
|
this.comments.push(data);
|
|
this.entity.comments++;
|
|
this.$emit("disableModal", 0);
|
|
});
|
|
this.new_comment = null;
|
|
},
|
|
|
|
likeFeed() {
|
|
Inertia.post(
|
|
route("feed.like", this.feed_id),
|
|
{},
|
|
{
|
|
preserveScroll: true,
|
|
preserveState: true,
|
|
}
|
|
);
|
|
if (this.entity.liked) {
|
|
this.entity.liked = false;
|
|
this.entity.likes--;
|
|
} else {
|
|
this.entity.liked = true;
|
|
this.entity.likes++;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|