fix: applies fix on kanban view

Author: ka1ea6

src/components/Projects/KanbanBoardView.tsx

@@ -22,7 +22,7 @@ export interface KanbanBoardProps {
   initialColleagues?: DigitalColleague[]
   // Task handlers
   onAddTask?: (newTask: Omit<Task, 'id' | 'createdAt' | 'updatedAt'>) => void
-  onUpdateTask?: (taskId: string, updates: Partial<Task>) => void
+  onUpdateTask?: (taskId: string, updates: Partial<Task>) => Promise<Task>
   onDeleteTask?: (taskId: string) => void
   onTaskClick?: (task: Task) => void
   // Epic handlers
@@ -63,7 +63,7 @@ export const KanbanBoardView: React.FC<KanbanBoardProps> = ({
   const selectedEpics = epics.filter((epic) => true).map((epic) => epic.id)
   const selectedSprint = sprints.find((sprint) => sprint.isSelected)
 
-  // selectedEpics.push(0)
+  selectedEpics.push(0)
 
   useEffect(() => {
     setTasks(initialTasks)
@@ -120,11 +120,12 @@ export const KanbanBoardView: React.FC<KanbanBoardProps> = ({
 
   // Filter tasks by selected epics and sprint
   const filteredTasks = tasks.filter((task) => {
-    const isEpicSelected = selectedEpics.includes(extractId(task.epic)) || extractId(task.epic) < 0
-    if (!selectedSprint) return isEpicSelected
-    if (selectedSprint.name === 'all-tasks') return isEpicSelected
-    if (selectedSprint.name === 'backlog') return isEpicSelected && !extractId(task.sprint)
-    return isEpicSelected && extractId(task.sprint) === extractId(selectedSprint)
+    // const isEpicSelected = selectedEpics.includes(extractId(task.epic)) || extractId(task.epic) < 0
+    // if (!selectedSprint) return isEpicSelected
+    // if (selectedSprint.name === 'all-tasks') return isEpicSelected
+    // if (selectedSprint.name === 'backlog') return isEpicSelected && !extractId(task.sprint)
+    // return isEpicSelected && extractId(task.sprint) === extractId(selectedSprint)
+    return true
   })
 
   const getTasksByStatus = (status: Task['status']) => {
@@ -171,7 +172,7 @@ export const KanbanBoardView: React.FC<KanbanBoardProps> = ({
       prev.map((task) => (task.id === Number(taskId) ? { ...task, ...updates } : task)),
     )
     if (onUpdateTask) {
-      await onUpdateTask(taskId, updates)
+      return await onUpdateTask(taskId, updates)
     }
     const task = tasks.find((task) => task.id === Number(taskId))
     if (!task) {
@@ -246,6 +247,8 @@ export const KanbanBoardView: React.FC<KanbanBoardProps> = ({
               const columnTasks = getTasksByStatus(column.status)
               const tasksByEpic = getTasksByEpic(columnTasks)
 
+              // console.log('col', col)
+
               return (
                 <KanbanColumn
                   key={column.id}
@@ -256,6 +259,17 @@ export const KanbanBoardView: React.FC<KanbanBoardProps> = ({
                   isCompact={column.status === 'done'}
                   height={calculatedHeight}
                 >
+                  {tasksByEpic['no-epic'].map((task) => {
+                    return (
+                      <TaskCard
+                        epic={null}
+                        task={task}
+                        onDragStart={handleDragStart}
+                        onTaskClick={handleTaskClick}
+                        isCompact={column.status === 'done'}
+                      />
+                    )
+                  })}
                   {selectedEpics.map((epicId) => {
                     const epic = epics.find((e) => e.id === epicId)
                     const epicTasks = tasksByEpic[epicId] || []

src/components/Projects/TaskCard.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import { Card } from '@/components/ui/card'
-import { User, AlertCircle, Bug, Zap, BookOpen } from 'lucide-react'
+import { User, AlertCircle, Bug, Zap, BookOpen, Calendar } from 'lucide-react'
 import { Task, Epic } from '../Foundary/types'
 
 interface TaskCardProps {
   task: Task
-  epic: Epic
+  epic: Epic | null
   onDragStart: (task: Task) => void
   onTaskClick: (task: Task) => void
   isCompact?: boolean
@@ -132,10 +132,10 @@ export const TaskCard: React.FC<TaskCardProps> = ({
           <User className="h-4 w-4" />
           <span>{(task.assignee as any)?.value?.name}</span>
         </div>
-        {/* <div className="flex items-center gap-1">
+        <div className="flex items-center gap-1">
           <Calendar className="h-4 w-4" />
-          <span>{task.createdAt.toLocaleDateString()}</span>
-        </div> */}
+          <span>{new Date(task.createdAt).toLocaleDateString()}</span>
+        </div>
       </div>
     </Card>
   )

src/components/Projects/TaskDetailsModal.tsx

@@ -72,6 +72,7 @@ export const TaskDetailsModal: React.FC<TaskDetailsModalProps> = ({
         // Reset to idle after showing success
         setTimeout(() => setUpdateState('idle'), 1500)
       } catch (error) {
+        console.log('error', error)
         setUpdateState('error')
         // Reset to idle after showing error
         setTimeout(() => setUpdateState('idle'), 3000)

src/components/Projects/TaskSidebar.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { Avatar, AvatarFallback } from '@/components/ui/avatar'
 import { Label } from '@/components/ui/label'
 import { Button } from '@/components/ui/button'
@@ -138,6 +138,28 @@ export const TaskSidebar: React.FC<TaskSidebarProps> = ({
   deleteState = 'idle',
   teamMembers,
 }) => {
+  const [storyPoints, setStoryPoints] = useState(task.storyPoints)
+  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  // Debounced version of onUpdateTask for story points
+  const debouncedUpdateTask = useCallback(
+    (fieldName: string, value: string) => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current)
+      }
+
+      debounceTimeoutRef.current = setTimeout(() => {
+        onUpdateTask(fieldName, value)
+      }, 500) // 500ms delay
+    },
+    [onUpdateTask],
+  )
+
+  useEffect(() => {
+    // setStoryPoints(task.storyPoints)
+    debouncedUpdateTask('storyPoints', storyPoints?.toString() || '1')
+  }, [storyPoints])
+
   const getInitials = (name: string) => {
     return name
       .split(' ')
@@ -275,8 +297,13 @@ export const TaskSidebar: React.FC<TaskSidebarProps> = ({
             type="number"
             min="1"
             max="100"
-            value={task.storyPoints || 1}
-            onChange={(e) => onUpdateTask('points', e.target.value)}
+            value={storyPoints || 1}
+            onChange={(e) => {
+              const val = Number(e.target.value)
+              if (val < 1) setStoryPoints(1)
+              else if (val > 100) setStoryPoints(100)
+              else setStoryPoints(val)
+            }}
             className="w-full h-8 px-2 text-xs border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent bg-background text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
             disabled={isUpdating}
           />

src/utils/extract-id.ts

@@ -1,6 +1,6 @@
 export const extractId = (field: any): number => {
-  if (!field) return -1
+  if (!field) return 0
   if (typeof field === 'number') return field
   if (typeof field === 'object' && field && 'id' in field) return field.id
-  return -1
+  return 0
 }