LinkDesk/.kiro/specs/asset-browser-table-refactor/tasks.md

Implementation Plan

• 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

• 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

• 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

• 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

• 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

• 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

• 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