348 lines
17 KiB
TypeScript
348 lines
17 KiB
TypeScript
import React, { useState, useRef } from 'react';
|
||
import { PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { Task } from '../../../entities/Task';
|
||
import TaskPriorityIcon from '../TaskPriorityIcon';
|
||
import { toggleTaskCompletion } from '../../../utils/tasksService';
|
||
|
||
interface TaskSubtasksSectionProps {
|
||
parentTaskId: number;
|
||
subtasks: Task[];
|
||
onSubtasksChange: (subtasks: Task[]) => void;
|
||
onSubtaskUpdate?: (subtask: Task) => Promise<void>;
|
||
}
|
||
|
||
const TaskSubtasksSection: React.FC<TaskSubtasksSectionProps> = ({
|
||
parentTaskId,
|
||
subtasks,
|
||
onSubtasksChange,
|
||
onSubtaskUpdate,
|
||
}) => {
|
||
const [newSubtaskName, setNewSubtaskName] = useState('');
|
||
const [isLoading] = useState(false);
|
||
const [editingIndex, setEditingIndex] = useState<number | null>(null);
|
||
const [editingName, setEditingName] = useState('');
|
||
const { t } = useTranslation();
|
||
const subtasksSectionRef = useRef<HTMLDivElement>(null);
|
||
const addInputRef = useRef<HTMLInputElement>(null);
|
||
|
||
const scrollToBottom = () => {
|
||
setTimeout(() => {
|
||
// Find the modal's scrollable container
|
||
const modalScrollContainer = document.querySelector(
|
||
'.absolute.inset-0.overflow-y-auto'
|
||
);
|
||
if (modalScrollContainer) {
|
||
modalScrollContainer.scrollTo({
|
||
top: modalScrollContainer.scrollHeight,
|
||
behavior: 'smooth',
|
||
});
|
||
}
|
||
}, 100);
|
||
};
|
||
|
||
const handleCreateSubtask = () => {
|
||
if (!newSubtaskName.trim()) return;
|
||
|
||
const newSubtask: Task = {
|
||
name: newSubtaskName.trim(),
|
||
status: 'not_started',
|
||
priority: 'low',
|
||
today: false,
|
||
parent_task_id: parentTaskId, // Set the parent task ID immediately
|
||
// Mark as new for backend processing
|
||
isNew: true,
|
||
// Also keep for UI purposes
|
||
_isNew: true,
|
||
completed_at: null,
|
||
} as Task;
|
||
|
||
onSubtasksChange([...subtasks, newSubtask]);
|
||
setNewSubtaskName('');
|
||
|
||
// Only scroll when adding new subtask, not when toggling completion
|
||
scrollToBottom();
|
||
};
|
||
|
||
const handleDeleteSubtask = (index: number) => {
|
||
const updatedSubtasks = subtasks.filter((_, i) => i !== index);
|
||
onSubtasksChange(updatedSubtasks);
|
||
};
|
||
|
||
const handleKeyPress = (e: React.KeyboardEvent) => {
|
||
if (e.key === 'Enter') {
|
||
e.preventDefault();
|
||
handleCreateSubtask();
|
||
}
|
||
};
|
||
|
||
const handleEditSubtask = (index: number) => {
|
||
setEditingIndex(index);
|
||
setEditingName(subtasks[index].name);
|
||
};
|
||
|
||
const handleSaveEdit = () => {
|
||
if (!editingName.trim() || editingIndex === null) return;
|
||
|
||
const updatedSubtasks = subtasks.map((subtask, index) => {
|
||
if (index === editingIndex) {
|
||
const isNameChanged = subtask.name !== editingName.trim();
|
||
const isNew =
|
||
(subtask as any)._isNew || (subtask as any).isNew || false;
|
||
const isEdited = !isNew && isNameChanged;
|
||
return {
|
||
...subtask,
|
||
name: editingName.trim(),
|
||
// Backend flags
|
||
isNew: isNew,
|
||
isEdited: isEdited,
|
||
// UI flags
|
||
_isNew: isNew,
|
||
_isEdited: isEdited,
|
||
};
|
||
}
|
||
return subtask;
|
||
});
|
||
|
||
onSubtasksChange(updatedSubtasks);
|
||
setEditingIndex(null);
|
||
setEditingName('');
|
||
};
|
||
|
||
const handleCancelEdit = () => {
|
||
setEditingIndex(null);
|
||
setEditingName('');
|
||
};
|
||
|
||
const handleToggleNewSubtaskCompletion = (index: number) => {
|
||
const updatedSubtasks = subtasks.map((subtask, i) => {
|
||
if (i === index) {
|
||
const isDone =
|
||
subtask.status === 'done' || subtask.status === 2;
|
||
const newStatus = isDone
|
||
? ('not_started' as const)
|
||
: ('done' as const);
|
||
const hasId =
|
||
subtask.id &&
|
||
!((subtask as any)._isNew || (subtask as any).isNew);
|
||
|
||
return {
|
||
...subtask,
|
||
status: newStatus,
|
||
completed_at: isDone ? null : new Date().toISOString(),
|
||
// Mark for backend update if it has an ID (existing subtask)
|
||
_statusChanged: hasId,
|
||
};
|
||
}
|
||
return subtask;
|
||
});
|
||
onSubtasksChange(updatedSubtasks);
|
||
};
|
||
|
||
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...')}
|
||
</div>
|
||
) : subtasks.length > 0 ? (
|
||
<div className="space-y-1">
|
||
{subtasks.map((subtask, index) => (
|
||
<div
|
||
key={subtask.id || index}
|
||
className="rounded-lg shadow-sm bg-white dark:bg-gray-900 border-2 border-gray-50 dark:border-gray-800"
|
||
>
|
||
{editingIndex === index ? (
|
||
<div className="px-3 py-2.5 flex items-center space-x-3 overflow-hidden">
|
||
<div className="flex-shrink-0">
|
||
<TaskPriorityIcon
|
||
priority={subtask.priority || 'low'}
|
||
status={
|
||
subtask.status || 'not_started'
|
||
}
|
||
onToggleCompletion={async () => {
|
||
if (
|
||
subtask.id &&
|
||
onSubtaskUpdate &&
|
||
!(
|
||
(subtask as any)
|
||
._isNew ||
|
||
(subtask as any).isNew
|
||
)
|
||
) {
|
||
// Existing subtask - use API for immediate toggle, then update callback
|
||
try {
|
||
const updatedSubtask =
|
||
await toggleTaskCompletion(
|
||
subtask.id
|
||
);
|
||
await onSubtaskUpdate(
|
||
updatedSubtask
|
||
);
|
||
} catch (error) {
|
||
console.error(
|
||
'Error toggling subtask completion:',
|
||
error
|
||
);
|
||
}
|
||
} else {
|
||
// New subtask or no callback - handle locally
|
||
handleToggleNewSubtaskCompletion(
|
||
index
|
||
);
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
<input
|
||
type="text"
|
||
value={editingName}
|
||
onChange={(e) =>
|
||
setEditingName(e.target.value)
|
||
}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter') {
|
||
e.preventDefault();
|
||
handleSaveEdit();
|
||
} else if (e.key === 'Escape') {
|
||
handleCancelEdit();
|
||
}
|
||
}}
|
||
onBlur={handleSaveEdit}
|
||
className="flex-1 px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-600 dark:text-white overflow-hidden"
|
||
autoFocus
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={handleCancelEdit}
|
||
className="p-1 text-gray-500 hover:text-gray-700 dark:hover:text-gray-400"
|
||
title={t('actions.cancel', 'Cancel')}
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div className="px-3 py-2.5 flex items-center justify-between overflow-hidden">
|
||
<div className="flex items-center space-x-3 flex-1 min-w-0 overflow-hidden">
|
||
<div className="flex-shrink-0">
|
||
<TaskPriorityIcon
|
||
priority={
|
||
subtask.priority || 'low'
|
||
}
|
||
status={
|
||
subtask.status ||
|
||
'not_started'
|
||
}
|
||
onToggleCompletion={async () => {
|
||
if (
|
||
subtask.id &&
|
||
onSubtaskUpdate &&
|
||
!(
|
||
(subtask as any)
|
||
._isNew ||
|
||
(subtask as any)
|
||
.isNew
|
||
)
|
||
) {
|
||
// Existing subtask - use API for immediate toggle, then update callback
|
||
try {
|
||
const updatedSubtask =
|
||
await toggleTaskCompletion(
|
||
subtask.id
|
||
);
|
||
await onSubtaskUpdate(
|
||
updatedSubtask
|
||
);
|
||
} catch (error) {
|
||
console.error(
|
||
'Error toggling subtask completion:',
|
||
error
|
||
);
|
||
}
|
||
} else {
|
||
// New subtask or no callback - handle locally
|
||
handleToggleNewSubtaskCompletion(
|
||
index
|
||
);
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
<span
|
||
className={`text-sm flex-1 cursor-pointer hover:text-blue-600 dark:hover:text-blue-400 break-all ${
|
||
subtask.status === 'done' ||
|
||
subtask.status === 2 ||
|
||
subtask.status === 'archived' ||
|
||
subtask.status === 3
|
||
? 'text-gray-500 dark:text-gray-400'
|
||
: 'text-gray-900 dark:text-gray-100'
|
||
}`}
|
||
onClick={() =>
|
||
handleEditSubtask(index)
|
||
}
|
||
title={t(
|
||
'actions.clickToEdit',
|
||
'Click to edit'
|
||
)}
|
||
>
|
||
{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
|
||
type="button"
|
||
onClick={() =>
|
||
handleDeleteSubtask(index)
|
||
}
|
||
className="p-1 text-red-500 hover:text-red-700 dark:hover:text-red-400"
|
||
title={t('actions.delete', 'Delete')}
|
||
>
|
||
<TrashIcon className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||
{t('subtasks.noSubtasks', 'No subtasks yet')}
|
||
</div>
|
||
)}
|
||
|
||
{/* Add New Subtask */}
|
||
<div className="flex items-center space-x-2">
|
||
<input
|
||
ref={addInputRef}
|
||
type="text"
|
||
value={newSubtaskName}
|
||
onChange={(e) => setNewSubtaskName(e.target.value)}
|
||
onKeyDown={handleKeyPress}
|
||
placeholder={t('subtasks.placeholder', 'Add a subtask...')}
|
||
className="flex-1 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white overflow-hidden"
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={handleCreateSubtask}
|
||
disabled={!newSubtaskName.trim()}
|
||
className="p-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||
title={t('actions.add', 'Add')}
|
||
>
|
||
<PlusIcon className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default TaskSubtasksSection;
|