@gadmin2n/schematics 0.0.70 → 0.0.71

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

@@ -0,0 +1,405 @@
+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';
+import { buildPageTree } from '@/helpers/page-tree';
+
+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';
+    return buildPageTree(pages, (page) =>
+      isZh
+        ? page?.zhName || page?.name || page?.code || `Page ${page.id}`
+        : page?.enName || page?.name || page?.code || `Page ${page.id}`,
+    ) as RolePageTreeNode[];
+  }, [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/src/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/src/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/src/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/src/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/src/lib/application/files/gadmin2-game-angle-demo/web/src/routes/user/components/form-modal.tsx

@@ -0,0 +1,194 @@
+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/src/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';