245 lines
8.4 KiB
HTML
245 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Shot Detail Panel - Tabbed Interface Test</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
}
|
|
.test-section {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
border-bottom: 2px solid #007bff;
|
|
padding-bottom: 10px;
|
|
}
|
|
h2 {
|
|
color: #555;
|
|
margin-top: 0;
|
|
}
|
|
.status {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
.status.success {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
.status.info {
|
|
background: #d1ecf1;
|
|
color: #0c5460;
|
|
}
|
|
.feature-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
.feature-list li {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.feature-list li:before {
|
|
content: "✓ ";
|
|
color: #28a745;
|
|
font-weight: bold;
|
|
margin-right: 8px;
|
|
}
|
|
.tab-preview {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin: 20px 0;
|
|
padding: 10px;
|
|
background: #f8f9fa;
|
|
border-radius: 4px;
|
|
}
|
|
.tab-item {
|
|
padding: 8px 16px;
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
.tab-item:hover {
|
|
background: #e9ecef;
|
|
}
|
|
.tab-item.active {
|
|
background: #007bff;
|
|
color: white;
|
|
border-color: #007bff;
|
|
}
|
|
code {
|
|
background: #f4f4f4;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 13px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🎬 Shot Detail Panel - Tabbed Interface</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>Implementation Status <span class="status success">✓ Complete</span></h2>
|
|
<p>The Shot Detail Panel has been enhanced with a tabbed interface for better organization of shot information.</p>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Tab Structure</h2>
|
|
<div class="tab-preview">
|
|
<div class="tab-item active">Notes</div>
|
|
<div class="tab-item">Tasks</div>
|
|
<div class="tab-item">Assets</div>
|
|
<div class="tab-item">References</div>
|
|
<div class="tab-item">Design</div>
|
|
</div>
|
|
<p>Five tabs organize different aspects of shot information:</p>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Tab Details</h2>
|
|
|
|
<h3>1. Notes Tab</h3>
|
|
<ul class="feature-list">
|
|
<li>Production notes and comments</li>
|
|
<li>"Add Note" button for coordinators/admins</li>
|
|
<li>Empty state with helpful message</li>
|
|
<li>Icon: MessageSquare</li>
|
|
</ul>
|
|
|
|
<h3>2. Tasks Tab</h3>
|
|
<ul class="feature-list">
|
|
<li>List of all tasks for the shot</li>
|
|
<li>Task status badges and assignment info</li>
|
|
<li>"Add Task" button for coordinators/admins</li>
|
|
<li>Click to open task detail panel</li>
|
|
<li>Loading and empty states</li>
|
|
</ul>
|
|
|
|
<h3>3. Assets Tab</h3>
|
|
<ul class="feature-list">
|
|
<li>Linked assets used in the shot</li>
|
|
<li>"Link Asset" button for coordinators/admins</li>
|
|
<li>Empty state with helpful message</li>
|
|
<li>Icon: Package</li>
|
|
</ul>
|
|
|
|
<h3>4. References Tab</h3>
|
|
<ul class="feature-list">
|
|
<li>Reference images, videos, and documents</li>
|
|
<li>"Upload Reference" button (all users)</li>
|
|
<li>Empty state with helpful message</li>
|
|
<li>Icon: Image</li>
|
|
</ul>
|
|
|
|
<h3>5. Design Tab</h3>
|
|
<ul class="feature-list">
|
|
<li>Camera notes</li>
|
|
<li>Lighting notes</li>
|
|
<li>Animation notes</li>
|
|
<li>"Edit Design" button for coordinators/admins</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Features Implemented</h2>
|
|
<ul class="feature-list">
|
|
<li>Tabbed interface using shadcn-vue Tabs component</li>
|
|
<li>Progress overview section above tabs</li>
|
|
<li>Role-based permissions for actions</li>
|
|
<li>Empty states for all tabs</li>
|
|
<li>Consistent action buttons across tabs</li>
|
|
<li>New event emitters for tab actions</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>New Event Emitters</h2>
|
|
<p>The component now emits the following events:</p>
|
|
<ul>
|
|
<li><code>create-note</code> - When user clicks "Add Note"</li>
|
|
<li><code>link-asset</code> - When user clicks "Link Asset"</li>
|
|
<li><code>upload-reference</code> - When user clicks "Upload Reference"</li>
|
|
<li><code>edit-design</code> - When user clicks "Edit Design"</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Permission Logic</h2>
|
|
<table style="width: 100%; border-collapse: collapse;">
|
|
<thead>
|
|
<tr style="background: #f8f9fa;">
|
|
<th style="padding: 8px; text-align: left; border: 1px solid #dee2e6;">Action</th>
|
|
<th style="padding: 8px; text-align: left; border: 1px solid #dee2e6;">Who Can Access</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td style="padding: 8px; border: 1px solid #dee2e6;">Add Note</td>
|
|
<td style="padding: 8px; border: 1px solid #dee2e6;">Coordinators & Admins</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 8px; border: 1px solid #dee2e6;">Add Task</td>
|
|
<td style="padding: 8px; border: 1px solid #dee2e6;">Coordinators & Admins</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 8px; border: 1px solid #dee2e6;">Link Asset</td>
|
|
<td style="padding: 8px; border: 1px solid #dee2e6;">Coordinators & Admins</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 8px; border: 1px solid #dee2e6;">Upload Reference</td>
|
|
<td style="padding: 8px; border: 1px solid #dee2e6;">All Users</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 8px; border: 1px solid #dee2e6;">Edit Design</td>
|
|
<td style="padding: 8px; border: 1px solid #dee2e6;">Coordinators & Admins</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Testing Instructions</h2>
|
|
<ol>
|
|
<li>Start the frontend development server: <code>npm run dev</code></li>
|
|
<li>Navigate to a project's shots view</li>
|
|
<li>Click on any shot to open the detail panel</li>
|
|
<li>Verify all 5 tabs are visible and clickable</li>
|
|
<li>Check that the Tasks tab shows existing tasks</li>
|
|
<li>Verify action buttons appear based on user role</li>
|
|
<li>Test tab switching and content display</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Next Steps</h2>
|
|
<ul class="feature-list">
|
|
<li>Implement actual notes functionality (backend + frontend)</li>
|
|
<li>Implement asset linking functionality</li>
|
|
<li>Implement reference file upload and display</li>
|
|
<li>Implement design notes editing</li>
|
|
<li>Add real data loading for each tab</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Component Location</h2>
|
|
<p><code>frontend/src/components/shot/ShotDetailPanel.vue</code></p>
|
|
</div>
|
|
</body>
|
|
</html>
|