@gadmin2n/schematics 0.0.64 → 0.0.66

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/resource/Components/CreateModal.tsx

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

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/resource/Components/EditModal.tsx

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

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/resource/Components/ResourceDetailDrawer.tsx

@@ -0,0 +1,160 @@
+import React, { useEffect, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Descriptions, Drawer, Space, Table, Tabs, Tag } from "antd";
+import { useFetchData } from "@/hooks/useFetchData";
+import type { Resource } from "../types";
+
+interface ResourceDetailDrawerProps {
+  resource: Resource;
+  open: boolean;
+  onClose: () => void;
+}
+
+export const ResourceDetailDrawer: React.FC<ResourceDetailDrawerProps> = ({
+  resource,
+  open,
+  onClose,
+}) => {
+  const { i18n } = useTranslation();
+  const isChinese = i18n.language === "zh_CN" || i18n.language === "zh";
+
+  const {
+    data: pageResourceData,
+    loading: pageLoading,
+    fetchData: fetchPageResources,
+  } = useFetchData("pageResource/findMany", "post", undefined, true);
+
+  const {
+    data: roleData,
+    loading: roleLoading,
+    fetchData: fetchRoles,
+  } = useFetchData("role/findMany", "post", undefined, true);
+
+  useEffect(() => {
+    if (open) {
+      fetchPageResources({
+        where: { resourceId: resource.id },
+        include: { page: { select: { id: true, name: true, code: true, zhName: true, enName: true } } },
+        take: 1000,
+      });
+      // Query roles with filtered roleResources for this resource
+      fetchRoles({
+        where: {
+          roleResources: {
+            some: { resourceId: resource.id },
+          },
+        },
+        include: {
+          roleResources: {
+            where: { resourceId: resource.id },
+          },
+        },
+        take: 1000,
+      });
+    }
+  }, [open, resource.id]);
+
+  const pages = useMemo(() => {
+    const list: any[] = Array.isArray(pageResourceData?.data)
+      ? pageResourceData.data
+      : [];
+    return list.map((item: any) => {
+      const page = item.page;
+      const pageName = isChinese
+        ? (page?.zhName || page?.name || "-")
+        : (page?.enName || page?.name || "-");
+      return {
+        key: item.id,
+        pageName,
+        pageCode: page?.code || "-",
+        actions: Array.isArray(item.actions) ? item.actions : [],
+      };
+    });
+  }, [pageResourceData]);
+
+  const roles = useMemo(() => {
+    const list: any[] = Array.isArray(roleData?.data) ? roleData.data : [];
+    return list.map((item: any) => {
+      const roleResource = item.roleResources?.[0];
+      const actions = roleResource?.actions;
+      return {
+        key: item.id,
+        roleName: item.name || "-",
+        roleCode: item.code || "-",
+        actions: Array.isArray(actions) ? actions : [],
+      };
+    });
+  }, [roleData]);
+
+  const permissionColumns = [
+    {
+      title: "Permissions",
+      dataIndex: "actions",
+      render: (actions: string[]) => (
+        <Space size={[0, 4]} wrap>
+          {actions.map(a => (
+            <Tag key={a}>{a}</Tag>
+          ))}
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <Drawer
+      title={`Resource: ${resource.name}`}
+      open={open}
+      onClose={onClose}
+      width={560}
+      destroyOnClose
+    >
+      <Descriptions column={1} size="small" bordered style={{ marginBottom: 16 }}>
+        <Descriptions.Item label="Code">{resource.code}</Descriptions.Item>
+        <Descriptions.Item label="Name">{resource.name}</Descriptions.Item>
+        {resource.description && (
+          <Descriptions.Item label="Description">{resource.description}</Descriptions.Item>
+        )}
+      </Descriptions>
+
+      <Tabs
+        items={[
+          {
+            key: "pages",
+            label: `Referenced by Pages (${pages.length})`,
+            children: (
+              <Table
+                dataSource={pages}
+                loading={pageLoading}
+                rowKey="key"
+                size="small"
+                pagination={pages.length > 10 ? { pageSize: 10 } : false}
+                columns={[
+                  { title: "Page Name", dataIndex: "pageName", width: "35%" },
+                  { title: "Page Code", dataIndex: "pageCode", width: "25%" },
+                  ...permissionColumns,
+                ]}
+              />
+            ),
+          },
+          {
+            key: "roles",
+            label: `Visible to Roles (${roles.length})`,
+            children: (
+              <Table
+                dataSource={roles}
+                loading={roleLoading}
+                rowKey="key"
+                size="small"
+                pagination={roles.length > 10 ? { pageSize: 10 } : false}
+                columns={[
+                  { title: "Role Name", dataIndex: "roleName", width: "35%" },
+                  ...permissionColumns,
+                ]}
+              />
+            ),
+          },
+        ]}
+      />
+    </Drawer>
+  );
+};

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/resource/Components/modal.tsx

@@ -0,0 +1,202 @@
+import React from "react";
+import { useModalForm } from "@refinedev/antd";
+import { type HttpError, useList } from "@refinedev/core";
+import { Checkbox, Form, Input, Modal, Select } from "antd";
+import type { Resource } from "../types";
+import { ResourceSelect } from "../queries";
+import { PROTECTED_RESOURCES } from "../list";
+
+type ResourceFormFields = Partial<Resource>;
+
+type Props = {
+  action: "create" | "edit";
+  id?: number;
+  onMutationSuccess?: () => void;
+  onCancel?: () => void;
+};
+
+// Pattern to detect special characters - only allows letters, numbers, and underscores
+const SPECIAL_CHAR_PATTERN = /[^a-zA-Z0-9_]/;
+
+export const ResourceFormModal: React.FC<Props> = ({ action, id, onCancel, onMutationSuccess }) => {
+  const { formProps, modalProps, close } = useModalForm<Resource, HttpError, ResourceFormFields>({
+    resource: "resource",
+    action,
+    id,
+    defaultVisible: true,
+    onMutationSuccess: () => {
+      onMutationSuccess?.();
+    },
+    meta: {
+      select: ResourceSelect,
+    },
+  });
+
+  // Fetch all resources for code duplication check
+  const { data: resourcesData } = useList<Resource>({
+    resource: "resource",
+    pagination: {
+      mode: "off",
+    },
+  });
+
+  // Check if current resource is protected (for edit mode)
+  const currentResource = resourcesData?.data?.find(r => r.id === id);
+  const isProtectedResource = currentResource
+    ? PROTECTED_RESOURCES.includes(currentResource.code.toLowerCase())
+    : false;
+
+  return (
+    <Modal
+      {...modalProps}
+      width={560}
+      onCancel={() => {
+        if (onCancel) {
+          onCancel();
+          return;
+        }
+        close();
+      }}
+      title={action === "create" ? "Create Resource" : "Edit Resource"}
+    >
+      <Form {...formProps} layout="vertical">
+        {isProtectedResource && (
+          <div
+            style={{
+              padding: "12px",
+              marginBottom: "16px",
+              backgroundColor: "#fff7e6",
+              border: "1px solid #ffd591",
+              borderRadius: "4px",
+              color: "#d46b08",
+            }}
+          >
+            ⚠️ This is a system resource and cannot be modified.
+          </div>
+        )}
+        <Form.Item
+          rules={[
+            { required: true, message: "Resource Code is required" },
+            {
+              pattern: /^[a-zA-Z0-9_]+$/,
+              message: "Resource Code can only contain letters, numbers and underscores",
+            },
+            {
+              validator: async (_, value) => {
+                if (!value) {
+                  return Promise.resolve();
+                }
+
+                const existingResources = resourcesData?.data || [];
+                const trimmedValue = value.trim();
+
+                // In edit mode, if value hasn't changed, skip validation
+                if (action === "edit" && currentResource && trimmedValue === currentResource.code) {
+                  return Promise.resolve();
+                }
+
+                // Check if trying to use a protected resource code
+                if (PROTECTED_RESOURCES.includes(trimmedValue.toLowerCase())) {
+                  return Promise.reject(
+                    new Error("This resource code is reserved for system use and cannot be used."),
+                  );
+                }
+
+                // Check if resource code already exists (case-insensitive)
+                const isDuplicate = existingResources.some(resource => {
+                  // Skip current resource when editing
+                  if (action === "edit" && resource.id === id) {
+                    return false;
+                  }
+                  return resource.code.toLowerCase() === trimmedValue.toLowerCase();
+                });
+
+                if (isDuplicate) {
+                  return Promise.reject(
+                    new Error("Resource code already exists. Please use a different code."),
+                  );
+                }
+
+                return Promise.resolve();
+              },
+            },
+          ]}
+          name="code"
+          label="Resource Code"
+        >
+          <Input
+            placeholder="Enter resource code (e.g., networkincidents, pageresources)"
+            disabled={isProtectedResource || action === "edit"}
+          />
+        </Form.Item>
+
+        <Form.Item
+          rules={[
+            { required: true, message: "Resource name is required" },
+            {
+              validator: (_, value) => {
+                if (!value || !SPECIAL_CHAR_PATTERN.test(value)) {
+                  return Promise.resolve();
+                }
+                return Promise.reject(
+                  new Error("Special characters are not allowed in resource name."),
+                );
+              },
+            },
+            {
+              validator: async (_, value) => {
+                if (!value) {
+                  return Promise.resolve();
+                }
+
+                const existingResources = resourcesData?.data || [];
+                const trimmedValue = value.trim();
+
+                // In edit mode, if value hasn't changed, skip validation
+                if (action === "edit" && currentResource && trimmedValue === currentResource.name) {
+                  return Promise.resolve();
+                }
+
+                // Check if resource name already exists (case-insensitive) - warning only
+                const isDuplicate = existingResources.some(resource => {
+                  // Skip current resource when editing
+                  if (action === "edit" && resource.id === id) {
+                    return false;
+                  }
+                  return resource.name.toLowerCase() === trimmedValue.toLowerCase();
+                });
+
+                if (isDuplicate) {
+                  return Promise.reject(
+                    new Error(
+                      "⚠️ Warning: Resource name already exists. It's recommended to use a different name.",
+                    ),
+                  );
+                }
+
+                return Promise.resolve();
+              },
+            },
+          ]}
+          name="name"
+          label="Resource Name"
+        >
+          <Input
+            placeholder="Enter resource name (e.g., User Read Permission)"
+            disabled={isProtectedResource}
+          />
+        </Form.Item>
+        <Form.Item name="isCommonResource" valuePropName="checked">
+          <Checkbox>Is Common Resource</Checkbox>
+        </Form.Item>
+        <Form.Item name="description" label="Description">
+          <Input.TextArea
+            rows={4}
+            placeholder="Enter resource description"
+            disabled={isProtectedResource}
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,2 @@
+export { ResourceManagementListPage } from "./list";
+export type { Resource } from "./types";

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

@@ -0,0 +1,212 @@
+import React, { useState, useMemo } from "react";
+import { useTable, FilterDropdown } from "@refinedev/antd";
+import { Table, Button, Space, Tooltip, Input } from "antd";
+import { EditOutlined, EyeOutlined, SearchOutlined, CodeOutlined } from "@ant-design/icons";
+import { getDefaultFilter, type HttpError, useGetIdentity } from "@refinedev/core";
+import type { Resource } from "./types";
+import { EditModal } from "./Components/EditModal";
+import { CreateModal } from "./Components/CreateModal";
+import { ResourceDetailDrawer } from "./Components/ResourceDetailDrawer";
+import { SqlModal, generateResourceSql } from "../../components/SqlModal";
+
+// System resources that cannot be modified (use Set for O(1) lookup performance)
+// System resources that cannot be modified
+export const PROTECTED_RESOURCES = ["pageresource", "resource", "page", "rolepages", "role", "roleresource"];
+
+export const ResourceManagementListPage: React.FC = () => {
+  const { data: identity } = useGetIdentity<any>();
+  const { tableProps, filters, tableQueryResult } = useTable<
+    Resource,
+    HttpError,
+    Partial<Resource>
+  >({
+    resource: "resource",
+    syncWithLocation: false, // Disable URL sync to keep URL clean
+    pagination: {
+      pageSize: 20,
+    },
+    onSearch: (values: Partial<Resource>) => {
+      return Object.entries(values)
+        .filter(([, value]) => value !== undefined && value !== "")
+        .map(([field, value]) => ({
+          field,
+          operator: "contains" as const,
+          value: value || "",
+        }));
+    },
+    filters: {
+      initial: [
+        { field: "code", operator: "contains", value: "" },
+        { field: "name", operator: "contains", value: "" },
+      ],
+      defaultBehavior: "merge",
+    },
+    sorters: {
+    },
+  });
+
+  const [showModal, setShowModal] = useState<{
+    type: "edit" | "create" | null;
+    id: number | null;
+  }>({
+    type: null,
+    id: null,
+  });
+
+  const [drawerResource, setDrawerResource] = useState<Resource | null>(null);
+
+  const [sqlModal, setSqlModal] = useState<{
+    open: boolean;
+    title: string;
+    sql: string;
+  }>({ open: false, title: "", sql: "" });
+
+  const handleShowSql = (record: Resource) => {
+    const operator = { authorId: identity?.userid, authorName: identity?.username };
+    const sql = generateResourceSql(record, operator);
+    setSqlModal({ open: true, title: `SQL — Resource: ${record.code}`, sql });
+  };
+
+  // fix for ant design filter dropdown contains operator
+  filters.map(filter => {
+    if (filter.operator === "contains" && Array.isArray(filter.value)) {
+      filter.value = filter.value.join(",");
+    }
+  });
+
+  // Pre-compute protected resources map for better performance
+  // This avoids repeated toLowerCase() and includes() calls during rendering
+  const protectedResourcesMap = useMemo(() => {
+    const dataSource = tableProps.dataSource || [];
+    const map = new Map<number, boolean>();
+    dataSource.forEach((record: Resource) => {
+      map.set(record.id, PROTECTED_RESOURCES.includes(record.code.toLowerCase()));
+    });
+    return map;
+  }, [tableProps.dataSource]);
+
+  const handleModalClose = () => {
+    setShowModal({ type: null, id: null });
+  };
+
+  const handleModalSuccess = () => {
+    handleModalClose();
+    tableQueryResult?.refetch();
+  };
+
+  return (
+    <div>
+      <Space style={{ marginBottom: 16 }}>
+        <Button
+          type="primary"
+          onClick={() =>
+            setShowModal({
+              type: "create",
+              id: null,
+            })
+          }
+        >
+          Create Resource
+        </Button>
+      </Space>
+      <Table {...tableProps} rowKey="id">
+        <Table.Column
+          dataIndex="code"
+          title="Code"
+          sorter={(a: Resource, b: Resource) => a.code.localeCompare(b.code)}
+          defaultFilteredValue={getDefaultFilter("code", filters, "contains")}
+          filterDropdown={props => (
+            <FilterDropdown
+              {...props}
+              clearFilters={() => {
+                props.setSelectedKeys([]);
+                props.confirm?.();
+              }}
+            >
+              <Input placeholder="Search Code" />
+            </FilterDropdown>
+          )}
+          filterIcon={<SearchOutlined />}
+        />
+        <Table.Column
+          dataIndex="name"
+          title="Name"
+          sorter={(a: Resource, b: Resource) => a.name.localeCompare(b.name)}
+          defaultFilteredValue={getDefaultFilter("name", filters, "contains")}
+          filterDropdown={props => (
+            <FilterDropdown
+              {...props}
+              clearFilters={() => {
+                props.setSelectedKeys([]);
+                props.confirm?.();
+              }}
+            >
+              <Input placeholder="Search Name" />
+            </FilterDropdown>
+          )}
+          filterIcon={<SearchOutlined />}
+        />
+        <Table.Column dataIndex="description" title="Description" />
+        <Table.Column
+          dataIndex="creator"
+          title="Creator"
+          sorter={(a: Resource, b: Resource) => (a.creator || "").localeCompare(b.creator || "")}
+        />
+        <Table.Column
+          title="Actions"
+          render={(_, record: Resource) => {
+            const isProtected = protectedResourcesMap.get(record.id) || false;
+            return (
+              <Space>
+                <Tooltip title="View details">
+                  <Button
+                    type="default"
+                    size="small"
+                    icon={<EyeOutlined />}
+                    onClick={() => setDrawerResource(record)}
+                  />
+                </Tooltip>
+                <Tooltip title={isProtected ? "This is a system resource and cannot be modified" : "Edit"}>
+                  <Button
+                    type="default"
+                    size="small"
+                    icon={<EditOutlined />}
+                    disabled={isProtected}
+                    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>
+      {showModal.type === "edit" && showModal.id && (
+        <EditModal id={showModal.id} onClose={handleModalClose} onSuccess={handleModalSuccess} />
+      )}
+      {showModal.type === "create" && (
+        <CreateModal onClose={handleModalClose} onSuccess={handleModalSuccess} />
+      )}
+      {drawerResource && (
+        <ResourceDetailDrawer
+          resource={drawerResource}
+          open={!!drawerResource}
+          onClose={() => setDrawerResource(null)}
+        />
+      )}
+      <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/resource/queries.ts

@@ -0,0 +1,10 @@
+export const ResourceSelect = {
+  id: true,
+  name: true,
+  code: true,
+  description: true,
+  isCommonResource: true,
+  creator: true,
+  createdAt: true,
+  updatedAt: true,
+};

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

@@ -0,0 +1,9 @@
+export type Resource = {
+  id: number;
+  name: string;
+  code: string;
+  description?: string;
+  creator?: string;
+  createdAt?: Date;
+  updatedAt?: Date;
+};

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

@@ -0,0 +1,30 @@
+import React from "react";
+
+import { RoleFormModal } from "./modal";
+import type { RolePageTreeNode } from "../types";
+
+interface CreateModalProps {
+  onClose: () => void;
+  onSuccess?: () => void;
+  pageTreeData?: RolePageTreeNode[];
+}
+
+export const CreateModal: React.FC<CreateModalProps> = ({
+  onClose,
+  onSuccess,
+  pageTreeData,
+}) => {
+  const handleMutationSuccess = () => {
+    onSuccess?.();
+    onClose?.();
+  };
+
+  return (
+    <RoleFormModal
+      action="create"
+      onCancel={onClose}
+      onMutationSuccess={handleMutationSuccess}
+      pageTreeData={pageTreeData}
+    />
+  );
+};