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

7.4 KiB
Raw Blame History

Custom Task Status Dialog Implementation

Overview

Implemented a comprehensive Add/Edit dialog component for custom task status management. The dialog provides a user-friendly interface for creating new statuses and editing existing ones with real-time validation and live preview.

Implementation Details

Component: CustomTaskStatusDialog.vue

Location: frontend/src/components/settings/CustomTaskStatusDialog.vue

Features:

  • Dual-mode operation (Create/Edit)
  • Status name input with validation
  • Predefined color palette (10 colors)
  • Custom color picker with hex input
  • Live status badge preview
  • Inline validation errors
  • Loading states during submission
  • Success/error toast notifications

Key Features

1. Status Name Input

  • Text input with 50 character limit
  • Character counter display
  • Real-time validation:
    • Required field check
    • Length validation
    • Duplicate name detection (case-insensitive)
    • Excludes current status name in edit mode
  • Inline error messages

2. Color Picker

  • Predefined Palette: 10 colors matching backend palette
    • Purple (#8B5CF6)
    • Pink (#EC4899)
    • Teal (#14B8A6)
    • Orange (#F97316)
    • Cyan (#06B6D4)
    • Lime (#84CC16)
    • Violet (#A855F7)
    • Rose (#F43F5E)
    • Sky (#22D3EE)
    • Yellow (#FACC15)
  • Custom Color Input:
    • Hex code text input with validation
    • Native HTML5 color picker
    • Pattern validation: ^#[0-9A-Fa-f]{6}$
  • Visual selection indicator (border + ring effect)
  • Hover effects for better UX

3. Live Preview

  • Real-time status badge preview
  • Shows selected color and name
  • Updates as user types/selects
  • Demonstrates final appearance in UI

4. Validation

  • Name Validation:
    • Empty check
    • Length limit (50 chars)
    • Duplicate detection
    • Trim whitespace
  • Color Validation:
    • Hex format check
    • Required field
  • Form Validation:
    • Submit button disabled when invalid
    • All validations must pass

5. Edit Mode Features

  • Form pre-filled with existing status data
  • "Set as default" checkbox (edit mode only)
  • Proper validation excluding current status
  • Update API call instead of create

6. User Feedback

  • Success toast on save
  • Error toast on failure
  • Loading spinner during submission
  • Submit error display in dialog
  • Dialog auto-closes on success

Integration with CustomTaskStatusManager

Changes to CustomTaskStatusManager.vue:

  1. Import Dialog Component:
import CustomTaskStatusDialog from './CustomTaskStatusDialog.vue'
  1. Dialog State:
const isDialogOpen = ref(false)
const editingStatus = ref<CustomTaskStatus | null>(null)
  1. Computed Properties:
const existingStatusNames = computed(() => {
  const systemNames = systemStatuses.value.map(s => s.name)
  const customNames = customStatuses.value.map(s => s.name)
  return [...systemNames, ...customNames]
})
  1. Dialog Methods:
const openAddDialog = () => {
  editingStatus.value = null
  isDialogOpen.value = true
}

const openEditDialog = (customStatus: CustomTaskStatus) => {
  editingStatus.value = customStatus
  isDialogOpen.value = true
}

const handleDialogSuccess = async () => {
  await loadStatuses()
  emit('updated')
}
  1. Template Integration:
<CustomTaskStatusDialog
  :open="isDialogOpen"
  @update:open="isDialogOpen = $event"
  :project-id="props.projectId"
  :status="editingStatus"
  :existing-status-names="existingStatusNames"
  @success="handleDialogSuccess"
/>

API Integration

Create Status

await customTaskStatusService.createStatus(
  projectId,
  {
    name: formData.value.name.trim(),
    color: formData.value.color
  }
)

Update Status

await customTaskStatusService.updateStatus(
  projectId,
  statusId,
  {
    name: formData.value.name.trim(),
    color: formData.value.color,
    is_default: formData.value.is_default
  }
)

User Experience Flow

Creating a New Status

  1. User clicks "Add Status" button
  2. Dialog opens with empty form
  3. User enters status name
  4. User selects color from palette or enters custom hex
  5. Live preview updates in real-time
  6. User clicks "Create Status"
  7. Validation runs
  8. API call made if valid
  9. Success toast shown
  10. Dialog closes
  11. Status list refreshes

Editing an Existing Status

  1. User clicks edit button on status
  2. Dialog opens with pre-filled form
  3. User modifies name and/or color
  4. User optionally checks "Set as default"
  5. Live preview updates
  6. User clicks "Update Status"
  7. Validation runs (excluding current name)
  8. API call made if valid
  9. Success toast shown
  10. Dialog closes
  11. Status list refreshes with changes

Validation Rules

Name Validation

  • Required: Cannot be empty
  • Length: 1-50 characters
  • Uniqueness: Case-insensitive duplicate check
  • Trimming: Whitespace trimmed before validation
  • Edit Mode: Current status name excluded from duplicate check

Color Validation

  • Required: Must have a color
  • Format: Must match #RRGGBB pattern
  • Case Insensitive: Accepts both uppercase and lowercase hex

Error Handling

Validation Errors

  • Displayed inline below input fields
  • Red text with destructive styling
  • Real-time validation on input

Submit Errors

  • Displayed in error box above actions
  • Includes API error details
  • Red border and background
  • Toast notification for user feedback

Network Errors

  • Caught and displayed in submit error
  • Toast notification with error message
  • Form remains open for retry

Accessibility

  • Proper label associations
  • Form validation attributes
  • Keyboard navigation support
  • Focus management
  • ARIA attributes from shadcn-vue Dialog
  • Color contrast for text on colored backgrounds

Testing

Manual Testing Steps

  1. Create Status: Test full create flow
  2. Edit Status: Test edit with pre-filled data
  3. Name Validation: Test all validation rules
  4. Color Selection: Test palette and custom colors
  5. Cancel Action: Verify no changes saved
  6. Set Default: Test default flag in edit mode
  7. Error Handling: Test API errors and validation

Test File

  • frontend/test-custom-status-dialog.html - Comprehensive test documentation

Requirements Coverage

✅ Requirement 1.2: Dialog for creating new status
✅ Requirement 1.3: Name uniqueness validation
✅ Requirement 1.4: Color picker with predefined palette
✅ Requirement 2.1: Edit form pre-filled with current values
✅ Requirement 2.2: Update status name with validation
✅ Requirement 2.3: Update status color with immediate reflection

Files Modified

  1. Created:

    • frontend/src/components/settings/CustomTaskStatusDialog.vue
    • frontend/test-custom-status-dialog.html
    • frontend/docs/custom-task-status-dialog-implementation.md

  2. Modified:

    • frontend/src/components/settings/CustomTaskStatusManager.vue

Next Steps

  • Task 13: Implement status deletion with confirmation
  • Task 14: Implement drag-and-drop reordering
  • Task 15: Implement default status management
  • Integration testing with backend API
  • E2E testing of complete workflow

Notes

  • Color palette matches backend exactly
  • Validation logic mirrors backend requirements
  • Component follows existing dialog patterns in the project
  • Uses shadcn-vue components for consistency
  • Proper TypeScript typing throughout
  • No TypeScript errors or warnings