6.7 KiB

Raw Blame History

Custom Task Types Implementation Summary

Overview

Implemented the Custom Task Type Manager component that allows coordinators to add, edit, and delete custom task types for both assets and shots beyond the standard predefined types.

Files Created

1. Service Layer

File: frontend/src/services/customTaskType.ts

API service for custom task type management
Methods:
- getAllTaskTypes() - Get all task types (standard + custom)
- addCustomTaskType() - Add a new custom task type
- updateCustomTaskType() - Update an existing custom task type name
- deleteCustomTaskType() - Delete a custom task type

2. Component

File: frontend/src/components/settings/CustomTaskTypeManager.vue

Main component for managing custom task types
Features:
- Separate sections for asset and shot task types
- Visual distinction between standard (read-only) and custom (editable) types
- Add button with dialog for creating new custom types
- Edit functionality with inline validation
- Delete button with confirmation dialog
- Warning when attempting to delete task types in use
- Real-time validation of task type names

3. Integration

File: frontend/src/views/ProjectSettingsView.vue

Integrated CustomTaskTypeManager into the Tasks tab
Positioned above the DefaultTaskTemplatesEditor
Added event handler to refresh task templates when custom types are updated

4. Test File

File: frontend/test-custom-task-types.html

Interactive HTML mockup demonstrating the UI
Shows standard vs custom task types
Demonstrates add, edit, and delete functionality

Component Features

Asset Task Types Section

Lists all asset task types (standard + custom)
Standard types: modeling, surfacing, rigging (read-only)
Custom types: editable and deletable
Add button to create new custom asset task types

Shot Task Types Section

Lists all shot task types (standard + custom)
Standard types: layout, animation, simulation, lighting, compositing (read-only)
Custom types: editable and deletable
Add button to create new custom shot task types

Add Task Type Dialog

Input field for task type name
Real-time validation:
- 3-50 characters required
- Lowercase alphanumeric with underscores only
- No duplicates allowed
Category selection (asset or shot)
Save/Cancel buttons

Edit Task Type Dialog

Pre-filled input with current name
Same validation as add dialog
Updates all existing tasks using this type
Save/Cancel buttons

Delete Confirmation

Warning dialog before deletion
Shows error if task type is in use
Displays count of tasks using the type
Prevents deletion of standard types

Validation Rules

Task type names must:

Be 3-50 characters long
Use lowercase letters, numbers, and underscores only
Not duplicate existing task types (standard or custom)
Match regex pattern: ^[a-z0-9_]{3,50}$

User Experience

Visual Design

Standard task types have a "Standard" badge (secondary variant)
Custom task types have a "Custom" badge (outline variant)
Edit and delete buttons only appear for custom types
Hover effects on task items
Loading states during API calls
Toast notifications for success/error feedback

Error Handling

Validation errors shown inline in dialogs
API errors displayed via toast notifications
Delete errors shown in confirmation dialog
Graceful handling of network failures

Integration with Task Templates

When custom types are added/updated/deleted, the task template editor is refreshed
Custom types automatically appear in the DefaultTaskTemplatesEditor
Custom types can be enabled/disabled per asset category or for all shots

API Endpoints Used

GET    /projects/{project_id}/custom-task-types
POST   /projects/{project_id}/custom-task-types
PUT    /projects/{project_id}/custom-task-types/{task_type}
DELETE /projects/{project_id}/custom-task-types/{task_type}?category={category}

Backend Requirements

The backend must implement:

Custom task type storage in projects table (JSON columns)
CRUD endpoints for custom task types
Validation for task type names
Check for task types in use before deletion
Return standard + custom types in responses

Testing

To test the component:

Open frontend/test-custom-task-types.html in a browser for UI mockup
Navigate to Project Settings > Tasks tab in the application
Test adding custom task types (e.g., "grooming", "lookdev", "previz")
Test editing custom task type names
Test deleting custom task types
Verify standard types cannot be edited or deleted
Verify validation works correctly
Check that task templates update when custom types change
Verify the list updates immediately without requiring a browser refresh

Bug Fixes

Issue: Empty state showing after add/delete

Problem: When adding or deleting task types, the view showed "No asset task types defined" until browser refresh.

Root Cause: The v-for loop and empty state div were siblings, causing both to potentially render simultaneously.

Solution: Wrapped the v-for in a <template v-if> block with a corresponding v-else for the empty state, ensuring only one renders at a time.

Changes:

Used <template v-if="assetTaskTypes.length > 0"> wrapper for the task list
Changed empty state from v-if="assetTaskTypes.length === 0" to v-else
Applied same pattern to shot task types section
Added console.log statements to debug API responses

Issue: 405 Method Not Allowed on DELETE

Problem: When deleting a task type, the API returned a 405 Method Not Allowed error.

Root Cause: Task type names with special characters or spaces were not being properly URL-encoded in the DELETE request path.

Solution: Added encodeURIComponent() to properly encode the task type name in the URL path for both update and delete operations.