@dashadmin/dash-auto-admin 1.3.24 → 1.3.26

package/src/DashAutoFiltersGenerator.tsx

@@ -0,0 +1,208 @@
+import React, { JSX } from 'react';
+import IReferenceFilter from './interfaces/IReferenceFilter';
+
+import { TextInput, ReferenceInput, SelectInput, DateInput } from 'react-admin';
+
+import IDashAutoAdminResourceConfig from './interfaces/IDashAutoAdminResourceConfig';
+
+import { SelectArrayInput } from 'react-admin';
+
+export const generateFilter = (
+	r: IReferenceFilter,
+	idx: React.Key,
+): JSX.Element => {
+	const {
+		label,
+		source,
+		reference,
+		optionText,
+		alwaysOn = true,
+		referenceComponent,
+		fieldProps = {},
+        slotProps = {},
+		inputOptions = {},
+		multiple = false,
+		date = false,
+	} = r;
+
+	// DEBUG: Log the filter configuration
+	console.log('🔧 DashAutoFiltersGenerator DEBUG - generateFilter called:', {
+		idx,
+		label,
+		source,
+		reference,
+		hasReferenceComponent: !!referenceComponent,
+		fieldProps,
+		timestamp: new Date().toISOString()
+	});
+
+	if (referenceComponent && !reference) {
+		console.log('🔧 DashAutoFiltersGenerator DEBUG - Rendering with reference component (no reference):', {
+			idx,
+			source,
+			label,
+			referenceComponent: referenceComponent.name,
+			fieldProps,
+			timestamp: new Date().toISOString()
+		});
+		
+		const ReferenceComponent = referenceComponent;
+		
+		// Use only fieldProps for all component props
+		const finalProps = {
+			source,
+			label,
+			alwaysOn,
+			...fieldProps, // fieldProps contains all component-specific props
+		};
+
+		console.log('🔧 DashAutoFiltersGenerator DEBUG - Final props for reference component (DETAILED):', {
+			idx,
+			source,
+			label,
+			finalProps,
+			fieldPropsResource: fieldProps?.resource,
+			timestamp: new Date().toISOString()
+		});
+		
+		return (
+			<ReferenceComponent
+				key={idx}
+				{...finalProps}
+			/>
+		);
+	}
+
+	// If not reference provided uses SelectArrayInput if multiple, or SelectInput if not.
+	let ReferenceComponent = referenceComponent || SelectInput;
+
+	if (reference && typeof reference === 'object') {
+		if (multiple && !referenceComponent) {
+			ReferenceComponent = SelectArrayInput;
+		}
+
+		console.log('🔗 DashAutoFiltersGenerator DEBUG - Rendering with object reference:', {
+			idx,
+			source,
+			label,
+			reference,
+			ReferenceComponent: ReferenceComponent.name,
+			timestamp: new Date().toISOString()
+		});
+
+		return (
+			<ReferenceComponent
+				key={idx}
+				choices={reference}
+				label={label}
+				source={source}
+				alwaysOn={alwaysOn}
+				{...fieldProps}
+			/>
+		);
+	}
+
+	if (reference) {
+		console.log('🔗 DashAutoFiltersGenerator DEBUG - Rendering ReferenceInput:', {
+			idx,
+			source,
+			label,
+			reference,
+			ReferenceComponent: ReferenceComponent.name,
+			inputOptions,
+			fieldProps,
+			timestamp: new Date().toISOString()
+		});
+		
+		return (
+			<ReferenceInput
+				key={idx}
+				label={label}
+				source={source}
+				reference={reference}
+				allowEmpty
+				alwaysOn={alwaysOn}
+				{...inputOptions}
+			>
+				<ReferenceComponent
+					label={label}
+					optionText={optionText}
+					{...fieldProps}
+				/>
+			</ReferenceInput>
+		);
+	}
+
+	if (date) {
+		console.log('📅 DashAutoFiltersGenerator DEBUG - Rendering DateInput:', {
+			idx,
+			source,
+			label,
+			fieldProps,
+			timestamp: new Date().toISOString()
+		});
+		
+		return (
+			<DateInput
+				key={idx}
+				placeholder='Date'
+				label={label}
+				source={source}
+				alwaysOn={alwaysOn}
+				{...fieldProps}
+			/>
+		);
+	}
+
+	console.log('📝 DashAutoFiltersGenerator DEBUG - Rendering TextInput (default):', {
+		idx,
+		source,
+		label,
+		fieldProps,
+		slotProps,
+		timestamp: new Date().toISOString()
+	});
+
+	return (
+		<TextInput
+			key={idx}
+			label={label}
+			source={source}
+			alwaysOn={alwaysOn}
+			{...fieldProps}
+            {...(slotProps ? { slotProps: slotProps } : {})}
+		/>
+	);
+};
+
+const dashAutoFiltersGenerator = (
+	resourceConfig: IDashAutoAdminResourceConfig,
+	locale?: string,
+): JSX.Element[] => {
+	const referenceFilters: IReferenceFilter[] =
+		resourceConfig?.referenceFilters || [];
+	const filters: JSX.Element[] = [];
+
+	console.log('🏭 DashAutoFiltersGenerator DEBUG - dashAutoFiltersGenerator called:', {
+		resourceConfig: resourceConfig?.model || 'unknown',
+		filtersCount: referenceFilters.length,
+		filters: referenceFilters.map(f => ({
+			id: f.id,
+			source: f.source,
+			label: f.label,
+			hasReferenceComponent: !!f.referenceComponent,
+			fieldProps: f.fieldProps
+		})),
+		timestamp: new Date().toISOString()
+	});
+
+	if (referenceFilters && referenceFilters.length > 0) {
+		referenceFilters.forEach((r, idx) => {
+			filters.push(generateFilter(r, idx));
+		});
+	}
+
+	return filters;
+};
+
+export default dashAutoFiltersGenerator;

