@gadmin2n/schematics 0.0.69 → 0.0.71

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

@@ -0,0 +1,226 @@
+import {
+  FieldDataType,
+  I18N_T,
+  ModelsFieldsTypeMap,
+  ModelType,
+  convertPrismaDecimal,
+} from '@gadmin2n/react-common';
+import {
+  TagField,
+  MarkdownField,
+  TextField,
+  ImageField,
+  FileField,
+  DateField,
+  UrlField,
+  EmailField,
+  BooleanField,
+  NumberField,
+  ShowButton,
+} from '@refinedev/antd';
+import { CheckCircleTwoTone, CloseCircleTwoTone } from '@ant-design/icons';
+import { Space, Typography } from 'antd';
+import React from 'react';
+import { agentAttrs } from '../components/agentPanel/agentAttributes';
+
+const { Text } = Typography;
+
+export function getShowField(
+  field: FieldDataType,
+  resourceName: string,
+  record: any,
+  t: I18N_T,
+  model: ModelType,
+  modelsMap: ModelsFieldsTypeMap,
+) {
+  const { type: fieldType, args } = field.uiType.formItem;
+  const fieldName = field.name;
+  let value = (record as any)?.[fieldName];
+  if (fieldName.includes('.')) {
+    const attrs = fieldName.split('.');
+    value = (record as any)?.[attrs[0]]?.[attrs[1]];
+  }
+  let element = <Text>{value}</Text>;
+  if (field.render) {
+    element = field.render(value);
+  } else if (
+    !fieldName.includes('.') &&
+    field.kind === 'object' &&
+    !field.isList &&
+    value !== undefined &&
+    value !== null
+  ) {
+    const nameKey = modelsMap[model[fieldName].type]?.meta?.nameKeys?.[0];
+    element = (
+      <ShowButton
+        icon={false}
+        type="link"
+        size="small"
+        resource={model[fieldName]?.type?.toLowerCase()}
+        recordItemId={value?.id}
+      >
+        {(record as any)?.[fieldName]?.[nameKey]}
+      </ShowButton>
+    );
+  } else if (fieldType === 'Markdown') {
+    element = <MarkdownField value={value} />;
+  } else if (fieldType === 'Text') {
+    element = (
+      <>
+        {(value || '').split('\n').map((row: string) => (
+          <TextField style={{ display: 'block' }} value={row} />
+        ))}
+      </>
+    );
+  } else if (fieldType === 'Image') {
+    element = (
+      <Space wrap>
+        {JSON.parse(value || '[]')?.map?.((img: any) => (
+          <ImageField
+            key={img?.response?.name}
+            value={img?.thumbUrl}
+            title={img?.name}
+            width={200}
+          />
+        ))}
+      </Space>
+    );
+  } else if (fieldType === 'File') {
+    element = (
+      <Space wrap>
+        {JSON.parse(value || '[]')?.map?.((file: any) => (
+          <FileField
+            key={file?.response?.name}
+            src={file?.thumbUrl}
+            title={file?.name}
+          />
+        ))}
+      </Space>
+    );
+  } else if (fieldType === 'Select') {
+    if (args.mode === 'multiple') {
+      element = (
+        <Space>
+          {JSON.parse(value || '[]')?.map?.((v: string) => (
+            <TagField
+              value={t(
+                `resources.${resourceName}.enums.${fieldName}.${v}`,
+                String(v),
+              )}
+            />
+          ))}
+        </Space>
+      );
+    } else {
+      element = (
+        <TagField
+          value={t(
+            `resources.${resourceName}.enums.${fieldName}.${value}`,
+            String(value),
+          )}
+        />
+      );
+    }
+  } else if (fieldType === 'Radio' || field.kind === 'enum') {
+    element = (
+      <TagField
+        value={t(
+          `resources.${resourceName}.enums.${fieldName}.${value}`,
+          String(value),
+        )}
+      />
+    );
+  } else if (fieldType === 'CheckBox') {
+    element = (
+      <Space>
+        {JSON.parse(value || '[]')?.map?.((v: string) => (
+          <TagField
+            value={t(
+              `resources.${resourceName}.enums.${fieldName}.${v}`,
+              String(v),
+            )}
+          />
+        ))}
+      </Space>
+    );
+  } else if (fieldType === 'DateTime') {
+    element = <DateField value={value} format="YYYY-MM-DD HH:mm:ss" />;
+  } else if (fieldType === 'Url') {
+    element = <UrlField value={value} />;
+  } else if (fieldType === 'Email') {
+    element = <EmailField value={value} />;
+  } else if (fieldType === 'Boolean') {
+    element = (
+      <BooleanField
+        value={value}
+        trueIcon={<CheckCircleTwoTone twoToneColor="#52c41a" />}
+        falseIcon={<CloseCircleTwoTone twoToneColor="red" />}
+      />
+    );
+  } else if (['Int', 'BigInt', 'Float', 'Decimal'].includes(fieldType)) {
+    const displayValue = convertPrismaDecimal(value);
+    if (
+      displayValue !== undefined &&
+      displayValue !== null &&
+      !isNaN(Number(displayValue))
+    ) {
+      element = <NumberField value={displayValue ?? ''} />;
+    }
+  }
+  return (
+    <div
+      key={fieldName}
+      style={{
+        display: 'flex',
+        borderBottom: '1px solid #f0f0f0',
+        minHeight: 48,
+      }}
+      {...agentAttrs({
+        type: 'show-field',
+        field: fieldName,
+        resource: resourceName,
+        meta: { fieldType },
+      })}
+    >
+      <div
+        style={{
+          width: 180,
+          minWidth: 180,
+          padding: '10px 16px',
+          background: '#fafafa',
+          borderRight: '1px solid #f0f0f0',
+          fontWeight: 500,
+          fontSize: 13,
+          color: '#595959',
+          display: 'flex',
+          alignItems: 'center',
+          flexShrink: 0,
+        }}
+      >
+        {t(
+          `resources.${resourceName}.fields.${fieldName}`,
+          fieldName.startsWith('_count.')
+            ? 'Count ' +
+                t(
+                  `resources.${model[fieldName.split('.')[1]]?.type?.toLowerCase() || ''}.name`,
+                  fieldName,
+                )
+            : fieldName,
+        )}
+      </div>
+      <div
+        style={{
+          flex: 1,
+          padding: '10px 16px',
+          fontSize: 13,
+          color: '#1a1a1a',
+          display: 'flex',
+          alignItems: 'center',
+          wordBreak: 'break-word',
+        }}
+      >
+        {element}
+      </div>
+    </div>
+  );
+}

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/helpers/utils.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const renderLongColumnValue = (value: string) => {
+  return (
+    <div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+      {value}
+    </div>
+  );
+};

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/hooks/index.ts

