Aller au contenu principal

Auto-Plan Feature Documentation

Overview​

The Auto-Plan feature is an intelligent task scheduling system that automatically arranges unscheduled tasks into available time slots based on user preferences. It includes advanced features like task chunking, break management, and smart scheduling optimization.

Architecture​

Core Components​

  1. Auto-Plan Dialog Component (auto-plan-dialog.component.ts)

    • Multi-step wizard interface for configuring and previewing schedules
    • Handles user preferences and task selection
    • Generates and applies schedules

  2. Todo Service (todo.service.ts)

    • Manages auto-planned task tracking
    • Handles removal of auto-planned tasks
    • Provides count of auto-planned tasks

  3. Timetable Component (timetable.component.ts)

    • Displays scheduled tasks
    • Provides UI controls for auto-planning and removal

  4. Todo Model (todo.model.ts)

    • Extended with isAutoPlanned property for tracking

Key Features​

1. Multi-Step Planning Wizard​

The auto-plan dialog consists of 4 steps:

Step 1: Date Selection​

  • User selects the target date for scheduling
  • Uses reactive signals for proper date handling
  • Avoids timezone issues with explicit date parsing

Step 2: Task Selection​

  • Shows unscheduled tasks (no startDateTime or endDateTime)
  • Filters: All, High Priority, Due Soon
  • Checkbox selection with proper event handling

Step 3: Preferences Configuration​

  • Working Hours: Start and end times
  • Lunch Break: Optional with configurable time and duration
  • Short Breaks: Automatic breaks every X minutes
  • Buffer Time: Minutes between tasks
  • Default Task Duration: For tasks without specified duration
  • Task Chunking: Break long tasks into smaller pieces
  • Energy Optimization: Place demanding tasks in peak hours
  • Project Grouping: Group tasks from same project

Step 4: Schedule Preview​

  • Shows generated schedule with time slots
  • Displays breaks, buffer time, and chunks
  • Allows regeneration and export

2. Intelligent Scheduling Algorithm​

private scheduleTasksIntelligently(tasks: Todo[]): ScheduledTask[]

The algorithm:

  1. Generates time slots based on working hours and existing tasks
  2. Prioritizes tasks by priority, due date, and duration
  3. Handles task chunking if enabled
  4. Schedules sequentially with break and buffer management
  5. Optimizes for energy by placing high-priority tasks in peak hours

3. Task Chunking System​

When enabled, long tasks are automatically broken into smaller chunks:

private createTaskChunks(tasks: Todo[]): Todo[]

Process:

  • Tasks longer than maxChunkSize are split
  • Each chunk gets a unique ID: ${originalId}_chunk_${index}
  • Chunk titles show progress: "Task Name (1/4)"
  • Descriptions include chunk information

Example:

Original: "Write Report" (4 hours)
Chunks:   "Write Report (1/4)" (1 hour)
          "Write Report (2/4)" (1 hour)
          "Write Report (3/4)" (1 hour)
          "Write Report (4/4)" (1 hour)

4. Time Slot Management​

private generateTimeSlots(): TimeSlot[]

Features:

  • 15-minute resolution for flexible scheduling
  • Excludes lunch breaks and existing scheduled tasks
  • Checks for overlaps with tasks on the selected date
  • Respects working hours boundaries

5. Auto-Planned Task Tracking​

Model Extension:

interface Todo {
  // ... existing properties
  isAutoPlanned?: boolean; // Track if scheduled by auto-plan
}

Application Process:

  • Single tasks: Direct scheduling with isAutoPlanned: true
  • Chunked tasks: Create subtasks for each chunk with scheduling info

6. Removal System​

async removeAutoPlannedTasks(): Promise<void>

Smart Removal:

  • Subtasks (chunks): Completely deleted from the system
  • Parent tasks: Scheduling cleared, descriptions cleaned
  • Preserves manual tasks: Only removes auto-planned items

Implementation Details​

