@dashadmin/dash-auto-admin 1.3.25 → 1.3.26

package/src/DashAutoList.tsx

@@ -0,0 +1,237 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import autoFiltersGenerator from './DashAutoFiltersGenerator';
+import {  useUnselectAll } from 'react-admin';
+import { PaginationProps } from 'react-admin/src';
+
+import { List } from 'react-admin';
+
+import IDashAutoAdminResourceConfig from './interfaces/IDashAutoAdminResourceConfig';
+import { FC, Fragment, JSX, useEffect, useState } from 'react';
+import ExtendedPagination from './mui/components/ExtendedPagination';
+
+import DashAutoListDefaultListActionsWrapper from './list/DashAutoListDefaultActionsWrapper';
+import DashAutoListDataGridWrapper from './list/DashAutoListDatagridWrapper';
+import DashAutoListActions from './list/DashAutoListActions';
+
+export interface IDashAutoList {
+	resourceConfig: IDashAutoAdminResourceConfig;
+	customToolbarElements?: (props: any) => JSX.Element;
+	beforeSubmit?: (data: any) => any;
+	onSubmit?: (data: any) => any;
+	onError?: (error: any) => any;
+	dataGridProps?: any;
+	children?: any;
+	Pagination?: FC<PaginationProps>;
+	locale?: string;
+	//stickyHeader?: boolean;
+}
+
+// Wrapper component for actions that will be rendered inside List context
+interface ListActionsComponentProps {
+	resourceConfig: IDashAutoAdminResourceConfig;
+	autoFilters: JSX.Element[];
+	listProps: any;
+	ListActionsWrapper: any;
+}
+
+const ListActionsComponent: FC<ListActionsComponentProps> = ({
+	resourceConfig,
+	autoFilters,
+	listProps,
+	ListActionsWrapper,
+}) => {
+	// DEBUG: Log actions rendering
+	console.log('🎬 DashAutoList DEBUG - Rendering actions (fieldProps standardized):', {
+		resourceModel: resourceConfig.model,
+		autoFiltersCount: autoFilters.length,
+		hasCustomToolbarElements: !!resourceConfig.customToolbarElements,
+		timestamp: new Date().toISOString()
+	});
+
+	return (
+		<ListActionsWrapper
+			autoFilters={autoFilters}
+			resourceConfig={resourceConfig}
+		>
+			<DashAutoListActions
+				filters={autoFilters}
+				resourceConfig={resourceConfig}
+				autoFilters={autoFilters}
+				listProps={listProps}
+			/>
+		</ListActionsWrapper>
+	);
+};
+
+const DashAutoList: React.FC<IDashAutoList> = ({
+	resourceConfig,
+	customToolbarElements,
+	beforeSubmit,
+	onSubmit,
+	onError,
+	Pagination,
+	children,
+	dataGridProps,
+	locale,
+	...listProps
+}) => {
+	const { exporter } = resourceConfig;
+
+	// DEBUG: Log the resource configuration
+	useEffect(() => {
+		console.log('📋 DashAutoList DEBUG - Component initialized (fieldProps standardized):', {
+			resourceModel: resourceConfig.model,
+			hasReferenceFilters: !!(resourceConfig.referenceFilters && resourceConfig.referenceFilters.length > 0),
+			referenceFiltersCount: resourceConfig.referenceFilters?.length || 0,
+			referenceFilters: resourceConfig.referenceFilters?.map(f => ({
+				id: f.id,
+				source: f.source,
+				label: f.label,
+				hasReferenceComponent: !!f.referenceComponent,
+				fieldProps: f.fieldProps, // Only fieldProps now
+			})) || [],
+			timestamp: new Date().toISOString()
+		});
+	}, [resourceConfig]);
+
+	if (customToolbarElements) {
+		resourceConfig.customToolbarElements = customToolbarElements;
+	}
+
+	// DEBUG: Log before generating filters
+	console.log('🔧 DashAutoList DEBUG - About to generate filters (fieldProps only):', {
+		resourceModel: resourceConfig.model,
+		referenceFilters: resourceConfig.referenceFilters,
+		timestamp: new Date().toISOString()
+	});
+
+	const autoFilters = autoFiltersGenerator(resourceConfig, locale);
+
+	// DEBUG: Log generated filters
+	console.log('✅ DashAutoList DEBUG - Filters generated (fieldProps standardized):', {
+		resourceModel: resourceConfig.model,
+		filtersCount: autoFilters.length,
+		filters: autoFilters.map((filter, idx) => ({
+			index: idx,
+			key: filter.key,
+			type: filter.type?.name || 'unknown',
+			props: filter.props,
+		})),
+		timestamp: new Date().toISOString()
+	});
+
+	const unselectAll = useUnselectAll(
+		resourceConfig.listProps?.storeKey || resourceConfig.model,
+	);
+
+	const _dataGridProps = { ...resourceConfig.dataGridProps, ...dataGridProps };
+
+	const [, setHandleLoading] = useState<boolean>(false);
+
+	useEffect(() => {
+		const handleGlobalLoader = (e: any) => {
+			if (resourceConfig.model === e.data.resource)
+				setHandleLoading(e.data.value);
+		};
+
+		window.addEventListener('dash-global-loader', handleGlobalLoader);
+		return () => {
+			window.removeEventListener('dash-global-loader', handleGlobalLoader);
+		};
+	}, [resourceConfig.model]);
+
+	const ListActionsWrapper = resourceConfig.listActionsWrapper || DashAutoListDefaultListActionsWrapper;
+
+	useEffect(() => {
+		if (resourceConfig.resetSelectedIdsOnLoad) {
+			unselectAll();
+		}
+	}, [resourceConfig.resetSelectedIdsOnLoad, unselectAll]);
+
+	// Check if we should show actions
+	const shouldShowActions = () => {
+		if (resourceConfig.toolbar === false) {
+			return false;
+		}
+		
+		// Check if there are any actual toolbar items
+		const hasToolbarItems = 
+			(autoFilters && autoFilters.length > 0) ||
+			resourceConfig.create ||
+			resourceConfig.exporter ||
+			resourceConfig.customToolbarElements;
+			
+		return hasToolbarItems;
+	};
+
+	// Create actions element - this will be rendered inside List context
+	const actionsElement = shouldShowActions() ? (
+		<ListActionsComponent
+			resourceConfig={resourceConfig}
+			autoFilters={autoFilters}
+			listProps={listProps}
+			ListActionsWrapper={ListActionsWrapper}
+		/>
+	) : null;
+
+	const finalListProps = {
+		/* default storeKey */
+		sort: { field: 'id', order: 'ASC' as const },
+		storeKey: resourceConfig?.model,
+		// Explicitly set resource to ensure List component works correctly
+		resource: resourceConfig?.model,
+
+		...listProps,
+		...(resourceConfig.listProps || {}),
+		
+		// Set actions to the element (will be rendered inside List context)
+		actions: actionsElement,
+		
+		pagination: Pagination ? <Pagination {...resourceConfig.paginationProps} /> : <ExtendedPagination {...resourceConfig.paginationProps} />,
+		...(exporter && { exporter: exporter }),
+		...(resourceConfig.bulkActionButtons && { bulkActionButtons: resourceConfig.bulkActionButtons }),
+	};
+
+	// DEBUG: Log final list props
+	console.log('🚀 DashAutoList DEBUG - Final list props (fieldProps standardized):', {
+		resourceModel: resourceConfig.model,
+		finalListProps: {
+			...finalListProps,
+			actions: actionsElement ? 'rendered' : 'null',
+		},
+		timestamp: new Date().toISOString()
+	});
+
+    const ContextComponent = resourceConfig.contextComponent ? resourceConfig.contextComponent:  ({children}) => {
+        return children;
+    };
+  
+
+	if (!finalListProps) return <></>;
+	
+	return resourceConfig.listComponent ? (
+		resourceConfig.listComponent(resourceConfig, onSubmit, onError)
+	) : (
+		<List 
+        component="div"
+        {...finalListProps} 
+        >
+               <ContextComponent mode={"list"} resourceConfig={resourceConfig}>
+			{resourceConfig.dataGridComponent ? (
+				<resourceConfig.dataGridComponent
+					resourceConfig={resourceConfig}
+					dataGridProps={_dataGridProps}
+				/>
+			) : (
+				<DashAutoListDataGridWrapper
+					resourceConfig={resourceConfig}
+					dataGridProps={_dataGridProps}
+					locale={locale}
+				/>
+			)}
+            </ContextComponent>
+		</List>
+	);
+};
+
+export default DashAutoList;

