@nocobase/portal-template-default 1.0.1 → 1.0.3

package/src/pages/users/list.tsx

@@ -0,0 +1,205 @@
+import { useGetLocale, useTranslate } from "@refinedev/core";
+import { useTable } from "@refinedev/react-table";
+import { createColumnHelper } from "@tanstack/react-table";
+import { Eye, Pencil, Trash2 } from "lucide-react";
+import { useMemo } from "react";
+
+import { DataTable } from "@/components/data-table/data-table";
+import { DeleteButton } from "@/components/resources/buttons/delete";
+import { EditButton } from "@/components/resources/buttons/edit";
+import { ShowButton } from "@/components/resources/buttons/show";
+import { ListView } from "@/components/resources/views/list-view";
+import { Badge } from "@/components/ui/badge";
+import { useAIPageElementHandle } from "@/extensions/nocobase-ai";
+import { resolveTranslatableText } from "@/lib/i18n";
+import type { Role } from "@/lib/nocobase/acl";
+import type { UserRecord } from "./types";
+
+const getRoleLabel = (role: Role) =>
+  resolveTranslatableText(role.title || role.name, { ns: "starter" });
+
+const isRootUser = (record: UserRecord) =>
+  record.roles?.some((role) => role.name === "root") ?? false;
+
+export const UserList = () => {
+  const translate = useTranslate();
+  const getLocale = useGetLocale();
+  const locale = getLocale();
+
+  const columns = useMemo(() => {
+    const columnHelper = createColumnHelper<UserRecord>();
+
+    return [
+      columnHelper.accessor("nickname", {
+        id: "nickname",
+        header: translate("users.fields.nickname", { ns: "app" }, "Nickname"),
+        enableSorting: true,
+        cell: ({ row, getValue }) =>
+          getValue() || row.original.username || row.original.email || "-",
+      }),
+      columnHelper.accessor("username", {
+        id: "username",
+        header: translate("users.fields.username", { ns: "app" }, "Username"),
+        enableSorting: true,
+        cell: ({ getValue }) => getValue() || "-",
+      }),
+      columnHelper.accessor("email", {
+        id: "email",
+        header: translate("users.fields.email", { ns: "app" }, "Email"),
+        enableSorting: true,
+        cell: ({ getValue }) => getValue() || "-",
+      }),
+      columnHelper.accessor("phone", {
+        id: "phone",
+        header: translate("users.fields.phone", { ns: "app" }, "Phone"),
+        enableSorting: true,
+        cell: ({ getValue }) => getValue() || "-",
+      }),
+      columnHelper.accessor("roles", {
+        id: "roles",
+        header: translate("users.fields.roles", { ns: "app" }, "Roles"),
+        enableSorting: false,
+        cell: ({ getValue }) => {
+          const roles = getValue() ?? [];
+          return roles.length ? (
+            <div className="flex flex-wrap gap-1">
+              {roles.map((role) => (
+                <Badge key={role.name} variant="secondary">
+                  {getRoleLabel(role)}
+                </Badge>
+              ))}
+            </div>
+          ) : (
+            "-"
+          );
+        },
+      }),
+      columnHelper.accessor("createdAt", {
+        id: "createdAt",
+        header: translate(
+          "users.fields.createdAt",
+          { ns: "app" },
+          "Created at"
+        ),
+        enableSorting: true,
+        cell: ({ getValue }) => {
+          const value = getValue();
+          return value
+            ? new Intl.DateTimeFormat(locale, {
+                dateStyle: "medium",
+              }).format(new Date(value))
+            : "-";
+        },
+      }),
+      columnHelper.display({
+        id: "actions",
+        header: translate("users.fields.actions", { ns: "app" }, "Actions"),
+        cell: ({ row }) => (
+          <div className="flex items-center gap-1">
+            <EditButton
+              recordItemId={row.original.id}
+              variant="ghost"
+              size="icon"
+              aria-label={translate(
+                "users.actions.edit",
+                { ns: "app" },
+                "Edit user"
+              )}
+              title={translate(
+                "users.actions.edit",
+                { ns: "app" },
+                "Edit user"
+              )}
+            >
+              <Pencil />
+            </EditButton>
+            <ShowButton
+              recordItemId={row.original.id}
+              variant="ghost"
+              size="icon"
+              aria-label={translate(
+                "users.actions.view",
+                { ns: "app" },
+                "View user"
+              )}
+              title={translate(
+                "users.actions.view",
+                { ns: "app" },
+                "View user"
+              )}
+            >
+              <Eye />
+            </ShowButton>
+            {isRootUser(row.original) ? null : (
+              <DeleteButton
+                recordItemId={row.original.id}
+                variant="ghost"
+                size="icon"
+                className="text-destructive hover:text-destructive"
+                aria-label={translate(
+                  "users.actions.delete",
+                  { ns: "app" },
+                  "Delete user"
+                )}
+                title={translate(
+                  "users.actions.delete",
+                  { ns: "app" },
+                  "Delete user"
+                )}
+              >
+                <Trash2 />
+              </DeleteButton>
+            )}
+          </div>
+        ),
+        enableSorting: false,
+        size: 144,
+      }),
+    ];
+  }, [locale, translate]);
+
+  const table = useTable<UserRecord>({
+    columns,
+    refineCoreProps: {
+      syncWithLocation: true,
+      meta: {
+        appends: ["roles"],
+      },
+      sorters: {
+        initial: [{ field: "createdAt", order: "desc" }],
+      },
+    },
+  });
+
+  const tableContext = useAIPageElementHandle({
+    id: "users-table",
+    title: translate("users.ai.table", { ns: "app" }, "Users table"),
+    kind: "table",
+    getContext: () => ({
+      resource: "users",
+      page: table.refineCore.currentPage,
+      pageSize: table.refineCore.pageSize,
+      total: table.refineCore.tableQuery.data?.total ?? 0,
+      rows: (table.refineCore.tableQuery.data?.data ?? []).map((record) => ({
+        id: record.id,
+        nickname: record.nickname,
+        username: record.username,
+        email: record.email,
+        phone: record.phone,
+        roles: record.roles?.map((role) => ({
+          name: role.name,
+          title: getRoleLabel(role),
+        })),
+        createdAt: record.createdAt,
+      })),
+    }),
+  });
+
+  return (
+    <ListView>
+      <div ref={tableContext.ref}>
+        <DataTable table={table} />
+      </div>
+    </ListView>
+  );
+};