package/src/DashAutoFormGroups.tsx

@@ -0,0 +1,146 @@
+import { AutoAdminSettings } from '.';
+import IDashAutoAdminAttribute from './interfaces/IDashAutoAdminAttribute';
+import IDashAutoAdminFormOptions from './interfaces/IDashAutoAdminFormOptions';
+import IDashAutoAdminResourceConfig from './interfaces/IDashAutoAdminResourceConfig';
+import groupByTabs from './utils/groupByTabs';
+import { default as AttributeToInput } from './mui/AttributeToInput';
+import React from 'react';
+import { TranslatedLabel } from './common/components/TranslatedLabel';
+
+// TODO: DEFAULT_TAB_LABEL should be get from a React Auto Admin config class.
+
+interface IAutoForm {
+	schema: IDashAutoAdminAttribute[],
+	resourceConfig: IDashAutoAdminResourceConfig,
+	options?: IDashAutoAdminFormOptions,
+}
+
+const DashAutoFormGroups = ({
+    schema,
+    resourceConfig,
+    options
+}: IAutoForm) => {
+	const DEFAULT_TAB_LABEL = AutoAdminSettings?.defaultTabName || resourceConfig.label;
+	
+	// Helper to render translated legend
+	const renderLegend = (label: string | undefined) => (
+		<legend>
+			<TranslatedLabel label={label} fallback={DEFAULT_TAB_LABEL} />
+		</legend>
+	);
+  
+	const isDrawer = options?.isDrawer === true ? true : false;
+   
+	switch (options?.mode) {
+		case 'create':
+			return groupByTabs(schema).map((groupOfAttributes, idx) => {
+				let attributes = groupOfAttributes;
+				if (isDrawer)
+					attributes = attributes.filter(
+						(attribute) => attribute?.inDrawer !== false,
+					);
+				const filteredAttributes = attributes.filter((attribute) => attribute?.inCreate !== false);
+				return filteredAttributes.length ? (
+					<fieldset key={`auto-admin-fieldset-${idx}`}>
+						{filteredAttributes.length > 0 && renderLegend(attributes[0].tab || options?.label)}
+						{filteredAttributes.map(
+							(attribute, i) =>
+								React.cloneElement(
+									AttributeToInput(
+										options.mode,
+										resourceConfig,
+										attribute,
+										i,
+										options,
+									),
+									{ key: `create-${idx}-${i}` },
+								),
+						)}
+					</fieldset>
+				) : null;
+			});
+
+		case 'edit':
+			return groupByTabs(schema).map((groupOfAttributes, idx) => {
+				let attributes = groupOfAttributes;
+				if (isDrawer)
+					attributes = attributes.filter(
+						(attribute) => attribute?.inDrawer !== false,
+					);
+				const filteredAttributes = attributes.filter((attribute) => attribute?.inEdit !== false);
+				return filteredAttributes.length ? (
+					<fieldset key={`auto-admin-fieldset-${idx}`}>
+						{filteredAttributes.length > 0 && renderLegend(attributes[0].tab || options?.label)}
+						{filteredAttributes.map((attribute, i) =>
+							React.cloneElement(
+								AttributeToInput(
+									options.mode,
+									resourceConfig,
+									attribute,
+									i,
+									options,
+								),
+								{ key: `edit-${idx}-${i}` },
+							),
+						)}
+					</fieldset>
+				) : null;
+			});
+
+		case 'view':
+			return groupByTabs(schema).map((groupOfAttributes, idx) => {
+				let attributes = groupOfAttributes;
+				if (isDrawer)
+					attributes = attributes.filter(
+						(attribute) => attribute?.inDrawer !== false,
+					);
+				const filteredAttributes = attributes.filter((attribute) => attribute?.inShow !== false);
+				return filteredAttributes.length ? (
+					<fieldset key={`auto-admin-fieldset-${idx}`}>
+						{filteredAttributes.length > 0 && renderLegend(attributes[0].tab || options?.label)}
+						{filteredAttributes.map((attribute, i) =>
+							React.cloneElement(
+								AttributeToInput(
+									options.mode,
+									resourceConfig,
+									attribute,
+									i,
+									options,
+								),
+								{ key: `view-${idx}-${i}` },
+							),
+						)}
+					</fieldset>
+				) : null;
+			});
+
+		case 'list':
+			return groupByTabs(schema).map((groupOfAttributes, idx) => {
+				let attributes = groupOfAttributes;
+				if (isDrawer)
+					attributes = attributes.filter(
+						(attribute) => attribute?.inDrawer !== false,
+					);
+				const filteredAttributes = attributes.filter((attribute) => attribute?.inShow !== false);
+				return filteredAttributes.length ? (
+					<fieldset key={`auto-admin-fieldset-${idx}`}>
+						{filteredAttributes.length > 0 && renderLegend(attributes[0].tab || options?.label)}
+						{filteredAttributes.map((attribute, i) =>
+							React.cloneElement(
+								AttributeToInput(
+									options.mode,
+									resourceConfig,
+									attribute,
+									i,
+									options,
+								),
+								{ key: `list-${idx}-${i}` },
+							),
+						)}
+					</fieldset>
+				) : null;
+			});
+	}
+};
+
+export default DashAutoFormGroups;

