@dashadmin/dash-components 1.3.24 → 1.3.26

package/src/components/SearchableSelects/RASearchableSelectChipsRecordContext.tsx

@@ -0,0 +1,362 @@
+/**
+ * ISearchableSelect for AutoAdmin for ReactAdmin
+ * @author  Franisco Aranda <faranda@gmail.com>
+ */
+
+import {
+  Autocomplete,
+  Box,
+  Chip,
+  CircularProgress,
+  TextField,
+} from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { useFormContext } from "react-hook-form";
+import { useGetList } from "react-admin";
+
+import { useRecordContext } from "react-admin";
+import { isArray } from "lodash";
+import { LoadingIndicator } from "react-admin";
+import { IDashAutoAdminCustomFieldComponent } from "dash-auto-admin";
+
+/* NOTES: use defaultValues = null, to infer record attribute */
+interface ISearchableSelectChipsControlRecordContext {
+  name?: string;
+  resource?: string;
+  selectLabel?: string;
+  title?: string;
+  renderText: (option: any, caller: string) => any;
+  transformData?: (val: any) => any;
+  defaultValues?: any;
+  isMultiple?: boolean;
+  minSearch?: number;
+  searchResults?: number;
+  timerSearch?: number;
+  isEmpty?: boolean;
+  filter?: { [x: string]: any };
+  queryFilter?: string;
+  isOptionEqualToValue: (option: any, value: any) => boolean;
+  viewAttribute: string;
+  valueKeyId?: string;
+  useBaseAttributeName?: boolean;
+  useListAttributeForController?: boolean;
+  transformOption?: (
+    option: any,
+    parsedOptions: any[],
+    caller?: string
+  ) => boolean;
+}
+
+export const SearchableSelectChipsControlRecordContextEdit: React.FC<
+  ISearchableSelectChipsControlRecordContext & IDashAutoAdminCustomFieldComponent
+> = ({
+  method,
+  attribute,
+  isMultiple = false,
+  searchResults = 50,
+  minSearch = 3,
+  timerSearch = 500,
+  resource,
+  selectLabel,
+  renderText,
+  transformData = (val: any) => val,
+  queryFilter = "q",
+  defaultValues = undefined,
+  isEmpty = false,
+  filter,
+  isOptionEqualToValue = undefined,
+  viewAttribute = null,
+  valueKeyId = "id",
+  useBaseAttributeName = false,
+  useListAttributeForController = false,
+  transformOption,
+}) => {
+  const { setValue, watch } = useFormContext();
+  const record = useRecordContext();
+
+  // Get the correct attribute names
+  const saveAttributeName = attribute.attribute; // e.g., 'category_ids' - what gets saved
+  const displayAttributeName = attribute.listAttribute || attribute.attribute; // e.g., 'categories' - what gets displayed
+
+  console.log('Attribute config:', {
+    saveAttributeName,
+    displayAttributeName,
+    record: record ? {
+      [saveAttributeName]: record[saveAttributeName],
+      [displayAttributeName]: record[displayAttributeName]
+    } : null
+  });
+
+  // Component state
+  const [open, setOpen] = useState(false);
+  const [fullyLoaded, setFullyLoaded] = useState(false);
+  const [parsedOptions, setParsedOptions] = useState<any[]>([]);
+  const [q, setQ] = useState("");
+  const [selectedOptions, setSelectedOptions] = useState<any[]>([]);
+  const [timeOutSearch, setTimeOutSearch] = useState<any>(undefined);
+
+  // Watch current form value (the IDs that get saved)
+  const currentFormValue = watch(saveAttributeName);
+
+  const _transformOption = (option: any, caller: string) => {
+    if (typeof transformOption === "function") {
+      return transformOption(option, parsedOptions, caller);
+    }
+    return option;
+  };
+
+  // Get includes for the API call - use the save attribute (IDs)
+  const getIncludes = () => {
+    let recordValue = record?.[saveAttributeName]; // category_ids
+    
+    if (!recordValue) return [];
+    
+    if (!Array.isArray(recordValue)) {
+      recordValue = [recordValue];
+    }
+    
+    return recordValue.filter(Boolean);
+  };
+
+  const includes = getIncludes();
+
+  // React Admin useGetList
+  const {
+    data: resourceSearchResults,
+    total: totalSearchResults,
+    isLoading: isResourceSearchLoading,
+    error: isResourceSearchErrored,
+  } = useGetList(resource, {
+    meta: { removeSortFilters: true },
+    filter: { [queryFilter]: q, ...filter, includes: includes },
+  });
+
+  // Update parsed options when search results change
+  useEffect(() => {
+    if (resourceSearchResults) {
+      const resultsArray = Array.isArray(resourceSearchResults)
+        ? resourceSearchResults
+        : Object.values(resourceSearchResults);
+
+      const _parsedOptions = resultsArray.map((ele, index) => ({
+        ...ele,
+        key: `option-${ele[valueKeyId] || index}`,
+      }));
+
+      setParsedOptions(_parsedOptions);
+    }
+  }, [resourceSearchResults, valueKeyId]);
+
+  // Initialize default values
+  useEffect(() => {
+    if (fullyLoaded) return;
+
+    console.log('Initializing default values...');
+
+    let initialSelectedOptions: any[] = [];
+    let initialFormValue: any = isMultiple ? [] : null;
+
+    if (defaultValues === null && record) {
+      // Try to get full objects from listAttribute first (e.g., 'categories')
+      if (record[displayAttributeName] && Array.isArray(record[displayAttributeName])) {
+        initialSelectedOptions = record[displayAttributeName];
+        initialFormValue = record[displayAttributeName].map((item: any) => item[valueKeyId]);
+      }
+      // Fallback to IDs from saveAttribute (e.g., 'category_ids')
+      else if (record[saveAttributeName]) {
+        const ids = Array.isArray(record[saveAttributeName]) 
+          ? record[saveAttributeName] 
+          : [record[saveAttributeName]];
+        initialFormValue = isMultiple ? ids : ids[0];
+        // selectedOptions will be set when parsedOptions are loaded
+      }
+    } else if (defaultValues !== undefined && defaultValues !== null) {
+      if (Array.isArray(defaultValues)) {
+        initialSelectedOptions = defaultValues;
+        initialFormValue = defaultValues.map((item: any) => 
+          typeof item === 'object' ? item[valueKeyId] : item
+        );
+      } else {
+        initialSelectedOptions = [defaultValues];
+        initialFormValue = typeof defaultValues === 'object' ? defaultValues[valueKeyId] : defaultValues;
+      }
+    }
+
+    console.log('Initial values:', {
+      initialSelectedOptions,
+      initialFormValue
+    });
+
+    setSelectedOptions(initialSelectedOptions);
+    setValue(saveAttributeName, initialFormValue);
+    setFullyLoaded(true);
+  }, [record, defaultValues, fullyLoaded, saveAttributeName, displayAttributeName, valueKeyId, isMultiple]);
+
+  // Update selected options when parsedOptions change and we have form values but no selected options
+  useEffect(() => {
+    if (parsedOptions.length > 0 && selectedOptions.length === 0 && currentFormValue) {
+      const formValueArray = Array.isArray(currentFormValue) ? currentFormValue : [currentFormValue];
+      const matchedOptions = formValueArray.map(id => 
+        parsedOptions.find(option => option[valueKeyId] === id)
+      ).filter(Boolean);
+      
+      if (matchedOptions.length > 0) {
+        console.log('Setting selected options from parsed options:', matchedOptions);
+        setSelectedOptions(matchedOptions);
+      }
+    }
+  }, [parsedOptions, selectedOptions, currentFormValue, valueKeyId]);
+
+  // Debounced search
+  const debounce = (fn: Function, delay = 500) => {
+    clearTimeout(timeOutSearch);
+    setTimeOutSearch(
+      setTimeout(() => {
+        fn();
+      }, delay)
+    );
+  };
+
+  // Update field value
+  const updateFieldValue = (newSelectedOptions: any[]) => {
+    console.log('Updating field value:', newSelectedOptions);
+    
+    setSelectedOptions(newSelectedOptions || []);
+    
+    // Save the IDs to the form
+    const idsToSave = (newSelectedOptions || []).map(option => option[valueKeyId]);
+    const valueToSave = isMultiple ? idsToSave : (idsToSave[0] || null);
+    
+    console.log('Saving to form:', { attribute: saveAttributeName, value: valueToSave });
+    setValue(saveAttributeName, valueToSave);
+  };
+
+  if (!fullyLoaded) return <LoadingIndicator />;
+
+  return (
+    <>
+      <Autocomplete
+        key={`autocomplete-${saveAttributeName}`}
+        multiple={isMultiple}
+        loading={isResourceSearchLoading}
+        fullWidth
+        freeSolo={false}
+        options={parsedOptions}
+        open={open}
+        onOpen={() => setOpen(true)}
+        onClose={() => setOpen(false)}
+        value={isMultiple ? selectedOptions : (selectedOptions[0] || null)}
+        isOptionEqualToValue={isOptionEqualToValue}
+        autoHighlight
+        getOptionLabel={(option: any) => {
+          if (!option) return '';
+          return renderText(_transformOption(option, "optionlabel"), "optionlabel") || '';
+        }}
+        renderOption={(props, option: any) => {
+          const { key, ...newProps } = props as any;
+          return (
+            <Box
+              key={option.key || `option-${option[valueKeyId]}`}
+              component="li"
+              sx={{ "& > img": { mr: 2, flexShrink: 0 } }}
+              {...newProps}
+            >
+              {renderText(_transformOption(option, "option"), "option")}
+            </Box>
+          );
+        }}
+        renderTags={(tagValue, getTagProps) => {
+          return tagValue.map((option, index) => (
+            <Chip
+              key={`chip-${option[valueKeyId] || index}`}
+              label={renderText(_transformOption(option, "chip"), "chip")}
+              {...getTagProps({ index })}
+            />
+          ));
+        }}
+        onChange={(event: any, rawValue) => {
+          const newValue = isMultiple ? rawValue : (rawValue ? [rawValue] : []);
+          updateFieldValue(newValue);
+        }}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            label={selectLabel}
+            variant="outlined"
+            onChange={(ev) => {
+              const searchValue = ev.target.value;
+              if (
+                searchValue &&
+                searchValue !== "" &&
+                searchValue.length >= minSearch
+              ) {
+                debounce(() => setQ(searchValue), timerSearch);
+              }
+            }}
+            InputProps={{
+              ...params.InputProps,
+              autoComplete: "new-password",
+              endAdornment: (
+                <>
+                  {isResourceSearchLoading && (
+                    <CircularProgress color="inherit" size={20} />
+                  )}
+                  {params.InputProps.endAdornment}
+                </>
+              ),
+            }}
+          />
+        )}
+      />
+    </>
+  );
+};
+
+export const SearchableSelectChipsControlRecordContextView: React.FC<IDashAutoAdminCustomFieldComponent> = ({attribute,
+   resourceConfig }) => {
+    const record = useRecordContext<any>();
+    const values = Array.isArray(record[attribute.listAttribute || attribute.attribute]) ? record[attribute.listAttribute || attribute.attribute] : [record[attribute.listAttribute || attribute.attribute]];
+    return (<>
+        {record && (
+                <Box sx={{ width: "100%" }}>
+                    {values.map((item: any) => (
+                        <Chip
+                            key={item.id}
+                            label={item.name}
+                            sx={{ margin: 0.5 }}
+                        />
+                    ))}
+                </Box>
+        )}
+    </>);
+};
+
+
+const SearchableSelectChipsControlRecordContext: React.FC<
+  IDashAutoAdminCustomFieldComponent & ISearchableSelectChipsControlRecordContext
+> = ({ method, attribute, resourceConfig,...props }) => {
+  switch (method) {
+    case "edit":
+    case "create":
+      return (
+        <SearchableSelectChipsControlRecordContextEdit
+        resourceConfig={resourceConfig}
+          attribute={attribute}
+          method={method}
+          {...props}
+        />
+      );
+    case "view":
+    case "list":
+        return   <SearchableSelectChipsControlRecordContextView
+        resourceConfig={resourceConfig}
+          attribute={attribute}
+          method={method}
+          {...props}
+        />
+    default:
+      return null;
+  }
+};
+
+export default SearchableSelectChipsControlRecordContext;

