@dashadmin/dash-auto-admin 1.3.25 → 1.3.28

package/src/mui/AutoAdminResizableDrawer.tsx

@@ -0,0 +1,69 @@
+import { Drawer, DrawerProps } from '@mui/material';
+import React from 'react';
+
+export interface IResizableDrawer extends DrawerProps {
+	defaultWidth: number;
+}
+
+export const AutoAdminResizableDrawerContext = React.createContext(400);
+
+/* TODO: W.I.P Resizable Drawer is a Work in Progress */
+export const AutoAdminResizableDrawer: React.FC<IResizableDrawer> = ({
+	children,
+	defaultWidth,
+	...props
+}) => {
+	//const classes = useStyles();
+	// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+	const [drawerWidth, setDrawerWidth] = React.useState(defaultWidth);
+
+	/*
+
+	const handleMouseMove = useCallback((e) => {
+		console.log('Mouse move');
+		//const newWidth = e.clientX - (window.innerWidth - document.body.offsetLeft - document.body.offsetWidth  );
+		//const newWidth = e.clientX + (window.innerWidth - document.body.offsetLeft - document.body.offsetWidth  );
+		const newWidth = window.innerWidth - e.clientX;
+		//if (newWidth > minDrawerWidth && newWidth < maxDrawerWidth) {
+		setDrawerWidth(newWidth);
+		//}
+		if (e.stopPropagation) e.stopPropagation();
+		if (e.preventDefault) e.preventDefault();
+		e.cancelBubble = true;
+		e.returnValue = false;
+	}, []);
+
+	const handleMouseUp = () => {
+		console.log('Mouse up');
+		document.removeEventListener('mouseup', handleMouseUp, true);
+		document.removeEventListener('mousemove', handleMouseMove, true);
+	};
+	
+	const handleMouseDown = (e) => {
+		console.log('Mouse down');
+		document.addEventListener('mouseup', handleMouseUp, true);
+		document.addEventListener('mousemove', handleMouseMove, true);
+	};
+ 	*/
+
+	const Dragger = () => {
+		// TODO:
+		// 	<div onMouseDown={(e) => handleMouseDown(e) }  />
+		return <></>;
+	};
+
+	return (
+		<Drawer
+			/*className={classes.drawer}*/
+			PaperProps={{ style: { width: drawerWidth } }}
+			//sx={{ zIndex: 100, width: drawerWidth }}
+			{...props}
+		>
+			<AutoAdminResizableDrawerContext.Provider value={drawerWidth}>
+				<Dragger />
+
+				{children}
+			</AutoAdminResizableDrawerContext.Provider>
+		</Drawer>
+	);
+};

package/src/mui/AutoDataGrid.tsx

