591 lines
22 KiB
TypeScript
591 lines
22 KiB
TypeScript
'use client';
|
||
|
||
import React, { useState, useEffect } from 'react';
|
||
import {
|
||
Dialog,
|
||
DialogTitle,
|
||
DialogContent,
|
||
DialogActions,
|
||
Box,
|
||
Typography,
|
||
Switch,
|
||
FormControlLabel,
|
||
TextField,
|
||
Select,
|
||
MenuItem,
|
||
FormControl,
|
||
InputLabel,
|
||
Button,
|
||
Divider,
|
||
Alert,
|
||
Card,
|
||
CardContent,
|
||
Chip,
|
||
IconButton,
|
||
Checkbox,
|
||
FormGroup,
|
||
Grid,
|
||
Accordion,
|
||
AccordionSummary,
|
||
AccordionDetails,
|
||
} from '@mui/material';
|
||
import {
|
||
Email,
|
||
Schedule,
|
||
Close,
|
||
NotificationImportant,
|
||
Settings,
|
||
Save,
|
||
ExpandMore,
|
||
Alarm,
|
||
Today,
|
||
CalendarMonth,
|
||
AccessTime,
|
||
} from '@mui/icons-material';
|
||
import { motion } from 'framer-motion';
|
||
import { useTheme } from '@/providers/ThemeProvider';
|
||
import { useAuth } from '@/providers/AuthProvider';
|
||
import { notificationsApi } from '@/lib/api';
|
||
import { toast } from 'react-hot-toast';
|
||
|
||
interface EnhancedEmailNotificationSettingsProps {
|
||
open: boolean;
|
||
onClose: () => void;
|
||
}
|
||
|
||
interface NotificationSettings {
|
||
// 基本設定
|
||
emailEnabled: boolean;
|
||
emailAddress: string;
|
||
|
||
// 到期提醒設定 - 支援多個天數
|
||
reminderDays: number[];
|
||
|
||
// 每日摘要
|
||
dailyDigestEnabled: boolean;
|
||
dailyDigestTime: string;
|
||
|
||
// 週報摘要
|
||
weeklyDigestEnabled: boolean;
|
||
weeklyDigestTime: string;
|
||
weeklyDigestDay: number; // 0=週日, 1=週一...
|
||
|
||
// 月報摘要
|
||
monthlyDigestEnabled: boolean;
|
||
monthlyDigestTime: string;
|
||
monthlyDigestDay: number; // 每月第幾日
|
||
|
||
// 其他通知
|
||
assignmentNotifications: boolean;
|
||
completionNotifications: boolean;
|
||
}
|
||
|
||
const EnhancedEmailNotificationSettings: React.FC<EnhancedEmailNotificationSettingsProps> = ({
|
||
open,
|
||
onClose,
|
||
}) => {
|
||
const { actualTheme } = useTheme();
|
||
const { user } = useAuth();
|
||
const [loading, setLoading] = useState(false);
|
||
const [saving, setSaving] = useState(false);
|
||
const [testEmailLoading, setTestEmailLoading] = useState(false);
|
||
|
||
const [settings, setSettings] = useState<NotificationSettings>({
|
||
emailEnabled: false,
|
||
emailAddress: user?.email || '',
|
||
reminderDays: [1, 3], // 預設前1天、前3天
|
||
dailyDigestEnabled: false,
|
||
dailyDigestTime: '09:00',
|
||
weeklyDigestEnabled: true,
|
||
weeklyDigestTime: '09:00',
|
||
weeklyDigestDay: 1, // 週一
|
||
monthlyDigestEnabled: false,
|
||
monthlyDigestTime: '09:00',
|
||
monthlyDigestDay: 1, // 每月1日
|
||
assignmentNotifications: true,
|
||
completionNotifications: false,
|
||
});
|
||
|
||
// 可選的提醒天數選項
|
||
const reminderDayOptions = [1, 2, 3, 5, 7, 14];
|
||
|
||
// 週幾選項
|
||
const weekDayOptions = [
|
||
{ value: 0, label: '週日' },
|
||
{ value: 1, label: '週一' },
|
||
{ value: 2, label: '週二' },
|
||
{ value: 3, label: '週三' },
|
||
{ value: 4, label: '週四' },
|
||
{ value: 5, label: '週五' },
|
||
{ value: 6, label: '週六' },
|
||
];
|
||
|
||
// 時間選項
|
||
const timeOptions = Array.from({ length: 24 }, (_, i) => {
|
||
const hour = i.toString().padStart(2, '0');
|
||
return `${hour}:00`;
|
||
});
|
||
|
||
// 載入用戶的通知設定
|
||
useEffect(() => {
|
||
if (open && user) {
|
||
loadSettings();
|
||
}
|
||
}, [open, user]);
|
||
|
||
const loadSettings = async () => {
|
||
try {
|
||
setLoading(true);
|
||
const data = await notificationsApi.getSettings();
|
||
|
||
setSettings(prev => ({
|
||
...prev,
|
||
emailEnabled: data.email_reminder_enabled || false,
|
||
reminderDays: data.reminder_days_before || [1, 3],
|
||
dailyDigestEnabled: false, // 暫時沒有每日摘要
|
||
weeklyDigestEnabled: data.weekly_summary_enabled || false,
|
||
weeklyDigestTime: data.weekly_summary_time || '09:00',
|
||
weeklyDigestDay: data.weekly_summary_day || 1,
|
||
monthlyDigestEnabled: data.monthly_summary_enabled || false,
|
||
monthlyDigestTime: data.monthly_summary_time || '09:00',
|
||
monthlyDigestDay: data.monthly_summary_day || 1,
|
||
assignmentNotifications: data.notification_enabled || true,
|
||
emailAddress: user?.email || data.email || '',
|
||
}));
|
||
} catch (error) {
|
||
console.error('Failed to load notification settings:', error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleSave = async () => {
|
||
try {
|
||
setSaving(true);
|
||
|
||
const payload = {
|
||
email_reminder_enabled: settings.emailEnabled,
|
||
notification_enabled: settings.assignmentNotifications,
|
||
weekly_summary_enabled: settings.weeklyDigestEnabled,
|
||
monthly_summary_enabled: settings.monthlyDigestEnabled,
|
||
reminder_days_before: settings.reminderDays,
|
||
weekly_summary_time: settings.weeklyDigestTime,
|
||
weekly_summary_day: settings.weeklyDigestDay,
|
||
monthly_summary_time: settings.monthlyDigestTime,
|
||
monthly_summary_day: settings.monthlyDigestDay,
|
||
};
|
||
|
||
await notificationsApi.updateSettings(payload);
|
||
toast.success('通知設定已儲存');
|
||
onClose();
|
||
} catch (error) {
|
||
console.error('Failed to save notification settings:', error);
|
||
toast.error('儲存通知設定失敗，請檢查網路連線');
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const handleTestEmail = async () => {
|
||
try {
|
||
setTestEmailLoading(true);
|
||
|
||
await notificationsApi.sendTestEmail(settings.emailAddress);
|
||
toast.success(`測試郵件已發送至 ${settings.emailAddress}！請檢查您的信箱`);
|
||
|
||
} catch (error) {
|
||
console.error('Failed to send test email:', error);
|
||
toast.error('發送測試郵件失敗，請檢查網路連線');
|
||
} finally {
|
||
setTestEmailLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleReminderDayToggle = (day: number) => {
|
||
setSettings(prev => ({
|
||
...prev,
|
||
reminderDays: prev.reminderDays.includes(day)
|
||
? prev.reminderDays.filter(d => d !== day)
|
||
: [...prev.reminderDays, day].sort((a, b) => a - b)
|
||
}));
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
|
||
<DialogContent>
|
||
<Box display="flex" justifyContent="center" py={4}>
|
||
<Typography>載入中...</Typography>
|
||
</Box>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Dialog
|
||
open={open}
|
||
onClose={onClose}
|
||
maxWidth="md"
|
||
fullWidth
|
||
sx={{
|
||
'& .MuiDialog-paper': {
|
||
backgroundColor: actualTheme === 'dark' ? '#1f2937' : '#ffffff',
|
||
borderRadius: 3,
|
||
minHeight: 700,
|
||
}
|
||
}}
|
||
>
|
||
<DialogTitle sx={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
pb: 1
|
||
}}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
<Email sx={{ color: 'primary.main' }} />
|
||
<Typography variant="h6" sx={{ fontWeight: 600 }}>
|
||
增強郵件提醒設定
|
||
</Typography>
|
||
</Box>
|
||
<IconButton onClick={onClose} size="small">
|
||
<Close />
|
||
</IconButton>
|
||
</DialogTitle>
|
||
|
||
<DialogContent sx={{ px: 3 }}>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.3 }}
|
||
>
|
||
{/* 總開關 */}
|
||
<Card sx={{ mb: 3, backgroundColor: actualTheme === 'dark' ? '#374151' : '#f8fafc' }}>
|
||
<CardContent>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||
<Box>
|
||
<Typography variant="h6" sx={{ mb: 0.5 }}>
|
||
啟用郵件通知
|
||
</Typography>
|
||
<Typography variant="body2" color="text.secondary">
|
||
接收待辦事項相關的郵件提醒通知
|
||
</Typography>
|
||
</Box>
|
||
<Switch
|
||
checked={settings.emailEnabled}
|
||
onChange={(e) => setSettings(prev => ({ ...prev, emailEnabled: e.target.checked }))}
|
||
size="medium"
|
||
/>
|
||
</Box>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{settings.emailEnabled && (
|
||
<motion.div
|
||
initial={{ opacity: 0, height: 0 }}
|
||
animate={{ opacity: 1, height: 'auto' }}
|
||
exit={{ opacity: 0, height: 0 }}
|
||
transition={{ duration: 0.3 }}
|
||
>
|
||
{/* 基本設定 */}
|
||
<Accordion defaultExpanded sx={{ mb: 2 }}>
|
||
<AccordionSummary expandIcon={<ExpandMore />}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
<Settings />
|
||
<Typography variant="h6">基本設定</Typography>
|
||
</Box>
|
||
</AccordionSummary>
|
||
<AccordionDetails>
|
||
<TextField
|
||
fullWidth
|
||
label="郵件地址"
|
||
value={settings.emailAddress}
|
||
onChange={(e) => setSettings(prev => ({ ...prev, emailAddress: e.target.value }))}
|
||
helperText="通知將發送至此郵件地址"
|
||
sx={{ mb: 2 }}
|
||
disabled
|
||
/>
|
||
|
||
<Button
|
||
variant="outlined"
|
||
size="small"
|
||
onClick={handleTestEmail}
|
||
disabled={!settings.emailAddress || testEmailLoading}
|
||
sx={{ mb: 2 }}
|
||
>
|
||
{testEmailLoading ? '發送中...' : '發送測試郵件'}
|
||
</Button>
|
||
</AccordionDetails>
|
||
</Accordion>
|
||
|
||
{/* 到期提醒設定 */}
|
||
<Accordion sx={{ mb: 2 }}>
|
||
<AccordionSummary expandIcon={<ExpandMore />}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
<Alarm />
|
||
<Typography variant="h6">到期提醒設定</Typography>
|
||
</Box>
|
||
</AccordionSummary>
|
||
<AccordionDetails>
|
||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
|
||
選擇在到期日前幾天發送提醒郵件（可多選）
|
||
</Typography>
|
||
|
||
<FormGroup>
|
||
<Grid container spacing={1}>
|
||
{reminderDayOptions.map(day => (
|
||
<Grid item xs={6} sm={4} key={day}>
|
||
<FormControlLabel
|
||
control={
|
||
<Checkbox
|
||
checked={settings.reminderDays.includes(day)}
|
||
onChange={() => handleReminderDayToggle(day)}
|
||
size="small"
|
||
/>
|
||
}
|
||
label={`前 ${day} 天`}
|
||
/>
|
||
</Grid>
|
||
))}
|
||
</Grid>
|
||
</FormGroup>
|
||
|
||
{settings.reminderDays.length > 0 && (
|
||
<Box sx={{ mt: 2 }}>
|
||
<Typography variant="caption" color="text.secondary">
|
||
已選擇：
|
||
</Typography>
|
||
<Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', mt: 1 }}>
|
||
{settings.reminderDays.sort((a, b) => a - b).map(day => (
|
||
<Chip
|
||
key={day}
|
||
size="small"
|
||
label={`前${day}天`}
|
||
color="primary"
|
||
variant="outlined"
|
||
/>
|
||
))}
|
||
</Box>
|
||
</Box>
|
||
)}
|
||
</AccordionDetails>
|
||
</Accordion>
|
||
|
||
{/* 摘要郵件設定 */}
|
||
<Accordion sx={{ mb: 2 }}>
|
||
<AccordionSummary expandIcon={<ExpandMore />}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
<Schedule />
|
||
<Typography variant="h6">摘要郵件設定</Typography>
|
||
</Box>
|
||
</AccordionSummary>
|
||
<AccordionDetails>
|
||
<Grid container spacing={3}>
|
||
{/* 週報設定 */}
|
||
<Grid item xs={12} md={6}>
|
||
<Card sx={{ p: 2, border: `1px solid ${actualTheme === 'dark' ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)'}` }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
||
<CalendarMonth sx={{ mr: 1, color: 'primary.main' }} />
|
||
<Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
|
||
週報摘要
|
||
</Typography>
|
||
</Box>
|
||
|
||
<FormControlLabel
|
||
control={
|
||
<Switch
|
||
checked={settings.weeklyDigestEnabled}
|
||
onChange={(e) => setSettings(prev => ({ ...prev, weeklyDigestEnabled: e.target.checked }))}
|
||
/>
|
||
}
|
||
label="啟用週報"
|
||
sx={{ mb: 2 }}
|
||
/>
|
||
|
||
{settings.weeklyDigestEnabled && (
|
||
<Box>
|
||
<FormControl size="small" fullWidth sx={{ mb: 1 }}>
|
||
<InputLabel>發送時間</InputLabel>
|
||
<Select
|
||
value={settings.weeklyDigestTime}
|
||
label="發送時間"
|
||
onChange={(e) => setSettings(prev => ({ ...prev, weeklyDigestTime: e.target.value }))}
|
||
>
|
||
{timeOptions.map(time => (
|
||
<MenuItem key={time} value={time}>{time}</MenuItem>
|
||
))}
|
||
</Select>
|
||
</FormControl>
|
||
|
||
<FormControl size="small" fullWidth>
|
||
<InputLabel>發送日期</InputLabel>
|
||
<Select
|
||
value={settings.weeklyDigestDay}
|
||
label="發送日期"
|
||
onChange={(e) => setSettings(prev => ({ ...prev, weeklyDigestDay: e.target.value as number }))}
|
||
>
|
||
{weekDayOptions.map(option => (
|
||
<MenuItem key={option.value} value={option.value}>{option.label}</MenuItem>
|
||
))}
|
||
</Select>
|
||
</FormControl>
|
||
</Box>
|
||
)}
|
||
</Card>
|
||
</Grid>
|
||
|
||
{/* 月報設定 */}
|
||
<Grid item xs={12} md={6}>
|
||
<Card sx={{ p: 2, border: `1px solid ${actualTheme === 'dark' ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)'}` }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
||
<Today sx={{ mr: 1, color: 'primary.main' }} />
|
||
<Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
|
||
月報摘要
|
||
</Typography>
|
||
</Box>
|
||
|
||
<FormControlLabel
|
||
control={
|
||
<Switch
|
||
checked={settings.monthlyDigestEnabled}
|
||
onChange={(e) => setSettings(prev => ({ ...prev, monthlyDigestEnabled: e.target.checked }))}
|
||
/>
|
||
}
|
||
label="啟用月報"
|
||
sx={{ mb: 2 }}
|
||
/>
|
||
|
||
{settings.monthlyDigestEnabled && (
|
||
<Box>
|
||
<FormControl size="small" fullWidth sx={{ mb: 1 }}>
|
||
<InputLabel>發送時間</InputLabel>
|
||
<Select
|
||
value={settings.monthlyDigestTime}
|
||
label="發送時間"
|
||
onChange={(e) => setSettings(prev => ({ ...prev, monthlyDigestTime: e.target.value }))}
|
||
>
|
||
{timeOptions.map(time => (
|
||
<MenuItem key={time} value={time}>{time}</MenuItem>
|
||
))}
|
||
</Select>
|
||
</FormControl>
|
||
|
||
<TextField
|
||
size="small"
|
||
type="number"
|
||
fullWidth
|
||
label="每月第幾日"
|
||
value={settings.monthlyDigestDay}
|
||
onChange={(e) => setSettings(prev => ({ ...prev, monthlyDigestDay: Math.max(1, Math.min(28, parseInt(e.target.value) || 1)) }))}
|
||
inputProps={{ min: 1, max: 28 }}
|
||
helperText="1-28日"
|
||
/>
|
||
</Box>
|
||
)}
|
||
</Card>
|
||
</Grid>
|
||
</Grid>
|
||
</AccordionDetails>
|
||
</Accordion>
|
||
|
||
{/* 其他通知設定 */}
|
||
<Accordion sx={{ mb: 2 }}>
|
||
<AccordionSummary expandIcon={<ExpandMore />}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
<NotificationImportant />
|
||
<Typography variant="h6">其他通知</Typography>
|
||
</Box>
|
||
</AccordionSummary>
|
||
<AccordionDetails>
|
||
<FormControlLabel
|
||
control={
|
||
<Switch
|
||
checked={settings.assignmentNotifications}
|
||
onChange={(e) => setSettings(prev => ({ ...prev, assignmentNotifications: e.target.checked }))}
|
||
/>
|
||
}
|
||
label={
|
||
<Box>
|
||
<Typography variant="subtitle2">指派通知</Typography>
|
||
<Typography variant="caption" color="text.secondary" component="div">
|
||
有新的待辦事項指派給您時發送通知
|
||
</Typography>
|
||
</Box>
|
||
}
|
||
sx={{ mb: 2, alignItems: 'flex-start', ml: 0 }}
|
||
/>
|
||
|
||
<FormControlLabel
|
||
control={
|
||
<Switch
|
||
checked={settings.completionNotifications}
|
||
onChange={(e) => setSettings(prev => ({ ...prev, completionNotifications: e.target.checked }))}
|
||
/>
|
||
}
|
||
label={
|
||
<Box>
|
||
<Typography variant="subtitle2">完成通知</Typography>
|
||
<Typography variant="caption" color="text.secondary" component="div">
|
||
您指派的待辦事項被完成時發送通知
|
||
</Typography>
|
||
</Box>
|
||
}
|
||
sx={{ alignItems: 'flex-start', ml: 0 }}
|
||
/>
|
||
</AccordionDetails>
|
||
</Accordion>
|
||
|
||
{/* 設定預覽 */}
|
||
<Alert
|
||
severity="info"
|
||
sx={{
|
||
mb: 2,
|
||
backgroundColor: actualTheme === 'dark' ? 'rgba(59, 130, 246, 0.1)' : 'rgba(59, 130, 246, 0.05)',
|
||
color: actualTheme === 'dark' ? '#93c5fd' : '#1d4ed8',
|
||
}}
|
||
>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>
|
||
<strong>當前設定預覽：</strong>
|
||
</Typography>
|
||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||
{settings.reminderDays.length > 0 && (
|
||
<Chip size="small" label={`到期提醒：前${settings.reminderDays.join('、')}天`} />
|
||
)}
|
||
{settings.weeklyDigestEnabled && (
|
||
<Chip size="small" label={`週報：${weekDayOptions.find(d => d.value === settings.weeklyDigestDay)?.label} ${settings.weeklyDigestTime}`} />
|
||
)}
|
||
{settings.monthlyDigestEnabled && (
|
||
<Chip size="small" label={`月報：每月${settings.monthlyDigestDay}日 ${settings.monthlyDigestTime}`} />
|
||
)}
|
||
{settings.assignmentNotifications && (
|
||
<Chip size="small" label="指派通知" />
|
||
)}
|
||
{settings.completionNotifications && (
|
||
<Chip size="small" label="完成通知" />
|
||
)}
|
||
</Box>
|
||
</Alert>
|
||
</motion.div>
|
||
)}
|
||
</motion.div>
|
||
</DialogContent>
|
||
|
||
<DialogActions sx={{ px: 3, py: 2 }}>
|
||
<Button onClick={onClose} color="inherit">
|
||
取消
|
||
</Button>
|
||
<Button
|
||
onClick={handleSave}
|
||
variant="contained"
|
||
startIcon={<Save />}
|
||
disabled={saving}
|
||
sx={{ minWidth: 100 }}
|
||
>
|
||
{saving ? '儲存中...' : '儲存設定'}
|
||
</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
);
|
||
};
|
||
|
||
export default EnhancedEmailNotificationSettings; |