@nocobase/portal-template-default 1.0.1 → 1.0.2

package/src/pages/users/create.tsx

@@ -0,0 +1,98 @@
+import { type HttpError, useTranslate } from "@refinedev/core";
+import { useForm } from "@refinedev/react-hook-form";
+import { useMemo } from "react";
+import { useNavigate } from "react-router";
+
+import { CreateView } from "@/components/resources/views/create-view";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Form } from "@/components/ui/form";
+import { useAIForm, type AIFormField } from "@/extensions/nocobase-ai";
+import {
+  applyAIUserFormValues,
+  getAIUserFormFields,
+  getAIUserFormValues,
+} from "./form-context";
+import { UserFormFields } from "./form-fields";
+import type { UserFormValues, UserRecord } from "./types";
+
+export const UserCreate = () => {
+  const translate = useTranslate();
+  const navigate = useNavigate();
+  const {
+    refineCore: { onFinish },
+    ...form
+  } = useForm<UserRecord, HttpError, UserFormValues>({
+    refineCoreProps: {
+      redirect: "list",
+    },
+    defaultValues: {
+      nickname: "",
+      username: "",
+      email: "",
+      phone: "",
+      password: "",
+    },
+  });
+
+  const aiFields = useMemo<AIFormField[]>(
+    () => getAIUserFormFields(translate),
+    [translate]
+  );
+  const aiFormRef = useAIForm({
+    id: "users-create-form",
+    title: translate("users.ai.createForm", { ns: "app" }, "Create user form"),
+    fields: aiFields,
+    getValues: () => getAIUserFormValues(form.getValues()),
+    setValues: (values) => applyAIUserFormValues(form, values),
+  });
+
+  return (
+    <CreateView>
+      <Card className="max-w-3xl">
+        <CardContent>
+          <Form {...form}>
+            <form
+              ref={aiFormRef}
+              onSubmit={form.handleSubmit((values) => onFinish(values))}
+              className="resource-form"
+            >
+              <UserFormFields
+                form={form}
+                includePassword
+                translate={translate}
+              />
+
+              <div className="flex flex-wrap gap-2">
+                <Button
+                  type="submit"
+                  {...form.saveButtonProps}
+                  disabled={form.formState.isSubmitting}
+                >
+                  {form.formState.isSubmitting
+                    ? translate(
+                        "users.form.create.submitting",
+                        { ns: "app" },
+                        "Creating..."
+                      )
+                    : translate(
+                        "users.form.create.submit",
+                        { ns: "app" },
+                        "Create user"
+                      )}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => navigate(-1)}
+                >
+                  {translate("users.form.cancel", { ns: "app" }, "Cancel")}
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
+    </CreateView>
+  );
+};

package/src/pages/users/edit.tsx

@@ -0,0 +1,92 @@
+import {
+  type HttpError,
+  useResourceParams,
+  useTranslate,
+} from "@refinedev/core";
+import { useForm } from "@refinedev/react-hook-form";
+import { useMemo } from "react";
+import { useNavigate } from "react-router";
+
+import { EditView } from "@/components/resources/views/edit-view";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Form } from "@/components/ui/form";
+import { useAIForm, type AIFormField } from "@/extensions/nocobase-ai";
+import {
+  applyAIUserFormValues,
+  getAIUserFormFields,
+  getAIUserFormValues,
+} from "./form-context";
+import { UserFormFields } from "./form-fields";
+import type { UserFormValues, UserRecord } from "./types";
+
+export const UserEdit = () => {
+  const translate = useTranslate();
+  const navigate = useNavigate();
+  const { id } = useResourceParams();
+  const {
+    refineCore: { onFinish },
+    ...form
+  } = useForm<UserRecord, HttpError, UserFormValues>({
+    refineCoreProps: {
+      redirect: "list",
+    },
+  });
+
+  const aiFields = useMemo<AIFormField[]>(
+    () => getAIUserFormFields(translate),
+    [translate]
+  );
+  const aiFormRef = useAIForm({
+    id: `users-edit-form-${id ?? "current"}`,
+    title: translate("users.ai.editForm", { ns: "app" }, "Edit user form"),
+    fields: aiFields,
+    getValues: () => getAIUserFormValues(form.getValues()),
+    setValues: (values) => applyAIUserFormValues(form, values),
+  });
+
+  return (
+    <EditView>
+      <Card className="max-w-3xl">
+        <CardContent>
+          <Form {...form}>
+            <form
+              ref={aiFormRef}
+              onSubmit={form.handleSubmit((values) => onFinish(values))}
+              className="resource-form"
+            >
+              <UserFormFields form={form} translate={translate} />
+
+              <div className="flex flex-wrap gap-2">
+                <Button
+                  type="submit"
+                  {...form.saveButtonProps}
+                  disabled={form.formState.isSubmitting}
+                >
+                  {form.formState.isSubmitting
+                    ? translate(
+                        "users.form.edit.submitting",
+                        { ns: "app" },
+                        "Saving..."
+                      )
+                    : translate(
+                        "users.form.edit.submit",
+                        { ns: "app" },
+                        "Save changes"
+                      )}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => navigate(-1)}
+                >
+                  {translate("users.form.cancel", { ns: "app" }, "Cancel")}
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
+    </EditView>
+  );
+};

package/src/pages/users/form-context.ts

