create category dialog

2025-03-08 12:48:18 +01:00
parent dd3c321350
commit 66aadfd04d
19 changed files with 535 additions and 25 deletions
@@ -0,0 +1,17 @@
+import { Article } from "@/server/db/schema";
+import Link from "next/link";
+import React from "react";
+
+function ArticleCard({
+  title,
+  slug,
+  createdAt,
+}: Pick<Article, "title" | "slug" | "createdAt">) {
+  return (
+    <Link href={`/artikel/${slug}`}>
+      <div className="rounded-md border p-4">{title}</div>
+    </Link>
+  );
+}
+
+export default ArticleCard;
@@ -47,7 +47,7 @@ function CreateArticleDialog() {
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <Button asChild>
-        <DialogTrigger>Artikel Erstellen</DialogTrigger>
+        <DialogTrigger className="w-full">Artikel Erstellen</DialogTrigger>
      </Button>
      <DialogContent>
        <DialogHeader>
@@ -0,0 +1,17 @@
+import { Category } from "@/server/db/schema";
+import Link from "next/link";
+import React from "react";
+
+function CategoryCard({
+  name,
+  slug,
+  createdAt,
+}: Pick<Category, "name" | "slug" | "createdAt">) {
+  return (
+    <Link href={`/kategorie/${slug}`}>
+      <div className="rounded-md border p-4">{name}</div>
+    </Link>
+  );
+}
+
+export default CategoryCard;
@@ -0,0 +1,81 @@
+"use client";
+import React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { categorySchema } from "@/lib/validation/zod/category";
+import { createCategory } from "@/server/actions/category";
+
+const formSchema = categorySchema.pick({
+  name: true,
+});
+
+function CreateCategoryDialog() {
+  const [open, setOpen] = React.useState<boolean>(false);
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: "",
+    },
+  });
+
+  // 2. Define a submit handler.
+  async function onSubmit(values: z.infer<typeof formSchema>) {
+    setOpen(false);
+    await createCategory(values);
+  }
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <Button asChild>
+        <DialogTrigger className="w-full">Kategorie Erstellen</DialogTrigger>
+      </Button>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Neue Kategorie Erstellen</DialogTitle>
+          <DialogDescription></DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Kategorie Name" {...field} />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button type="submit">Artikel Erstellen</Button>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default CreateCategoryDialog;
@@ -0,0 +1,45 @@
+import React from "react";
+import { api } from "@/trpc/server";
+import { Card, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+
+const StatCard = ({
+  title,
+  value,
+  children,
+}: {
+  title: string;
+  value: string;
+  children?: React.ReactNode;
+}) => {
+  return (
+    <Card className="w-full max-w-64">
+      <CardHeader className="">
+        <span className="text-4xl font-bold leading-5">{value}</span>
+        <CardTitle className="text-2xl">{title}</CardTitle>
+      </CardHeader>
+      {children && <CardFooter className="pb-2">{children}</CardFooter>}
+    </Card>
+  );
+};
+
+async function GlobalStats() {
+  const articleCount = await api.article.getCount();
+  const authorCount = await api.author.getCount();
+  const categoryCount = await api.category.getCount();
+  return (
+    <div className="flex w-full gap-4">
+      <StatCard title="Artikel" value={String(articleCount)}>
+        {/* <Button
+          variant={"link"}
+          className="ml-auto px-1 py-px text-muted-foreground"
+        >
+          Alle Artikel
+        </Button> */}
+      </StatCard>
+      <StatCard title="Kategorien" value={String(categoryCount)} />
+      <StatCard title="Autoren" value={String(authorCount)} />
+    </div>
+  );
+}
+
+export default GlobalStats;
@@ -1,8 +1,61 @@
+import BreadNavigator from "@/components/bread-navigator";
+import { Button } from "@/components/ui/button";
+import { hasPermission, Role } from "@/lib/validation/permissions";
+import { auth } from "@/server/auth";
+import { api } from "@/trpc/server";
+import { Edit } from "lucide-react";
+import { notFound } from "next/navigation";
 import React from "react";
+import ArticleCard from "../../_components/article/article-card";

 async function Page({ params }: { params: Promise<{ name: string }> }) {
  const { name } = await params;
-  return <div>Kategorie {name}</div>;
+  const category = await api.category.get({ slug: name });
+  if (!category) return notFound();
+  const articles = await api.article.getAll({ categoryId: category.id });
+  const session = await auth();
+  const isEditor = session?.user
+    ? hasPermission(session.user.role, Role.EDITOR)
+    : false;
+  return (
+    <>
+      <div className="flex items-center justify-between">
+        <BreadNavigator
+          links={[
+            { label: "Kategorie", href: "/kategorie" },
+            {
+              label: name,
+              href: `/kategorie/${name}`,
+            },
+          ]}
+        />
+
+        {isEditor && (
+          <Button>
+            <Edit className="size-4" />
+            <span>Bearbeiten</span>
+          </Button>
+        )}
+      </div>
+      <h1 className="text-3xl font-bold capitalize">{name}</h1>
+      <p className="text-muted-foreground">keine Beschreibung</p>
+
+      <h3 className="text-2xl font-bold">Artikel</h3>
+      {articles.length ? (
+        <menu>
+          {articles.map((article) => (
+            <li key={article.slug}>
+              <ArticleCard {...article} />
+            </li>
+          ))}
+        </menu>
+      ) : (
+        <p className="text-muted-foreground">
+          Noch keine Artikel in dieser Kategorie.
+        </p>
+      )}
+    </>
+  );
 }

 export default Page;
@@ -9,7 +9,7 @@ function Layout({ children }: { children: React.ReactNode }) {
      <AppSidebar />
      <div className="w-full">
        <Navbar />
-        <main className="p-4">{children}</main>
+        <main className="space-y-4 p-4">{children}</main>
      </div>
    </SidebarProvider>
  );
@@ -1,21 +1,43 @@
 import { auth } from "@/server/auth";
 import { api } from "@/trpc/server";
 import Link from "next/link";
+import GlobalStats from "./_components/global-stats";
+import ArticleCard from "./_components/article/article-card";
+import CategoryCard from "./_components/category/category-card";

 export default async function Home() {
  const session = await auth();
  const articles = await api.article.getAllPreviews();
+  const categories = await api.category.getAll();
  return (
-    <div className="">
-      <h1 className="text-4xl font-bold">Anti Rechts Wiki</h1>
+    <>
+      <div className="w-full space-y-1">
+        <h2 className="text-2xl font-medium">Kategorien</h2>
+        <menu className="grid grid-cols-1 gap-2 lg:grid-cols-2 xl:grid-cols-3">
+          {categories.map((category) => (
+            <li key={category.slug}>
+              <CategoryCard {...category} />
+            </li>
+          ))}
+        </menu>
+      </div>
+      {/* <h1 className="text-4xl font-bold">Anti Rechts Wiki</h1> */}
+      <div className="flex h-64 w-full items-center justify-center rounded-md bg-muted">
+        <span>Artikel Suche</span>
+      </div>

-      <menu>
-        {articles.map((article) => (
-          <li key={article.slug}>
-            <Link href={`/artikel/${article.slug}`}>{article.title}</Link>
-          </li>
-        ))}
-      </menu>
-    </div>
+      {/* <GlobalStats /> */}
+
+      <div className="w-full space-y-1">
+        <h2 className="text-2xl font-medium">Artikel</h2>
+        <menu className="grid grid-cols-1 gap-2 lg:grid-cols-2">
+          {articles.map((article) => (
+            <li key={article.slug}>
+              <ArticleCard {...article} />
+            </li>
+          ))}
+        </menu>
+      </div>
+    </>
  );
 }