@@ -0,0 +1,127 @@
+import React, { useMemo, memo, useEffect } from 'react';
+
+import {
+    TextField,
+    Datagrid,
+    FunctionField,
+} from 'react-admin';
+
+import IDashAutoAdminAttribute from '../interfaces/IDashAutoAdminAttribute';
+import IDashAutoAdminResourceConfig from '../interfaces/IDashAutoAdminResourceConfig';
+
+import { AttributeToField } from './AttributeToField';
+import { TableContainer } from '@mui/material';
+import { ListDeleteButton, ListEditButton, ListViewButton } from '../toolbar/buttons/ListButtons';
+
+interface AutoDataGridProps {
+    /** Schema,(optional) resolves from resourceConfig, but in some cases without schema could work, not tested. */
+    schema?: IDashAutoAdminAttribute[];
+    /** BulkActions,(optional) resolves from resourceConfig, but in some cases without schema could work, not tested. */
+    resourceConfig?: IDashAutoAdminResourceConfig;
+    className?: string;
+    bulkActions?: React.ReactNode;
+    locale?: string;
+}
+
+export type IAutoDataGrid = AutoDataGridProps;
+
+// Memoize the buttons to prevent unnecessary re-renders
+const MemoizedListViewButton = memo(ListViewButton);
+const MemoizedListEditButton = memo(ListEditButton);
+const MemoizedListDeleteButton = memo(ListDeleteButton);
+
+const AutoDataGrid: React.FC<IAutoDataGrid> = ({
+    resourceConfig,
+    schema,
+    locale,
+    ...dataGridProps
+}) => {
+    const _locale = locale || resourceConfig?.locale;
+    const _schema: IDashAutoAdminAttribute[] = resourceConfig?.schema || schema;
+
+    if (!_schema || !_schema.filter)
+        throw new Error(
+            'Schema must be present as prop or as an attribute of resourceConfig object, and must be iterable',
+        );
+
+    // Memoize schema processing
+    const schemaIncludesId = useMemo(() => 
+        _schema.filter((attribute) => attribute.attribute === 'id').length !== 0
+    , [_schema]);
+
+    // Memoize processed dataGridProps
+    const processedDataGridProps = useMemo(() => ({
+       //...{selectedIds:[]},
+        ...resourceConfig.dataGridProps,
+        ...dataGridProps,
+    }), [resourceConfig.dataGridProps, dataGridProps]);
+
+    // Memoize the filtered schema for list display
+    const filteredSchema = useMemo(() => 
+        _schema.filter((attribute) => attribute.inList !== false)
+    , [_schema, _locale]);
+
+    // Default grid wrapper component
+    const DefaultGridWrapper = memo((props: { children: React.ReactNode, className?: string, gridWrapperProps?: any }) => {
+        const { children, className, gridWrapperProps } = props;
+        return (
+            <TableContainer
+                sx={{ mt: 1 }}
+                className={'dash-datagrid-wrapper '+(className || '')}
+                {...gridWrapperProps}
+            >
+                {children}
+            </TableContainer>
+        );
+    });
+
+    const DataGridWrapper = resourceConfig.dataGridWrapper || DefaultGridWrapper;
+    const DataGridRootComponent: typeof Datagrid =
+        resourceConfig.dataGridRootComponent || Datagrid;
+    
+    // Memoize the custom list buttons
+    const customListButtons = useMemo(() => {
+        if (!resourceConfig?.customListButtons) return null;
+        
+        return resourceConfig.customListButtons.map((customButtonConfig, idx) => (
+            <customButtonConfig.component
+                key={'list_custom_buttton' + idx}
+                {...customButtonConfig.props}
+            />
+        ));
+    }, [resourceConfig?.customListButtons]);
+
+  
+      
+    return <DataGridWrapper className={resourceConfig?.dataGridProps?.stickyHeader ? 'dash-sticky-header' : ''}>
+            <DataGridRootComponent {...processedDataGridProps}>
+                {!schemaIncludesId && !(resourceConfig.hideSchemaId === true) && (
+                    <FunctionField
+                        key={'default_id_field_0'}
+                        source='id'
+                        sortable={true}
+                        render={(record: any) => {
+                            const val = record?.id;
+                            // If not numeric, slice last 6 chars
+                            if (val && isNaN(Number(val))) {
+                                return String(val).slice(-6);
+                            }
+                            return val;
+                        }}
+                    />
+                )}
+                {filteredSchema.map((attribute, idx) => 
+                    AttributeToField('list', resourceConfig, attribute, idx)
+                )}
+                <MemoizedListViewButton key={'list_view_btn'} resourceConfig={resourceConfig} />
+                <MemoizedListEditButton key={'list_edit_btn'} resourceConfig={resourceConfig} />
+                <MemoizedListDeleteButton key={'list_delete_btn'} resourceConfig={resourceConfig} />
+                {customListButtons}
+            </DataGridRootComponent>
+        </DataGridWrapper>
+    
+};
+
+// Export a memoized version of the component
+//export default memo(AutoDataGrid);
+export default AutoDataGrid

package/src/mui/AutoReferenceFormTab.tsx

@@ -0,0 +1,51 @@
+import { FormTab, ReferenceManyField, ReferenceArrayField } from 'react-admin';
+import { IDashAutoAdminReference } from '../interfaces/IDashAutoAdminReference';
+
+import AutoDataGrid from './AutoDataGrid';
+import ExtendedPagination from './components/ExtendedPagination';
+
+const AutoReferenceFormTab = (reference: IDashAutoAdminReference) => {
+	const type = reference.type ? reference.type : 'ReferenceManyField';
+
+	return (
+		<FormTab
+			key={reference.reference}
+			label={reference.tab || reference.reference}
+		>
+			{type === 'ReferenceManyField' && (
+				<ReferenceManyField
+					fullWidth
+					reference={reference.reference}
+					//target={[...reference.target]}
+					target={reference.target}
+					//addLabel={false}
+					pagination={<ExtendedPagination />}
+				>
+					{/* TODO: replace AutoDataGrid to DashAutoList */}
+					<AutoDataGrid
+						schema={reference.schema}
+					/>
+				</ReferenceManyField>
+			)}
+
+			{type === 'ReferenceArrayField' && (
+				<ReferenceArrayField
+					fullWidth
+					reference={reference.reference}
+					//target={[...reference.target]}
+					source={reference.target}
+					//addLabel={false}
+					pagination={<ExtendedPagination />}
+				>
+					{' '}
+					{/* TODO replace AutoDataGrid to DashAutoList */}
+					<AutoDataGrid
+						schema={reference.schema} /*BulkActions={reference.BulkActions}*/
+					/>
+				</ReferenceArrayField>
+			)}
+		</FormTab>
+	);
+};
+
+export default AutoReferenceFormTab;

