107 lines
5.0 KiB
TypeScript
107 lines
5.0 KiB
TypeScript
import React, { useState } from 'react';
|
|
|
|
interface RecurrenceModalProps {
|
|
task: any;
|
|
onClose: () => void;
|
|
onSave: (taskId: string, recurrence: any) => Promise<void>;
|
|
}
|
|
|
|
export default function RecurrenceModal({ task, onClose, onSave }: RecurrenceModalProps) {
|
|
const [isRecurring, setIsRecurring] = useState(task.isRecurring || false);
|
|
const [interval, setInterval] = useState(task.recurrenceInterval || 1);
|
|
const [unit, setUnit] = useState(task.recurrenceUnit || 'weeks');
|
|
const [endDate, setEndDate] = useState(task.recurrenceEndDate ? new Date(task.recurrenceEndDate).toISOString().split('T')[0] : '');
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
|
|
const handleSave = async () => {
|
|
setIsSaving(true);
|
|
try {
|
|
await onSave(task.id, {
|
|
isRecurring,
|
|
recurrenceInterval: isRecurring ? interval : null,
|
|
recurrenceUnit: isRecurring ? unit : null,
|
|
recurrenceEndDate: isRecurring && endDate ? new Date(endDate) : null
|
|
});
|
|
onClose();
|
|
} catch (error) {
|
|
console.error('Failed to save recurrence', error);
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="weekly-modal-overlay" onClick={onClose}>
|
|
<div className="weekly-modal-content" onClick={e => e.stopPropagation()} style={{ maxWidth: '400px' }}>
|
|
<h3 style={{ marginBottom: '1.5rem' }}>Recurring Task</h3>
|
|
|
|
<div style={{ marginBottom: '1.5rem' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '1rem' }}>
|
|
<input
|
|
type="checkbox"
|
|
id="isRecurring"
|
|
checked={isRecurring}
|
|
onChange={e => setIsRecurring(e.target.checked)}
|
|
style={{ width: '18px', height: '18px', marginRight: '10px' }}
|
|
/>
|
|
<label htmlFor="isRecurring" style={{ fontSize: '1rem', fontWeight: 500 }}>Enable Recurrence</label>
|
|
</div>
|
|
|
|
{isRecurring && (
|
|
<div style={{ paddingLeft: '28px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
|
<div>
|
|
<label style={{ display: 'block', marginBottom: '4px', fontSize: '0.9rem', color: '#666' }}>Repeat every</label>
|
|
<div style={{ display: 'flex', gap: '8px' }}>
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
value={interval}
|
|
onChange={e => setInterval(parseInt(e.target.value) || 1)}
|
|
style={{ width: '60px', padding: '6px', borderRadius: '4px', border: '1px solid #ddd' }}
|
|
/>
|
|
<select
|
|
value={unit}
|
|
onChange={e => setUnit(e.target.value)}
|
|
style={{ flex: 1, padding: '6px', borderRadius: '4px', border: '1px solid #ddd' }}
|
|
>
|
|
<option value="days">Days</option>
|
|
<option value="weeks">Weeks</option>
|
|
<option value="months">Months</option>
|
|
<option value="years">Years</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label style={{ display: 'block', marginBottom: '4px', fontSize: '0.9rem', color: '#666' }}>End Date (Optional)</label>
|
|
<input
|
|
type="date"
|
|
value={endDate}
|
|
onChange={e => setEndDate(e.target.value)}
|
|
style={{ width: '100%', padding: '6px', borderRadius: '4px', border: '1px solid #ddd' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="weekly-modal-actions">
|
|
<button
|
|
className="weekly-btn weekly-btn-primary"
|
|
onClick={handleSave}
|
|
disabled={isSaving}
|
|
>
|
|
{isSaving ? 'Saving...' : 'Save'}
|
|
</button>
|
|
<button
|
|
className="weekly-btn weekly-btn-secondary"
|
|
onClick={onClose}
|
|
disabled={isSaving}
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|