vue components refactoring

resources/js/components/Notifications/Components/Notification.vue

@@ -87,8 +87,8 @@
 </template>
 <script>
 import { RefreshCwIcon, TrendingUpIcon, GiftIcon, CheckIcon, XIcon, MailIcon, UserPlusIcon, UploadCloudIcon, ChevronRightIcon, AlertTriangleIcon } from 'vue-feather-icons'
-import MemberAvatar from '../FilesView/MemberAvatar'
-import {events} from "../../bus";
+import MemberAvatar from '../../UI/Others/MemberAvatar'
+import {events} from "../../../bus";
 
 export default {
     name: 'Notification',

resources/js/components/Notifications/Components/NotificationBell.vue

@@ -0,0 +1,25 @@
+<template>
+	<div class="relative button-icon inline-block cursor-pointer rounded-xl p-3">
+		<bell-icon size="18" class="vue-feather dark:text-gray-100 transition" :class="{'rotate-[30deg]': notificationCount}" />
+		<span v-if="notificationCount" class="absolute z-[9] right-1.5 bottom-1.5 flex items-center justify-center w-4 h-4 bg-theme text-white rounded-full text-xs font-bold">
+			{{ notificationCount }}
+		</span>
+		<span v-if="notificationCount" class="animate-ping absolute z-[8] right-1.5 bottom-1.5 flex items-center justify-center w-4 h-4 bg-theme text-white rounded-full text-xs font-bold"></span>
+	</div>
+</template>
+<script>
+import {mapGetters} from "vuex";
+import {BellIcon} from "vue-feather-icons"
+
+export default {
+	name: 'NotificationBell',
+	components: {
+		BellIcon,
+	},
+	computed: {
+		...mapGetters([
+			'notificationCount'
+		]),
+	}
+}
+</script>

resources/js/components/Notifications/NotificationCenter.vue

@@ -41,8 +41,8 @@
 </template>
 
 <script>
-import MobileActionButton from "../FilesView/MobileActionButton"
-import Notification from "./Notification"
+import MobileActionButton from "../UI/Buttons/MobileActionButton"
+import Notification from "./Components/Notification"
 import vClickOutside from 'v-click-outside'
 import {mapGetters} from "vuex";
 

resources/js/components/Notifications/NotificationsPopup.vue

@@ -0,0 +1,94 @@
+<template>
+    <PopupWrapper name="notifications-mobile">
+        <!--Title-->
+        <PopupHeader :title="$t('notifications')" icon="bell" />
+
+        <!--Content-->
+        <PopupContent v-if="readNotifications && unreadNotifications">
+			<MobileActionButton
+				v-if="readNotifications.length || unreadNotifications.length"
+				@click.native="$store.dispatch('deleteAllNotifications')"
+				icon="check-square"
+				class="mb-2 dark:!bg-4x-dark-foreground"
+			>
+				{{ $t('clear_all') }}
+			</MobileActionButton>
+
+			<p v-if="!readNotifications.length && !unreadNotifications.length" class="text-sm text-gray-500">
+				{{ $t("not_any_notifications") }}
+			</p>
+
+            <b
+                v-if="unreadNotifications.length"
+                class="dark-text-theme mt-1.5 mb-2.5 block px-2.5 text-xs text-gray-400"
+            >
+                {{ $t('unread') }}
+            </b>
+
+            <Notification
+                :notification="notification"
+                v-for="notification in unreadNotifications"
+                :key="notification.id"
+            />
+
+            <b v-if="readNotifications.length" class="dark-text-theme mt-2.5 mb-2.5 block px-2.5 text-xs text-gray-400">
+                {{ $t('read') }}
+            </b>
+
+            <Notification
+                :notification="notification"
+                v-for="notification in readNotifications"
+                :key="notification.id"
+            />
+        </PopupContent>
+
+        <!--Actions-->
+        <PopupActions>
+            <ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">
+                {{ $t('close') }}
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</template>
+
+<script>
+import MobileActionButton from '../UI/Buttons/MobileActionButton'
+import Notification from './Components/Notification'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import PopupWrapper from '../Popups/Components/PopupWrapper'
+import PopupActions from '../Popups/Components/PopupActions'
+import PopupContent from '../Popups/Components/PopupContent'
+import PopupHeader from '../Popups/Components/PopupHeader'
+import vClickOutside from 'v-click-outside'
+import { mapGetters } from 'vuex'
+
+export default {
+    name: 'NotificationsPopup',
+    components: {
+        MobileActionButton,
+        Notification,
+        PopupWrapper,
+        PopupActions,
+        PopupContent,
+        PopupHeader,
+        ButtonBase,
+    },
+    directives: {
+        clickOutside: vClickOutside.directive,
+    },
+    computed: {
+        ...mapGetters(['user', 'config']),
+        readNotifications() {
+            return this.user?.data.relationships.readNotifications.data
+        },
+        unreadNotifications() {
+            return this.user?.data.relationships.unreadNotifications.data
+        },
+    },
+    methods: {
+        clickOutside() {
+            if (this.isVisibleNotificationCenter) this.$store.commit('CLOSE_NOTIFICATION_CENTER')
+        },
+    },
+}
+</script>