@dashadmin/dash-admin 1.3.24 → 1.3.26

package/src/components/racustombuttons/QuickEditButton.tsx

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import { memo, ReactElement } from 'react';
+import PropTypes from 'prop-types';
+import ImageEye from '@mui/icons-material/RemoveRedEye';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { RaRecord } from 'react-admin';
+import {
+	useResourceContext,
+	useRecordContext,
+	useCreatePath,
+	useRedirect,
+} from 'react-admin';
+
+import { Button, ButtonProps } from 'react-admin';
+import { Fab, IconButton } from '@mui/material';
+import useVirtualHash from '../../hooks/useVirtualHash';
+import {DASHAdminSystemConstants} from 'dash-constants';
+
+//import { IQuickEditButton } from '../dash-auto-admin/src';
+const URL_PREFIX = DASHAdminSystemConstants.system.URL_PREFIX;
+interface Props<RecordType extends RaRecord = any> {
+	icon?: ReactElement;
+	label?: string;
+	record?: RecordType;
+	resource?: string;
+	navigate?: (id: number | string) => number | string;
+	navigation?: 'redirect' | 'virtualhash';
+	mode?: 'show' | 'create' | 'edit';
+	scrollToTop?: boolean;
+}
+
+export type ShowButtonProps<RecordType extends RaRecord = any> =
+	Props<RecordType> & ButtonProps;
+
+export type IQuickEditButton<T extends RaRecord> = ShowButtonProps;
+
+const QuickEditButton = <RecordType extends RaRecord = any>(
+	props: IQuickEditButton<RecordType>,
+) => {
+	const location = useLocation();
+	const redirect = useRedirect();
+
+	const {
+		icon = defaultIcon,
+		label = 'ra.action.show',
+		record: recordProp,
+		resource: resourceProp,
+		navigate: navigate,
+		scrollToTop = true,
+		navigation = 'redirect',
+		mode = 'edit',
+		...rest
+	} = props;
+
+	const resource = useResourceContext(props);
+	const record = useRecordContext(props);
+	const createPath = useCreatePath();
+	if (!record) return null;
+
+	const { hash, setVirtualHash } = useVirtualHash();
+
+	const handleOnClick = React.useCallback(() => {
+		if (navigation === 'virtualhash')
+			setVirtualHash(`${URL_PREFIX}${resource}/${record.id}/${mode}`);
+		if (navigation === 'redirect')
+			redirect(mode, resource, navigate ? navigate(record.id) : record.id);
+	}, [navigate]);
+
+	return (
+		<IconButton
+			//component={Link}
+			//to={createPath({ type: 'show', resource, id: record.id })}
+			onClick={handleOnClick}
+			state={scrollStates[String(scrollToTop)]}
+			label={label}
+			//onClick={stopPropagation}
+			{...(rest as any)}
+		>
+			{icon}
+		</IconButton>
+	);
+};
+
+// avoids using useMemo to get a constant value for the link state
+const scrollStates = {
+	true: { _scrollToTop: true },
+	false: {},
+};
+
+const defaultIcon = <ImageEye />;
+
+// useful to prevent click bubbling in a datagrid with rowClick
+const stopPropagation = (e) => e.stopPropagation();
+
+QuickEditButton.propTypes = {
+	icon: PropTypes.element,
+	label: PropTypes.string,
+	record: PropTypes.any,
+	scrollToTop: PropTypes.bool,
+	navigate: PropTypes.func,
+	navigation: PropTypes.string,
+};
+
+const PureCustonRaButton = memo(
+	QuickEditButton,
+	(props: ShowButtonProps, nextProps: ShowButtonProps) =>
+		props.resource === nextProps.resource &&
+		(props.record && nextProps.record
+			? props.record.id === nextProps.record.id
+			: props.record == nextProps.record) && // eslint-disable-line eqeqeq
+		props.label === nextProps.label &&
+		props.disabled === nextProps.disabled,
+);
+
+export default PureCustonRaButton;

