@gadmin2n/schematics 0.0.140 → 0.0.142

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTable } from '@refinedev/antd';
 import { useGetLocale, useGetIdentity } from '@refinedev/core';
-import { Table, Button, Space, Tooltip, message, Typography } from 'antd';
+import { Table, Button, Card, Space, Tooltip, message } from 'antd';
 
 import { EditModal } from './Components/EditModal';
 import { CreateModal } from './Components/CreateModal';
@@ -12,6 +12,8 @@ import { RoleDetailDrawer } from './Components/RoleDetailDrawer';
 import { SqlModal, generateRoleSql } from '../../components/SqlModal';
 import { customRequest } from '@/helpers/http';
 import { buildPageTree } from '@/helpers/page-tree';
+import { PageHeader } from 'components';
+import { PAGE_WRAPPER_STYLE } from 'constants/layout';
 
 type RolePageInfo = {
   id: number;
@@ -27,8 +29,6 @@ type RolePermissionSummary = {
   actions: string[];
 };
 
-const PAGE_NAME_DISPLAY_LIMIT = 40;
-
 const normalizeToNumber = (value: unknown): number | null => {
   if (typeof value === 'number' && !Number.isNaN(value)) {
     return value;
@@ -302,7 +302,7 @@ export const RoleManagementListPage: React.FC = () => {
       });
       setSqlModal({ open: true, title: `SQL — Role: ${record.name}`, sql });
     },
-    [rolePermissionSummary],
+    [rolePermissionSummary, identity],
   );
 
   const refreshRoleRelatedData = useCallback(() => {
@@ -320,66 +320,63 @@ export const RoleManagementListPage: React.FC = () => {
   }, [refreshRoleRelatedData, handleModalClose]);
 
   return (
-    <div>
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          marginBottom: 16,
-        }}
-      >
-        <Typography.Title level={4} style={{ margin: 0 }}>
-          Role mgnts
-        </Typography.Title>
-        <Button
-          type="primary"
-          onClick={() =>
-            setShowModal({
-              type: 'create',
-              id: null,
-            })
-          }
-        >
-          Create Role
-        </Button>
-      </div>
-      <Table {...tableProps} rowKey="id">
-        <Table.Column dataIndex="name" title="Name" />
-        <Table.Column dataIndex="description" title="Description" />
-        <Table.Column dataIndex="creator" title="Creator" />
-        <Table.Column
-          title="Actions"
-          render={(_, record: any) => (
-            <Space>
-              <Tooltip title="View details">
-                <Button
-                  type="default"
-                  size="small"
-                  icon={<EyeOutlined />}
-                  onClick={() => setDrawerRole(record)}
-                />
-              </Tooltip>
-              <Tooltip title="Edit">
-                <Button
-                  type="default"
-                  size="small"
-                  icon={<EditOutlined />}
-                  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>
+    <div style={PAGE_WRAPPER_STYLE}>
+      <PageHeader
+        title="Role mgnts"
+        extra={
+          <Button
+            type="primary"
+            onClick={() =>
+              setShowModal({
+                type: 'create',
+                id: null,
+              })
+            }
+          >
+            Create Role
+          </Button>
+        }
+      />
+      <Card className="card-table">
+        <Table {...tableProps} rowKey="id">
+          <Table.Column dataIndex="name" title="Name" />
+          <Table.Column dataIndex="description" title="Description" />
+          <Table.Column dataIndex="creator" title="Creator" />
+          <Table.Column
+            title="Actions"
+            render={(_, record: any) => (
+              <Space>
+                <Tooltip title="View details">
+                  <Button
+                    type="default"
+                    size="small"
+                    icon={<EyeOutlined />}
+                    onClick={() => setDrawerRole(record)}
+                  />
+                </Tooltip>
+                <Tooltip title="Edit">
+                  <Button
+                    type="default"
+                    size="small"
+                    icon={<EditOutlined />}
+                    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>
+      </Card>
       {drawerRole && (
         <RoleDetailDrawer
           role={drawerRole}

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

@@ -15,8 +15,7 @@ import {
 } from '@refinedev/core';
 
 import { PlusOutlined, CodeOutlined } from '@ant-design/icons';
-import { Button, Form, Input, Select, Space, Table, Tag, Tooltip } from 'antd';
-import debounce from 'lodash/debounce';
+import { Button, Card, Input, Select, Space, Table, Tag, Tooltip } from 'antd';
 
 import {
   CustomAvatar,
@@ -34,7 +33,6 @@ import { LIST_CONTENT_PROPS } from '@/constants/layout';
 import { SqlModal, generateUserSql } from '../../components/SqlModal';
 
 export const UserListPage: React.FC<PropsWithChildren> = ({ children }) => {
-  const [form] = Form.useForm();
   const { data: identity } = useGetIdentity<any>();
 
   // Fetch roles from backend using custom hook
@@ -61,13 +59,7 @@ export const UserListPage: React.FC<PropsWithChildren> = ({ children }) => {
     });
   };
 
-  const {
-    tableProps,
-    searchFormProps,
-    filters,
-    sorters,
-    tableQuery: tableQueryResult,
-  } = useTable<User, HttpError, Partial<User>>({
+  const { tableProps, filters } = useTable<User, HttpError, Partial<User>>({
     resource: 'user',
     pagination: {
       pageSize: 20,
@@ -97,15 +89,6 @@ export const UserListPage: React.FC<PropsWithChildren> = ({ children }) => {
     },
   });
 
-  const onSearch = () => {
-    const values = form.getFieldsValue();
-    searchFormProps?.onFinish?.({
-      ...values,
-    });
-  };
-
-  const debouncedOnChange = debounce(onSearch, 500);
-
   // fix for ant design filter dropdown contains operator
   filters.map((filter) => {
     if (filter.operator === 'contains' && Array.isArray(filter.value)) {
@@ -159,193 +142,197 @@ export const UserListPage: React.FC<PropsWithChildren> = ({ children }) => {
           );
         }}
       >
-        <Table
-          {...tableProps}
-          pagination={{
-            ...tableProps.pagination,
-            showTotal: (total) => (
-              <PaginationTotal total={total} entityName="user" />
-            ),
-          }}
-          rowKey="id"
-        >
-          <Table.Column
-            dataIndex="userid"
-            title="User ID"
-            render={(_, record) => {
-              return (
-                <Space>
-                  <CustomAvatar
-                    shape="square"
-                    name={record.userid || ''}
-                    src={`https://rhrc.woa.com/photo/150/${record.userid}.png`}
-                  />
-                  <Text style={{ whiteSpace: 'nowrap' }}>{record.userid}</Text>
-                </Space>
-              );
-            }}
-          />
-          <Table.Column
-            dataIndex="username"
-            title="User Name"
-            filterDropdown={(props) => (
-              <FilterDropdown
-                {...props}
-                clearFilters={() => {
-                  props.setSelectedKeys([]);
-                  props.confirm?.();
-                }}
-              >
-                <Input />
-              </FilterDropdown>
-            )}
-            defaultFilteredValue={getDefaultFilter(
-              'username',
-              filters,
-              'contains',
-            )}
-            /*filterIcon={<SearchOutlined />}*/
-          />
-          <Table.Column
-            dataIndex="roles"
-            title="Roles"
-            defaultFilteredValue={getDefaultFilter(
-              'roles',
-              filters,
-              'contains',
-            )}
-            filterDropdown={(props) => (
-              <FilterDropdown
-                {...props}
-                clearFilters={() => {
-                  props.setSelectedKeys([]);
-                  props.confirm?.();
-                }}
-              >
-                <Select
-                  options={roleOptions}
-                  style={{ width: '150px' }}
-                  placeholder="Select Role"
-                  loading={rolesLoading}
-                />
-              </FilterDropdown>
-            )}
-            render={(value) => {
-              return JSON.parse(value || '[]').map((role: string) => (
-                <RoleStatusTag key={role} role={role} />
-              ));
+        <Card className="card-table">
+          <Table
+            {...tableProps}
+            pagination={{
+              ...tableProps.pagination,
+              showTotal: (total) => (
+                <PaginationTotal total={total} entityName="user" />
+              ),
             }}
-          />
-          <Table.Column
-            dataIndex="isApiKey"
-            title="API Key"
-            defaultFilteredValue={getDefaultFilter('isApiKey', filters, 'eq')}
-            filterDropdown={(props) => (
-              <FilterDropdown
-                {...props}
-                mapValue={(selectedKeys) => {
-                  if (selectedKeys?.[0] === 'Yes') return true;
-                  if (selectedKeys?.[0] === 'No') return false;
-                  return selectedKeys;
-                }}
-                clearFilters={() => {
-                  props.setSelectedKeys([]);
-                  props.confirm?.();
-                }}
-              >
-                <Select
-                  style={{ width: '120px' }}
-                  placeholder="Select"
-                  allowClear
-                  options={[
-                    { label: 'Yes', value: 'Yes' },
-                    { label: 'No', value: 'No' },
-                  ]}
-                />
-              </FilterDropdown>
-            )}
-            render={(value) => (
-              <Tag color={value ? 'blue' : 'default'}>
-                {value ? 'Yes' : 'No'}
-              </Tag>
-            )}
-          />
-          <Table.Column
-            dataIndex="isActive"
-            title="Active"
-            defaultFilteredValue={getDefaultFilter('isActive', filters, 'eq')}
-            filterDropdown={(props) => (
-              <FilterDropdown
-                {...props}
-                mapValue={(selectedKeys) => {
-                  if (selectedKeys?.[0] === 'Active') return true;
-                  if (selectedKeys?.[0] === 'Inactive') return false;
-                  return selectedKeys;
-                }}
-                clearFilters={() => {
-                  props.setSelectedKeys([]);
-                  props.confirm?.();
-                }}
-              >
-                <Select
-                  style={{ width: '120px' }}
-                  placeholder="Select"
-                  allowClear
-                  options={[
-                    { label: 'Active', value: 'Active' },
-                    { label: 'Inactive', value: 'Inactive' },
-                  ]}
-                />
-              </FilterDropdown>
-            )}
-            render={(value) => (
-              <Tag color={value ? 'green' : 'red'}>
-                {value ? 'Active' : 'Inactive'}
-              </Tag>
-            )}
-          />
-          <Table.Column
-            fixed="right"
-            title="Actions"
-            dataIndex="actions"
-            render={(_, record) => {
-              return (
-                <Space>
-                  <ShowButton
-                    hideText
-                    size="small"
-                    style={{ backgroundColor: 'transparent' }}
-                    onClick={() =>
-                      setShowModal({ type: 'show', id: record.id })
-                    }
+            rowKey="id"
+          >
+            <Table.Column
+              dataIndex="userid"
+              title="User ID"
+              render={(_, record) => {
+                return (
+                  <Space>
+                    <CustomAvatar
+                      shape="square"
+                      name={record.userid || ''}
+                      src={`https://rhrc.woa.com/photo/150/${record.userid}.png`}
+                    />
+                    <Text style={{ whiteSpace: 'nowrap' }}>
+                      {record.userid}
+                    </Text>
+                  </Space>
+                );
+              }}
+            />
+            <Table.Column
+              dataIndex="username"
+              title="User Name"
+              filterDropdown={(props) => (
+                <FilterDropdown
+                  {...props}
+                  clearFilters={() => {
+                    props.setSelectedKeys([]);
+                    props.confirm?.();
+                  }}
+                >
+                  <Input />
+                </FilterDropdown>
+              )}
+              defaultFilteredValue={getDefaultFilter(
+                'username',
+                filters,
+                'contains',
+              )}
+              /*filterIcon={<SearchOutlined />}*/
+            />
+            <Table.Column
+              dataIndex="roles"
+              title="Roles"
+              defaultFilteredValue={getDefaultFilter(
+                'roles',
+                filters,
+                'contains',
+              )}
+              filterDropdown={(props) => (
+                <FilterDropdown
+                  {...props}
+                  clearFilters={() => {
+                    props.setSelectedKeys([]);
+                    props.confirm?.();
+                  }}
+                >
+                  <Select
+                    options={roleOptions}
+                    style={{ width: '150px' }}
+                    placeholder="Select Role"
+                    loading={rolesLoading}
+                  />
+                </FilterDropdown>
+              )}
+              render={(value) => {
+                return JSON.parse(value || '[]').map((role: string) => (
+                  <RoleStatusTag key={role} role={role} />
+                ));
+              }}
+            />
+            <Table.Column
+              dataIndex="isApiKey"
+              title="API Key"
+              defaultFilteredValue={getDefaultFilter('isApiKey', filters, 'eq')}
+              filterDropdown={(props) => (
+                <FilterDropdown
+                  {...props}
+                  mapValue={(selectedKeys) => {
+                    if (selectedKeys?.[0] === 'Yes') return true;
+                    if (selectedKeys?.[0] === 'No') return false;
+                    return selectedKeys;
+                  }}
+                  clearFilters={() => {
+                    props.setSelectedKeys([]);
+                    props.confirm?.();
+                  }}
+                >
+                  <Select
+                    style={{ width: '120px' }}
+                    placeholder="Select"
+                    allowClear
+                    options={[
+                      { label: 'Yes', value: 'Yes' },
+                      { label: 'No', value: 'No' },
+                    ]}
                   />
-                  <EditButton
-                    hideText
-                    size="small"
-                    style={{ backgroundColor: 'transparent' }}
-                    onClick={() =>
-                      setShowModal({ type: 'edit', id: record.id })
-                    }
+                </FilterDropdown>
+              )}
+              render={(value) => (
+                <Tag color={value ? 'blue' : 'default'}>
+                  {value ? 'Yes' : 'No'}
+                </Tag>
+              )}
+            />
+            <Table.Column
+              dataIndex="isActive"
+              title="Active"
+              defaultFilteredValue={getDefaultFilter('isActive', filters, 'eq')}
+              filterDropdown={(props) => (
+                <FilterDropdown
+                  {...props}
+                  mapValue={(selectedKeys) => {
+                    if (selectedKeys?.[0] === 'Active') return true;
+                    if (selectedKeys?.[0] === 'Inactive') return false;
+                    return selectedKeys;
+                  }}
+                  clearFilters={() => {
+                    props.setSelectedKeys([]);
+                    props.confirm?.();
+                  }}
+                >
+                  <Select
+                    style={{ width: '120px' }}
+                    placeholder="Select"
+                    allowClear
+                    options={[
+                      { label: 'Active', value: 'Active' },
+                      { label: 'Inactive', value: 'Inactive' },
+                    ]}
                   />
-                  <Tooltip title="Generate SQL">
-                    <Button
+                </FilterDropdown>
+              )}
+              render={(value) => (
+                <Tag color={value ? 'green' : 'red'}>
+                  {value ? 'Active' : 'Inactive'}
+                </Tag>
+              )}
+            />
+            <Table.Column
+              fixed="right"
+              title="Actions"
+              dataIndex="actions"
+              render={(_, record) => {
+                return (
+                  <Space>
+                    <ShowButton
+                      hideText
                       size="small"
-                      icon={<CodeOutlined />}
                       style={{ backgroundColor: 'transparent' }}
-                      onClick={() => handleShowSql(record)}
+                      onClick={() =>
+                        setShowModal({ type: 'show', id: record.id })
+                      }
                     />
-                  </Tooltip>
-                  <DeleteButton
-                    hideText
-                    size="small"
-                    recordItemId={record.id}
-                    style={{ backgroundColor: 'transparent' }}
-                  />
-                </Space>
-              );
-            }}
-          />
-        </Table>
+                    <EditButton
+                      hideText
+                      size="small"
+                      style={{ backgroundColor: 'transparent' }}
+                      onClick={() =>
+                        setShowModal({ type: 'edit', id: record.id })
+                      }
+                    />
+                    <Tooltip title="Generate SQL">
+                      <Button
+                        size="small"
+                        icon={<CodeOutlined />}
+                        style={{ backgroundColor: 'transparent' }}
+                        onClick={() => handleShowSql(record)}
+                      />
+                    </Tooltip>
+                    <DeleteButton
+                      hideText
+                      size="small"
+                      recordItemId={record.id}
+                      style={{ backgroundColor: 'transparent' }}
+                    />
+                  </Space>
+                );
+              }}
+            />
+          </Table>
+        </Card>
       </List>
 
       {/* Show Drawer */}