Date Handling​

Problem: JavaScript date parsing can cause timezone issues Solution: Explicit date parsing to avoid UTC interpretation

selectedDate = computed(() => {
  const [year, month, day] = this.selectedDateStrSignal().split('-').map(Number);
  return new Date(year, month - 1, day); // month is 0-indexed
});

Reactive State Management​

Uses Angular signals for reactive updates:

  • selectedDateStrSignal: Selected planning date
  • selectedTasksSignal: Tasks chosen for scheduling
  • scheduledTasksSignal: Generated schedule
  • currentStepSignal: Wizard step tracking

Event Handling​

Checkbox Selection Fix:

// Prevents double-toggle when clicking checkbox
(click)="$event.stopPropagation()"

Overlap Detection​

private findOverlappingTasks(startDateTime: Date, endDateTime: Date, excludeId?: string)

Checks for time conflicts:

  • Compares with existing scheduled tasks
  • Excludes current task when updating
  • Uses proper time range overlap logic

User Interface​

Timetable Controls​

<div class="plan-controls">
  <button class="auto-plan-btn" (click)="openAutoPlan()">
    Auto-Plan
  </button>
  <button 
    class="remove-auto-plan-btn" 
    (click)="removeAutoPlannedTasks()" 
    [disabled]="getAutoPlannedTasksCount() === 0">
    Remove Auto-Planned ({{ getAutoPlannedTasksCount() }})
  </button>
</div>

Visual Indicators​

  • Chunk Progress: Task titles show "(1/4)" format
  • Auto-Plan Notes: Descriptions include chunk schedules
  • Button States: Remove button disabled when no auto-planned tasks
  • Count Display: Shows number of auto-planned tasks

Configuration Options​

Working Hours​

  • Start time (default: 09:00)
  • End time (default: 17:00)

Breaks​

  • Lunch: Optional, configurable time and duration
  • Short breaks: Every 1-2 hours, 5-15 minutes
  • Buffer time: 0-15 minutes between tasks

Task Settings​

  • Default duration: 15 minutes to 2 hours for unspecified tasks
  • Chunk size: 15 minutes to 1.5 hours maximum

Smart Features​

  • Energy optimization: Peak hours for demanding tasks
  • Project grouping: Group related tasks together

Error Handling​

Overlap Detection​

  • Shows confirmation dialog for time conflicts
  • Allows user to proceed or cancel
  • Maintains data integrity

Validation​

  • Ensures required fields are filled
  • Validates time ranges and durations
  • Handles edge cases gracefully

Performance Considerations​

Efficient Algorithms​

  • O(n) task flattening for large hierarchies
  • Optimized time slot generation
  • Minimal DOM updates with signals

Memory Management​

  • Cleanup of temporary chunk objects
  • Proper signal disposal
  • Efficient date handling

Future Enhancements​

Potential Improvements​

  1. Multi-day scheduling: Spread tasks across multiple days
  2. Recurring tasks: Handle repeating schedules
  3. Team coordination: Consider other people's schedules
  4. AI optimization: Machine learning for better scheduling
  5. Calendar integration: Sync with external calendars
  6. Mobile optimization: Touch-friendly interface

Technical Debt​

  • Consider using a dedicated scheduling library
  • Implement more sophisticated conflict resolution
  • Add comprehensive unit tests
  • Improve accessibility features

Testing Strategy​

Manual Testing​

  1. Create tasks with various durations
  2. Test chunking with different sizes
  3. Verify removal functionality
  4. Check date selection across timezones
  5. Test overlap detection

Edge Cases​

  • Tasks longer than working day
  • No available time slots
  • Overlapping existing schedules
  • Invalid time ranges
  • Empty task lists

Conclusion​

The Auto-Plan feature provides a comprehensive solution for intelligent task scheduling with advanced features like chunking, break management, and smart optimization. The implementation uses modern Angular patterns with reactive signals and maintains clean separation of concerns across components and services.