@dashadmin/dash-admin 1.3.24 → 1.3.26

package/src/components/Redirect.tsx

@@ -0,0 +1,46 @@
+import { IDashAutoAdminResourceConfig } from "dash-auto-admin";
+import { useEffect } from "react";
+import { useRedirect, Loading } from "react-admin";
+import { useParams } from "react-router";
+import {DASHAdminSystemConstants} from 'dash-constants';
+
+interface IRedirect {
+  method: 'edit' | 'list' | 'create' | 'show';
+  drawerMethod: 'edit' | 'list' | 'create' | 'show';
+  resourceConfig: IDashAutoAdminResourceConfig;
+  stateHashPattern?: string;
+}
+
+const URL_PREFIX = DASHAdminSystemConstants.system.URL_PREFIX;
+const Redirect: React.FC<IRedirect> = ({
+  method,
+  resourceConfig,
+  stateHashPattern = URL_PREFIX,
+  drawerMethod = 'edit',
+  ..._props
+}) => {
+  const params = useParams();
+  const redirect = useRedirect();
+
+  const idParamName = resourceConfig?.idParamName || 'id';
+
+  useEffect(() => {
+    let _stateHash = stateHashPattern.replace(
+      `:${idParamName}`,
+      params[idParamName],
+    );
+    _stateHash = _stateHash.replace(':method', drawerMethod);
+
+    redirect(
+      method,
+      resourceConfig.model,
+      method === 'edit' ? params.id : null,
+      null,
+      { hash: _stateHash },
+    );
+  }, []);
+
+  return <Loading />;
+};
+
+export default Redirect;

package/src/components/avatar/Avatar.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { IDashAutoAdminCustomFieldComponent } from 'dash-auto-admin';
+import { FileField, FileInput, useRecordContext } from 'react-admin';
+import { Box } from '@mui/material';
+import { WithRecord } from 'react-admin';
+import SingleImageUploader from './SingleImageUploader';
+import { useFormContext } from 'react-hook-form';
+import AvatarMui from '@mui/material/Avatar';
+
+export type AvatarComponent = IDashAutoAdminCustomFieldComponent;
+
+export const AvatarHandler: React.FC<AvatarComponent> = (props) => {
+	const { method, attribute } = props;
+	const record = useRecordContext();
+	const _attributeName = attribute.listAttribute || attribute.attribute;
+	const {
+		setValue,
+		formState: { errors },
+	} = useFormContext();
+
+	const onChange = (file: File) => {
+		setValue(attribute.attribute, file, { shouldDirty: true });
+	};
+    
+	return (
+		<>
+			<SingleImageUploader
+				classNamePrefix='dash-profile'
+				{...(method === "edit" && record && record[_attributeName]
+					? { currentUrl: record[_attributeName] }
+					: {})}
+				onChange={onChange}
+			/>
+			{errors[attribute.attribute] && (
+				<span style={{ color: 'red' }}>
+					{errors[attribute.attribute]?.message?.toString() || 'Error'}
+				</span>
+			)}
+		</>
+	);
+};
+
+export const AvatarDisplay: React.FC<AvatarComponent> = (props) => {
+	const { attribute } = props;
+	const record = useRecordContext();
+	const _attributeName = attribute.listAttribute || attribute.attribute;
+	const imageUrl = record?.[_attributeName];
+   
+	return (
+		<Box display="flex" alignItems="center">
+			<AvatarMui src={imageUrl} alt="avatar" />
+		</Box>
+	);
+};
+
+const Avatar = ({ method, attribute,resourceConfig }: IDashAutoAdminCustomFieldComponent) => {
+	switch (method) {
+		case 'edit':
+        case 'create':
+			return <AvatarHandler attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+		case 'view':
+        case 'list':
+			return <AvatarDisplay  attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+	}
+};
+export default Avatar;
+

package/src/components/avatar/SingleImageUploader.tsx

