LinkDesk/frontend/docs/custom-task-columns-enhancement.md

# Custom Task Columns Enhancement

## Overview
Enhanced the asset browser column visibility control to support custom task types and added global toggle buttons for both task columns and thumbnails. The buttons provide quick show/hide functionality while preserving individual column settings.

## Changes Made

### 1. ColumnVisibilityControl Component (`frontend/src/components/asset/ColumnVisibilityControl.vue`)

#### New Features:
- **Global Task Columns Toggle Button**: Added "Show/Hide Tasks" button that toggles all task columns at once
- **Custom Task Types Support**: Dynamically loads and displays custom task types from the project
- **State Preservation**: Saves individual column states when hiding all, restores them when showing all

#### New Props:
```typescript
interface Props {
  visibleColumns: Record<string, boolean>;  // Changed from fixed interface to Record
  projectId?: number;  // Added to load custom task types
}
```

#### New State:
```typescript
const customTaskTypes = ref<string[]>([])  // Custom task types from project
const savedTaskColumnStates = ref<Record<string, boolean>>({})  // Saved states for toggle
```

#### New Functions:
- `loadCustomTaskTypes()`: Fetches custom task types from project API
- `toggleAllTaskColumns()`: Shows/hides all task columns while preserving individual states
- `formatTaskType()`: Formats task type names for display (e.g., "fx_setup" → "Fx Setup")

#### UI Changes:
```vue
<!-- New global toggle button -->
<Button variant="outline" size="sm" @click="toggleAllTaskColumns">
  <Eye v-if="!allTaskColumnsVisible" />
  <EyeOff v-else />
  {{ allTaskColumnsVisible ? 'Hide' : 'Show' }} Tasks
</Button>

<!-- Dynamic custom task type checkboxes -->
<SelectItem 
  v-for="customType in customTaskTypes" 
  :key="customType"
  :value="customType"
>
  <input type="checkbox" :checked="visibleColumns[customType]" />
  <span>{{ formatTaskType(customType) }}</span>
</SelectItem>
```

### 2. AssetBrowser Component (`frontend/src/components/asset/AssetBrowser.vue`)

#### New State:
```typescript
const customTaskTypes = ref<string[]>([])  // Custom task types from project
```

#### Updated Computed:
```typescript
// All available task types for assets (standard + custom)
const allTaskTypes = computed(() => {
  return ["modeling", "surfacing", "rigging", ...customTaskTypes.value];
});
```

#### New Function:
```typescript
const loadCustomTaskTypes = async () => {
  // Fetches project.custom_asset_task_types from API
  // Initializes visibility for custom types
}
```

#### Updated Template:
```vue
<!-- Pass projectId to ColumnVisibilityControl -->
<ColumnVisibilityControl
  v-model:visible-columns="visibleColumns"
  :project-id="projectId"
/>

<!-- Dynamic custom task column headers -->
<TableHead
  v-for="customType in customTaskTypes"
  :key="customType"
  v-if="visibleColumns[customType]"
>
  {{ formatTaskType(customType) }}
</TableHead>

<!-- Dynamic custom task cells -->
<TableCell 
  v-for="customType in customTaskTypes"
  :key="`${asset.id}-${customType}`"
  v-if="visibleColumns[customType]"
>
  <EditableTaskStatus
    :asset-id="asset.id"
    :task-type="customType"
    :status="asset.task_status?.[customType] || TaskStatus.NOT_STARTED"
    :task-id="getTaskId(asset, customType)"
  />
</TableCell>
```

## How It Works

### Loading Custom Task Types
1. When AssetBrowser mounts, it calls `loadCustomTaskTypes()`
2. Fetches project data from `/projects/{projectId}`
3. Extracts `custom_asset_task_types` array
4. Initializes visibility for custom types (default: visible)
5. Updates `visibleColumns` state

### Column Visibility Control
1. ColumnVisibilityControl receives `projectId` prop
2. On mount, loads custom task types from project
3. Renders checkboxes for standard + custom task types
4. Updates parent component's `visibleColumns` when toggled

