345 lines
11 KiB
TypeScript
345 lines
11 KiB
TypeScript
"use client";
|
||
|
||
import * as React from 'react';
|
||
import { useEffect, useState, useRef } from 'react';
|
||
import type { Database } from '@/types/supabase';
|
||
import { getSupabaseClient } from '../../utils/supabase';
|
||
import { AuthChangeEvent, Session } from '@supabase/supabase-js';
|
||
import { Loader2, X, Check } from 'lucide-react';
|
||
import { cn } from '@/lib/utils';
|
||
import { limqRequest } from '@/lib/api';
|
||
|
||
type Team = Database['limq']['Tables']['teams']['Row'];
|
||
|
||
// TeamSelector component with multi-select support
|
||
export function TeamSelector({
|
||
value,
|
||
onChange,
|
||
className,
|
||
multiple = false,
|
||
}: {
|
||
value?: string | string[];
|
||
onChange?: (teamId: string | string[]) => void;
|
||
className?: string;
|
||
multiple?: boolean;
|
||
}) {
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [teams, setTeams] = useState<Team[]>([]);
|
||
const [selectedIds, setSelectedIds] = useState<string[]>([]);
|
||
const [isOpen, setIsOpen] = useState(false);
|
||
const selectorRef = useRef<HTMLDivElement>(null);
|
||
|
||
// Initialize selected teams based on value prop
|
||
useEffect(() => {
|
||
if (value) {
|
||
if (Array.isArray(value)) {
|
||
setSelectedIds(value);
|
||
} else {
|
||
setSelectedIds(value ? [value] : []);
|
||
}
|
||
} else {
|
||
setSelectedIds([]);
|
||
}
|
||
}, [value]);
|
||
|
||
// Add click outside listener to close dropdown
|
||
useEffect(() => {
|
||
function handleClickOutside(event: MouseEvent) {
|
||
if (selectorRef.current && !selectorRef.current.contains(event.target as Node)) {
|
||
setIsOpen(false);
|
||
}
|
||
}
|
||
|
||
// Only add the event listener if the dropdown is open
|
||
if (isOpen) {
|
||
document.addEventListener('mousedown', handleClickOutside);
|
||
return () => {
|
||
document.removeEventListener('mousedown', handleClickOutside);
|
||
};
|
||
}
|
||
}, [isOpen]);
|
||
|
||
useEffect(() => {
|
||
let isMounted = true;
|
||
|
||
const fetchTeams = async (userId: string) => {
|
||
if (!isMounted) return;
|
||
setLoading(true);
|
||
setError(null);
|
||
|
||
console.log(`开始获取团队数据，用户ID: ${userId}`);
|
||
|
||
try {
|
||
const supabase = getSupabaseClient();
|
||
console.log('Supabase客户端已创建，准备获取团队数据');
|
||
|
||
// 先尝试直接获取团队数据，不等待create-default
|
||
try {
|
||
const { data: memberships, error: membershipError } = await supabase
|
||
.from('team_membership')
|
||
.select('team_id')
|
||
.eq('user_id', userId);
|
||
|
||
console.log(`团队成员关系查询结果:`, memberships ? `找到${memberships.length}个` : '无数据', membershipError ? `错误: ${membershipError.message}` : '无错误');
|
||
|
||
if (membershipError) throw membershipError;
|
||
|
||
if (!memberships || memberships.length === 0) {
|
||
console.log('未找到团队成员关系，尝试创建默认团队');
|
||
|
||
// 尝试创建默认团队和项目（如果用户还没有）
|
||
try {
|
||
const response = await limqRequest('team/create-default', 'POST');
|
||
console.log('默认团队创建成功:', response);
|
||
|
||
// 创建默认团队后重新获取团队列表
|
||
const { data: refreshedMemberships, error: refreshError } = await supabase
|
||
.from('team_membership')
|
||
.select('team_id')
|
||
.eq('user_id', userId);
|
||
|
||
console.log(`刷新后的团队成员关系:`, refreshedMemberships ? `找到${refreshedMemberships.length}个` : '无数据');
|
||
|
||
if (refreshError) throw refreshError;
|
||
|
||
if (!refreshedMemberships || refreshedMemberships.length === 0) {
|
||
if (isMounted) {
|
||
console.log('创建默认团队后仍未找到团队，设置空团队列表');
|
||
setTeams([]);
|
||
}
|
||
return;
|
||
}
|
||
|
||
const teamIds = refreshedMemberships.map(m => m.team_id);
|
||
console.log('获取到团队IDs:', teamIds);
|
||
|
||
const { data: teamsData, error: teamsError } = await supabase
|
||
.from('teams')
|
||
.select('*')
|
||
.in('id', teamIds)
|
||
.is('deleted_at', null);
|
||
|
||
console.log(`团队数据查询结果:`, teamsData ? `找到${teamsData.length}个` : '无数据');
|
||
|
||
if (teamsError) throw teamsError;
|
||
|
||
if (isMounted && teamsData) {
|
||
setTeams(teamsData);
|
||
}
|
||
return;
|
||
} catch (teamError) {
|
||
console.error('创建默认团队失败:', teamError);
|
||
// 创建失败也继续，返回空列表
|
||
if (isMounted) setTeams([]);
|
||
return;
|
||
}
|
||
}
|
||
|
||
const teamIds = memberships.map(m => m.team_id);
|
||
console.log('获取到团队IDs:', teamIds);
|
||
|
||
const { data: teamsData, error: teamsError } = await supabase
|
||
.from('teams')
|
||
.select('*')
|
||
.in('id', teamIds)
|
||
.is('deleted_at', null);
|
||
|
||
console.log(`团队数据查询结果:`, teamsData ? `找到${teamsData.length}个` : '无数据');
|
||
|
||
if (teamsError) throw teamsError;
|
||
|
||
if (isMounted && teamsData) {
|
||
setTeams(teamsData);
|
||
}
|
||
} catch (dataError) {
|
||
console.error('获取团队数据失败:', dataError);
|
||
throw dataError;
|
||
}
|
||
} catch (err) {
|
||
console.error('获取团队数据出错:', err);
|
||
if (isMounted) {
|
||
setError(err instanceof Error ? err.message : '获取团队数据失败');
|
||
}
|
||
} finally {
|
||
if (isMounted) {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
};
|
||
|
||
// 获取Supabase客户端实例并订阅认证状态变化
|
||
try {
|
||
const supabase = getSupabaseClient();
|
||
console.log('注册认证状态变化监听器');
|
||
|
||
const { data: { subscription } } = supabase.auth.onAuthStateChange((event: AuthChangeEvent, session: Session | null) => {
|
||
console.log(`认证状态变化: ${event}`, session ? `用户ID: ${session.user.id}` : '无会话');
|
||
if (event === 'SIGNED_IN' && session?.user?.id) {
|
||
fetchTeams(session.user.id);
|
||
} else if (event === 'SIGNED_OUT') {
|
||
setTeams([]);
|
||
setError(null);
|
||
}
|
||
});
|
||
|
||
// 初始化时获取当前会话
|
||
console.log('获取当前会话状态');
|
||
supabase.auth.getSession().then(({ data: { session } }) => {
|
||
console.log('当前会话状态:', session ? `用户已登录，ID: ${session.user.id}` : '用户未登录');
|
||
if (session?.user?.id) {
|
||
fetchTeams(session.user.id);
|
||
} else {
|
||
// 如果没有会话但组件需要初始化，可以设置加载完成
|
||
setLoading(false);
|
||
}
|
||
}).catch(err => {
|
||
console.error('获取会话状态失败:', err);
|
||
// 确保即使获取会话失败也停止加载状态
|
||
setLoading(false);
|
||
});
|
||
|
||
return () => {
|
||
console.log('TeamSelector组件卸载，清理订阅');
|
||
isMounted = false;
|
||
subscription.unsubscribe();
|
||
};
|
||
} catch (initError) {
|
||
console.error('初始化TeamSelector出错:', initError);
|
||
// 确保在初始化出错时也停止加载状态
|
||
setLoading(false);
|
||
setError('初始化失败，请刷新页面重试');
|
||
return () => {
|
||
isMounted = false;
|
||
};
|
||
}
|
||
}, []);
|
||
|
||
const handleToggle = () => {
|
||
if (!loading && !error && teams.length > 0) {
|
||
setIsOpen(!isOpen);
|
||
}
|
||
};
|
||
|
||
const handleTeamSelect = (teamId: string) => {
|
||
let newSelected: string[];
|
||
|
||
if (multiple) {
|
||
// For multi-select: toggle team in/out of selection
|
||
if (selectedIds.includes(teamId)) {
|
||
newSelected = selectedIds.filter(id => id !== teamId);
|
||
} else {
|
||
newSelected = [...selectedIds, teamId];
|
||
}
|
||
} else {
|
||
// For single-select: replace selection with the new team
|
||
newSelected = [teamId];
|
||
setIsOpen(false);
|
||
}
|
||
|
||
setSelectedIds(newSelected);
|
||
|
||
if (onChange) {
|
||
onChange(multiple ? newSelected : newSelected[0] || '');
|
||
}
|
||
};
|
||
|
||
const removeTeam = (e: React.MouseEvent, teamId: string) => {
|
||
e.stopPropagation();
|
||
const newSelected = selectedIds.filter(id => id !== teamId);
|
||
setSelectedIds(newSelected);
|
||
if (onChange) {
|
||
onChange(multiple ? newSelected : newSelected[0] || '');
|
||
}
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className={cn(
|
||
"flex w-full items-center justify-between rounded-md border px-3 py-2",
|
||
className
|
||
)}>
|
||
<Loader2 className="h-4 w-4 animate-spin" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<div className={cn(
|
||
"flex w-full items-center rounded-md border border-destructive bg-destructive/10 px-3 py-2 text-destructive",
|
||
className
|
||
)}>
|
||
{error}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (teams.length === 0) {
|
||
return (
|
||
<div className={cn(
|
||
"flex w-full items-center rounded-md border px-3 py-2 text-muted-foreground",
|
||
className
|
||
)}>
|
||
No teams available
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const selectedTeams = teams.filter(team => selectedIds.includes(team.id));
|
||
|
||
return (
|
||
<div className="relative" ref={selectorRef}>
|
||
<div
|
||
className={cn(
|
||
"flex w-full min-h-10 items-center flex-wrap rounded-md border p-1 cursor-pointer",
|
||
isOpen && "ring-2 ring-offset-2 ring-blue-500",
|
||
className
|
||
)}
|
||
onClick={handleToggle}
|
||
>
|
||
{selectedTeams.length > 0 ? (
|
||
<div className="flex flex-wrap gap-1">
|
||
{selectedTeams.map(team => (
|
||
<div
|
||
key={team.id}
|
||
className="flex items-center gap-1 bg-blue-100 text-blue-800 rounded-md px-2 py-1 text-sm"
|
||
>
|
||
{team.name}
|
||
{multiple && (
|
||
<X
|
||
size={14}
|
||
className="cursor-pointer hover:text-blue-900"
|
||
onClick={(e) => removeTeam(e, team.id)}
|
||
/>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="px-2 py-1 text-gray-500">Select a team</div>
|
||
)}
|
||
</div>
|
||
|
||
{isOpen && (
|
||
<div className="absolute w-full mt-1 max-h-60 overflow-auto rounded-md border bg-white shadow-lg z-10">
|
||
{teams.map(team => (
|
||
<div
|
||
key={team.id}
|
||
className={cn(
|
||
"px-3 py-2 cursor-pointer hover:bg-gray-100 flex items-center justify-between",
|
||
selectedIds.includes(team.id) && "bg-blue-50"
|
||
)}
|
||
onClick={() => handleTeamSelect(team.id)}
|
||
>
|
||
<span>{team.name}</span>
|
||
{selectedIds.includes(team.id) && (
|
||
<Check className="h-4 w-4 text-blue-600" />
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|