@@ -0,0 +1,53 @@
+import { IconButton} from "@mui/material";
+import { FC, useState } from "react";
+import Edit  from "@mui/icons-material/Edit";
+import Image  from "@mui/icons-material/Image";
+import React from "react";
+export interface ISingleImageUploader {
+	classNamePrefix?: string;
+	currentUrl?: string;
+	onChange?:  (file:File) => void
+}
+
+const SingleImageUploader:FC<ISingleImageUploader> = (props) => {
+
+	const {classNamePrefix = 'default',currentUrl = 'single-image-uploader',onChange} = props;
+
+	const [localFile, setLocalFile] = useState(null);
+
+	return <div className={`single-image-uploader ${classNamePrefix}-img`}>
+										{localFile || currentUrl ? (
+											<img src={localFile || currentUrl} alt='' />
+										) : (
+											<div className={`${classNamePrefix}-icon`}>
+												<Image />
+											</div>
+										)}
+										<IconButton
+											aria-label='upload image'
+											component='label'
+											className={`${classNamePrefix}-edit`}
+										>
+											<input
+												hidden
+												accept='image/*'
+												type='file'
+												onChange={e => {
+												
+													setLocalFile(URL.createObjectURL(e.target.files[0]))
+
+													if(onChange) {
+														onChange(e.target.files[0])
+													}
+													
+												}}
+											/>
+										
+											<Edit
+												style={{ opacity: '0.6' }}
+											/>
+										</IconButton>
+									</div>
+}
+
+export default SingleImageUploader;

package/src/components/currency/Format.tsx

@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from 'react';
+import { useRecordContext } from 'react-admin';
+import { TextField } from '@mui/material';
+import { useWatch } from 'react-hook-form';
+import numeral from 'numeral';
+import { IDashAutoAdminCustomFieldComponent } from 'dash-auto-admin';
+
+interface IData {
+	[key: string]: any;
+}
+
+const ComponentView: React.FC<IDashAutoAdminCustomFieldComponent> = ({
+	method,
+	attribute,
+}) => {
+	const data: IData = useRecordContext();
+
+	return <></>;
+};
+
+const ComponentEdit: React.FC<IDashAutoAdminCustomFieldComponent> = ({
+	method,
+	attribute,
+}) => {
+	const [rawText, setRawText] = useState('');
+	const [formattedNumber, setFormattedNumber] = useState('0');
+	const data: IData = useRecordContext();
+
+	const format = useWatch({ name: 'format' });
+	const symbol = useWatch({ name: 'symbol' });
+
+	const formatNumber = (value) => {
+		try {
+			setRawText(value);
+			const vall = !format ? value : numeral(value).format(format);
+			setFormattedNumber(symbol ? symbol + vall : vall);
+		} catch (error) {
+			console.log(error);
+			return 0;
+		}
+	};
+
+	useEffect(() => {
+		formatNumber(rawText);
+	}, [format, symbol]);
+
+	return (
+		<>
+			<TextField
+				label='Probar formateo'
+				value={rawText}
+				onChange={({ target: { value } }) => formatNumber(value)}
+			/>
+			<TextField
+				label='Valor formateado'
+				value={formattedNumber}
+				inputProps={{ readOnly: true }}
+			/>
+		</>
+	);
+};
+
+const FormatCurrency = ({
+	method,
+	attribute,
+	resourceConfig,
+}: IDashAutoAdminCustomFieldComponent) => {
+	switch (method) {
+		case 'edit':
+		case 'create':
+			return <ComponentEdit attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+		case 'view':
+			return <ComponentView attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+	}
+};
+
+export default FormatCurrency;

package/src/components/custom/Redirect.tsx

@@ -0,0 +1,23 @@
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export interface IRedirect {
+	path: string;
+    timer?: number
+}
+const Redirect: React.FC<IRedirect> = ({ path, timer }) => {
+	const navigate = useNavigate();
+	useEffect(() => {
+        if(timer) {
+          setTimeout(() => {
+                    navigate(path);
+                }, 10);
+        } else {
+        
+		navigate(path);
+        }
+	}, []);
+	return <></>;
+};
+
+export default Redirect;

package/src/components/error/Error.tsx

