feat: implement team selection event handling and UI updates in Teams and AppSidebar components

Author: Lasim

services/frontend/src/components/AppSidebar.vue

@@ -137,7 +137,11 @@ const fetchTeams = async (forceRefresh = false) => {
   } catch (error) { console.error('Error fetching teams:', error); teamsError.value = error instanceof Error ? error.message : 'Failed to load teams'; } finally { teamsLoading.value = false; }
 }
 
-const selectTeam = (team: Team) => { selectedTeam.value = team }
+const selectTeam = (team: Team) => {
+  selectedTeam.value = team
+  // Emit global event for team selection
+  eventBus.emit('team-selected', { teamId: team.id, teamName: team.name })
+}
 const navigateTo = (url: string) => { router.push(url) }
 const goToAccount = () => { router.push('/user/account') }
 const logout = async () => {
@@ -153,6 +157,16 @@ const logout = async () => {
 }
 const getUserInitials = (name: string) => { return name.split(' ').map(word => word.charAt(0)).join('').toUpperCase().slice(0, 2) }
 
+// Handle team selection from other components (like Teams page)
+const handleTeamSelectedFromOtherComponents = (data: { teamId: string; teamName: string }) => {
+  // Find the team in our teams list and update selectedTeam
+  const team = teams.value.find(t => t.id === data.teamId)
+  if (team) {
+    selectedTeam.value = team
+    console.log('Team selected from other component:', data.teamName)
+  }
+}
+
 onMounted(() => {
   fetchUserData()
   fetchTeams()
@@ -162,11 +176,15 @@ onMounted(() => {
     console.log('Teams updated event received, refreshing teams...')
     fetchTeams(true) // Force refresh to get latest data
   })
+
+  // Listen for team selection from other components
+  eventBus.on('team-selected', handleTeamSelectedFromOtherComponents)
 })
 
 onUnmounted(() => {
   // Clean up event listeners
   eventBus.off('teams-updated')
+  eventBus.off('team-selected', handleTeamSelectedFromOtherComponents)
 })
 </script>
 

services/frontend/src/composables/useEventBus.ts

@@ -5,6 +5,7 @@ export type EventBusEvents = {
   'teams-updated': void
   'team-created': void
   'team-deleted': void
+  'team-selected': { teamId: string; teamName: string }
 }
 
 export function useEventBus() {

services/frontend/src/views/Teams.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, onUnmounted, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import {
   FlexRender,
@@ -25,7 +25,7 @@ import { Button } from '@/components/ui/button'
 import { Plus } from 'lucide-vue-next'
 import DashboardLayout from '@/components/DashboardLayout.vue'
 import AddTeamModal from '@/components/teams/AddTeamModal.vue'
-import { TeamService, type TeamWithRole } from '@/services/teamService'
+import { TeamService, type TeamWithRole, type Team } from '@/services/teamService'
 import { UserService } from '@/services/userService'
 import { useEventBus } from '@/composables/useEventBus'
 import { createColumns } from './teams/columns'
@@ -51,11 +51,39 @@ const canCreateTeams = ref(false)
 const userPermissions = ref<string[]>([])
 const deleteSuccessMessage = ref<string | null>(null)
 
+// Team switching state
+const selectedTeam = ref<Team | null>(null)
+
 // Handle manage team navigation
 const handleManageTeam = (teamId: string) => {
   router.push(`/teams/manage/${teamId}`)
 }
 
+// Handle team switching
+const handleSwitchTeam = (teamId: string) => {
+  const team = teams.value.find(t => t.id === teamId)
+  if (team) {
+    selectedTeam.value = team
+    // Emit global event for team selection to update sidebar
+    eventBus.emit('team-selected', { teamId: team.id, teamName: team.name })
+    console.log('Switched to team:', team.name)
+  }
+}
+
+// Handle team selection from sidebar
+const handleTeamSelectedFromSidebar = (data: { teamId: string; teamName: string }) => {
+  // Find the team in our local teams list and update selectedTeam
+  const team = teams.value.find(t => t.id === data.teamId)
+  if (team) {
+    selectedTeam.value = team
+    console.log('Team selected from sidebar:', data.teamName)
+  } else {
+    // If team not found in current list, create a basic team object
+    selectedTeam.value = { id: data.teamId, name: data.teamName } as Team
+    console.log('Team selected from sidebar (not in current list):', data.teamName)
+  }
+}
+
 // Check user permissions
 const checkPermissions = async () => {
   try {
@@ -72,7 +100,24 @@ const checkPermissions = async () => {
 }
 
 // Create columns with permissions
-const columns = computed(() => createColumns(handleManageTeam, userPermissions.value))
+const columns = computed(() => createColumns(
+  handleManageTeam,
+  handleSwitchTeam,
+  selectedTeam.value?.id || null,
+  userPermissions.value
+))
+
+// Initialize selected team from sidebar teams
+const initializeSelectedTeam = async () => {
+  try {
+    const userTeams = await TeamService.getUserTeams()
+    if (userTeams.length > 0) {
+      selectedTeam.value = userTeams[0] // Default to first team
+    }
+  } catch (error) {
+    console.error('Error initializing selected team:', error)
+  }
+}
 
 // Fetch teams from API
 const fetchTeams = async (): Promise<void> => {
@@ -118,8 +163,24 @@ onMounted(async () => {
 
   await Promise.all([
     checkPermissions(),
-    fetchTeams()
+    fetchTeams(),
+    initializeSelectedTeam()
   ])
+
+  // Listen for team selection events from sidebar
+  eventBus.on('team-selected', handleTeamSelectedFromSidebar)
+
+  // 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 to prevent memory leaks
+  eventBus.off('team-selected', handleTeamSelectedFromSidebar)
+  eventBus.off('teams-updated')
 })
 
 // Create table instance

services/frontend/src/views/teams/columns.ts

@@ -1,11 +1,13 @@
 import type { ColumnDef } from '@tanstack/vue-table'
 import { h } from 'vue'
 import { Button } from '@/components/ui/button'
-import { Settings } from 'lucide-vue-next'
+import { Settings, ArrowRightLeft } from 'lucide-vue-next'
 import type { TeamWithRole } from '@/services/teamService'
 
 export const createColumns = (
   onManageTeam: (teamId: string) => void,
+  onSwitchTeam: (teamId: string) => void,
+  selectedTeamId: string | null,
   userPermissions: string[] = []
 ): ColumnDef<TeamWithRole>[] => [
   {
@@ -52,6 +54,32 @@ export const createColumns = (
       )
     },
   },
+  {
+    id: 'switch',
+    header: 'Switch Team',
+    enableHiding: false,
+    cell: ({ row }) => {
+      const team = row.original
+      const isSelected = selectedTeamId === team.id
+
+      return h('div', { class: 'flex justify-start' }, [
+        h(Button, {
+          variant: isSelected ? 'default' : 'outline',
+          size: 'sm',
+          class: 'h-8 px-3',
+          disabled: isSelected,
+          onClick: () => {
+            if (!isSelected) {
+              onSwitchTeam(team.id)
+            }
+          }
+        }, () => [
+          h(ArrowRightLeft, { class: 'h-4 w-4 mr-1' }),
+          isSelected ? 'Selected' : 'Switch'
+        ])
+      ])
+    },
+  },
   {
     id: 'actions',
     header: 'Actions',