package/src/pages/users/show.tsx

@@ -0,0 +1,187 @@
+import {
+  useGetLocale,
+  useResourceParams,
+  useShow,
+  useTranslate,
+} from "@refinedev/core";
+
+import { ShowView } from "@/components/resources/views/show-view";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { useAIPageElementHandle } from "@/extensions/nocobase-ai";
+import { resolveTranslatableText } from "@/lib/i18n";
+import type { UserRecord } from "./types";
+
+export const UserShow = () => {
+  const translate = useTranslate();
+  const getLocale = useGetLocale();
+  const locale = getLocale();
+  const { id } = useResourceParams();
+  const { result: record } = useShow<UserRecord>({
+    meta: {
+      appends: ["roles"],
+    },
+  });
+
+  const displayName =
+    record?.nickname ||
+    record?.username ||
+    record?.email ||
+    translate("users.detail.unnamed", { ns: "app" }, "Unnamed user");
+  const roleLabels =
+    record?.roles?.map((role) =>
+      resolveTranslatableText(role.title || role.name, { ns: "starter" })
+    ) ?? [];
+  const detailContext = useAIPageElementHandle({
+    id: `users-detail-${id ?? "current"}`,
+    title: `${translate(
+      "users.ai.detail",
+      { ns: "app" },
+      "User details"
+    )}: ${displayName}`,
+    kind: "detail",
+    getContext: () => ({
+      resource: "users",
+      record: {
+        id: record?.id,
+        nickname: record?.nickname,
+        username: record?.username,
+        email: record?.email,
+        phone: record?.phone,
+        roles: roleLabels,
+        createdAt: record?.createdAt,
+        updatedAt: record?.updatedAt,
+      },
+    }),
+  });
+
+  const formatDate = (value?: string) =>
+    value
+      ? new Intl.DateTimeFormat(locale, {
+          dateStyle: "medium",
+          timeStyle: "short",
+        }).format(new Date(value))
+      : "-";
+
+  return (
+    <ShowView title={displayName}>
+      <Card ref={detailContext.ref} className="max-w-4xl">
+        <CardHeader>
+          <CardTitle>{displayName}</CardTitle>
+          <CardDescription>ID: {record?.id ?? "-"}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-5">
+          <DetailSection
+            title={translate(
+              "users.detail.identity",
+              { ns: "app" },
+              "Identity"
+            )}
+            items={[
+              [
+                translate("users.fields.nickname", { ns: "app" }, "Nickname"),
+                record?.nickname || "-",
+              ],
+              [
+                translate("users.fields.username", { ns: "app" }, "Username"),
+                record?.username || "-",
+              ],
+            ]}
+          />
+          <Separator />
+          <DetailSection
+            title={translate("users.detail.contact", { ns: "app" }, "Contact")}
+            items={[
+              [
+                translate("users.fields.email", { ns: "app" }, "Email"),
+                record?.email || "-",
+              ],
+              [
+                translate("users.fields.phone", { ns: "app" }, "Phone"),
+                record?.phone || "-",
+              ],
+            ]}
+          />
+          <Separator />
+          <section className="space-y-3">
+            <h3 className="text-sm font-medium">
+              {translate("users.detail.access", { ns: "app" }, "Access")}
+            </h3>
+            <div className="flex flex-wrap gap-2">
+              {roleLabels.length ? (
+                roleLabels.map((role, index) => (
+                  <Badge key={`${role}-${index}`} variant="secondary">
+                    {role}
+                  </Badge>
+                ))
+              ) : (
+                <span className="text-sm text-muted-foreground">
+                  {translate(
+                    "users.detail.noRoles",
+                    { ns: "app" },
+                    "No assigned roles"
+                  )}
+                </span>
+              )}
+            </div>
+          </section>
+          <Separator />
+          <DetailSection
+            title={translate(
+              "users.detail.timestamps",
+              { ns: "app" },
+              "Timestamps"
+            )}
+            items={[
+              [
+                translate(
+                  "users.fields.createdAt",
+                  { ns: "app" },
+                  "Created at"
+                ),
+                formatDate(record?.createdAt),
+              ],
+              [
+                translate(
+                  "users.fields.updatedAt",
+                  { ns: "app" },
+                  "Updated at"
+                ),
+                formatDate(record?.updatedAt),
+              ],
+            ]}
+          />
+        </CardContent>
+      </Card>
+    </ShowView>
+  );
+};
+
+function DetailSection({
+  title,
+  items,
+}: {
+  title: string;
+  items: Array<[label: string, value: string | number]>;
+}) {
+  return (
+    <section className="space-y-3">
+      <h3 className="text-sm font-medium">{title}</h3>
+      <dl className="grid gap-4 sm:grid-cols-2">
+        {items.map(([label, value]) => (
+          <div key={label} className="space-y-1">
+            <dt className="text-xs text-muted-foreground">{label}</dt>
+            <dd className="text-sm font-medium">{value}</dd>
+          </div>
+        ))}
+      </dl>
+    </section>
+  );
+}

package/src/pages/users/types.ts

@@ -0,0 +1,20 @@
+import type { Role } from "@/lib/nocobase/acl";
+
+export type UserRecord = {
+  id: string | number;
+  nickname?: string;
+  username?: string;
+  email?: string;
+  phone?: string;
+  roles?: Role[];
+  createdAt?: string;
+  updatedAt?: string;
+};
+
+export type UserFormValues = {
+  nickname: string;
+  username: string;
+  email: string;
+  phone: string;
+  password?: string;
+};

package/src/providers/constants.ts

@@ -36,5 +36,6 @@ export const API_URL = toProxyRelativeUrl(rawApiUrl, proxyTarget);
 export const API_ORIGIN = getDefaultProxyTarget(rawApiUrl);
 export const NOCOBASE_TOKEN_KEY = "nocobase-auth-token";
 export const NOCOBASE_ROLE_KEY = "nocobase-auth-role";
+export const NOCOBASE_LOCALE_KEY = "nocobase-locale";
 export const NOCOBASE_AUTHENTICATOR =
   import.meta.env.NOCOBASE_AUTHENTICATOR ?? "basic";

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

@@ -1,177 +0,0 @@
-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>
-  );
-};