@dashadmin/dash-admin 1.3.24 → 1.3.26

package/src/templates/ResourceTemplateList.tsx

@@ -0,0 +1,340 @@
+/* eslint-disable no-mixed-spaces-and-tabs */
+import { useNotify, useTranslate } from 'react-admin';
+import { useRedirect } from 'react-admin';
+import { useRefresh } from 'react-admin';
+import { FC, useCallback, useMemo } from 'react';
+import {
+	DashAutoList,
+	DashAutoDrawer,
+} from 'dash-auto-admin';
+import { useDialog } from 'dash-dialog';
+import React from 'react';
+import ResourceLayout from '../layout/ResoureLayout';
+import { IResourceTemplate } from './ResourceTemplate';
+import { parseAxiosError } from '../helpers/parseAxiosError';
+import { useDashResource } from '../contexts/DashResourceContext';
+
+// Memoized DashAutoDrawer wrapper
+const MemoizedDashAutoDrawer = React.memo(({
+	drawerProps
+}: {
+	drawerProps: any;
+}) => (
+	<DashAutoDrawer {...drawerProps} />
+), (prevProps, nextProps) => {
+	return JSON.stringify(prevProps.drawerProps) === JSON.stringify(nextProps.drawerProps);
+});
+
+const ResourceTemplateListComponent: FC<IResourceTemplate> = (props) => {
+	//const { resourceConfig } = useDashResource();
+      const {resourceConfig, locale} = props;
+	const notify = useNotify();
+	const translate = useTranslate();
+	const redirect = useRedirect();
+	const dialog = useDialog();
+	const refresh = useRefresh();
+
+	// Memoize these boolean values to prevent unnecessary re-renders
+	const showNotifyAfterSubmit = useMemo(() => 
+		resourceConfig?.showNotifyAfterSubmit !== false, 
+		[resourceConfig?.showNotifyAfterSubmit]
+	);
+	
+	const showDialogAfterSubmit = useMemo(() => 
+		resourceConfig?.showDialogAfterSubmit !== false, 
+		[resourceConfig?.showDialogAfterSubmit]
+	);
+
+	// Memoize the onSubmit function with proper dependencies
+	const onSubmit = useCallback((data: any) => {
+		const translatedLabel = translate(resourceConfig.label, { _: resourceConfig.label });
+
+		if (showNotifyAfterSubmit) {
+			notify('dash.resource.updated', { type: 'success' });
+		}
+
+		if (showDialogAfterSubmit) {
+			dialog({
+				variant: 'info',
+				title: translate('dash.resource.updated'),
+				content: translate('dash.resource.updated_message', { label: translatedLabel }),
+				onConfirm: () => {
+					//resourceConfig.refreshAfter && refresh();
+					switch (resourceConfig.redirectAfterUpdate) {
+						case false:
+							return;
+						case 'view':
+							redirect('/' + resourceConfig.model + '/' + data.id + '/show');
+							break;
+						case 'edit':
+							redirect('/' + resourceConfig.model + '/' + data.id);
+							break;
+						case 'list':
+						default:
+							redirect('/' + resourceConfig.model);
+							break;
+					}
+				},
+				onClose: () => {},
+			});
+		}
+
+		if (!showDialogAfterSubmit && resourceConfig.redirectAfterUpdate) {
+			switch (resourceConfig?.redirectAfterUpdate) {
+				case 'view':
+					redirect('/' + resourceConfig.model + '/' + data.id + '/show');
+					break;
+				case 'edit':
+					redirect('/' + resourceConfig.model + '/' + data.id);
+					break;
+				case 'list':
+				default:
+					redirect('/' + resourceConfig.model);
+					break;
+			}
+		}
+
+		if (resourceConfig?.refreshAfter !== false) {
+			refresh();
+		}
+	}, [
+		showNotifyAfterSubmit,
+		showDialogAfterSubmit,
+		notify,
+		dialog,
+		redirect,
+		refresh,
+		resourceConfig.label,
+		resourceConfig.model,
+		resourceConfig.redirectAfterUpdate,
+		resourceConfig.refreshAfter,
+		translate
+	]);
+	
+	// Memoize the onError function with proper dependencies
+	const onError = useCallback((_error: any) => {
+		if (resourceConfig.onError) {
+			resourceConfig.onError('list', _error);
+			return;
+		} 
+
+		dialog({
+			variant: 'danger',
+			title: `${resourceConfig.label} Error`,
+			content: `${parseAxiosError(_error)}`,
+			onConfirm: () => {},
+			onClose: () => {},
+		});
+	}, [
+		resourceConfig.onError,
+		resourceConfig.label,
+		dialog
+	]);
+
+	// Memoize the drawer props to prevent unnecessary re-renders
+	const drawerProps = useMemo(() => ({
+		onSubmit,
+		onError,
+		resourceConfig,
+		...(resourceConfig.drawerProps && {
+			...resourceConfig.drawerProps,
+		}),
+	}), [onSubmit, onError, resourceConfig]);
+
+	// Memoize the pagination props
+	const paginationProps = useMemo(() => 
+		resourceConfig.Pagination ? { Pagination: resourceConfig.Pagination } : {},
+		[resourceConfig.Pagination]
+	);
+
+	// Remove mainContent useMemo and directly return the components
+	return (
+		<ResourceLayout resourceConfig={resourceConfig} locale={locale}>
+			<DashAutoList
+				resourceConfig={resourceConfig}
+				onSubmit={onSubmit}
+				onError={onError}
+				{...paginationProps}
+			/>
+
+			{resourceConfig.drawer && (
+				<MemoizedDashAutoDrawer drawerProps={drawerProps} />
+			)}
+		</ResourceLayout>
+	);
+};
+
+// Memoize the entire component based on resourceConfig
+export const ResourceTemplateList = React.memo(
+	ResourceTemplateListComponent,
+	(prevProps, nextProps) => {
+		const propsEqual = prevProps.resourceConfig === nextProps.resourceConfig && 
+						  prevProps.locale === nextProps.locale;
+		
+		if (!propsEqual) {
+			console.log('ResourceTemplateList re-rendering - props changed', {
+				resourceConfigChanged: prevProps.resourceConfig !== nextProps.resourceConfig,
+				localeChanged: prevProps.locale !== nextProps.locale
+			});
+		}
+		
+		return propsEqual;
+	}
+);
+
+// Modify the ResourceTemplateListWithConfig component
+export const ResourceTemplateListWithConfig = React.memo(({
+	resourceConfig,
+	locale
+}: {
+	resourceConfig: any;
+	locale: string;
+}) => {
+	const notify = useNotify();
+	const translate = useTranslate();
+	const redirect = useRedirect();
+	const dialog = useDialog();
+	const refresh = useRefresh();
+
+	// Memoize these boolean values to prevent unnecessary re-renders
+	const showNotifyAfterSubmit = useMemo(() => 
+		resourceConfig?.showNotifyAfterSubmit !== false, 
+		[resourceConfig?.showNotifyAfterSubmit]
+	);
+	
+	const showDialogAfterSubmit = useMemo(() => 
+		resourceConfig?.showDialogAfterSubmit !== false, 
+		[resourceConfig?.showDialogAfterSubmit]
+	);
+
+	// Memoize the onSubmit function with proper dependencies
+	const onSubmit = useCallback((data: any) => {
+		const translatedLabel = translate(resourceConfig.label, { _: resourceConfig.label });
+
+		if (showNotifyAfterSubmit) {
+			notify('dash.resource.updated', { type: 'success' });
+		}
+
+		if (showDialogAfterSubmit) {
+			dialog({
+				variant: 'info',
+				title: translate('dash.resource.updated'),
+				content: translate('dash.resource.updated_message', { label: translatedLabel }),
+				onConfirm: () => {
+					switch (resourceConfig.redirectAfterUpdate) {
+						case false:
+							return;
+						case 'view':
+							redirect('/' + resourceConfig.model + '/' + data.id + '/show');
+							break;
+						case 'edit':
+							redirect('/' + resourceConfig.model + '/' + data.id);
+							break;
+						case 'list':
+						default:
+							redirect('/' + resourceConfig.model);
+							break;
+					}
+				},
+				onClose: () => {},
+			});
+		}
+
+		if (!showDialogAfterSubmit && resourceConfig.redirectAfterUpdate) {
+			switch (resourceConfig?.redirectAfterUpdate) {
+				case 'view':
+					redirect('/' + resourceConfig.model + '/' + data.id + '/show');
+					break;
+				case 'edit':
+					redirect('/' + resourceConfig.model + '/' + data.id);
+					break;
+				case 'list':
+				default:
+					redirect('/' + resourceConfig.model);
+					break;
+			}
+		}
+
+		if (resourceConfig?.refreshAfter !== false) {
+			refresh();
+		}
+	}, [
+		showNotifyAfterSubmit,
+		showDialogAfterSubmit,
+		notify,
+		dialog,
+		redirect,
+		refresh,
+		resourceConfig.label,
+		resourceConfig.model,
+		resourceConfig.redirectAfterUpdate,
+		resourceConfig.refreshAfter,
+		translate
+	]);
+	
+	// Memoize the onError function with proper dependencies
+	const onError = useCallback((_error: any) => {
+		if (resourceConfig.onError) {
+			resourceConfig.onError('list', _error);
+			return;
+		} 
+
+		dialog({
+			variant: 'danger',
+			title: `${resourceConfig.label} Error`,
+			content: `${parseAxiosError(_error)}`,
+			onConfirm: () => {},
+			onClose: () => {},
+		});
+	}, [
+		resourceConfig.onError,
+		resourceConfig.label,
+		dialog
+	]);
+
+	// Memoize the drawer props to prevent unnecessary re-renders
+	const drawerProps = useMemo(() => ({
+		onSubmit,
+		onError,
+		resourceConfig,
+		...(resourceConfig.drawerProps && {
+			...resourceConfig.drawerProps,
+		}),
+	}), [onSubmit, onError, resourceConfig]);
+
+	// Memoize the pagination props
+	const paginationProps = useMemo(() => 
+		resourceConfig.Pagination ? { Pagination: resourceConfig.Pagination } : {},
+		[resourceConfig.Pagination]
+	);
+
+	return (
+		<ResourceLayout resourceConfig={resourceConfig} locale={locale}>
+			<DashAutoList
+				resourceConfig={resourceConfig}
+				locale={locale}
+				onSubmit={onSubmit}
+				onError={onError}
+				{...paginationProps}
+			/>
+
+			{resourceConfig.drawer && (
+				<MemoizedDashAutoDrawer drawerProps={drawerProps} />
+			)}
+		</ResourceLayout>
+	);
+}, (prevProps, nextProps) => {
+	const propsEqual = prevProps.resourceConfig === nextProps.resourceConfig &&
+					  prevProps.locale === nextProps.locale;
+	
+	if (!propsEqual) {
+		console.log('ResourceTemplateListWithConfig re-rendering - props changed', {
+			resourceConfigChanged: prevProps.resourceConfig !== nextProps.resourceConfig,
+			localeChanged: prevProps.locale !== nextProps.locale
+		});
+	}
+	
+	return propsEqual;
+});
+
+export default ResourceTemplateList;

