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

package/src/FormSteps/CollapsibleStep/MaterialTitleStep/MaterialCollapsibleStep.module.css

@@ -0,0 +1,62 @@
+.container {
+    display: flex;
+    flex-direction: row;
+    width: 900px;
+    max-width: 100%;
+    margin-top: 5px;
+    margin-bottom: 10px;
+}
+
+.collapsibleLabel {
+    margin-left: 10px;
+    font-size: 20px;
+    font-weight: 600;
+    cursor: default;
+    text-align: start;
+    cursor: pointer;
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Old versions of Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    -o-user-select: none;
+    user-select: none; /* Non-prefixed version, currently */
+}
+
+.content {
+    width: 100%;
+    overflow: hidden;
+    transition: height ease 0.9s;
+}
+
+.contentContainer {
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-flow: row wrap;
+    height: fit-content;
+    max-width: 100%;
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+.expand {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 2px;
+}
+.expandIcon {
+    height: 24px;
+    width: 24px;
+    font-size: 24px;
+    cursor: pointer;
+}
+
+.separator {
+    height: 1px;
+    width: calc(100% - 20px);
+    margin-left: 10px;
+    margin-bottom: 10px;
+    border-radius: 20px;
+}

package/src/FormSteps/CollapsibleStep/MaterialTitleStep/MaterialCollapsibleStep.tsx

@@ -0,0 +1,129 @@
+import React, { useContext, useEffect } from 'react';
+import styles from './MaterialCollapsibleStep.module.css';
+import { CollapsibleStepProps } from '../CollapsibleStep';
+import { Controller, useFormContext } from 'react-hook-form';
+import StepComponent from '../../Step';
+import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded';
+import ExpandLessRoundedIcon from '@material-ui/icons/ExpandLessRounded';
+import FormContext from '../../../Contexts/FormContext';
+import { useAppSelector } from '../../../hooks';
+function Collapsible({
+    step,
+    open,
+    setOpen,
+    ...others
+}: CollapsibleStepProps & {
+    open: boolean | 'TRUE';
+    setOpen: (open: boolean) => void;
+}): JSX.Element {
+    const { formStyle } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const {
+        formState: { errors },
+    } = useFormContext();
+    const contentRef = React.useRef<HTMLDivElement>(null);
+
+    useEffect(
+        () => {
+            if (!open && step.dependencies?.find((dep) => !!errors[dep])) {
+                setOpen(true);
+            }
+        },
+        step.dependencies?.map((dep) => errors[dep]) ?? []
+    );
+    return (
+        <React.Fragment>
+            <div
+                className={styles.container}
+                style={{
+                    color: formStyle.textColor,
+                    borderColor: formStyle.primaryColor,
+                }}
+            >
+                <div
+                    className={styles.collapsibleLabel}
+                    onClick={(): void => {
+                        setOpen(!open);
+                    }}
+                >
+                    {step.label}
+                </div>
+                <div
+                    className={styles.expand}
+                    onClick={(): void => {
+                        setOpen(!open);
+                    }}
+                >
+                    <div className={styles.expandIcon}>
+                        {open ? (
+                            <ExpandLessRoundedIcon fontSize="inherit" />
+                        ) : (
+                            <ExpandMoreRoundedIcon fontSize="inherit" />
+                        )}
+                    </div>
+                </div>
+            </div>
+            <div
+                className={styles.content}
+                style={{
+                    height:
+                        open === 'TRUE'
+                            ? 'auto'
+                            : open
+                              ? contentRef.current?.offsetHeight ?? 'auto'
+                              : 0,
+                }}
+            >
+                <div className={styles.contentContainer} ref={contentRef}>
+                    {step.steps.map((idSubStep: string) => {
+                        const subStep = form.steps[idSubStep];
+                        return (
+                            <StepComponent
+                                {...others}
+                                step={subStep}
+                                key={idSubStep}
+                            />
+                        );
+                    })}
+                </div>
+            </div>
+            <div
+                className={styles.separator}
+                style={{
+                    backgroundColor: formStyle.primaryColor,
+                }}
+            ></div>
+        </React.Fragment>
+    );
+}
+
+function CollapsibleStep(props: CollapsibleStepProps): JSX.Element {
+    const { postview } = useAppSelector((state) => state.global);
+    const {
+        clearErrors,
+        formState: { errors },
+    } = useFormContext();
+
+    return (
+        <Controller
+            name={props.step.id}
+            defaultValue={props.step.defaultValue ?? postview ? false : true}
+            render={({ field: { value, onChange } }): JSX.Element => (
+                <Collapsible
+                    {...props}
+                    open={value}
+                    setOpen={(open: boolean): void => {
+                        if (!open) {
+                            const deps = props.step.dependencies?.filter(
+                                (dep) => !!errors[dep]
+                            );
+                            if (deps) clearErrors(deps);
+                        }
+                        onChange(open);
+                    }}
+                />
+            )}
+        />
+    );
+}
+export default CollapsibleStep;

package/src/FormSteps/CustomStep.tsx

@@ -0,0 +1,57 @@
+import { StepProps } from './Step';
+import FormContext from '../Contexts/FormContext';
+import { useAppSelector } from '../hooks';
+import { Form } from '../@Types';
+import { GlobalState } from '../States/GlobalSlice';
+import CustomStepPropsContext from '../Contexts/CustomContext';
+import { useContext } from 'react';
+import { WidthStats } from '../Form/Form';
+import { StepDependency, useStepDependency } from './StepHooks';
+import { SiteState } from '../States/SiteSlice';
+
+export interface CustomStepProps
+    extends StepProps,
+        GlobalState,
+        StepDependency {
+    form: Form;
+    dependencyStore: SiteState['dependencies'];
+    customStepProps: Record<string, any>;
+    widthStats: WidthStats;
+}
+
+export interface CustomStep {
+    componentProps?: Record<string, any>;
+    component: (props: CustomStepProps) => JSX.Element;
+    calcValue?: (step: any, value: any) => any;
+    /** Function to change custom steps nested step ids to the generated ones. */
+    calcRecursiveData?: (step: any, ids: Record<string, string>) => void;
+    calcDependencyValue?: (step: any, value: any) => any;
+}
+
+interface CustomStepComponentProps extends StepProps {
+    customStep: CustomStep;
+}
+
+function CustomStepComponent({
+    customStep,
+    ...props
+}: CustomStepComponentProps): JSX.Element {
+    const form = useContext(FormContext);
+    const global = useAppSelector((state) => state.global);
+    const { customStepProps } = useContext(CustomStepPropsContext);
+    const dependencyStore = useAppSelector((state) => state.site.dependencies);
+    const widthStats = useAppSelector((state) => state.widthStats);
+    const dependencyInfo = useStepDependency(props.step, undefined);
+    return customStep.component({
+        ...global,
+        ...dependencyInfo,
+        ...props,
+        dependencyStore,
+        widthStats,
+        form,
+        customStepProps,
+        ...(customStep.componentProps ?? {}),
+    });
+}
+
+export default CustomStepComponent;

package/src/FormSteps/DatePickerStep/DatePickerStep.tsx

@@ -0,0 +1,22 @@
+import { DatePicker } from '../../@Types/FormStep';
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialDatePickerStep from './MaterialDatePickerStep/MaterialDatePickerStep';
+import { StepProps } from '../Step';
+import { useAppSelector } from '../../hooks';
+export interface DatePickerStepProps extends StepProps {
+    /** The DatePickerStep to display */
+    step: DatePicker;
+    /** Default value to display */
+    defaultValue?: Date | null;
+}
+function DatePickerStep(props: DatePickerStepProps): JSX.Element {
+    const { formStyle } = useAppSelector((state) => state.global);
+
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return <MaterialDatePickerStep {...props} />;
+        }
+    }
+}
+export default DatePickerStep;

