Skip to content

TASK_MANAGEMENT_GUIDE.md

Latest commit

 

History

History
278 lines (224 loc) · 6.85 KB

TASK_MANAGEMENT_GUIDE.md

File metadata and controls

278 lines (224 loc) · 6.85 KB

Task Management System - Implementation Guide

Overview

A comprehensive task management system built with Angular featuring full CRUD operations, reactive forms, and proper error handling.

Features Implemented

✅ Core Functionality

  • Create Tasks: Add new tasks with title, description, and status
  • Read Tasks: View all tasks or filter by status
  • Update Tasks: Edit existing tasks or change their status
  • Delete Tasks: Remove tasks with confirmation

🎨 User Interface

  • Clean, modern, and responsive design
  • Card-based task display
  • Intuitive form interface
  • Loading spinners for async operations
  • Error messages with clear feedback
  • Status badges with color coding

🔧 Technical Features

  • TypeScript Interfaces: Type-safe data models (Task, TaskStatus, TaskFormData)
  • Angular Service: Centralized API communication with error handling
  • Reactive Forms: Form validation and error messages
  • RxJS Observables: Proper async handling with cleanup
  • Loading States: Visual feedback for all async operations
  • Error Handling: Comprehensive error catching and user feedback

File Structure

frontend/src/app/
├── models/
│   └── task.model.ts              # TypeScript interfaces and enums
├── services/
│   └── task.service.ts            # HTTP service for API calls
└── components/
    ├── task-list/
    │   ├── task-list.component.ts
    │   ├── task-list.component.html
    │   └── task-list.component.css
    └── task-form/
        ├── task-form.component.ts
        ├── task-form.component.html
        └── task-form.component.css

Components

TaskListComponent

Main container component that:

  • Displays all tasks in a card layout
  • Provides filtering by status
  • Handles task deletion
  • Manages inline status updates
  • Shows/hides the task form
  • Displays loading and error states

TaskFormComponent

Reusable form component for creating and editing tasks:

  • Reactive form with validation
  • Required field validation
  • Min/max length validation
  • Real-time error messages
  • Loading state during submission
  • Supports both create and edit modes

Service Layer

TaskService

Comprehensive service providing:

  • getTasks(): Fetch all tasks
  • getTasksByStatus(status): Filter tasks by status
  • getTask(id): Get single task
  • createTask(data): Create new task
  • updateTask(id, data): Update entire task
  • patchTask(id, updates): Partial update
  • deleteTask(id): Remove task
  • loading$: Observable for loading state
  • Centralized error handling

Data Models

Task Interface

interface Task {
  id?: string;
  title: string;
  description: string;
  status: TaskStatus;
  createdAt: string;
  updatedAt?: string;
}

TaskStatus Enum

enum TaskStatus {
  TODO = 'todo',
  IN_PROGRESS = 'in-progress',
  DONE = 'done'
}

Form Validation

Title Field

  • Required
  • Minimum length: 3 characters
  • Maximum length: 100 characters

Description Field

  • Required
  • Minimum length: 10 characters
  • Maximum length: 500 characters

Status Field

  • Required
  • Must be one of: todo, in-progress, done

API Integration

The application connects to the mock API at http://localhost:3001/tasks

Prerequisites

  1. Start the mock API server:

    cd mock-api
npm install
npm start

  2. The API should be running on http://localhost:3001

API Endpoints Used

  • GET /tasks - Fetch all tasks
  • GET /tasks?status=<status> - Filter by status
  • GET /tasks/:id - Get single task
  • POST /tasks - Create task
  • PUT /tasks/:id - Update task
  • PATCH /tasks/:id - Partial update
  • DELETE /tasks/:id - Delete task

Running the Application

  1. Start the Mock API (in one terminal):

    cd mock-api
npm start

  2. Start the Frontend (in another terminal):

    cd frontend
npm install
npm start

  3. Access the application:

    • Open browser to http://localhost:4200
    • Navigate to the "Tasks" link in the navigation

User Guide

Creating a Task

  1. Click the "+ Add Task" button
  2. Fill in the form:
    • Enter a title (3-100 characters)
    • Enter a description (10-500 characters)
    • Select a status
  3. Click "Create Task"

Editing a Task

  1. Click the edit icon (✏️) on any task card
  2. Modify the fields as needed
  3. Click "Update Task"

Changing Task Status

  1. Use the status dropdown on any task card
  2. Select the new status
  3. The change is saved immediately

Deleting a Task

  1. Click the delete icon (🗑️) on any task card
  2. Confirm the deletion in the dialog
  3. The task is removed immediately

Filtering Tasks

  1. Use the "Filter by status" dropdown
  2. Select a status or "All Tasks"
  3. The list updates immediately

Error Handling

The application handles various error scenarios:

Network Errors

  • Display: "Unable to connect to the server. Please check if the API is running."
  • Solution: Ensure mock API is running on port 3001

Validation Errors

  • Display: Real-time validation messages below form fields
  • Solution: Follow the validation requirements

API Errors

  • 404: "Task not found"
  • 400: "Invalid request. Please check your input"
  • 500: "Server error. Please try again later"

Best Practices Used

Angular

  • ✅ Reactive Forms for form handling
  • ✅ Services for API calls
  • ✅ Component separation (smart/presentational)
  • ✅ Proper module imports

TypeScript

  • ✅ Strong typing with interfaces
  • ✅ Enums for constants
  • ✅ Type safety throughout

RxJS

  • ✅ Proper subscription management
  • ✅ takeUntil for cleanup
  • ✅ Error handling in pipe
  • ✅ finalize for loading states

User Experience

  • ✅ Loading indicators
  • ✅ Error messages
  • ✅ Confirmation dialogs
  • ✅ Responsive design
  • ✅ Immediate feedback

Future Enhancements

Potential improvements:

  • Add task priorities
  • Implement due dates
  • Add task categories/tags
  • Search functionality
  • Sorting options
  • Pagination for large lists
  • Task details view
  • Drag and drop for status changes
  • Dark mode support
  • Export tasks to CSV/JSON

Troubleshooting

Tasks not loading

  • Check if mock API is running: curl http://localhost:3001/tasks
  • Check browser console for errors
  • Verify CORS is enabled on the API

Form not submitting

  • Check browser console for validation errors
  • Ensure all required fields are filled
  • Check if API is responding

Styling issues

  • Clear browser cache
  • Check if CSS files are loading
  • Verify Angular CLI is serving files correctly

Support

For issues or questions:

  1. Check the browser console for errors
  2. Verify all services are running
  3. Review the API documentation in mock-api/README.md
  4. Check Angular documentation for framework-specific issues

Built with Angular, TypeScript, and best practices for modern web development.