@@ -0,0 +1,57 @@
+import type { useTranslate } from "@refinedev/core";
+import type { UseFormReturn } from "react-hook-form";
+
+import { applyReactHookFormValues } from "@/extensions/nocobase-ai/adapters/react-hook-form";
+import type { UserFormValues } from "./types";
+
+type Translate = ReturnType<typeof useTranslate>;
+
+const AI_EDITABLE_FIELDS = ["nickname", "username", "email", "phone"] as const;
+
+export function getAIUserFormValues(values: UserFormValues) {
+  return Object.fromEntries(
+    AI_EDITABLE_FIELDS.map((name) => [name, values[name] ?? ""])
+  );
+}
+
+export function applyAIUserFormValues(
+  form: Pick<UseFormReturn<UserFormValues>, "setValue">,
+  values: Record<string, unknown>
+) {
+  applyReactHookFormValues(
+    form,
+    Object.fromEntries(
+      Object.entries(values).filter(([name]) =>
+        AI_EDITABLE_FIELDS.includes(name as (typeof AI_EDITABLE_FIELDS)[number])
+      )
+    )
+  );
+}
+
+export function getAIUserFormFields(translate: Translate) {
+  return [
+    {
+      name: "nickname",
+      title: translate("users.fields.nickname", { ns: "app" }, "Nickname"),
+      type: "string",
+    },
+    {
+      name: "username",
+      title: translate("users.fields.username", { ns: "app" }, "Username"),
+      type: "string",
+      required: true,
+    },
+    {
+      name: "email",
+      title: translate("users.fields.email", { ns: "app" }, "Email"),
+      type: "email",
+      required: true,
+    },
+    {
+      name: "phone",
+      title: translate("users.fields.phone", { ns: "app" }, "Phone"),
+      type: "string",
+      required: true,
+    },
+  ];
+}

package/src/pages/users/form-fields.tsx

@@ -0,0 +1,211 @@
+import { type useTranslate } from "@refinedev/core";
+import type { UseFormReturn } from "react-hook-form";
+
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import type { UserFormValues } from "./types";
+
+type Translate = ReturnType<typeof useTranslate>;
+
+export function UserFormFields({
+  form,
+  includePassword,
+  translate,
+}: {
+  form: UseFormReturn<UserFormValues>;
+  includePassword?: boolean;
+  translate: Translate;
+}) {
+  return (
+    <>
+      <FormField
+        control={form.control}
+        name="nickname"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>
+              {translate("users.fields.nickname", { ns: "app" }, "Nickname")}
+            </FormLabel>
+            <FormControl
+              render={
+                <Input
+                  {...field}
+                  value={field.value ?? ""}
+                  placeholder={translate(
+                    "users.form.nickname.placeholder",
+                    { ns: "app" },
+                    "Enter a display name"
+                  )}
+                />
+              }
+            />
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="username"
+        rules={{
+          required: translate(
+            "users.validation.username",
+            { ns: "app" },
+            "Username is required"
+          ),
+        }}
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>
+              {translate("users.fields.username", { ns: "app" }, "Username")}
+            </FormLabel>
+            <FormControl
+              render={
+                <Input
+                  {...field}
+                  value={field.value ?? ""}
+                  autoComplete="username"
+                  placeholder={translate(
+                    "users.form.username.placeholder",
+                    { ns: "app" },
+                    "Enter a unique username"
+                  )}
+                />
+              }
+            />
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="email"
+        rules={{
+          required: translate(
+            "users.validation.email",
+            { ns: "app" },
+            "Email is required"
+          ),
+          pattern: {
+            value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+            message: translate(
+              "users.validation.emailFormat",
+              { ns: "app" },
+              "Enter a valid email address"
+            ),
+          },
+        }}
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>
+              {translate("users.fields.email", { ns: "app" }, "Email")}
+            </FormLabel>
+            <FormControl
+              render={
+                <Input
+                  {...field}
+                  value={field.value ?? ""}
+                  type="email"
+                  autoComplete="email"
+                  placeholder={translate(
+                    "users.form.email.placeholder",
+                    { ns: "app" },
+                    "Enter an email address"
+                  )}
+                />
+              }
+            />
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      <FormField
+        control={form.control}
+        name="phone"
+        rules={{
+          required: translate(
+            "users.validation.phone",
+            { ns: "app" },
+            "Phone is required"
+          ),
+        }}
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>
+              {translate("users.fields.phone", { ns: "app" }, "Phone")}
+            </FormLabel>
+            <FormControl
+              render={
+                <Input
+                  {...field}
+                  value={field.value ?? ""}
+                  type="tel"
+                  autoComplete="tel"
+                  placeholder={translate(
+                    "users.form.phone.placeholder",
+                    { ns: "app" },
+                    "Enter a phone number"
+                  )}
+                />
+              }
+            />
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+
+      {includePassword ? (
+        <FormField
+          control={form.control}
+          name="password"
+          rules={{
+            required: translate(
+              "users.validation.password",
+              { ns: "app" },
+              "Password is required"
+            ),
+          }}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                {translate("users.fields.password", { ns: "app" }, "Password")}
+              </FormLabel>
+              <FormControl
+                render={
+                  <Input
+                    {...field}
+                    value={field.value ?? ""}
+                    type="password"
+                    autoComplete="new-password"
+                    placeholder={translate(
+                      "users.form.password.placeholder",
+                      { ns: "app" },
+                      "Set an initial password"
+                    )}
+                  />
+                }
+              />
+              <FormDescription>
+                {translate(
+                  "users.form.password.aiNotice",
+                  { ns: "app" },
+                  "Passwords are never included in AI page context or Form filler."
+                )}
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      ) : null}
+    </>
+  );
+}

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>
+  );
+};