package/src/FormSteps/DatePickerStep/MaterialDatePickerStep/MaterialDatePickerStep.tsx

@@ -0,0 +1,51 @@
+import RoundedDatePicker from '../../../Shared/RoundedDatePicker/RoundedDatePicker';
+import { DatePickerStepProps } from '../DatePickerStep';
+import { useAppSelector } from '../../../hooks';
+import { useFormStep } from '../../StepHooks';
+import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
+function DatePickerStep({
+    step,
+    editable,
+    defaultValue,
+}: DatePickerStepProps): JSX.Element {
+    const { formStyle, postview } = useAppSelector((state) => state.global);
+
+    const { ref, value, onChange, error, field } = useFormStep<
+        Date | null | undefined
+    >(step, {
+        defaultValue,
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+    });
+
+    return (
+        <MaterialInputContainer step={step} editable={editable}>
+            <RoundedDatePicker
+                {...field}
+                value={value}
+                onChange={onChange}
+                pickTime={step.pickTime}
+                clearable={!step.required}
+                clearLabel="Borrar"
+                inputRef={ref}
+                cantEdit={!editable || postview}
+                secondaryColor={formStyle.secondaryColor}
+                contrastColor={formStyle.secondaryContrastColor}
+                accentColor={formStyle.textColor}
+                focusColor={formStyle.primaryColor}
+                outlineColor={formStyle.outlineColor}
+                textColor={formStyle.textColor}
+                errorColor={formStyle.errorColor}
+                helperTextColor={formStyle.descriptionTextColor}
+                fontWeight={400}
+                label={step.label}
+                helperText={error?.message ?? step.description}
+                error={!!error}
+                required={step.required}
+            />
+        </MaterialInputContainer>
+    );
+}
+
+export default DatePickerStep;

