#591 - sites [wip]

resources/js/pages/backups/components/columns.tsx

@@ -12,13 +12,12 @@ import {
 } from '@/components/ui/dialog';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
-import { useForm } from '@inertiajs/react';
+import { Link, useForm } from '@inertiajs/react';
 import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
 import FormSuccessful from '@/components/form-successful';
 import { useState } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Backup } from '@/types/backup';
-import BackupFiles from '@/pages/backups/components/files';
 import EditBackup from '@/pages/backups/components/edit-backup';
 
 function Delete({ backup }: { backup: Backup }) {
@@ -127,9 +126,9 @@ export const columns: ColumnDef<Backup>[] = [
               <EditBackup backup={row.original}>
                 <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
               </EditBackup>
-              <BackupFiles backup={row.original}>
+              <Link href={route('backup-files', { server: row.original.server_id, backup: row.original.id })}>
                 <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Files</DropdownMenuItem>
-              </BackupFiles>
+              </Link>
               <DropdownMenuSeparator />
               <Delete backup={row.original} />
             </DropdownMenuContent>

resources/js/pages/backups/components/file-columns.tsx

@@ -0,0 +1,135 @@
+import React, { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
+import { useForm } from '@inertiajs/react';
+import { BackupFile } from '@/types/backup-file';
+import { ColumnDef } from '@tanstack/react-table';
+import DateTime from '@/components/date-time';
+import { Badge } from '@/components/ui/badge';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import RestoreBackup from '@/pages/backups/components/restore-backup';
+
+function Delete({ file, onDeleted }: { file: BackupFile; onDeleted?: (file: BackupFile) => void }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.delete(
+      route('backup-files.destroy', {
+        server: file.server_id,
+        backup: file.backup_id,
+        backupFile: file.id,
+      }),
+      {
+        onSuccess: () => {
+          setOpen(false);
+          if (onDeleted) {
+            onDeleted(file);
+          }
+        },
+      },
+    );
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
+          Delete
+        </DropdownMenuItem>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete backup file</DialogTitle>
+          <DialogDescription className="sr-only">Delete backup file</DialogDescription>
+        </DialogHeader>
+        <p className="p-4">Are you sure you want to this backup file?</p>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button variant="destructive" disabled={form.processing} onClick={submit}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export const columns: ColumnDef<BackupFile>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'created_at',
+    header: 'Created at',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <DateTime date={row.original.created_at} />;
+    },
+  },
+  {
+    accessorKey: 'restored_to',
+    header: 'Restored to',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'restored_at',
+    header: 'Restored at',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return row.original.restored_at ? <DateTime date={row.original.restored_at} /> : '';
+    },
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <Badge variant={row.original.status_color}>{row.original.status}</Badge>;
+    },
+  },
+  {
+    id: 'actions',
+    enableColumnFilter: false,
+    enableSorting: false,
+    cell: ({ row }) => {
+      return (
+        <div className="flex items-center justify-end">
+          <DropdownMenu modal={false}>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="h-8 w-8 p-0">
+                <span className="sr-only">Open menu</span>
+                <MoreVerticalIcon />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <RestoreBackup backup={row.original.backup} file={row.original}>
+                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Restore</DropdownMenuItem>
+              </RestoreBackup>
+              <Delete file={row.original} />
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      );
+    },
+  },
+];

resources/js/pages/backups/components/files.tsx

