@gadmin2n/schematics 0.0.64 → 0.0.65

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

@@ -0,0 +1,184 @@
+import React, { useState, useMemo } from "react";
+import { useTable, FilterDropdown } from "@refinedev/antd";
+import { Table, Button, Space, Tooltip, Input } from "antd";
+import { EditOutlined, EyeOutlined, SearchOutlined } from "@ant-design/icons";
+import { getDefaultFilter, type HttpError } from "@refinedev/core";
+import type { Resource } from "./types";
+import { EditModal } from "./Components/EditModal";
+import { CreateModal } from "./Components/CreateModal";
+import { ResourceDetailDrawer } from "./Components/ResourceDetailDrawer";
+
+// 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 { 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);
+
+  // 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 as any)}
+              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 as any)}
+              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>
+              </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)}
+        />
+      )}
+    </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/show.tsx

@@ -0,0 +1,61 @@
+
+import { ModelType, getColumns, produceModel } from "@gadmin2n/react-common";
+import { CloneButton, DeleteButton, EditButton, ListButton, RefreshButton, Show } from "@refinedev/antd";
+import { IResourceComponentsProps, useShow, useTranslate } from "@refinedev/core";
+import React, { useState } from "react";
+import { getShowField } from "../../helpers";
+import type { Resource } from "../../generated/types/prisma.types"; //'.prisma/client/index';
+import {
+  resourceShowConfig as showConfig,
+  resourceShowPrismaSelect as showPrismaSelect,
+} from "../../generated/props/resource/config";
+import { resourceModel } from "../../generated/props/resource/model";
+import { modelsMap } from "generated/models.index";
+
+export const ResourceShow: React.FC<IResourceComponentsProps> = () => {
+  const resourceName = "resource";
+  const t = useTranslate();
+  
+  const { queryResult } = useShow<Resource>({
+    meta: { select: showPrismaSelect},
+  });
+  const { data, isLoading } = queryResult;
+  const record = data?.data;
+
+  const [[fields, model]] = useState(() => {
+    const model: ModelType = produceModel(resourceModel, {
+      // status: { render: xxxxx }
+    });
+
+    // getColumns is a function that returns an array of fields
+    const fields = getColumns("Resource", showConfig.fields, {
+      ...modelsMap,
+      Resource: { model, meta: modelsMap["Resource"].meta },
+    });
+
+    return [fields, model] as const;
+  });
+
+  return (
+    <Show
+      isLoading={isLoading}
+      headerButtons={
+        <>
+          <ListButton/>
+          <EditButton recordItemId={record?.id} />
+          <CloneButton recordItemId={record?.id} />
+          <DeleteButton recordItemId={record?.id} />
+          <RefreshButton
+            recordItemId={record?.id}
+            meta={{ select: showPrismaSelect}}
+          />
+        </>
+      }
+    >
+      {fields.map((field: any) => {
+        return getShowField(field, resourceName, record, t, model, modelsMap);
+      })}
+    </Show>
+  );
+};
+

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

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

@@ -0,0 +1,47 @@
+import React from "react";
+
+import { RoleFormModal } from "./modal";
+import type { RolePageTreeNode } from "../types";
+
+type RolePermissionSummary = {
+  pageIds: number[];
+  pageNames: string[];
+  actions: string[];
+};
+
+interface EditModalProps {
+  id?: number;
+  onClose: () => void;
+  onSuccess?: () => void;
+  pageTreeData?: RolePageTreeNode[];
+  rolePermissionSummary?: RolePermissionSummary;
+}
+
+export const EditModal: React.FC<EditModalProps> = ({
+  id,
+  onClose,
+  onSuccess,
+  pageTreeData,
+  rolePermissionSummary,
+}) => {
+  const normalizedPageIds = rolePermissionSummary?.pageIds?.map((pageId) =>
+    String(pageId)
+  );
+
+  const handleMutationSuccess = () => {
+    onSuccess?.();
+    onClose?.();
+  };
+
+  return (
+    <RoleFormModal
+      action="edit"
+      id={id}
+      onCancel={onClose}
+      onMutationSuccess={handleMutationSuccess}
+      pageTreeData={pageTreeData}
+      selectedPageIds={normalizedPageIds}
+      selectedActions={rolePermissionSummary?.actions}
+    />
+  );
+};

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

