Fix saving subtasks on edit (#806)
This commit is contained in:
parent
e7f23bcff8
commit
2f13d0d4a7
3 changed files with 84 additions and 196 deletions
|
|
@ -10,6 +10,7 @@ interface TaskSubtasksSectionProps {
|
|||
subtasks: Task[];
|
||||
onSubtasksChange: (subtasks: Task[]) => void;
|
||||
onSubtaskUpdate?: (subtask: Task) => Promise<void>;
|
||||
onSave?: (subtasks: Task[]) => void;
|
||||
}
|
||||
|
||||
const TaskSubtasksSection: React.FC<TaskSubtasksSectionProps> = ({
|
||||
|
|
@ -17,6 +18,7 @@ const TaskSubtasksSection: React.FC<TaskSubtasksSectionProps> = ({
|
|||
subtasks,
|
||||
onSubtasksChange,
|
||||
onSubtaskUpdate,
|
||||
onSave,
|
||||
}) => {
|
||||
const [newSubtaskName, setNewSubtaskName] = useState('');
|
||||
const [isLoading] = useState(false);
|
||||
|
|
@ -28,7 +30,6 @@ const TaskSubtasksSection: React.FC<TaskSubtasksSectionProps> = ({
|
|||
|
||||
const scrollToBottom = () => {
|
||||
setTimeout(() => {
|
||||
// Find the modal's scrollable container
|
||||
const modalScrollContainer = document.querySelector(
|
||||
'.absolute.inset-0.overflow-y-auto'
|
||||
);
|
||||
|
|
@ -49,24 +50,24 @@ const TaskSubtasksSection: React.FC<TaskSubtasksSectionProps> = ({
|
|||
status: 'not_started',
|
||||
priority: 'low',
|
||||
today: false,
|
||||
parent_task_id: parentTaskId, // Set the parent task ID immediately
|
||||
// Mark as new for backend processing
|
||||
parent_task_id: parentTaskId,
|
||||
isNew: true,
|
||||
// Also keep for UI purposes
|
||||
_isNew: true,
|
||||
completed_at: null,
|
||||
} as Task;
|
||||
|
||||
onSubtasksChange([...subtasks, newSubtask]);
|
||||
const updatedSubtasks = [...subtasks, newSubtask];
|
||||
onSubtasksChange(updatedSubtasks);
|
||||
setNewSubtaskName('');
|
||||
|
||||
// Only scroll when adding new subtask, not when toggling completion
|
||||
scrollToBottom();
|
||||
|
||||
onSave?.(updatedSubtasks);
|
||||
};
|
||||
|
||||
const handleDeleteSubtask = (index: number) => {
|
||||
const updatedSubtasks = subtasks.filter((_, i) => i !== index);
|
||||
onSubtasksChange(updatedSubtasks);
|
||||
onSave?.(updatedSubtasks);
|
||||
};
|
||||
|
||||
const handleKeyPress = (e: React.KeyboardEvent) => {
|
||||
|
|
@ -93,10 +94,8 @@ const TaskSubtasksSection: React.FC<TaskSubtasksSectionProps> = ({
|
|||
return {
|
||||
...subtask,
|
||||
name: editingName.trim(),
|
||||
// Backend flags
|
||||
isNew: isNew,
|
||||
isEdited: isEdited,
|
||||
// UI flags
|
||||
_isNew: isNew,
|
||||
_isEdited: isEdited,
|
||||
};
|
||||
|
|
@ -107,6 +106,7 @@ const TaskSubtasksSection: React.FC<TaskSubtasksSectionProps> = ({
|
|||
onSubtasksChange(updatedSubtasks);
|
||||
setEditingIndex(null);
|
||||
setEditingName('');
|
||||
onSave?.(updatedSubtasks);
|
||||
};
|
||||
|
||||
const handleCancelEdit = () => {
|
||||
|
|
@ -130,7 +130,6 @@ const TaskSubtasksSection: React.FC<TaskSubtasksSectionProps> = ({
|
|||
...subtask,
|
||||
status: newStatus,
|
||||
completed_at: isDone ? null : new Date().toISOString(),
|
||||
// Mark for backend update if it has an ID (existing subtask)
|
||||
_statusChanged: hasId,
|
||||
};
|
||||
}
|
||||
|
|
@ -141,7 +140,6 @@ const TaskSubtasksSection: React.FC<TaskSubtasksSectionProps> = ({
|
|||
|
||||
return (
|
||||
<div ref={subtasksSectionRef} className="space-y-3">
|
||||
{/* Existing Subtasks */}
|
||||
{isLoading ? (
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{t('loading.subtasks', 'Loading subtasks...')}
|
||||
|
|
@ -171,7 +169,6 @@ const TaskSubtasksSection: React.FC<TaskSubtasksSectionProps> = ({
|
|||
(subtask as any).isNew
|
||||
)
|
||||
) {
|
||||
// Existing subtask - use API for immediate toggle, then update callback
|
||||
try {
|
||||
const updatedSubtask =
|
||||
await toggleTaskCompletion(
|
||||
|
|
@ -187,7 +184,6 @@ const TaskSubtasksSection: React.FC<TaskSubtasksSectionProps> = ({
|
|||
);
|
||||
}
|
||||
} else {
|
||||
// New subtask or no callback - handle locally
|
||||
handleToggleNewSubtaskCompletion(
|
||||
index
|
||||
);
|
||||
|
|
@ -245,7 +241,6 @@ const TaskSubtasksSection: React.FC<TaskSubtasksSectionProps> = ({
|
|||
.isNew
|
||||
)
|
||||
) {
|
||||
// Existing subtask - use API for immediate toggle, then update callback
|
||||
try {
|
||||
const updatedSubtask =
|
||||
await toggleTaskCompletion(
|
||||
|
|
@ -261,7 +256,6 @@ const TaskSubtasksSection: React.FC<TaskSubtasksSectionProps> = ({
|
|||
);
|
||||
}
|
||||
} else {
|
||||
// New subtask or no callback - handle locally
|
||||
handleToggleNewSubtaskCompletion(
|
||||
index
|
||||
);
|
||||
|
|
@ -287,16 +281,6 @@ const TaskSubtasksSection: React.FC<TaskSubtasksSectionProps> = ({
|
|||
)}
|
||||
>
|
||||
{subtask.name}
|
||||
{(subtask as any)._isNew && (
|
||||
<span className="ml-2 text-xs text-blue-500 dark:text-blue-400">
|
||||
(new)
|
||||
</span>
|
||||
)}
|
||||
{(subtask as any)._isEdited && (
|
||||
<span className="ml-2 text-xs text-orange-500 dark:text-orange-400">
|
||||
(edited)
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
|
|
@ -320,7 +304,6 @@ const TaskSubtasksSection: React.FC<TaskSubtasksSectionProps> = ({
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Add New Subtask */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
ref={addInputRef}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue