@gadmin2n/schematics 0.0.64 → 0.0.66

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

@@ -0,0 +1,168 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Checkbox, Modal, Spin, message } from "antd";
+import { customRequest } from "@/helpers/http";
+
+interface Role {
+  id: number;
+  name: string;
+  description?: string;
+}
+
+interface RolePage {
+  roleId: number;
+  pageId: number;
+}
+
+interface AssignRolesModalProps {
+  pageId: number;
+  pageName: string;
+  open: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+export const AssignRolesModal: React.FC<AssignRolesModalProps> = ({
+  pageId,
+  pageName,
+  open,
+  onClose,
+  onSuccess,
+}) => {
+  const [roles, setRoles] = useState<Role[]>([]);
+  const [rolePages, setRolePages] = useState<RolePage[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [selectedRoleIds, setSelectedRoleIds] = useState<number[]>([]);
+
+  // Fetch all roles and rolePages when modal opens
+  useEffect(() => {
+    if (!open) return;
+
+    const fetchData = async () => {
+      setLoading(true);
+      try {
+        const [rolesRes, rolePagesRes] = await Promise.all([
+          customRequest<{ data: Role[] }>("role/findMany", "post"),
+          customRequest<{ data: RolePage[] }>("rolePages/findMany", "post"),
+        ]);
+        const rolesData: Role[] = Array.isArray(rolesRes?.data) ? rolesRes.data : [];
+        const rolePagesData: RolePage[] = Array.isArray(rolePagesRes?.data)
+          ? rolePagesRes.data
+          : [];
+        setRoles(rolesData);
+        setRolePages(rolePagesData);
+      } catch (error) {
+        console.error("Failed to fetch data:", error);
+        message.error("Failed to load roles data");
+      }
+      setLoading(false);
+    };
+
+    fetchData();
+  }, [open]);
+
+  // Role IDs that already have this page assigned
+  const existingRoleIds = useMemo(() => {
+    return rolePages
+      .filter((rp) => rp.pageId === pageId)
+      .map((rp) => rp.roleId);
+  }, [rolePages, pageId]);
+
+  // Initialize selected roles when data loads
+  useEffect(() => {
+    setSelectedRoleIds(existingRoleIds);
+  }, [existingRoleIds]);
+
+  // Build a map: roleId -> all pageIds for that role
+  const rolePageIdsMap = useMemo(() => {
+    const map: Record<number, number[]> = {};
+    for (const rp of rolePages) {
+      if (!map[rp.roleId]) {
+        map[rp.roleId] = [];
+      }
+      if (!map[rp.roleId].includes(rp.pageId)) {
+        map[rp.roleId].push(rp.pageId);
+      }
+    }
+    return map;
+  }, [rolePages]);
+
+  const handleSave = async () => {
+    // Find newly added role IDs (not in existingRoleIds)
+    const newRoleIds = selectedRoleIds.filter((id) => !existingRoleIds.includes(id));
+
+    if (newRoleIds.length === 0) {
+      message.info("No new roles selected");
+      onClose();
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const updatePromises = newRoleIds.map((roleId) => {
+        const currentPageIds = rolePageIdsMap[roleId] || [];
+        const updatedPageIds = [...currentPageIds, pageId];
+        return customRequest(`role/updateUnique/${roleId}`, "PATCH", {
+          pageIds: updatedPageIds,
+        });
+      });
+
+      await Promise.all(updatePromises);
+      message.success(`Successfully assigned ${newRoleIds.length} role(s) to page "${pageName}"`);
+      onSuccess();
+    } catch (error) {
+      console.error("Failed to assign roles:", error);
+      message.error("Failed to assign some roles. Please try again.");
+    }
+    setSaving(false);
+  };
+
+  return (
+    <Modal
+      title={`Assign Roles to Page: ${pageName}`}
+      open={open}
+      onCancel={onClose}
+      onOk={handleSave}
+      okText="Save"
+      confirmLoading={saving}
+      width={560}
+    >
+      <Spin spinning={loading}>
+        {existingRoleIds.length > 0 && (
+          <div style={{ marginBottom: 12, color: "#666" }}>
+            Currently <strong>{existingRoleIds.length}</strong> role(s) can access this page
+          </div>
+        )}
+        <div style={{ maxHeight: 400, overflow: "auto" }}>
+          <Checkbox.Group
+            value={selectedRoleIds}
+            onChange={(values) => setSelectedRoleIds(values as number[])}
+            style={{ display: "flex", flexDirection: "column", gap: 8 }}
+          >
+            {[...roles]
+              .sort((a, b) => {
+                const aExisting = existingRoleIds.includes(a.id);
+                const bExisting = existingRoleIds.includes(b.id);
+                if (aExisting !== bExisting) return aExisting ? -1 : 1;
+                return 0;
+              })
+              .map((role) => {
+                const isExisting = existingRoleIds.includes(role.id);
+                return (
+                  <Checkbox key={role.id} value={role.id} disabled={isExisting}>
+                    <span style={{ fontWeight: 500 }}>{role.name}</span>
+                    {role.description && (
+                      <span style={{ color: "#999", marginLeft: 8 }}>{role.description}</span>
+                    )}
+                  </Checkbox>
+                );
+              })}
+          </Checkbox.Group>
+          {!loading && roles.length === 0 && (
+            <span style={{ color: "#999" }}>No roles available</span>
+          )}
+        </div>
+      </Spin>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,42 @@
+import React from "react";
+
+import { PageFormModal } from "./PageFormModal";
+import type { PageMenuTreeNode, ResourceDefinition } from "../types";
+
+interface CreatePageModalProps {
+  onModalClose: () => void;
+  onPageCreationSuccess?: () => void;
+  parentPageTreeOptions?: PageMenuTreeNode[];
+  allAvailableResources?: ResourceDefinition[];
+  allPagesData?: any[];
+  defaultParentId?: number | null;
+  defaultPathPrefix?: string;
+}
+
+export const CreatePageModal: React.FC<CreatePageModalProps> = ({
+  onModalClose,
+  onPageCreationSuccess,
+  parentPageTreeOptions,
+  allAvailableResources,
+  allPagesData,
+  defaultParentId,
+  defaultPathPrefix,
+}) => {
+  const handlePageCreationMutationSuccess = () => {
+    onPageCreationSuccess?.();
+    onModalClose?.();
+  };
+
+  return (
+    <PageFormModal
+      formActionType="create"
+      onModalCancel={onModalClose}
+      onFormSubmitSuccess={handlePageCreationMutationSuccess}
+      parentPageTreeOptions={parentPageTreeOptions}
+      allAvailableResources={allAvailableResources}
+      allPagesData={allPagesData}
+      defaultParentId={defaultParentId}
+      defaultPathPrefix={defaultPathPrefix}
+    />
+  );
+};

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

@@ -0,0 +1,42 @@
+import React from "react";
+
+import { PageFormModal } from "./PageFormModal";
+import type { PageMenuTreeNode, PageResourceAssignment, ResourceDefinition } from "../types";
+
+interface EditPageModalProps {
+  pageIdToEdit?: number;
+  onModalClose: () => void;
+  onPageEditSuccess?: () => void;
+  parentPageTreeOptions?: PageMenuTreeNode[];
+  allAvailableResources?: ResourceDefinition[];
+  currentPageResourceAssignments?: PageResourceAssignment[];
+  allPagesData?: any[];
+}
+
+export const EditPageModal: React.FC<EditPageModalProps> = ({
+  pageIdToEdit,
+  onModalClose,
+  onPageEditSuccess,
+  parentPageTreeOptions,
+  allAvailableResources,
+  currentPageResourceAssignments,
+  allPagesData,
+}) => {
+  const handlePageEditMutationSuccess = () => {
+    onPageEditSuccess?.();
+    onModalClose();
+  };
+
+  return (
+    <PageFormModal
+      formActionType="edit"
+      editingPageId={pageIdToEdit}
+      onModalCancel={onModalClose}
+      onFormSubmitSuccess={handlePageEditMutationSuccess}
+      parentPageTreeOptions={parentPageTreeOptions}
+      allAvailableResources={allAvailableResources}
+      currentResourceAssignments={currentPageResourceAssignments}
+      allPagesData={allPagesData}
+    />
+  );
+};

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

@@ -0,0 +1,101 @@
+import React, { useEffect, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Descriptions, Drawer, Space, Table, Tag, type TableColumnsType } from "antd";
+import { useFetchData } from "@/hooks/useFetchData";
+
+interface PageDetailDrawerProps {
+  page: { id: number; name: string; code?: string; path?: string; zhName?: string; enName?: string };
+  open: boolean;
+  onClose: () => void;
+}
+
+export const PageDetailDrawer: React.FC<PageDetailDrawerProps> = ({
+  page,
+  open,
+  onClose,
+}) => {
+  const { i18n } = useTranslation();
+  const isChinese = i18n.language === "zh_CN" || i18n.language === "zh";
+
+  const {
+    data: pageResourceData,
+    loading: pageResourceLoading,
+    fetchData: fetchPageResources,
+  } = useFetchData("pageResource/findMany", "post", undefined, true);
+
+  useEffect(() => {
+    if (open) {
+      fetchPageResources({
+        where: { pageId: page.id },
+        include: { resource: true },
+      });
+    }
+  }, [open, page.id]);
+
+  const resources = useMemo(() => {
+    const list: any[] = Array.isArray(pageResourceData?.data) ? pageResourceData.data : [];
+    return list.map((item: any) => {
+      const actions = item.actions ?? item.actionList ?? item.permissions;
+      let parsedActions: string[] = [];
+      if (Array.isArray(actions)) {
+        parsedActions = actions
+          .map((a: any) => (typeof a === "string" ? a : a?.name || a?.code || ""))
+          .filter(Boolean);
+      } else if (typeof actions === "string") {
+        parsedActions = actions.split(",").map((a: string) => a.trim()).filter(Boolean);
+      }
+      return {
+        key: item.id ?? `${item.pageId}-${item.resourceId}`,
+        resourceName: item.resource?.name || item.resource?.code || `Resource ${item.resourceId}`,
+        permissionActions: parsedActions,
+      };
+    });
+  }, [pageResourceData]);
+
+  const pageName = isChinese
+    ? (page.zhName || page.name || "-")
+    : (page.enName || page.name || "-");
+
+  return (
+    <Drawer
+      title={`Page: ${pageName}`}
+      open={open}
+      onClose={onClose}
+      width={480}
+      destroyOnClose
+    >
+      <Descriptions column={1} size="small" bordered style={{ marginBottom: 16 }}>
+        <Descriptions.Item label="Name">{pageName}</Descriptions.Item>
+        {page.code && <Descriptions.Item label="Code">{page.code}</Descriptions.Item>}
+        {page.path && <Descriptions.Item label="Path">{page.path}</Descriptions.Item>}
+      </Descriptions>
+
+      <Table
+        dataSource={resources}
+        loading={pageResourceLoading}
+        rowKey="key"
+        size="small"
+        pagination={resources.length > 10 ? { pageSize: 10 } : false}
+        columns={[
+          { title: "Resource Name", dataIndex: "resourceName", width: "40%" },
+          {
+            title: "Permission Actions",
+            dataIndex: "permissionActions",
+            width: "60%",
+            render: (actions: string[]) =>
+              actions.length > 0 ? (
+                <Space size={[4, 4]} wrap>
+                  {actions.map((action) => (
+                    <Tag key={action} color="blue">{action}</Tag>
+                  ))}
+                </Space>
+              ) : (
+                <span style={{ color: "#999" }}>-</span>
+              ),
+          },
+        ]}
+        title={() => `Assigned Resources (${resources.length})`}
+      />
+    </Drawer>
+  );
+};