@@ -0,0 +1,168 @@
+import { ComponentType, ErrorInfo, Fragment, HtmlHTMLAttributes } from 'react';
+import { FallbackProps } from 'react-error-boundary';
+import { styled } from '@mui/material/styles';
+import PropTypes from 'prop-types';
+import {
+	Button,
+	Accordion,
+	AccordionDetails,
+	AccordionSummary,
+	Typography,
+} from '@mui/material';
+import ErrorIcon from '@mui/icons-material/Report';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import History from '@mui/icons-material/History';
+import { useTranslate } from 'react-admin';
+import { useResetErrorBoundaryOnLocationChange } from 'react-admin';
+import { Title } from 'react-admin';
+
+export const Error = (
+	props: InternalErrorProps & {
+		errorComponent?: ComponentType<ErrorProps>;
+	},
+) => {
+	const {
+		error,
+		errorComponent: ErrorComponent,
+		errorInfo,
+		resetErrorBoundary,
+		className,
+		title,
+		...rest
+	} = props;
+
+	const translate = useTranslate();
+	useResetErrorBoundaryOnLocationChange(resetErrorBoundary);
+
+	if (ErrorComponent) {
+		return <ErrorComponent error={error} errorInfo={errorInfo} title={title} />;
+	}
+
+	return (
+		<Fragment>
+			{title && <Title title={title} />}
+			<Root className={className} {...rest}>
+				<h1 className={ErrorClasses.title} role='alert'>
+					<ErrorIcon className={ErrorClasses.icon} />
+					{translate('ra.page.error')}
+				</h1>
+				<div>{translate('ra.message.error')}</div>
+				{/* @ts-ignore */}
+				{process.env.NODE_ENV !== 'production' && (
+					<>
+						<Accordion className={ErrorClasses.panel}>
+							<AccordionSummary
+								expandIcon={<ExpandMoreIcon />}
+								className={ErrorClasses.panelSumary}
+							>
+								{translate(error.message, {
+									_: error.message,
+								})}
+							</AccordionSummary>
+							<AccordionDetails className={ErrorClasses.panelDetails}>
+								{/*
+                                    error message is repeated here to allow users to copy it. AccordionSummary doesn't support text selection.
+                                */}
+								<p>
+									{translate(error.message, {
+										_: error.message,
+									})}
+								</p>
+								<p>{errorInfo?.componentStack}</p>
+							</AccordionDetails>
+						</Accordion>
+					</>
+				)}
+				<div className={ErrorClasses.toolbar}>
+					<Button variant='contained' startIcon={<History />} onClick={goBack}>
+						{translate('ra.action.back')}
+					</Button>
+				</div>
+			</Root>
+		</Fragment>
+	);
+};
+
+Error.propTypes = {
+	className: PropTypes.string,
+	error: PropTypes.object.isRequired,
+	errorInfo: PropTypes.object,
+	title: PropTypes.string,
+};
+
+interface InternalErrorProps
+	extends Omit<HtmlHTMLAttributes<HTMLDivElement>, 'title'>,
+		FallbackProps,
+		ErrorProps {
+	className?: string;
+}
+
+export interface ErrorProps extends Pick<FallbackProps, 'error'> {
+	errorInfo?: ErrorInfo;
+	//title?: TitleComponent;
+	title?: any;
+}
+
+const PREFIX = 'RaError';
+
+export const ErrorClasses = {
+	container: `${PREFIX}-container`,
+	title: `${PREFIX}-title`,
+	icon: `${PREFIX}-icon`,
+	panel: `${PREFIX}-panel`,
+	panelSumary: `${PREFIX}-panelSumary`,
+	panelDetails: `${PREFIX}-panelDetails`,
+	toolbar: `${PREFIX}-toolbar`,
+	advice: `${PREFIX}-advice`,
+};
+
+const Root = styled('div', {
+	name: PREFIX,
+	overridesResolver: (props, styles) => styles.root,
+})(({ theme }) => ({
+	display: 'flex',
+	flexDirection: 'column',
+	alignItems: 'center',
+	justifyContent: 'center',
+	[theme.breakpoints.down('md')]: {
+		padding: '1em',
+	},
+	fontFamily: 'Roboto, sans-serif',
+	opacity: 0.5,
+
+	[`& .${ErrorClasses.title}`]: {
+		display: 'flex',
+		alignItems: 'center',
+	},
+
+	[`& .${ErrorClasses.icon}`]: {
+		width: '2em',
+		height: '2em',
+		marginRight: '0.5em',
+	},
+
+	[`& .${ErrorClasses.panel}`]: {
+		marginTop: '1em',
+		maxWidth: '60em',
+	},
+
+	[`& .${ErrorClasses.panelSumary}`]: {
+		userSelect: 'all',
+	},
+
+	[`& .${ErrorClasses.panelDetails}`]: {
+		whiteSpace: 'pre-wrap',
+	},
+
+	[`& .${ErrorClasses.toolbar}`]: {
+		marginTop: '2em',
+	},
+
+	[`& .${ErrorClasses.advice}`]: {
+		marginTop: '2em',
+	},
+}));
+
+function goBack() {
+	window.history.go(-1);
+}

package/src/components/geocoding/GeocodingField.tsx

