BeepTaskListItem

Overview

BeepTaskListItem provides a streamlined, compact control for displaying individual tasks or checklist items within larger list interfaces. It combines essential task information with interactive elements like checkboxes, priority indicators, and action buttons in a space-efficient design.

Built on the BeepControl foundation, BeepTaskListItem features checkbox integration, priority visualization, status indicators, hover effects, selection states, and comprehensive theming support. Perfect for task lists, to-do applications, checklist interfaces, and any application requiring compact task presentation within collections.

Key Features

Visual Preview

Task List Items in Different States

Basic Usage

// Create and configure a BeepTaskListItem
var taskItem = new BeepTaskListItem();
taskItem.Size = new Size(400, 80);
taskItem.TaskTitle = "Review code changes";
taskItem.TaskDescription = "Review pull request #123 for the new feature";
taskItem.IsCompleted = false;
taskItem.Priority = TaskPriority.High;
taskItem.DueDate = DateTime.Now.AddDays(2);

// Set additional metadata
taskItem.Assignee = "Sarah Chen";
taskItem.Category = "Code Review";
taskItem.TaskId = "TASK-123";

// Handle completion changes
taskItem.CompletionChanged += (s, e) =>
{
    var item = s as BeepTaskListItem;
    if (e.IsCompleted)
    {
        UpdateTaskStatus(item.TaskId, "Completed");
        ShowCompletionAnimation(item);
    }
    else
    {
        UpdateTaskStatus(item.TaskId, "Pending");
    }
};

// Handle task clicks
taskItem.TaskClicked += (s, e) =>
{
    ShowTaskDetails(taskItem.TaskId);
};

// Add to list container
taskListPanel.Controls.Add(taskItem);

// Create task list item with custom actions
var taskItem = new BeepTaskListItem
{
    TaskTitle = "Security patch deployment",
    TaskDescription = "Deploy critical security patches to production",
    Priority = TaskPriority.Urgent,
    DueDate = DateTime.Now.AddDays(-2), // Overdue
    Assignee = "Mike Johnson",
    Category = "Security",
    ShowActions = true
};

// Add custom action buttons
var startButton = new BeepButton 
{ 
    Text = "Start Now",
    Size = new Size(80, 24),
    BackColor = Color.OrangeRed,
    ForeColor = Color.White
};
startButton.Click += (s, e) => StartUrgentTask(taskItem);

var escalateButton = new BeepButton 
{ 
    Text = "Escalate",
    Size = new Size(70, 24)
};
escalateButton.Click += (s, e) => EscalateTask(taskItem);

// Add actions to the item
taskItem.AddAction(startButton);
taskItem.AddAction(escalateButton);

// Handle priority-based styling
taskItem.ApplyPriorityTheme();

// Add context menu
var contextMenu = new ContextMenuStrip();
contextMenu.Items.Add("Edit Task", null, (s, e) => EditTask(taskItem));
contextMenu.Items.Add("Delete Task", null, (s, e) => DeleteTask(taskItem));
contextMenu.Items.Add("Duplicate Task", null, (s, e) => DuplicateTask(taskItem));
taskItem.ContextMenuStrip = contextMenu;

Properties

Core Properties

Task Metadata

Display Properties

Events

Examples

public partial class TaskListManager : UserControl
{
    private FlowLayoutPanel taskListPanel;
    private List tasks;
    private ITaskService taskService;
    private Timer refreshTimer;

    public TaskListManager(ITaskService taskService)
    {
        this.taskService = taskService;
        InitializeComponents();
        LoadTasks();
        SetupAutoRefresh();
    }

    private void InitializeComponents()
    {
        taskListPanel = new FlowLayoutPanel
        {
            Dock = DockStyle.Fill,
            FlowDirection = FlowDirection.TopDown,
            WrapContents = false,
            AutoScroll = true,
            Padding = new Padding(10)
        };

        this.Controls.Add(taskListPanel);
    }

    private async void LoadTasks()
    {
        try
        {
            tasks = await taskService.GetTasksAsync();
            CreateTaskListItems();
        }
        catch (Exception ex)
        {
            MessageBox.Show($"Error loading tasks: {ex.Message}");
        }
    }

    private void CreateTaskListItems()
    {
        taskListPanel.Controls.Clear();

        foreach (var taskData in tasks.OrderBy(t => t.DueDate))
        {
            var taskItem = CreateTaskListItem(taskData);
            taskListPanel.Controls.Add(taskItem);
        }
    }

