diff options
Diffstat (limited to 'src/app/(main)/admin/websites')
6 files changed, 156 insertions, 0 deletions
diff --git a/src/app/(main)/admin/websites/AdminWebsitesDataTable.tsx b/src/app/(main)/admin/websites/AdminWebsitesDataTable.tsx new file mode 100644 index 0000000..2105992 --- /dev/null +++ b/src/app/(main)/admin/websites/AdminWebsitesDataTable.tsx @@ -0,0 +1,13 @@ +import { DataGrid } from '@/components/common/DataGrid'; +import { useWebsitesQuery } from '@/components/hooks'; +import { AdminWebsitesTable } from './AdminWebsitesTable'; + +export function AdminWebsitesDataTable() { + const query = useWebsitesQuery(); + + return ( + <DataGrid query={query} allowSearch={true}> + {props => <AdminWebsitesTable {...props} />} + </DataGrid> + ); +} diff --git a/src/app/(main)/admin/websites/AdminWebsitesPage.tsx b/src/app/(main)/admin/websites/AdminWebsitesPage.tsx new file mode 100644 index 0000000..1c2ac92 --- /dev/null +++ b/src/app/(main)/admin/websites/AdminWebsitesPage.tsx @@ -0,0 +1,19 @@ +'use client'; +import { Column } from '@umami/react-zen'; +import { PageHeader } from '@/components/common/PageHeader'; +import { Panel } from '@/components/common/Panel'; +import { useMessages } from '@/components/hooks'; +import { AdminWebsitesDataTable } from './AdminWebsitesDataTable'; + +export function AdminWebsitesPage() { + const { formatMessage, labels } = useMessages(); + + return ( + <Column gap="6" margin="2"> + <PageHeader title={formatMessage(labels.websites)} /> + <Panel> + <AdminWebsitesDataTable /> + </Panel> + </Column> + ); +} diff --git a/src/app/(main)/admin/websites/AdminWebsitesTable.tsx b/src/app/(main)/admin/websites/AdminWebsitesTable.tsx new file mode 100644 index 0000000..cfda595 --- /dev/null +++ b/src/app/(main)/admin/websites/AdminWebsitesTable.tsx @@ -0,0 +1,89 @@ +import { DataColumn, DataTable, Dialog, Icon, MenuItem, Modal, Row, Text } from '@umami/react-zen'; +import Link from 'next/link'; +import { useState } from 'react'; +import { WebsiteDeleteForm } from '@/app/(main)/websites/[websiteId]/settings/WebsiteDeleteForm'; +import { DateDistance } from '@/components/common/DateDistance'; +import { useMessages } from '@/components/hooks'; +import { Edit, Trash, Users } from '@/components/icons'; +import { MenuButton } from '@/components/input/MenuButton'; + +export function AdminWebsitesTable({ data = [] }: { data: any[] }) { + const { formatMessage, labels } = useMessages(); + const [deleteWebsite, setDeleteWebsite] = useState(null); + + return ( + <> + <DataTable data={data}> + <DataColumn id="name" label={formatMessage(labels.name)}> + {(row: any) => ( + <Text truncate> + <Link href={`/admin/websites/${row.id}`}>{row.name}</Link> + </Text> + )} + </DataColumn> + <DataColumn id="domain" label={formatMessage(labels.domain)}> + {(row: any) => <Text truncate>{row.domain}</Text>} + </DataColumn> + <DataColumn id="owner" label={formatMessage(labels.owner)}> + {(row: any) => { + if (row?.team) { + return ( + <Row alignItems="center" gap> + <Icon> + <Users /> + </Icon> + <Text truncate> + <Link href={`/admin/teams/${row?.team?.id}`}>{row?.team?.name}</Link> + </Text> + </Row> + ); + } + return ( + <Text truncate> + <Link href={`/admin/users/${row?.user?.id}`}>{row?.user?.username}</Link> + </Text> + ); + }} + </DataColumn> + <DataColumn id="created" label={formatMessage(labels.created)} width="180px"> + {(row: any) => <DateDistance date={new Date(row.createdAt)} />} + </DataColumn> + <DataColumn id="action" align="end" width="50px"> + {(row: any) => { + const { id } = row; + + return ( + <MenuButton> + <MenuItem href={`/admin/websites/${id}`} data-test="link-button-edit"> + <Row alignItems="center" gap> + <Icon> + <Edit /> + </Icon> + <Text>{formatMessage(labels.edit)}</Text> + </Row> + </MenuItem> + <MenuItem + id="delete" + onAction={() => setDeleteWebsite(id)} + data-test="link-button-delete" + > + <Row alignItems="center" gap> + <Icon> + <Trash /> + </Icon> + <Text>{formatMessage(labels.delete)}</Text> + </Row> + </MenuItem> + </MenuButton> + ); + }} + </DataColumn> + </DataTable> + <Modal isOpen={!!deleteWebsite}> + <Dialog style={{ width: 400 }}> + <WebsiteDeleteForm websiteId={deleteWebsite} onClose={() => setDeleteWebsite(null)} /> + </Dialog> + </Modal> + </> + ); +} diff --git a/src/app/(main)/admin/websites/[websiteId]/AdminWebsitePage.tsx b/src/app/(main)/admin/websites/[websiteId]/AdminWebsitePage.tsx new file mode 100644 index 0000000..5da82af --- /dev/null +++ b/src/app/(main)/admin/websites/[websiteId]/AdminWebsitePage.tsx @@ -0,0 +1,14 @@ +'use client'; +import { WebsiteSettings } from '@/app/(main)/websites/[websiteId]/settings/WebsiteSettings'; +import { WebsiteProvider } from '@/app/(main)/websites/WebsiteProvider'; +import { Panel } from '@/components/common/Panel'; + +export function AdminWebsitePage({ websiteId }: { websiteId: string }) { + return ( + <WebsiteProvider websiteId={websiteId}> + <Panel> + <WebsiteSettings websiteId={websiteId} /> + </Panel> + </WebsiteProvider> + ); +} diff --git a/src/app/(main)/admin/websites/[websiteId]/page.tsx b/src/app/(main)/admin/websites/[websiteId]/page.tsx new file mode 100644 index 0000000..557adbd --- /dev/null +++ b/src/app/(main)/admin/websites/[websiteId]/page.tsx @@ -0,0 +1,12 @@ +import type { Metadata } from 'next'; +import { WebsiteSettingsPage } from '@/app/(main)/settings/websites/[websiteId]/WebsiteSettingsPage'; + +export default async function ({ params }: { params: Promise<{ websiteId: string }> }) { + const { websiteId } = await params; + + return <WebsiteSettingsPage websiteId={websiteId} />; +} + +export const metadata: Metadata = { + title: 'Website', +}; diff --git a/src/app/(main)/admin/websites/page.tsx b/src/app/(main)/admin/websites/page.tsx new file mode 100644 index 0000000..d6da9f6 --- /dev/null +++ b/src/app/(main)/admin/websites/page.tsx @@ -0,0 +1,9 @@ +import type { Metadata } from 'next'; +import { AdminWebsitesPage } from './AdminWebsitesPage'; + +export default function () { + return <AdminWebsitesPage />; +} +export const metadata: Metadata = { + title: 'Websites', +}; |