package/src/components/racustombuttons/QuickIconButton.tsx

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import { memo, ReactElement } from 'react';
+import PropTypes from 'prop-types';
+import ImageEye from '@mui/icons-material/RemoveRedEye';
+
+import {
+	useResourceContext,
+	useRecordContext,
+	useRedirect,
+	RaRecord,
+} from 'react-admin';
+
+import { IconButton } from '@mui/material';
+
+import { initAxios } from '../../hooks/axios';
+import useVirtualHash from '../../hooks/useVirtualHash';
+import {DASHAdminSystemConstants} from 'dash-constants';
+
+//import { IQuickEditButton } from '../dash-auto-admin/src';
+const URL_PREFIX = DASHAdminSystemConstants.system.URL_PREFIX;
+interface Props<RecordType extends RaRecord = any> {
+	icon?: ReactElement;
+	label?: string;
+	record?: RecordType;
+	resource?: string;
+	navigate?: (record: RecordType) => string;
+	navigation?: 'redirect' | 'virtualhash';
+	mode?: 'show' | 'create' | 'edit' | 'destroy';
+	scrollToTop?: boolean;
+}
+
+export type ShowButtonProps<RecordType extends RaRecord = any> =
+	Props<RecordType> /*& ButtonProps*/;
+
+export type IQuickIconButton<T extends RaRecord> = ShowButtonProps;
+
+const QuickIconButton = <RecordType extends RaRecord = any>(
+	props: IQuickIconButton<RecordType>,
+) => {
+	const redirect = useRedirect();
+	const axios = initAxios();
+
+	const {
+		icon = defaultIcon,
+		label = 'ra.action.show',
+		record: recordProp,
+		resource: resourceProp,
+		navigate: navigate,
+		scrollToTop = true,
+		navigation = 'redirect',
+		mode = 'edit',
+		...rest
+	} = props;
+
+	const resource = useResourceContext(props);
+	const record = useRecordContext(props);
+
+	if (!record) return null;
+
+	const { hash, setVirtualHash } = useVirtualHash();
+
+	const handleOnClick = () => {
+		if (mode == 'destroy') {
+			axios.delete(`${resource}/${record.id}`, {
+				headers: { 'Content-Type': 'application/json' },
+			});
+			return false;
+		}
+
+		if (navigation === 'virtualhash') {
+			let vhash = `${URL_PREFIX}${resource}/${navigate ? navigate(record) : record.id}`;
+			setVirtualHash(vhash);
+		}
+
+		if (navigation === 'redirect')
+			redirect(mode, resource, navigate ? navigate(record) : record.id);
+	};
+
+	return (
+		<IconButton
+			onClick={handleOnClick}
+			state={scrollStates[String(scrollToTop)]}
+			label={label}
+			//onClick={stopPropagation}
+			{...(rest as any)}
+		>
+			{icon}
+		</IconButton>
+	);
+};
+
+// avoids using useMemo to get a constant value for the link state
+const scrollStates = {
+	true: { _scrollToTop: true },
+	false: {},
+};
+
+const defaultIcon = <ImageEye />;
+
+// useful to prevent click bubbling in a datagrid with rowClick
+const stopPropagation = (e) => e.stopPropagation();
+
+QuickIconButton.propTypes = {
+	icon: PropTypes.element,
+	label: PropTypes.string,
+	record: PropTypes.any,
+	scrollToTop: PropTypes.bool,
+	navigate: PropTypes.func,
+	navigation: PropTypes.string,
+};
+
+
+export default  memo(
+	QuickIconButton,
+	(props: ShowButtonProps, nextProps: ShowButtonProps) =>
+		props.resource === nextProps.resource &&
+		(props.record && nextProps.record
+			? props.record.id === nextProps.record.id
+			: props.record == nextProps.record) && // eslint-disable-line eqeqeq
+		props.label === nextProps.label,
+	//&& props.disabled === nextProps.disabled
+);

package/src/components/scrollbar/Scrollbar.tsx

@@ -0,0 +1,31 @@
+import React, { PropsWithChildren } from 'react';
+import { Scrollbars, ScrollbarProps } from 'react-custom-scrollbars-2';
+
+export interface IScrollbar extends PropsWithChildren, ScrollbarProps {
+	horizontal?: boolean;
+}
+
+const Scrollbar: React.FC<IScrollbar> = (props) => {
+	const { horizontal, children, ...scrollprops } = props;
+	scrollprops.renderTrackVertical = (props) => (
+		<div {...props} className='track-vertical' />
+	);
+	if (horizontal)
+		scrollprops.renderTrackHorizontal = (props) => (
+			<div {...props} className='track-horizontal' />
+		);
+
+	return (
+		<Scrollbars
+			{...props}
+			{...scrollprops}
+			autoHide
+			autoHideTimeout={1000}
+			autoHideDuration={200}
+		>
+			{children}
+		</Scrollbars>
+	);
+};
+
+export default Scrollbar;

package/src/components/selects/MultiSelect.tsx

@@ -0,0 +1,53 @@
+import { IDashAutoAdminCustomFieldComponent } from 'dash-auto-admin';
+import React from 'react';
+
+import { ReferenceArrayInput } from 'react-admin';
+import { SelectArrayInput } from 'react-admin';
+import { ChipField } from 'react-admin';
+import { SingleFieldList } from 'react-admin';
+import { ReferenceArrayField } from 'react-admin';
+
+const MultiSelectView: React.FC<IDashAutoAdminCustomFieldComponent> = ({
+	method,
+	attribute,
+}) => {
+	const inputType = attribute.type as string;
+	const [reference, source] = inputType.split('.');
+
+	return (
+		<ReferenceArrayField source={attribute.attribute} reference={reference}>
+			<SingleFieldList>
+				<ChipField source={source} />
+			</SingleFieldList>
+		</ReferenceArrayField>
+	);
+};
+
+const MultiSelectEdit: React.FC<IDashAutoAdminCustomFieldComponent> = ({
+	method,
+	attribute,
+}) => {
+	const inputType = attribute.type as string;
+	const [reference, source] = inputType.split('.');
+
+	return (
+		<ReferenceArrayInput
+			/*allowEmpty*/ reference={reference}
+			source={attribute.attribute}
+		>
+			<SelectArrayInput optionText={source} />
+		</ReferenceArrayInput>
+	);
+};
+
+const MultiSelect = ({ method, attribute, resourceConfig }: IDashAutoAdminCustomFieldComponent) => {
+	switch (method) {
+		case 'edit':
+		case 'create':
+			return <MultiSelectEdit attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+		case 'view':
+			return <MultiSelectView attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+	}
+};
+
+export default MultiSelect;