### Global Toggle Behavior
1. **When all task columns are visible**:
   - Clicking "Hide Tasks" saves current state of each task column
   - Sets all task columns to hidden
   - Button shows "Show Tasks" with Eye icon

2. **When task columns are hidden or partially visible**:
   - Clicking "Show Tasks" restores saved states
   - If no saved states, shows all task columns
   - Button shows "Hide Tasks" with EyeOff icon

3. **State preservation**:
   - Individual column states are saved in `savedTaskColumnStates`
   - When restoring, uses saved states if available
   - Otherwise defaults to showing all

### Dynamic Table Rendering
1. Table headers loop through `customTaskTypes` array
2. Only renders columns where `visibleColumns[customType]` is true
3. Table cells render `EditableTaskStatus` for each custom type
4. Task status is retrieved from `asset.task_status[customType]`

## API Integration

### Project Endpoint
```
GET /projects/{projectId}
```

**Response includes:**
```json
{
  "id": 1,
  "name": "Project Name",
  "custom_asset_task_types": ["fx_setup", "lookdev", "grooming"],
  ...
}
```

### Assets Endpoint
```
GET /assets/?project_id={projectId}
```

**Response includes task_status for all types:**
```json
{
  "id": 1,
  "name": "Asset Name",
  "task_status": {
    "modeling": "in_progress",
    "surfacing": "not_started",
    "rigging": "approved",
    "fx_setup": "not_started",  // Custom type
    "lookdev": "in_progress"     // Custom type
  },
  ...
}
```

## Testing

### Manual Testing
Open `frontend/test-custom-task-columns.html` in a browser:

1. **Test 1**: Load custom task types from project
   - Verifies API integration
   - Shows list of custom types
   - Initializes column visibility

2. **Test 2**: Column visibility control
   - Toggle individual columns
   - Test global show/hide button
   - Verify state preservation

3. **Test 3**: Asset table with custom columns
   - Loads assets with task status
   - Renders dynamic columns
   - Shows/hides based on visibility settings

### Integration Testing
1. Create custom task types in project settings
2. Create assets with tasks of custom types
3. Open asset browser in table view
4. Verify custom columns appear in dropdown
5. Toggle individual custom columns
6. Use global "Show/Hide Tasks" button
7. Verify column states are preserved

## Benefits

1. **Dynamic Support**: Automatically adapts to project-specific custom task types
2. **User Control**: Fine-grained control over which columns to display
3. **Quick Toggle**: Global button for fast show/hide of all task columns
4. **State Preservation**: Remembers individual column preferences when using global toggle
5. **Consistent UX**: Same interaction pattern for standard and custom task types

### 3. Thumbnail Toggle Button

#### Replaced Component:
- Removed `ThumbnailToggle.vue` checkbox component
- Replaced with button matching task columns toggle style

#### New Button:
```vue
<Button variant="outline" size="sm" @click="toggleThumbnails">
  <ImageIcon v-if="!showThumbnails" />
  <ImageOff v-else />
  {{ showThumbnails ? 'Hide' : 'Show' }} Thumbnails
</Button>
```

#### New Function:
```typescript
const toggleThumbnails = () => {
  showThumbnails.value = !showThumbnails.value;
  // Sync with column visibility
  visibleColumns.value.thumbnail = showThumbnails.value;
};
```

#### Benefits:
- Consistent UI with task columns toggle
- More compact and professional appearance
- Clearer visual feedback with icons
- Better alignment with other controls

## UI Consistency

All toggle buttons now follow the same pattern:
- **Show/Hide Tasks**: Eye/EyeOff icons
- **Show/Hide Thumbnails**: ImageIcon/ImageOff icons
- Same button style (outline, small size)
- Same text pattern: "Show/Hide [Feature]"

## Future Enhancements

1. **Column Reordering**: Drag-and-drop to reorder columns
2. **Column Grouping**: Group related task types together
3. **Saved Presets**: Save and load column visibility presets
4. **Per-User Preferences**: Store column preferences per user in database
5. **Column Width Adjustment**: Resize columns dynamically