package/src/DashAutoPostFilterForm.tsx

@@ -0,0 +1,35 @@
+import { useForm, FormProvider } from 'react-hook-form';
+import { ListContext } from 'react-admin';
+import { useContext } from 'react';
+
+// Safe hook that doesn't throw when context is missing
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const useSafeListContext = (): any => {
+	const context = useContext(ListContext);
+	return context ?? null;
+};
+
+const DashAutoPostFilterForm = (filters: any) => {
+	const listContext = useSafeListContext();
+	const filterValues = listContext?.filterValues ?? {};
+	const displayedFilters = listContext?.displayedFilters ?? [];
+	const setFilters = listContext?.setFilters;
+
+	const form = useForm({
+		defaultValues: filterValues,
+	});
+
+	const onSubmit = (values) => {
+		if (Object.keys(values).length > 0 && setFilters) {
+			setFilters(values, displayedFilters);
+		}
+	};
+
+	return (
+		<FormProvider {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)}>{filters}</form>
+		</FormProvider>
+	);
+};
+
+export default DashAutoPostFilterForm;

package/src/DashAutoReferenceTab.tsx

@@ -0,0 +1,9 @@
+import { AutoReferenceTab as MuiAutoReferenceTab } from './mui/AutoReferenceTab';
+import { IDashAutoAdminReference } from './interfaces/IDashAutoAdminReference';
+
+export const DashAutoReferenceTab = (reference: IDashAutoAdminReference) => {
+	const _AutoReferenceTab = MuiAutoReferenceTab;
+	return _AutoReferenceTab(reference);
+};
+
+export default DashAutoReferenceTab;

