@nocobase/portal-template-default 1.0.0

package/src/pages/blog-posts/create.tsx

@@ -0,0 +1,177 @@
+import { useForm } from "@refinedev/react-hook-form";
+import { useSelect } from "@refinedev/core";
+import { useNavigate } from "react-router";
+import { Textarea } from "@/components/ui/textarea";
+
+import { CreateView } from "@/components/resources/views/create-view";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+
+export const BlogPostCreate = () => {
+  const navigate = useNavigate();
+
+  const {
+    refineCore: { onFinish },
+    ...form
+  } = useForm({
+    refineCoreProps: {},
+  });
+
+  const { options: categoryOptions } = useSelect({
+    resource: "categories",
+    optionLabel: "title",
+    optionValue: "id",
+    pagination: {
+      currentPage: 1,
+      pageSize: 100,
+    },
+  });
+
+  function onSubmit(values: Record<string, string>) {
+    onFinish(values);
+  }
+
+  return (
+    <CreateView>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="resource-form">
+          <FormField
+            control={form.control}
+            name="title"
+            rules={{ required: "Title is required" }}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Title</FormLabel>
+                <FormControl
+                  render={<Input
+                    {...field}
+                    value={field.value || ""}
+                    placeholder="Enter title"
+                  />}
+                />
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="content"
+            rules={{ required: "Content is required" }}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Content</FormLabel>
+                <FormControl
+                  render={<Textarea
+                    {...field}
+                    value={field.value || ""}
+                    placeholder="Enter content"
+                    rows={10}
+                  />}
+                />
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="categoryId"
+            rules={{ required: "Category is required" }}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Category</FormLabel>
+                <Select
+                  items={categoryOptions?.map((option) => ({
+                    label: option.label,
+                    value: option.value.toString(),
+                  }))}
+                  onValueChange={field.onChange}
+                  value={field.value?.toString() || ""}
+                >
+                  <FormControl
+                    render={<SelectTrigger>
+                      <SelectValue placeholder="Select a category" />
+                    </SelectTrigger>}
+                  />
+                  <SelectContent>
+                    {categoryOptions?.map((option) => (
+                      <SelectItem key={option.value} value={option.value.toString()}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="status"
+            rules={{ required: "Status is required" }}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Status</FormLabel>
+                <Select
+                  items={{
+                    draft: "Draft",
+                    published: "Published",
+                    rejected: "Rejected",
+                  }}
+                  onValueChange={field.onChange}
+                  defaultValue={"draft"}
+                >
+                  <FormControl
+                    render={<SelectTrigger>
+                      <SelectValue placeholder="Select status" />
+                    </SelectTrigger>}
+                  />
+                  <SelectContent>
+                    <SelectItem value="draft">Draft</SelectItem>
+                    <SelectItem value="published">Published</SelectItem>
+                    <SelectItem value="rejected">Rejected</SelectItem>
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex gap-2">
+            <Button
+              type="submit"
+              {...form.saveButtonProps}
+              disabled={form.formState.isSubmitting}
+            >
+              {form.formState.isSubmitting ? "Creating..." : "Create"}
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => navigate(-1)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </CreateView>
+  );
+};

package/src/pages/blog-posts/edit.tsx

@@ -0,0 +1,197 @@
+import { useForm } from "@refinedev/react-hook-form";
+import { useSelect } from "@refinedev/core";
+import { useEffect } from "react";
+import { useNavigate } from "react-router";
+import { Textarea } from "@/components/ui/textarea";
+
+import { EditView } from "@/components/resources/views/edit-view";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+
+export const BlogPostEdit = () => {
+  const navigate = useNavigate();
+
+  const {
+    refineCore: { onFinish, query },
+    ...form
+  } = useForm({
+    refineCoreProps: {
+      meta: {
+        appends: ["category"],
+      },
+    },
+  });
+
+  const blogPostsData = query?.data?.data;
+  const defaultCategoryId =
+    blogPostsData?.categoryId ?? blogPostsData?.category?.id;
+
+  useEffect(() => {
+    if (defaultCategoryId != null && !form.getValues("categoryId")) {
+      form.setValue("categoryId", defaultCategoryId.toString(), {
+        shouldDirty: false,
+      });
+    }
+  }, [defaultCategoryId, form]);
+
+  const { options: categoryOptions } = useSelect({
+    resource: "categories",
+    defaultValue: defaultCategoryId?.toString(),
+    optionLabel: "title",
+    optionValue: "id",
+    pagination: {
+      currentPage: 1,
+      pageSize: 100,
+    },
+  });
+
+  function onSubmit(values: Record<string, string>) {
+    onFinish(values);
+  }
+
+  return (
+    <EditView>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="resource-form">
+          <FormField
+            control={form.control}
+            name="title"
+            rules={{ required: "Title is required" }}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Title</FormLabel>
+                <FormControl
+                  render={<Input
+                    {...field}
+                    value={field.value || ""}
+                    placeholder="Enter title"
+                  />}
+                />
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="content"
+            rules={{ required: "Content is required" }}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Content</FormLabel>
+                <FormControl
+                  render={<Textarea
+                    {...field}
+                    value={field.value || ""}
+                    placeholder="Enter content"
+                    rows={10}
+                  />}
+                />
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="categoryId"
+            rules={{ required: "Category is required" }}
+            render={({ field }) => {
+              const selectedCategoryId = field.value ?? defaultCategoryId;
+
+              return <FormItem>
+                <FormLabel>Category</FormLabel>
+                <Select
+                  items={categoryOptions?.map((option) => ({
+                    label: option.label,
+                    value: option.value.toString(),
+                  }))}
+                  onValueChange={field.onChange}
+                  value={selectedCategoryId?.toString() || ""}
+                >
+                  <FormControl
+                    render={<SelectTrigger>
+                      <SelectValue placeholder="Select a category" />
+                    </SelectTrigger>}
+                  />
+                  <SelectContent>
+                    {categoryOptions?.map((option) => (
+                      <SelectItem key={option.value} value={option.value.toString()}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>;
+            }}
+          />
+
+          <FormField
+            control={form.control}
+            name="status"
+            rules={{ required: "Status is required" }}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Status</FormLabel>
+                <Select
+                  items={{
+                    draft: "Draft",
+                    published: "Published",
+                    rejected: "Rejected",
+                  }}
+                  onValueChange={field.onChange}
+                  value={field.value || ""}
+                >
+                  <FormControl
+                    render={<SelectTrigger>
+                      <SelectValue placeholder="Select status" />
+                    </SelectTrigger>}
+                  />
+                  <SelectContent>
+                    <SelectItem value="draft">Draft</SelectItem>
+                    <SelectItem value="published">Published</SelectItem>
+                    <SelectItem value="rejected">Rejected</SelectItem>
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex gap-2">
+            <Button
+              type="submit"
+              {...form.saveButtonProps}
+              disabled={form.formState.isSubmitting}
+            >
+              {form.formState.isSubmitting ? "Updating..." : "Update"}
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => navigate(-1)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </EditView>
+  );
+};

package/src/pages/blog-posts/index.ts

@@ -0,0 +1,4 @@
+export * from "./create";
+export * from "./edit";
+export * from "./list";
+export * from "./show";

package/src/pages/blog-posts/list.tsx

@@ -0,0 +1,131 @@
+import { useTable } from "@refinedev/react-table";
+import { createColumnHelper } from "@tanstack/react-table";
+import { Eye, Pencil, Trash2 } from "lucide-react";
+import React from "react";
+
+import { DataTable } from "@/components/data-table/data-table";
+import { StatusBadge } from "@/components/resources/status-badge";
+import { ListView } from "@/components/resources/views/list-view";
+import { EditButton } from "@/components/resources/buttons/edit";
+import { ShowButton } from "@/components/resources/buttons/show";
+import { DeleteButton } from "@/components/resources/buttons/delete";
+
+type BlogPost = {
+  id: string;
+  title: string;
+  content: string;
+  status: string;
+  createdAt: string;
+  category: { id: string; title: string };
+};
+
+export const BlogPostList = () => {
+  const columns = React.useMemo(() => {
+    const columnHelper = createColumnHelper<BlogPost>();
+
+    return [
+      columnHelper.accessor("id", {
+        id: "id",
+        header: "ID",
+        enableSorting: false,
+      }),
+      columnHelper.accessor("title", {
+        id: "title",
+        header: "Title",
+        enableSorting: true,
+      }),
+      columnHelper.accessor("content", {
+        id: "content",
+        header: "Content",
+        enableSorting: false,
+        cell: ({ getValue }) => {
+          const content = getValue();
+          if (!content) return "-";
+          return (
+            <div className="max-w-xs truncate">{content.slice(0, 80)}...</div>
+          );
+        },
+      }),
+      columnHelper.accessor("category.title", {
+        id: "category",
+        header: "Category",
+        enableSorting: false,
+        cell: ({ row }) => {
+          return row.original.category?.title || "-";
+        },
+      }),
+      columnHelper.accessor("status", {
+        id: "status",
+        header: "Status",
+        enableSorting: true,
+        cell: ({ getValue }) => {
+          const status = getValue();
+          return <StatusBadge status={status} />;
+        },
+      }),
+      columnHelper.accessor("createdAt", {
+        id: "createdAt",
+        header: "Created At",
+        enableSorting: true,
+        cell: ({ getValue }) => {
+          const date = getValue();
+          return date ? new Date(date).toLocaleDateString() : "-";
+        },
+      }),
+      columnHelper.display({
+        id: "actions",
+        header: "Actions",
+        cell: ({ row }) => (
+          <div className="flex items-center gap-1">
+            <EditButton
+              recordItemId={row.original.id}
+              variant="ghost"
+              size="icon"
+              aria-label="Edit post"
+              title="Edit"
+            >
+              <Pencil />
+            </EditButton>
+            <ShowButton
+              recordItemId={row.original.id}
+              variant="ghost"
+              size="icon"
+              aria-label="View post"
+              title="View"
+            >
+              <Eye />
+            </ShowButton>
+            <DeleteButton
+              recordItemId={row.original.id}
+              variant="ghost"
+              size="icon"
+              className="text-destructive hover:text-destructive"
+              aria-label="Delete post"
+              title="Delete"
+            >
+              <Trash2 />
+            </DeleteButton>
+          </div>
+        ),
+        enableSorting: false,
+        size: 144,
+      }),
+    ];
+  }, []);
+
+  const table = useTable({
+    columns,
+    refineCoreProps: {
+      syncWithLocation: true,
+      meta: {
+        appends: ["category"],
+      },
+    },
+  });
+
+  return (
+    <ListView>
+      <DataTable table={table} />
+    </ListView>
+  );
+};

package/src/pages/blog-posts/show.tsx

@@ -0,0 +1,81 @@
+import { useOne, useShow } from "@refinedev/core";
+import React from "react";
+
+import { ShowView } from "@/components/resources/views/show-view";
+import { StatusBadge } from "@/components/resources/status-badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+
+export const BlogPostShow = () => {
+  const { result: record, query } = useShow({});
+
+  const {
+    result: category,
+    query: { isLoading: categoryIsLoading },
+  } = useOne({
+    resource: "categories",
+    id: record?.category?.id || "",
+    queryOptions: {
+      enabled: !!record,
+    },
+  });
+  const { isLoading } = query;
+
+  return (
+    <ShowView>
+      <div className="max-w-4xl space-y-6">
+        <Card className="resource-detail-card">
+          <CardHeader>
+            <CardTitle>{record?.title}</CardTitle>
+            <CardDescription>
+              <div className="flex items-center gap-4">
+                <StatusBadge status={record?.status} />
+                <span className="text-sm text-muted-foreground">
+                  ID: {record?.id}
+                </span>
+              </div>
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div>
+              <h4 className="text-sm font-medium mb-2">Category</h4>
+              <p className="text-sm text-muted-foreground">
+                {categoryIsLoading ? "Loading..." : category?.title || "-"}
+              </p>
+            </div>
+
+            <Separator />
+
+            <div>
+              <h4 className="text-sm font-medium mb-2">Created At</h4>
+              <p className="text-sm text-muted-foreground">
+                {record?.createdAt
+                  ? new Date(record.createdAt).toLocaleDateString()
+                  : "-"}
+              </p>
+            </div>
+
+            <Separator />
+
+            <div>
+              <h4 className="text-sm font-medium mb-4">Content</h4>
+              <div className="prose prose-sm max-w-none">
+                {record?.content ? (
+                  <div dangerouslySetInnerHTML={{ __html: record.content }} />
+                ) : (
+                  <p className="text-muted-foreground">No content available</p>
+                )}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </ShowView>
+  );
+};

package/src/pages/categories/create.tsx

@@ -0,0 +1,73 @@
+import { useForm } from "@refinedev/react-hook-form";
+import { useNavigate } from "react-router";
+
+import { CreateView } from "@/components/resources/views/create-view";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+
+export const CategoryCreate = () => {
+  const navigate = useNavigate();
+
+  const {
+    refineCore: { onFinish },
+    ...form
+  } = useForm({
+    refineCoreProps: {},
+  });
+
+  function onSubmit(values: Record<string, string>) {
+    onFinish(values);
+  }
+
+  return (
+    <CreateView>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="resource-form">
+          <FormField
+            control={form.control}
+            name="title"
+            rules={{ required: "Title is required" }}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Title</FormLabel>
+                <FormControl
+                  render={<Input
+                    {...field}
+                    value={field.value || ""}
+                    placeholder="Enter category title"
+                  />}
+                />
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex gap-2">
+            <Button
+              type="submit"
+              {...form.saveButtonProps}
+              disabled={form.formState.isSubmitting}
+            >
+              {form.formState.isSubmitting ? "Creating..." : "Create"}
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => navigate(-1)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </CreateView>
+  );
+};