@arquimedes.co/eureka-forms 2.0.32 → 2.0.34-test

package/src/FormSteps/FileUploadStep/MaterialFileUploadStep/FileComponent/FileComponent.tsx

@@ -0,0 +1,142 @@
+import {
+    FileObject,
+    UploadedFileObject,
+    isUploadedFileObject,
+} from '../MaterialFileUploadStep';
+import styles from './FileComponent.module.css';
+import ClearRoundedIcon from '@material-ui/icons/ClearRounded';
+import DescriptionRoundedIcon from '@material-ui/icons/DescriptionRounded';
+import ErrorRoundedIcon from '@material-ui/icons/ErrorRounded';
+import Loader from '../../../../Shared/Loader/Loader';
+import { FormStyle } from '../../../../@Types/Form';
+import { useState } from 'react';
+
+interface FileComponentProps {
+    file: FileObject | UploadedFileObject;
+    formStyle: FormStyle;
+    error: boolean;
+    handleRemove: () => void;
+    /** Function to call on postview to fetch the download url of a file */
+    fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
+}
+
+function FileUploadComponent({
+    file,
+    formStyle,
+    error,
+    handleRemove,
+    fetchDownloadUrl,
+}: FileComponentProps): JSX.Element {
+    const [downloading, setDownloading] = useState(false);
+    if (!file) {
+        return <div></div>;
+    }
+
+    const downloadFile = async (): Promise<void> => {
+        if (fetchDownloadUrl && file.S3Key && file.fileName) {
+            try {
+                setDownloading(true);
+                const fileUrl = await fetchDownloadUrl(
+                    file.S3Key,
+                    file.fileName
+                );
+                const a = document.createElement('a');
+                a.href = fileUrl;
+                a.setAttribute('download', file.fileName);
+                a.click();
+                setDownloading(false);
+            } catch (error) {
+                console.error(error);
+            }
+        }
+    };
+
+    const calcIcon = (): JSX.Element => {
+        if (downloading) {
+            return (
+                <div className={styles.loaderContainer}>
+                    <Loader size={26} color={formStyle.primaryColor} />
+                </div>
+            );
+        } else if ((file as FileObject).state !== undefined) {
+            switch ((file as FileObject).state) {
+                case 'STARTING':
+                case 'UPLOADING':
+                    return (
+                        <div className={styles.loaderContainer}>
+                            <Loader size={26} color={formStyle.primaryColor} />
+                        </div>
+                    );
+                case 'DONE':
+                    return (
+                        <div
+                            className={styles.documentIcon}
+                            style={{ color: formStyle.primaryColor }}
+                        >
+                            <DescriptionRoundedIcon />
+                        </div>
+                    );
+                case 'ERROR':
+                    return (
+                        <div
+                            className={styles.documentIcon}
+                            style={{ color: formStyle.errorColor }}
+                        >
+                            <ErrorRoundedIcon />
+                        </div>
+                    );
+                default:
+                    return <div></div>;
+            }
+        } else {
+            return (
+                <div
+                    className={styles.documentIcon}
+                    style={{ color: formStyle.primaryColor }}
+                >
+                    <DescriptionRoundedIcon />
+                </div>
+            );
+        }
+    };
+    return (
+        <div className={styles.container}>
+            <div className={styles.iconContainer}>{calcIcon()}</div>
+            <div
+                className={
+                    (fetchDownloadUrl && file.S3Key) ||
+                    (file as UploadedFileObject).downloadUrl
+                        ? styles.downloadableLbl
+                        : styles.label
+                }
+                style={{
+                    color: error ? formStyle.errorColor : formStyle.textColor,
+                }}
+                onClick={(): void => {
+                    if (isUploadedFileObject(file) && file.downloadUrl) {
+                        const a = document.createElement('a');
+                        a.href = file.downloadUrl;
+                        a.setAttribute('download', file.fileName);
+                        a.click();
+                    } else if (fetchDownloadUrl !== undefined && file.S3Key) {
+                        downloadFile();
+                    }
+                }}
+            >
+                {(file as FileObject).file?.name ?? file.fileName}
+            </div>
+            <div
+                className={styles.deletBtn}
+                onClick={(): void => {
+                    handleRemove();
+                }}
+            >
+                {(file as FileObject).state !== undefined && (
+                    <ClearRoundedIcon fontSize="inherit" />
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default FileUploadComponent;

package/src/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.module.css

@@ -0,0 +1,52 @@
+.container {
+    width: fit-content;
+    max-width: calc(100% - 20px);
+    display: flex;
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 5px;
+    margin-bottom: 0px;
+    width: 100%;
+    flex-direction: column;
+}
+
+.labelLabel {
+    font-size: 16px;
+    margin-left: 8px;
+    margin-bottom: 5px;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.stepDescriptionLabel {
+    font-size: 0.75rem;
+    margin-left: 14px;
+    margin-top: -4px;
+    font-weight: 400;
+    line-height: 1.66;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.filesInput {
+    display: none;
+}
+.btnContainer {
+    margin-top: 5px;
+    margin-left: 10px;
+    margin-bottom: 3px;
+    width: fit-content;
+}
+.errorMsg {
+    font-size: 0.75rem;
+    margin-top: 5px;
+    margin-left: 14px;
+}
+
+.filesContainer {
+    padding-top: 5px;
+}

package/src/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.tsx

@@ -0,0 +1,294 @@
+import styles from './MaterialFileUploadStep.module.css';
+import { useFormContext } from 'react-hook-form';
+import RoundedButton from '../../../Shared/RoundedButton/RoundedButton';
+import { useContext, useEffect, useRef, useState } from 'react';
+import { getAcceptedExtensions } from '../../../constants/Files/FileExtensions';
+import { getUploadUrls, postFile } from '../../../Services/FileService';
+import FileComponent from './FileComponent/FileComponent';
+import { FileUploadStepProps } from '../FileUploadStep';
+import maxSize from '../../../constants/Files/FileMaxSize';
+import { useAppSelector } from '../../../hooks';
+import CustomContext from '../../../Contexts/CustomContext';
+import { useFormStep } from '../../StepHooks';
+export interface FileObject {
+    state: 'STARTING' | 'UPLOADING' | 'DONE' | 'CANCEL' | 'ERROR';
+    file: File;
+    postInfo: any;
+    fileName?: string;
+    S3Key?: string;
+    error?: boolean;
+}
+export interface UploadedFileObject {
+    fileName: string;
+    S3Key: string;
+    downloadUrl?: string;
+}
+
+export function isUploadedFileObject(
+    file: UploadedFileObject | FileObject
+): file is UploadedFileObject {
+    return (file as FileObject).state === undefined && file.S3Key !== undefined;
+}
+
+function FileUploadStep({ step, editable }: FileUploadStepProps): JSX.Element {
+    const {
+        ref,
+        value,
+        onChange,
+        error: fieldError,
+    } = useFormStep<(FileObject | UploadedFileObject)[]>(step, {
+        defaultValue: [],
+        rules: {
+            validate: (array): boolean =>
+                ((step.required && array.length > 0) || !step.required) &&
+                array.find((file: any) => !file.S3Key) === undefined,
+        },
+    });
+
+    const { fetchDownloadUrl } = useContext(CustomContext);
+    const { formStyle, idOrganization, postview } = useAppSelector(
+        (state) => state.global
+    );
+
+    const { clearErrors } = useFormContext();
+
+    const [error, setError] = useState<string | undefined>(undefined);
+    const [fileChange, setFileChange] = useState<FileObject[]>([]);
+    const inputRef = useRef<any>();
+    useEffect(() => {
+        const filesToFetchLink = [];
+        const filesChanged = [];
+        for (const file of fileChange) {
+            if ((file as FileObject).state === 'STARTING') {
+                filesToFetchLink.push(file);
+            }
+            if ((file as FileObject).state === 'UPLOADING') {
+                uploadFile(file);
+                filesChanged.push(file);
+            }
+            if (
+                (file as FileObject).state === 'DONE' ||
+                (file as FileObject).state === 'ERROR'
+            ) {
+                filesChanged.push(file);
+            }
+            if ((file as FileObject).state === 'CANCEL') {
+                const newValue = [...value];
+                for (let i = 0; i < value.length; i++) {
+                    if ((value[i] as FileObject).file === file.file) {
+                        newValue.splice(i, 1);
+                        break;
+                    }
+                }
+                onChange(newValue);
+            }
+        }
+        if (filesChanged.length > 0) {
+            const newValue = [...value];
+            for (const file of filesChanged) {
+                for (let i = 0; i < value.length; i++) {
+                    if ((value[i] as FileObject).file === file.file) {
+                        newValue[i] = file;
+                    }
+                }
+            }
+            onChange(newValue);
+        }
+        if (filesToFetchLink.length > 0) {
+            getLinks(filesToFetchLink as FileObject[]);
+            onChange([...value, ...filesToFetchLink]);
+        }
+    }, [fileChange]);
+
+    async function getLinks(pFiles: FileObject[]): Promise<void> {
+        try {
+            const fileLinks = await getUploadUrls(
+                pFiles.map((file) => file.file),
+                idOrganization
+            );
+            const errorsExt: string[] = [];
+            setFileChange(
+                pFiles.map((file, index) => {
+                    if (fileLinks[index] === 'ERROR:INVALIDEXTENSION') {
+                        errorsExt.push(file.file.name.split('.').pop() ?? '');
+                        return { ...file, state: 'ERROR' };
+                    } else {
+                        return {
+                            ...file,
+                            state: 'UPLOADING',
+                            postInfo: fileLinks[index],
+                        };
+                    }
+                })
+            );
+            if (errorsExt.length === 1) {
+                setError('La extención .' + errorsExt[0] + ' no es válida');
+            } else if (errorsExt.length > 1) {
+                setError(
+                    'Las extenciónes .' +
+                        errorsExt.join(',.') +
+                        ' no son válidas'
+                );
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    async function uploadFile(pFile: FileObject): Promise<void> {
+        try {
+            const resp = await Promise.all([
+                postFile(pFile.file, pFile.postInfo),
+                new Promise((resolve) => setTimeout(resolve, 1000)),
+            ]);
+            setFileChange([{ ...pFile, state: 'DONE', ...resp[0] }]);
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    const calcErrorMsg = (): string => {
+        if (fieldError) {
+            const errNum = value.filter(
+                (val) => (val as FileObject).state === 'ERROR'
+            ).length;
+            if (errNum === 1) {
+                return 'Este archivo no es válido';
+            } else if (errNum > 1) {
+                return 'Estos archivos no son válidos';
+            } else {
+                return 'Este campo es obligatorio';
+            }
+        }
+        return '';
+    };
+
+    return (
+        <div
+            className={
+                styles.container + (error || !!fieldError ? ' EF-error' : '')
+            }
+            style={
+                editable === false || postview
+                    ? {}
+                    : {
+                          minHeight: '100px',
+                      }
+            }
+            data-testid={step.id}
+        >
+            <div className={styles.labelLabel}>{step.label}</div>
+            {step.description && (
+                <div
+                    className={styles.stepDescriptionLabel}
+                    style={{ color: formStyle.descriptionTextColor }}
+                >
+                    {step.description}
+                </div>
+            )}
+            <input
+                type="file"
+                ref={inputRef}
+                className={styles.filesInput}
+                onChange={(e): void => {
+                    const files = e.target.files;
+                    if (files) {
+                        const filesArray = Array.from(files);
+                        const maxFiles = filesArray.filter(
+                            (file) => file.size > maxSize
+                        );
+                        if (maxFiles.length > 0) {
+                            setError('El tamaño máximo de carga es de 30Mb.');
+                        } else {
+                            setFileChange(
+                                filesArray
+                                    .filter(
+                                        (file) =>
+                                            value.find(
+                                                (val) =>
+                                                    (val as FileObject).file ===
+                                                    file
+                                            ) === undefined
+                                    )
+                                    .map(
+                                        (file) =>
+                                            ({
+                                                state: 'STARTING',
+                                                file,
+                                                postInfo: null,
+                                            }) as FileObject
+                                    )
+                            );
+                        }
+                        inputRef.current.value = '';
+                    }
+                }}
+                multiple
+                accept={getAcceptedExtensions()}
+            />
+            <div className={styles.btnContainer}>
+                <input ref={ref} className={'hidden-input'} />
+                <RoundedButton
+                    disabled={!editable || postview}
+                    text={'Examinar' + (step.required ? ' *' : '')}
+                    color={formStyle.primaryContrastColor}
+                    backgroundColor={formStyle.primaryColor}
+                    fontSize={'1rem'}
+                    padding={'5px 15px 5px 15px'}
+                    onClick={(): void => {
+                        if (editable && !postview) {
+                            const input = inputRef.current;
+                            if (input !== null) {
+                                clearErrors(step.id);
+                                setError(undefined);
+                                input.click();
+                            }
+                        }
+                    }}
+                />
+            </div>
+            <div className={styles.filesContainer}>
+                {value.map((file, index) => (
+                    <FileComponent
+                        formStyle={formStyle}
+                        key={index}
+                        file={file}
+                        error={
+                            (!!fieldError &&
+                                (file as FileObject).state !== 'DONE') ||
+                            (file as FileObject).state === 'ERROR'
+                        }
+                        handleRemove={(): void => {
+                            if (
+                                value.filter(
+                                    (val) =>
+                                        (val as FileObject).state === 'ERROR'
+                                ).length === 1
+                            ) {
+                                clearErrors(step.id);
+                                setError(undefined);
+                            }
+                            if ((file as FileObject).state !== undefined) {
+                                setFileChange([
+                                    {
+                                        ...(file as FileObject),
+                                        state: 'CANCEL',
+                                    },
+                                ]);
+                            }
+                        }}
+                        fetchDownloadUrl={fetchDownloadUrl}
+                    />
+                ))}
+            </div>
+            <div
+                className={styles.errorMsg}
+                style={{ color: formStyle.errorColor }}
+            >
+                {error ?? calcErrorMsg()}
+            </div>
+        </div>
+    );
+}
+
+export default FileUploadStep;

package/src/FormSteps/MapperStep/MapperStep.tsx

@@ -0,0 +1,40 @@
+import { Mapper } from '../../@Types/FormStep';
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialMapperStep from './MaterialMapperStep/MaterialMapperStep';
+import { StepProps } from '../Step';
+import { useAppSelector } from '../../hooks';
+import { MapperElement } from '../../@Types/MapperElement';
+interface CustomMapperElementModifiers<Type> {
+    calcName?: (element: MapperElement<Type>) => string;
+}
+export interface MapperStepProps<Type> extends StepProps {
+    /** The MapperStep to display */
+    step: Mapper;
+    customAdd?: (
+        ref: React.RefObject<HTMLDivElement>,
+        disabled: boolean,
+        handleAddElement: (value?: any) => void
+    ) => JSX.Element;
+    customElementRender?: (
+        element: MapperElement<Type>,
+        index: number,
+        renderElement: (
+            renderElementButtons?: (element: MapperElement<any>) => JSX.Element
+        ) => JSX.Element
+    ) => JSX.Element;
+    customElementModifiers?: CustomMapperElementModifiers<Type>;
+    calcCustomStepProps?: (
+        element: MapperElement<Type>,
+        customStepProps: Record<string, any>
+    ) => Record<string, any>;
+}
+function MapperStep<Type>(props: MapperStepProps<Type>): JSX.Element {
+    const { formStyle } = useAppSelector((state) => state.global);
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return <MaterialMapperStep {...props} />;
+        }
+    }
+}
+export default MapperStep;

package/src/FormSteps/MapperStep/MaterialMapperStep/Element/ListMapperElement/ListMapperElement.module.css

@@ -0,0 +1,72 @@
+.container,
+.mobileContainer {
+    display: flex;
+    flex-direction: row;
+    width: fit-content;
+    margin-right: auto;
+    position: relative;
+    padding-top: 10px;
+    padding-bottom: 5px;
+    max-width: 100%;
+}
+.bulletContainer {
+    display: flex;
+    margin-left: 30px;
+    margin-right: 10px;
+    align-items: center;
+}
+.bullet {
+    border-width: 2px;
+    border-style: solid;
+    margin-bottom: 2px;
+    height: 20px;
+    width: 20px;
+    border-radius: 20px;
+    margin-left: 10px;
+    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); */
+}
+
+.titleLbl {
+    width: 100%;
+    height: 28px;
+    margin-right: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: default;
+    margin-bottom: 10px;
+}
+
+.title {
+    height: 28px;
+    margin-bottom: 5px;
+    margin-left: 10px;
+    font-size: 20px;
+    font-weight: 600;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+}
+
+.contentContainer {
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-flow: row wrap;
+    height: fit-content;
+    max-width: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+
+.deleteBtn,
+.disabledDeleteBtn {
+    display: flex;
+    font-size: 24px;
+    margin-right: 8px;
+    margin-left: auto;
+}
+
+.deleteBtn {
+    cursor: pointer;
+}