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:

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

New State:

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:

<!-- 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:

const customTaskTypes = ref<string[]>([])  // Custom task types from project

Updated Computed:

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

New Function:

const loadCustomTaskTypes = async () => {
  // Fetches project.custom_asset_task_types from API
  // Initializes visibility for custom types
}

Updated Template:

<!-- 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:

{
  "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:

{
  "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:

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

New Function:

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