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

package/src/FormSteps/ApiSelectorStep/MaterialApiSelectorStep/MaterialApiSelectorStep.tsx

@@ -0,0 +1,126 @@
+import React, { useContext } from 'react';
+import FormStepTypes, {
+    ApiSelectorOptionTypes,
+    ApiSelectorParamTypes,
+} from '../../../constants/FormStepTypes';
+import StepComponent from '../../Step';
+import { ApiSelectorStepProps, StepOptions } from '../ApiSelectorStep';
+import SmartSelect from '../../SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep';
+import widgetInstance from '../../../Utils/AxiosWidget';
+import axiosInstance from '../../../Utils/AxiosAPI';
+import InputIcon from '../../../Shared/InputIcon/InputIcon';
+import FormContext from '../../../Contexts/FormContext';
+import { ApiSelector } from '../../../@Types/FormStep';
+import { DependencyStore } from '../../../Form/Form';
+import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
+
+function ApiSelectorComponent({
+    step,
+    editable,
+    ...others
+}: ApiSelectorStepProps): JSX.Element {
+    const form = useContext(FormContext);
+
+    function calcOptionId(option: any): string {
+        return option?.[step.idAttribute] ?? '';
+    }
+
+    function calcOptionLabel(option: any): string {
+        return option?.[step.labelAttribute] ?? '';
+    }
+
+    return (
+        <StepFillerContainer step={step}>
+            <SmartSelect
+                {...others}
+                editable={editable}
+                step={step}
+                icon={step.icon ? <InputIcon icon={step.icon} /> : undefined}
+                getOptions={getApiOptions}
+                getOptionSelected={(option, value): boolean =>
+                    calcOptionId(option) === calcOptionId(value)
+                }
+                calcDepError={(steps): string | undefined => {
+                    for (const step of steps) {
+                        if (step.type === FormStepTypes.API_SELECTOR) {
+                            return 'Selecciona un ' + step.label;
+                        }
+                    }
+                    return undefined;
+                }}
+                getValueString={(value): string => calcOptionLabel(value)}
+                renderNestedSteps={(value): JSX.Element => {
+                    if (!value) return <></>;
+                    const currentOption = step.options[calcOptionId(value)];
+                    if (currentOption?.type === ApiSelectorOptionTypes.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 ApiSelectorComponent;
+
+const getApiOptions = async (
+    idOrganization: string | undefined,
+    step: ApiSelector,
+    dependencyStore: DependencyStore
+): Promise<StepOptions[] | null> => {
+    function calcOptionId(option: any): string {
+        return option?.[step.idAttribute] ?? '';
+    }
+
+    const params = new URLSearchParams({});
+
+    for (const filter of step.queryParams) {
+        switch (filter.type) {
+            case ApiSelectorParamTypes.STEP: {
+                const currentValue = dependencyStore[filter.idStep]?.value;
+                if (currentValue) {
+                    if (typeof currentValue === 'string')
+                        params.set(filter.key, currentValue);
+                    else
+                        params.set(
+                            filter.key,
+                            currentValue.label ?? currentValue.id
+                        );
+                } else if (filter.required) {
+                    return null;
+                }
+                break;
+            }
+            case ApiSelectorParamTypes.VALUE:
+            default:
+                params.set(filter.key, filter.value);
+                break;
+        }
+    }
+    let url = step.url.replace('capta.co', process.env.REACT_APP_DOMAIN!);
+    if (idOrganization && url.includes(process.env.REACT_APP_DOMAIN!))
+        params.set('idOrganization', idOrganization);
+    if (!step.url.includes('?')) url += '?';
+    url += params.toString();
+    const response = await (idOrganization
+        ? widgetInstance.get(url)
+        : axiosInstance.get(url));
+    return response.data.filter(
+        (option: any) =>
+            calcOptionId(option) &&
+            step.options[calcOptionId(option)]?.type !==
+                ApiSelectorOptionTypes.HIDE
+    );
+};

package/src/FormSteps/CBRStepMapper.tsx

@@ -0,0 +1,256 @@
+import { CBRFormStep } from '../@Types/CBRFormStep';
+import CBRFormStepTypes from '../constants/CBRFormStepTypes';
+import PersonRoundedIcon from '@material-ui/icons/PersonRounded';
+import { StepProps } from './Step';
+import TextInputStep from './TextInputStep/TextInputStep';
+import SmartSelectStep from './SmartSelectStep/SmartSelectStep';
+import TextAreaStep from './TextAreaStep/TextAreaStep';
+import CBRIncidentsStep from './@Construction/CBRIncidentsStep/CBRIncidentsStep';
+import { GSmartSelect } from '../@Types/GenericFormSteps';
+import CBRElementStep from './@Construction/CBRElementStep/CBRElementStep';
+import axios from 'axios';
+import CBRPropertyStep from './@Construction/CBRPropertyStep/CBRPropertyStep';
+import InputIcon from '../Shared/InputIcon/InputIcon';
+import { DependencyStore } from '../Form/Form';
+
+const baseUrl = `https://integrations.${process.env.REACT_APP_DOMAIN}/sinco/cbr/`;
+interface CBRStepProps extends Omit<StepProps, 'step'> {
+    step: CBRFormStep;
+}
+
+export interface StepOptions {
+    id: string | number;
+    label: string;
+    idMacroProyecto?: number;
+}
+
+function CBRStepMapper(props: CBRStepProps): JSX.Element {
+    const getTipoDocOptions = async (
+        idOrganization: string | undefined
+    ): Promise<StepOptions[] | null> => {
+        if (!idOrganization) return null;
+        return (
+            await axios.get(
+                baseUrl + 'TiposDoc?idOrganization=' + idOrganization
+            )
+        ).data;
+    };
+
+    const getProyectoOptions = async (
+        idOrganization: string | undefined,
+        step: GSmartSelect,
+        dependencyStore: DependencyStore
+    ): Promise<StepOptions[] | null> => {
+        if (!idOrganization) return null;
+        const idMacroProyecto =
+            dependencyStore[step.dependencies?.[0] ?? '']?.value?.id;
+        let proyectos = (
+            await axios.get(
+                baseUrl + 'Proyectos?idOrganization=' + idOrganization
+            )
+        ).data;
+        if (idMacroProyecto) {
+            proyectos = proyectos.filter(
+                (proyecto: any) => proyecto.idMacroProyecto === idMacroProyecto
+            );
+        }
+        return proyectos;
+    };
+
+    const getMacroProyectoOptions = async (
+        idOrganization: string | undefined
+    ): Promise<StepOptions[] | null> => {
+        if (!idOrganization) return null;
+        return (
+            await axios.get(
+                baseUrl + 'MacroProyectos?idOrganization=' + idOrganization
+            )
+        ).data;
+    };
+
+    const getTipoSolicitanteOptions = async (
+        idOrganization: string | undefined
+    ): Promise<StepOptions[] | null> => {
+        if (!idOrganization) return null;
+        return (
+            await axios.get(
+                baseUrl + 'TiposSolicitante?idOrganization=' + idOrganization
+            )
+        ).data;
+    };
+
+    const getTipoEspaciosOptions = async (
+        idOrganization: string | undefined,
+        step: GSmartSelect,
+        dependencyStore: DependencyStore
+    ): Promise<StepOptions[] | null> => {
+        if (step.dependencies && idOrganization) {
+            const idProyecto = dependencyStore[step.dependencies[0]]?.value?.id;
+            if (!idProyecto) {
+                return null; //null para indicar que falta la depedency
+            }
+            const params = new URLSearchParams({ idProyecto, idOrganization });
+            return (
+                await axios.get(baseUrl + 'TiposEspacio?' + params.toString())
+            ).data;
+        } else {
+            return null;
+        }
+    };
+
+    switch (props.step.type) {
+        case CBRFormStepTypes.CBR_EMAIL:
+            return (
+                <TextInputStep
+                    {...props}
+                    step={props.step as any}
+                    validation={{
+                        type: 'EMAIL',
+                        value: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+                            .source,
+                        message: 'El correo no es válido',
+                    }}
+                />
+            );
+        case CBRFormStepTypes.CBR_CEL:
+        case CBRFormStepTypes.CBR_PHONE:
+            return (
+                <TextInputStep
+                    {...props}
+                    step={props.step as any}
+                    validation={{
+                        type: 'OTHER',
+                        value: /^(\+[0-9])|([0-9])$/.source,
+                        message: 'El teléfono no es válido',
+                    }}
+                />
+            );
+        case CBRFormStepTypes.CBR_LAST_NAME:
+        case CBRFormStepTypes.CBR_FIRST_NAME:
+        case CBRFormStepTypes.CBR_MIDDLE_NAME:
+        case CBRFormStepTypes.CBR_SECOND_LAST_NAME:
+            return <TextInputStep {...props} step={props.step as any} />;
+        case CBRFormStepTypes.CBR_DOC:
+            return (
+                <TextInputStep
+                    {...props}
+                    step={props.step as any}
+                    icon={<DocumentIconComponent />}
+                />
+            );
+        case CBRFormStepTypes.CBR_TIPO_DOC:
+            return (
+                <SmartSelectStep
+                    {...props}
+                    step={{ ...props.step, showIcon: false }}
+                    getOptions={getTipoDocOptions}
+                    getOptionSelected={(option, value): boolean =>
+                        option.id === value.id
+                    }
+                    getValueString={(value): string => value?.id}
+                />
+            );
+
+        case CBRFormStepTypes.CBR_MACRO_PROYECTO:
+            return (
+                <SmartSelectStep
+                    {...props}
+                    step={props.step}
+                    icon={<InputIcon icon={'PROJECT'} />}
+                    getOptions={getMacroProyectoOptions}
+                    getOptionSelected={(option, value): boolean =>
+                        option.id === value.id
+                    }
+                    getValueString={(value): string => value?.id}
+                />
+            );
+        case CBRFormStepTypes.CBR_PROYECTO:
+            return (
+                <SmartSelectStep
+                    {...props}
+                    step={props.step}
+                    icon={<InputIcon icon={'PROJECT'} />}
+                    getOptions={getProyectoOptions}
+                    getOptionSelected={(option, value): boolean =>
+                        option.id === value.id
+                    }
+                    getValueString={(value): string => value?.id}
+                />
+            );
+
+        case CBRFormStepTypes.CBR_INMUEBLE:
+            return <CBRPropertyStep {...props} step={props.step as any} />;
+
+        case CBRFormStepTypes.CBR_TIPO_SOLICITANTE:
+            return (
+                <SmartSelectStep
+                    {...props}
+                    step={props.step}
+                    icon={
+                        <PersonRoundedIcon
+                            fill="#757575"
+                            style={{
+                                display: 'flex',
+                                height: 23,
+                                width: 23,
+                                marginRight: 3,
+                                marginTop: 1,
+                            }}
+                        />
+                    }
+                    getOptions={getTipoSolicitanteOptions}
+                    getOptionSelected={(option, value): boolean =>
+                        option.id === value.id
+                    }
+                    getValueString={(value): string => value?.id}
+                />
+            );
+
+        case CBRFormStepTypes.CBR_TIPO_ESPACIO:
+            return (
+                <SmartSelectStep
+                    {...props}
+                    step={props.step}
+                    icon={<InputIcon icon={'SPACE'} />}
+                    getOptions={getTipoEspaciosOptions}
+                    calcDepError={(steps): string | undefined => {
+                        for (const step of steps) {
+                            if (
+                                (step.type as any) ===
+                                CBRFormStepTypes.CBR_PROYECTO
+                            ) {
+                                return 'Selecciona un proyecto';
+                            }
+                        }
+                        return undefined;
+                    }}
+                    getOptionSelected={(option, value): boolean =>
+                        option.id === value.id
+                    }
+                    getValueString={(value): string => value?.id}
+                />
+            );
+        case CBRFormStepTypes.CBR_LOCATIVAS:
+            return <CBRElementStep {...props} step={props.step as any} />;
+        case CBRFormStepTypes.CBR_COMENTARIO:
+            return <TextAreaStep {...props} step={props.step as any} />;
+        case CBRFormStepTypes.CBR_INCIDENCIAS:
+            return <CBRIncidentsStep {...props} step={props.step} />;
+        default:
+            return <div></div>;
+    }
+}
+
+export default CBRStepMapper;
+
+function DocumentIconComponent(): JSX.Element {
+    return (
+        <div
+            style={{
+                marginRight: 2,
+            }}
+        >
+            <InputIcon icon={'DOCUMENT'} />
+        </div>
+    );
+}

package/src/FormSteps/CheckBoxStep/CheckBoxStep.tsx

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

package/src/FormSteps/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.module.css

@@ -0,0 +1,26 @@
+.checkboxLbl {
+    font-size: 18px;
+    margin-right: 10px;
+    margin-left: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.labelCheckBoxContainer {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    align-items: center;
+    height: 31px;
+}
+
+.descriptionPar {
+    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;
+}

package/src/FormSteps/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.tsx

@@ -0,0 +1,83 @@
+import styles from './MaterialCheckBoxStep.module.css';
+import RoundedCheckBox from '../../../Shared/RoundedCheckBox/RoundedCheckBox';
+import { CheckBoxStepProps } from '../CheckBoxStep';
+import React, { useContext } from 'react';
+import StepComponent from '../../Step';
+import FormContext from '../../../Contexts/FormContext';
+import { useAppSelector } from '../../../hooks';
+import { useFormStep } from '../../StepHooks';
+import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
+import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
+function CheckBoxStep({ step, editable }: CheckBoxStepProps): JSX.Element {
+    const { ref, value, onChange, error, field } = useFormStep<boolean>(step, {
+        defaultValue: step.defaultValue ?? false,
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+        sizeChange: true,
+    });
+
+    const { formStyle, postview } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+
+    const renderNested = (): void | JSX.Element => {
+        const steps = value ? step.steps : step.uncheckedSteps;
+        return (
+            <React.Fragment>
+                {steps?.map((idStep: string) => {
+                    const subStep = form.steps[idStep];
+                    return (
+                        <StepComponent
+                            editable={editable}
+                            step={subStep}
+                            key={idStep}
+                        />
+                    );
+                })}
+            </React.Fragment>
+        );
+    };
+
+    return (
+        <StepFillerContainer step={step}>
+            <MaterialInputContainer step={step} editable={editable}>
+                <div className={styles.labelCheckBoxContainer}>
+                    {step.label && (
+                        <div className={styles.checkboxLbl}>
+                            {step.label}
+                            {step.required ? ' *' : ''}:
+                        </div>
+                    )}
+                    <RoundedCheckBox
+                        {...field}
+                        inputRef={ref}
+                        onChange={onChange}
+                        data-testid={step.id}
+                        padding="0px"
+                        size="1.6rem"
+                        error={!!error}
+                        cantEdit={!editable || postview}
+                        checkedColor={formStyle.primaryColor}
+                        uncheckedColor={formStyle.outlineColor}
+                        checked={value}
+                    ></RoundedCheckBox>
+                </div>
+                {(step.description || !!error) && (
+                    <div
+                        className={styles.descriptionPar}
+                        style={{
+                            color: error
+                                ? formStyle.errorColor
+                                : formStyle.descriptionTextColor,
+                        }}
+                    >
+                        {error ? 'Este campo es obligatorio' : step.description}
+                    </div>
+                )}
+            </MaterialInputContainer>
+            {renderNested()}
+        </StepFillerContainer>
+    );
+}
+
+export default CheckBoxStep;

package/src/FormSteps/ClassifierSelectorStep/ClassifierSelectorStep.tsx

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

package/src/FormSteps/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.tsx

@@ -0,0 +1,120 @@
+import React, { useContext, useMemo } from 'react';
+import { ClassifierOptionTypes } from '../../../constants/FormStepTypes';
+import StepComponent from '../../Step';
+import { ClassifierSelectorStepProps } from '../ClassifierSelectorStep';
+import { Classifier } from '../../../@Types/Form';
+import RoundedSmartSelect from '../../../Shared/RoundedSmartSelect/RoundedSmartSelect';
+import FormContext from '../../../Contexts/FormContext';
+import { useAppSelector } from '../../../hooks';
+import { useFormStep } from '../../StepHooks';
+import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
+import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
+import { calcDefaultValue } from '../../StepFunctions';
+
+function ClassifierSelectorStep({
+    step,
+    editable,
+}: ClassifierSelectorStepProps): JSX.Element {
+    const { ref, value, onChange, error, field } = useFormStep<{
+        value: string;
+        label: string;
+    }>(step, {
+        defaultValue: calcDefaultValue(step),
+        sizeChange: true,
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+    });
+
+    const { formStyle, postview, preview } = useAppSelector(
+        (state) => state.global
+    );
+    const form = useContext(FormContext);
+
+    if (!step.idClassifier) return <div></div>;
+
+    const classifier: Classifier | undefined =
+        form.classifiers?.[step.idClassifier];
+
+    if (!classifier) return <div></div>;
+
+    const options = useMemo(() => {
+        return classifier.children
+            ?.filter(
+                (idClassifier) =>
+                    step.options[idClassifier]?.type !==
+                        ClassifierOptionTypes.HIDE &&
+                    form.classifiers?.[idClassifier]
+            )
+            .map((idClassifier) => {
+                const classifier = form.classifiers?.[idClassifier];
+                return {
+                    value: classifier?._id,
+                    label:
+                        classifier?.clientName?.trim?.() && preview
+                            ? classifier?.clientName
+                            : classifier?.name,
+                };
+            });
+    }, []);
+
+    const mapNestedOption = (): void | JSX.Element => {
+        if (value) {
+            const currentOption = step.options[value.value];
+            if (currentOption?.type === ClassifierOptionTypes.NESTED) {
+                return (
+                    <React.Fragment>
+                        {currentOption.steps.map((idStep: string) => {
+                            const subStep = form.steps[idStep];
+                            return (
+                                <StepComponent
+                                    step={subStep}
+                                    key={idStep}
+                                    editable={editable}
+                                />
+                            );
+                        })}
+                    </React.Fragment>
+                );
+            }
+        }
+    };
+
+    return (
+        <StepFillerContainer step={step}>
+            <MaterialInputContainer step={step} editable={editable}>
+                <RoundedSmartSelect
+                    {...field}
+                    inputRef={ref}
+                    value={value}
+                    disabled={false}
+                    loading={false}
+                    options={options}
+                    cantEdit={!editable || postview}
+                    fullWidth
+                    backgroundColor={formStyle.stepBackgroundColor ?? 'white'}
+                    label={step.label ? step.label : classifier.name}
+                    required={step.required}
+                    height={'31px'}
+                    searchable={step.searchable}
+                    icon={undefined}
+                    helperTextColor={formStyle.descriptionTextColor}
+                    focusColor={formStyle.primaryColor}
+                    outlineColor={formStyle.outlineColor}
+                    errorColor={formStyle.errorColor}
+                    color={formStyle.textColor}
+                    containerMargin="0px"
+                    handleUpdate={onChange}
+                    getOptionSelected={(option, value): boolean => {
+                        return option.value === value?.value;
+                    }}
+                    helperText={error?.message?.toString() ?? step.description}
+                    error={!!error}
+                />
+            </MaterialInputContainer>
+            {mapNestedOption()}
+        </StepFillerContainer>
+    );
+}
+
+export default ClassifierSelectorStep;

package/src/FormSteps/CollapsibleStep/CollapsibleStep.tsx

@@ -0,0 +1,24 @@
+import { useAppSelector } from '../../hooks';
+import { Collapsible } from '../../@Types/FormStep';
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import { StepProps } from '../Step';
+import MaterialCollapsibleStep from './MaterialTitleStep/MaterialCollapsibleStep';
+export interface CollapsibleStepProps extends StepProps {
+    /** The CollapsibleStep to display */
+    step: Collapsible;
+}
+function CollapsibleStep({
+    step,
+    ...others
+}: CollapsibleStepProps): JSX.Element {
+    const { formStyle } = useAppSelector((state) => state.global);
+
+    if (step.steps.length === 0) return <></>;
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return <MaterialCollapsibleStep step={step} {...others} />;
+        }
+    }
+}
+export default CollapsibleStep;