@dashadmin/dash-auto-admin 1.3.25 → 1.3.26

package/src/mui/AttributeToField.tsx

@@ -0,0 +1,657 @@
+import { InputLabel } from '@mui/material';
+
+import {
+	ImageInput,
+	FileInput,
+	DateTimeInput,
+	ArrayField,
+	BooleanField,
+	ChipField,
+	Datagrid,
+	DateField,
+	NumberField,
+	ImageField,
+	ReferenceArrayField,
+	ReferenceField,
+	SingleFieldList,
+	TextField,
+	FileField,
+	FunctionField,
+} from 'react-admin';
+
+import IDashAutoAdminAttribute from '../interfaces/IDashAutoAdminAttribute';
+import IDashAutoAdminFormOptions from '../interfaces/IDashAutoAdminFormOptions';
+
+import { UserAction } from '../wrappers';
+import ListStringsField from './components/ListStringField';
+import IRecord from '../interfaces/IRecord';
+import React from 'react';
+import IDashAutoAdminResourceConfig from '../interfaces/IDashAutoAdminResourceConfig';
+import IDashAutoAdminCustomFieldComponent from '../interfaces/IDashAutoAdminCustomFieldComponent';
+import isEnum from '../utils/isEnum';
+import replaceParams from '../utils/replaceParams';
+import { useParams } from 'react-router';
+import { useComponentRegistry } from '../DashAutoAdminComponentRegistry';
+
+export const AttributeToField = (
+	method: 'view' | 'list' | 'create' | 'edit',
+	resourceConfig: IDashAutoAdminResourceConfig,
+	input: IDashAutoAdminAttribute,
+	index?: number,
+	options?: IDashAutoAdminFormOptions,
+	resource?: string,
+	record?: IRecord,
+) => {
+	// Locale is available in options?.locale
+	// Get the component registry
+	const { components } = useComponentRegistry();
+	
+	const params = useParams();
+	
+	const sortableField = input.sortable === true ? true : false;
+
+	const typeComponentMapper = (type: string) => {
+		const component = components[type];
+      
+
+		if (component) {
+			return { custom: true, type: "component", component };
+		}
+        
+		return { custom: true, type: "component", component: () => <>No component for {type}</> };
+	};
+
+   
+
+	const ComponentWrapper =
+		resourceConfig?.fieldWrapper &&
+		typeof resourceConfig.fieldWrapper === 'function'
+			? resourceConfig.fieldWrapper
+			: ({
+					_record,
+					_method,
+					_attribute,
+					_resourceConfig,
+					children,
+			  }: IDashAutoAdminCustomFieldComponent) => {
+					return children;
+			  };
+
+	record = options?.record ? options.record : record;
+
+	if (
+		options &&
+		options.useReadOnlyInputAsTextField === true &&
+		input.readOnly
+	) {
+		return (
+			<ComponentWrapper
+				key={index}
+				label={input.label}
+				sortable={sortableField}
+				source={input.listAttribute ? input.listAttribute : input.attribute}
+				{...(record && { record: record })}
+				method={method}
+				attribute={input}
+                resourceConfig={resourceConfig}
+			>
+				<TextField
+					{...(record && { record: record })}
+					sortable={sortableField}
+					{...(sortableField && {
+						sortBy: input.listAttribute || input.attribute,
+					})}
+					key={index}
+					label={input.label}
+					source={input.listAttribute ? input.listAttribute : input.attribute}
+					{...{
+						...input.fieldProps,
+						editable: false,
+						InputProps: { readOnly: true },
+					}}
+					disabled
+				/>
+			</ComponentWrapper>
+		);
+	} else if (options && options.readOnlyComponent && input.readOnly) {
+		return (
+			<ComponentWrapper
+				{...(record && { record: record })}
+				method={method}
+				attribute={input}
+				key={index}
+				label={input.label}
+				sortable={sortableField}
+				source={input.listAttribute ? input.listAttribute : input.attribute}
+                resourceConfig={resourceConfig}
+			>
+				<options.readOnlyComponent
+					key={index}
+					{...(record && { record: record })}
+					sortable={sortableField}
+					{...(sortableField && {
+						sortBy: input.listAttribute || input.attribute,
+					})}
+					input={input}
+					label={input.label}
+					source={input.listAttribute ? input.listAttribute : input.attribute}
+					{...{
+						...input.fieldProps,
+						editable: false,
+						InputProps: { readOnly: true },
+					}}
+				/>
+			</ComponentWrapper>
+		);
+	}
+
+	// Check if input type is a string and not an array or enum
+
+	if (typeof input.type === "string" && !input.type.includes(".") && !Array.isArray(input.type)) {
+		switch (input.type) {
+			case 'string':
+			case 'text':
+			case 'String':
+				input.type = String;
+				break;
+			case 'number':
+			case 'Number':
+			case 'integer':
+				input.type = Number;
+				break;
+			case 'boolean':
+			case 'Boolean':
+				input.type = Boolean;
+				break;
+			case 'date':
+			case 'Date':
+				input.type = Date;
+				break;
+            case 'custom':
+            default:
+               
+                input.custom = true;
+                if(typeof input?.component === "string") {
+                    input = { ...input, ...typeComponentMapper( input.component ) };
+                }
+				break;
+		}
+	}
+
+    // CUSTOM COMPONENT
+	if (
+		(input.custom && input.component) ||
+		(input.type === 'component' && input.component)
+	) {
+      
+		return (
+			<FunctionField
+				key={`function_field_${index}`}
+				label={input.label}
+				sortable={sortableField}
+				{...(sortableField && {
+					sortBy: input.listAttribute || input.attribute,
+				})}
+				render={(r) => {
+					return <ComponentWrapper
+							{...(r && { record: r })}
+							method={method}
+							attribute={input}
+							key={index}
+							label={input.label}
+							sortable={sortableField}
+							source={
+								input.listAttribute ? input.listAttribute : input.attribute
+							}
+                            resourceConfig={resourceConfig}
+						>
+							<UserAction
+								key={`custom_component_${index}`}
+								{...(r && { record: r })}
+								method={method}
+								attribute={input}
+                                resourceConfig={resourceConfig}
+                                options={options}
+							/>
+						</ComponentWrapper>
+                       
+				}}
+			/>
+		);
+	}
+   
+	if (Array.isArray(input.type) && input.type.length > 0) {
+		const inputType: string | IDashAutoAdminAttribute = input.type[0];
+
+		/* Force the label to be the attribute name */
+		if (!input.label) {
+			input.label = input.attribute;
+		}
+		/* Array of enum values – We use a SelectArrayInput */
+		if (isEnum(inputType)) {
+			return (
+				<ComponentWrapper
+					{...(record && { record: record })}
+					method={method}
+					attribute={input}
+					key={index}
+					label={input.label}
+					sortable={sortableField}
+					source={input.listAttribute ? input.listAttribute : input.attribute}
+                    resourceConfig={resourceConfig}
+				>
+					<ListStringsField
+						key={index}
+						label={input.label}
+						source={input.listAttribute ? input.listAttribute : input.attribute}
+						map={inputType}
+                        
+					/>
+				</ComponentWrapper>
+			);
+		}
+
+		if (typeof inputType === 'string') {
+			const _params = {...params,...(location.hash.match(/\d+/g) || []).map(Number).reduce((acc, curr, index) => {
+				acc[index] = curr;
+				return acc;
+			}, {})};
+		
+			const _inputType = replaceParams(_params,inputType);
+			
+			const [reference, sourceName] = _inputType.split('.');
+           
+			return (
+				<ComponentWrapper
+					{...(record && { record: record })}
+					method={method}
+					attribute={input}
+					key={index}
+					label={input.label}
+					sortable={sortableField}
+					source={input.listAttribute ? input.listAttribute : input.attribute}
+                    resourceConfig={resourceConfig}
+				>
+					<>
+						<ReferenceArrayField
+							key={index}
+							sortable={sortableField}
+							{...(sortableField && {
+								sortBy: input.listAttribute || input.attribute,
+							})}
+							label={input.label}
+							source={
+								input.listAttribute ? input.listAttribute : input.attribute
+							}
+							reference={reference}
+                            {...input.componentProps}
+						>
+							<SingleFieldList {...input.fieldProps}>
+								<ChipField source={sourceName} />
+							</SingleFieldList>
+						</ReferenceArrayField>
+					</>
+				</ComponentWrapper>
+			);
+		} else {
+			const inputTypeArray = input.type as IDashAutoAdminAttribute[];
+			return (
+				<ComponentWrapper
+					{...(record && { record: record })}
+					method={method}
+					attribute={input}
+					key={index}
+					label={input.label}
+					sortable={sortableField}
+					source={input.listAttribute ? input.listAttribute : input.attribute}
+                    resourceConfig={resourceConfig}
+                     {...input.componentProps}
+				>
+					<>
+						<ArrayField
+							key={index}
+							sortable={sortableField}
+							{...(sortableField && {
+								sortBy: input.listAttribute || input.attribute,
+							})}
+							label={input.label}
+							source={
+								input.listAttribute ? input.listAttribute : input.attribute
+							}
+                            {...input.fieldProps}
+						>
+							<Datagrid>
+								{inputTypeArray.map((attribute, idx) =>
+									AttributeToField(
+										method,
+										resourceConfig,
+										attribute,
+										idx,
+										options,
+									),
+								)}
+							</Datagrid>
+						</ArrayField>
+					</>
+				</ComponentWrapper>
+			);
+		}
+	}
+
+	if (typeof input.type === 'string') {
+		const _params = {...params,...(location.hash.match(/\d+/g) || []).map(Number).reduce((acc, curr, index) => {
+			acc[index] = curr;
+			return acc;
+		}, {})};
+
+		const _inputType = replaceParams(_params,input.type);
+		const [reference, sourceName] = _inputType.split('.');
+
+		if (input && input.multiple === false) {
+			const componentWrapperProps = {
+				...(record && { record: record }),
+				method,
+				attribute: input,
+				label: input.label,
+				sortable: sortableField,
+				source: input.listAttribute ? input.listAttribute : input.attribute,
+				resourceConfig
+			}
+
+			const componentProps = {
+				...(record && { record: record }),
+				sortable: sortableField,
+				...(sortableField && {
+					sortBy: input.listAttribute || input.attribute,
+				}),
+				label: input.label,
+				link: 'show',
+				source: input.listAttribute ? input.listAttribute : input.attribute,
+				reference: reference,
+                ...input.componentProps
+			}			
+			
+			return <ComponentWrapper
+				{...componentWrapperProps}
+			>
+				<ReferenceField
+					{...componentProps}
+				/>
+			</ComponentWrapper>
+		}
+
+        const componentWrapperProps = {
+            ...(record && { record: record }),
+            method: method,
+            attribute: input,
+            label: input.label,
+            sortable: sortableField,
+            source: input.listAttribute ? input.listAttribute : input.attribute,
+            resourceConfig: resourceConfig
+        }		
+        
+        const componentProps = {
+			...(record && { record: record }),
+            sortable: sortableField,
+			...(sortableField && {
+				sortBy: input.listAttribute || input.attribute,
+			}),
+			label: input.label,
+			source: input.listAttribute ? input.listAttribute : input.attribute,
+			reference: reference,
+          
+		}
+       
+		return (
+			<ComponentWrapper {...componentWrapperProps} >
+			{/* @ts-ignore - Record type compatibility */}
+			<ReferenceArrayField {...componentProps} >
+                
+                <SingleFieldList {...input.fieldProps}>
+					<ChipField source={sourceName} />
+				</SingleFieldList>
+            </ReferenceArrayField>	
+			</ComponentWrapper>
+		);
+	}
+
+	switch (input.type) {
+		case Number:
+			return (
+				<FunctionField
+					label={input.label}
+					sortable={sortableField}
+					{...(sortableField && {
+						sortBy: input.listAttribute || input.attribute,
+					})}
+					key={`function_field_${index}`}
+					render={(r) => {
+						return (
+							<ComponentWrapper
+								{...(r && { record: r })}
+								method={method}
+								attribute={input}
+								key={index}
+								label={input.label}
+								sortable={sortableField}
+								source={
+									input.listAttribute ? input.listAttribute : input.attribute
+								}
+                                resourceConfig={resourceConfig}
+							>
+								<NumberField
+									key={`number_field_${index}`}
+									label={input.label}
+									{...(record && { record: record })}
+									sortable={input.sortable === true ? true : false}
+									source={
+										input.listAttribute ? input.listAttribute : input.attribute
+									}
+									{...input.fieldProps}
+								/>
+							</ComponentWrapper>
+						);
+					}}
+				/>
+			);
+
+		case Boolean:
+			return record ? (
+				<>
+					{input?.showLabel !== false && (
+						<ComponentWrapper
+							{...(record && { record: record })}
+							method={method}
+							attribute={input}
+							key={index}
+							label={input.label}
+							sortable={sortableField}
+							source={
+								input.listAttribute ? input.listAttribute : input.attribute
+							}
+                            resourceConfig={resourceConfig}
+						>
+							<InputLabel
+								htmlFor={
+									input.listAttribute ? input.listAttribute : input.attribute
+								}
+							>
+								{input.label}
+							</InputLabel>
+						</ComponentWrapper>
+					)}
+					<ComponentWrapper
+						{...(record && { record: record })}
+						method={method}
+						attribute={input}
+						key={index}
+						label={input.label}
+						sortable={sortableField}
+						source={input.listAttribute ? input.listAttribute : input.attribute}
+                        resourceConfig={resourceConfig}
+					>
+						<BooleanField
+							sortable={sortableField}
+							{...(sortableField && {
+								sortBy: input.listAttribute || input.attribute,
+							})}
+							record={record}
+							key={index}
+							id={input.listAttribute ? input.listAttribute : input.attribute}
+							label={input.label}
+							source={
+								input.listAttribute ? input.listAttribute : input.attribute
+							}
+							{...input.fieldProps}
+						/>
+					</ComponentWrapper>
+				</>
+			) : (
+				<FunctionField
+					label={input.label}
+					sortable={sortableField}
+					{...(sortableField && {
+						sortBy: input.listAttribute || input.attribute,
+					})}
+					render={(r) => (
+						<>
+							<ComponentWrapper
+								{...(r && { record: r })}
+								method={method}
+								attribute={input}
+								key={index}
+								label={input.label}
+								sortable={sortableField}
+								source={
+									input.listAttribute ? input.listAttribute : input.attribute
+								}
+                                resourceConfig={resourceConfig}
+							>
+								<BooleanField
+									record={record}
+									key={index}
+									id={
+										input.listAttribute ? input.listAttribute : input.attribute
+									}
+									label={input.label}
+									source={
+										input.listAttribute ? input.listAttribute : input.attribute
+									}
+									{...input.fieldProps}
+								/>
+							</ComponentWrapper>
+						</>
+					)}
+				/>
+			);
+
+		case DateTimeInput:
+		case Date:
+			return (
+				<ComponentWrapper
+					{...(record && { record: record })}
+					method={method}
+					attribute={input}
+					label={input.label}
+					sortable={sortableField}
+					source={input.listAttribute ? input.listAttribute : input.attribute}
+					key={index}
+                    resourceConfig={resourceConfig}
+				>
+					<DateField
+						{...(record && { record: record })}
+						key={index}
+						sortable={sortableField}
+						{...(sortableField && {
+							sortBy: input.listAttribute || input.attribute,
+						})}
+						label={input.label}
+						showTime={
+							(input.fieldProps && input.fieldProps.showTime) || false
+						}
+						source={input.listAttribute ? input.listAttribute : input.attribute}
+						{...input.fieldProps}
+					/>
+				</ComponentWrapper>
+			);
+
+		case ImageInput:
+			return (
+				<ComponentWrapper
+					{...(record && { record: record })}
+					method={method}
+					attribute={input}
+					key={index}
+					label={input.label}
+					sortable={sortableField}
+					source={input.listAttribute ? input.listAttribute : input.attribute}
+                    resourceConfig={resourceConfig}
+				>
+					<ImageField
+						{...(record && { record: record })}
+						sortable={sortableField}
+						{...(sortableField && {
+							sortBy: input.listAttribute || input.attribute,
+						})}
+						key={index}
+						source={input.attribute}
+						label={input.label}
+					/>
+				</ComponentWrapper>
+			);
+
+		case FileInput:
+			return (
+				<ComponentWrapper
+					{...(record && { record: record })}
+					method={method}
+					attribute={input}
+					key={index}
+					label={input.label}
+					sortable={sortableField}
+					source={input.listAttribute ? input.listAttribute : input.attribute}
+                    resourceConfig={resourceConfig}
+				>
+					<FileField
+						{...(record && { record: record })}
+						sortable={sortableField}
+						{...(sortableField && {
+							sortBy: input.listAttribute || input.attribute,
+						})}
+						key={index}
+						source={input.listAttribute ?? input.attribute}
+						title={input.listAttribute}
+						download={true}
+					/>
+				</ComponentWrapper>
+			);
+	}
+
+    const textFieldProps = {
+        ...(record && { record: record }),
+        sortable: sortableField,
+        ...(sortableField && {
+            sortBy: input.listAttribute || input.attribute,
+        }),
+        label: input.label,
+        source: input.listAttribute ? input.listAttribute : input.attribute,
+        ...input.fieldProps,
+        ...(input.slotProps ? { slotProps: input.slotProps } : {})
+    }    
+
+	return (
+		<ComponentWrapper
+			label={input.label}
+			sortable={sortableField}
+			source={input.listAttribute ? input.listAttribute : input.attribute}
+			{...(record && { record: record })}
+			method={method}
+			attribute={input}
+            resourceConfig={resourceConfig}
+		>
+			<TextField
+				{...textFieldProps}
+			/>
+		</ComponentWrapper>
+	);
+};