@@ -1,193 +0,0 @@
-import { Backup } from '@/types/backup';
-import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
-import React, { ReactNode, useState } from 'react';
-import { Button } from '@/components/ui/button';
-import { LoaderCircle, LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
-import { useForm } from '@inertiajs/react';
-import { BackupFile } from '@/types/backup-file';
-import { ColumnDef } from '@tanstack/react-table';
-import DateTime from '@/components/date-time';
-import { Badge } from '@/components/ui/badge';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
-import { DataTable } from '@/components/data-table';
-import axios from 'axios';
-import { useQuery } from '@tanstack/react-query';
-import { TableSkeleton } from '@/components/table-skeleton';
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import RestoreBackup from '@/pages/backups/components/restore-backup';
-
-function Delete({ file, onDeleted }: { file: BackupFile; onDeleted?: (file: BackupFile) => void }) {
-  const [open, setOpen] = useState(false);
-  const form = useForm();
-
-  const submit = () => {
-    form.delete(
-      route('backup-files.destroy', {
-        server: file.server_id,
-        backup: file.backup_id,
-        backupFile: file.id,
-      }),
-      {
-        onSuccess: () => {
-          setOpen(false);
-          if (onDeleted) {
-            onDeleted(file);
-          }
-        },
-      },
-    );
-  };
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
-          Delete
-        </DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete backup file</DialogTitle>
-          <DialogDescription className="sr-only">Delete backup file</DialogDescription>
-        </DialogHeader>
-        <p className="p-4">Are you sure you want to this backup file?</p>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="destructive" disabled={form.processing} onClick={submit}>
-            {form.processing && <LoaderCircleIcon className="animate-spin" />}
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export default function BackupFiles({ backup, children }: { backup: Backup; children: ReactNode }) {
-  const [open, setOpen] = useState(false);
-
-  const fetchFilesQuery = useQuery({
-    queryKey: ['fetchFiles'],
-    queryFn: async () => {
-      const res = await axios.get(
-        route('backup-files', {
-          server: backup.server_id,
-          backup: backup.id,
-        }),
-      );
-      return res.data;
-    },
-    enabled: open,
-  });
-
-  const runBackupForm = useForm();
-  const runBackup = () => {
-    runBackupForm.post(route('backups.run', { server: backup.server_id, backup: backup.id }), {
-      onSuccess: () => {
-        fetchFilesQuery.refetch();
-      },
-    });
-  };
-
-  const columns: ColumnDef<BackupFile>[] = [
-    {
-      accessorKey: 'name',
-      header: 'Name',
-      enableColumnFilter: true,
-      enableSorting: true,
-    },
-    {
-      accessorKey: 'created_at',
-      header: 'Created at',
-      enableColumnFilter: true,
-      enableSorting: true,
-      cell: ({ row }) => {
-        return <DateTime date={row.original.created_at} />;
-      },
-    },
-    {
-      accessorKey: 'restored_to',
-      header: 'Restored to',
-      enableColumnFilter: true,
-      enableSorting: true,
-    },
-    {
-      accessorKey: 'restored_at',
-      header: 'Restored at',
-      enableColumnFilter: true,
-      enableSorting: true,
-      cell: ({ row }) => {
-        return row.original.restored_at ? <DateTime date={row.original.restored_at} /> : '';
-      },
-    },
-    {
-      accessorKey: 'status',
-      header: 'Status',
-      enableColumnFilter: true,
-      enableSorting: true,
-      cell: ({ row }) => {
-        return <Badge variant={row.original.status_color}>{row.original.status}</Badge>;
-      },
-    },
-    {
-      id: 'actions',
-      enableColumnFilter: false,
-      enableSorting: false,
-      cell: ({ row }) => {
-        return (
-          <div className="flex items-center justify-end">
-            <DropdownMenu modal={false}>
-              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" className="h-8 w-8 p-0">
-                  <span className="sr-only">Open menu</span>
-                  <MoreVerticalIcon />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <RestoreBackup backup={backup} file={row.original} onBackupRestored={() => fetchFilesQuery.refetch()}>
-                  <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Restore</DropdownMenuItem>
-                </RestoreBackup>
-                <Delete file={row.original} onDeleted={() => fetchFilesQuery.refetch()} />
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        );
-      },
-    },
-  ];
-
-  return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild>{children}</SheetTrigger>
-      <SheetContent className="sm:max-w-4xl">
-        <SheetHeader>
-          <SheetTitle>Backup files of [{backup.database.name}]</SheetTitle>
-          <SheetDescription className="sr-only">Backup files</SheetDescription>
-        </SheetHeader>
-        {fetchFilesQuery.isLoading && <TableSkeleton modal />}
-        {fetchFilesQuery.isSuccess && !fetchFilesQuery.isLoading && <DataTable columns={columns} data={fetchFilesQuery.data.data} modal />}
-        <SheetFooter>
-          <div className="flex items-center gap-2">
-            <Button type="button" onClick={runBackup} disabled={runBackupForm.processing}>
-              {runBackupForm.processing && <LoaderCircle className="animate-spin" />}
-              Run backup
-            </Button>
-            <SheetClose asChild>
-              <Button variant="outline">Close</Button>
-            </SheetClose>
-          </div>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  );
-}

resources/js/pages/backups/files.tsx

@@ -0,0 +1,48 @@
+import { Head, useForm, usePage } from '@inertiajs/react';
+import { Server } from '@/types/server';
+import Container from '@/components/container';
+import HeaderContainer from '@/components/header-container';
+import Heading from '@/components/heading';
+import { Button } from '@/components/ui/button';
+import ServerLayout from '@/layouts/server/layout';
+import { CloudUploadIcon, LoaderCircleIcon } from 'lucide-react';
+import { Backup } from '@/types/backup';
+import { DataTable } from '@/components/data-table';
+import { PaginatedData } from '@/types';
+import { BackupFile } from '@/types/backup-file';
+import { columns } from '@/pages/backups/components/file-columns';
+
+type Page = {
+  server: Server;
+  backup: Backup;
+  files: PaginatedData<BackupFile>;
+};
+
+export default function Files() {
+  const page = usePage<Page>();
+
+  const runBackupForm = useForm();
+  const runBackup = () => {
+    runBackupForm.post(route('backups.run', { server: page.props.server.id, backup: page.props.backup.id }));
+  };
+
+  return (
+    <ServerLayout>
+      <Head title={`Backup files - ${page.props.server.name}`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title={`Backup files of ${page.props.backup.database.name}`} description="Here you can manage the backups of your database" />
+          <div className="flex items-center gap-2">
+            <Button onClick={runBackup}>
+              {runBackupForm.processing ? <LoaderCircleIcon className="animate-spin" /> : <CloudUploadIcon />}
+              <span className="hidden lg:block">Run backup</span>
+            </Button>
+          </div>
+        </HeaderContainer>
+
+        <DataTable columns={columns} paginatedData={page.props.files} />
+      </Container>
+    </ServerLayout>
+  );
+}

resources/js/pages/backups/index.tsx

@@ -5,25 +5,23 @@ import HeaderContainer from '@/components/header-container';
 import Heading from '@/components/heading';
 import { Button } from '@/components/ui/button';
 import ServerLayout from '@/layouts/server/layout';
-import React from 'react';
 import { BookOpenIcon, PlusIcon } from 'lucide-react';
 import { Backup } from '@/types/backup';
 import { DataTable } from '@/components/data-table';
 import { columns } from '@/pages/backups/components/columns';
 import CreateBackup from '@/pages/backups/components/create-backup';
+import { PaginatedData } from '@/types';
 
 type Page = {
   server: Server;
-  backups: {
-    data: Backup[];
-  };
+  backups: PaginatedData<Backup>;
 };
 
 export default function Backups() {
   const page = usePage<Page>();
 
   return (
-    <ServerLayout server={page.props.server}>
+    <ServerLayout>
       <Head title={`Backups - ${page.props.server.name}`} />
 
       <Container className="max-w-5xl">
@@ -45,7 +43,7 @@ export default function Backups() {
           </div>
         </HeaderContainer>
 
-        <DataTable columns={columns} data={page.props.backups.data} />
+        <DataTable columns={columns} paginatedData={page.props.backups} />
       </Container>
     </ServerLayout>
   );