package/src/DashAutoResource.tsx

@@ -0,0 +1,85 @@
+import { Resource } from 'react-admin';
+
+import AutoCreate from './DashAutoCreate';
+import AutoEdit from './DashAutoEdit';
+import AutoShow from './DashAutoShow';
+import IRecord from './interfaces/IRecord';
+import DashAutoList from './DashAutoList';
+
+import IDashAutoAdminResourceConfig from './interfaces/IDashAutoAdminResourceConfig';
+import React from 'react';
+import isFC from './utils/isFC';
+
+export interface IAutoResource {
+	//model: string
+	//label: string
+	//schema: IDashAutoAdminAttribute[]
+	resourceConfig: IDashAutoAdminResourceConfig;
+	//references?: IDashAutoAdminReference[]
+	//exporter?: any;
+	//referenceFilters?: IReferenceFilter[]
+	show?: boolean | React.FC;
+	list?: boolean | React.FC;
+	edit?: boolean | React.FC;
+	create?: boolean | React.FC;
+	//icon?: any | JSX.Element | React.ReactNode
+	//group?: string
+	//search?: boolean
+	//beforeSubmit?: (values: any) => any
+}
+
+const DashAutoResource = ({
+	resourceConfig,
+	show,
+	list,
+	edit,
+	create,
+}: IAutoResource) => {
+	const props: any = {};
+
+	if (typeof list !== 'boolean' && isFC(list)) {
+		const CustomList: React.FC<IRecord> = list;
+		props.list = () => <CustomList resourceConfig={resourceConfig} />;
+	} else if (list !== false) {
+		props.list = () => <DashAutoList resourceConfig={resourceConfig} />;
+	}
+
+	if (!resourceConfig.drawer) {
+		if (typeof show !== 'boolean' && isFC(show)) {
+			const CustomShow: React.FC<IRecord> = show;
+			props.show = () => <CustomShow resourceConfig={resourceConfig} />;
+		} else if (show !== false) {
+			props.show = () => <AutoShow resourceConfig={resourceConfig} />;
+		}
+
+		if (typeof edit !== 'boolean' && isFC(edit)) {
+			const CustomEdit: React.FC<IRecord> = edit;
+			props.edit = () => <CustomEdit resourceConfig={resourceConfig} />;
+		} else if (edit !== false) {
+			props.edit = () => <AutoEdit resourceConfig={resourceConfig} />;
+		}
+
+		if (typeof create !== 'boolean' && isFC(create)) {
+			const CustomCreate: React.FC<IRecord> = create;
+			//props.list = () => <Create />
+			props.create = () => <CustomCreate resourceConfig={resourceConfig} />;
+		} else if (create !== false) {
+			props.create = () => <AutoCreate resourceConfig={resourceConfig} />;
+		}
+	}
+
+	return (
+		<Resource
+			options={{
+				label: resourceConfig.label,
+				...(resourceConfig.group && { group: resourceConfig.group }),
+			}}
+			name={resourceConfig.model}
+			{...props}
+			icon={resourceConfig.icon}
+			group={resourceConfig.group}
+		/>
+	);
+};
+
+export default DashAutoResource;

