Adding Task Counters and Stats to Your Kanban Board

Welcome to the fifth lesson of our "Building A Kanban Board" course! So far, we've built a functional Kanban board with the ability to display tasks, add new tasks, and move tasks between columns. Our application is already quite useful, but we can enhance it further by adding visual indicators that show how many tasks are in each column and the total number of tasks on our board.

Task counters and statistics are important features in any task management application. They provide users with a quick overview of their workload and progress without requiring them to manually count tasks. For example, seeing that you have 10 tasks in the "To Do" column, 3 in "In Progress," and 15 in "Done" immediately tells you about your current workload and overall progress.

In this lesson, we'll enhance our Kanban board by:

1. Adding a counter to each column that shows the number of tasks it contains
2. Creating a stats bar that displays the total number of tasks on the board
3. Ensuring these counters update automatically when tasks are added or moved

We'll build on the components we've already created and leverage Svelte's reactivity system to keep our counters in sync with the underlying data. By the end of this lesson, your Kanban board will not only be functional but also informative, providing users with valuable insights at a glance.

Let's start by enhancing our task store to track the total number of tasks!

In our previous lessons, we created a task store that maintains our tasks and provides derived values for filtering tasks by status. Now, we'll add a new derived value to track the total number of tasks across all statuses.

Let's look at 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'));
const totalTasks = $derived(tasks.length);

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

// 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;
  }
}