6.5 KiB

Raw Blame History

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

Consistent UX: Matches TaskDetailPanel layout for familiar user experience
Better Organization: Information is logically grouped in tabs
Cleaner Header: Less cluttered, more focused
Aggregated Data: Notes and references from all tasks in one place
Task Context: Easy to see which task each note/reference belongs to
Responsive: Works well on different screen sizes
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

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

<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

Asset-Level Notes: Add ability to create notes directly on the asset (not just task notes)
Asset-Level References: Add ability to upload references directly to the asset
Filtering: Add filters for notes and references by task type
Search: Add search functionality for notes content
Versions Tab: Implement version tracking when backend support is added
Edit Asset: Add inline editing capabilities
Task Creation: Add quick task creation from the Infos tab
Keyboard Shortcuts: Add Enter key to open detail panel for selected asset
Animation Preferences: Allow users to disable animations in settings

6.5 KiB Raw Blame History