import { useState } from 'react'; import { Head, usePage } from '@inertiajs/react'; import axios from 'axios'; import type { Collection, Project, Field, BreadcrumbItem, UserCan } from '@/types/index.d'; import AppLayout from '@/layouts/app-layout'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Separator } from '@/components/ui/separator'; import { Button } from '@/components/ui/button'; import { Copy, Save } from 'lucide-react'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { toast } from 'sonner'; import ProjectSidebar from '../Projects/ProjectSidebar'; import FieldList from './Fields/FieldList'; import AddFieldModal from './Fields/AddFieldModal'; import ProjectsLayout from '../Projects/layout'; interface Props { project: Project & { collections: Collection[]; }; collection: Collection & { fields: Field[]; } } export default function Edit({ project, collection }: Props) { const can = usePage().props.userCan as UserCan; const [copied, setCopied] = useState(false); const [isAddFieldModalOpen, setIsAddFieldModalOpen] = useState(false); const [templateModalOpen, setTemplateModalOpen] = useState(false); const [templateName, setTemplateName] = useState(collection.name); const copyToClipboard = async (text: string) => { await navigator.clipboard.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 2000); }; const handleSaveTemplate = async () => { try { await axios.post(route('collections.saveAsTemplate', [project.id, collection.id]), { name: templateName }); setTemplateModalOpen(false); toast.success('Template saved'); } catch (e) { console.error(e); toast.error('Failed to save template'); } }; const breadcrumbs: BreadcrumbItem[] = [ { title: project.name, href: route('projects.show', project.id), }, { title: collection.name, href: route('projects.collections.show', [project.id, collection.id]), }, { title: 'Edit Collection', href: route('projects.collections.edit', [project.id, collection.id]), }, ]; return (

setIsAddFieldModalOpen(true)} collections={project.collections} can={can} /> {collection.name}

UUID

{collection.uuid}

{copied && ( Copied! )}

Slug

{collection.slug}

Created At

{new Date(collection.created_at).toLocaleString()}

Last Updated

{new Date(collection.updated_at).toLocaleString()}

setIsAddFieldModalOpen(false)} collectionId={collection.id} projectId={project.id} collections={project.collections} collectionFields={collection.fields} can={can} /> ); }