249 lines
14 KiB
HTML
249 lines
14 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 Delete Dialog - Alert Components Test</title>
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* Basic alert styles for testing */
|
|
.alert-default {
|
|
@apply relative w-full rounded-lg border px-4 py-3 text-sm bg-background text-foreground;
|
|
}
|
|
.alert-destructive {
|
|
@apply relative w-full rounded-lg border px-4 py-3 text-sm border-red-200 bg-red-50 text-red-800;
|
|
}
|
|
.alert-warning {
|
|
@apply border-orange-200 bg-orange-50 text-orange-800;
|
|
}
|
|
.alert-success {
|
|
@apply border-green-200 bg-green-50 text-green-800;
|
|
}
|
|
.alert-info {
|
|
@apply border-blue-200 bg-blue-50 text-blue-800;
|
|
}
|
|
.alert-title {
|
|
@apply mb-1 font-medium leading-none tracking-tight;
|
|
}
|
|
.alert-description {
|
|
@apply text-sm leading-relaxed;
|
|
}
|
|
.alert-icon {
|
|
@apply absolute left-4 top-4 h-4 w-4;
|
|
}
|
|
.alert-content {
|
|
@apply pl-7;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 p-8">
|
|
<div id="app">
|
|
<div class="max-w-4xl mx-auto space-y-6">
|
|
<h1 class="text-2xl font-bold mb-6">Shot Delete Dialog - Alert Components Test</h1>
|
|
|
|
<!-- Error Alert -->
|
|
<div class="space-y-4">
|
|
<h2 class="text-lg font-semibold">Error State</h2>
|
|
<div class="alert-default alert-destructive">
|
|
<svg class="alert-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<div class="alert-content">
|
|
<h5 class="alert-title">Failed to load deletion information</h5>
|
|
<div class="alert-description">Unable to connect to the server. Please check your connection and try again.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Affected Users Warning -->
|
|
<div class="space-y-4">
|
|
<h2 class="text-lg font-semibold">Affected Users Warning</h2>
|
|
<div class="alert-default alert-warning">
|
|
<svg class="alert-icon text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
|
|
</svg>
|
|
<div class="alert-content">
|
|
<h5 class="alert-title text-orange-800">3 users will be affected</h5>
|
|
<div class="alert-description text-orange-700">
|
|
<p class="mb-3">The following users have work associated with this shot that will be marked as deleted:</p>
|
|
<div class="max-h-40 overflow-y-auto space-y-2">
|
|
<div class="flex items-center justify-between p-2 bg-white rounded border">
|
|
<div class="flex-1">
|
|
<div class="font-medium text-sm">John Smith</div>
|
|
<div class="text-xs text-gray-600">john.smith@studio.com • Artist</div>
|
|
</div>
|
|
<div class="text-xs text-gray-600 text-right">
|
|
<div>2 tasks</div>
|
|
<div>1 submission</div>
|
|
<div class="mt-1">Last active: Dec 14, 2025</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between p-2 bg-white rounded border">
|
|
<div class="flex-1">
|
|
<div class="font-medium text-sm">Sarah Johnson</div>
|
|
<div class="text-xs text-gray-600">sarah.johnson@studio.com • Director</div>
|
|
</div>
|
|
<div class="text-xs text-gray-600 text-right">
|
|
<div>1 task</div>
|
|
<div>3 notes</div>
|
|
<div class="mt-1">Last active: Dec 13, 2025</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- No Affected Users Success -->
|
|
<div class="space-y-4">
|
|
<h2 class="text-lg font-semibold">No Affected Users</h2>
|
|
<div class="alert-default alert-success">
|
|
<svg class="alert-icon text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<div class="alert-content">
|
|
<div class="alert-description text-green-800">
|
|
No users will be affected by this deletion.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Preservation Info -->
|
|
<div class="space-y-4">
|
|
<h2 class="text-lg font-semibold">Data Preservation Notice</h2>
|
|
<div class="alert-default alert-info">
|
|
<svg class="alert-icon text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
|
</svg>
|
|
<div class="alert-content">
|
|
<h5 class="alert-title text-blue-800">Data Preservation</h5>
|
|
<div class="alert-description text-blue-700">
|
|
All data will be preserved in the database and can be recovered by administrators.
|
|
Files will remain on the server unchanged. This is a soft deletion, not permanent removal.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Complete Dialog Preview -->
|
|
<div class="space-y-4">
|
|
<h2 class="text-lg font-semibold">Complete Dialog Preview</h2>
|
|
<div class="bg-white rounded-lg border shadow-lg p-6 max-w-2xl">
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<svg class="h-5 w-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
|
|
</svg>
|
|
<h3 class="text-lg font-semibold">Soft Delete Shot: SH001_Opening</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600 mb-6">
|
|
This will mark the shot and all related data as deleted while preserving it for potential recovery.
|
|
The data will be hidden from normal operations but can be restored by administrators.
|
|
</p>
|
|
|
|
<div class="space-y-4">
|
|
<!-- Impact Summary -->
|
|
<div class="rounded-lg border bg-gray-50 p-4">
|
|
<h4 class="font-medium mb-3">Deletion Impact Summary</h4>
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 text-sm">
|
|
<div class="flex items-center gap-2">
|
|
<span>5 tasks</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span>3 submissions</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span>2 attachments</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span>7 notes</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span>1 review</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span>2.5 MB files</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Affected Users Alert -->
|
|
<div class="alert-default alert-warning">
|
|
<svg class="alert-icon text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
|
|
</svg>
|
|
<div class="alert-content">
|
|
<h5 class="alert-title text-orange-800">2 users will be affected</h5>
|
|
<div class="alert-description text-orange-700">
|
|
<p class="mb-3">The following users have work associated with this shot that will be marked as deleted:</p>
|
|
<div class="space-y-2">
|
|
<div class="flex items-center justify-between p-2 bg-white rounded border">
|
|
<div class="flex-1">
|
|
<div class="font-medium text-sm">Alice Cooper</div>
|
|
<div class="text-xs text-gray-600">alice.cooper@studio.com • Artist</div>
|
|
</div>
|
|
<div class="text-xs text-gray-600 text-right">
|
|
<div>3 tasks</div>
|
|
<div>2 submissions</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Preservation Alert -->
|
|
<div class="alert-default alert-info">
|
|
<svg class="alert-icon text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
|
</svg>
|
|
<div class="alert-content">
|
|
<h5 class="alert-title text-blue-800">Data Preservation</h5>
|
|
<div class="alert-description text-blue-700">
|
|
All data will be preserved in the database and can be recovered by administrators.
|
|
Files will remain on the server unchanged. This is a soft deletion, not permanent removal.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirmation Input -->
|
|
<div class="space-y-2">
|
|
<label class="text-sm font-medium">
|
|
Type <code class="bg-gray-100 px-1 py-0.5 rounded text-sm">SH001_Opening</code> to confirm soft deletion:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
placeholder="Enter shot name to confirm"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md font-mono text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-2 mt-6">
|
|
<button class="px-4 py-2 border border-gray-300 rounded-md text-sm hover:bg-gray-50">
|
|
Cancel
|
|
</button>
|
|
<button class="px-4 py-2 bg-red-600 text-white rounded-md text-sm hover:bg-red-700 disabled:opacity-50" disabled>
|
|
Soft Delete Shot and 5 Tasks
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const { createApp } = Vue
|
|
|
|
createApp({
|
|
data() {
|
|
return {
|
|
message: 'Shot Delete Dialog with Alert Components'
|
|
}
|
|
}
|
|
}).mount('#app')
|
|
</script>
|
|
</body>
|
|
</html> |