@gadmin2n/schematics 0.0.64 → 0.0.66

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/role/list.tsx

@@ -0,0 +1,431 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { useTable } from "@refinedev/antd";
+import { useGetLocale, useGetIdentity } from "@refinedev/core";
+import { Table, Button, Space, Tooltip, message } from "antd";
+
+import { EditModal } from "./Components/EditModal";
+import { CreateModal } from "./Components/CreateModal";
+import type { RolePageTreeNode } from "./types";
+import { useRolePage } from "./hooks/useRolePage";
+import { EditOutlined, EyeOutlined, CodeOutlined } from "@ant-design/icons";
+import { RoleDetailDrawer } from "./Components/RoleDetailDrawer";
+import { SqlModal, generateRoleSql } from "../../components/SqlModal";
+import { customRequest } from "@/helpers/http";
+
+type RolePageInfo = {
+  id: number;
+  code: string;
+  name: string;
+  menuPath: string;
+};
+
+type RolePermissionSummary = {
+  pageIds: number[];
+  pageNames: string[];
+  pageInfos: RolePageInfo[];
+  actions: string[];
+};
+
+const PAGE_NAME_DISPLAY_LIMIT = 40;
+
+const normalizeToNumber = (value: unknown): number | null => {
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    return value;
+  }
+  if (typeof value === "string" && value.trim().length > 0) {
+    const parsedValue = Number(value);
+    return Number.isNaN(parsedValue) ? null : parsedValue;
+  }
+  return null;
+};
+
+const extractActionsFromRelation = (relation: any, pageRecord: any): string[] => {
+  const aggregatedActions = new Set<string>();
+  const relationActions = relation?.actions ?? relation?.actionList;
+
+  if (Array.isArray(relationActions)) {
+    relationActions.forEach((action: any) => {
+      if (typeof action === "string" && action) {
+        aggregatedActions.add(action);
+      } else if (typeof action === "object" && action?.name) {
+        aggregatedActions.add(action.name);
+      }
+    });
+  } else if (typeof relationActions === "string") {
+    relationActions
+      .split(",")
+      .map((action: string) => action.trim())
+      .filter(Boolean)
+      .forEach(action => aggregatedActions.add(action));
+  }
+
+  const pageResources =
+    relation?.pageResources ?? pageRecord?.pageResources ?? pageRecord?.resources ?? [];
+
+  if (Array.isArray(pageResources)) {
+    pageResources.forEach((resource: any) => {
+      const action = resource?.action ?? resource?.code ?? resource?.name ?? resource;
+      if (typeof action === "string" && action) {
+        aggregatedActions.add(action);
+      }
+    });
+  }
+
+  return Array.from(aggregatedActions);
+};
+
+export const RoleManagementListPage: React.FC = () => {
+  const getLocale = useGetLocale();
+  const currentLocale = getLocale();
+  const { data: identity } = useGetIdentity<any>();
+
+  const { tableProps } = useTable({
+    resource: "role",
+    pagination: {
+      pageSize: 20,
+    },
+  });
+
+  const { rolePagesData, refetchRolePages, rolePagesQuery, pageData, refetchPages, pageQuery } =
+    useRolePage();
+
+  const pageLookup = useMemo<Record<number, any>>(() => {
+    const pages: any[] = Array.isArray(pageData?.data) ? pageData.data : [];
+    const lookup: Record<number, any> = {};
+
+    pages.forEach((page: any) => {
+      const pageId = normalizeToNumber(page?.id ?? page?.pageId ?? page?.page_id);
+      if (pageId !== null) {
+        lookup[pageId] = page;
+      }
+    });
+
+    return lookup;
+  }, [pageData]);
+
+  const pageTreeData = useMemo<RolePageTreeNode[]>(() => {
+    const pages: any[] = Array.isArray(pageData?.data) ? pageData.data : [];
+    const isZh = currentLocale === "zh_CN" || currentLocale === "zh";
+
+    const getPageTitle = (page: any, pageId: number): string => {
+      if (isZh) {
+        return page?.zhName || page?.name || page?.code || `Page ${pageId}`;
+      }
+      return page?.enName || page?.name || page?.code || `Page ${pageId}`;
+    };
+
+    const nodeMap = new Map<number, { node: RolePageTreeNode; parentId: number | null; sortOrder: number | null }>();
+
+    pages.forEach((page: any) => {
+      const pageId = normalizeToNumber(page?.id ?? page?.pageId ?? page?.page_id);
+      if (pageId === null) {
+        return;
+      }
+
+      const parentId =
+        normalizeToNumber(page?.parentId ?? page?.parent_id ?? page?.parent?.id) ?? null;
+      const title = getPageTitle(page, pageId);
+      const sortOrder = normalizeToNumber(page?.sortOrder ?? page?.sort_order);
+
+      nodeMap.set(pageId, {
+        node: {
+          title,
+          value: String(pageId),
+          key: String(pageId),
+          children: [],
+        },
+        parentId,
+        sortOrder,
+      });
+    });
+
+    const roots: RolePageTreeNode[] = [];
+
+    nodeMap.forEach(({ node, parentId }) => {
+      if (parentId !== null && nodeMap.has(parentId)) {
+        nodeMap.get(parentId)?.node.children?.push(node);
+      } else {
+        roots.push(node);
+      }
+    });
+
+    // Build a map from node key to sortOrder for sorting
+    const sortOrderMap = new Map<string, number | null>();
+    nodeMap.forEach(({ sortOrder }, pageId) => {
+      sortOrderMap.set(String(pageId), sortOrder);
+    });
+
+    const sortNodes = (nodes: RolePageTreeNode[]) => {
+      nodes.sort((a, b) => {
+        const orderA = sortOrderMap.get(a.key) ?? Infinity;
+        const orderB = sortOrderMap.get(b.key) ?? Infinity;
+        return (orderA as number) - (orderB as number);
+      });
+      nodes.forEach(child => {
+        if (child.children && child.children.length) {
+          sortNodes(child.children);
+        }
+      });
+    };
+
+    const pruneEmptyChildren = (nodes: RolePageTreeNode[]): RolePageTreeNode[] =>
+      nodes.map(node => {
+        if (node.children && node.children.length) {
+          return {
+            ...node,
+            children: pruneEmptyChildren(node.children),
+          };
+        }
+        const { children, ...rest } = node;
+        return rest as RolePageTreeNode;
+      });
+
+    sortNodes(roots);
+    return pruneEmptyChildren(roots);
+  }, [pageData, currentLocale]);
+
+  const rolePermissionSummary = useMemo<Record<number, RolePermissionSummary>>(() => {
+    const relations: any[] = Array.isArray(rolePagesData?.data) ? rolePagesData.data : [];
+    const isZh = currentLocale === "zh_CN" || currentLocale === "zh";
+
+    const getLocalizedName = (pageRecord: any, fallback: string): string => {
+      if (isZh) {
+        return pageRecord?.zhName || pageRecord?.name || pageRecord?.code || fallback;
+      }
+      return pageRecord?.enName || pageRecord?.name || pageRecord?.code || fallback;
+    };
+
+    const buildMenuPath = (pageId: number): string => {
+      const parts: string[] = [];
+      let currentId: number | null = pageId;
+      const visited = new Set<number>();
+      while (currentId !== null && !visited.has(currentId)) {
+        visited.add(currentId);
+        const record: any = pageLookup[currentId];
+        if (!record) break;
+        parts.unshift(getLocalizedName(record, record?.name || `Page ${currentId}`));
+        currentId = normalizeToNumber(record?.parentId ?? record?.parent_id) ?? null;
+      }
+      return parts.join(" / ");
+    };
+
+    const summaryMap: Record<number, RolePermissionSummary> = {};
+
+    relations.forEach((relation: any) => {
+      const roleId = normalizeToNumber(relation?.roleId);
+      const pageId = normalizeToNumber(relation?.pageId);
+
+      if (roleId === null || pageId === null) {
+        return;
+      }
+
+      if (!summaryMap[roleId]) {
+        summaryMap[roleId] = {
+          pageIds: [],
+          pageNames: [],
+          pageInfos: [],
+          actions: [],
+        };
+      }
+
+      const summary = summaryMap[roleId];
+
+      if (!summary.pageIds.includes(pageId)) {
+        summary.pageIds.push(pageId);
+      }
+
+      const pageRecord = relation?.page ?? pageLookup[pageId];
+      const pageName = pageRecord?.name || pageRecord?.code || `Page ${pageId}`;
+
+      if (pageName && !summary.pageNames.includes(pageName)) {
+        summary.pageNames.push(pageName);
+      }
+
+      const localizedName = getLocalizedName(pageRecord, pageName);
+      if (!summary.pageInfos.some(p => p.id === pageId)) {
+        summary.pageInfos.push({
+          id: pageId,
+          code: pageRecord?.code ?? "",
+          name: localizedName,
+          menuPath: buildMenuPath(pageId),
+        });
+      }
+
+      extractActionsFromRelation(relation, pageRecord).forEach(action => {
+        if (action && !summary.actions.includes(action)) {
+          summary.actions.push(action);
+        }
+      });
+    });
+
+    // Build ancestor sort-order chain for hierarchical sorting
+    const getSortChain = (pageId: number): number[] => {
+      const chain: number[] = [];
+      let currentId: number | null = pageId;
+      const visited = new Set<number>();
+      while (currentId !== null && !visited.has(currentId)) {
+        visited.add(currentId);
+        const record: any = pageLookup[currentId];
+        if (!record) break;
+        chain.unshift(record?.sortOrder ?? record?.sort_order ?? Infinity);
+        currentId = normalizeToNumber(record?.parentId ?? record?.parent_id) ?? null;
+      }
+      return chain;
+    };
+
+    // Sort pageInfos by full ancestor sort-order chain
+    Object.values(summaryMap).forEach(summary => {
+      summary.pageInfos.sort((a, b) => {
+        const chainA = getSortChain(a.id);
+        const chainB = getSortChain(b.id);
+        const len = Math.max(chainA.length, chainB.length);
+        for (let i = 0; i < len; i++) {
+          const valA = chainA[i] ?? Infinity;
+          const valB = chainB[i] ?? Infinity;
+          if (valA !== valB) return valA - valB;
+        }
+        return chainA.length - chainB.length;
+      });
+    });
+
+    return summaryMap;
+  }, [rolePagesData, pageLookup, currentLocale]);
+
+  const [drawerRole, setDrawerRole] = useState<any>(null);
+
+  const [showModal, setShowModal] = useState<{
+    type: "show" | "edit" | "create" | null;
+    id: number | null;
+  }>({
+    type: null,
+    id: null,
+  });
+
+  const [sqlModal, setSqlModal] = useState<{
+    open: boolean;
+    title: string;
+    sql: string;
+  }>({ open: false, title: "", sql: "" });
+
+  const handleShowSql = useCallback(async (record: any) => {
+    const summary = rolePermissionSummary[record.id];
+    const rolePages = summary?.pageInfos?.map(p => ({ pageId: p.id, pageCode: p.code, pageName: p.name })) ?? [];
+
+    let roleResources: Array<{ resourceCode: string; resourceName: string; actions: string[] }> = [];
+    try {
+      const resp: any = await customRequest("roleResource/findMany", "post", {
+        where: { roleId: record.id },
+        include: { resource: true },
+      });
+      const items: any[] = Array.isArray(resp?.data) ? resp.data : [];
+      roleResources = items.map(item => ({
+        resourceCode: item.resource?.code ?? String(item.resourceId),
+        resourceName: item.resource?.name ?? String(item.resourceId),
+        actions: Array.isArray(item.actions) ? item.actions : [],
+      }));
+    } catch {
+      message.warning("Could not fetch role resource details; SQL will omit permissions.");
+    }
+
+    const sql = generateRoleSql(record, rolePages, roleResources, { authorId: identity?.userid, authorName: identity?.username });
+    setSqlModal({ open: true, title: `SQL — Role: ${record.name}`, sql });
+  }, [rolePermissionSummary]);
+
+  const refreshRoleRelatedData = useCallback(() => {
+    refetchRolePages(rolePagesQuery ?? {});
+    refetchPages(pageQuery ?? {});
+  }, [refetchRolePages, rolePagesQuery, refetchPages, pageQuery]);
+
+  const handleModalClose = useCallback(() => {
+    setShowModal({ type: null, id: null });
+  }, []);
+
+  const handleModalSuccess = useCallback(() => {
+    handleModalClose();
+    refreshRoleRelatedData();
+  }, [refreshRoleRelatedData, handleModalClose]);
+
+  return (
+    <div>
+      <Space style={{ marginBottom: 16 }}>
+        <Button
+          type="primary"
+          onClick={() =>
+            setShowModal({
+              type: "create",
+              id: null,
+            })
+          }
+        >
+          Create Role
+        </Button>
+      </Space>
+      <Table {...tableProps} rowKey="id">
+        <Table.Column dataIndex="name" title="Name" />
+        <Table.Column dataIndex="description" title="Description" />
+        <Table.Column dataIndex="creator" title="Creator" />
+        <Table.Column
+          title="Actions"
+          render={(_, record: any) => (
+            <Space>
+              <Tooltip title="View details">
+                <Button
+                  type="default"
+                  size="small"
+                  icon={<EyeOutlined />}
+                  onClick={() => setDrawerRole(record)}
+                />
+              </Tooltip>
+              <Tooltip title="Edit">
+                <Button
+                  type="default"
+                  size="small"
+                  icon={<EditOutlined />}
+                  onClick={() => setShowModal({ type: "edit", id: record.id })}
+                />
+              </Tooltip>
+              <Tooltip title="Generate SQL">
+                <Button
+                  type="default"
+                  size="small"
+                  icon={<CodeOutlined />}
+                  onClick={() => handleShowSql(record)}
+                />
+              </Tooltip>
+            </Space>
+          )}
+        />
+      </Table>
+      {drawerRole && (
+        <RoleDetailDrawer
+          role={drawerRole}
+          pages={rolePermissionSummary[drawerRole.id]?.pageInfos ?? []}
+          open={!!drawerRole}
+          onClose={() => setDrawerRole(null)}
+        />
+      )}
+      {showModal.type === "edit" && showModal.id && (
+        <EditModal
+          id={showModal.id}
+          onClose={handleModalClose}
+          onSuccess={handleModalSuccess}
+          pageTreeData={pageTreeData}
+          rolePermissionSummary={rolePermissionSummary[showModal.id]}
+        />
+      )}
+      {showModal.type === "create" && (
+        <CreateModal
+          onClose={handleModalClose}
+          onSuccess={handleModalSuccess}
+          pageTreeData={pageTreeData}
+        />
+      )}
+      <SqlModal
+        open={sqlModal.open}
+        onClose={() => setSqlModal({ open: false, title: "", sql: "" })}
+        title={sqlModal.title}
+        sql={sqlModal.sql}
+      />
+    </div>
+  );
+};

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/role/queries.ts

