File size: 4,109 Bytes
e3278e4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
import React, { useState, useEffect } from 'react';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeaderCell,
TableRow,
Card,
Button,
Text,
Badge,
} from "@tremor/react";
import { message } from 'antd';
import { availableTeamListCall, teamMemberAddCall } from "../networking";
interface AvailableTeam {
team_id: string;
team_alias: string;
description?: string;
models: string[];
members_with_roles: {user_id?: string, user_email?: string, role: string}[];
}
interface AvailableTeamsProps {
accessToken: string | null;
userID: string | null;
}
const AvailableTeamsPanel: React.FC<AvailableTeamsProps> = ({
accessToken,
userID,
}) => {
const [availableTeams, setAvailableTeams] = useState<AvailableTeam[]>([]);
useEffect(() => {
const fetchAvailableTeams = async () => {
if (!accessToken || !userID) return;
try {
const response = await availableTeamListCall(accessToken);
setAvailableTeams(response);
} catch (error) {
console.error('Error fetching available teams:', error);
}
};
fetchAvailableTeams();
}, [accessToken, userID]);
const handleJoinTeam = async (teamId: string) => {
if (!accessToken || !userID) return;
try {
const response = await teamMemberAddCall(accessToken, teamId, {
"user_id": userID,
"role": "user"
}
);
message.success('Successfully joined team');
// Update available teams list
setAvailableTeams(teams => teams.filter(team => team.team_id !== teamId));
} catch (error) {
console.error('Error joining team:', error);
message.error('Failed to join team');
}
};
return (
<Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[50vh]">
<Table>
<TableHead>
<TableRow>
<TableHeaderCell>Team Name</TableHeaderCell>
<TableHeaderCell>Description</TableHeaderCell>
<TableHeaderCell>Members</TableHeaderCell>
<TableHeaderCell>Models</TableHeaderCell>
<TableHeaderCell>Actions</TableHeaderCell>
</TableRow>
</TableHead>
<TableBody>
{availableTeams.map((team) => (
<TableRow key={team.team_id}>
<TableCell>
<Text>{team.team_alias}</Text>
</TableCell>
<TableCell>
<Text>{team.description || 'No description available'}</Text>
</TableCell>
<TableCell>
<Text>{team.members_with_roles.length} members</Text>
</TableCell>
<TableCell>
<div className="flex flex-col">
{!team.models || team.models.length === 0 ? (
<Badge size="xs" color="red">
<Text>All Proxy Models</Text>
</Badge>
) : (
team.models.map((model, index) => (
<Badge
key={index}
size="xs"
className="mb-1"
color="blue"
>
<Text>
{model.length > 30 ? `${model.slice(0, 30)}...` : model}
</Text>
</Badge>
))
)}
</div>
</TableCell>
<TableCell>
<Button
size="xs"
variant="secondary"
onClick={() => handleJoinTeam(team.team_id)}
>
Join Team
</Button>
</TableCell>
</TableRow>
))}
{availableTeams.length === 0 && (
<TableRow>
<TableCell colSpan={5} className="text-center">
<Text>No available teams to join</Text>
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</Card>
);
};
export default AvailableTeamsPanel; |