package/src/templates/ResourceTemplateShow.tsx

@@ -0,0 +1,88 @@
+
+/* eslint-disable no-mixed-spaces-and-tabs */
+
+
+
+
+import { FC, useEffect } from 'react';
+
+
+//import { Outlet } from 'react-router';
+import {
+	DashAutoDrawer,
+} from 'dash-auto-admin';
+
+
+
+import DashAutoShow from 'dash-auto-admin/src/DashAutoShow';
+//import {DASHAdminSystemConstants} from 'dash-constants';
+//import { AnimatePresence, motion } from 'framer-motion';
+
+
+//import { useForm } from 'react-hook-form';
+import React from 'react';
+import ResourceLayout from '../layout/ResoureLayout';
+import { useDashResource } from '../contexts/DashResourceContext';
+import { IResourceTemplate } from './ResourceTemplate';
+
+
+export const ResourceTemplateShow: FC<IResourceTemplate> = (props) => {
+	//const {resourceConfig} = useDashResource()
+      const {resourceConfig, locale} = props;
+
+	/*const ShowActions = ({ edit }) => (
+    <TopToolbar>{edit !== false && <EditButton />}</TopToolbar>
+  );*/
+  /*useEffect(() => {
+    debugger;
+  },[]);*/
+
+	return resourceConfig.showComponent ? (
+		<ResourceLayout resourceConfig={resourceConfig} locale={locale}>
+			{/* <Show
+        title={
+          <DashAutoTitle
+            //schema={resourceConfig.showSchema ? resourceConfig.showSchema : resourceConfig.schema}
+            resourceConfig={resourceConfig}
+          />
+        }
+        actions={<ShowActions edit={resourceConfig.edit} />}
+      >
+        {resourceConfig.showComponent(resourceConfig)}
+      </Show>*/}
+			<DashAutoShow resourceConfig={resourceConfig} locale={locale} />
+
+			{resourceConfig.drawer && (
+				<DashAutoDrawer
+					resourceConfig={resourceConfig}
+					{...(resourceConfig.drawerProps && {
+						...resourceConfig.drawerProps,
+					})}
+				/>
+			)}
+		</ResourceLayout>
+	) : (
+		<ResourceLayout resourceConfig={resourceConfig} locale={locale}>
+			{/*<Show
+        title={
+          <DashAutoTitle
+            //schema={resourceConfig.showSchema ? resourceConfig.showSchema : resourceConfig.schema}
+            resourceConfig={resourceConfig}
+          />
+        }
+        actions={<ShowActions edit={resourceConfig.edit} />}
+      >
+        <DashAutoShow resourceConfig={resourceConfig} />
+      </Show>*/}
+			<DashAutoShow resourceConfig={resourceConfig} locale={locale} />
+			{resourceConfig.drawer && (
+				<DashAutoDrawer
+					resourceConfig={resourceConfig}
+					{...(resourceConfig.drawerProps && {
+						...resourceConfig.drawerProps,
+					})}
+				/>
+			)}
+		</ResourceLayout>
+	);
+};

