Implementing Task Movement in a Kanban Board

Welcome to the fourth lesson of our "Building A Kanban Board" course! In our previous lessons, we've set up our task store using Svelte's Runes API, created the visual components to display our tasks, and implemented a form to add new tasks. Now, we're ready to make our Kanban board truly functional by implementing task movement between columns.

Task movement is a core feature of any Kanban board. In real-world project management, tasks naturally progress through different stages of completion. A task might start in the "To Do" column, move to "In Progress" when someone begins working on it, and finally reach the "Done" column when completed. Without the ability to move tasks between these columns, our Kanban board would be little more than a static display of information.

In this lesson, we'll implement this crucial functionality by:

1. Adding a function to our task store that updates a task's status
2. Creating a component that displays action buttons for moving tasks
3. Enhancing our TaskCard component to handle status changes
4. Connecting everything together to create a seamless user experience

By the end of this lesson, you'll be able to click on a task to expand it, see available actions based on its current status, and move it to a different column with a single click. This interaction pattern is intuitive and mirrors how real Kanban boards work, making our application not just visually appealing but also practically useful.

Let's get started by examining how we'll update our task store to support status changes!

In our first lesson, we created a task store with an initial state and derived values for filtering tasks by status. In the third lesson, we added the ability to create new tasks. Now, we need to add functionality to update a task's status.

Let's examine the enhanced version of our taskStore.svelte.js file:

// Create initial state with $state
export const tasks = $state([
  { id: 1, title: 'Learn Svelte 5', description: 'Study the new Runes API', status: 'todo' },
  { id: 2, title: 'Design components', description: '', status: 'todo' },
  { id: 3, title: 'Build Kanban board', description: 'Create the main layout', status: 'inprogress' },
  { id: 4, title: 'Setup project', description: 'Initialize SvelteKit', status: 'done' }
]);

// Derive filtered tasks for each column
const todoTasks = $derived(tasks.filter(task => task.status === 'todo'));
const inProgressTasks = $derived(tasks.filter(task => task.status === 'inprogress'));
const doneTasks = $derived(tasks.filter(task => task.status === 'done'));

export const getTodoTasks = () => todoTasks;
export const getInProgressTasks = () => inProgressTasks;
export const getDoneTasks = () => doneTasks;

// Function to add a new task
export function addTask(title, description = '') {
  const newTask = {
    id: Date.now(),
    title,
    description,
    status: 'todo'
  };
  
  tasks.push(newTask);
  return newTask;
}

// Function to update task status
export function updateTaskStatus(id, newStatus) {
  const taskIndex = tasks.findIndex(task => task.id === id);
  if (taskIndex !== -1) {
    tasks[taskIndex].status = newStatus;
  }
}