package/src/FormSteps/EntityValueStep/EntityValuePickerStep.tsx

@@ -0,0 +1,28 @@
+import { useAppSelector } from '../../hooks';
+import { EntityValuePicker } from '../../@Types/FormStep';
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import { StepProps } from '../Step';
+import MaterialEntityValuePickerStep from './MaterialEntityValuePickerStep/MaterialEntityValuePickerStep';
+
+export interface StepOptions {
+    id: string | number;
+    label: string;
+}
+
+export interface EntityValuePickerStepProps extends StepProps {
+    /** The EntityValuePickerStep to display */
+    step: EntityValuePicker;
+    /** Default value to display */
+    defaultValue?: Date | null;
+}
+function EntityValuePickerStep(props: EntityValuePickerStepProps): JSX.Element {
+    const { formStyle } = useAppSelector((state) => state.global);
+
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return <MaterialEntityValuePickerStep {...props} />;
+        }
+    }
+}
+export default EntityValuePickerStep;

package/src/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValuePickerStep.tsx

@@ -0,0 +1,132 @@
+import React, { useContext } from 'react';
+import FormStepTypes, {
+    EntityValueDataTypes,
+    EntityValueOptionTypes,
+} from '../../../constants/FormStepTypes';
+import StepComponent from '../../Step';
+import {
+    EntityValuePickerStepProps,
+    StepOptions,
+} from '../EntityValuePickerStep';
+import SmartSelect from '../../SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep';
+import widgetInstance from '../../../Utils/AxiosWidget';
+import InputIcon from '../../../Shared/InputIcon/InputIcon';
+import FormContext from '../../../Contexts/FormContext';
+import { EntityValuePicker } from '../../../@Types/FormStep';
+import { DependencyStore } from '../../../Form/Form';
+import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
+
+function EntityValuePickerStep({
+    step,
+    editable,
+}: EntityValuePickerStepProps): JSX.Element {
+    const form = useContext(FormContext);
+
+    return (
+        <StepFillerContainer step={step}>
+            <SmartSelect
+                editable={editable}
+                step={step}
+                icon={step.icon ? <InputIcon icon={step.icon} /> : undefined}
+                getOptions={getEntityValueOptions}
+                getOptionSelected={(option, value): boolean =>
+                    option._id === value._id
+                }
+                calcDepError={(steps): string | undefined => {
+                    for (const step of steps) {
+                        if (step.type === FormStepTypes.ENTITYVALUEPICKER) {
+                            return 'Selecciona un ' + step.label;
+                        }
+                    }
+                    return undefined;
+                }}
+                getValueString={(value): string => value?._id}
+                renderNestedSteps={(value): JSX.Element => {
+                    if (!value) return <></>;
+                    const currentOption = step.options[value._id];
+                    if (currentOption?.type === EntityValueOptionTypes.NESTED) {
+                        return (
+                            <React.Fragment>
+                                {currentOption.steps.map((idStep: string) => {
+                                    const subStep = form.steps[idStep];
+                                    return (
+                                        <StepComponent
+                                            editable={editable}
+                                            step={subStep}
+                                            key={idStep}
+                                        />
+                                    );
+                                })}
+                            </React.Fragment>
+                        );
+                    } else return <></>;
+                }}
+            />
+        </StepFillerContainer>
+    );
+}
+
+export default EntityValuePickerStep;
+
+const getEntityValueOptions = async (
+    idOrganization: string | undefined,
+    step: EntityValuePicker,
+    dependencyStore: DependencyStore
+): Promise<StepOptions[] | null> => {
+    if (!idOrganization) return null;
+    let urlPath = '';
+    for (const path of step.path) {
+        let idEntityValue = 'null';
+        switch (path.type) {
+            case EntityValueDataTypes.STEP: {
+                const currentValue = dependencyStore[path.idStep]?.value;
+                if (!currentValue) return null;
+                if (typeof currentValue === 'string')
+                    idEntityValue = currentValue;
+                else idEntityValue = currentValue._id ?? currentValue.id;
+                break;
+            }
+            case EntityValueDataTypes.VALUE:
+            default:
+                idEntityValue = path.idEntityValue ?? 'null';
+                break;
+        }
+        urlPath +=
+            '/' + path.idEntity + (idEntityValue ? '/' + idEntityValue : '');
+    }
+
+    const params = new URLSearchParams({});
+    for (const filter of step.filters) {
+        switch (filter.type) {
+            case EntityValueDataTypes.STEP: {
+                const currentValue = dependencyStore[filter.idStep]?.value;
+                if (currentValue) {
+                    if (typeof currentValue === 'string')
+                        params.set(filter.idProperty, currentValue);
+                    else
+                        params.set(
+                            filter.idProperty,
+                            currentValue._id ?? currentValue.id
+                        );
+                } else if (filter.required) {
+                    return null;
+                }
+                break;
+            }
+            case EntityValueDataTypes.VALUE:
+            default:
+                params.set(filter.idProperty, filter.value);
+                break;
+        }
+    }
+
+    const url = `${idOrganization}/entities/${
+        step.idEntity
+    }${urlPath}?${params.toString()}`;
+
+    const response = await widgetInstance.get(url);
+    return response.data.filter(
+        (option: any) =>
+            step.options[option._id]?.type !== EntityValueOptionTypes.HIDE
+    );
+};

