create site modal

This commit is contained in:
Milo Schwartz
2024-11-10 22:29:20 -05:00
parent 22d9f6b37b
commit a7955cb8d2
5 changed files with 539 additions and 104 deletions

View File

@@ -13,8 +13,9 @@ import { ArrowUpDown, MoreHorizontal } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import api from "@app/api";
import { authCookieHeader } from "@app/api/cookies";
import { AxiosResponse } from "axios";
import { useState } from "react";
import CreateSiteForm from "./CreateSiteForm";
export type SiteRow = {
id: number;
@@ -25,95 +26,6 @@ export type SiteRow = {
orgId: string;
};
export const columns: ColumnDef<SiteRow>[] = [
{
accessorKey: "name",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
Name
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
},
{
accessorKey: "nice",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
Site
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
},
{
accessorKey: "mbIn",
header: "MB In",
},
{
accessorKey: "mbOut",
header: "MB Out",
},
{
id: "actions",
cell: ({ row }) => {
const router = useRouter();
const siteRow = row.original;
const deleteSite = (siteId: number) => {
api.delete(`/site/${siteId}`)
.catch((e) => {
console.error("Error deleting site", e);
})
.then(() => {
router.refresh();
});
};
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<span className="sr-only">Open menu</span>
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem>
<Link
href={`/${siteRow.orgId}/settings/sites/${siteRow.nice}`}
>
View settings
</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<button
onClick={() => deleteSite(siteRow.id)}
className="text-red-600 hover:text-red-800"
>
Delete
</button>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
},
},
];
type SitesTableProps = {
sites: SiteRow[];
orgId: string;
@@ -122,26 +34,118 @@ type SitesTableProps = {
export default function SitesTable({ sites, orgId }: SitesTableProps) {
const router = useRouter();
const callApi = async () => {
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const res = await api.put<AxiosResponse<any>>(
`/newt`
);
const callApi = async () => {
const res = await api.put<AxiosResponse<any>>(`/newt`);
console.log(res);
};
const columns: ColumnDef<SiteRow>[] = [
{
accessorKey: "name",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
Name
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
},
{
accessorKey: "nice",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
Site
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
},
{
accessorKey: "mbIn",
header: "MB In",
},
{
accessorKey: "mbOut",
header: "MB Out",
},
{
id: "actions",
cell: ({ row }) => {
const router = useRouter();
const siteRow = row.original;
const deleteSite = (siteId: number) => {
api.delete(`/site/${siteId}`)
.catch((e) => {
console.error("Error deleting site", e);
})
.then(() => {
router.refresh();
});
};
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<span className="sr-only">Open menu</span>
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem>
<Link
href={`/${siteRow.orgId}/settings/sites/${siteRow.nice}`}
>
View settings
</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<button
onClick={() => deleteSite(siteRow.id)}
className="text-red-600 hover:text-red-800"
>
Delete
</button>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
},
},
];
return (
<>
<SitesDataTable
columns={columns}
data={sites}
addSite={() => {
router.push(`/${orgId}/settings/sites/create`);
}}
/>
<button onClick={callApi}>Create Newt</button>
</>
<CreateSiteForm
open={isCreateModalOpen}
setOpen={setIsCreateModalOpen}
/>
<SitesDataTable
columns={columns}
data={sites}
addSite={() => {
// router.push(`/${orgId}/settings/sites/create`);
setIsCreateModalOpen(true);
}}
/>
<button onClick={callApi}>Create Newt</button>
</>
);
}