    private BeepTaskListItem CreateTaskListItem(TaskData taskData)
    {
        var item = new BeepTaskListItem
        {
            Width = taskListPanel.Width - 40,
            Height = 80,
            Margin = new Padding(0, 0, 0, 8),
            TaskTitle = taskData.Title,
            TaskDescription = taskData.Description,
            IsCompleted = taskData.IsCompleted,
            Priority = taskData.Priority,
            DueDate = taskData.DueDate,
            Assignee = taskData.AssignedTo,
            Category = taskData.Category,
            TaskId = taskData.Id.ToString()
        };

        // Apply conditional styling
        ApplyConditionalStyling(item, taskData);

        // Add event handlers
        item.CompletionChanged += OnTaskCompletionChanged;
        item.TaskClicked += OnTaskClicked;
        item.ActionClicked += OnTaskActionClicked;

        // Add context-specific actions
        AddTaskActions(item, taskData);

        return item;
    }

    private void ApplyConditionalStyling(BeepTaskListItem item, TaskData taskData)
    {
        // Overdue styling
        if (taskData.DueDate.HasValue && taskData.DueDate < DateTime.Now && !taskData.IsCompleted)
        {
            item.BackColor = Color.FromArgb(255, 245, 245); // Light red background
            item.BorderColor = Color.FromArgb(239, 68, 68); // Red border
        }

        // High priority styling
        if (taskData.Priority == TaskPriority.Urgent || taskData.Priority == TaskPriority.High)
        {
            item.PriorityColor = taskData.Priority == TaskPriority.Urgent ? Color.Red : Color.Orange;
        }

        // Completed styling
        if (taskData.IsCompleted)
        {
            item.Opacity = 0.7f;
            item.TitleStrikethrough = true;
        }
    }

    private void AddTaskActions(BeepTaskListItem item, TaskData taskData)
    {
        if (taskData.IsCompleted)
        {
            // Completed task actions
            var viewButton = new BeepButton
            {
                Text = "View",
                Size = new Size(50, 24),
                Theme = item.Theme
            };
            viewButton.Click += (s, e) => ViewTask(taskData.Id);
            item.AddAction(viewButton);

            var archiveButton = new BeepButton
            {
                Text = "Archive",
                Size = new Size(60, 24),
                Theme = item.Theme
            };
            archiveButton.Click += (s, e) => ArchiveTask(taskData.Id);
            item.AddAction(archiveButton);
        }
        else
        {
            // Pending task actions
            var editButton = new BeepButton
            {
                Text = "Edit",
                Size = new Size(50, 24),
                Theme = item.Theme
            };
            editButton.Click += (s, e) => EditTask(taskData.Id);
            item.AddAction(editButton);

            // Priority-specific actions
            if (taskData.Priority == TaskPriority.Urgent)
            {
                var escalateButton = new BeepButton
                {
                    Text = "Escalate",
                    Size = new Size(70, 24),
                    BackColor = Color.Red,
                    ForeColor = Color.White
                };
                escalateButton.Click += (s, e) => EscalateTask(taskData.Id);
                item.AddAction(escalateButton);
            }
        }

        // Common actions
        var commentButton = new BeepButton
        {
            Text = "💬",
            Size = new Size(30, 24),
            Theme = item.Theme,
            ToolTipText = "Add Comment"
        };
        commentButton.Click += (s, e) => ShowCommentDialog(taskData.Id);
        item.AddAction(commentButton);
    }

    private async void OnTaskCompletionChanged(object sender, CompletionEventArgs e)
    {
        var item = sender as BeepTaskListItem;
        try
        {
            await taskService.UpdateTaskCompletionAsync(e.TaskId, e.IsCompleted);
            
            // Update local data
            var task = tasks.FirstOrDefault(t => t.Id.ToString() == e.TaskId);
            if (task != null)
            {
                task.IsCompleted = e.IsCompleted;
                task.CompletedDate = e.IsCompleted ? DateTime.Now : null;
                
                // Refresh the item to show updated styling and actions
                RefreshTaskItem(e.TaskId);
                
                // Show completion animation
                if (e.IsCompleted)
                {
                    ShowCompletionAnimation(item);
                }
            }

            ShowNotification($"Task {(e.IsCompleted ? "completed" : "reopened")}", NotificationType.Success);
        }
        catch (Exception ex)
        {
            // Revert checkbox state on error
            item.IsCompleted = !e.IsCompleted;
            MessageBox.Show($"Error updating task: {ex.Message}");
        }
    }

    private async void OnTaskClicked(object sender, TaskEventArgs e)
    {
        var taskDetails = await taskService.GetTaskDetailsAsync(e.TaskId);
        ShowTaskDetailsDialog(taskDetails);
    }

    private void OnTaskActionClicked(object sender, ActionEventArgs e)
    {
        // Handle custom action events
        switch (e.ActionName)
        {
            case "QuickComplete":
                QuickCompleteTask(e.TaskId);
                break;
            case "Snooze":
                SnoozeTask(e.TaskId);
                break;
            case "Delegate":
                ShowDelegateDialog(e.TaskId);
                break;
        }
    }