package/src/FormSteps/FileUploadStep/FileUploadStep.tsx

@@ -0,0 +1,20 @@
+import { useAppSelector } from '../../hooks';
+import { FileUpload } from '../../@Types/FormStep';
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import { StepProps } from '../Step';
+import MaterialFileUploadStep from './MaterialFileUploadStep/MaterialFileUploadStep';
+export interface FileUploadStepProps extends StepProps {
+    /** The FileUploadStep to display */
+    step: FileUpload;
+}
+function FileUploadStep(props: FileUploadStepProps): JSX.Element {
+    const { formStyle } = useAppSelector((state) => state.global);
+
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return <MaterialFileUploadStep {...props} />;
+        }
+    }
+}
+export default FileUploadStep;

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

@@ -0,0 +1,53 @@
+.container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-left: 4px;
+}
+
+.documentIcon {
+    font-size: 26px;
+    width: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 30px;
+}
+
+.label,
+.downloadableLbl {
+    font-size: 1rem;
+    margin-left: 2px;
+    cursor: default;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: calc(100% - 80px);
+}
+.downloadableLbl {
+    cursor: pointer;
+}
+.downloadableLbl:hover {
+    text-decoration: underline;
+}
+.deletBtn {
+    font-size: 26px;
+    height: 26px;
+    margin-left: 5px;
+    color: '#787878';
+    cursor: pointer;
+}
+.loaderContainer {
+    position: relative;
+    height: 26px;
+    width: 26px;
+}
+
+.iconContainer {
+    height: 30px;
+    width: 30px;
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}