@gadmin2n/schematics 0.0.64 → 0.0.65

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/hooks/useUserPageAccess.ts

@@ -0,0 +1,339 @@
+import { useMemo, useState, useEffect, useRef, useCallback } from "react";
+import { customRequest } from "helpers/login";
+import type { Role } from "types/role";
+
+const RoleCacheKey = "oiterproles";
+const PagesCacheKey = "oiterpages";
+const RolePagesCacheKey = "oiterprolepages";
+const RolesDataCacheKey = "oiterprolesdatacache";
+
+/**
+ * Base Hook: User Page Access Data
+ *
+ * This hook fetches and provides user's accessible page data.
+ * It's designed to be reused by:
+ * - useDynamicResources (for menu generation)
+ * - Any other component that needs page access info
+ *
+ * Data Flow:
+ * SessionStorage(roles) → Role IDs → RolePages → Accessible Page IDs → Page Codes
+ */
+
+export interface Page {
+  id: number;
+  code: string;
+  name: string;
+  description?: string;
+  zhName?: string;
+  enName?: string;
+  iframeUrl?: string;
+  externalRedirectUrl?: string;
+  icon?: string;
+  path: string;
+  parentId?: number | null;
+  isVirtual?: boolean;
+  sortOrder: number;
+}
+
+interface RolePage {
+  id: number;
+  roleId: number;
+  pageId: number;
+}
+
+export interface UseUserPageAccessResult {
+  /** Set of page IDs the user can access */
+  accessiblePageIds: Set<number>;
+  /** Set of page codes the user can access */
+  accessiblePageCodes: Set<string>;
+  /** All pages data from backend */
+  pagesData: Page[] | null;
+  /** Role pages mapping data */
+  rolePagesData: RolePage[] | null;
+  /** Map of pageId -> Page object */
+  pageMap: Map<number, Page>;
+  /** Map of pageCode -> Page object */
+  pageCodeMap: Map<string, Page>;
+  /** User's role names */
+  roleNames: string[];
+  /** User's role IDs */
+  roleIds: number[];
+  /** Whether data is still loading */
+  isLoading: boolean;
+  /** Check if user can access a page by code */
+  canAccessPage: (pageCode: string) => boolean;
+}
+
+function readCache<T>(key: string): T | null {
+  try {
+    const raw = sessionStorage.getItem(key);
+    return raw ? (JSON.parse(raw) as T) : null;
+  } catch {
+    return null;
+  }
+}
+
+function writeCache(key: string, value: unknown): void {
+  try {
+    sessionStorage.setItem(key, JSON.stringify(value));
+  } catch {
+    // ignore quota errors
+  }
+}
+
+export const useUserPageAccess = (): UseUserPageAccessResult => {
+  // Role names — initialise from cache so first render is non-empty
+  const [roleNames, setRoleNames] = useState<string[]>(
+    () => readCache<string[]>(RoleCacheKey) ?? []
+  );
+  // isRoleLoading only stays true while we wait for the live /userinfo response
+  const [isRoleLoading, setIsRoleLoading] = useState(true);
+
+  // Data states — initialise from cache for instant first render
+  const [rolesData, setRolesData] = useState<Role[] | null>(
+    () => readCache<Role[]>(RolesDataCacheKey)
+  );
+  const [rolePagesData, setRolePagesData] = useState<RolePage[] | null>(
+    () => readCache<RolePage[]>(RolePagesCacheKey)
+  );
+  const [pagesData, setPagesData] = useState<Page[] | null>(
+    () => readCache<Page[]>(PagesCacheKey)
+  );
+
+  // Track previous roles to detect changes
+  const prevRolesRef = useRef<string>("");
+
+  // Function to update roles in state and sessionStorage
+  const updateRoles = useCallback((newRoles: string[]) => {
+    const rolesKey = JSON.stringify(newRoles.sort());
+    if (rolesKey !== prevRolesRef.current) {
+      console.log("[useUserPageAccess] Roles changed:", newRoles);
+      prevRolesRef.current = rolesKey;
+      setRoleNames(newRoles);
+      writeCache(RoleCacheKey, newRoles);
+    }
+  }, []);
+
+  // Step 1: Fetch roles directly from backend to ensure fresh data
+  useEffect(() => {
+    const fetchRolesFromBackend = async () => {
+      try {
+        const res = await customRequest<any>("userinfo", "GET", {});
+        const roles = res?.configPerms?.roles;
+        if (roles && Array.isArray(roles)) {
+          updateRoles(roles as string[]);
+        }
+      } catch (error) {
+        console.error("[useUserPageAccess] Failed to fetch roles from backend:", error);
+        // Fallback to sessionStorage if backend request fails
+        try {
+          const cached = readCache<string[]>(RoleCacheKey);
+          if (cached) {
+            updateRoles(cached);
+          }
+        } catch (e) {
+          console.error("[useUserPageAccess] Failed to parse cached roles:", e);
+        }
+      } finally {
+        setIsRoleLoading(false);
+      }
+    };
+
+    fetchRolesFromBackend();
+  }, [updateRoles]);
+
+  // Step 2: Fetch all page definitions
+  useEffect(() => {
+    const fetchPages = async () => {
+      try {
+        const res = await customRequest<any>("page/findMany", "post", {});
+        const pages = res?.data as Page[];
+        // Keep existing reference if page IDs haven't changed — prevents
+        // downstream memos (accessiblePageIds, dynamicResources, allResources)
+        // from rebuilding and giving Refine a new resources prop.
+        setPagesData(prev => {
+          if (prev && prev.length === pages.length &&
+              prev.every((p, i) => p.id === pages[i].id)) {
+            return prev;
+          }
+          writeCache(PagesCacheKey, pages);
+          return pages;
+        });
+      } catch (error) {
+        console.error("[useUserPageAccess] Failed to fetch pages:", error);
+      }
+    };
+    fetchPages();
+  }, []);
+
+  // Step 3: Fetch role IDs when roleNames are available
+  useEffect(() => {
+    if (roleNames.length === 0) {
+      setRolesData(null);
+      return;
+    }
+
+    const fetchRoles = async () => {
+      try {
+        const query = {
+          where: { name: { in: roleNames } },
+          select: { id: true, name: true },
+        };
+        const res = await customRequest<any>("role/findMany", "post", query);
+        const roles = res?.data as Role[];
+        setRolesData(roles);
+        writeCache(RolesDataCacheKey, roles);
+      } catch (error) {
+        console.error("[useUserPageAccess] Failed to fetch roles:", error);
+      }
+    };
+    fetchRoles();
+  }, [roleNames.join(",")]);
+
+  // Calculate roleIds
+  const roleIds = useMemo(() => {
+    if (!rolesData) return [];
+    return rolesData.map(role => role.id);
+  }, [rolesData]);
+
+  // Step 4: Fetch role-page relationships when roleIds are available
+  useEffect(() => {
+    if (roleIds.length === 0) {
+      setRolePagesData(null);
+      return;
+    }
+
+    const fetchRolePages = async () => {
+      try {
+        const query = { where: { roleId: { in: roleIds } } };
+        const res = await customRequest<any>("rolePages/findMany", "post", query);
+        const rolePages = res?.data as RolePage[];
+        // Same stable-reference trick: keep existing ref if content unchanged.
+        setRolePagesData(prev => {
+          if (prev && prev.length === rolePages.length &&
+              prev.every((rp, i) => rp.id === rolePages[i].id)) {
+            return prev;
+          }
+          writeCache(RolePagesCacheKey, rolePages);
+          return rolePages;
+        });
+      } catch (error) {
+        console.error("[useUserPageAccess] Failed to fetch rolePages:", error);
+      }
+    };
+
+    fetchRolePages();
+  }, [roleIds.join(",")]);
+
+  // Build page maps
+  const { pageMap, pageCodeMap } = useMemo(() => {
+    const idMap = new Map<number, Page>();
+    const codeMap = new Map<string, Page>();
+
+    if (pagesData) {
+      pagesData.forEach(page => {
+        idMap.set(page.id, page);
+        codeMap.set(page.code, page);
+      });
+    }
+
+    return { pageMap: idMap, pageCodeMap: codeMap };
+  }, [pagesData]);
+
+  // Track previous accessiblePageIds to prevent unnecessary reference changes
+  const prevAccessiblePageIdsRef = useRef<Set<number>>(new Set());
+
+  // Build accessible page IDs (with ancestor pages)
+  const accessiblePageIds = useMemo(() => {
+    const ids = new Set<number>();
+
+    if (!rolePagesData || !pagesData) {
+      return prevAccessiblePageIdsRef.current;
+    }
+
+    // Add directly accessible pages
+    rolePagesData.forEach(rolePage => {
+      ids.add(rolePage.pageId);
+    });
+
+    // Recursively add ancestor pages
+    const addAncestorPages = (pageId: number, visited: Set<number>) => {
+      if (visited.has(pageId)) return;
+      visited.add(pageId);
+
+      const page = pageMap.get(pageId);
+      if (!page) return;
+
+      if (page.parentId) {
+        ids.add(page.parentId);
+        addAncestorPages(page.parentId, visited);
+      }
+    };
+
+    const originalIds = Array.from(ids);
+    const visited = new Set<number>();
+    originalIds.forEach(pageId => {
+      addAncestorPages(pageId, visited);
+    });
+
+    // Keep existing reference if IDs haven't changed
+    const prev = prevAccessiblePageIdsRef.current;
+    if (prev.size === ids.size && Array.from(ids).every(id => prev.has(id))) {
+      return prev;
+    }
+
+    prevAccessiblePageIdsRef.current = ids;
+    return ids;
+  }, [rolePagesData, pagesData, pageMap]);
+
+  // Build accessible page codes
+  const accessiblePageCodes = useMemo(() => {
+    const codes = new Set<string>();
+
+    accessiblePageIds.forEach(pageId => {
+      const page = pageMap.get(pageId);
+      if (page) {
+        codes.add(page.code);
+      }
+    });
+
+    return codes;
+  }, [accessiblePageIds, pageMap]);
+
+  // Check if user can access a specific page
+  const canAccessPage = useMemo(() => {
+    return (pageCode: string): boolean => {
+      return accessiblePageCodes.has(pageCode);
+    };
+  }, [accessiblePageCodes]);
+
+  // Calculate loading state
+  // If we have cached data, isLoading is false even while background-refreshing
+  const hasCache = useMemo(
+    () => !!(readCache(PagesCacheKey) && readCache(RolePagesCacheKey)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const isLoading = useMemo(() => {
+    // If cache was available on mount, never block rendering
+    if (hasCache && pagesData && rolePagesData) return false;
+    if (isRoleLoading) return true;
+    if (!pagesData) return true;
+    if (roleNames.length > 0 && roleIds.length > 0 && !rolePagesData) return true;
+    return false;
+  }, [isRoleLoading, pagesData, roleNames, roleIds, rolePagesData, hasCache]);
+
+  return {
+    accessiblePageIds,
+    accessiblePageCodes,
+    pagesData,
+    rolePagesData,
+    pageMap,
+    pageCodeMap,
+    roleNames,
+    roleIds,
+    isLoading,
+    canAccessPage,
+  };
+};

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/i18n.ts

@@ -1,19 +1,23 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
-import Backend from "i18next-xhr-backend";
 import detector from "i18next-browser-languagedetector";
+import en from "./locales/en/common.json";
+import zh_CN from "./locales/zh_CN/common.json";
 
 i18n
-  .use(Backend)
   .use(detector)
   .use(initReactI18next)
   .init({
     supportedLngs: ["en", "zh_CN"],
-    backend: {
-      loadPath: "/locales/{{lng}}/{{ns}}.json",
+    resources: {
+      en: { common: en },
+      zh_CN: { common: zh_CN },
     },
     defaultNS: "common",
     fallbackLng: ["en", "zh_CN"],
+    react: {
+      useSuspense: false,
+    },
   });
 
 export default i18n;

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 
-import reportWebVitals from './reportWebVitals';
 import App from './App';
 import './i18n';
 
@@ -14,15 +13,8 @@ if (!checkLogin()) {
   const root = createRoot(container);
 
   root.render(
-    <React.StrictMode>
-      <React.Suspense fallback='loading'>
-        <App />
-      </React.Suspense>
-    </React.StrictMode>
+    <React.Suspense fallback='loading'>
+      <App />
+    </React.Suspense>
   );
 }
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

package/dist/lib/application/files/gadmin2-game-angle-demo/web/{public → src}/locales/en/common.json

@@ -15,7 +15,7 @@
       "buttons": {
         "submit": "Login",
         "forgotPassword": "Forgot password?",
-        "noAccount": "Don’t have an account?",
+        "noAccount": "Don't have an account?",
         "rememberMe": "Remember me"
       }
     },

package/dist/lib/application/files/gadmin2-game-angle-demo/web/{public → src}/locales/zh_CN/common.json

@@ -15,7 +15,7 @@
       "buttons": {
         "submit": "Login",
         "forgotPassword": "Forgot password?",
-        "noAccount": "Don’t have an account?",
+        "noAccount": "Don't have an account?",
         "rememberMe": "Remember me"
       }
     },

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/audit/components/action-cell.css

@@ -0,0 +1,3 @@
+.highlight-changed-row {
+  background-color: #fff2f0;
+} 

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/audit/components/action-cell.tsx

@@ -0,0 +1,134 @@
+import { useState } from "react";
+
+import { ZoomInOutlined } from "@ant-design/icons";
+import { Button, Modal, Table } from "antd";
+import type { ColumnsType } from "antd/es/table";
+
+import { Text } from "components";
+import { AuditLogActionEnum } from "enums";
+import { AuditLog } from "types";
+import { renderLongColumnValue } from "utilities/utils";
+
+import "./action-cell.css";
+
+export const ActionCell = ({ record }: { record: AuditLog }) => {
+  const [opened, setOpened] = useState(false);
+
+  const columns: ColumnsType<{
+    field: string;
+    from: any;
+    to: any;
+  }> = [
+    {
+      title: "Field",
+      dataIndex: "field",
+      key: "field",
+      render: (value) => <Text strong>{value}</Text>,
+      width: "20%",
+    },
+  ];
+
+  if (record.action === AuditLogActionEnum.update) {
+    columns.push({
+      title: "Old value",
+      dataIndex: "from",
+      key: "from",
+      width: "40%",
+      ellipsis: false,
+      render: (value) => {
+        if (value === null || value === undefined) {
+          return <Text type="secondary">-</Text>;
+        }
+        if (typeof value === "object") {
+          return renderLongColumnValue(JSON.stringify(value, null, 2));
+        }
+        return renderLongColumnValue(String(value));
+      },
+    });
+  }
+
+  columns.push({
+    title: "New value",
+    dataIndex: "to",
+    key: "to",
+    width: "40%",
+    ellipsis: false,
+    render: (value) => {
+      if (value === null || value === undefined) {
+        return <Text type="secondary">-</Text>;
+      }
+      if (typeof value === "object") {
+        return renderLongColumnValue(JSON.stringify(value, null, 2));
+      }
+      return renderLongColumnValue(String(value));
+    },
+  });
+
+  if (!record.data) {
+    return null;
+  }
+
+  const newData = JSON.parse(record.data || "{}");
+  const previousData = JSON.parse(record.previousData || "{}");
+  const changes = Object.entries(newData).map(([key, value]) => ({
+    field: key,
+    from: previousData[key],
+    to: value,
+  }));
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
+        <Button
+          size="small"
+          icon={<ZoomInOutlined />}
+          onClick={() => setOpened((prev) => !prev)}
+        >
+          Details
+        </Button>
+      </div>
+      {opened && (
+        <Modal
+          open={opened}
+          onOk={() => setOpened(false)}
+          onCancel={() => setOpened(false)}
+          style={{ minWidth: "60vw" }}
+          styles={{
+            body: {
+              maxHeight: "500px",
+              overflow: "auto",
+            },
+          }}
+        >
+          <Table
+            dataSource={changes}
+            pagination={false}
+            rowKey="field"
+            bordered
+            size="small"
+            columns={columns}
+            style={{ marginTop: "48px" }}
+            rowClassName={(row) => {
+              return record.action === AuditLogActionEnum.update &&
+                row.from !== row.to
+                ? "highlight-changed-row"
+                : "";
+            }}
+          />
+        </Modal>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,113 @@
+
+import {
+  FieldDataType,
+  handleInitialValues,
+  handleOnFinish,
+  ModelType,
+  produceModel,
+} from '@gadmin2n/react-common';
+import { Create, useFileUploadState, useForm } from "@refinedev/antd";
+import { Form } from "antd";
+import { IResourceComponentsProps, useApiUrl, useTranslate } from "@refinedev/core";
+import React, { useContext, useState } from "react";
+import { getFormItem, onFormValuesChange } from "../../helpers";
+import { modelsMap, modelsEnum } from "../../generated/models.index";
+import {
+  auditFormConfig as formConfig,
+  auditFormPrismaSelect as formPrismaSelect,
+} from "../../generated/props/audit/config";
+import {
+  auditModel,
+  useRelation,
+} from "../../generated/props/audit/model";
+import { Audit } from "../../generated/types/prisma.types";
+import { AuditForm as transformClass } from "../../generated/props/audit/form.validator";
+import { BusinessContext } from 'components/contexts/business';
+
+export const AuditCreate: React.FC<IResourceComponentsProps> = () => {
+  const resourceName = "audit";
+  const t = useTranslate();
+  
+  
+
+  const [[fields, model]] = useState(() => {
+    const model: ModelType = produceModel(
+      auditModel,
+      {
+        // all formItem attrs surport, https://ant.design/components/form#formitem
+        // description : { component : <MDEditor data-color-mode="light" /> },
+        // status : { normalize : (value: any) => value ? "1" : "0" },
+        // cron: {validator: { validator: runCronValidator },},
+      },
+      transformClass
+    );
+
+    const fields: FieldDataType[] = formConfig.fields
+      .map((fieldName: string) => model[fieldName])
+      .filter((field: FieldDataType) => field);
+
+    return [fields, model] as const;
+  });
+
+  const { formProps, saveButtonProps, onFinish, form } =
+    useForm<Audit>({
+      meta: { select: formPrismaSelect},
+    });
+  if (formProps.initialValues || formConfig.initialValues) {
+    formProps.initialValues = handleInitialValues(
+      formProps.initialValues || formConfig.initialValues || {},
+      fields,
+    );
+  }
+
+  const apiUrl = useApiUrl();
+  const { isLoading, onChange } = useFileUploadState();
+  const relationSelectProps = useRelation(modelsMap);
+
+  return (
+    <Create
+      saveButtonProps={{
+        ...saveButtonProps,
+        disabled: isLoading,
+      }}
+    >
+      <Form
+        {...formProps}
+        validateTrigger="onBlur"
+        onFinish={(values) => {
+          onFinish(
+            handleOnFinish(
+              {
+                ...values,
+                
+              },
+              fields
+            )
+          );
+        }}
+        layout="vertical"
+        form={form}
+        onValuesChange={onFormValuesChange(
+          form,
+          formConfig.reaction,
+        )}
+      >
+        {fields.map((field) => {
+          return getFormItem(
+            field,
+            resourceName,
+            t,
+            form,
+            formConfig.reaction,
+            modelsEnum,
+            model,
+            apiUrl,
+            relationSelectProps,
+            onChange
+          );
+        })}
+      </Form>
+    </Create>
+  );
+};
+