feat: some fixes
This commit is contained in:
ivannoskov
@@ -1,11 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { Loader2, Plus, Check, ChevronRight, X, AlertCircle } from "lucide-react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Loader2, Plus, Check, ChevronRight, X, AlertCircle, BookOpen } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
@@ -36,6 +37,9 @@ interface CreatePlacementsDialogProps {
|
||||
workspaceId: string;
|
||||
projectId: string;
|
||||
existingPlacements: Placement[];
|
||||
prefilledCreativeId?: string | null;
|
||||
open?: boolean;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
onSuccess: () => void;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
@@ -47,10 +51,15 @@ export function CreatePlacementsDialog({
|
||||
workspaceId,
|
||||
projectId,
|
||||
existingPlacements,
|
||||
prefilledCreativeId = null,
|
||||
open: controlledOpen,
|
||||
onOpenChange,
|
||||
onSuccess,
|
||||
children,
|
||||
}: CreatePlacementsDialogProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [internalOpen, setInternalOpen] = useState(false);
|
||||
const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
|
||||
|
||||
const [step, setStep] = useState(1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -59,9 +68,10 @@ export function CreatePlacementsDialog({
|
||||
const [newChannelInput, setNewChannelInput] = useState("");
|
||||
const [selectedChannels, setSelectedChannels] = useState<ChannelInput[]>([]);
|
||||
const [existingChannels, setExistingChannels] = useState<string[]>([]);
|
||||
const [projectChannels, setProjectChannels] = useState<Channel[]>([]);
|
||||
|
||||
// Step 2: Details
|
||||
const [creativeId, setCreativeId] = useState<string | null>(null);
|
||||
const [creativeId, setCreativeId] = useState<string | null>(prefilledCreativeId);
|
||||
const [format, setFormat] = useState("");
|
||||
const [cost, setCost] = useState("");
|
||||
const [placementDate, setPlacementDate] = useState("");
|
||||
@@ -89,7 +99,14 @@ export function CreatePlacementsDialog({
|
||||
if (!isOpen) {
|
||||
resetForm();
|
||||
}
|
||||
setOpen(isOpen);
|
||||
setInternalOpen(isOpen);
|
||||
onOpenChange?.(isOpen);
|
||||
};
|
||||
|
||||
const handleTriggerClick = () => {
|
||||
resetForm();
|
||||
setInternalOpen(true);
|
||||
onOpenChange?.(true);
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
@@ -97,7 +114,8 @@ export function CreatePlacementsDialog({
|
||||
setNewChannelInput("");
|
||||
setSelectedChannels([]);
|
||||
setExistingChannels([]);
|
||||
setCreativeId(null);
|
||||
setProjectChannels([]);
|
||||
setCreativeId(prefilledCreativeId);
|
||||
setFormat("");
|
||||
setCost("");
|
||||
setPlacementDate("");
|
||||
@@ -106,15 +124,47 @@ export function CreatePlacementsDialog({
|
||||
setCreatedCount(null);
|
||||
};
|
||||
|
||||
// Load creatives when dialog opens or when moving to step 2
|
||||
const loadCreatives = async () => {
|
||||
try {
|
||||
const response = await creativesApi.listByProject(workspaceId, projectId);
|
||||
const response = await creativesApi.list(workspaceId, {
|
||||
project_id: projectId,
|
||||
include_archived: false,
|
||||
size: 100,
|
||||
});
|
||||
setCreatives(response.items);
|
||||
|
||||
// Auto-select prefilled creative if set
|
||||
if (prefilledCreativeId && response.items.length > 0) {
|
||||
const prefilled = response.items.find((c) => c.id === prefilledCreativeId);
|
||||
if (prefilled) {
|
||||
setCreativeId(prefilled.id);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to load creatives:", err);
|
||||
}
|
||||
};
|
||||
|
||||
// Load project channels when opening dialog
|
||||
const loadProjectChannels = async () => {
|
||||
try {
|
||||
const projectPlacements = await placementsApi.getByProject(workspaceId, projectId);
|
||||
const channels = projectPlacements.map((p) => p.channel);
|
||||
setProjectChannels(channels);
|
||||
} catch (err) {
|
||||
console.error("Failed to load project channels:", err);
|
||||
}
|
||||
};
|
||||
|
||||
// Load creatives and project channels when dialog opens
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
loadCreatives();
|
||||
loadProjectChannels();
|
||||
}
|
||||
}, [isOpen, workspaceId, projectId, prefilledCreativeId]);
|
||||
|
||||
const addChannel = async () => {
|
||||
const username = parseChannelInput(newChannelInput);
|
||||
if (!username) {
|
||||
@@ -128,9 +178,16 @@ export function CreatePlacementsDialog({
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if channel exists in project channels
|
||||
const projectChannel = projectChannels.find((c) => c.username?.toLowerCase() === lowerUsername);
|
||||
if (projectChannel) {
|
||||
setSelectedChannels([...selectedChannels, { username, channelId: projectChannel.id }]);
|
||||
setNewChannelInput("");
|
||||
setError(null);
|
||||
return;
|
||||
}
|
||||
|
||||
// If channel already has placements in this project, reuse its channel_id.
|
||||
// Channels are global, so we don't need to create them again - we just need
|
||||
// the channel_id to create a new placement for this channel.
|
||||
if (existingUsernames.has(lowerUsername)) {
|
||||
const existingChannelId = getExistingChannelIdByUsername(lowerUsername);
|
||||
if (!existingChannelId) {
|
||||
@@ -144,7 +201,6 @@ export function CreatePlacementsDialog({
|
||||
}
|
||||
|
||||
// Channel doesn't exist in project yet. Create it globally via API to get channel_id.
|
||||
// If channel already exists globally, API will return existing channel.
|
||||
try {
|
||||
const createResponse = await channelsApi.create([{ username }]);
|
||||
const channelId = createResponse.results[0]?.channel.id;
|
||||
@@ -206,16 +262,16 @@ export function CreatePlacementsDialog({
|
||||
}
|
||||
};
|
||||
|
||||
const handleTriggerClick = () => {
|
||||
resetForm();
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const selectedCreative = creatives.find((c) => c.id === creativeId);
|
||||
|
||||
// If open is controlled, don't render DialogTrigger
|
||||
const isControlled = controlledOpen !== undefined;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||
<DialogTrigger asChild onClick={handleTriggerClick}>{children}</DialogTrigger>
|
||||
<Dialog open={isOpen} onOpenChange={handleOpenChange}>
|
||||
{!isControlled && (
|
||||
<DialogTrigger asChild onClick={handleTriggerClick}>{children}</DialogTrigger>
|
||||
)}
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Создать размещения</DialogTitle>
|
||||
@@ -278,8 +334,9 @@ export function CreatePlacementsDialog({
|
||||
{/* Step 1: Channels */}
|
||||
{step === 1 && (
|
||||
<div className="space-y-4">
|
||||
{/* Add new channel */}
|
||||
<div className="space-y-2">
|
||||
<Label>Добавить каналы</Label>
|
||||
<Label>Добавить канал</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
placeholder="t.me/username или @username"
|
||||
@@ -297,6 +354,7 @@ export function CreatePlacementsDialog({
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Selected channels */}
|
||||
{selectedChannels.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<Label>Выбранные каналы ({selectedChannels.length})</Label>
|
||||
@@ -320,6 +378,57 @@ export function CreatePlacementsDialog({
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Existing project channels */}
|
||||
{projectChannels.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="text-base">Существующие каналы проекта</Label>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{projectChannels.length}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="max-h-48 overflow-y-auto space-y-2">
|
||||
{projectChannels.map((channel) => (
|
||||
<div
|
||||
key={channel.id}
|
||||
className="flex items-center justify-between p-2 rounded-md bg-muted"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">{channel.title}</span>
|
||||
{channel.username && (
|
||||
<span className="text-xs text-muted-foreground">@{channel.username}</span>
|
||||
)}
|
||||
</div>
|
||||
{selectedChannels.some((c) => c.channelId === channel.id) ? (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => removeChannel(channel.username || channel.id)}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const channelId = channel.id;
|
||||
const username = channel.username || channel.id;
|
||||
setSelectedChannels([...selectedChannels, { username, channelId }]);
|
||||
}}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
Выбрать
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -453,7 +562,7 @@ export function CreatePlacementsDialog({
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (step === 1) {
|
||||
if (step === 1 && !prefilledCreativeId) {
|
||||
loadCreatives();
|
||||
}
|
||||
setStep(step + 1);
|
||||
|
||||
Reference in New Issue
Block a user