indigo
/
LinkDesk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
LinkDesk/frontend/docs/custom-task-status-service-...

5.7 KiB
Raw Blame History

Custom Task Status Service Implementation

Overview

Implemented the frontend service layer for managing custom task statuses in the VFX Project Management System. This service provides a clean API for interacting with the backend custom task status endpoints.

Implementation Details

File Created

  • frontend/src/services/customTaskStatus.ts

TypeScript Interfaces

The service includes comprehensive TypeScript interfaces for type safety:

Core Types

  • CustomTaskStatus: Represents a custom task status with id, name, color, order, and is_default flag
  • SystemTaskStatus: Represents built-in system statuses
  • AllTaskStatusesResponse: Combined response containing both system and custom statuses

Request Types

  • CustomTaskStatusCreate: For creating new statuses (name required, color optional)
  • CustomTaskStatusUpdate: For updating statuses (all fields optional)
  • CustomTaskStatusReorder: For reordering statuses (ordered list of status IDs)
  • CustomTaskStatusDelete: For deleting statuses (optional reassignment)

Response Types

  • CustomTaskStatusResponse: Standard response with message, status, and all_statuses
  • TaskStatusInUseError: Error response when attempting to delete a status in use

Service Methods

1. getAllStatuses(projectId: number)

  • Purpose: Retrieve all task statuses (system + custom) for a project
  • Endpoint: GET /projects/{projectId}/task-statuses
  • Returns: AllTaskStatusesResponse with system statuses, custom statuses, and default status ID
  • Requirements: 1.1

2. createStatus(projectId: number, status: CustomTaskStatusCreate)

  • Purpose: Create a new custom task status
  • Endpoint: POST /projects/{projectId}/task-statuses
  • Parameters:
    • name: Status name (required)
    • color: Hex color code (optional, auto-assigned if not provided)
  • Returns: CustomTaskStatusResponse with created status and all statuses
  • Requirements: 1.2

3. updateStatus(projectId: number, statusId: string, status: CustomTaskStatusUpdate)

  • Purpose: Update an existing custom task status
  • Endpoint: PUT /projects/{projectId}/task-statuses/{statusId}
  • Parameters:
    • name: New status name (optional)
    • color: New hex color code (optional)
    • is_default: Set as default status (optional)
  • Returns: CustomTaskStatusResponse with updated status and all statuses
  • Requirements: 2.1

4. deleteStatus(projectId: number, statusId: string, deleteData?: CustomTaskStatusDelete)

  • Purpose: Delete a custom task status
  • Endpoint: DELETE /projects/{projectId}/task-statuses/{statusId}
  • Parameters:
    • reassign_to_status_id: Status ID to reassign tasks to (optional, required if status is in use)
  • Returns: CustomTaskStatusResponse with remaining statuses
  • Requirements: 3.1

5. reorderStatuses(projectId: number, reorderData: CustomTaskStatusReorder)

  • Purpose: Reorder custom task statuses
  • Endpoint: PATCH /projects/{projectId}/task-statuses/reorder
  • Parameters:
    • status_ids: Ordered array of status IDs
  • Returns: CustomTaskStatusResponse with statuses in new order
  • Requirements: 4.1

API Integration

The service uses the centralized apiClient from ./api.ts which handles:

  • Authentication headers (JWT tokens)
  • Base URL configuration
  • Request/response interceptors
  • Error handling

Usage Example

import { customTaskStatusService } from '@/services/customTaskStatus'

// Get all statuses
const statuses = await customTaskStatusService.getAllStatuses(projectId)

// Create a new status
const newStatus = await customTaskStatusService.createStatus(projectId, {
  name: 'Ready for Review',
  color: '#9333EA'
})

// Update a status
const updated = await customTaskStatusService.updateStatus(projectId, statusId, {
  name: 'In Review',
  is_default: true
})

// Reorder statuses
await customTaskStatusService.reorderStatuses(projectId, {
  status_ids: ['status-1', 'status-2', 'status-3']
})

// Delete a status
await customTaskStatusService.deleteStatus(projectId, statusId, {
  reassign_to_status_id: 'other-status-id'
})

Testing

A test page has been created at frontend/test-custom-task-status-service.html that provides:

  • Interactive UI for testing all service methods
  • Login functionality
  • Visual display of results
  • Error handling demonstration

To test:

  1. Start the backend server: uvicorn main:app --reload (from backend directory)
  2. Start the frontend dev server: npm run dev (from frontend directory)
  3. Open http://localhost:5173/test-custom-task-status-service.html
  4. Click "Login as Admin" to authenticate
  5. Test each service method using the provided UI

Requirements Coverage

This implementation satisfies the following requirements from the custom task status specification:

  • Requirement 1.1: Get all task statuses (system + custom)
  • Requirement 1.2: Create custom task status
  • Requirement 2.1: Update custom task status
  • Requirement 3.1: Delete custom task status
  • Requirement 4.1: Reorder custom task statuses

Next Steps

The service is now ready to be integrated into UI components:

  • Task 11: CustomTaskStatusManager component
  • Task 12: Add/Edit status dialog
  • Task 13: Status deletion with confirmation
  • Task 14: Drag-and-drop reordering
  • Task 15: Default status management

Type Safety

All methods are fully typed with TypeScript interfaces, providing:

  • Compile-time type checking
  • IntelliSense support in IDEs
  • Clear API contracts
  • Reduced runtime errors

Error Handling

The service relies on the apiClient's error handling, which:

  • Catches HTTP errors
  • Provides structured error responses
  • Includes validation error details from the backend
  • Supports error recovery patterns in UI components