package/src/DashAutoResourceLayout.tsx

@@ -0,0 +1,50 @@
+import React, { PropsWithChildren, memo } from 'react';
+import IDashAutoAdminResourceConfig from './interfaces/IDashAutoAdminResourceConfig';
+
+/**
+ * Defines the interface for the default resource layout component in the Dash Auto Admin application.
+ * 
+ * This interface extends the `PropsWithChildren` type, which means the component can accept child elements.
+ * 
+ * The interface defines two properties:
+ * 
+ * 1. `resourceConfig`: An object of type `IDashAutoAdminResourceConfig` that contains the configuration for the current resource.
+ * 2. `ResourceMenu`: A React functional component that renders the side navigation menu for the resource.
+ */
+export interface IDashDefaultResourceLayout extends PropsWithChildren {
+	/** React Auto Admin Resource Config */
+	resourceConfig: IDashAutoAdminResourceConfig;
+	ResourceMenu: React.FC<PropsWithChildren<{ resourceConfig: IDashAutoAdminResourceConfig }>>,
+}
+
+/**
+ * Renders the default resource layout for the Dash Auto Admin application. To serve as an example, this will not fit for all client UI needs.
+ * 
+ * The resource layout provides a side navigation around the main content, which can include views such as 'show', 'edit', 'list', and 'view'.
+ * 
+ * @param props - The component props, including the resource configuration and the ResourceMenu component.
+ * @param props.resourceConfig - The configuration for the current resource.
+ * @param props.ResourceMenu - A React component that renders the side navigation menu.
+ * @param props.children - The main content to be displayed, such as the 'show', 'edit', 'list', or 'view' components.
+ * @returns The rendered resource layout.
+ */
+const DashDefaultResourceLayout: React.FC<IDashDefaultResourceLayout> = (props) => {
+	const { resourceConfig, ResourceMenu, children } = props;
+
+	return (
+		<div className='dash-app-module'>
+			<div className='dash-module-horizontal-box' style={{ maxWidth: '100%' }}>
+				<ResourceMenu resourceConfig={resourceConfig} />
+				<div className='dash-module-box-content'>{children}</div>
+			</div>
+		</div>
+	);
+};
+
+
+export default memo(
+	DashDefaultResourceLayout,
+	(props, nextProps) =>
+		props === nextProps,
+);
+

package/src/DashAutoShow.tsx