@@ -0,0 +1,167 @@
+import React, { useEffect, useState } from 'react';
+import { TextInput, TextField as RATextField } from 'react-admin';
+import { useRecordContext } from 'react-admin';
+import PlacesAutocomplete, {
+	geocodeByAddress,
+} from 'react-places-autocomplete';
+import { useController } from 'react-hook-form';
+
+import { TextField as MUITextField } from '@mui/material';
+import { IDashAutoAdminCustomFieldComponent } from 'dash-auto-admin';
+
+const GeocodingFieldView: React.FC<IDashAutoAdminCustomFieldComponent> = ({
+	method,
+	attribute,
+	resourceConfig,
+}) => {
+	const record = useRecordContext();
+	// return <>{record.geocoded_address}</>
+	return (
+		<RATextField
+			label={attribute.label}
+			source={attribute.attribute}
+			/* @ts-ignore */
+            options={attribute.fieldProps}
+		/>
+	);
+};
+
+const GeocodingFieldEdit: React.FC<IDashAutoAdminCustomFieldComponent> = ({
+	method,
+	attribute,
+}) => {
+	const [address, setAddress] = useState('');
+	const record = useRecordContext();
+
+	const searchOptions = {
+		componentRestrictions: { country: 'CL' },
+		/* @ts-ignore */
+		location: new google.maps.LatLng(-34, 151),
+		radius: 2000,
+		types: ['address'],
+	};
+
+	/*const {field: { onChange, onBlur, name, value, ref } } = useController({
+        name: attribute.listAttribute,
+        // rules: { required: true },
+        defaultValue: "",
+    });*/
+
+	const addressFormField = useController({
+		name: attribute.attribute,
+		// rules: { required: true },
+		defaultValue: '',
+	});
+
+	const handleSelect = (address) => {
+		// clearErrors(name)
+		geocodeByAddress(address)
+			.then((results) => {
+				// if(!results[0].address_components[0].types.includes("street_number"))
+				//     setError(name, {type: 'custom', message: 'No es una direccion valida'});
+				// else
+				//     setInputError(false)
+				addressFormField.field.onChange(JSON.stringify(results[0]));
+				setAddress(results[0].formatted_address);
+			})
+			.catch((error) => console.error('Error', error));
+	};
+
+	//const addressFormField = useController({ name: attribute.attribute });
+	useEffect(() => {
+		record?.geocoded_address && setAddress(record.geocoded_address);
+	}, [record]);
+
+	return (
+		<PlacesAutocomplete
+			value={address}
+			onChange={(address) => setAddress(address)}
+			onSelect={(selected) => handleSelect(selected)}
+			searchOptions={searchOptions}
+		>
+			{({ getInputProps, suggestions, getSuggestionItemProps, loading }) => {
+				return (
+					<div className='form__item'>
+						<div className='form__item__icon'>
+							{/*<TextInput
+                        defaultValue={address}
+                        label={attribute.label}
+                        source={attribute.attribute}
+                        options={{...attribute.fieldProps}}
+                        {...getInputProps({})}
+                    />*/}
+
+							<MUITextField
+								//id={attribute.attribute}
+								label={attribute.label}
+								{...addressFormField.field}
+								{...getInputProps({
+									placeholder: attribute.label,
+									className: `input location-search-input`,
+								})}
+                                /* @ts-ignore */
+								options={{ ...attribute.fieldProps }}
+								autoComplete='off'
+								defaultValue={address}
+								variant='filled'
+							/>
+
+							{/*
+                    <input 
+                        name={attribute.attribute} 
+                       
+                        value={address} 
+                        {...getInputProps({
+                            placeholder: attribute.label,
+                            className: `input location-search-input`,
+                        })}
+                        autoComplete='off'
+                    />*/}
+						</div>
+						<div className='autocomplete-dropdown-container'>
+							{loading && <div>Cargando...</div>}
+							{suggestions.map((suggestion, key) => {
+								const className = suggestion.active
+									? 'suggestion-item--active'
+									: 'suggestion-item';
+								// inline style for demonstration purpose
+								const style = suggestion.active
+									? { backgroundColor: '#fafafa', cursor: 'pointer' }
+									: { backgroundColor: '#ffffff', cursor: 'pointer' };
+								return (
+									<div
+										{...getSuggestionItemProps(suggestion, {
+											className,
+											style,
+										})}
+										key={key}
+									>
+										<span>{suggestion.description}</span>
+									</div>
+								);
+							})}
+						</div>
+					</div>
+				);
+			}}
+		</PlacesAutocomplete>
+	);
+
+	// <TextInput label={attribute.label} source={attribute.attribute} options={attribute.fieldProps} />
+};
+
+const GeocodingField = ({
+	method,
+	attribute,
+	resourceConfig,
+}: IDashAutoAdminCustomFieldComponent) => {
+	switch (method) {
+		case 'edit':
+		case 'create':
+			return <GeocodingFieldEdit attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+		case 'view':
+			return <GeocodingFieldView attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+	}
+};
+
+export default GeocodingField;