feat(event-bus): implement event bus for team updates and manage event emissions

Author: Lasim

package-lock.json

@@ -21,6 +21,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-vue-next": "^0.511.0",
+    "mitt": "^3.0.1",
     "pinia": "^3.0.3",
     "reka-ui": "^2.3.1",
     "tailwind-merge": "^3.3.0",

services/frontend/package.json

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, onUnmounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 // import { cn } from '@/lib/utils' // cn might not be needed for root if $attrs.class is used directly
@@ -30,6 +30,7 @@ import {
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { TeamService, type Team } from '@/services/teamService'
 import { UserService, type User } from '@/services/userService'
+import { useEventBus } from '@/composables/useEventBus'
 import {
   Server,
   LayoutDashboard,
@@ -52,6 +53,7 @@ const props = defineProps<Props>()
 
 const router = useRouter()
 const { t } = useI18n()
+const eventBus = useEventBus()
 
 // User data
 const currentUser = ref<User | null>(null)
@@ -154,6 +156,17 @@ const getUserInitials = (name: string) => { return name.split(' ').map(word => w
 onMounted(() => {
   fetchUserData()
   fetchTeams()
+
+  // Listen for team updates from other components
+  eventBus.on('teams-updated', () => {
+    console.log('Teams updated event received, refreshing teams...')
+    fetchTeams(true) // Force refresh to get latest data
+  })
+})
+
+onUnmounted(() => {
+  // Clean up event listeners
+  eventBus.off('teams-updated')
 })
 </script>
 

services/frontend/src/components/AppSidebar.vue

@@ -14,6 +14,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { TeamService, CreateTeamSchema, type CreateTeamInput } from '@/services/teamService'
+import { useEventBus } from '@/composables/useEventBus'
 
 interface Props {
   open: boolean
@@ -27,6 +28,7 @@ interface Emits {
 const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 const { t } = useI18n()
+const eventBus = useEventBus()
 
 // Form state
 const formData = ref<CreateTeamInput>({
@@ -77,6 +79,9 @@ const handleSubmit = async () => {
   try {
     await TeamService.createTeam(formData.value)
 
+    // Emit global event for immediate UI updates across components
+    eventBus.emit('teams-updated')
+
     // Reset form
     formData.value = { name: '', description: '' }
     errors.value = {}

services/frontend/src/components/teams/AddTeamModal.vue

@@ -0,0 +1,16 @@
+import { inject } from 'vue'
+import type { Emitter } from 'mitt'
+
+export type EventBusEvents = {
+  'teams-updated': void
+  'team-created': void
+  'team-deleted': void
+}
+
+export function useEventBus() {
+  const emitter = inject<Emitter<EventBusEvents>>('emitter')
+  if (!emitter) {
+    throw new Error('Event bus not provided. Make sure to provide the emitter in main.ts')
+  }
+  return emitter
+}

services/frontend/src/composables/useEventBus.ts

@@ -2,6 +2,7 @@ import './assets/index.css'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import mitt from 'mitt'
 
 import App from './App.vue'
 import router from './router'
@@ -10,10 +11,14 @@ import i18n from './i18n'
 import { PluginManager } from './plugin-system/plugin-manager'
 import { loadPlugins } from './plugins'
 import ExtensionPoint from './components/ExtensionPoint.vue'
+import type { EventBusEvents } from './composables/useEventBus'
 
 const app = createApp(App)
 const pinia = createPinia()
 
+// Create event bus
+const emitter = mitt<EventBusEvents>()
+
 // Register global components
 app.component('ExtensionPoint', ExtensionPoint)
 
@@ -30,8 +35,9 @@ app.use(pinia)
 app.use(router)
 app.use(i18n)
 
-// Make plugin manager available globally in the app
+// Provide global services
 app.provide('pluginManager', pluginManager)
+app.provide('emitter', emitter)
 
 // Initialize application with plugins
 async function initializeApplication() {

services/frontend/src/main.ts

@@ -27,6 +27,7 @@ import DashboardLayout from '@/components/DashboardLayout.vue'
 import AddTeamModal from '@/components/teams/AddTeamModal.vue'
 import { TeamService, type TeamWithRole } from '@/services/teamService'
 import { UserService } from '@/services/userService'
+import { useEventBus } from '@/composables/useEventBus'
 import { createColumns } from './teams/columns'
 import { useRouter, useRoute } from 'vue-router'
 import { Alert, AlertDescription } from '@/components/ui/alert'
@@ -35,6 +36,7 @@ import { CheckCircle } from 'lucide-vue-next'
 const { t } = useI18n()
 const router = useRouter()
 const route = useRoute()
+const eventBus = useEventBus()
 
 // State
 const teams = ref<TeamWithRole[]>([])
@@ -89,8 +91,8 @@ const fetchTeams = async (): Promise<void> => {
 // Handle team creation success
 const handleTeamCreated = async () => {
   await fetchTeams()
-  // Also refresh the sidebar teams
-  await TeamService.getUserTeams(true)
+  // Emit global event to update sidebar and other components
+  eventBus.emit('teams-updated')
 }
 
 // Check for delete success message from query params

services/frontend/src/views/Teams.vue

@@ -8,7 +8,6 @@ import { Label } from '@/components/ui/label'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Badge } from '@/components/ui/badge'
-import { Separator } from '@/components/ui/separator'
 import { ArrowLeft, Save, Trash2, AlertTriangle, Lock } from 'lucide-vue-next'
 import DashboardLayout from '@/components/DashboardLayout.vue'
 import { TeamService, type Team } from '@/services/teamService'
@@ -39,6 +38,7 @@ const saveError = ref<string | null>(null)
 const saveSuccess = ref(false)
 const showDeleteDialog = ref(false)
 const userPermissions = ref<string[]>([])
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 const currentUser = ref<any>(null)
 
 // Form data