179 lines
6.5 KiB
Markdown
179 lines
6.5 KiB
Markdown
# Asset Detail Panel Refactor
|
|
|
|
## Overview
|
|
Refactored the AssetDetailPanel to match the TaskDetailPanel layout with tabs at the top and a cleaner information structure. Also updated the interaction model to use double-click to launch the panel with slide-in/slide-out animations.
|
|
|
|
## Changes Made
|
|
|
|
### 0. Interaction Model
|
|
- **Double-Click to Open**: Asset detail panel now opens on double-click instead of single click
|
|
- In grid view: Double-click on asset card
|
|
- In list view: Double-click on table row
|
|
- **Single Click Selection**: Single click now only selects/deselects the asset
|
|
- **Slide Animations**: Panel slides in from the right when opening and slides out when closing
|
|
- Enter animation: 300ms ease-out transition
|
|
- Leave animation: 300ms ease-in transition
|
|
- Uses Vue's Transition component with transform classes
|
|
|
|
### 1. Layout Structure
|
|
- **Header**: Simplified to show only asset name, status badge, and close button
|
|
- **Tabs**: Moved to top of panel (below header) with 3 tabs: Infos, Notes, References
|
|
- **Content**: Each tab has scrollable content area
|
|
|
|
### 2. Tab Structure
|
|
|
|
#### Infos Tab (Default)
|
|
Contains all asset information in a clean, organized layout:
|
|
- **Asset Name**: Large, prominent display
|
|
- **Category & Status**: Side-by-side badges
|
|
- **Description**: Full description text
|
|
- **Task Progress**: Progress bar showing completion percentage
|
|
- **Tasks List**: All tasks with their status and assignee
|
|
- Click on any task to view task details
|
|
- Shows task type, assignee name, and status badge
|
|
- **Timestamps**: Created and updated dates
|
|
|
|
#### Notes Tab
|
|
Shows all notes from all tasks associated with this asset:
|
|
- **Aggregated Notes**: Combines notes from all asset tasks
|
|
- **Task Context**: Each note shows which task it belongs to
|
|
- **Task Type Badge**: Visual indicator of the task type
|
|
- **Sorted by Date**: Newest notes first
|
|
- **Author & Timestamp**: Shows who created the note and when
|
|
- **Empty State**: Friendly message when no notes exist
|
|
|
|
#### References Tab
|
|
Shows all reference files (attachments) from all asset tasks:
|
|
- **Aggregated References**: Combines attachments from all asset tasks
|
|
- **Grid Layout**: 2-column responsive grid
|
|
- **Image Preview**: Shows thumbnail for image files
|
|
- **File Icon**: Generic icon for non-image files
|
|
- **Task Context**: Each reference shows which task it belongs to
|
|
- **Task Type Badge**: Visual indicator of the task type
|
|
- **Download Button**: Quick download action
|
|
- **File Info**: Name, task, and upload date
|
|
- **Empty State**: Friendly message when no references exist
|
|
|
|
### 3. New Components Created
|
|
|
|
#### AssetNotes.vue
|
|
- Displays aggregated notes from all asset tasks
|
|
- Shows task context (task name and type) for each note
|
|
- Sorted by date (newest first)
|
|
- Matches TaskNotes.vue layout style
|
|
|
|
#### AssetReferences.vue
|
|
- Displays aggregated reference files from all asset tasks
|
|
- Grid layout with image previews
|
|
- Shows task context for each reference
|
|
- Download functionality
|
|
- Matches TaskAttachments.vue layout style
|
|
|
|
### 4. Data Loading
|
|
- **Tasks**: Loaded when asset details are fetched
|
|
- **Notes**: Loaded after tasks are available, aggregated from all tasks
|
|
- **References**: Loaded after tasks are available, aggregated from all tasks
|
|
- **Watchers**: Automatically reload notes and references when tasks change
|
|
|
|
### 5. Removed Features
|
|
- Removed "Versions" tab (not implemented in backend)
|
|
- Removed separate "Add Task" button (tasks shown in Infos tab)
|
|
- Removed inline task creation UI
|
|
- Simplified header to match TaskDetailPanel
|
|
|
|
## Benefits
|
|
|
|
1. **Consistent UX**: Matches TaskDetailPanel layout for familiar user experience
|
|
2. **Better Organization**: Information is logically grouped in tabs
|
|
3. **Cleaner Header**: Less cluttered, more focused
|
|
4. **Aggregated Data**: Notes and references from all tasks in one place
|
|
5. **Task Context**: Easy to see which task each note/reference belongs to
|
|
6. **Responsive**: Works well on different screen sizes
|
|
7. **Scrollable Content**: Each tab has independent scrolling
|
|
|
|
## Technical Details
|
|
|
|
### Props
|
|
- `projectId: number` - The project ID
|
|
- `assetId: number` - The asset ID to display
|
|
|
|
### Emits
|
|
- `close` - Close the detail panel
|
|
- `select-task` - Navigate to task detail (when clicking a task)
|
|
|
|
### Data Structure
|
|
```typescript
|
|
interface Note {
|
|
id: number
|
|
content: string
|
|
author_name: string
|
|
created_at: string
|
|
task_name: string // Added for context
|
|
task_type: string // Added for context
|
|
}
|
|
|
|
interface Reference {
|
|
id: number
|
|
file_name: string
|
|
file_path: string
|
|
created_at: string
|
|
task_name: string // Added for context
|
|
task_type: string // Added for context
|
|
}
|
|
```
|
|
|
|
## Animation Details
|
|
|
|
### Slide-In Animation
|
|
- **Duration**: 300ms
|
|
- **Easing**: ease-out
|
|
- **Transform**: Slides from right (translate-x-full) to position (translate-x-0)
|
|
- **Trigger**: Double-click on asset card or table row
|
|
|
|
### Slide-Out Animation
|
|
- **Duration**: 300ms
|
|
- **Easing**: ease-in
|
|
- **Transform**: Slides from position (translate-x-0) to right (translate-x-full)
|
|
- **Trigger**: Click close button in panel header
|
|
|
|
### Implementation
|
|
```vue
|
|
<Transition
|
|
enter-active-class="transition-transform duration-300 ease-out"
|
|
enter-from-class="translate-x-full"
|
|
enter-to-class="translate-x-0"
|
|
leave-active-class="transition-transform duration-300 ease-in"
|
|
leave-from-class="translate-x-0"
|
|
leave-to-class="translate-x-full"
|
|
>
|
|
<div v-if="selectedAsset && isDetailPanelVisible" class="fixed right-0 ...">
|
|
<AssetDetailPanel ... />
|
|
</div>
|
|
</Transition>
|
|
```
|
|
|
|
## User Interaction Changes
|
|
|
|
### Before
|
|
- Single click on asset card/row → Opens detail panel
|
|
- No animations
|
|
|
|
### After
|
|
- Single click on asset card/row → Selects/deselects asset
|
|
- Double-click on asset card/row → Opens detail panel with slide-in animation
|
|
- Close button → Closes panel with slide-out animation
|
|
- Supports multi-select with Ctrl/Cmd + click
|
|
- Supports range select with Shift + click
|
|
|
|
## Future Enhancements
|
|
|
|
1. **Asset-Level Notes**: Add ability to create notes directly on the asset (not just task notes)
|
|
2. **Asset-Level References**: Add ability to upload references directly to the asset
|
|
3. **Filtering**: Add filters for notes and references by task type
|
|
4. **Search**: Add search functionality for notes content
|
|
5. **Versions Tab**: Implement version tracking when backend support is added
|
|
6. **Edit Asset**: Add inline editing capabilities
|
|
7. **Task Creation**: Add quick task creation from the Infos tab
|
|
8. **Keyboard Shortcuts**: Add Enter key to open detail panel for selected asset
|
|
9. **Animation Preferences**: Allow users to disable animations in settings
|