package/src/components/SearchableSelects/SearchableSelect.tsx

@@ -0,0 +1,321 @@
+/**
+ * React Auto Admin - SearchableSelect
+ *
+ * @author  Franisco Aranda <francisco.aranda@dash.cl> <faranda@gmail.com>
+ * @author  Omar Muñoz <omar.munoz@dash.cl>
+ */
+
+import {
+	Autocomplete,
+	AutocompleteProps,
+	Box,
+	CircularProgress,
+	TextField,
+} from '@mui/material';
+import React, { JSX, useEffect, useState } from 'react';
+import { useController } from 'react-hook-form';
+import { useGetList } from 'react-admin';
+import { isArray } from 'lodash';
+
+export interface ISearchableSelect<
+	T,
+	Multiple extends boolean | undefined,
+	DisableClearable extends boolean | undefined,
+	FreeSolo extends boolean | undefined = undefined,
+> extends Omit<AutocompleteProps<T | string, Multiple, DisableClearable, FreeSolo>, 'renderInput' | 'options'> {
+	/** Options are ingored because they are calculated within this component */
+	/** renderInput is ignored because is implemented privately within this component */
+
+	name: string;
+	/** url path to the resource, a getList or getForSelect e.g: 'system/user'  */
+	resource: string;
+	/** label for the select */
+	selectLabel: string;
+	/** Optional function to parse the item and return a string or JSX.Element to show in the selector list*/
+	renderText?: (object: any) => string | JSX.Element;
+	/** Optional function will transform the item at the moment of field.onChange */
+	transformData?: (val: any) => any;
+	/** Optional defaultValue, or defaultValues array */
+	defaultValues?: any;
+	/** Specify if the component must handle multiple options */
+	isMultiple?: boolean;
+	/** @deprecated pagination, must be sent on filters */
+	//pagination?: boolean,
+	/** Min character input to perform search */
+	minSearch?: number;
+	/** @deprecated searchResults, must be sent on filters as perPage */
+	//searchResults?: number;
+	/** Search after x ms */
+	timerSearch?: number;
+	/** isEmpty - TODO: this flow is not tested. */
+	isEmpty?: boolean;
+	/** filter - optional parameters for the axios query */
+	filter?: { [x: string]: any };
+	/** name of the query parameter, usually just 'q' or 'search' */
+	queryFilter?: string;
+	/**
+	 * The default function will compare the raw values equality
+	 * the edge case is when a transformData is implemented, then the isOptionEqualToValue will have to compare to the transformation output.
+	 * e.g: isOptionEqualToValue={(option, value) => value === option.id }
+            transformData={(data) => data?.id || null}
+	 */
+	isOptionEqualToValue?: (option, value) => boolean;
+	/**
+	 * if not specified it will render the raw value for options
+	 * if the response is not just a string or number array, you will have to specify which attribute from the option object you want to render
+	 */
+	renderAttribute?: string;
+	/** elementKeyID, Advanced usage, by default id, specify the attribute from the option object representing the key or id */
+	elementKeyId?: string;
+	/** onChange */
+	onChange?: (value: any) => void;
+	/* renderInputTextFieldProps - Partial<TextFieldProps> */
+	renderInputTextFieldProps?: any; // It should be: Partial<TextFieldProps>
+}
+
+const SearchableSelect = function WrappedAutoComplete<
+	T,
+	Multiple extends boolean | undefined = undefined,
+	DisableClearable extends boolean | undefined = undefined,
+	FreeSolo extends boolean | undefined = undefined,
+>({ ...props }: ISearchableSelect<T, Multiple, DisableClearable, FreeSolo>) {
+	const {
+		isMultiple = false,
+		//pagination = true,
+		//searchResults = 50,
+		minSearch = 3,
+		timerSearch = 500,
+		resource,
+		selectLabel,
+		renderText,
+		transformData,
+		queryFilter = 'q',
+		defaultValues = undefined,
+		elementKeyId = 'id',
+		isEmpty = false,
+		filter,
+		isOptionEqualToValue = (option, value) => value === option,
+		renderAttribute = null,
+		name,
+		onChange,
+		renderInputTextFieldProps,
+		//..._rest
+	} = props;
+	//const element_key = "system_marketplace_category_id";
+	const [open, setOpen] = useState(false);
+	/* parsedOptions se setea null, esto para que el control no aparezca hasta que se obtenga la data */
+	const [parsedOptions, setParsedOptions] = useState(null);
+	const [q, setQ] = useState('');
+
+	const field = useController({
+		name: name,
+		defaultValue: defaultValues ? defaultValues : null,
+	});
+	const includes =
+		defaultValues && isArray(defaultValues)
+			? defaultValues.map((element) =>
+				element[elementKeyId]
+					? element[elementKeyId]
+					: element)
+			: defaultValues;
+
+	const {
+		data: resourceData,
+		isLoading,
+	} = useGetList(
+		resource,
+		{
+			filter: { [queryFilter]: q, ...filter, includes: includes },
+		},
+		{ refetchOnWindowFocus: false },
+	);
+
+	useEffect(() => {
+		if (resourceData && !isLoading) {
+			//Le agrega el key, para evitar el warning de react.
+			//setParsedOptions([...parsedOptions,...resourceData.map(ele => { return {...ele,key:"option"+ele.id}})])
+			if (parsedOptions)
+				setParsedOptions([
+					...parsedOptions,
+					...resourceData.map((ele) => {
+						return { ...ele, key: 'option' + ele.id };
+					}),
+				]);
+			setParsedOptions(
+				resourceData.map((ele) => {
+					return { ...ele, key: 'option' + ele.id };
+				}),
+			);
+		} /*else {
+            // Setea la data a un arreglo vacío, ya que si es null, se ocultará el componente.
+            //setParsedOptions([]);
+       }*/
+		return () => setParsedOptions([]);
+		// TODO! reset callback, empty parsedOptions.
+	}, [resourceData, isLoading]);
+
+	const [timeOutSearch, setTimeOutSearch] = useState(undefined);
+
+	const debounce = (fn: Function, delay = 500) => {
+		clearTimeout(timeOutSearch);
+		setTimeOutSearch(
+			setTimeout(() => {
+				fn();
+			}, delay),
+		);
+	};
+
+	const calculateDefaultValue = () => {
+		let value = null;
+		if (isMultiple) value = [];
+		if (isMultiple && field.field.value && Array.isArray(field.field.value))
+			value = field.field.value;
+		if (isMultiple && field.field.value && !Array.isArray(field.field.value))
+			value = [field.field.value];
+		if (!isMultiple && field.field.value) value = field.field.value;
+		return value;
+	};
+
+	const defaultValue = calculateDefaultValue();
+
+	return (
+		<>
+			{isLoading && !parsedOptions ? (
+				<CircularProgress color='inherit' size={20} />
+			) : (
+				<></>
+			)}
+			{parsedOptions && (
+				<Autocomplete
+					key={'autocomplete-' + name}
+					multiple={isMultiple}
+					loading={isLoading && open}
+					//sx={{ width: 373 }}
+					fullWidth
+					freeSolo={true}
+					//options={!resourceData ? [] : !defaultValues ? resourceData : resourceData}
+					//options={resourceData ? resourceData.map(ele => { return {...ele,key:ele.id}} ) : []}
+					options={parsedOptions}
+					open={open}
+					onOpen={() => setOpen(true)}
+					onClose={() => setOpen(false)}
+					/*defaultValue={field.field?.value && field.field.value.map(item => parsedOptions.find(
+                    (element) => { 
+                        
+                        return element.id === item.id
+                    }))}*/
+					//value={isOptionEqualToValue && parsedOptions ? parsedOptions.find(ele => isOptionEqualToValue(ele,field.field.value))[renderAttribute] : field.field.value}
+
+					defaultValue={defaultValue}
+					//value={field.field.value}
+
+					isOptionEqualToValue={isOptionEqualToValue}
+					autoHighlight
+					//{...(!isEmpty && { value: field.field.value })}
+					//{...(isEmpty && { renderTags: (value, getTagProps) => <></> })}
+					// 8
+
+					getOptionLabel={(option: any) => {
+						const _option = !Array.isArray(option) // si es un numero como 'id', busca la opción en los valores con isOptionEqualToValue, sino devuelve el objeto original.
+							? parsedOptions &&
+						parsedOptions.find((ele) =>
+							isOptionEqualToValue(ele, field.field.value))
+							: option;
+						if (!_option) return q; //es posbile que no se haya encontrado en parsedOptions o que parsedOptions aún no esté definido.
+						const r =
+							renderAttribute && !renderText
+								? _option[renderAttribute]
+								: renderText(_option);
+						/*console.log(
+              "getOptionLabel",
+              parsedOptions.find((ele) =>
+                isOptionEqualToValue(ele, field.field.value)
+              ),
+              r
+            );*/
+						if (!r) return q;
+						return r;
+					}}
+					//getOptionLabel={(option: any) => option}
+
+					renderOption={(p, option: any) => {
+						const { key, ...newProps } = p as any;
+
+						return (
+							<Box
+								key={option.key}
+								component='li'
+								sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+								{...newProps}
+							>
+								{renderAttribute && !renderText
+									? option[renderAttribute]
+									: renderText(option)}
+							</Box>
+						);
+					}}
+					onChange={(event: any, rawValue) => {
+						//console.log("onChange", event, rawValue);
+						let newValue = rawValue;
+
+						if (Array.isArray(rawValue)) {
+							newValue = isEmpty
+								? [...rawValue, ...field.field.value]
+								: [...new Map(newValue.map((v) => [v.id, v])).values()];
+						}
+						if (transformData) {
+							field.field.onChange(transformData(newValue));
+						} else {
+							field.field.onChange(newValue);
+						}
+
+						if (onChange) { onChange(newValue); }
+					}}
+					renderInput={(params) => {
+						//console.log("renderInput", params.id);
+						return (
+							<TextField
+								key={params.id}
+								{...params}
+								label={selectLabel}
+								variant='outlined'
+								onChange={(ev) => {
+									// dont fire API if the user delete or not entered anything
+									const searchValue = ev.target.value;
+									//onSearch={(searchValue) => {}
+
+									if (
+										searchValue &&
+										searchValue !== '' &&
+										searchValue.length >= minSearch
+									)
+										debounce(() => setQ(searchValue), timerSearch);
+
+									/*if (ev.target.value !== "" || ev.target.value !== null) {
+                                setQ(ev.target.value);
+                            }*/
+								}}
+								//onBlur={() => setQ('')}
+								InputProps={{
+									...params.InputProps,
+									autoComplete: 'new-password',
+									endAdornment: (
+										<>
+											{isLoading ? (
+												<CircularProgress color='inherit' size={20} />
+											) : null}
+											{params.InputProps.endAdornment}
+										</>
+									),
+								}}
+								{...renderInputTextFieldProps}
+							/>
+						);
+					}}
+				/>
+			)}
+		</>
+	);
+};
+
+export default SearchableSelect;