deps

2025-07-25 16:15:22 +02:00 · 2025-07-25 16:15:22 +02:00 · 1a6d7291c4
commit 1a6d7291c4
parent ebd50740f0
6 changed files with 496 additions and 75 deletions
--- a/frontend/src/components/ChecklistItem.tsx
+++ b/frontend/src/components/ChecklistItem.tsx
@ -1,5 +1,6 @@
 import { useState, useRef, useEffect } from 'react'
 import type { ChecklistItem as ChecklistItemType } from '../types'
+import DependencyManager from './DependencyManager'

 interface ChecklistItemProps {
  item: ChecklistItemType
@ -8,6 +9,7 @@ interface ChecklistItemProps {
  onLock: (id: number, user: string) => Promise<void>
  depth?: number
  children?: ChecklistItemType[]
+  allItems?: ChecklistItemType[]
 }

 export default function ChecklistItem({ 
@ -16,16 +18,32 @@ export default function ChecklistItem({
  onDelete, 
  onLock, 
  depth = 0,
-  children = []
+  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) {
@ -97,10 +115,29 @@ export default function ChecklistItem({
  }

  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: !item.checked })
+      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)
+      }
    }
  }

@ -132,8 +169,11 @@ export default function ChecklistItem({
            type="checkbox"
            checked={item.checked}
            onChange={handleToggleCheck}
-            disabled={Boolean(isLocked && !isLockedByMe)}
-            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"
+            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>
        
@ -151,6 +191,8 @@ export default function ChecklistItem({
              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}
@ -158,10 +200,33 @@ export default function ChecklistItem({
          >
            {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">
@ -172,16 +237,27 @@ export default function ChecklistItem({
          )}
          
          {!isEditing && (
-            <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>
+            <>
+              <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>
@ -197,10 +273,20 @@ export default function ChecklistItem({
              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>
  )
 } 
--- a/frontend/src/components/DependencyManager.tsx
+++ b/frontend/src/components/DependencyManager.tsx
@ -0,0 +1,134 @@
+import { useState, useEffect } from 'react'
+import type { ChecklistItem } from '../types'
+
+interface DependencyManagerProps {
+  item: ChecklistItem
+  allItems: ChecklistItem[]
+  onUpdate: (id: number, updates: Partial<ChecklistItem>) => Promise<void>
+  onClose: () => void
+  isOpen: boolean
+}
+
+export default function DependencyManager({ 
+  item, 
+  allItems, 
+  onUpdate, 
+  onClose, 
+  isOpen 
+}: DependencyManagerProps) {
+  const [selectedDependencies, setSelectedDependencies] = useState<number[]>([])
+  const [isUpdating, setIsUpdating] = useState(false)
+
+  useEffect(() => {
+    if (isOpen) {
+      setSelectedDependencies(item.dependencies || [])
+    }
+  }, [isOpen, item.dependencies])
+
+  const handleSave = async () => {
+    setIsUpdating(true)
+    try {
+      await onUpdate(item.id, { dependencies: selectedDependencies })
+      onClose()
+    } catch (error) {
+      console.error('Failed to update dependencies:', error)
+    } finally {
+      setIsUpdating(false)
+    }
+  }
+
+  const toggleDependency = (depId: number) => {
+    setSelectedDependencies(prev => 
+      prev.includes(depId) 
+        ? prev.filter(id => id !== depId)
+        : [...prev, depId]
+    )
+  }
+
+  const availableItems = allItems.filter(otherItem => 
+    otherItem.id !== item.id && 
+    !otherItem.dependencies?.includes(item.id) // Prevent circular dependencies
+  )
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full mx-4 max-h-[80vh] overflow-hidden">
+        <div className="p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+              Manage Dependencies
+            </h3>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <div className="mb-4">
+            <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
+              Select items that must be completed before "{item.content}" can be completed:
+            </p>
+          </div>
+
+          <div className="max-h-64 overflow-y-auto border border-gray-200 dark:border-gray-700 rounded-lg">
+            {availableItems.length === 0 ? (
+              <div className="p-4 text-center text-gray-500 dark:text-gray-400">
+                No available items to depend on
+              </div>
+            ) : (
+              <div className="divide-y divide-gray-200 dark:divide-gray-700">
+                {availableItems.map(otherItem => (
+                  <label
+                    key={otherItem.id}
+                    className="flex items-center p-3 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
+                  >
+                    <input
+                      type="checkbox"
+                      checked={selectedDependencies.includes(otherItem.id)}
+                      onChange={() => toggleDependency(otherItem.id)}
+                      className="w-4 h-4 text-blue-600 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
+                    />
+                    <span className={`ml-3 text-sm ${
+                      otherItem.checked 
+                        ? 'line-through text-gray-500 dark:text-gray-500' 
+                        : 'text-gray-900 dark:text-gray-100'
+                    }`}>
+                      {otherItem.content}
+                    </span>
+                    {otherItem.checked && (
+                      <span className="ml-2 text-xs text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/20 px-2 py-1 rounded-full">
+                        ✓ Done
+                      </span>
+                    )}
+                  </label>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <div className="flex justify-end gap-3 mt-6">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSave}
+              disabled={isUpdating}
+              className="px-4 py-2 bg-blue-600 dark:bg-blue-500 text-white rounded-lg hover:bg-blue-700 dark:hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
+            >
+              {isUpdating ? 'Saving...' : 'Save'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+} 
--- a/frontend/src/pages/Checklist.tsx
+++ b/frontend/src/pages/Checklist.tsx
@ -133,8 +133,8 @@ export default function Checklist() {
    }
  }

-  const renderItems = (items: ChecklistItemType[]) => {
-    return items.map(item => (
+  const renderItems = (treeItems: ChecklistItemType[], allItems: ChecklistItemType[]) => {
+    return treeItems.map(item => (
      <ChecklistItem
        key={item.id}
        item={item}
@ -142,6 +142,7 @@ export default function Checklist() {
        onDelete={deleteItem}
        onLock={lockItem}
        children={item.children || []}
+        allItems={allItems}
      />
    ))
  }
@ -236,7 +237,7 @@ export default function Checklist() {
            </div>
          ) : (
            <ul>
-              {renderItems(itemTree)}
+              {renderItems(itemTree, items)}
            </ul>
          )}
        </div>
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@ -7,6 +7,7 @@ export interface ChecklistItem {
  lock_until?: string
  checklist_uuid: string
  children?: ChecklistItem[]
+  dependencies?: number[]
 }

 export interface SavedChecklist {