Init Repo
This commit is contained in:
@@ -0,0 +1,265 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user