87 lines
3.0 KiB
HTML
87 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Task Status Manager Integration Test</title>
|
|
</head>
|
|
<body>
|
|
<h1>CustomTaskStatusManager Integration Test</h1>
|
|
|
|
<h2>Test Results:</h2>
|
|
<div id="results">
|
|
<h3>✅ Integration Complete</h3>
|
|
<ul>
|
|
<li>✅ CustomTaskStatusManager is imported in ProjectSettingsView.vue</li>
|
|
<li>✅ Component is added to the Tasks tab</li>
|
|
<li>✅ Component is positioned ABOVE CustomTaskTypeManager</li>
|
|
<li>✅ Separator is added between sections</li>
|
|
<li>✅ Proper layout with bg-card, rounded-lg, border, and p-6 classes</li>
|
|
<li>✅ Event handler @updated="handleTaskStatusesUpdated" is connected</li>
|
|
<li>✅ Handler function reloads project settings and shows toast notification</li>
|
|
</ul>
|
|
|
|
<h3>Component Structure in ProjectSettingsView:</h3>
|
|
<pre style="background: #f5f5f5; padding: 10px; border-radius: 5px;">
|
|
<TabsContent value="tasks" class="mt-6">
|
|
<div class="space-y-6">
|
|
<!-- Custom Task Status Manager (FIRST) -->
|
|
<div class="bg-card rounded-lg border p-6">
|
|
<CustomTaskStatusManager
|
|
:project-id="projectId"
|
|
@updated="handleTaskStatusesUpdated"
|
|
/>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<!-- Custom Task Type Manager (SECOND) -->
|
|
<div class="bg-card rounded-lg border p-6">
|
|
<CustomTaskTypeManager
|
|
ref="customTaskTypeManagerRef"
|
|
:project-id="projectId"
|
|
@updated="handleTaskTypesUpdated"
|
|
/>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<!-- Default Task Templates Editor (THIRD) -->
|
|
<div class="bg-card rounded-lg border p-6">
|
|
<DefaultTaskTemplatesEditor
|
|
ref="taskTemplatesEditorRef"
|
|
:project-id="projectId"
|
|
...
|
|
/>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
</pre>
|
|
|
|
<h3>Event Handler Implementation:</h3>
|
|
<pre style="background: #f5f5f5; padding: 10px; border-radius: 5px;">
|
|
const handleTaskStatusesUpdated = async () => {
|
|
// Reload project settings when task statuses are updated
|
|
await loadProjectSettings();
|
|
|
|
toast({
|
|
title: 'Task statuses updated',
|
|
description: 'Task status changes have been saved successfully.'
|
|
});
|
|
};
|
|
</pre>
|
|
</div>
|
|
|
|
<h2>Manual Verification Steps:</h2>
|
|
<ol>
|
|
<li>Navigate to a project's settings page</li>
|
|
<li>Click on the "Tasks" tab</li>
|
|
<li>Verify CustomTaskStatusManager appears at the top</li>
|
|
<li>Verify there's a separator line between sections</li>
|
|
<li>Verify CustomTaskTypeManager appears below</li>
|
|
<li>Verify DefaultTaskTemplatesEditor appears at the bottom</li>
|
|
<li>Test creating/editing a custom status and verify the toast notification appears</li>
|
|
</ol>
|
|
</body>
|
|
</html>
|