feat: some fixes
This commit is contained in:
ivannoskov
@@ -12,10 +12,15 @@ import {
|
||||
ArrowLeft,
|
||||
Pencil,
|
||||
Archive,
|
||||
Trash2,
|
||||
Copy,
|
||||
Check,
|
||||
ExternalLink,
|
||||
Eye,
|
||||
LayoutList,
|
||||
Plus,
|
||||
BarChart3,
|
||||
FileText,
|
||||
Image,
|
||||
Video,
|
||||
} from "lucide-react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||||
@@ -43,6 +48,19 @@ import {
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "@/components/ui/tabs";
|
||||
import { TelegramPostPreview } from "@/components/telegram-post-preview";
|
||||
import type { Creative } from "@/lib/types/api";
|
||||
|
||||
// ============================================================================
|
||||
@@ -62,8 +80,8 @@ export default function CreativeDetailPage() {
|
||||
const [isEditing, setIsEditing] = useState(searchParams.get("edit") === "true");
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [viewMode, setViewMode] = useState<"preview" | "data">("preview");
|
||||
|
||||
// Edit form state
|
||||
const [name, setName] = useState("");
|
||||
const [text, setText] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -72,6 +90,7 @@ export default function CreativeDetailPage() {
|
||||
|
||||
useEffect(() => {
|
||||
loadCreative();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [workspaceId, creativeId]);
|
||||
|
||||
const loadCreative = async () => {
|
||||
@@ -110,8 +129,9 @@ export default function CreativeDetailPage() {
|
||||
|
||||
setCreative(updated);
|
||||
setIsEditing(false);
|
||||
} catch (err: any) {
|
||||
setError(err?.detail || "Не удалось сохранить");
|
||||
} catch (err) {
|
||||
const errorMessage = err && typeof err === 'object' && 'detail' in err ? (err as { detail?: string }).detail ?? "Не удалось сохранить" : "Не удалось сохранить";
|
||||
setError(errorMessage);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
@@ -121,8 +141,7 @@ export default function CreativeDetailPage() {
|
||||
if (!creative) return;
|
||||
|
||||
try {
|
||||
// Toggle archive status by updating via delete endpoint (soft delete)
|
||||
await creativesApi.delete(workspaceId, creativeId);
|
||||
await creativesApi.update(workspaceId, creativeId, { status: "archived" });
|
||||
router.push(`/dashboard/${workspaceId}/creatives`);
|
||||
} catch (err) {
|
||||
console.error("Failed to archive:", err);
|
||||
@@ -173,6 +192,8 @@ export default function CreativeDetailPage() {
|
||||
);
|
||||
}
|
||||
|
||||
const isActive = creative.status === "active";
|
||||
|
||||
return (
|
||||
<>
|
||||
<DashboardHeader
|
||||
@@ -183,7 +204,7 @@ export default function CreativeDetailPage() {
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4 max-w-3xl">
|
||||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
@@ -198,12 +219,8 @@ export default function CreativeDetailPage() {
|
||||
<h1 className="text-2xl font-bold tracking-tight">
|
||||
{creative.name}
|
||||
</h1>
|
||||
<Badge
|
||||
variant={
|
||||
creative.status === "active" ? "default" : "secondary"
|
||||
}
|
||||
>
|
||||
{creative.status === "active" ? "Активен" : "Архив"}
|
||||
<Badge variant={isActive ? "default" : "secondary"}>
|
||||
{isActive ? "Активен" : "Архив"}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-muted-foreground">
|
||||
@@ -214,6 +231,38 @@ export default function CreativeDetailPage() {
|
||||
|
||||
{canWrite && !isEditing && (
|
||||
<div className="flex gap-2">
|
||||
{isActive && (
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
>
|
||||
<Link href={`/dashboard/${workspaceId}/purchase-plans/${creative.project_id}?creative_id=${creative.id}`}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Создать размещение
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline">
|
||||
Дополнительно
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={`/dashboard/${workspaceId}/purchase-plans/${creative.project_id}`}>
|
||||
<LayoutList className="h-4 w-4 mr-2" />
|
||||
Все размещения
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={`/dashboard/${workspaceId}/analytics/placements?creative_id=${creative.id}`}>
|
||||
<BarChart3 className="h-4 w-4 mr-2" />
|
||||
Аналитика
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<Button variant="outline" onClick={() => setIsEditing(true)}>
|
||||
<Pencil className="h-4 w-4 mr-2" />
|
||||
Редактировать
|
||||
@@ -245,120 +294,209 @@ export default function CreativeDetailPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isEditing ? (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Редактирование</CardTitle>
|
||||
<CardDescription>
|
||||
Изменения не повлияют на существующие размещения
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Название</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
disabled={isSaving}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="text">Текст креатива</Label>
|
||||
<Textarea
|
||||
id="text"
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
disabled={isSaving}
|
||||
rows={10}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Не забудьте <code className="bg-muted px-1 rounded">{"{invite_link}"}</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{error}
|
||||
<div className="max-w-3xl mx-auto space-y-4">
|
||||
{isEditing ? (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Редактирование</CardTitle>
|
||||
<CardDescription>
|
||||
Изменения не повлияют на существующие размещения
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Название</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
disabled={isSaving}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2 pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleCancel}
|
||||
disabled={isSaving}
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={isSaving}>
|
||||
{isSaving ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
Сохранение...
|
||||
</>
|
||||
) : (
|
||||
"Сохранить"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>Текст креатива</CardTitle>
|
||||
<Button variant="outline" size="sm" onClick={handleCopy}>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="h-4 w-4 mr-2" />
|
||||
Скопировано
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="h-4 w-4 mr-2" />
|
||||
Копировать
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<pre className="whitespace-pre-wrap text-sm bg-muted p-4 rounded-lg">
|
||||
{creative.text.replace(
|
||||
"{invite_link}",
|
||||
"https://t.me/+AbCdEfGhIjK"
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="text">Текст креатива</Label>
|
||||
<Textarea
|
||||
id="text"
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
disabled={isSaving}
|
||||
rows={10}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Не забудьте <code className="bg-muted px-1 rounded">{"{invite_link}"}</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</pre>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
<code className="bg-muted px-1 rounded">{"{invite_link}"}</code>{" "}
|
||||
заменяется уникальной ссылкой при создании размещения
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Quick Actions */}
|
||||
{canWrite && creative.status === "active" && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Действия</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button asChild>
|
||||
<Link
|
||||
href={`/dashboard/${workspaceId}/placements/new?creative_id=${creative.id}`}
|
||||
>
|
||||
<ExternalLink className="h-4 w-4 mr-2" />
|
||||
Создать размещение с этим креативом
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
<div className="flex gap-2 pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleCancel}
|
||||
disabled={isSaving}
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={isSaving}>
|
||||
{isSaving ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
Сохранение...
|
||||
</>
|
||||
) : (
|
||||
"Сохранить"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Tabs value={viewMode} onValueChange={(v) => setViewMode(v as "preview" | "data")}>
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="preview" className="gap-2">
|
||||
<Eye className="h-4 w-4" />
|
||||
Preview
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="data" className="gap-2">
|
||||
<LayoutList className="h-4 w-4" />
|
||||
Данные
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="preview" className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold">Предпросмотр</h3>
|
||||
<Button variant="outline" size="sm" onClick={handleCopy}>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="h-4 w-4 mr-2" />
|
||||
Скопировано
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="h-4 w-4 mr-2" />
|
||||
Копировать
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
<TelegramPostPreview
|
||||
text={creative.text}
|
||||
mediaItems={creative.media_items}
|
||||
buttons={creative.buttons}
|
||||
/>
|
||||
</TabsContent>
|
||||
<TabsContent value="data" className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold">Данные креатива</h3>
|
||||
<Button variant="outline" size="sm" onClick={handleCopy}>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="h-4 w-4 mr-2" />
|
||||
Скопировано
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="h-4 w-4 mr-2" />
|
||||
Копировать
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
<Card>
|
||||
<CardContent className="p-6 space-y-6">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-sm">Название</Label>
|
||||
<p className="font-medium">{creative.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-sm">Статус</Label>
|
||||
<Badge variant={isActive ? "default" : "secondary"}>
|
||||
{isActive ? "Активен" : "Архив"}
|
||||
</Badge>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-sm">Размещений</Label>
|
||||
<p className="font-medium">{creative.placements_count}</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-sm">Проект</Label>
|
||||
<p className="font-medium">{creative.project_channel_title}</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-sm">Создан</Label>
|
||||
<p className="font-medium">
|
||||
{new Date(creative.created_at).toLocaleDateString("ru-RU", {
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{creative.media_items && creative.media_items.length > 0 && (
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-sm mb-3 block">Медиа ({creative.media_items.length})</Label>
|
||||
<div className="grid grid-cols-4 gap-3">
|
||||
{creative.media_items.map((media, index) => (
|
||||
<div key={index} className="border rounded-lg p-3 space-y-2">
|
||||
<div className="w-8 h-8 bg-muted rounded-md flex items-center justify-center">
|
||||
{/* eslint-disable-next-line jsx-a11y/alt-text */}
|
||||
{media.media_type === "photo" && <Image className="h-4 w-4 text-muted-foreground" />}
|
||||
{media.media_type === "video" && <Video className="h-4 w-4 text-muted-foreground" />}
|
||||
{media.media_type === "animation" && <FileText className="h-4 w-4 text-muted-foreground" />}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-medium capitalize">{media.media_type}</p>
|
||||
<p className="text-[10px] text-muted-foreground font-mono">
|
||||
{media.media_file_id.slice(0, 10)}...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{creative.buttons && creative.buttons.length > 0 && (
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-sm mb-3 block">Кнопки ({creative.buttons.length})</Label>
|
||||
<div className="space-y-2">
|
||||
{creative.buttons.map((button, index) => (
|
||||
<div key={index} className="border rounded-lg p-3 flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-medium text-sm">{button.text}</p>
|
||||
<p className="text-xs text-muted-foreground font-mono">
|
||||
{button.url}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<Label className="text-muted-foreground text-sm mb-3 block">Текст</Label>
|
||||
<div className="border rounded-lg p-4 bg-muted">
|
||||
<pre className="text-sm whitespace-pre-wrap font-mono">
|
||||
{creative.text}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user