292 lines
No EOL
11 KiB
TypeScript
292 lines
No EOL
11 KiB
TypeScript
import { useState, useRef, useEffect } from 'react'
|
||
import type { ChecklistItem as ChecklistItemType } from '../types'
|
||
import DependencyManager from './DependencyManager'
|
||
|
||
interface ChecklistItemProps {
|
||
item: ChecklistItemType
|
||
onUpdate: (id: number, updates: Partial<ChecklistItemType>) => Promise<void>
|
||
onDelete: (id: number) => Promise<void>
|
||
onLock: (id: number, user: string) => Promise<void>
|
||
depth?: number
|
||
children?: ChecklistItemType[]
|
||
allItems?: ChecklistItemType[]
|
||
}
|
||
|
||
export default function ChecklistItem({
|
||
item,
|
||
onUpdate,
|
||
onDelete,
|
||
onLock,
|
||
depth = 0,
|
||
children = [],
|
||
allItems = []
|
||
}: ChecklistItemProps) {
|
||
const [isEditing, setIsEditing] = useState(false)
|
||
const [isDeleting, setIsDeleting] = useState(false)
|
||
const [isDependencyModalOpen, setIsDependencyModalOpen] = useState(false)
|
||
const [userName, setUserName] = useState('')
|
||
const contentRef = useRef<HTMLSpanElement>(null)
|
||
|
||
const isLocked = item.locked_by && item.lock_until && new Date(item.lock_until) > new Date()
|
||
const isLockedByMe = isLocked && item.locked_by === userName
|
||
|
||
// Check if all dependencies are completed
|
||
const dependenciesCompleted = item.dependencies?.every(depId => {
|
||
const depItem = allItems.find(i => i.id === depId)
|
||
return depItem?.checked
|
||
}) ?? true
|
||
|
||
// Check if item can be completed (all dependencies met)
|
||
const canComplete = dependenciesCompleted || item.checked
|
||
|
||
// Get dependency items for display
|
||
const dependencyItems = item.dependencies?.map(depId =>
|
||
allItems.find(i => i.id === depId)
|
||
).filter(Boolean) ?? []
|
||
|
||
useEffect(() => {
|
||
// Generate a random user name if not set
|
||
if (!userName) {
|
||
const randomName = `user_${Math.random().toString(36).substr(2, 9)}`
|
||
setUserName(randomName)
|
||
}
|
||
}, [userName])
|
||
|
||
useEffect(() => {
|
||
if (isEditing && contentRef.current) {
|
||
contentRef.current.focus()
|
||
// Select all text when entering edit mode
|
||
const range = document.createRange()
|
||
range.selectNodeContents(contentRef.current)
|
||
const selection = window.getSelection()
|
||
selection?.removeAllRanges()
|
||
selection?.addRange(range)
|
||
}
|
||
}, [isEditing])
|
||
|
||
const handleEdit = async () => {
|
||
if (isLocked && !isLockedByMe) {
|
||
alert('This item is being edited by someone else')
|
||
return
|
||
}
|
||
|
||
if (!isLockedByMe) {
|
||
try {
|
||
await onLock(item.id, userName)
|
||
} catch (error) {
|
||
console.error('Failed to lock item:', error)
|
||
return
|
||
}
|
||
}
|
||
|
||
setIsEditing(true)
|
||
}
|
||
|
||
const handleSave = async () => {
|
||
const newContent = contentRef.current?.textContent?.trim() || ''
|
||
if (newContent === '') return
|
||
|
||
try {
|
||
await onUpdate(item.id, { content: newContent })
|
||
setIsEditing(false)
|
||
} catch (error) {
|
||
console.error('Failed to update item:', error)
|
||
}
|
||
}
|
||
|
||
const handleCancel = () => {
|
||
if (contentRef.current) {
|
||
contentRef.current.textContent = item.content
|
||
}
|
||
setIsEditing(false)
|
||
}
|
||
|
||
const handleDelete = async () => {
|
||
if (confirm('Are you sure you want to delete this item?')) {
|
||
try {
|
||
setIsDeleting(true)
|
||
await onDelete(item.id)
|
||
} catch (error) {
|
||
console.error('Failed to delete item:', error)
|
||
} finally {
|
||
setIsDeleting(false)
|
||
}
|
||
}
|
||
}
|
||
|
||
const handleToggleCheck = async () => {
|
||
// Don't allow unchecking if already checked
|
||
if (item.checked) {
|
||
try {
|
||
await onUpdate(item.id, { checked: false })
|
||
} catch (error) {
|
||
console.error('Failed to uncheck item:', error)
|
||
}
|
||
return
|
||
}
|
||
|
||
// Check if dependencies are met before allowing completion
|
||
if (!dependenciesCompleted) {
|
||
alert(`Cannot complete this item. The following dependencies must be completed first:\n\n${dependencyItems.map(dep => `• ${dep?.content}`).join('\n')}`)
|
||
return
|
||
}
|
||
|
||
try {
|
||
await onUpdate(item.id, { checked: true })
|
||
} catch (error) {
|
||
console.error('Failed to toggle item:', error)
|
||
if (error instanceof Error && error.message.includes('dependency')) {
|
||
alert(error.message)
|
||
}
|
||
}
|
||
}
|
||
|
||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||
if (e.key === 'Enter') {
|
||
e.preventDefault()
|
||
handleSave()
|
||
} else if (e.key === 'Escape') {
|
||
e.preventDefault()
|
||
handleCancel()
|
||
}
|
||
}
|
||
|
||
const handleBlur = () => {
|
||
// Small delay to allow for button clicks
|
||
setTimeout(() => {
|
||
if (isEditing) {
|
||
handleSave()
|
||
}
|
||
}, 100)
|
||
}
|
||
|
||
return (
|
||
<li className="group">
|
||
<div className="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all duration-200 border border-transparent hover:border-gray-200 dark:hover:border-gray-700">
|
||
{/* Checkbox */}
|
||
<div className="flex-shrink-0 mt-0.5">
|
||
<input
|
||
type="checkbox"
|
||
checked={item.checked}
|
||
onChange={handleToggleCheck}
|
||
disabled={Boolean(isLocked && !isLockedByMe) || (!item.checked && !canComplete)}
|
||
className={`w-5 h-5 text-blue-600 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 hover:border-blue-400 dark:hover:border-blue-500 ${
|
||
!item.checked && !canComplete ? 'cursor-not-allowed' : ''
|
||
}`}
|
||
title={!item.checked && !canComplete ? 'Complete dependencies first' : ''}
|
||
/>
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div className="flex-1 min-w-0">
|
||
<span
|
||
ref={contentRef}
|
||
contentEditable={isEditing}
|
||
suppressContentEditableWarning={true}
|
||
className={`block w-full text-base leading-relaxed break-words outline-none transition-all duration-200 ${
|
||
isEditing
|
||
? 'px-3 py-2 border-2 border-blue-500 rounded-lg focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-800 bg-white dark:bg-gray-800 shadow-sm'
|
||
: 'cursor-pointer hover:text-blue-600 dark:hover:text-blue-400'
|
||
} ${
|
||
item.checked
|
||
? 'line-through text-gray-500 dark:text-gray-500 opacity-75'
|
||
: 'text-gray-900 dark:text-gray-100'
|
||
} ${
|
||
!item.checked && !canComplete ? 'opacity-60' : ''
|
||
}`}
|
||
onClick={!isEditing ? handleEdit : undefined}
|
||
onKeyDown={isEditing ? handleKeyDown : undefined}
|
||
onBlur={isEditing ? handleBlur : undefined}
|
||
>
|
||
{item.content}
|
||
</span>
|
||
|
||
{/* Dependency warning */}
|
||
{!item.checked && !canComplete && dependencyItems.length > 0 && (
|
||
<div className="mt-1 text-xs text-orange-600 dark:text-orange-400">
|
||
⚠️ Depends on: {dependencyItems.map(dep => dep?.content).join(', ')}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Actions */}
|
||
<div className="flex items-center gap-2 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
||
{/* Dependency indicators */}
|
||
{item.dependencies && item.dependencies.length > 0 && (
|
||
<div className="flex items-center gap-1">
|
||
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2 py-1 rounded-full whitespace-nowrap border ${
|
||
dependenciesCompleted
|
||
? 'text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800'
|
||
: 'text-orange-600 dark:text-orange-400 bg-orange-50 dark:bg-orange-900/20 border-orange-200 dark:border-orange-800'
|
||
}`}>
|
||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fillRule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clipRule="evenodd" />
|
||
</svg>
|
||
{dependenciesCompleted ? 'Ready' : `${item.dependencies.length} deps`}
|
||
</span>
|
||
</div>
|
||
)}
|
||
|
||
{isLocked && !isLockedByMe && (
|
||
<span className="inline-flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 px-2 py-1 rounded-full whitespace-nowrap border border-red-200 dark:border-red-800">
|
||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
|
||
</svg>
|
||
{item.locked_by}
|
||
</span>
|
||
)}
|
||
|
||
{!isEditing && (
|
||
<>
|
||
<button
|
||
onClick={() => setIsDependencyModalOpen(true)}
|
||
className="p-1.5 text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-md transition-all duration-200 group/deps"
|
||
title="Manage dependencies"
|
||
>
|
||
<svg className="w-4 h-4 group-hover/deps:scale-110 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||
</svg>
|
||
</button>
|
||
<button
|
||
onClick={handleDelete}
|
||
disabled={isDeleting}
|
||
className="p-1.5 text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md transition-all duration-200 disabled:opacity-30 disabled:cursor-not-allowed group/delete"
|
||
title="Delete item"
|
||
>
|
||
<svg className="w-4 h-4 group-hover/delete:scale-110 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||
</svg>
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Children */}
|
||
{children.length > 0 && (
|
||
<div className="ml-8 mt-2 space-y-2 border-l-2 border-gray-200 dark:border-gray-700 pl-4">
|
||
{children.map(child => (
|
||
<ChecklistItem
|
||
key={child.id}
|
||
item={child}
|
||
onUpdate={onUpdate}
|
||
onDelete={onDelete}
|
||
onLock={onLock}
|
||
depth={depth + 1}
|
||
allItems={allItems}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Dependency Manager Modal */}
|
||
<DependencyManager
|
||
item={item}
|
||
allItems={allItems}
|
||
onUpdate={onUpdate}
|
||
onClose={() => setIsDependencyModalOpen(false)}
|
||
isOpen={isDependencyModalOpen}
|
||
/>
|
||
</li>
|
||
)
|
||
}
|