package/src/DashAutoFormLayout.tsx.review

@@ -0,0 +1,113 @@
+import { JSX } from 'react';
+import { DashAutoFormTabs } from '.';
+import IDashAutoAdminAttribute from './interfaces/IDashAutoAdminAttribute';
+import IDashAutoAdminFormOptions from './interfaces/IDashAutoAdminFormOptions';
+import IDashAutoAdminResourceConfig from './interfaces/IDashAutoAdminResourceConfig';
+
+import { default as AttributeToInput } from './mui/AttributeToInput';
+import hashedGroupByTabs from './utils/hashedGroupByTabs';
+
+interface IAutoForm {
+	schema: IDashAutoAdminAttribute[],
+	resourceConfig: IDashAutoAdminResourceConfig,
+	options?: IDashAutoAdminFormOptions,
+}
+
+const DashAutoFormLayout = ({
+    schema,
+    resourceConfig,
+    options
+}: IAutoForm) => {
+	const groupedTabs = hashedGroupByTabs(schema || []);
+
+	const renderEdit = (tab: string): JSX.Element[] => {
+		const groupedAttributesByTab = groupedTabs[tab] ? groupedTabs[tab] : [];
+		return groupedAttributesByTab
+			.filter((attribute) => attribute?.inEdit !== false)
+			.map((attribute, idx) =>
+				AttributeToInput('edit', resourceConfig, attribute, idx, options),
+			);
+	};
+
+	const renderCreate = (tab: string): JSX.Element[] => {
+		const groupedAttributesByTab = groupedTabs[tab] ? groupedTabs[tab] : [];
+		return groupedAttributesByTab
+			.filter((attribute) => attribute?.inCreate !== false)
+			.map((attribute, idx) =>
+				AttributeToInput('create', resourceConfig, attribute, idx, options),
+			);
+	};
+
+	/*
+   const renderShow = (tab: string): JSX.Element[] => {
+    const groupedAttributesByTab = groupedTabs.hasOwnProperty(tab) ? groupedTabs[tab] : [];
+    return groupedAttributesByTab.filter(attribute => attribute?.inShow !== false).map((attribute, idx) => AttributeToInput(attribute, idx, options))
+  }*/
+
+	/*
+   return groupByTabs(schema).map((groupOfAttributes, idx) => (
+        <fieldset key={"fieldset-" + idx}>
+          <legend>{groupOfAttributes[0].tab || (options?.label || 'Datos')}</legend>
+          {groupOfAttributes.filter(attribute => attribute?.inEdit !== false).map((attribute, idx) => AttributeToInput(attribute, idx, options))}
+        </fieldset>
+      ))
+
+  */
+
+	switch (options.mode) {
+		case 'create':
+			if (
+				!resourceConfig?.createLayout ||
+				typeof resourceConfig.createLayout !== 'function'
+			) {
+				console.warn(
+					'⚠️ createLayout must be present and be a function in the resource definition when using formGroupMode layout, fallback to tabs',
+				);
+
+				return DashAutoFormTabs({
+					schema: schema,
+					resourceConfig: resourceConfig,
+					options: options,
+				});
+			}
+
+			return resourceConfig.createLayout(renderCreate);
+
+		case 'edit':
+			if (
+				!resourceConfig?.editLayout ||
+				typeof resourceConfig.editLayout !== 'function'
+			) {
+				console.warn(
+					'⚠️ createLayout must be present and be a function in the resource definition when using formGroupMode layout, fallback to tabs',
+				);
+                
+				return DashAutoFormTabs({
+					schema: schema,
+					resourceConfig: resourceConfig,
+					options: options,
+				});
+			}
+
+			return resourceConfig.editLayout(renderEdit);
+
+			/*case "view":
+    case "list":
+      if (!resource.showLayout || typeof resource.showLayout !== "function") {
+        console.error("showLayout must be present and be a function in the resource definition when using formGroupMode layout, fallback to tabs");
+        return AutoFormTabs({
+          schema: schema,
+          resource: resource,
+          options: { mode: options.mode },
+        })
+      }
+
+      return resource.createLayout(renderShow)
+    */
+
+		default:
+			return <>mode not allowed</>;
+	}
+};
+
+export default DashAutoFormLayout;