@@ -0,0 +1,56 @@
+import React, { useMemo } from "react";
+import { Descriptions, Drawer, Table } from "antd";
+import type { Role } from "types/role";
+
+type PageInfo = {
+  id: number;
+  name: string;
+  menuPath: string;
+};
+
+interface RoleDetailDrawerProps {
+  role: Role;
+  pages: PageInfo[];
+  open: boolean;
+  onClose: () => void;
+}
+
+export const RoleDetailDrawer: React.FC<RoleDetailDrawerProps> = ({
+  role,
+  pages,
+  open,
+  onClose,
+}) => {
+  const dataSource = useMemo(
+    () => pages.map((page) => ({ key: page.id, pageName: page.name, menuPath: page.menuPath })),
+    [pages],
+  );
+
+  return (
+    <Drawer
+      title={`Role: ${role.name}`}
+      open={open}
+      onClose={onClose}
+      width={480}
+      destroyOnClose
+    >
+      <Descriptions column={1} size="small" bordered style={{ marginBottom: 16 }}>
+        <Descriptions.Item label="Name">{role.name}</Descriptions.Item>
+        {role.description && (
+          <Descriptions.Item label="Description">{role.description}</Descriptions.Item>
+        )}
+      </Descriptions>
+
+      <Table
+        dataSource={dataSource}
+        rowKey="key"
+        size="small"
+        pagination={false}
+        columns={[
+          { title: "Page Name", dataIndex: "menuPath" },
+        ]}
+        title={() => `Visible Pages (${dataSource.length})`}
+      />
+    </Drawer>
+  );
+};

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

