team invitation notification with broadcasting

resources/js/components/Notifications/Notification.vue

@@ -23,7 +23,7 @@
                 {{ notification.data.attributes.description }}
             </p>
 
-            <div class="mb-4 flex items-center">
+            <div class="flex items-center">
                 <!--<MemberAvatar class="mr-2" :size="22" :is-border="false" :member="user" />-->
                 <time class="block text-xs text-gray-400 dark:text-gray-400">
                     {{ notification.data.attributes.created_at }}
@@ -31,8 +31,9 @@
             </div>
 
             <!--Accept or decline team invitation-->
-            <div v-if="notification.data.attributes.type === 'team-invitation'" class="flex items-center space-x-3">
+            <div v-if="action && action.type === 'invitation'" class="flex items-center space-x-3 mt-4">
                 <div
+					@click="acceptAction"
                     class="flex cursor-pointer items-center rounded-xl py-1.5 px-2 transition-colors hover:bg-green-100 dark:hover:bg-green-900"
                 >
                     <check-icon size="16" class="vue-feather mr-2 text-green-600 dark:text-green-600" />
@@ -42,6 +43,7 @@
                 </div>
 
                 <div
+					@click="declineAction"
                     class="flex cursor-pointer items-center rounded-xl py-1.5 px-2 transition-colors hover:bg-rose-100 dark:hover:bg-rose-900"
                 >
                     <x-icon size="16" class="vue-feather mr-2 text-rose-600 dark:text-rose-600" />
@@ -69,6 +71,7 @@
 <script>
 import { CheckIcon, XIcon, MailIcon, UserPlusIcon, UploadCloudIcon, ChevronRightIcon } from 'vue-feather-icons'
 import MemberAvatar from '../FilesView/MemberAvatar'
+import {events} from "../../bus";
 
 export default {
     name: 'Notification',
@@ -93,6 +96,28 @@ export default {
 		}
 	},
     methods: {
+		acceptAction() {
+			axios.put(`/api/teams/invitations/${this.notification.data.attributes.action.params.id}`)
+				.then(() => {
+					this.$store.commit('CLEAR_NOTIFICATION_ACTION_DATA', this.notification.data.id)
+
+					events.$emit('toaster', {
+						type: 'success',
+						message: this.$t('You successfully accepted invitation'),
+					})
+				})
+		},
+		declineAction() {
+			axios.delete(`/api/teams/invitations/${this.notification.data.attributes.action.params.id}`)
+				.then(() => {
+					this.$store.commit('CLEAR_NOTIFICATION_ACTION_DATA', this.notification.data.id)
+
+					events.$emit('toaster', {
+						type: 'success',
+						message: this.$t('You successfully decline invitation'),
+					})
+				})
+		},
         closeCenter() {
             this.$store.commit('TOGGLE_NOTIFICATION_CENTER')
         },

resources/js/components/Notifications/NotificationCenter.vue

@@ -72,47 +72,6 @@ export default {
 			return this.user.data.relationships.unreadNotifications.data
 		}
 	},
-	data() {
-		return {
-			laterNotifications: [
-				{
-					id: 1,
-					seen: 1,
-					type: 'remote-upload-done',
-					title: 'Remote Upload Finished',
-					description: 'Your remote uploads has been done.',
-					time: '09. Mar. 2022, 08:27',
-					action: {
-						id: '12-abc'
-					}
-				},
-			],
-			todayNotifications: [
-				{
-					id: 2,
-					seen: 0,
-					type: 'team-invitation',
-					title: 'New Team Invitation',
-					description: 'Jane Doe invite you to join into “Work Documents” Team Folder.',
-					time: '09. Mar. 2022, 08:27',
-					action: {
-						id: '12-abc'
-					}
-				},
-				{
-					id: 3,
-					seen: 0,
-					type: 'file-request',
-					title: 'File Request Filled',
-					description: 'Your file request for “Videohive” folder was filled successfully.',
-					time: '09. Mar. 2022, 07:12',
-					action: {
-						id: '12-abc'
-					}
-				},
-			]
-		}
-	},
 	methods: {
 		deleteAllNotifications() {
 			axios.delete('/api/user/notifications')

resources/js/store/modules/userAuth.js

@@ -180,6 +180,23 @@ const mutations = {
         state.user.data.relationships.readNotifications.data = []
         state.user.data.relationships.unreadNotifications.data = []
     },
+    CLEAR_NOTIFICATION_ACTION_DATA(state, notificationId) {
+        if (state.user.data.relationships.readNotifications.data.length) {
+            state.user.data.relationships.readNotifications.data.map(notification => {
+                if (notification.data.id === notificationId) {
+                    notification.data.attributes.action = undefined
+                }
+            })
+        }
+
+        if (state.user.data.relationships.unreadNotifications.data.length) {
+            state.user.data.relationships.unreadNotifications.data.map(notification => {
+                if (notification.data.id === notificationId) {
+                    notification.data.attributes.action = undefined
+                }
+            })
+        }
+    },
 }
 
 const getters = {