@gadmin2n/schematics 0.0.70 → 0.0.71

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

@@ -0,0 +1,74 @@
+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 { Game } from '../../generated/types/prisma.types'; //'.prisma/client/index';
+import {
+  gameShowConfig as showConfig,
+  gameShowPrismaSelect as showPrismaSelect,
+} from '../../generated/props/game/config';
+import { gameModel } from '../../generated/props/game/model';
+import { modelsMap } from 'generated/models.index';
+import { agentAttrs } from '../../components/agentPanel/agentAttributes';
+
+export const GameShow: React.FC<IResourceComponentsProps> = () => {
+  const resourceName = 'game';
+  const t = useTranslate();
+
+  const { queryResult } = useShow<Game>({
+    meta: { select: showPrismaSelect },
+  });
+  const { data, isLoading } = queryResult;
+  const record = data?.data;
+
+  const [[fields, model]] = useState(() => {
+    const model: ModelType = produceModel(gameModel, {
+      // status: { render: xxxxx }
+    });
+
+    // getColumns is a function that returns an array of fields
+    const fields = getColumns('Game', showConfig.fields, {
+      ...modelsMap,
+      Game: { model, meta: modelsMap['Game'].meta },
+    });
+
+    return [fields, model] as const;
+  });
+
+  return (
+    <Show
+      isLoading={isLoading}
+      headerButtons={
+        <div
+          style={{ display: 'inline-flex', gap: 8 }}
+          {...agentAttrs({ type: 'show-header', resource: resourceName })}
+        >
+          <ListButton />
+          <EditButton recordItemId={record?.id} />
+          <CloneButton recordItemId={record?.id} />
+          <DeleteButton recordItemId={record?.id} />
+          <RefreshButton
+            recordItemId={record?.id}
+            meta={{ select: showPrismaSelect }}
+          />
+        </div>
+      }
+    >
+      {fields.map((field: any) => {
+        return getShowField(field, resourceName, record, t, model, modelsMap);
+      })}
+    </Show>
+  );
+};

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

@@ -0,0 +1,177 @@
+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/src/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/src/lib/application/files/gadmin2-game-angle-demo/web/src/routes/page/Components/EditPageModal.tsx

@@ -0,0 +1,46 @@
+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/src/lib/application/files/gadmin2-game-angle-demo/web/src/routes/page/Components/PageDetailDrawer.tsx

@@ -0,0 +1,136 @@
+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>
+  );
+};