package/src/templates/TrashTemplate.tsx

@@ -0,0 +1,179 @@
+import { Resource } from 'react-admin';
+
+import { Route } from 'react-router';
+import { useListContext } from 'react-admin';
+import { useState } from 'react';
+import { useRefresh, useTranslate } from 'react-admin';
+import { useUnselectAll } from 'react-admin';
+
+import { Button } from 'react-admin';
+import { Confirm } from 'react-admin';
+
+
+import { DashAutoList, IDashAutoAdminResourceConfig } from 'dash-auto-admin';
+import { useDialog } from 'dash-dialog';
+import { initAxios } from '../hooks/axios';
+import ApplicationLayout from '../layout/ApplicationLayout';
+import { ResourceTemplateList } from './ResourceTemplateList';
+import { useDashResource } from '../contexts/DashResourceContext';
+import { IResourceTemplate } from './ResourceTemplate';
+
+
+const TrashTemplate = (resourceConfig: IDashAutoAdminResourceConfig, locale?: string) => {	
+    const TrashBulkActions = () => {
+       
+		const axios = initAxios();
+		const dialog = useDialog();
+
+		const { selectedIds } = useListContext();
+
+		const refresh = useRefresh();
+		const translate = useTranslate();
+		const unselectAll = useUnselectAll(trashResourceConfig.model);
+
+		// RestoreMany
+		const [isRestoringLoading, setIsRestoringLoading] =
+			useState<boolean>(false);
+		const [restoreConfirmDialogOpen, setRestoreConfirmDialogOpen] =
+			useState(false);
+		const handleRestoreManyClick = () => setRestoreConfirmDialogOpen(true);
+		const handleRestoreManyDialogClose = () =>
+			setRestoreConfirmDialogOpen(false);
+		const handleRestoreManyConfirm = () => {
+			restoreMany();
+			setRestoreConfirmDialogOpen(false);
+		};
+
+		// DeleteMany
+		const [isDeletingLoading, setIsDeletingLoading] = useState<boolean>(false);
+		const [pemanentDeleteConfirmDialogOpen, setPermanentDeleteDialogOpen] =
+			useState(false);
+		const handleDeleteManyClick = () => setPermanentDeleteDialogOpen(true);
+		const handleDeleteManyDialogClose = () =>
+			setPermanentDeleteDialogOpen(false);
+		const handleDeleteManyConfirm = () => {
+			deleteMany();
+			setPermanentDeleteDialogOpen(false);
+		};
+
+		const restoreMany = async () => {
+			setIsRestoringLoading(true);
+			try {
+				await axios.post(`${trashResourceConfig.model}/updateMany`, {
+					ids: selectedIds,
+				});
+				setIsRestoringLoading(false);
+				refresh();
+				unselectAll();
+				dialog({
+					variant: 'info',
+					title: translate('dash.resource.updated'),
+					content: translate('dash.resource.updated_message', { label: translate(trashResourceConfig.label, { _: trashResourceConfig.label }) }),
+					onConfirm: () => {},
+					onClose: () => {},
+				});
+			} catch (error) {
+				setIsRestoringLoading(false);
+			}
+		};
+
+		const deleteMany = async () => {
+			setIsRestoringLoading(true);
+			try {
+				await axios.post(`${trashResourceConfig.model}/deleteMany`, {
+					ids: selectedIds,
+				});
+				setIsRestoringLoading(false);
+				refresh();
+				unselectAll();
+				dialog({
+					variant: 'info',
+					title: translate('dash.resource.updated'),
+					content: translate('dash.resource.updated_message', { label: translate(trashResourceConfig.label, { _: trashResourceConfig.label }) }),
+					onConfirm: () => {},
+					onClose: () => {},
+				});
+			} catch (error) {
+				setIsRestoringLoading(false);
+			}
+		};
+
+		return (
+			<>
+        
+				<Button label={translate('dash.action.restore')} onClick={handleRestoreManyClick} />
+				<Confirm
+					isOpen={restoreConfirmDialogOpen}
+					loading={isRestoringLoading}
+					title={translate('dash.action.restore')}
+					content={translate('dash.message.are_you_sure')}
+					onConfirm={handleRestoreManyConfirm}
+					onClose={handleRestoreManyDialogClose}
+				/>
+				<Button label={translate('ra.action.delete')} onClick={handleDeleteManyClick} />
+				<Confirm
+					isOpen={pemanentDeleteConfirmDialogOpen}
+					loading={isDeletingLoading}
+					title={translate('ra.action.delete')}
+					content={translate('dash.message.are_you_sure')}
+					onConfirm={handleDeleteManyConfirm}
+					onClose={handleDeleteManyDialogClose}
+				/>
+			</>
+		);
+	};
+    
+	const trashResourceConfig: IDashAutoAdminResourceConfig = {
+		...resourceConfig,
+		model:  resourceConfig.model+'/trash',
+		listDeleteButton: {
+			enabled: true,
+			props: { label: 'Eliminar definitivamente' },
+		},
+		listEditButton: { enabled: false },
+		listViewButton: { enabled: false },
+		customListButtons: null,
+        dataGridProps: {
+            ...resourceConfig.dataGridProps,
+            bulkActionButtons: <TrashBulkActions />
+        },
+        
+	};
+  
+	return (
+
+				<Resource
+					options={{
+						label: trashResourceConfig.label,
+						group: trashResourceConfig.group,
+					}}
+					name={trashResourceConfig.model}
+					list={() => <><ResourceTemplateList resourceConfig={trashResourceConfig} locale={locale} /></>/*{
+						return (
+							<ApplicationLayout
+								//icon={trashResourceConfig.icon} 
+                                //title={trashResourceConfig.label} menu={trashResourceConfig.menu} 
+                                //mainAction={trashResourceConfig.mainAction} 
+								resourceConfig={resourceConfig}
+							>
+								<DashAutoList
+                                    //BulkActions={trashResourceConfig.BulkActions}
+    
+									//search={trashResourceConfig.search} schema={trashResourceConfig.listSchema ? trashResourceConfig.listSchema : trashResourceConfig.schema}
+                                    //BulkActions={trashResourceConfig.BulkActions} 
+                                    //create={trashResourceConfig.create} 
+									resourceConfig={trashResourceConfig}
+								/>
+							</ApplicationLayout>
+						);
+                        
+					}*/}
+					// @ts-ignore 
+					icon={trashResourceConfig.icon}
+				/>
+                );
+      
+
+};
+
+export default TrashTemplate;