Init Repo
This commit is contained in:
@@ -0,0 +1,179 @@
|
||||
# Asset Browser Table Refactor Design Document
|
||||
|
||||
## Overview
|
||||
|
||||
This design refactors the Asset Browser table implementation to use TanStack Table, matching the architecture and behavior of the Shot Data Table. The refactor will improve performance, consistency, and maintainability while preserving all existing functionality.
|
||||
|
||||
## Architecture
|
||||
|
||||
### Current Architecture
|
||||
- **AssetBrowser.vue**: Monolithic component with custom table implementation
|
||||
- Manual table rendering using shadcn-vue Table components
|
||||
- Custom row selection and sorting logic
|
||||
- Direct DOM manipulation for some interactions
|
||||
|
||||
### Target Architecture
|
||||
- **AssetBrowser.vue**: Container component managing state and data
|
||||
- **AssetsDataTable.vue**: Dedicated table component using TanStack Table
|
||||
- **columns.ts**: Column definitions with proper typing and behavior
|
||||
- Composable-based state management for table interactions
|
||||
|
||||
## Components and Interfaces
|
||||
|
||||
### New Components
|
||||
|
||||
#### AssetsDataTable.vue
|
||||
```typescript
|
||||
interface Props {
|
||||
columns: ColumnDef<Asset>[]
|
||||
data: Asset[]
|
||||
sorting: SortingState
|
||||
columnVisibility: VisibilityState
|
||||
allTaskTypes: string[]
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
'update:sorting': [sorting: SortingState]
|
||||
'update:columnVisibility': [visibility: VisibilityState]
|
||||
'update:rowSelection': [selection: Record<string, boolean>]
|
||||
'row-click': [asset: Asset, event: MouseEvent]
|
||||
'selection-cleared': []
|
||||
}
|
||||
```
|
||||
|
||||
#### columns.ts
|
||||
```typescript
|
||||
interface AssetColumnMeta {
|
||||
projectId: number
|
||||
categories: Array<{ value: string; label: string; icon: any }>
|
||||
onEdit: (asset: Asset) => void
|
||||
onDelete: (asset: Asset) => void
|
||||
onViewTasks: (asset: Asset) => void
|
||||
onTaskStatusUpdated: (assetId: number, taskType: string, newStatus: TaskStatus) => void
|
||||
onBulkTaskStatusChange?: (taskType: string, status: TaskStatus) => void
|
||||
getSelectedCount?: () => number
|
||||
getAllStatusOptions?: () => Array<{ id: string; name: string; color?: string; is_system?: boolean }>
|
||||
}
|
||||
|
||||
export const createAssetColumns = (
|
||||
allTaskTypes: string[],
|
||||
meta: AssetColumnMeta
|
||||
): ColumnDef<Asset>[] => { ... }
|
||||
```
|
||||
|
||||
### Modified Components
|
||||
|
||||
#### AssetBrowser.vue Changes
|
||||
- Remove custom table implementation
|
||||
- Add TanStack Table state management
|
||||
- Integrate AssetsDataTable component
|
||||
- Maintain existing filtering and search logic
|
||||
- Preserve detail panel integration
|
||||
|
||||
## Data Models
|
||||
|
||||
### TanStack Table State
|
||||
```typescript
|
||||
// Table state management
|
||||
const sorting = ref<SortingState>([])
|
||||
const columnVisibility = ref<VisibilityState>({})
|
||||
const rowSelection = ref<Record<string, boolean>>({})
|
||||
|
||||
// Column visibility defaults
|
||||
const defaultColumnVisibility = {
|
||||
name: true,
|
||||
category: true,
|
||||
status: true,
|
||||
thumbnail: false,
|
||||
modeling: true,
|
||||
surfacing: true,
|
||||
rigging: true,
|
||||
description: true,
|
||||
updatedAt: true
|
||||
}
|
||||
```
|
||||
|
||||
### Asset Column Structure
|
||||
```typescript
|
||||
// Standard columns
|
||||
- select: Checkbox column for row selection
|
||||
- thumbnail: Asset thumbnail display
|
||||
- name: Asset name with category icon
|
||||
- category: Asset category badge
|
||||
- status: Asset status badge
|
||||
- description: Asset description text
|
||||
- updatedAt: Last updated timestamp
|
||||
|
||||
// Dynamic task columns (based on project configuration)
|
||||
- modeling: Editable task status
|
||||
- surfacing: Editable task status
|
||||
- rigging: Editable task status (conditional)
|
||||
- [customTaskType]: Dynamic custom task columns
|
||||
|
||||
// Actions column
|
||||
- actions: Dropdown menu with edit/delete/view tasks
|
||||
```
|
||||
|
||||
## Correctness Properties
|
||||
|
||||
*A property is a characteristic or behavior that should hold true across all valid executions of a system-essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
|
||||
|
||||
### Property 1: Table Behavior Consistency
|
||||
*For any* table interaction (row selection, column sorting, bulk operations, dropdown actions), the asset table should behave identically to the shot table implementation
|
||||
**Validates: Requirements 1.2, 1.3, 1.4, 2.4, 4.2**
|
||||
|
||||
### Property 2: Required Column Presence
|
||||
*For any* asset table rendering, all required asset-specific columns (name, category, status, task statuses, description, updated date) should be present and functional
|
||||
**Validates: Requirements 3.1**
|
||||
|
||||
### Property 3: Column Visibility Persistence
|
||||
*For any* column visibility change, the settings should be persisted to session storage and restored correctly on component mount
|
||||
**Validates: Requirements 2.5, 5.1**
|
||||
|
||||
### Property 4: Bulk Operations Completeness
|
||||
*For any* bulk operation scenario (multiple selection, status changes, UI feedback), the system should handle all states correctly including empty selection, optimistic updates, and completion messages
|
||||
**Validates: Requirements 4.1, 4.3, 4.4, 4.5**
|
||||
|
||||
### Property 5: Feature Preservation Round Trip
|
||||
*For any* existing asset browser feature (task status editing, thumbnails, filtering, detail panel, view modes), the functionality should work identically before and after the refactor
|
||||
**Validates: Requirements 3.2, 3.3, 3.4, 3.5, 5.2, 5.3, 5.4**
|
||||
|
||||
## Error Handling
|
||||
|
||||
### Table Rendering Errors
|
||||
- Graceful fallback to loading state if column creation fails
|
||||
- Error boundaries around table component to prevent crashes
|
||||
- Validation of column definitions before rendering
|
||||
|
||||
### Selection State Errors
|
||||
- Clear invalid selections on data changes
|
||||
- Handle edge cases in range selection (empty data, filtered results)
|
||||
- Prevent selection of non-existent rows
|
||||
|
||||
### Bulk Operation Errors
|
||||
- Show error messages for failed bulk operations
|
||||
- Revert optimistic updates on API failures
|
||||
- Disable bulk controls during operations
|
||||
|
||||
## Testing Strategy
|
||||
|
||||
### Unit Tests
|
||||
- Column definition creation with various task type configurations
|
||||
- Row selection logic with different modifier key combinations
|
||||
- Column visibility state management and persistence
|
||||
- Bulk operation state transitions
|
||||
|
||||
### Property-Based Tests
|
||||
- **Property 1**: Table behavior consistency across different interaction patterns and datasets
|
||||
- **Property 2**: Required column presence verification across different project configurations
|
||||
- **Property 3**: Column visibility persistence round-trip testing with various visibility states
|
||||
- **Property 4**: Bulk operations completeness testing across different selection scenarios
|
||||
- **Property 5**: Feature preservation verification through before/after comparison testing
|
||||
|
||||
### Integration Tests
|
||||
- Asset table integration with detail panel
|
||||
- Filter and search integration with new table structure
|
||||
- Task status editing integration with backend services
|
||||
- Bulk operations integration with API endpoints
|
||||
|
||||
The testing approach will use **fast-check** for property-based testing, with each property test configured to run a minimum of 100 iterations to ensure comprehensive coverage of edge cases and state combinations.
|
||||
@@ -0,0 +1,76 @@
|
||||
# Requirements Document
|
||||
|
||||
## Introduction
|
||||
|
||||
This feature refactors the Asset Browser table structure to match the Shot Data Table implementation, providing better performance, consistency, and user experience across the VFX Project Management System.
|
||||
|
||||
## Glossary
|
||||
|
||||
- **Asset Browser**: The component that displays and manages assets in a project
|
||||
- **Shot Data Table**: The TanStack Table-based component used for displaying shots
|
||||
- **TanStack Table**: A powerful table library providing sorting, filtering, and selection capabilities
|
||||
- **Asset Data Table**: The new component to be created for assets using TanStack Table
|
||||
- **Column Definition**: Configuration objects that define table columns and their behavior
|
||||
- **Row Selection**: The ability to select single or multiple table rows with keyboard modifiers
|
||||
|
||||
## Requirements
|
||||
|
||||
### Requirement 1
|
||||
|
||||
**User Story:** As a user, I want the asset browser table to have the same structure and behavior as the shot browser table, so that I have a consistent experience across different entity types.
|
||||
|
||||
#### Acceptance Criteria
|
||||
|
||||
1. WHEN viewing assets in table mode, THE Asset Browser SHALL use a TanStack Table-based component similar to ShotsDataTable
|
||||
2. WHEN interacting with the asset table, THE system SHALL provide the same row selection behavior as the shot table (single click, ctrl+click, shift+click)
|
||||
3. WHEN using column sorting and visibility controls, THE asset table SHALL behave identically to the shot table
|
||||
4. WHEN performing bulk operations, THE asset table SHALL support the same selection patterns as the shot table
|
||||
5. WHEN the table renders, THE system SHALL maintain the same performance characteristics as the shot table
|
||||
|
||||
### Requirement 2
|
||||
|
||||
**User Story:** As a developer, I want the asset table to use the same architectural patterns as the shot table, so that the codebase is maintainable and consistent.
|
||||
|
||||
#### Acceptance Criteria
|
||||
|
||||
1. WHEN implementing the asset table, THE system SHALL create an AssetsDataTable component following the same pattern as ShotsDataTable
|
||||
2. WHEN defining asset columns, THE system SHALL create a columns.ts file with column definitions similar to shot columns
|
||||
3. WHEN handling table state, THE system SHALL use the same TanStack Table state management patterns
|
||||
4. WHEN implementing row actions, THE system SHALL use the same dropdown menu pattern as shots
|
||||
5. WHEN managing column visibility, THE system SHALL persist settings using the same session storage approach
|
||||
|
||||
### Requirement 3
|
||||
|
||||
**User Story:** As a user, I want asset-specific columns and functionality to be properly integrated into the new table structure, so that I don't lose any existing features.
|
||||
|
||||
#### Acceptance Criteria
|
||||
|
||||
1. WHEN viewing asset columns, THE system SHALL display all current asset-specific columns (name, category, status, task statuses, description, updated date)
|
||||
2. WHEN editing task statuses inline, THE system SHALL maintain the same EditableTaskStatus functionality
|
||||
3. WHEN viewing thumbnails, THE system SHALL preserve the thumbnail column functionality
|
||||
4. WHEN using category filtering, THE system SHALL maintain all existing filtering capabilities
|
||||
5. WHEN performing asset-specific actions (edit, delete, view tasks), THE system SHALL preserve all current functionality
|
||||
|
||||
### Requirement 4
|
||||
|
||||
**User Story:** As a user, I want the asset table to support the same bulk operations as the shot table, so that I can efficiently manage multiple assets.
|
||||
|
||||
#### Acceptance Criteria
|
||||
|
||||
1. WHEN selecting multiple assets, THE system SHALL provide bulk task status change functionality
|
||||
2. WHEN using bulk operations, THE system SHALL show the same popover interface as the shot table
|
||||
3. WHEN performing bulk status changes, THE system SHALL update all selected assets optimistically
|
||||
4. WHEN bulk operations complete, THE system SHALL show appropriate success/error messages
|
||||
5. WHEN no assets are selected, THE system SHALL hide bulk operation controls
|
||||
|
||||
### Requirement 5
|
||||
|
||||
**User Story:** As a user, I want the migration to the new table structure to be seamless, so that my existing preferences and workflows are preserved.
|
||||
|
||||
#### Acceptance Criteria
|
||||
|
||||
1. WHEN the new table loads, THE system SHALL preserve existing column visibility preferences
|
||||
2. WHEN using the detail panel, THE system SHALL maintain the same behavior as before
|
||||
3. WHEN switching between view modes, THE system SHALL preserve the same functionality
|
||||
4. WHEN using search and filters, THE system SHALL maintain all existing filter capabilities
|
||||
5. WHEN the migration is complete, THE system SHALL remove the old table implementation without breaking changes
|
||||
@@ -0,0 +1,131 @@
|
||||
# Implementation Plan
|
||||
|
||||
- [x] 1. Create asset table column definitions
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- Create `frontend/src/components/asset/columns.ts` file with asset-specific column definitions
|
||||
- Define AssetColumnMeta interface with required callbacks and data
|
||||
- Implement createAssetColumns function following the shot columns pattern
|
||||
- Add asset-specific columns: select, thumbnail, name, category, status, task columns, description, updatedAt, actions
|
||||
- _Requirements: 1.1, 2.2, 3.1_
|
||||
|
||||
- [ ]* 1.1 Write property test for required column presence
|
||||
- **Property 2: Required column presence**
|
||||
- **Validates: Requirements 3.1**
|
||||
|
||||
- [x] 2. Create AssetsDataTable component
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- Create `frontend/src/components/asset/AssetsDataTable.vue` component
|
||||
- Implement TanStack Table integration with proper props and emits
|
||||
- Add row selection logic with shift/ctrl support following ShotsDataTable pattern
|
||||
- Implement table rendering with FlexRender
|
||||
- _Requirements: 1.2, 2.1, 2.3_
|
||||
|
||||
- [ ]* 2.1 Write property test for table behavior consistency
|
||||
- **Property 1: Table behavior consistency**
|
||||
- **Validates: Requirements 1.2, 1.3, 1.4, 2.4, 4.2**
|
||||
|
||||
- [x] 3. Integrate TanStack Table state in AssetBrowser
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- Add TanStack Table state management (sorting, columnVisibility, rowSelection) to AssetBrowser.vue
|
||||
- Replace custom table implementation with AssetsDataTable component
|
||||
- Implement column visibility persistence using session storage
|
||||
- Update table toolbar to work with new table state
|
||||
- _Requirements: 1.1, 2.3, 2.5_
|
||||
|
||||
- [ ]* 3.1 Write property test for column visibility persistence
|
||||
- **Property 3: Column visibility persistence**
|
||||
- **Validates: Requirements 2.5, 5.1**
|
||||
|
||||
- [x] 4. Implement bulk operations for assets
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- Add bulk task status change functionality to asset columns
|
||||
- Implement popover interface for bulk operations matching shot table
|
||||
- Add optimistic updates for bulk status changes
|
||||
- Integrate with existing task status update handlers
|
||||
- _Requirements: 4.1, 4.2, 4.3_
|
||||
|
||||
- [ ]* 4.1 Write property test for bulk operations completeness
|
||||
- **Property 4: Bulk operations completeness**
|
||||
- **Validates: Requirements 4.1, 4.3, 4.4, 4.5**
|
||||
|
||||
- [x] 5. Preserve existing asset functionality
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- Ensure EditableTaskStatus components work correctly in new table
|
||||
- Maintain thumbnail column functionality
|
||||
- Preserve category filtering integration
|
||||
- Keep all asset-specific actions (edit, delete, view tasks) working
|
||||
- Ensure detail panel integration remains functional
|
||||
- _Requirements: 3.2, 3.3, 3.4, 3.5, 5.2_
|
||||
|
||||
- [ ]* 5.1 Write property test for feature preservation
|
||||
- **Property 5: Feature preservation round trip**
|
||||
- **Validates: Requirements 3.2, 3.3, 3.4, 3.5, 5.2, 5.3, 5.4**
|
||||
|
||||
- [x] 6. Update asset table toolbar integration
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- Modify existing toolbar components to work with TanStack Table state
|
||||
- Ensure column visibility controls work with new columnVisibility state
|
||||
- Update search and filtering to work with new table structure
|
||||
- Maintain view mode switching functionality
|
||||
- _Requirements: 1.3, 5.3, 5.4_
|
||||
|
||||
- [x] 7. Remove old table implementation
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- Remove custom table rendering code from AssetBrowser.vue
|
||||
- Clean up unused table-related methods and state
|
||||
- Update imports and dependencies
|
||||
- Ensure no breaking changes to external interfaces
|
||||
- _Requirements: 5.5_
|
||||
|
||||
- [ ] 8. Checkpoint - Ensure all tests pass
|
||||
- Ensure all tests pass, ask the user if questions arise.
|
||||
|
||||
- [ ]* 8.1 Write unit tests for column definitions
|
||||
- Test createAssetColumns function with various task type configurations
|
||||
- Test column meta callbacks and data handling
|
||||
- Test column visibility and sorting configurations
|
||||
- _Requirements: 2.2, 3.1_
|
||||
|
||||
- [ ]* 8.2 Write unit tests for AssetsDataTable component
|
||||
- Test component props and emits
|
||||
- Test row selection logic with different modifier keys
|
||||
- Test table rendering with various data sets
|
||||
- _Requirements: 1.2, 2.1_
|
||||
|
||||
- [ ]* 8.3 Write integration tests for asset browser
|
||||
- Test asset table integration with detail panel
|
||||
- Test filter and search integration with new table structure
|
||||
- Test task status editing integration
|
||||
- Test bulk operations integration
|
||||
- _Requirements: 3.2, 4.1, 5.2_
|
||||
Reference in New Issue
Block a user