106 lines
3.4 KiB
Vue
Executable File
106 lines
3.4 KiB
Vue
Executable File
<template>
|
|
<meta-head title="Оповещения"></meta-head>
|
|
|
|
<modal-feed
|
|
:modal-feed="modalFeed"
|
|
:is_exist_menu="false"
|
|
:open="show"
|
|
@close-modal="closeModal"
|
|
/>
|
|
|
|
<div class="xl:container xl:mx-auto px-2 md:px-3">
|
|
<div class="mt-16 shadow-classic rounded-md bg-indigo-200">
|
|
<div class="flex flex-col md:grid grid-cols-6 lg:grid-cols-5">
|
|
<settings-menu />
|
|
|
|
<div class="col-span-4">
|
|
<div v-if="notifications.length" data-simplebar
|
|
class="max-h-[500px] overflow-auto my-4 lg:my-8"
|
|
>
|
|
<div class="divide-y divide-indigo-300">
|
|
<div v-for="notification in notifications" :key="notification.id"
|
|
class="py-4 px-4 2xl:px-28 lg:items-center flex flex-col lg:grid gap-2 lg:gap-5 grid-cols-12 md:space-x-4"
|
|
>
|
|
<div class="col-span-4 flex items-center">
|
|
<inertia-link :href="route('profile.user', notification.user.username)" class="flex-shrink-0 block mr-5">
|
|
<user-avatar :user="notification.user" size="small"
|
|
class="w-14 h-14 md:w-20 md:h-20 text-xl"
|
|
/>
|
|
</inertia-link>
|
|
<inertia-link :href="route('profile.user', notification.user.username)" class="flex flex-col">
|
|
<p class="truncate text-base lg:text-lg font-semibold text-orange">
|
|
{{ notification.user.name }}
|
|
</p>
|
|
<p class="truncate lg:mt-1 text-base text-gray-light">
|
|
{{ notification.created_at }}
|
|
</p>
|
|
</inertia-link>
|
|
</div>
|
|
<div class="col-span-6 text-white xl:text-xl">
|
|
<notify-text
|
|
:type="notification.type"
|
|
:content="notification.data"
|
|
/>
|
|
</div>
|
|
<div v-if="notification.feed" class="col-span-2 flex lg:justify-end">
|
|
<feed-preview class="w-20 h-20 object-cover cursor-pointer"
|
|
:type="notification.feed.type"
|
|
:source="notification.feed.entity.preview"
|
|
@click="openModal(notification.feed)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="m-4 lg:m-8 text-lg text-gray-light">
|
|
Оповещений нет
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Layout from '@/Shared/Layout.vue'
|
|
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu.vue'
|
|
import MetaHead from '@/Shared/MetaHead.vue'
|
|
import ModalFeed from '@/Shared/Overlay/ModalFeed.vue'
|
|
import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
|
|
import FeedPreview from '@/Shared/Feed/FeedPreview.vue'
|
|
import NotifyText from '@/Shared/Notification/NotifyText.vue'
|
|
|
|
export default {
|
|
components: {
|
|
MetaHead,
|
|
SettingsMenu,
|
|
ModalFeed,
|
|
UserAvatar,
|
|
FeedPreview,
|
|
NotifyText,
|
|
},
|
|
layout: Layout,
|
|
|
|
props: {
|
|
notifications: Array,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
show: false,
|
|
modalFeed: {},
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
openModal(feed) {
|
|
this.show = true
|
|
this.modalFeed = feed
|
|
},
|
|
closeModal() {
|
|
this.show = false
|
|
},
|
|
},
|
|
}
|
|
</script>
|