backup
This commit is contained in:
beabigegg
637
frontend/src/components/layout/Sidebar.tsx
Normal file
637
frontend/src/components/layout/Sidebar.tsx
Normal file
@@ -0,0 +1,637 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useRouter, usePathname } from 'next/navigation';
|
||||
import {
|
||||
Box,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemButton,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
Typography,
|
||||
IconButton,
|
||||
Tooltip,
|
||||
Divider,
|
||||
Badge,
|
||||
Chip,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Dashboard,
|
||||
Assignment,
|
||||
CalendarToday,
|
||||
People,
|
||||
Star,
|
||||
CheckCircle,
|
||||
Schedule,
|
||||
Block,
|
||||
FiberNew,
|
||||
ExpandLess,
|
||||
ExpandMore,
|
||||
Language as Public,
|
||||
ChevronLeft,
|
||||
} from '@mui/icons-material';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useTheme } from '@/providers/ThemeProvider';
|
||||
import { todosApi } from '@/lib/api';
|
||||
import { Todo } from '@/types';
|
||||
|
||||
interface SidebarProps {
|
||||
collapsed: boolean;
|
||||
onToggleCollapse: () => void;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
interface NavItem {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: React.ReactNode;
|
||||
path: string;
|
||||
badge?: number;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
interface NavGroup {
|
||||
id: string;
|
||||
label: string;
|
||||
items: NavItem[];
|
||||
expanded?: boolean;
|
||||
}
|
||||
|
||||
const Sidebar: React.FC<SidebarProps> = ({ collapsed, onToggleCollapse, onClose }) => {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const { actualTheme } = useTheme();
|
||||
const [expandedGroups, setExpandedGroups] = React.useState<Record<string, boolean>>({
|
||||
views: true,
|
||||
status: true,
|
||||
});
|
||||
const [todos, setTodos] = useState<Todo[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// 獲取待辦事項數據
|
||||
useEffect(() => {
|
||||
const fetchTodos = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
const token = localStorage.getItem('access_token');
|
||||
if (!token) {
|
||||
setTodos([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await todosApi.getTodos({ view: 'dashboard' });
|
||||
setTodos(response.todos || []);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch todos for sidebar:', error);
|
||||
setTodos([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchTodos();
|
||||
}, []);
|
||||
|
||||
// 獲取當前用戶信息
|
||||
const getCurrentUser = () => {
|
||||
try {
|
||||
const userStr = localStorage.getItem('user');
|
||||
if (userStr) {
|
||||
const user = JSON.parse(userStr);
|
||||
return {
|
||||
ad_account: user.ad_account,
|
||||
email: user.email
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to parse user from localStorage:', error);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// 計算各種統計數字
|
||||
const getStatistics = () => {
|
||||
if (loading || !todos.length) {
|
||||
return {
|
||||
total: 0,
|
||||
created: 0,
|
||||
assigned: 0,
|
||||
following: 0,
|
||||
new: 0,
|
||||
doing: 0,
|
||||
blocked: 0,
|
||||
done: 0,
|
||||
starred: 0
|
||||
};
|
||||
}
|
||||
|
||||
const currentUser = getCurrentUser();
|
||||
if (!currentUser) {
|
||||
return {
|
||||
total: todos.length,
|
||||
created: 0,
|
||||
assigned: 0,
|
||||
following: 0,
|
||||
new: todos.filter(todo => todo.status === 'NEW').length,
|
||||
doing: todos.filter(todo => todo.status === 'DOING').length,
|
||||
blocked: todos.filter(todo => todo.status === 'BLOCKED').length,
|
||||
done: todos.filter(todo => todo.status === 'DONE').length,
|
||||
starred: todos.filter(todo => todo.starred).length
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
total: todos.length,
|
||||
created: todos.filter(todo =>
|
||||
todo.creator_ad === currentUser.ad_account ||
|
||||
todo.creator_email === currentUser.email
|
||||
).length,
|
||||
assigned: todos.filter(todo =>
|
||||
todo.responsible_users?.includes(currentUser.ad_account) ||
|
||||
todo.responsible_users?.includes(currentUser.email)
|
||||
).length,
|
||||
following: todos.filter(todo =>
|
||||
todo.followers?.includes(currentUser.ad_account) ||
|
||||
todo.followers?.includes(currentUser.email)
|
||||
).length,
|
||||
new: todos.filter(todo => todo.status === 'NEW').length,
|
||||
doing: todos.filter(todo => todo.status === 'DOING').length,
|
||||
blocked: todos.filter(todo => todo.status === 'BLOCKED').length,
|
||||
done: todos.filter(todo => todo.status === 'DONE').length,
|
||||
starred: todos.filter(todo => todo.starred).length
|
||||
};
|
||||
};
|
||||
|
||||
const stats = getStatistics();
|
||||
|
||||
const navGroups: NavGroup[] = [
|
||||
{
|
||||
id: 'main',
|
||||
label: '主要功能',
|
||||
items: [
|
||||
{
|
||||
id: 'dashboard',
|
||||
label: '儀表板',
|
||||
icon: <Dashboard />,
|
||||
path: '/dashboard',
|
||||
},
|
||||
{
|
||||
id: 'todos',
|
||||
label: '待辦清單',
|
||||
icon: <Assignment />,
|
||||
path: '/todos',
|
||||
badge: stats.total || undefined,
|
||||
},
|
||||
{
|
||||
id: 'public',
|
||||
label: '公開任務',
|
||||
icon: <Public />,
|
||||
path: '/public',
|
||||
},
|
||||
{
|
||||
id: 'calendar',
|
||||
label: '日曆視圖',
|
||||
icon: <CalendarToday />,
|
||||
path: '/calendar',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'views',
|
||||
label: '視圖篩選',
|
||||
items: [
|
||||
{
|
||||
id: 'starred',
|
||||
label: '已加星',
|
||||
icon: <Star />,
|
||||
path: '/todos?starred=true',
|
||||
badge: stats.starred || undefined,
|
||||
color: '#fbbf24',
|
||||
},
|
||||
{
|
||||
id: 'my-todos',
|
||||
label: '我建立的',
|
||||
icon: <People />,
|
||||
path: '/todos?view=created',
|
||||
badge: stats.created || undefined,
|
||||
},
|
||||
{
|
||||
id: 'assigned',
|
||||
label: '指派給我',
|
||||
icon: <Assignment />,
|
||||
path: '/todos?view=responsible',
|
||||
badge: stats.assigned || undefined,
|
||||
},
|
||||
{
|
||||
id: 'following',
|
||||
label: '我追蹤的',
|
||||
icon: <People />,
|
||||
path: '/todos?view=following',
|
||||
badge: stats.following || undefined,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
label: '狀態分類',
|
||||
items: [
|
||||
{
|
||||
id: 'new',
|
||||
label: '新建立',
|
||||
icon: <FiberNew />,
|
||||
path: '/todos?status=NEW',
|
||||
badge: stats.new || undefined,
|
||||
color: '#6b7280',
|
||||
},
|
||||
{
|
||||
id: 'doing',
|
||||
label: '進行中',
|
||||
icon: <Schedule />,
|
||||
path: '/todos?status=DOING',
|
||||
badge: stats.doing || undefined,
|
||||
color: '#3b82f6',
|
||||
},
|
||||
{
|
||||
id: 'blocked',
|
||||
label: '已阻塞',
|
||||
icon: <Block />,
|
||||
path: '/todos?status=BLOCKED',
|
||||
badge: stats.blocked || undefined,
|
||||
color: '#ef4444',
|
||||
},
|
||||
{
|
||||
id: 'done',
|
||||
label: '已完成',
|
||||
icon: <CheckCircle />,
|
||||
path: '/todos?status=DONE',
|
||||
badge: stats.done || undefined,
|
||||
color: '#10b981',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const handleNavClick = (path: string) => {
|
||||
router.push(path);
|
||||
if (onClose) onClose(); // 手機版關閉側邊欄
|
||||
};
|
||||
|
||||
const toggleGroup = (groupId: string) => {
|
||||
if (collapsed) return; // 收合狀態下不允許展開群組
|
||||
setExpandedGroups(prev => ({
|
||||
...prev,
|
||||
[groupId]: !prev[groupId],
|
||||
}));
|
||||
};
|
||||
|
||||
const isActive = (path: string) => {
|
||||
if (path === '/dashboard') return pathname === path;
|
||||
|
||||
// 檢查是否含有查詢參數
|
||||
if (path.includes('?')) {
|
||||
const [basePath, queryString] = path.split('?');
|
||||
if (pathname !== basePath) return false;
|
||||
|
||||
// 檢查查詢參數是否匹配
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const pathParams = new URLSearchParams(queryString);
|
||||
|
||||
// 檢查每個路徑參數是否在當前 URL 中存在且相同
|
||||
const pathParamsArray = Array.from(pathParams.entries());
|
||||
for (const [key, value] of pathParamsArray) {
|
||||
if (urlParams.get(key) !== value) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
// 沒有查詢參數的情況
|
||||
return pathname.includes(path);
|
||||
};
|
||||
|
||||
const renderNavItem = (item: NavItem) => {
|
||||
const active = isActive(item.path);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={item.id}
|
||||
initial={false}
|
||||
whileHover={{ x: collapsed ? 0 : 4 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<ListItem disablePadding sx={{ mb: 0.5 }}>
|
||||
<Tooltip title={collapsed ? item.label : ''} placement="right">
|
||||
<ListItemButton
|
||||
onClick={() => handleNavClick(item.path)}
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
mx: 1,
|
||||
minHeight: 44,
|
||||
backgroundColor: active
|
||||
? (actualTheme === 'dark' ? 'rgba(59, 130, 246, 0.15)' : 'rgba(59, 130, 246, 0.1)')
|
||||
: 'transparent',
|
||||
border: active
|
||||
? `1px solid ${actualTheme === 'dark' ? 'rgba(59, 130, 246, 0.3)' : 'rgba(59, 130, 246, 0.2)'}`
|
||||
: '1px solid transparent',
|
||||
'&:hover': {
|
||||
backgroundColor: active
|
||||
? (actualTheme === 'dark' ? 'rgba(59, 130, 246, 0.2)' : 'rgba(59, 130, 246, 0.15)')
|
||||
: (actualTheme === 'dark' ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.04)'),
|
||||
},
|
||||
transition: 'all 0.2s ease',
|
||||
}}
|
||||
>
|
||||
<ListItemIcon
|
||||
sx={{
|
||||
minWidth: collapsed ? 'auto' : 40,
|
||||
color: active
|
||||
? 'primary.main'
|
||||
: item.color || (actualTheme === 'dark' ? '#d1d5db' : '#6b7280'),
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
{item.icon}
|
||||
</ListItemIcon>
|
||||
|
||||
<AnimatePresence>
|
||||
{!collapsed && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, width: 0 }}
|
||||
animate={{ opacity: 1, width: 'auto' }}
|
||||
exit={{ opacity: 0, width: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
style={{ overflow: 'hidden' }}
|
||||
>
|
||||
<ListItemText
|
||||
primary={item.label}
|
||||
sx={{
|
||||
'& .MuiListItemText-primary': {
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: active ? 600 : 500,
|
||||
color: active
|
||||
? 'primary.main'
|
||||
: (actualTheme === 'dark' ? '#f3f4f6' : '#374151'),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
{item.badge && (
|
||||
<Badge
|
||||
badgeContent={item.badge}
|
||||
color="primary"
|
||||
sx={{
|
||||
'& .MuiBadge-badge': {
|
||||
backgroundColor: item.color || (actualTheme === 'dark' ? '#3b82f6' : '#1976d2'),
|
||||
color: '#ffffff',
|
||||
fontSize: '0.75rem',
|
||||
minWidth: 20,
|
||||
height: 20,
|
||||
fontWeight: 600,
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</ListItemButton>
|
||||
</Tooltip>
|
||||
</ListItem>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
{/* Logo 區域 */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: collapsed ? 'center' : 'space-between',
|
||||
p: 2,
|
||||
minHeight: 64,
|
||||
borderBottom: `1px solid ${actualTheme === 'dark'
|
||||
? 'rgba(255, 255, 255, 0.1)'
|
||||
: 'rgba(0, 0, 0, 0.1)'}`,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Box
|
||||
component="img"
|
||||
src="/panjit-logo.png"
|
||||
alt="PANJIT Logo"
|
||||
sx={{
|
||||
width: 75,
|
||||
height: 75,
|
||||
filter: 'drop-shadow(0 2px 4px rgba(59, 130, 246, 0.3))'
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{!collapsed && (
|
||||
<IconButton
|
||||
onClick={onToggleCollapse}
|
||||
size="small"
|
||||
sx={{
|
||||
backgroundColor: actualTheme === 'dark'
|
||||
? 'rgba(255, 255, 255, 0.1)'
|
||||
: 'rgba(0, 0, 0, 0.04)',
|
||||
'&:hover': {
|
||||
backgroundColor: actualTheme === 'dark'
|
||||
? 'rgba(255, 255, 255, 0.15)'
|
||||
: 'rgba(0, 0, 0, 0.08)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ChevronLeft fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* 導航列表 */}
|
||||
<Box sx={{ flex: 1, overflowY: 'auto', overflowX: 'hidden', py: 1 }}>
|
||||
<List>
|
||||
{navGroups.map((group) => (
|
||||
<Box key={group.id}>
|
||||
{/* 群組標題 */}
|
||||
<AnimatePresence>
|
||||
{!collapsed && group.label && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<ListItem
|
||||
disablePadding
|
||||
sx={{
|
||||
mt: group.id === 'main' ? 0 : 2,
|
||||
mb: 1,
|
||||
}}
|
||||
>
|
||||
<ListItemButton
|
||||
onClick={() => toggleGroup(group.id)}
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
mx: 1,
|
||||
minHeight: 36,
|
||||
'&:hover': {
|
||||
backgroundColor: actualTheme === 'dark'
|
||||
? 'rgba(255, 255, 255, 0.05)'
|
||||
: 'rgba(0, 0, 0, 0.04)',
|
||||
},
|
||||
}}
|
||||
disabled={group.id === 'main'}
|
||||
>
|
||||
<ListItemText
|
||||
primary={group.label}
|
||||
sx={{
|
||||
'& .MuiListItemText-primary': {
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 600,
|
||||
color: actualTheme === 'dark' ? '#9ca3af' : '#6b7280',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.05em',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
{group.id !== 'main' && (
|
||||
expandedGroups[group.id] ? <ExpandLess /> : <ExpandMore />
|
||||
)}
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* 群組項目 */}
|
||||
<AnimatePresence>
|
||||
{(collapsed || expandedGroups[group.id] || group.id === 'main') && (
|
||||
<motion.div
|
||||
initial={collapsed ? false : { opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.3, ease: 'easeInOut' }}
|
||||
>
|
||||
{group.items.map(renderNavItem)}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* 分隔線 */}
|
||||
{group.id === 'main' && !collapsed && (
|
||||
<Divider sx={{ my: 2, mx: 2 }} />
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
</List>
|
||||
</Box>
|
||||
|
||||
{/* 底部快速狀態 */}
|
||||
<AnimatePresence>
|
||||
{!collapsed && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 20 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
p: 2,
|
||||
borderTop: `1px solid ${actualTheme === 'dark'
|
||||
? 'rgba(255, 255, 255, 0.1)'
|
||||
: 'rgba(0, 0, 0, 0.1)'}`,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
||||
{stats.doing > 0 && (
|
||||
<Chip
|
||||
label={`${stats.doing} 進行中`}
|
||||
size="small"
|
||||
sx={{
|
||||
backgroundColor: actualTheme === 'dark'
|
||||
? 'rgba(59, 130, 246, 0.2)'
|
||||
: 'rgba(59, 130, 246, 0.1)',
|
||||
color: actualTheme === 'dark'
|
||||
? '#60a5fa'
|
||||
: '#3b82f6',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 500,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{(() => {
|
||||
const overdue = todos.filter(todo => {
|
||||
if (!todo.due_date) return false;
|
||||
const dueDate = new Date(todo.due_date);
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
return dueDate < today && todo.status !== 'DONE';
|
||||
}).length;
|
||||
return overdue > 0 ? (
|
||||
<Chip
|
||||
label={`${overdue} 逾期`}
|
||||
size="small"
|
||||
sx={{
|
||||
backgroundColor: actualTheme === 'dark'
|
||||
? 'rgba(239, 68, 68, 0.2)'
|
||||
: 'rgba(239, 68, 68, 0.1)',
|
||||
color: actualTheme === 'dark'
|
||||
? '#f87171'
|
||||
: '#ef4444',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 500,
|
||||
}}
|
||||
/>
|
||||
) : null;
|
||||
})()}
|
||||
{stats.blocked > 0 && (
|
||||
<Chip
|
||||
label={`${stats.blocked} 阻塞`}
|
||||
size="small"
|
||||
sx={{
|
||||
backgroundColor: actualTheme === 'dark'
|
||||
? 'rgba(239, 68, 68, 0.2)'
|
||||
: 'rgba(239, 68, 68, 0.1)',
|
||||
color: actualTheme === 'dark'
|
||||
? '#f87171'
|
||||
: '#ef4444',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 500,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{stats.total === 0 && !loading && (
|
||||
<Chip
|
||||
label="無待辦事項"
|
||||
size="small"
|
||||
sx={{
|
||||
backgroundColor: actualTheme === 'dark'
|
||||
? 'rgba(16, 185, 129, 0.2)'
|
||||
: 'rgba(16, 185, 129, 0.1)',
|
||||
color: actualTheme === 'dark'
|
||||
? '#34d399'
|
||||
: '#10b981',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 500,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
Reference in New Issue
Block a user