750 lines
28 KiB
TypeScript
750 lines
28 KiB
TypeScript
"use client";
|
||
|
||
// ============================================================================
|
||
// Workspace Settings Page
|
||
// ============================================================================
|
||
|
||
import { useState, useEffect, useRef, useMemo } from "react";
|
||
import { useParams, useRouter } from "next/navigation";
|
||
import { Loader2, Settings, Pencil, Trash2, Users, Shield, ChevronDown, UserPlus, Mail, Clock, Upload, ImageIcon } from "lucide-react";
|
||
import { toast } from "sonner";
|
||
import { DashboardHeader } from "@/components/layout/dashboard-header";
|
||
import { useWorkspace } from "@/components/providers/workspace-provider";
|
||
import { useAuth } from "@/components/auth/auth-provider";
|
||
import { workspacesApi, membersApi, invitesApi } from "@/lib/api";
|
||
import type { User } from "@/lib/types/api";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Label } from "@/components/ui/label";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||
import {
|
||
Card,
|
||
CardContent,
|
||
CardDescription,
|
||
CardHeader,
|
||
CardTitle,
|
||
} from "@/components/ui/card";
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from "@/components/ui/table";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogTrigger,
|
||
} from "@/components/ui/dialog";
|
||
import {
|
||
AlertDialog,
|
||
AlertDialogAction,
|
||
AlertDialogCancel,
|
||
AlertDialogContent,
|
||
AlertDialogDescription,
|
||
AlertDialogFooter,
|
||
AlertDialogHeader,
|
||
AlertDialogTitle,
|
||
AlertDialogTrigger,
|
||
} from "@/components/ui/alert-dialog";
|
||
import { PERMISSION_LABELS } from "@/lib/types/api";
|
||
import type { WorkspaceMember, WorkspaceInvite, Project, PermissionKey, PermissionScope } from "@/lib/types/api";
|
||
import { PermissionModal } from "@/components/ui/permission-modal";
|
||
import {
|
||
handleApiError,
|
||
showPermissionErrorToast,
|
||
showSuccessToast,
|
||
} from "@/lib/utils/error-handler";
|
||
|
||
// ============================================================================
|
||
// Component
|
||
// ============================================================================
|
||
|
||
export default function SettingsPage() {
|
||
const params = useParams();
|
||
const router = useRouter();
|
||
const workspaceId = params?.workspaceId as string;
|
||
const { currentWorkspace, refreshWorkspaces } = useWorkspace();
|
||
const { user } = useAuth();
|
||
const currentUser = user;
|
||
|
||
const [name, setName] = useState(currentWorkspace?.name || "");
|
||
const [isUpdating, setIsUpdating] = useState(false);
|
||
const [isDeleting, setIsDeleting] = useState(false);
|
||
const [deleteConfirm, setDeleteConfirm] = useState("");
|
||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||
|
||
// Avatar upload
|
||
const [avatarFile, setAvatarFile] = useState<File | null>(null);
|
||
const [isUploadingAvatar, setIsUploadingAvatar] = useState(false);
|
||
const [isDeletingAvatar, setIsDeletingAvatar] = useState(false);
|
||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||
|
||
// Members and invites
|
||
const [members, setMembers] = useState<WorkspaceMember[]>([]);
|
||
const [invites, setInvites] = useState<WorkspaceInvite[]>([]);
|
||
const [loadingMembers, setLoadingMembers] = useState(true);
|
||
const [updating, setUpdating] = useState<string | null>(null);
|
||
const [showInviteDialog, setShowInviteDialog] = useState(false);
|
||
const [username, setUsername] = useState("");
|
||
const [isCreating, setIsCreating] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
// Permission modal
|
||
const [showPermissionModal, setShowPermissionModal] = useState(false);
|
||
const [selectedMember, setSelectedMember] = useState<WorkspaceMember | null>(null);
|
||
const [projects, setProjects] = useState<Project[]>([]);
|
||
const [loadingProjects, setLoadingProjects] = useState(false);
|
||
|
||
const isOnlyAdmin = useMemo(() => {
|
||
if (!currentUser || !members.length) return false;
|
||
const adminMembers = members.filter((m) =>
|
||
m.permissions.some((p) => p.key === "admin_full")
|
||
);
|
||
return adminMembers.length === 1 && adminMembers[0]?.user.id === currentUser.id;
|
||
}, [currentUser, members]);
|
||
|
||
useEffect(() => {
|
||
if (currentWorkspace) {
|
||
setName(currentWorkspace.name);
|
||
}
|
||
}, [currentWorkspace]);
|
||
|
||
useEffect(() => {
|
||
loadMembers();
|
||
}, [workspaceId]);
|
||
|
||
const loadMembers = async () => {
|
||
try {
|
||
setLoadingMembers(true);
|
||
const [membersResponse, invitesResponse] = await Promise.all([
|
||
membersApi.list(workspaceId, { size: 100 }),
|
||
invitesApi.list(workspaceId, { size: 100 }),
|
||
]);
|
||
setMembers(membersResponse.items);
|
||
setInvites(invitesResponse.items);
|
||
} catch (err) {
|
||
console.error("Failed to load data:", err);
|
||
} finally {
|
||
setLoadingMembers(false);
|
||
}
|
||
};
|
||
|
||
const loadProjects = async () => {
|
||
try {
|
||
setLoadingProjects(true);
|
||
const response = await workspacesApi.getProjects(workspaceId, { size: 100 });
|
||
setProjects(response.items);
|
||
} catch (err) {
|
||
console.error("Failed to load projects:", err);
|
||
} finally {
|
||
setLoadingProjects(false);
|
||
}
|
||
};
|
||
|
||
const openPermissionModal = async (member: WorkspaceMember) => {
|
||
setSelectedMember(member);
|
||
await loadProjects();
|
||
setShowPermissionModal(true);
|
||
};
|
||
|
||
const handlePermissionSave = async (
|
||
wsId: string,
|
||
memberId: string,
|
||
userId: string,
|
||
permissions: { key: PermissionKey; scopes?: PermissionScope[] }[]
|
||
) => {
|
||
await toast.promise(
|
||
membersApi.updatePermissions(wsId, memberId, { permissions }),
|
||
{
|
||
loading: "Сохранение прав доступа...",
|
||
success: () => {
|
||
loadMembers();
|
||
return "Права доступа обновлены";
|
||
},
|
||
error: (err) => {
|
||
handleApiError(err);
|
||
return "Не удалось сохранить права";
|
||
},
|
||
}
|
||
);
|
||
setShowPermissionModal(false);
|
||
};
|
||
|
||
const handleUpdate = async () => {
|
||
if (!name.trim() || name === currentWorkspace?.name) return;
|
||
|
||
await toast.promise(
|
||
workspacesApi.update(workspaceId, { name: name.trim() }),
|
||
{
|
||
loading: "Сохранение названия...",
|
||
success: () => {
|
||
refreshWorkspaces();
|
||
return "Название обновлено";
|
||
},
|
||
error: (err) => {
|
||
handleApiError(err);
|
||
return "Не удалось сохранить название";
|
||
},
|
||
}
|
||
);
|
||
setIsUpdating(false);
|
||
};
|
||
|
||
const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const file = e.target.files?.[0];
|
||
if (!file) return;
|
||
|
||
await toast.promise(
|
||
workspacesApi.uploadAvatar(workspaceId, file),
|
||
{
|
||
loading: "Загрузка аватара...",
|
||
success: () => {
|
||
refreshWorkspaces();
|
||
if (fileInputRef.current) {
|
||
fileInputRef.current.value = "";
|
||
}
|
||
setAvatarFile(null);
|
||
return "Аватар загружен";
|
||
},
|
||
error: (err) => {
|
||
handleApiError(err);
|
||
return "Не удалось загрузить аватар";
|
||
},
|
||
}
|
||
);
|
||
setIsUploadingAvatar(false);
|
||
};
|
||
|
||
const handleAvatarDelete = async () => {
|
||
await toast.promise(
|
||
workspacesApi.deleteAvatar(workspaceId),
|
||
{
|
||
loading: "Удаление аватара...",
|
||
success: () => {
|
||
refreshWorkspaces();
|
||
return "Аватар удалён";
|
||
},
|
||
error: (err) => {
|
||
handleApiError(err);
|
||
return "Не удалось удалить аватар";
|
||
},
|
||
}
|
||
);
|
||
setIsDeletingAvatar(false);
|
||
};
|
||
|
||
const handleCreateInvite = async () => {
|
||
if (!username.trim()) return;
|
||
|
||
const cleanUsername = username.trim().replace(/^@/, "");
|
||
|
||
await toast.promise(
|
||
invitesApi.create(workspaceId, {
|
||
username: cleanUsername,
|
||
}),
|
||
{
|
||
loading: "Отправка приглашения...",
|
||
success: (invite) => {
|
||
setInvites((prev) => [invite, ...prev]);
|
||
setShowInviteDialog(false);
|
||
setUsername("");
|
||
return `Приглашение отправлено @${cleanUsername}`;
|
||
},
|
||
error: (err: any) => {
|
||
const errorMessage = err?.error?.message || err?.detail;
|
||
if (errorMessage?.includes("not found")) {
|
||
setError(`Пользователь @${cleanUsername} не зарегистрирован на платформе.`);
|
||
return "Пользователь не найден";
|
||
}
|
||
if (errorMessage?.includes("already exists") || errorMessage?.includes("уже")) {
|
||
return "Приглашение уже существует или пользователь уже участник";
|
||
}
|
||
handleApiError(err);
|
||
return "Не удалось отправить приглашение";
|
||
},
|
||
}
|
||
);
|
||
setIsCreating(false);
|
||
};
|
||
|
||
const handleDelete = async () => {
|
||
if (deleteConfirm !== `Удалить ${currentWorkspace?.name}`) return;
|
||
|
||
await toast.promise(
|
||
workspacesApi.delete(workspaceId),
|
||
{
|
||
loading: "Удаление воркспейса...",
|
||
success: () => {
|
||
router.replace("/");
|
||
return "Воркспейс удалён";
|
||
},
|
||
error: (err) => {
|
||
handleApiError(err);
|
||
return "Не удалось удалить воркспейс";
|
||
},
|
||
}
|
||
);
|
||
setIsDeleting(false);
|
||
setShowDeleteDialog(false);
|
||
setDeleteConfirm("");
|
||
};
|
||
|
||
const hasPermission = (member: WorkspaceMember, key: PermissionKey) => {
|
||
return member.permissions.some((p) => p.key === key);
|
||
};
|
||
|
||
const renderPermissionBadges = (member: WorkspaceMember) => {
|
||
if (member.permissions.length === 0) {
|
||
return <span className="text-sm text-muted-foreground">Нет прав</span>;
|
||
}
|
||
|
||
const adminPerm = member.permissions.find((p) => p.key === "admin_full");
|
||
if (adminPerm) {
|
||
const isGlobal = !adminPerm.scopes || adminPerm.scopes.length === 0;
|
||
return (
|
||
<div className="flex flex-wrap gap-1">
|
||
<Badge variant="destructive" className="gap-1">
|
||
<Shield className="h-3 w-3" />
|
||
Админ {isGlobal ? "" : "(ограничен)"}
|
||
</Badge>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="flex flex-wrap gap-1">
|
||
{member.permissions.map((p) => {
|
||
const isGlobal = !p.scopes || p.scopes.length === 0;
|
||
const projectCount = p.scopes
|
||
? p.scopes.filter((s) => s.type === "project").length
|
||
: 0;
|
||
|
||
return (
|
||
<Badge key={p.key} variant="outline" className="gap-1">
|
||
{PERMISSION_LABELS[p.key]}
|
||
{!isGlobal && projectCount > 0 && (
|
||
<span className="text-muted-foreground">({projectCount})</span>
|
||
)}
|
||
</Badge>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// Combine members and pending invites
|
||
const pendingInvites = invites.filter((inv) => inv.status === "pending");
|
||
const allPeople = [
|
||
...members.map((m) => ({ type: "member" as const, data: m })),
|
||
...pendingInvites.map((inv) => ({ type: "invite" as const, data: inv })),
|
||
];
|
||
|
||
if (!currentWorkspace) {
|
||
return (
|
||
<>
|
||
<DashboardHeader breadcrumbs={[{ label: "Настройки" }]} />
|
||
<div className="flex items-center justify-center py-12">
|
||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<DashboardHeader
|
||
breadcrumbs={[
|
||
{ label: "Главная", href: `/dashboard/${workspaceId}` },
|
||
{ label: "Настройки" },
|
||
]}
|
||
/>
|
||
|
||
<div className="flex flex-1 flex-col gap-4 p-4 pt-0 mt-4 max-w-4xl">
|
||
<div>
|
||
<h1 className="text-2xl font-bold tracking-tight">Настройки воркспейса</h1>
|
||
<p className="text-muted-foreground">
|
||
Управление настройками воркспейса
|
||
</p>
|
||
</div>
|
||
|
||
{/* General Settings */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>Основные настройки</CardTitle>
|
||
<CardDescription>
|
||
Название и аватар воркспейса
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
{/* Avatar */}
|
||
<div className="flex items-center gap-4">
|
||
<Avatar className="h-20 w-20">
|
||
<AvatarImage src={currentWorkspace.avatar_url || undefined} alt={currentWorkspace.name} />
|
||
<AvatarFallback className="text-2xl">
|
||
{currentWorkspace.name.charAt(0).toUpperCase()}
|
||
</AvatarFallback>
|
||
</Avatar>
|
||
<div className="flex flex-col gap-2">
|
||
<div className="flex items-center gap-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => fileInputRef.current?.click()}
|
||
disabled={isUploadingAvatar}
|
||
>
|
||
{isUploadingAvatar ? (
|
||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||
) : (
|
||
<Upload className="h-4 w-4 mr-2" />
|
||
)}
|
||
Загрузить
|
||
</Button>
|
||
{currentWorkspace.avatar_url && (
|
||
<AlertDialog>
|
||
<AlertDialogTrigger asChild>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
disabled={isDeletingAvatar}
|
||
>
|
||
{isDeletingAvatar ? (
|
||
<Loader2 className="h-4 w-4 animate-spin" />
|
||
) : (
|
||
<Trash2 className="h-4 w-4" />
|
||
)}
|
||
</Button>
|
||
</AlertDialogTrigger>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>Удалить аватар</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
Вы уверены, что хотите удалить аватар воркспейса?
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel>Отмена</AlertDialogCancel>
|
||
<AlertDialogAction onClick={handleAvatarDelete}>
|
||
Удалить
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
)}
|
||
</div>
|
||
<p className="text-xs text-muted-foreground">
|
||
PNG, JPG или GIF. Максимум 2 МБ.
|
||
</p>
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
className="hidden"
|
||
onChange={handleAvatarUpload}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Name */}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="workspace-name">Название</Label>
|
||
<div className="flex gap-2">
|
||
<Input
|
||
id="workspace-name"
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
placeholder="Название воркспейса"
|
||
/>
|
||
<Button
|
||
onClick={handleUpdate}
|
||
disabled={
|
||
!name.trim() ||
|
||
name === currentWorkspace.name ||
|
||
isUpdating
|
||
}
|
||
>
|
||
{isUpdating ? (
|
||
<Loader2 className="h-4 w-4 animate-spin" />
|
||
) : (
|
||
<Pencil className="h-4 w-4" />
|
||
)}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Team Management */}
|
||
<Card>
|
||
<CardHeader>
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<CardTitle>Участники</CardTitle>
|
||
<CardDescription>
|
||
Управление участниками воркспейса
|
||
</CardDescription>
|
||
</div>
|
||
<Dialog open={showInviteDialog} onOpenChange={setShowInviteDialog}>
|
||
<DialogTrigger asChild>
|
||
<Button>
|
||
<UserPlus className="h-4 w-4 mr-2" />
|
||
Пригласить участника
|
||
</Button>
|
||
</DialogTrigger>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>Пригласить участника</DialogTitle>
|
||
<DialogDescription>
|
||
Введите username Telegram пользователя для отправки
|
||
приглашения через бота
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="space-y-4 py-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="username">Telegram username</Label>
|
||
<Input
|
||
id="username"
|
||
placeholder="@username"
|
||
value={username}
|
||
onChange={(e) => setUsername(e.target.value)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter") {
|
||
handleCreateInvite();
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
{error && (
|
||
<div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
|
||
{error}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<DialogFooter>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => setShowInviteDialog(false)}
|
||
>
|
||
Отмена
|
||
</Button>
|
||
<Button
|
||
onClick={handleCreateInvite}
|
||
disabled={!username.trim() || isCreating}
|
||
>
|
||
{isCreating ? (
|
||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||
) : (
|
||
<Mail className="h-4 w-4 mr-2" />
|
||
)}
|
||
Отправить
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{loadingMembers ? (
|
||
<div className="flex items-center justify-center py-12">
|
||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||
</div>
|
||
) : allPeople.length === 0 ? (
|
||
<div className="flex flex-col items-center justify-center py-12">
|
||
<Users className="h-12 w-12 text-muted-foreground mb-4" />
|
||
<h3 className="text-lg font-semibold mb-2">Нет участников</h3>
|
||
<p className="text-muted-foreground text-center">
|
||
Пригласите участников в воркспейс
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead>Пользователь</TableHead>
|
||
<TableHead>Статус</TableHead>
|
||
<TableHead>Права доступа</TableHead>
|
||
<TableHead className="w-[150px]"></TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{allPeople.map((item) => {
|
||
if (item.type === "invite") {
|
||
const invite = item.data;
|
||
return (
|
||
<TableRow key={`invite-${invite.id}`}>
|
||
<TableCell>
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex h-9 w-9 items-center justify-center rounded-full bg-muted">
|
||
<Users className="h-4 w-4 text-muted-foreground" />
|
||
</div>
|
||
<div>
|
||
<div className="font-medium">@{invite.username}</div>
|
||
</div>
|
||
</div>
|
||
</TableCell>
|
||
<TableCell>
|
||
<Badge variant="outline" className="gap-1">
|
||
<Clock className="h-3 w-3" />
|
||
Ожидает принятия
|
||
</Badge>
|
||
</TableCell>
|
||
<TableCell>
|
||
<span className="text-sm text-muted-foreground">
|
||
—
|
||
</span>
|
||
</TableCell>
|
||
<TableCell></TableCell>
|
||
</TableRow>
|
||
);
|
||
} else {
|
||
const member = item.data;
|
||
return (
|
||
<TableRow key={member.id}>
|
||
<TableCell>
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10">
|
||
<Users className="h-4 w-4 text-primary" />
|
||
</div>
|
||
<div>
|
||
<div className="font-medium">
|
||
{[member.user.first_name, member.user.last_name]
|
||
.filter(Boolean)
|
||
.join(" ") || member.user.username || `User ${member.user.telegram_id}`}
|
||
</div>
|
||
{member.user.username && (
|
||
<div className="text-xs text-muted-foreground">
|
||
@{member.user.username}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</TableCell>
|
||
<TableCell>
|
||
<Badge
|
||
variant={
|
||
member.status === "active" ? "default" : "secondary"
|
||
}
|
||
>
|
||
{member.status === "active" ? "Активен" : "Приглашён"}
|
||
</Badge>
|
||
</TableCell>
|
||
<TableCell>
|
||
{renderPermissionBadges(member)}
|
||
</TableCell>
|
||
<TableCell>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => openPermissionModal(member)}
|
||
disabled={updating === member.id}
|
||
>
|
||
{updating === member.id ? (
|
||
<Loader2 className="h-4 w-4 animate-spin" />
|
||
) : (
|
||
<>
|
||
Настроить
|
||
</>
|
||
)}
|
||
</Button>
|
||
</TableCell>
|
||
</TableRow>
|
||
);
|
||
}
|
||
})}
|
||
</TableBody>
|
||
</Table>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Danger Zone */}
|
||
<Card className="border-destructive">
|
||
<CardHeader>
|
||
<CardTitle className="text-destructive">Опасная зона</CardTitle>
|
||
<CardDescription>
|
||
Необратимые действия с воркспейсом
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
|
||
<AlertDialogTrigger asChild>
|
||
<Button variant="destructive">
|
||
<Trash2 className="h-4 w-4 mr-2" />
|
||
Удалить воркспейс
|
||
</Button>
|
||
</AlertDialogTrigger>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>Удалить воркспейс?</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
Это действие необратимо. Все данные воркспейса будут
|
||
удалены, включая проекты, креативы, размещения и аналитику.
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<div className="space-y-4 py-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="delete-confirm">
|
||
Введите <strong>Удалить {currentWorkspace.name}</strong> для подтверждения:
|
||
</Label>
|
||
<Input
|
||
id="delete-confirm"
|
||
value={deleteConfirm}
|
||
onChange={(e) => setDeleteConfirm(e.target.value)}
|
||
placeholder={`Удалить ${currentWorkspace.name}`}
|
||
className="font-mono"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel onClick={() => {
|
||
setShowDeleteDialog(false);
|
||
setDeleteConfirm("");
|
||
}}>
|
||
Отмена
|
||
</AlertDialogCancel>
|
||
<AlertDialogAction
|
||
onClick={handleDelete}
|
||
disabled={
|
||
isDeleting ||
|
||
deleteConfirm !== `Удалить ${currentWorkspace.name}`
|
||
}
|
||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||
>
|
||
{isDeleting ? (
|
||
<>
|
||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||
Удаление...
|
||
</>
|
||
) : (
|
||
"Удалить"
|
||
)}
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{selectedMember && (
|
||
<PermissionModal
|
||
open={showPermissionModal}
|
||
onOpenChange={setShowPermissionModal}
|
||
member={selectedMember}
|
||
projects={projects}
|
||
onSave={handlePermissionSave}
|
||
workspaceId={workspaceId}
|
||
currentUserId={currentUser?.id || ""}
|
||
isOnlyAdmin={isOnlyAdmin}
|
||
/>
|
||
)}
|
||
</div>
|
||
</>
|
||
);
|
||
}
|