feat: update external channels page
This commit is contained in:
ivannoskov
@@ -35,9 +35,22 @@ import {
|
||||
Pencil,
|
||||
Trash2,
|
||||
Users,
|
||||
ArrowUpDown,
|
||||
ArrowUp,
|
||||
ArrowDown,
|
||||
LayoutGrid,
|
||||
Table2,
|
||||
} from "lucide-react";
|
||||
import type { ExternalChannel } from "@/lib/types/api";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
@@ -51,6 +64,15 @@ import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useTargetChannel } from "@/components/providers/target-channel-provider";
|
||||
|
||||
type ViewMode = "table" | "grid";
|
||||
type SortField =
|
||||
| "title"
|
||||
| "username"
|
||||
| "subscribers_count"
|
||||
| "telegram_id"
|
||||
| null;
|
||||
type SortDirection = "asc" | "desc" | null;
|
||||
|
||||
export default function ExternalChannelsPage() {
|
||||
const { selectedChannel } = useTargetChannel();
|
||||
const [channels, setChannels] = useState<ExternalChannel[]>([]);
|
||||
@@ -59,6 +81,9 @@ export default function ExternalChannelsPage() {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [viewMode, setViewMode] = useState<ViewMode>("table");
|
||||
const [sortField, setSortField] = useState<SortField>(null);
|
||||
const [sortDirection, setSortDirection] = useState<SortDirection>(null);
|
||||
|
||||
// Form state
|
||||
const [formData, setFormData] = useState({
|
||||
@@ -148,11 +173,77 @@ export default function ExternalChannelsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const filteredChannels = channels.filter(
|
||||
(channel) =>
|
||||
channel.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
channel.username?.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
// Обработка сортировки
|
||||
const handleSort = (field: SortField) => {
|
||||
if (sortField === field) {
|
||||
// Переключение: asc -> desc -> null -> asc
|
||||
if (sortDirection === "asc") {
|
||||
setSortDirection("desc");
|
||||
} else if (sortDirection === "desc") {
|
||||
setSortField(null);
|
||||
setSortDirection(null);
|
||||
}
|
||||
} else {
|
||||
setSortField(field);
|
||||
setSortDirection("asc");
|
||||
}
|
||||
};
|
||||
|
||||
const getSortIcon = (field: SortField) => {
|
||||
if (sortField !== field) {
|
||||
return <ArrowUpDown className="ml-2 h-4 w-4 inline" />;
|
||||
}
|
||||
if (sortDirection === "asc") {
|
||||
return <ArrowUp className="ml-2 h-4 w-4 inline" />;
|
||||
}
|
||||
return <ArrowDown className="ml-2 h-4 w-4 inline" />;
|
||||
};
|
||||
|
||||
const filteredChannels = channels
|
||||
.filter(
|
||||
(channel) =>
|
||||
channel.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
channel.username?.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
)
|
||||
.sort((a, b) => {
|
||||
if (!sortField || !sortDirection) return 0;
|
||||
|
||||
let aValue: string | number | null = "";
|
||||
let bValue: string | number | null = "";
|
||||
|
||||
switch (sortField) {
|
||||
case "title":
|
||||
aValue = a.title;
|
||||
bValue = b.title;
|
||||
break;
|
||||
case "username":
|
||||
aValue = a.username || "";
|
||||
bValue = b.username || "";
|
||||
break;
|
||||
case "subscribers_count":
|
||||
aValue = a.subscribers_count || 0;
|
||||
bValue = b.subscribers_count || 0;
|
||||
break;
|
||||
case "telegram_id":
|
||||
aValue = a.telegram_id;
|
||||
bValue = b.telegram_id;
|
||||
break;
|
||||
}
|
||||
|
||||
// Сравнение строк
|
||||
if (typeof aValue === "string" && typeof bValue === "string") {
|
||||
return sortDirection === "asc"
|
||||
? aValue.localeCompare(bValue)
|
||||
: bValue.localeCompare(aValue);
|
||||
}
|
||||
|
||||
// Сравнение чисел
|
||||
if (typeof aValue === "number" && typeof bValue === "number") {
|
||||
return sortDirection === "asc" ? aValue - bValue : bValue - aValue;
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -292,19 +383,39 @@ export default function ExternalChannelsPage() {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative flex-1 max-w-sm">
|
||||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Поиск по названию или username..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-8"
|
||||
/>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative flex-1 max-w-sm">
|
||||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Поиск по названию или username..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-8 rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<Badge variant="secondary">
|
||||
Всего: {formatNumber(filteredChannels.length)}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 border rounded-md">
|
||||
<Button
|
||||
variant={viewMode === "table" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setViewMode("table")}
|
||||
className="rounded-r-none"
|
||||
>
|
||||
<Table2 className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewMode === "grid" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setViewMode("grid")}
|
||||
className="rounded-l-none"
|
||||
>
|
||||
<LayoutGrid className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<Badge variant="secondary">
|
||||
Всего: {formatNumber(filteredChannels.length)}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
@@ -325,7 +436,7 @@ export default function ExternalChannelsPage() {
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
) : viewMode === "grid" ? (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{filteredChannels.map((channel) => (
|
||||
<Card
|
||||
@@ -379,14 +490,6 @@ export default function ExternalChannelsPage() {
|
||||
Подписчики
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 rounded-lg border bg-muted/50 p-2 text-center">
|
||||
<div className="text-sm font-medium">
|
||||
ID: {channel.telegram_id}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Telegram ID
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-2">
|
||||
@@ -404,6 +507,109 @@ export default function ExternalChannelsPage() {
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Список внешних каналов</CardTitle>
|
||||
<CardDescription>
|
||||
Каналы, в которых покупаете рекламу
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead
|
||||
className="cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleSort("title")}
|
||||
>
|
||||
Название
|
||||
{getSortIcon("title")}
|
||||
</TableHead>
|
||||
<TableHead className="cursor-pointer hover:bg-muted/50">
|
||||
Username
|
||||
</TableHead>
|
||||
<TableHead>Описание</TableHead>
|
||||
<TableHead
|
||||
className="text-right cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => handleSort("subscribers_count")}
|
||||
>
|
||||
Подписчики
|
||||
{getSortIcon("subscribers_count")}
|
||||
</TableHead>
|
||||
<TableHead className="text-right cursor-pointer hover:bg-muted/50">
|
||||
Telegram ID
|
||||
</TableHead>
|
||||
<TableHead></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredChannels.map((channel) => (
|
||||
<TableRow key={channel.id}>
|
||||
<TableCell className="font-medium">
|
||||
<div className="flex items-center gap-2">
|
||||
<a
|
||||
href={`https://t.me/${channel.username}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 hover:underline text-primary whitespace-nowrap"
|
||||
tabIndex={0}
|
||||
aria-label={`Открыть канал ${channel.title} в Telegram`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
window.open(
|
||||
`https://t.me/${channel.username}`,
|
||||
"_blank",
|
||||
"noopener,noreferrer"
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<span>{channel.title}</span>
|
||||
<ExternalLinkIcon className="h-4 w-4 text-muted-foreground shrink-0" />
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{channel.username ? (
|
||||
<div>{formatUsername(channel.username)}</div>
|
||||
) : (
|
||||
"—"
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="max-w-[300px] truncate text-muted-foreground">
|
||||
{channel.description || "—"}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{channel.subscribers_count
|
||||
? formatNumber(channel.subscribers_count)
|
||||
: "—"}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{channel.telegram_id}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
handleDelete(channel.id, channel.title)
|
||||
}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user