feat: some fixes
This commit is contained in:
ivannoskov
@@ -5,7 +5,7 @@
|
||||
// ============================================================================
|
||||
|
||||
import { useEffect, useState, useMemo } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Loader2,
|
||||
@@ -25,6 +25,9 @@ import {
|
||||
Info,
|
||||
Grid,
|
||||
List,
|
||||
FileText,
|
||||
Image,
|
||||
Video,
|
||||
} from "lucide-react";
|
||||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||||
@@ -104,28 +107,42 @@ const formatCurrency = (value: number | null | undefined): string => {
|
||||
const getCreativeWord = (count: number): string => {
|
||||
const mod10 = count % 10;
|
||||
const mod100 = count % 100;
|
||||
|
||||
|
||||
if (mod100 >= 11 && mod100 <= 14) {
|
||||
return "креативов";
|
||||
}
|
||||
|
||||
|
||||
if (mod10 === 1) {
|
||||
return "креатив";
|
||||
}
|
||||
|
||||
|
||||
if (mod10 >= 2 && mod10 <= 4) {
|
||||
return "креатива";
|
||||
}
|
||||
|
||||
|
||||
return "креативов";
|
||||
};
|
||||
|
||||
const getMediaIcon = (mediaType: string) => {
|
||||
switch (mediaType) {
|
||||
case "photo":
|
||||
return Image;
|
||||
case "video":
|
||||
return Video;
|
||||
case "animation":
|
||||
return FileText;
|
||||
default:
|
||||
return FileText;
|
||||
}
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
export default function CreativesPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const workspaceId = params?.workspaceId as string;
|
||||
const { selectedProjects, getProjectFilterId, allProjectsSelected, hasPermission, currentProject } = useWorkspace();
|
||||
const projectFilterId = getProjectFilterId();
|
||||
@@ -192,7 +209,8 @@ export default function CreativesPage() {
|
||||
|
||||
const handleArchive = async (creative: Creative) => {
|
||||
try {
|
||||
await creativesApi.update(workspaceId, creative.id, {});
|
||||
const newStatus = creative.status === "active" ? "archived" : "active";
|
||||
await creativesApi.update(workspaceId, creative.id, { status: newStatus });
|
||||
loadCreatives();
|
||||
} catch (err) {
|
||||
console.error("Failed to archive creative:", err);
|
||||
@@ -210,17 +228,39 @@ export default function CreativesPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopyText = (text: string) => {
|
||||
navigator.clipboard.writeText(text);
|
||||
};
|
||||
|
||||
// Filter by search
|
||||
const filteredCreatives = creativesWithStats.filter(
|
||||
(c) =>
|
||||
c.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
c.text.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
|
||||
const handleCreateCreativeClick = () => {
|
||||
if (currentProject) {
|
||||
router.push(`/dashboard/${workspaceId}/creatives/new?project_id=${currentProject.id}`);
|
||||
} else {
|
||||
setShowCreateDialog(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenBotClick = () => {
|
||||
const botUrl = currentProject
|
||||
? `https://t.me/${BOT_USERNAME}?start=project_${currentProject.id}_createcreative`
|
||||
: `https://t.me/${BOT_USERNAME}`;
|
||||
window.open(botUrl, "_blank");
|
||||
setShowCreateDialog(false);
|
||||
};
|
||||
|
||||
const handleCreateOnPlatformClick = () => {
|
||||
if (!currentProject) return;
|
||||
router.push(`/dashboard/${workspaceId}/creatives/new?project_id=${currentProject.id}`);
|
||||
setShowCreateDialog(false);
|
||||
};
|
||||
|
||||
const handleCopyText = (text: string) => {
|
||||
navigator.clipboard.writeText(text);
|
||||
};
|
||||
|
||||
// Totals
|
||||
const totals = useMemo(() => {
|
||||
const data = filteredCreatives.filter((c) => c.analytics);
|
||||
@@ -233,11 +273,11 @@ export default function CreativesPage() {
|
||||
}, [filteredCreatives]);
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<TooltipProvider>
|
||||
<DashboardHeader
|
||||
breadcrumbs={[
|
||||
{ label: "Главная", href: `/dashboard/${workspaceId}` },
|
||||
{ label: "Креативы" },
|
||||
{ label: "Креативы", href: `/dashboard/${workspaceId}/creatives` },
|
||||
]}
|
||||
/>
|
||||
|
||||
@@ -270,7 +310,7 @@ export default function CreativesPage() {
|
||||
</Button>
|
||||
</div>
|
||||
{canWrite && (
|
||||
<Button onClick={() => setShowCreateDialog(true)}>
|
||||
<Button onClick={handleCreateCreativeClick}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Создать креатив
|
||||
</Button>
|
||||
@@ -390,16 +430,35 @@ export default function CreativesPage() {
|
||||
{filteredCreatives.map((creative) => (
|
||||
<TableRow key={creative.id}>
|
||||
<TableCell>
|
||||
<Link
|
||||
href={`/dashboard/${workspaceId}/creatives/${creative.id}`}
|
||||
className="font-medium hover:underline"
|
||||
>
|
||||
{creative.name}
|
||||
</Link>
|
||||
<div className="flex items-start gap-3">
|
||||
{creative.media_items && creative.media_items.length > 0 && (
|
||||
<div className="flex gap-0.5 mt-0.5">
|
||||
{creative.media_items.slice(0, 2).map((media: { media_type: string }, idx: number) => {
|
||||
const MediaIcon = getMediaIcon(media.media_type);
|
||||
return (
|
||||
<MediaIcon key={idx} className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
);
|
||||
})}
|
||||
{creative.media_items.length > 2 && (
|
||||
<span className="text-xs text-muted-foreground">+{creative.media_items.length - 2}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="min-w-0">
|
||||
<Link
|
||||
href={`/dashboard/${workspaceId}/creatives/${creative.id}`}
|
||||
className="font-medium hover:underline block"
|
||||
>
|
||||
{creative.name}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="max-w-[300px] truncate text-sm text-muted-foreground">
|
||||
{creative.text.replace("{invite_link}", "[ссылка]")}
|
||||
<div className="max-w-[350px] text-sm text-muted-foreground">
|
||||
<div className="line-clamp-2">
|
||||
{creative.text.replace("{invite_link}", "[ссылка]")}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
@@ -436,61 +495,78 @@ export default function CreativesPage() {
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
<div className="flex items-center gap-1">
|
||||
{canWrite && creative.status === "active" && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
asChild
|
||||
>
|
||||
<Link
|
||||
href={`/dashboard/${workspaceId}/placements/new?creative_id=${creative.id}`}
|
||||
title="Создать размещение"
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
</Link>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem asChild>
|
||||
<Link
|
||||
href={`/dashboard/${workspaceId}/creatives/${creative.id}`}
|
||||
>
|
||||
<Eye className="h-4 w-4 mr-2" />
|
||||
Просмотр
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link
|
||||
href={`/dashboard/${workspaceId}/analytics/creatives?creative_id=${creative.id}`}
|
||||
>
|
||||
<BarChart3 className="h-4 w-4 mr-2" />
|
||||
Аналитика
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleCopyText(creative.text)}>
|
||||
<Copy className="h-4 w-4 mr-2" />
|
||||
Копировать текст
|
||||
</DropdownMenuItem>
|
||||
{canWrite && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem asChild>
|
||||
<Link
|
||||
href={`/dashboard/${workspaceId}/creatives/${creative.id}?edit=true`}
|
||||
>
|
||||
<Pencil className="h-4 w-4 mr-2" />
|
||||
Редактировать
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleArchive(creative)}>
|
||||
<Archive className="h-4 w-4 mr-2" />
|
||||
{creative.status === "active" ? "В архив" : "Восстановить"}
|
||||
</DropdownMenuItem>
|
||||
{creative.placements_count === 0 && (
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleDelete(creative.id)}
|
||||
className="text-destructive focus:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Удалить
|
||||
)}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem asChild>
|
||||
<Link
|
||||
href={`/dashboard/${workspaceId}/creatives/${creative.id}`}
|
||||
>
|
||||
<Eye 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>
|
||||
<DropdownMenuItem onClick={() => handleCopyText(creative.text)}>
|
||||
<Copy className="h-4 w-4 mr-2" />
|
||||
Копировать текст
|
||||
</DropdownMenuItem>
|
||||
{canWrite && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem asChild>
|
||||
<Link
|
||||
href={`/dashboard/${workspaceId}/creatives/${creative.id}?edit=true`}
|
||||
>
|
||||
<Pencil className="h-4 w-4 mr-2" />
|
||||
Редактировать
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<DropdownMenuItem onClick={() => handleArchive(creative)}>
|
||||
<Archive className="h-4 w-4 mr-2" />
|
||||
{creative.status === "active" ? "В архив" : "Восстановить"}
|
||||
</DropdownMenuItem>
|
||||
{creative.placements_count === 0 && (
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleDelete(creative.id)}
|
||||
className="text-destructive focus:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Удалить
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
@@ -597,41 +673,47 @@ export default function CreativesPage() {
|
||||
<DialogHeader>
|
||||
<DialogTitle>Создание креатива</DialogTitle>
|
||||
<DialogDescription>
|
||||
Создание креатива работает через Telegram бота
|
||||
Создание креатива через Telegram бота или на платформе
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Чтобы создать креатив:
|
||||
Выберите способ создания креатива:
|
||||
</p>
|
||||
<ol className="list-decimal list-inside space-y-2 text-sm">
|
||||
<li>Перейдите в Telegram бота <strong>@{BOT_USERNAME}</strong></li>
|
||||
<li>Откройте раздел <strong>Креативы</strong></li>
|
||||
<li>Нажмите <strong>Создание</strong></li>
|
||||
<li>Перешлите созданный креатив боту</li>
|
||||
<li>Креатив автоматически отобразится на платформе</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<div className="space-y-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowCreateDialog(false)}
|
||||
className="w-full justify-start"
|
||||
onClick={handleOpenBotClick}
|
||||
>
|
||||
Понятно
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
const botUrl = currentProject
|
||||
? `https://t.me/${BOT_USERNAME}?start=project_${currentProject.id}_createcreative`
|
||||
: `https://t.me/${BOT_USERNAME}`;
|
||||
window.open(botUrl, "_blank");
|
||||
setShowCreateDialog(false);
|
||||
}}
|
||||
>
|
||||
Открыть бота
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="text-left">
|
||||
<p className="font-medium">Через Telegram бота</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Перешлите сообщение боту
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
{currentProject && (
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start"
|
||||
onClick={handleCreateOnPlatformClick}
|
||||
>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="text-left">
|
||||
<p className="font-medium">На платформе</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Для проекта: {currentProject.title}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
Reference in New Issue
Block a user