    private void RefreshTaskItem(string taskId)
    {
        var taskData = tasks.FirstOrDefault(t => t.Id.ToString() == taskId);
        if (taskData != null)
        {
            var oldItem = taskListPanel.Controls.OfType()
                .FirstOrDefault(i => i.TaskId == taskId);
            
            if (oldItem != null)
            {
                var index = taskListPanel.Controls.GetChildIndex(oldItem);
                taskListPanel.Controls.Remove(oldItem);
                
                var newItem = CreateTaskListItem(taskData);
                taskListPanel.Controls.Add(newItem);
                taskListPanel.Controls.SetChildIndex(newItem, index);
            }
        }
    }

    private void ShowCompletionAnimation(BeepTaskListItem item)
    {
        // Simple fade-out animation
        var timer = new Timer { Interval = 50 };
        var opacity = 1.0f;
        
        timer.Tick += (s, e) =>
        {
            opacity -= 0.1f;
            if (opacity <= 0.7f)
            {
                timer.Stop();
                item.Opacity = 0.7f;
            }
            else
            {
                item.Opacity = opacity;
            }
        };
        
        timer.Start();
    }

    private void SetupAutoRefresh()
    {
        refreshTimer = new Timer { Interval = 30000 }; // 30 seconds
        refreshTimer.Tick += async (s, e) =>
        {
            await RefreshTaskList();
        };
        refreshTimer.Start();
    }

    private async Task RefreshTaskList()
    {
        try
        {
            var updatedTasks = await taskService.GetTasksAsync();
            
            // Check for changes
            if (HasTaskChanges(updatedTasks))
            {
                tasks = updatedTasks;
                CreateTaskListItems();
            }
        }
        catch (Exception ex)
        {
            // Silent failure for background refresh
          //  Console.WriteLine($"Background refresh failed: {ex.Message}");
        }
    }

    private bool HasTaskChanges(List newTasks)
    {
        if (newTasks.Count != tasks.Count) return true;
        
        return newTasks.Any(newTask =>
        {
            var existingTask = tasks.FirstOrDefault(t => t.Id == newTask.Id);
            return existingTask == null || 
                   existingTask.IsCompleted != newTask.IsCompleted ||
                   existingTask.Priority != newTask.Priority ||
                   existingTask.DueDate != newTask.DueDate;
        });
    }

    // Helper methods
    private void ViewTask(Guid taskId) { /* Implementation */ }
    private void EditTask(Guid taskId) { /* Implementation */ }
    private void ArchiveTask(Guid taskId) { /* Implementation */ }
    private void EscalateTask(Guid taskId) { /* Implementation */ }
    private void QuickCompleteTask(string taskId) { /* Implementation */ }
    private void SnoozeTask(string taskId) { /* Implementation */ }
    private void ShowCommentDialog(Guid taskId) { /* Implementation */ }
    private void ShowDelegateDialog(string taskId) { /* Implementation */ }
    private void ShowTaskDetailsDialog(object taskDetails) { /* Implementation */ }
    private void ShowNotification(string message, NotificationType type) { /* Implementation */ }
}

Theming

BeepTaskListItem provides comprehensive theming support with automatic adaptation to list contexts:

var taskItem = new BeepTaskListItem
{
    Theme = "ProductivityLight",
    UseThemeColors = true
};

// Theme automatically applies:
// - ItemBackColor: List item background
// - HoverBackColor: Hover state background
// - TextColors: Title and description colors
// - CheckboxColors: Completion checkbox styling
// - PriorityColors: Priority indicator colors
// - BorderColors: Item border and dividers

List-Specific Theming

• Hover states - Smooth hover transitions with theme colors
• Selection indicators - Theme-aware selection highlighting
• Priority visualization - Color-coded priority levels
• Completion states - Visual indication of completed tasks

Best Practices

🎯 User Experience

• Clear hierarchy: Use consistent spacing and typography for scannable lists
• Interactive feedback: Provide immediate visual feedback for all interactions
• Priority indication: Use color and icons to clearly indicate task priorities
• Completion animations: Use subtle animations to acknowledge task completion

🔧 Implementation

• Performance: Use virtualization for large task lists (>100 items)
• State synchronization: Keep list items synchronized with data sources
• Batch operations: Support multi-select for bulk task operations
• Keyboard navigation: Implement arrow key navigation and spacebar selection

📊 List Management

• Sorting and filtering: Provide intuitive ways to organize task lists
• Auto-refresh: Keep lists current with background updates
• Conflict resolution: Handle concurrent edits gracefully
• Undo support: Allow users to undo accidental completions