@@ -0,0 +1,7 @@
+export * from './types';
+export * from './useRowSelection';
+export * from './useBatchUpdate';
+export * from './useBatchDelete';
+export * from './useBatchOperations';
+export * from './useBatchOperationsCore';
+export * from './useListPageState';

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/hooks/types.ts

@@ -0,0 +1,138 @@
+import {
+  FieldDataType,
+  ModelsFieldsTypeMap,
+  ModelType,
+} from '@gadmin2n/react-common';
+import { CrudFilters, CrudSorting } from '@refinedev/core';
+import { FormProps, SelectProps, TableProps } from 'antd';
+import { DefaultOptionType } from 'antd/es/select';
+
+export interface ListPageConfig {
+  resourceName: string;
+  model: ModelType;
+  tableConfig: {
+    fields: string[];
+    toolbar: {
+      searchBar: {
+        fields: string[];
+        placeholder?: string;
+        containsFields?: string[];
+      };
+    };
+    header: {
+      filter: string[];
+      sorter: string[];
+    };
+    rowSelection: {
+      actions: RowAction[];
+    };
+    rowActions: {
+      actions: RowAction[];
+    };
+  };
+  prismaSelect?: any;
+  modelsMap: ModelsFieldsTypeMap;
+  modelsEnum: Record<string, Record<string, string>>;
+}
+
+export interface RowAction {
+  action:
+    | 'CHANGE_STATUS'
+    | 'DELETE'
+    | 'EXPORT'
+    | 'CUSTOM'
+    | 'INSERT'
+    | 'JUMP'
+    | 'EDIT'
+    | 'DETAIL';
+  desc: string;
+  values?: Record<string, any>;
+  when?: Record<string, any> | '*' | ((record: any) => boolean);
+  fields?: string[];
+}
+
+export interface BatchOperationsConfig {
+  resourceName: string;
+  apiUrl: string;
+  requestHeaders?: () => Record<string, string>;
+  onSuccess?: () => void;
+}
+
+export interface BatchOperationsResult {
+  selectedRowKeys: React.Key[];
+  setSelectedRowKeys: React.Dispatch<React.SetStateAction<React.Key[]>>;
+  rowSelection: {
+    selectedRowKeys: React.Key[];
+    onChange: (keys: React.Key[]) => void;
+  };
+  hasSelected: boolean;
+  updateSelectedItems: (values: any) => Promise<void>;
+  deleteSelectedItems: () => Promise<void>;
+  updateManyIsLoading: boolean;
+  deleteManyIsLoading: boolean;
+}
+
+export interface SearchFormConfig {
+  searchFields: string[];
+  dateRangeFields?: string[];
+  model: ModelType;
+  tableConfig: ListPageConfig['tableConfig'];
+}
+
+export interface ListPageContextValue {
+  resourceName: string;
+  t: (key: string, defaultValue?: string) => string;
+  model: ModelType;
+  modelsMap: ModelsFieldsTypeMap;
+  modelsEnum: Record<string, Record<string, string>>;
+  tableConfig: ListPageConfig['tableConfig'];
+  apiUrl: string;
+  relationSelectProps: Record<
+    string,
+    SelectProps<{ value: string; label: string }, DefaultOptionType>
+  >;
+}
+
+export interface UseListPageStateResult {
+  // Table related
+  tableProps: TableProps<any>;
+  columns: FieldDataType[];
+  model: ModelType;
+  sorter: CrudSorting | undefined;
+  filters: CrudFilters | undefined;
+
+  // Search related
+  searchFormProps: FormProps;
+
+  // Selection related
+  selectedRowKeys: React.Key[];
+  setSelectedRowKeys: React.Dispatch<React.SetStateAction<React.Key[]>>;
+  rowSelection: {
+    selectedRowKeys: React.Key[];
+    onChange: (keys: React.Key[]) => void;
+  };
+  hasSelected: boolean;
+
+  // Batch operations
+  updateSelectedItems: (values: any) => Promise<void>;
+  deleteSelectedItems: () => Promise<void>;
+  updateManyIsLoading: boolean;
+  deleteManyIsLoading: boolean;
+
+  // Export/Import
+  triggerExportAll: () => void;
+  triggerExportSelected: () => void;
+  exportLoading: boolean;
+  exportSelectedLoading: boolean;
+  importProps: any;
+
+  // Row operations
+  updateRowData: (id: number, values: any) => void;
+  isUpdateRowLoading: boolean;
+
+  // Context
+  context: ListPageContextValue;
+
+  // Refetch
+  refetch: () => void;
+}

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/hooks/useBatchDelete.ts

