@dashadmin/dash-components 1.3.24 → 1.3.26

package/src/components/SortableDataGrid/SortableDataGridHeader.tsx

@@ -0,0 +1,171 @@
+import * as React from 'react';
+import { Children, isValidElement, useCallback } from 'react';
+
+import {
+    useListContext,
+    useResourceContext,
+    /*	
+    Identifier,
+    RaRecord,
+    SortPayload,
+    useTranslate,
+    */
+} from 'react-admin';
+
+import { Checkbox, TableCell, TableHead, TableRow } from '@mui/material';
+import clsx from 'clsx';
+import {
+    DatagridClasses,
+    DatagridHeader,
+    DatagridHeaderCell,
+    DatagridHeaderProps,
+    useDatagridContext,
+    useTranslate,
+} from 'react-admin';
+import MenuIcon from '@mui/icons-material/Menu';
+
+/**
+ * The default Datagrid Header component.
+ *
+ * Renders select all checkbox as well as column header buttons used for sorting.
+ */
+export interface SortableDatagridHeaderProps extends DatagridHeaderProps {
+    hasSort?: boolean;
+}
+
+export const SortableDatagridHeader = (props: SortableDatagridHeaderProps) => {
+    const {
+        children,
+        className,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+        hasExpand = false,
+        hasSort = true,
+        hasBulkActions = false,
+        isRowSelectable,
+    } = props;
+
+    {/* @ts-ignore */}
+    const resource = useResourceContext(props);
+    const translate = useTranslate();
+        {/* @ts-ignore */}
+    const { sort, data, onSelect, selectedIds, setSort } = useListContext(props);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+    const { expandSingle } = useDatagridContext();
+
+    const updateSortCallback = useCallback(
+        (event) => {
+            event.stopPropagation();
+            const newField = event.currentTarget.dataset.field;
+            const newOrder =
+                sort.field === newField
+                    ? sort.order && sort.order.toLocaleLowerCase() === 'asc'
+                        ? 'ASC'
+                        : 'DESC'
+                    : event.currentTarget.dataset.order;
+
+            setSort({ field: newField, order: newOrder });
+        },
+        [sort.field, sort.order, setSort],
+    );
+
+    const updateSort = setSort ? updateSortCallback : null;
+
+    const handleSelectAll = useCallback(
+        (event) =>
+            onSelect(
+                event.target.checked
+                    ? selectedIds.concat(
+                        data
+                            .filter((record) => !selectedIds.includes(record.id))
+                            .filter((record) =>
+                                isRowSelectable ? isRowSelectable(record) : true,
+                            )
+                            .map((record) => record.id))
+                    : [],
+            ),
+        [data, onSelect, isRowSelectable, selectedIds],
+    );
+
+    const selectableIds = Array.isArray(data)
+        ? isRowSelectable
+            ? data
+                .filter((record) => isRowSelectable(record))
+                .map((record) => record.id)
+            : data.map((record) => record.id)
+        : [];
+
+    return (
+        <TableHead className={clsx(className, DatagridClasses.thead)}>
+            <TableRow
+                className={clsx(DatagridClasses.row, DatagridClasses.headerRow)}
+            >
+                {hasSort && (
+                    <TableCell
+                        padding='none'
+                        className={clsx(
+                            DatagridClasses.headerCell,
+                            DatagridClasses.expandHeader,
+                        )}
+                    >
+                        <MenuIcon sx={{ cursor: 'pointer' }} className='handle' />
+                    </TableCell>
+                )}
+                {/*hasExpand && (
+                    <TableCell
+                        padding="none"
+                        className={clsx(
+                            DatagridClasses.headerCell,
+                            DatagridClasses.expandHeader
+                        )}
+                    >
+                        {!expandSingle ? (
+                            <ExpandAllButton
+                                resource={resource}
+                                ids={data.map(record => record.id)}
+                            />
+                        ) : null}
+                    </TableCell>
+                )*/}
+                {hasBulkActions && selectedIds && (
+                    <TableCell padding='checkbox' className={DatagridClasses.headerCell}>
+                        <Checkbox
+                            aria-label={translate('ra.action.select_all', {
+                                _: 'Select all',
+                            })}
+                            className='select-all'
+                            color='primary'
+                            checked={
+                                selectedIds.length > 0 &&
+                                selectableIds.length > 0 &&
+                                selectableIds.every((id) => selectedIds.includes(id))
+                            }
+                            onChange={handleSelectAll}
+                        />
+                    </TableCell>
+                )}
+                {Children.map(children, (field, index) =>
+                    isValidElement(field) ? (
+                        <DatagridHeaderCell
+                            className={clsx(
+                                DatagridClasses.headerCell,
+                                `column-${(field.props as any).source}`,
+                            )}
+                            sort={sort}
+                            field={field}
+                            isSorting={
+                                sort.field ===
+                                ((field.props as any).sortBy || (field.props as any).source)
+                            }
+                            key={(field.props as any).source || index}
+                                /* @ts-ignore */
+                            resource={resource}
+                            updateSort={updateSort}
+                        />
+                    ) : null,
+                )}
+            </TableRow>
+        </TableHead>
+    );
+};
+
+DatagridHeader.displayName = 'DatagridHeader';

package/src/components/SortableDataGrid/SortableDataGridRow.tsx

@@ -0,0 +1,247 @@
+import React, {
+    isValidElement,
+    cloneElement,
+    createElement,
+    useState,
+    useEffect,
+    useCallback,
+    memo,
+    FC,
+} from 'react';
+import { isElement } from 'react-is';
+import clsx from 'clsx';
+import { TableCell, TableRow, Checkbox } from '@mui/material';
+import {
+    RecordContextProvider,
+    shallowEqual,
+    useExpanded,
+    useResourceContext,
+    useTranslate,
+    useCreatePath,
+    useRecordContext,
+} from 'react-admin';
+import { useNavigate } from 'react-router-dom';
+import {
+    DatagridCell,
+    DatagridClasses,
+    DatagridRow,
+    DatagridRowProps,
+    ExpandRowButton,
+    useDatagridContext,
+} from 'react-admin';
+import MenuIcon from '@mui/icons-material/Menu';
+
+const computeNbColumns = (expand, children, hasBulkActions) =>
+    expand
+        ? 1 + // show expand button
+        (hasBulkActions ? 1 : 0) + // checkbox column
+        React.Children.toArray(children).filter((child) => !!child).length // non-null children
+        : 0; // we don't need to compute columns if there is no expand panel;
+
+const SortableDatagridRow: FC<DatagridRowProps> = React.forwardRef(
+    (props, ref) => {
+        const {
+            children,
+            className,
+            expand,
+            hasBulkActions = false,
+            hover = true,
+            id,
+            onToggleItem,
+            record: recordOverride,
+            rowClick,
+            selected = false,
+            style,
+            selectable = true,
+            ...rest
+        } = props;
+
+        const context = useDatagridContext();
+        const translate = useTranslate();
+        const record = useRecordContext(props);
+        const expandable =
+            (!context ||
+                !context.isRowExpandable ||
+                context.isRowExpandable(record)) &&
+            expand;
+        const resource = useResourceContext(props);
+        const createPath = useCreatePath();
+        const [expanded, toggleExpanded] = useExpanded(
+            resource,
+            id,
+            context && context.expandSingle,
+        );
+        const [nbColumns, setNbColumns] = useState(() =>
+            computeNbColumns(expandable, children, hasBulkActions),
+        );
+        useEffect(() => {
+            // Fields can be hidden dynamically based on permissions;
+            // The expand panel must span over the remaining columns
+            // So we must recompute the number of columns to span on
+            const newNbColumns = computeNbColumns(
+                expandable,
+                children,
+                hasBulkActions,
+            );
+            if (newNbColumns !== nbColumns) {
+                setNbColumns(newNbColumns);
+            }
+        }, [expandable, nbColumns, children, hasBulkActions]);
+
+        const navigate = useNavigate();
+
+        const handleToggleExpand = useCallback(
+            (event) => {
+                toggleExpanded();
+                event.stopPropagation();
+            },
+            [toggleExpanded],
+        );
+        const handleToggleSelection = useCallback(
+            (event) => {
+                if (!selectable) return;
+                onToggleItem(id, event);
+                event.stopPropagation();
+            },
+            [id, onToggleItem, selectable],
+        );
+        const handleClick = useCallback(
+            async (event) => {
+                event.persist();
+                const type =
+                    typeof rowClick === 'function'
+                        ? await rowClick(id, resource, record)
+                        : rowClick;
+                if (type === false || type === null) {
+                    return;
+                }
+                if (['edit', 'show'].includes(type)) {
+                    navigate(createPath({ resource, id, type }));
+                    return;
+                }
+                if (type === 'expand') {
+                    handleToggleExpand(event);
+                    return;
+                }
+                if (type === 'toggleSelection') {
+                    handleToggleSelection(event);
+                    return;
+                }
+                navigate(type);
+            },
+            [
+                rowClick,
+                id,
+                resource,
+                record,
+                navigate,
+                createPath,
+                handleToggleExpand,
+                handleToggleSelection,
+            ],
+        );
+
+        return (
+            <RecordContextProvider value={record}>
+                {/* @ts-ignore */}
+                <TableRow
+                    ref={ref}
+                    className={clsx(className, {
+                        [DatagridClasses.expandable]: expandable,
+                        [DatagridClasses.selectable]: selectable,
+                        [DatagridClasses.clickableRow]:
+                            typeof rowClick === 'function' ? true : rowClick,
+                    })}
+                    key={id}
+                    style={style}
+                    hover={hover}
+                    onClick={handleClick}
+                    {...rest}
+                >
+                    <TableCell key={'drag'}>
+                        <MenuIcon sx={{ cursor: 'pointer' }} className='handle' />
+                    </TableCell>
+                    {expand && (
+                        <TableCell
+                            padding='none'
+                            className={DatagridClasses.expandIconCell}
+                        >
+                            {expandable && (
+                                <ExpandRowButton
+                                    className={clsx(DatagridClasses.expandIcon, {
+                                        [DatagridClasses.expanded]: expanded,
+                                    })}
+                                    expanded={expanded}
+                                    onClick={handleToggleExpand}
+                                    expandContentId={`${id}-expand`}
+                                />
+                            )}
+                        </TableCell>
+                    )}
+                    {hasBulkActions && (
+                        <TableCell padding='checkbox'>
+                            <Checkbox
+                                aria-label={translate('ra.action.select_row', {
+                                    _: 'Select this row',
+                                })}
+                                color='primary'
+                                className={`select-item ${DatagridClasses.checkbox}`}
+                                checked={selectable && selected}
+                                onClick={handleToggleSelection}
+                                disabled={!selectable}
+                            />
+                        </TableCell>
+                    )}
+                    {React.Children.map(children, (field, index) =>
+                        isValidElement(field) ? (
+                            <DatagridCell
+                                key={`${id}-${(field.props as any).source || index}`}
+                                className={clsx(
+                                    `column-${(field.props as any).source}`,
+                                    DatagridClasses.rowCell,
+                                )}
+                                record={record}
+                                {...{ field, resource }}
+                            />
+                        ) : null,
+                    )}
+                </TableRow>
+                {expandable && expanded && (
+                    <TableRow
+                        key={`${id}-expand`}
+                        id={`${id}-expand`}
+                        className={DatagridClasses.expandedPanel}
+                    >
+                        <TableCell colSpan={nbColumns}>
+                            {isElement(expand)
+                            /*  @ts-ignore */
+                                ? cloneElement(expand, {
+                                    record,
+                                    resource,
+                                    id: String(id),
+                                })
+                                  /*  @ts-ignore */
+                                : createElement(expand, {
+                                    record,
+                                    resource,
+                                    id: String(id),
+                                })}
+                        </TableCell>
+                    </TableRow>
+                )}
+            </RecordContextProvider>
+        );
+    },
+);
+
+const areEqual = (prevProps, nextProps) => {
+    const { children: _1, expand: _2, ...prevPropsWithoutChildren } = prevProps;
+    const { children: _3, expand: _4, ...nextPropsWithoutChildren } = nextProps;
+    return shallowEqual(prevPropsWithoutChildren, nextPropsWithoutChildren);
+};
+
+export const PureDatagridRow = memo(DatagridRow, areEqual);
+
+PureDatagridRow.displayName = 'PureDatagridRow';
+
+export default SortableDatagridRow;

