Skip to content

Commit

Permalink
Styling fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@xaviemirmon
xaviemirmon committed Apr 23, 2024
1 parent fa2c2ae commit 4cef964
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 109 deletions.
136 changes: 64 additions & 72 deletions frontend/starters/development/app/admin/content/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import { drupal } from "@/lib/drupal"
import type { DrupalNode, JsonApiParams } from "next-drupal"

async function getNodes(type: string) {

const params: JsonApiParams = {}
if (type === "node--article") {
params.include = "field_image,uid"
Expand All @@ -46,86 +47,70 @@ async function getNodes(type: string) {
})

if (!resource) {
throw new Error(`Failed to fetch resource:`, {
cause: "DrupalError",
})
throw new Error(
`Failed to fetch resource:`,
{
cause: "DrupalError",
}
)
}

return resource
}

type NodePageParams = {
slug: string[]
}
type NodePageProps = {
params: NodePageParams
searchParams: { [key: string]: string | string[] | undefined }
}
slug: string[]
}
type NodePageProps = {
params: NodePageParams
searchParams: { [key: string]: string | string[] | undefined }
}

export async function generateMetadata() {
return {
title: `Admin: Content`,

return {
title: `Admin: Content`,
}
}
}

export async function ContentList() {
let nodes
try {
nodes = await getNodes("node--page")
} catch (e) {
// If we fail to fetch the node, don't return any metadata.
return {}
}
const tableRows = nodes.map((node) => (
<TableRow>
<TableCell className="font-medium">{node.title}</TableCell>
<TableCell>
{node.status ? (
<Badge variant="outline">Pubished</Badge>
) : (
<Badge variant="outline">Unpublished</Badge>
)}
</TableCell>
<TableCell className="hidden md:table-cell">{node.created}</TableCell>
<TableCell className="hidden md:table-cell">{node.changed}</TableCell>
<TableCell>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button aria-haspopup="true" size="icon" variant="ghost">
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">Toggle menu</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem>
<Link
href={
node?.path?.alias
? node?.path?.alias
: `/node/${node.drupal_internal__nid}`
}
>
View
</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<Link
href={
node?.path?.alias
? `${node?.path?.alias}/edit`
: `/node/${node.drupal_internal__nid}/edit`
}
>
Edit
</Link>
</DropdownMenuItem>
<DropdownMenuItem>Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
))
let nodes
try {
nodes = await getNodes('node--page')
} catch (e) {
// If we fail to fetch the node, don't return any metadata.
return {}
}
const tableRows = nodes.map(node => (
<TableRow>
<TableCell className="font-medium">
{node.title}
</TableCell>
<TableCell>
{node.status ? <Badge variant="outline">Pubished</Badge> : <Badge variant="outline">Unpublished</Badge> }
</TableCell>
<TableCell className="hidden md:table-cell">{node.created}</TableCell>
<TableCell className="hidden md:table-cell">
{node.changed}
</TableCell>
<TableCell>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button aria-haspopup="true" size="icon" variant="ghost">
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">Toggle menu</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem><Link href={node?.path?.alias ? node?.path?.alias : `/node/${node.drupal_internal__nid}`}>View</Link></DropdownMenuItem>
<DropdownMenuItem><Link href={node?.path?.alias ? `${node?.path?.alias}/edit` : `/node/${node.drupal_internal__nid}/edit`}>Edit</Link></DropdownMenuItem>
<DropdownMenuItem>Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
))
return (
<Card>
<CardContent>
Expand All @@ -135,11 +120,17 @@ export async function ContentList() {
<TableHead>Title</TableHead>
<TableHead>Status</TableHead>
<TableHead className="hidden md:table-cell">Created</TableHead>
<TableHead className="hidden md:table-cell">Updated</TableHead>
<TableHead>Actions</TableHead>
<TableHead className="hidden md:table-cell">
Updated
</TableHead>
<TableHead>
Actions
</TableHead>
</TableRow>
</TableHeader>
<TableBody>{tableRows}</TableBody>
<TableBody>
{tableRows}
</TableBody>
</Table>
</CardContent>
<CardFooter>
Expand All @@ -151,6 +142,7 @@ export async function ContentList() {
)
}


export default function Dashboard() {
return (
<div className="flex min-h-screen w-full flex-col">
Expand Down
2 changes: 1 addition & 1 deletion frontend/starters/development/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export default async function RootLayout({
content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
/>
</head>
<body>
<body className={`${session && 'logged-in'}`}>
<DraftAlert />
<Toaster position="bottom-right" />
{session && <Header />}
Expand Down
35 changes: 0 additions & 35 deletions frontend/starters/development/app/page.tsx
View file

This file was deleted.

2 changes: 1 addition & 1 deletion frontend/starters/development/components/admin/Header/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import smallLogo from "@/images/logo-nav-small.svg"

export const Header = () => {
return (
<header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
<header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6 z-50">
<nav className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
<Link
href="#"
Expand Down

0 comments on commit 4cef964

Please sign in to comment.