@@ -0,0 +1,8 @@
+export const RoleSelect = {
+  id: true,
+  name: true,
+  description: true,
+  creator: true,
+  createdAt: true,
+  updatedAt: true,
+};

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/role/types.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+
+export type RolePageTreeNode = {
+  title: ReactNode;
+  value: string;
+  key: string;
+  children?: RolePageTreeNode[];
+};

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/user/components/create-modal.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+import { UserFormModal } from "./form-modal";
+
+interface CreateModalProps {
+  onClose: () => void;
+}
+
+export const CreateModal: React.FC<CreateModalProps> = ({ onClose }) => {
+  return (
+    <UserFormModal
+      action="create"
+      onCancel={onClose}
+      onMutationSuccess={onClose}
+    />
+  );
+};

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/user/components/edit-modal.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+import { UserFormModal } from "./form-modal";
+
+interface EditModalProps {
+  id?: number;
+  onClose: () => void;
+}
+
+export const EditModal: React.FC<EditModalProps> = ({ id, onClose }) => {
+  return (
+    <UserFormModal
+      action="edit"
+      id={id}
+      onCancel={onClose}
+      onMutationSuccess={onClose}
+    />
+  );
+};

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/user/components/form-modal.tsx

@@ -0,0 +1,188 @@
+import React, { useState } from "react";
+
+import { useModalForm } from "@refinedev/antd";
+import { type HttpError, type RedirectAction } from "@refinedev/core";
+
+import { Button, Form, Input, Modal, Select, Space, Switch } from "antd";
+import { ReloadOutlined } from "@ant-design/icons";
+
+import { useRoles } from "@/hooks/useRoles";
+import { User } from "@/types";
+
+import { UserSelect } from "../queries";
+
+const generateApiKey = () => crypto.randomUUID();
+
+type Props = {
+  action: "create" | "edit";
+  id?: number;
+  redirect?: RedirectAction;
+  onMutationSuccess?: () => void;
+  onCancel?: () => void;
+};
+
+export const UserFormModal: React.FC<Props> = ({
+  action,
+  id,
+  redirect,
+  onCancel,
+  onMutationSuccess,
+}) => {
+  const [isApiKey, setIsApiKey] = useState(false);
+  const [usernameTouched, setUsernameTouched] = useState(false);
+
+  // Fetch roles from backend using custom hook
+  const { roleOptions, loading: rolesLoading } = useRoles();
+
+  const { formProps, modalProps, onFinish, close, form } = useModalForm<
+    User,
+    HttpError,
+    Partial<User>
+  >({
+    resource: "user",
+    action,
+    id,
+    defaultVisible: true,
+    redirect,
+    onMutationSuccess: () => {
+      onMutationSuccess?.();
+    },
+    meta: {
+      select: UserSelect,
+    },
+  });
+
+  // fix react-query cache data type error
+  if (
+    formProps.initialValues?.roles &&
+    typeof formProps.initialValues.roles === "string"
+  ) {
+    formProps.initialValues.roles = JSON.parse(formProps.initialValues.roles);
+  }
+
+  // sync isApiKey state with form initial values
+  React.useEffect(() => {
+    if (formProps.initialValues?.isApiKey !== undefined) {
+      setIsApiKey(formProps.initialValues.isApiKey);
+    }
+  }, [formProps.initialValues?.isApiKey]);
+
+  const handleGenerateApiKey = () => {
+    const newKey = generateApiKey();
+    form.setFieldsValue({ apiKey: newKey });
+  };
+
+  const handleIsApiKeyChange = (checked: boolean) => {
+    setIsApiKey(checked);
+    if (checked && !form.getFieldValue("apiKey")) {
+      handleGenerateApiKey();
+    }
+    if (checked) {
+      form.setFieldsValue({ isActive: true });
+    }
+  };
+
+  formProps.onFinish = (values) => {
+    onFinish({ ...values, roles: JSON.stringify(values.roles) });
+  };
+
+  return (
+    <Modal
+      {...modalProps}
+      width={560}
+      onCancel={() => {
+        if (onCancel) {
+          onCancel();
+          return;
+        }
+        //TODO: modalProps.onCancel expect an event so, I used close. Actually both of them are same.
+        close();
+      }}
+      title={action === "create" ? "Create User" : "Edit User"}
+    >
+      <Form {...formProps} layout="vertical">
+        <Form.Item rules={[{ required: true }]} name="userid" label="User ID(WecomId 或者 太湖帐号名)">
+          <Input
+            placeholder="Please enter user ID"
+            onChange={(e) => {
+              if (action === "create" && !usernameTouched) {
+                form.setFieldsValue({ username: e.target.value });
+              }
+            }}
+          />
+        </Form.Item>
+
+        <Form.Item
+          rules={[{ required: true }]}
+          name="username"
+          label="Username(一般设置为和上面的 User ID 一样)"
+        >
+          <Input
+            placeholder="Please enter username"
+            onChange={() => {
+              if (!usernameTouched) setUsernameTouched(true);
+            }}
+          />
+        </Form.Item>
+
+        <Form.Item rules={[{ required: true }]} name="roles" label="Roles">
+          <Select
+            mode="multiple"
+            placeholder="Please select roles"
+            options={roleOptions}
+            loading={rolesLoading}
+          />
+        </Form.Item>
+
+        <Form.Item
+          name="isActive"
+          label="Is Active"
+          valuePropName="checked"
+          initialValue={true}
+        >
+          <Switch />
+        </Form.Item>
+
+        <Form.Item
+          name="isApiKey"
+          label="Is API Key User(用来提供给其他开发者以apikey的方式来访问)"
+          valuePropName="checked"
+        >
+          <Switch onChange={handleIsApiKeyChange} />
+        </Form.Item>
+
+        {isApiKey && (
+          <>
+            <Form.Item
+              label="API Key"
+              rules={[{ required: isApiKey, message: "Please generate API Key" }]}
+            >
+              <Space.Compact style={{ width: "100%" }}>
+                <Form.Item name="apiKey" noStyle>
+                  <Input
+                    placeholder="Click button to generate API Key"
+                    style={{ fontFamily: "monospace" }}
+                  />
+                </Form.Item>
+                <Button
+                  type="primary"
+                  icon={<ReloadOutlined />}
+                  onClick={handleGenerateApiKey}
+                >
+                  {form.getFieldValue("apiKey") ? "Regenerate" : "Generate"}
+                </Button>
+              </Space.Compact>
+            </Form.Item>
+
+            <Form.Item name="description" label="Description">
+              <Input.TextArea
+                rows={2}
+                placeholder="Please enter description for this API Key"
+              />
+            </Form.Item>
+          </>
+        )}
+      </Form>
+    </Modal>
+  );
+};

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/user/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./create-modal";
+export * from "./edit-modal";
+export * from "./form-modal";
+export * from "./role-tag";
+export * from "./show-drawer";