package/src/mui/AutoReferenceTab.tsx

@@ -0,0 +1,45 @@
+import { Tab, ReferenceManyField, ReferenceArrayField } from 'react-admin';
+import AutoDataGrid from './AutoDataGrid';
+import ExtendedPagination from './components/ExtendedPagination';
+import { IDashAutoAdminReference } from '../interfaces/IDashAutoAdminReference';
+
+export const AutoReferenceTab = (reference: IDashAutoAdminReference) => {
+	const type = reference.type ? reference.type : 'ReferenceManyField';
+	return (
+		<Tab key={reference.reference} label={reference.tab || reference.reference}>
+			{type === 'ReferenceManyField' && (
+				<ReferenceManyField
+					fullWidth
+					reference={reference.reference}
+					//target={[...reference.target]}
+					target={reference.target}
+					//addLabel={false}
+					pagination={<ExtendedPagination />}
+				>
+					<AutoDataGrid
+						schema={reference?.schema}
+						bulkActions={reference?.BulkActions}
+					/>
+				</ReferenceManyField>
+			)}
+
+			{type === 'ReferenceArrayField' && (
+				<ReferenceArrayField
+					fullWidth
+					reference={reference.reference}
+					//target={[...reference.target]}
+					source={reference.target}
+					//addLabel={false}
+					pagination={<ExtendedPagination />}
+				>
+					<AutoDataGrid
+						schema={reference.schema}
+						bulkActions={reference?.BulkActions}
+					/>
+				</ReferenceArrayField>
+			)}
+		</Tab>
+	);
+};
+
+export default AutoReferenceTab;

package/src/mui/AutoTabs.tsx

@@ -0,0 +1,32 @@
+import { Tab, useTranslate } from 'react-admin';
+import { AttributeToField } from './AttributeToField';
+import IDashAutoAdminAttribute from '../interfaces/IDashAutoAdminAttribute';
+import IDashAutoAdminFormOptions from '../interfaces/IDashAutoAdminFormOptions';
+import IDashAutoAdminResourceConfig from '../interfaces/IDashAutoAdminResourceConfig';
+import groupByTabs from '../utils/groupByTabs';
+//import { TabbedShowLayout } from 'react-admin';
+
+export const AutoTabs = (
+	resourceConfig: IDashAutoAdminResourceConfig,
+	schema: IDashAutoAdminAttribute[],
+	options?: IDashAutoAdminFormOptions,
+) => {
+    const translate = useTranslate();
+	return groupByTabs(schema).map((groupOfAttributes) => {
+		const label = groupOfAttributes[0].tab || options?.label || '';
+        const translatedLabel = translate(`dash-auto-admin-tabs.${label}`, { _: label });
+		//   console.log("TAB", label);
+		return (
+			<Tab  key={'tab_' + label} label={translatedLabel}>
+              
+				{groupOfAttributes
+					.filter((attribute) => attribute?.inShow !== false)
+					.map((attribute, idx) =>
+						AttributeToField('view', resourceConfig, attribute, idx, options),
+					)}
+			</Tab>
+		);
+	});
+};
+
+export default AutoTabs;

package/src/mui/components/ExtendedPagination.tsx

@@ -0,0 +1,23 @@
+import React, { FC, useContext } from 'react';
+
+import { Pagination, ListContext } from 'react-admin';
+import { PaginationProps } from 'react-admin';
+
+// 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 ExtendedPagination:FC<PaginationProps> = (props) => {
+	const list = useSafeListContext();
+	return list && list.total > list.perPage ? (
+		// @ts-ignore - pageSizeOptions prop compatibility
+		<Pagination pageSizeOptions={[25, 50, 100, 250, 500, 1000]} {...props} />
+	) : (
+		<></>
+	);
+};
+
+export default ExtendedPagination;

package/src/mui/components/ListStringField.tsx

@@ -0,0 +1,32 @@
+import { Chip } from '@mui/material';
+
+import React from 'react';
+import invertMap from '../../utils/invertMap';
+
+const ListStringsField = ({
+	record,
+	source,
+	map,
+}: {
+	record?: any;
+	source: string;
+	label: string;
+	map?: any;
+}) => {
+	const invertedMap = invertMap(map);
+	return (
+		<>
+			{record[source].map((item: string) => [
+				<Chip
+					key={item}
+					label={invertedMap && invertedMap[item] ? invertedMap[item] : item}
+				/>,
+				<> </>,
+			])}
+		</>
+	);
+};
+
+ListStringsField.defaultProps = { addLabel: true };
+
+export default ListStringsField;