@@ -0,0 +1,200 @@
+import { DashAutoReferenceTab, DashAutoTabs } from '.';
+import AutoTitle from './common/DashAutoTitle';
+import IAutoShow from './interfaces/IDashAutoShow';
+import AutoLayout from './DashAutoLayout';
+import AutoGroup from './DashAutoGroup';
+
+import { TopToolbar, Show } from 'react-admin';
+//import { ShowBase } from 'react-admin';
+import {
+	ToolbarCreateButton,
+	ToolbarDeleteButton,
+	ToolbarEditButton,
+	ToolbarExportButton,
+	ToolbarListButton,
+} from './toolbar/buttons/ToolbarButtons';
+import { ReactNode, useMemo } from 'react';
+import React from 'react';
+
+const DashAutoShow: React.FC<IAutoShow> = ({
+	resourceConfig,
+	id,
+	isDrawer = false,
+	locale,
+	...props
+}) => {
+
+	// 🔧 Add contextComponent support for view/show mode (matching DashAutoTabbedForm pattern)
+	const ContextComponent = useMemo(() => {
+		return resourceConfig.contextComponent || (({children}: {children: ReactNode}) => <>{children}</>);
+	}, [resourceConfig.contextComponent]);
+
+	const topToolbarActions = () => {
+		
+		const componentsList = (): any[] => {
+			const result: ReactNode[] = [];
+			if (!isDrawer) {
+				result.push(<ToolbarListButton resourceConfig={resourceConfig} />);
+				result.push(<ToolbarEditButton resourceConfig={resourceConfig} />);
+				result.push(<ToolbarCreateButton resourceConfig={resourceConfig} />);
+				result.push(<ToolbarDeleteButton resourceConfig={resourceConfig} />);
+				result.push(<ToolbarExportButton resourceConfig={resourceConfig} />);
+			}
+			return result;
+		};
+
+		const components = componentsList();
+
+		return components;
+	};
+
+	const topToolbarActionsArray = topToolbarActions();
+
+	if (
+		resourceConfig.showComponent &&
+		typeof resourceConfig.showComponent === 'function'
+	) {
+		return (
+			<Show
+             component="div"
+				{...(id && { id })}
+				title={<AutoTitle resourceConfig={resourceConfig} />}
+				{...props}
+				{...topToolbarActionsArray.length && {
+					actions: (
+						<TopToolbar sx={{ mb: 2 }}>
+							{topToolbarActionsArray.map((component, idx) => {
+								return React.cloneElement(component, { key: idx });
+							},
+							)}
+						</TopToolbar>
+					),
+				}}
+			>
+				<ContextComponent mode="view" resourceConfig={resourceConfig}>
+					{resourceConfig.showComponent(resourceConfig)}
+					{resourceConfig.references &&
+						resourceConfig.references.map((reference) =>
+							DashAutoReferenceTab(reference),
+						)}
+				</ContextComponent>
+			</Show>
+		);
+	}
+
+	if (resourceConfig.formGroupMode === 'tabs') {
+		return (
+			<Show
+            component="div"
+				{...(id && { id })}
+				title={<AutoTitle resourceConfig={resourceConfig} />}
+				{...props}
+				{...topToolbarActionsArray.length && {
+					actions: (
+						<TopToolbar sx={{ mb: 2 }}>
+							{topToolbarActionsArray.map((component, idx) => {
+								return React.cloneElement(component, { key: idx });
+							},
+							)}
+						</TopToolbar>
+					),
+				}}
+			>
+				<ContextComponent mode="view" resourceConfig={resourceConfig}>
+					{DashAutoTabs(resourceConfig, { mode: 'view', locale })}
+					{resourceConfig.references &&
+						resourceConfig.references.map((reference) =>
+							DashAutoReferenceTab(reference),
+						)}
+				</ContextComponent>
+			</Show>
+		);
+	}
+
+	if (resourceConfig.formGroupMode === 'groups') {
+		return (
+			<Show
+             component="div"
+				{...(id && { id })}
+				title={<AutoTitle resourceConfig={resourceConfig} />}
+				{...props}
+				{...topToolbarActionsArray.length && {
+					actions: (
+						<TopToolbar sx={{ mb: 2 }}>
+							{topToolbarActionsArray.map((component, idx) => {
+								return React.cloneElement(component, { key: idx });
+							},
+							)}
+						</TopToolbar>
+					),
+				}}
+			>
+				<ContextComponent mode="view" resourceConfig={resourceConfig}>
+					{AutoGroup(resourceConfig, { mode: 'view', locale })}
+					{resourceConfig.references &&
+						resourceConfig.references.map((reference) =>
+							DashAutoReferenceTab(reference),
+						)}
+				</ContextComponent>
+			</Show>
+		);
+	}
+
+	if (resourceConfig.formGroupMode === 'layout') {
+		return (
+			<Show
+             component="div"
+				{...(id && { id })}
+				title={<AutoTitle resourceConfig={resourceConfig} />}
+				{...props}
+				{...topToolbarActionsArray.length && {
+					actions: (
+						<TopToolbar sx={{ mb: 2 }}>
+							{topToolbarActionsArray.map((component, idx) => {
+								return React.cloneElement(component, { key: idx });
+							},
+							)}
+						</TopToolbar>
+					),
+				}}
+			>
+				<ContextComponent mode="view" resourceConfig={resourceConfig}>
+					{AutoLayout(resourceConfig, { mode: 'view', locale })}
+					{resourceConfig.references &&
+						resourceConfig.references.map((reference) =>
+							DashAutoReferenceTab(reference),
+						)}
+				</ContextComponent>
+			</Show>
+		);
+	}
+
+	return (
+		<Show
+         component="div"
+			{...(id && { id })}
+			title={<AutoTitle resourceConfig={resourceConfig} />}
+			{...props}
+			{...topToolbarActionsArray.length && {
+				actions: (
+					<TopToolbar sx={{ mb: 2 }}>
+						{topToolbarActionsArray.map((component, idx) => {
+							return React.cloneElement(component, { key: idx });
+						},
+						)}
+					</TopToolbar>
+				),
+			}}
+		>
+			<ContextComponent mode="view" resourceConfig={resourceConfig}>
+				{DashAutoTabs(resourceConfig, { mode: 'view', locale })}
+				{resourceConfig.references &&
+					resourceConfig.references.map((reference) =>
+						DashAutoReferenceTab(reference),
+					)}
+			</ContextComponent>
+		</Show>
+	);
+};
+
+export default DashAutoShow;