@@ -0,0 +1,191 @@
+import { useState, useCallback } from 'react';
+import { useDelete } from '@refinedev/core';
+import { notification } from 'antd';
+
+export interface BatchDeleteResult {
+  successIds: React.Key[];
+  failedIds: React.Key[];
+  successCount: number;
+  failedCount: number;
+}
+
+export interface UseBatchDeleteConfig {
+  resourceName: string;
+  /** Called after all deletes complete (regardless of success/failure) */
+  onComplete?: (result: BatchDeleteResult) => void;
+  /** Called only when at least one delete succeeds */
+  onSuccess?: (result: BatchDeleteResult) => void;
+  /** Called only when at least one delete fails */
+  onError?: (result: BatchDeleteResult) => void;
+  /** i18n translation function */
+  t?: (key: string, defaultValue?: string) => string;
+  /** Whether to show notification (default: true) */
+  showNotification?: boolean;
+  /** Custom notification handler - if provided, replaces default notification */
+  customNotification?: (result: BatchDeleteResult) => void;
+  /** Custom delete function - if provided, replaces default refine useDelete */
+  customDeleteFn?: (id: number) => Promise<void>;
+  /** Confirmation handler - return true to proceed, false to cancel */
+  confirmDelete?: (selectedKeys: React.Key[]) => Promise<boolean>;
+}
+
+export interface UseBatchDeleteResult {
+  /** Delete selected items and return failed IDs */
+  deleteSelectedItems: (selectedKeys: React.Key[]) => Promise<React.Key[]>;
+  /** Delete a single item */
+  deleteOne: (id: number) => Promise<void>;
+  /** Loading state */
+  deleteManyIsLoading: boolean;
+}
+
+/**
+ * Hook for batch deleting selected items
+ *
+ * @example
+ * // Basic usage
+ * const { deleteSelectedItems, deleteManyIsLoading } = useBatchDelete({
+ *   resourceName: 'audit',
+ * });
+ *
+ * @example
+ * // With custom confirmation
+ * const { deleteSelectedItems } = useBatchDelete({
+ *   resourceName: 'audit',
+ *   confirmDelete: async (keys) => {
+ *     return await myConfirmDialog(`Delete ${keys.length} items?`);
+ *   },
+ * });
+ *
+ * @example
+ * // With custom notification
+ * const { deleteSelectedItems } = useBatchDelete({
+ *   resourceName: 'audit',
+ *   showNotification: false,
+ *   onComplete: (result) => {
+ *     toast.info(`Deleted ${result.successCount} items`);
+ *   },
+ * });
+ */
+export function useBatchDelete({
+  resourceName,
+  onComplete,
+  onSuccess,
+  onError,
+  t = (key, defaultValue) => defaultValue || key,
+  showNotification = true,
+  customNotification,
+  customDeleteFn,
+  confirmDelete,
+}: UseBatchDeleteConfig): UseBatchDeleteResult {
+  const [deleteManyIsLoading, setDeleteManyIsLoading] = useState(false);
+  const { mutate: refineDeleteOne } = useDelete();
+
+  const deleteOne = useCallback(
+    (id: number): Promise<void> => {
+      if (customDeleteFn) {
+        return customDeleteFn(id);
+      }
+
+      return new Promise((resolve, reject) =>
+        refineDeleteOne(
+          {
+            resource: resourceName,
+            id,
+            successNotification: false,
+            errorNotification: false,
+          },
+          {
+            onError: (error) => {
+              console.error('deleteOne error:', error);
+              reject(error);
+            },
+            onSuccess: () => {
+              resolve();
+            },
+          },
+        ),
+      );
+    },
+    [refineDeleteOne, resourceName, customDeleteFn],
+  );
+
+  const deleteSelectedItems = useCallback(
+    async (selectedKeys: React.Key[]): Promise<React.Key[]> => {
+      // Confirmation check
+      if (confirmDelete) {
+        const confirmed = await confirmDelete(selectedKeys);
+        if (!confirmed) {
+          return selectedKeys; // Return all keys as "not deleted"
+        }
+      }
+
+      setDeleteManyIsLoading(true);
+
+      const successIds: React.Key[] = [];
+      const failedIds: React.Key[] = [];
+
+      for (const id of selectedKeys) {
+        try {
+          await deleteOne(Number(id));
+          successIds.push(id);
+        } catch {
+          failedIds.push(id);
+        }
+      }
+
+      setDeleteManyIsLoading(false);
+
+      const result: BatchDeleteResult = {
+        successIds,
+        failedIds,
+        successCount: successIds.length,
+        failedCount: failedIds.length,
+      };
+
+      // Callbacks
+      onComplete?.(result);
+      if (result.successCount > 0) {
+        onSuccess?.(result);
+      }
+      if (result.failedCount > 0) {
+        onError?.(result);
+      }
+
+      // Notification
+      if (customNotification) {
+        customNotification(result);
+      } else if (showNotification) {
+        const message = t(
+          'batch.deleteResult',
+          `Delete success: ${result.successCount}, failed: ${result.failedCount}`,
+        );
+
+        if (result.failedCount === selectedKeys.length) {
+          notification.error({ message });
+        } else if (result.failedCount > 0) {
+          notification.warning({ message });
+        } else {
+          notification.success({ message });
+        }
+      }
+
+      return failedIds;
+    },
+    [
+      deleteOne,
+      onComplete,
+      onSuccess,
+      onError,
+      t,
+      showNotification,
+      customNotification,
+      confirmDelete,
+    ],
+  );
+
+  return {
+    deleteSelectedItems,
+    deleteOne,
+    deleteManyIsLoading,
+  };
+}