@@ -0,0 +1,302 @@
+import React, { useEffect } from "react";
+import type { RolePageTreeNode } from "../types";
+import { useModalForm } from "@refinedev/antd";
+import { type HttpError, type RedirectAction, useList } from "@refinedev/core";
+import {
+  Form,
+  Input,
+  Modal,
+  Space,
+  Tag,
+  TreeSelect,
+  Typography,
+} from "antd";
+import { Role } from "types/role";
+import { RoleSelect } from "../queries";
+
+type RoleFormFields = Partial<Role> & {
+  pageIds?: Array<number | string>;
+};
+
+type Props = {
+  action: "create" | "edit";
+  id?: number;
+  redirect?: RedirectAction;
+  onMutationSuccess?: () => void;
+  onCancel?: () => void;
+  pageTreeData?: RolePageTreeNode[];
+  selectedPageIds?: Array<number | string>;
+  selectedActions?: string[];
+};
+
+const accessActionList = ["read", "create", "update", "delete"];
+const SPECIAL_CHAR_PATTERN = /[^\u4e00-\u9fa5a-zA-Z0-9\s-_]/;
+
+const buildPageNodeMap = (
+  nodes?: RolePageTreeNode[]
+): Map<string, RolePageTreeNode> => {
+  const nodeMap = new Map<string, RolePageTreeNode>();
+
+  const traverse = (items?: RolePageTreeNode[]) => {
+    items?.forEach((item) => {
+      nodeMap.set(String(item.value), item);
+      if (item.children?.length) {
+        traverse(item.children);
+      }
+    });
+  };
+
+  traverse(nodes);
+  return nodeMap;
+};
+
+const collectDescendantIds = (
+  selectedIds?: Array<string | number>,
+  nodes?: RolePageTreeNode[]
+): number[] => {
+  if (!selectedIds?.length || !nodes?.length) {
+    return [];
+  }
+
+  const nodeMap = buildPageNodeMap(nodes);
+  const collected = new Set<string>();
+
+  const includeNodeAndChildren = (node: RolePageTreeNode) => {
+    collected.add(String(node.value));
+    node.children?.forEach(includeNodeAndChildren);
+  };
+
+  selectedIds.forEach((rawId) => {
+    const node = nodeMap.get(String(rawId));
+    if (!node) {
+      return;
+    }
+    includeNodeAndChildren(node);
+  });
+
+  return Array.from(collected).map((id) => Number(id));
+};
+
+export const RoleFormModal: React.FC<Props> = ({
+  action,
+  id,
+  redirect,
+  onCancel,
+  onMutationSuccess,
+  pageTreeData,
+  selectedPageIds,
+  selectedActions,
+}) => {
+  const { formProps, modalProps, onFinish, close } = useModalForm<
+    Role,
+    HttpError,
+    RoleFormFields
+  >({
+    resource: "role",
+    action,
+    id,
+    defaultVisible: true,
+    redirect,
+    onMutationSuccess: () => {
+      onMutationSuccess?.();
+    },
+    meta: {
+      select: RoleSelect,
+    },
+  });
+
+  // Fetch all roles for name duplication check
+  const { data: rolesData } = useList<Role>({
+    resource: "role",
+    pagination: {
+      mode: "off",
+    },
+  });
+  const normalizedSelectedPageIds =
+    selectedPageIds?.map((pageId) => String(pageId)) ?? [];
+
+  useEffect(() => {
+    if (action === "edit") {
+      formProps.form?.setFieldsValue({ pageIds: normalizedSelectedPageIds });
+    } else {
+      formProps.form?.setFieldsValue({ pageIds: [] });
+    }
+  }, [action, normalizedSelectedPageIds, formProps.form]);
+
+  // fix react-query cache data type error
+  if (
+    formProps.initialValues?.resources &&
+    typeof formProps.initialValues.resources === "string"
+  ) {
+    formProps.initialValues.resources =
+      formProps.initialValues.resources.split(",");
+  }
+  if (
+    formProps.initialValues?.actions &&
+    typeof formProps.initialValues.actions === "string"
+  ) {
+    formProps.initialValues.actions =
+      formProps.initialValues.actions.split(",");
+  }
+
+  formProps.onFinish = (values) => {
+    const formattedValues = {
+      ...values,
+      pageIds: collectDescendantIds(values.pageIds, pageTreeData),
+      resources: Array.isArray(values.resources)
+        ? values.resources.join(",")
+        : values.resources,
+      actions: Array.isArray(values.actions)
+        ? values.actions.join(",")
+        : values.actions,
+    };
+    onFinish(formattedValues);
+  };
+
+  return (
+    <Modal
+      {...modalProps}
+      width={560}
+      onCancel={() => {
+        if (onCancel) {
+          onCancel();
+          return;
+        }
+        close();
+      }}
+      title={action === "create" ? "Create Role" : "Edit Role"}
+    >
+      <Form {...formProps} layout="vertical">
+        <Form.Item
+          rules={[
+            { required: true },
+            {
+              validator: (_, value) => {
+                if (!value || !SPECIAL_CHAR_PATTERN.test(value)) {
+                  return Promise.resolve();
+                }
+                return Promise.reject(new Error("Special characters are not allowed."));
+              },
+            },
+            {
+              validator: async (_, value) => {
+                if (!value) {
+                  return Promise.resolve();
+                }
+                
+                const existingRoles = rolesData?.data || [];
+                const trimmedValue = value.trim();
+                
+                // Check if role name already exists (case-insensitive)
+                const isDuplicate = existingRoles.some((role) => {
+                  // Skip current role when editing
+                  if (action === "edit" && role.id === id) {
+                    return false;
+                  }
+                  return role.name.toLowerCase() === trimmedValue.toLowerCase();
+                });
+                
+                if (isDuplicate) {
+                  return Promise.reject(new Error("Role name already exists. Please use a different name."));
+                }
+                
+                return Promise.resolve();
+              },
+            },
+          ]}
+          name="name"
+          label="Role name"
+        >
+          <Input placeholder="Please enter roleName" />
+        </Form.Item>
+
+        <Form.Item
+          rules={[
+            { required: true },
+          ]}
+          name="description"
+          label="Role Description"
+        >
+          <Input placeholder="Please enter description" />
+        </Form.Item>
+
+        <Form.Item
+          name="pageIds"
+          label="Page Permissions"
+          initialValue={action === "edit" ? normalizedSelectedPageIds : []}
+        >
+          {pageTreeData?.length ? (
+            <TreeSelect
+              style={{ width: "100%" }}
+              treeCheckable
+              treeData={pageTreeData}
+              treeDefaultExpandAll
+              showCheckedStrategy={TreeSelect.SHOW_CHILD}
+              maxTagCount={5}
+              maxTagPlaceholder={(omittedValues) => `+${omittedValues.length} more...`}
+              placeholder={
+                action === "edit"
+                  ? "编辑角色可以访问的页面"
+                  : "请选择角色的可访问页面"
+              }
+            />
+          ) : (
+            <>
+              <Typography.Text type="secondary">
+                No pages are currently linked to this role.
+              </Typography.Text>
+              <Input type="hidden" />
+            </>
+          )}
+        </Form.Item>
+
+        {action === "edit" && (
+          <Form.Item label="Permission Actions Overview">
+            {selectedActions?.length ? (
+              <Space size={[8, 8]} wrap>
+                {selectedActions.map((actionKey) => (
+                  <Tag key={actionKey}>{actionKey}</Tag>
+                ))}
+              </Space>
+            ) : (
+              <Typography.Text type="secondary">
+                No actions have been granted to this role.
+              </Typography.Text>
+            )}
+          </Form.Item>
+        )}
+
+        {/* <Form.Item
+          rules={[{ required: true }]}
+          name="resources"
+          label="Role Resources"
+        >
+          <Select
+            mode="multiple"
+            placeholder="Please select roles"
+            options={availableResourcesResponse?.allResources
+              ?.sort()
+              .map((resource: string) => ({
+                label: resource,
+                value: resource,
+              }))}
+          />
+        </Form.Item>
+        <Form.Item
+          rules={[{ required: true }]}
+          name="actions"
+          label="Role Actions"
+        >
+          <Select
+            mode="multiple"
+            placeholder="Please select roles"
+            options={accessActionList.map((actionItem) => ({
+              label: actionItem,
+              value: actionItem,
+            }))}
+          />
+        </Form.Item> */}
+      </Form>
+    </Modal>
+  );
+};