package/src/components/Upload/SingleImageUploader.tsx

@@ -0,0 +1,55 @@
+import { IconButton } from '@mui/material';
+import { FC, useState } from 'react';
+import { Upload } from '@mui/icons-material';
+
+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`}
+		>
+            <Upload style={{ opacity: '0.6' }} />
+
+			<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/custom/PackageCopyMethod.tsx

@@ -0,0 +1,109 @@
+import {
+	RadioGroup,
+	ListItem,
+	ListItemText,
+	Button,
+	List,
+} from '@mui/material';
+import { FC, useState, useEffect } from 'react';
+import { UseFormGetValues, UseFormSetValue } from 'react-hook-form';
+import { IPackagePayload } from 'dash-interfaces';
+import { AppDialogOptions } from 'dash-dialog/src/IAppDialogProps';
+
+export interface IPackageCopyMethod {
+	defaultCopyMethod: number;
+	dialog: (options: AppDialogOptions) => void;
+	sendPackage: (data: any) => Promise<void>;
+	resetExtraPayloadFlagsAfterSubmit: () => void;
+	getValues: UseFormGetValues<IPackagePayload>;
+	setValue: UseFormSetValue<IPackagePayload>;
+	onChange?: (copy_method: number) => void;
+}
+
+const PackageCopyMethod: FC<IPackageCopyMethod> = (props) => {
+	const {
+		onChange,
+		defaultCopyMethod,
+		dialog,
+		sendPackage,
+		resetExtraPayloadFlagsAfterSubmit,
+		getValues,
+		setValue,
+	} = props;
+
+	const [selectedCopyMethod, setSelectedCopyMethod] = useState<number>();
+
+	/**
+	 * "copy_method" = 1: solo botón que indique "Ingresar Nuevamente" ya que este paquete fue antes duplicado
+	 * "copy_method" = 2: debe haber un boton que indique "Ingresar Nuevamente"  y otro que indique "Duplicado"
+	 * Ambos botones deben enviar de nuevo el formulario pero con el nuevo input "copy_method" segun el boton presionado
+	 */
+
+	useEffect(() => {
+		if (onChange) { onChange(selectedCopyMethod); }
+	}, [selectedCopyMethod]);
+
+	const selectCopyMethod = (copy_method: number) => {
+		setValue('copy_method', copy_method);
+		setSelectedCopyMethod(copy_method);
+	};
+
+	return (
+		<RadioGroup
+			aria-labelledby='copy-method-selection-label'
+			defaultValue={defaultCopyMethod}
+			name='copy-method-selection'
+		>
+			<List>
+				<ListItem key={'copy_method_1'}>
+					<ListItemText
+						primary={
+							<Button
+								onClick={() => {
+									selectCopyMethod(1);
+									/** sendPackage with current react hook form values, instead of default formSubmit event */
+									sendPackage(getValues());
+									/** resets copy_method & high_value possible updated form state props in dialog */
+									resetExtraPayloadFlagsAfterSubmit();
+									dialog(null);
+								}}
+							>
+								Ingresar Nuevamente
+							</Button>
+						}
+					/>
+				</ListItem>
+
+				<ListItem key={'copy_method_2'}>
+					{/*<Radio
+              onChange={(e) =>
+                selectCopyMethod(e.target.value as unknown as number)
+              }
+              value={2}
+              name="copy-method-selection"
+              inputProps={{ "aria-label": "2" }}
+            />*/}
+
+					<ListItemText
+						primary={
+							<Button
+								onClick={() => {
+									selectCopyMethod(2);
+									/** sendPackage with current react hook form values, instead of default formSubmit event */
+									sendPackage(getValues());
+									/** resets copy_method & high_value possible updated form state props in dialog */
+									resetExtraPayloadFlagsAfterSubmit();
+									dialog(null);
+								}}
+							>
+								Duplicado
+							</Button>
+						}
+					/>
+				</ListItem>
+			</List>
+		</RadioGroup>
+	);
+};
+
+export default PackageCopyMethod;

package/src/components/custom/PackageRadioButtonGroup.tsx

@@ -0,0 +1,47 @@
+
+import { RadioGroup, ListItem, ListItemText, Radio, List } from '@mui/material';
+import { FC, useState } from 'react';
+import { IPackage } from 'dash-interfaces';
+export interface IPackagesRadioButtonsGroup {
+	packages: IPackage[];
+	onChange?: (value: string) => void;
+}
+
+const PackagesRadioButtonsGroup: FC<IPackagesRadioButtonsGroup> = (props) => {
+	const { packages, onChange } = props;
+	const [value, setValue] = useState<string>(null);
+
+	const handleChange = (event:any) => {
+		setValue(event.target.value);
+		if (onChange) { onChange(event.target.value); }
+	};
+
+	return (
+		<RadioGroup
+			aria-labelledby='package-selection-label'
+			name='package-selection'
+		>
+			<List>
+				{packages.map((p, index) => {
+					return (
+						<ListItem key={index}>
+							<Radio
+								checked={value === p.id.toString()}
+								onChange={handleChange}
+								value={p.id}
+								name='package-selection'
+								inputProps={{ 'aria-label': p.id.toString() }}
+							/>
+							<ListItemText
+								primary={p.id}
+								secondary={`Internal Id: ${p.internal_id}, Dirección: ${p.delivery_address}`}
+							/>
+						</ListItem>
+					);
+				})}
+			</List>
+		</RadioGroup>
+	);
+};
+
+export default PackagesRadioButtonsGroup;

package/src/components/dialog/Basic.tsx

@@ -0,0 +1,11 @@
+const DialogBasic = () => {
+	return (
+		<span>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ante est,
+			hendrerit quis bibendum eget, sodales vitae libero. Mauris a dolor vel
+			neque euismod tempor.
+		</span>
+	);
+};
+
+export default DialogBasic;

package/src/components/dialog/Correct.tsx

@@ -0,0 +1,16 @@
+
+const DialogCorrect = () => {
+	return (
+		<>
+			<p>
+				<strong>Paquete ingresado correctamente</strong>
+			</p>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra
+				libero vitae cursus gravida,{' '}
+			</p>
+		</>
+	);
+};
+
+export default DialogCorrect;

package/src/components/dialog/Error.tsx

@@ -0,0 +1,15 @@
+const DialogError = () => {
+	return (
+		<>
+			<p>
+				<strong>El paquete no pudo ser ingresado</strong>
+			</p>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra
+				libero vitae cursus gravida,{' '}
+			</p>
+		</>
+	);
+};
+
+export default DialogError;

package/src/components/dialog/Info.tsx

@@ -0,0 +1,15 @@
+const DialogInfo = () => {
+	return (
+		<>
+			<p>
+				<strong>Despachos realizados</strong>
+			</p>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra
+				libero vitae cursus gravida,{' '}
+			</p>
+		</>
+	);
+};
+
+export default DialogInfo;