package/src/components/selects/RASearchableSelect.tsx

@@ -0,0 +1,279 @@
+/**
+ * ISearchableSelect for AutoAdmin for ReactAdmin
+ * @author  Omar Muñoz <omar.munoz@dash.cl>
+ * @author  Franisco Aranda <francisco.aranda@dash.cl> <faranda@gmail.com>
+ */
+
+import {
+	Autocomplete,
+	Box,
+	CircularProgress,
+	InputLabel,
+	TextField,
+} from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { useController } from 'react-hook-form';
+import { useGetList } from 'react-admin';
+
+import { useRecordContext } from 'react-admin';
+import { Loading } from 'react-admin';
+import { isArray } from 'lodash';
+import { IDashAutoAdminCustomFieldComponent } from 'dash-auto-admin';
+
+interface ISearchableSelect extends IDashAutoAdminCustomFieldComponent {
+	name?: string;
+	resource?: string;
+	selectLabel?: string;
+	title?: string;
+	renderText?: (object: any) => any;
+	transformData?: (val: string) => any;
+	defaultValues?: any;
+	isMultiple?: boolean;
+	//pagination?: boolean,
+	minSearch?: number;
+	searchResults?: number;
+	timerSearch?: number;
+	isEmpty?: boolean;
+	filter?: { [x: string]: any };
+	queryFilter?: string;
+	isOptionEqualToValue?: (option, value) => boolean;
+	viewAttribute: string;
+	elementKeyId?: string;
+}
+
+const SearchableSelect: React.FC<ISearchableSelect> = ({
+	method,
+	attribute,
+	isMultiple = false,
+	//pagination = true,
+	searchResults = 50,
+	minSearch = 3,
+	timerSearch = 500,
+	resource,
+	selectLabel,
+	renderText,
+	transformData,
+	queryFilter = 'q',
+	defaultValues = undefined,
+	isEmpty = false,
+	filter,
+	isOptionEqualToValue = undefined,
+	viewAttribute = null,
+	elementKeyId = 'id',
+}) => {
+	//const element_key = "system_marketplace_category_id";
+	const [open, setOpen] = useState(true);
+	/* 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 record = useRecordContext();
+	const field = useController({
+		name: attribute.attribute,
+		defaultValue: record ? record[attribute.attribute] : null,
+	});
+
+	const includes =
+		record &&
+		record[attribute.attribute] &&
+		isArray(record[attribute.attribute])
+			? record[attribute.attribute].map((element) =>
+					element.hasOwnProperty(elementKeyId)
+						? element[elementKeyId]
+						: element,
+			  )
+			: record[attribute.attribute];
+
+	const {
+		data: resourceData,
+		total,
+		isLoading,
+		error,
+	} = useGetList(resource, {
+		filter: { [queryFilter]: q, ...filter, includes: includes },
+	});
+
+	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),
+		);
+	};
+
+	return (
+		<>
+			{parsedOptions && (
+				<Autocomplete
+					key={'autocomplete-' + attribute.attribute}
+					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))[viewAttribute] : field.field.value}
+
+					defaultValue={field.field?.value}
+					//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 =
+							viewAttribute && !renderText
+								? _option[viewAttribute]
+								: 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={(props, option: any) => {
+						const { key, ...newProps } = props as any;
+
+						return (
+							<Box
+								key={option.key}
+								component='li'
+								sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+								{...newProps}
+							>
+								{viewAttribute && !renderText
+									? option[viewAttribute]
+									: 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()];
+						}
+						transformData
+							? field.field.onChange(transformData(newValue))
+							: field.field.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
+									let 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}
+										</>
+									),
+								}}
+							/>
+						);
+					}}
+				/>
+			)}
+		</>
+	);
+};
+
+const RASearchableSelect = ({
+	method,
+	attribute,
+	...props
+}: ISearchableSelect) => {
+	switch (method) {
+		case 'edit':
+		case 'create':
+			return (
+				<SearchableSelect attribute={attribute} method={method} {...props} />
+			);
+		case 'view':
+			return (
+				<SearchableSelect attribute={attribute} method={method} {...props} />
+			);
+	}
+};
+
+export default RASearchableSelect;