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

package/src/Form/Terms/Term/MaterialTerm/MaterialTerm.module.css

@@ -0,0 +1,83 @@
+.container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-left: 0px;
+    padding-right: 0px;
+    width: 100%;
+}
+.checkboxContainer {
+    margin-bottom: auto;
+    margin-left: 12px;
+}
+.messageContainer {
+    font-size: 1rem;
+    padding-right: 25px;
+}
+
+.highlight {
+    font-weight: bold;
+    cursor: pointer;
+}
+.dialogContainer {
+    overflow-y: hidden;
+    max-height: 60vh;
+    min-width: 400px;
+    padding-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+}
+
+.dialogContainer,
+.dialogContainer *,
+.dialogContainer *::after,
+.dialogContainer *::before {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+.closeIcon {
+    right: 15px;
+    top: 10px;
+    font-size: 26px;
+    position: absolute;
+    cursor: pointer;
+}
+.dialogTitle {
+    font-size: 22px;
+    font-weight: 600;
+    margin-top: 10px;
+    padding-bottom: 5px;
+    width: calc(100% - 40px);
+    margin-bottom: 5px;
+    text-align: center;
+}
+.dialogContentContainer {
+    overflow-y: auto;
+    width: calc(100% - 35px);
+    padding-left: 20px;
+    padding-right: 10px;
+    max-height: calc(60vh - 50px);
+    margin-bottom: 15px;
+}
+.dialogContentContainer {
+    scrollbar-width: thin;
+    scrollbar-color: #787878 transparent;
+    margin-right: 1px;
+}
+.dialogContentContainer::-webkit-scrollbar {
+    width: 4px;
+}
+.dialogContentContainer::-webkit-scrollbar-track {
+    background: transparent;
+}
+.dialogContentContainer::-webkit-scrollbar-thumb {
+    background: #787878;
+    border-radius: 2px;
+}
+.dialogContentContainer::-webkit-scrollbar-thumb:hover {
+    background: #4f4f4f;
+}

package/src/Form/Terms/Term/MaterialTerm/MaterialTerm.tsx

@@ -0,0 +1,160 @@
+import { Dialog } from '@material-ui/core';
+import React from 'react';
+import { useState } from 'react';
+import { useController } from 'react-hook-form';
+import RoundedButton from '../../../../Shared/RoundedButton/RoundedButton';
+import RoundedCheckBox from '../../../../Shared/RoundedCheckBox/RoundedCheckBox';
+import { TermComponentProps } from '../Term';
+import CloseRoundedIcon from '@material-ui/icons/CloseRounded';
+import styles from './MaterialTerm.module.css';
+import { useAppSelector } from '../../../../hooks';
+import { createSelector } from '@reduxjs/toolkit';
+import { ValuesStore } from '../../../../States/SiteSlice';
+import { RootState } from '../../../../Utils/store';
+const selectOriginalValue = createSelector(
+    [
+        (state: RootState): ValuesStore => state.site.values,
+        (state: RootState, idTerm: string): string => idTerm,
+    ],
+    (values, idTerm) => values.global[idTerm]
+);
+
+function TermComponent({ term, tempError }: TermComponentProps): JSX.Element {
+    const { formStyle, postview } = useAppSelector((state) => state.global);
+
+    const originalValue = useAppSelector((state) =>
+        selectOriginalValue(state, term.id)
+    );
+
+    const {
+        field: { ref, ...field },
+        fieldState: { error },
+    } = useController({
+        name: term.id,
+        rules: {
+            required: true,
+        },
+        defaultValue: originalValue ?? false,
+        shouldUnregister: true,
+    });
+
+    const [showDialog, setShowDialog] = useState(false);
+    /**
+     * Function that renders the highlighted text
+     * @returns a string with span highlighted
+     */
+    const renderText = (text: string): any => {
+        if (text) {
+            const parts: any = text.split(/{{(.*?)}}/gi);
+            for (let i = 1; i < parts.length; i += 2) {
+                parts[i] = (
+                    <span
+                        className={styles.highlight}
+                        style={{
+                            color:
+                                !!error && tempError
+                                    ? formStyle.errorColor
+                                    : formStyle.primaryColor,
+                        }}
+                        key={i}
+                        onClick={(): void => {
+                            if (term.clickEffect?.type === 'LINK') {
+                                window
+                                    .open?.(term.clickEffect.url, '_blank')
+                                    ?.focus?.();
+                            } else if (term.clickEffect?.type === 'DIALOG') {
+                                setShowDialog(true);
+                            }
+                        }}
+                    >
+                        {parts[i]}
+                    </span>
+                );
+            }
+            return parts;
+        }
+    };
+    return (
+        <React.Fragment>
+            <Dialog
+                PaperProps={{
+                    style: {
+                        borderRadius: '20px',
+                    },
+                }}
+                onClose={(): void => {
+                    setShowDialog(false);
+                }}
+                open={showDialog}
+            >
+                {term.clickEffect?.type === 'DIALOG' && (
+                    <div
+                        className={styles.dialogContainer}
+                        style={{ color: formStyle.textColor }}
+                    >
+                        <div
+                            className={styles.closeIcon}
+                            onClick={(): void => {
+                                setShowDialog(false);
+                            }}
+                        >
+                            <CloseRoundedIcon fontSize="inherit" />
+                        </div>
+                        <div
+                            className={styles.dialogTitle}
+                            style={{
+                                borderBottom:
+                                    '1px solid ' + formStyle.primaryColor,
+                            }}
+                        >
+                            {term.clickEffect.title}
+                        </div>
+                        <div className={styles.dialogContentContainer}>
+                            {term.clickEffect.text}
+                        </div>
+                        <RoundedButton
+                            text={'Aceptar'}
+                            padding="20px 15px"
+                            backgroundColor={formStyle.primaryColor}
+                            color={formStyle.primaryContrastColor}
+                            fontSize={20}
+                            onClick={(): void => {
+                                setShowDialog(false);
+                                if (!postview) {
+                                    field.onChange(true);
+                                }
+                            }}
+                        ></RoundedButton>
+                    </div>
+                )}
+            </Dialog>
+            <div className={styles.container + ' noselect'}>
+                <div className={styles.checkboxContainer}>
+                    <RoundedCheckBox
+                        inputRef={ref}
+                        {...field}
+                        checked={field.value}
+                        cantEdit={postview}
+                        padding="5px"
+                        checkedColor={formStyle.primaryColor}
+                        errorColor={formStyle.errorColor}
+                        size="1.5rem"
+                        error={!!error}
+                    />
+                </div>
+                <div
+                    className={styles.messageContainer}
+                    style={{
+                        color:
+                            !!error && tempError
+                                ? formStyle.errorColor
+                                : 'inherit',
+                    }}
+                >
+                    {renderText(term.message)}
+                </div>
+            </div>
+        </React.Fragment>
+    );
+}
+export default TermComponent;

package/src/Form/Terms/Term/Term.tsx

@@ -0,0 +1,20 @@
+import { Term } from '../../../@Types/Form';
+import { FormStyleTypes } from '../../../constants/FormStepTypes';
+import { useAppSelector } from '../../../hooks';
+import MaterialTerm from './MaterialTerm/MaterialTerm';
+
+export interface TermComponentProps {
+    term: Term;
+    tempError: boolean;
+}
+function TermComponent(props: TermComponentProps): JSX.Element {
+    const { formStyle } = useAppSelector((state) => state.global);
+
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return <MaterialTerm {...props} />;
+        }
+    }
+}
+export default TermComponent;

package/src/Form/Terms/Terms.module.css

@@ -0,0 +1,3 @@
+.termsContainer {
+    max-width: 100%;
+}

package/src/Form/Terms/Terms.tsx

@@ -0,0 +1,54 @@
+import { useContext, useEffect, useState } from 'react';
+import styles from './Terms.module.css';
+import TermComponent from './Term/Term';
+import { useFormContext } from 'react-hook-form';
+import FormContext from '../../Contexts/FormContext';
+import { useAppSelector } from '../../hooks';
+function Terms(): JSX.Element {
+    const { postview, internal } = useAppSelector((state) => state.global);
+    const isInteralAgent = useAppSelector(
+        (state) =>
+            state.site.values.global['INTERNAL_CREATING_AGENT'] !== undefined
+    );
+
+    const form = useContext(FormContext);
+    const {
+        formState: { isSubmitting },
+    } = useFormContext();
+    const [tempError, setTempError] = useState(false);
+
+    useEffect(() => {
+        if (!isSubmitting) return;
+        setTempError(true);
+        setTimeout(() => {
+            setTempError(false);
+        }, 500);
+    }, [isSubmitting]);
+
+    if (
+        form.terms &&
+        (!internal || (internal && postview)) &&
+        !isInteralAgent
+    ) {
+        return (
+            <div
+                className={styles.termsContainer}
+                style={{
+                    width:
+                        (form.size.blockSize + form.size.spacingSize) *
+                        form.size.blockNum,
+                }}
+            >
+                {form.terms.map((term) => (
+                    <TermComponent
+                        key={term.id}
+                        term={term}
+                        tempError={tempError}
+                    />
+                ))}
+            </div>
+        );
+    }
+    return <></>;
+}
+export default Terms;

package/src/FormSteps/@Construction/CBRElementStep/CBRElementStep.tsx

@@ -0,0 +1,129 @@
+import SmartSelectStep from '../../SmartSelectStep/SmartSelectStep';
+import { StepOptions } from '../../CBRStepMapper';
+import { GSmartSelect } from '../../../@Types/GenericFormSteps';
+import { StepProps } from '../../Step';
+import { CBRElementStep } from '../../../@Types/CBRFormStep';
+import CBRFormStepTypes from '../../../constants/CBRFormStepTypes';
+import axios from 'axios';
+import InputIcon from '../../../Shared/InputIcon/InputIcon';
+import { FormStep } from '../../../@Types/FormStep';
+import { DependencyStore } from '../../../Form/Form';
+import FormContext from '../../../Contexts/FormContext';
+import { useContext } from 'react';
+
+export interface ElementStepProps extends Omit<StepProps, 'step'> {
+    step: CBRElementStep;
+}
+
+function CBRElementStepComponent(props: ElementStepProps): JSX.Element {
+    return (
+        <SmartSelectStep
+            {...props}
+            step={props.step}
+            icon={<InputIcon icon={'LEAK'} />}
+            getOptions={getElementOptions}
+            getOptionSelected={(option, value): boolean =>
+                option.id === value.id
+            }
+            getValueString={(value): string => value?.id}
+            calcDepError={calcDepError}
+            valueOverwrite={(value: any): any => {
+                if (value) {
+                    return { ...value, subStep: props.step.subStep };
+                } else {
+                    return null;
+                }
+            }}
+            renderNestedSteps={(value: any): JSX.Element => (
+                <ElementSubStepRenderer value={value} {...props} />
+            )}
+        ></SmartSelectStep>
+    );
+}
+
+export default CBRElementStepComponent;
+
+function ElementSubStepRenderer({
+    value,
+    ...stepProps
+}: ElementStepProps & {
+    value: any;
+}): JSX.Element {
+    const form = useContext(FormContext);
+
+    if (!value || stepProps === undefined) {
+        return <div></div>;
+    }
+    const subStep = form.steps[stepProps.step.subStep ?? ''];
+    if ((subStep?.type as any) !== CBRFormStepTypes.CBR_LOCATIVAS) {
+        return <div></div>;
+    }
+    return (
+        <SmartSelectStep
+            {...stepProps}
+            step={subStep as any}
+            icon={<InputIcon icon={'LEAK'} />}
+            getOptions={getElementOptions}
+            calcDepError={calcDepError}
+            getOptionSelected={(option, value): boolean =>
+                option.id === value.id
+            }
+            getValueString={(value): string => value?.id}
+            renderNestedSteps={(value): JSX.Element => (
+                <ElementSubStepRenderer
+                    value={value}
+                    {...stepProps}
+                    step={subStep as any}
+                />
+            )}
+        ></SmartSelectStep>
+    );
+}
+
+const getElementOptions = 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
+        }
+        //Calc resp given dep, and depency Store
+        const response = (
+            await axios.get(
+                `https://integrations.${process.env.REACT_APP_DOMAIN}/sinco/cbr/Locativas?idOrganization=${idOrganization}`
+            )
+        ).data;
+        const father = dependencyStore[step.dependencies[1]]?.value;
+        if (father !== undefined && father.id === undefined) {
+            return null;
+        }
+        return response.filter((locativa: any) => {
+            if (father?.id) {
+                return (
+                    locativa.id.startsWith(father.id) &&
+                    locativa.id !== father.id
+                );
+            } else {
+                return locativa.id.length === 2;
+            }
+        });
+    } else {
+        return null;
+    }
+};
+
+const calcDepError = (steps: FormStep[]): string | undefined => {
+    for (const step of steps) {
+        const type = step.type as any;
+        if (type === CBRFormStepTypes.CBR_PROYECTO) {
+            return 'Selecciona un proyecto';
+        }
+        if (type === CBRFormStepTypes.CBR_LOCATIVAS) {
+            return 'Selecciona un padre';
+        }
+    }
+    return undefined;
+};

package/src/FormSteps/@Construction/CBRIncidentsStep/CBRIncidentsStep.tsx

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

package/src/FormSteps/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/Incident/Incident.module.css

@@ -0,0 +1,60 @@
+.container,
+.mobileContainer {
+    background-color: #f0f0f0;
+    border: 1px solid #d6d6d6;
+    width: fit-content;
+    border-radius: 20px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    position: relative;
+}
+.container {
+    max-width: calc(100% - 112px);
+    padding-right: 55px;
+    padding-left: 55px;
+}
+
+.mobileContainer {
+    max-width: calc(100% - 42px);
+    padding-right: 20px;
+    padding-left: 20px;
+}
+
+.titleLbl {
+    width: 100%;
+    font-size: 20px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: default;
+    margin-left: 10px;
+    margin-bottom: 10px;
+}
+
+.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 {
+    font-size: 24px;
+    position: absolute;
+    right: 15px;
+    top: 15px;
+}
+
+.deleteBtn {
+    cursor: pointer;
+}

package/src/FormSteps/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/Incident/Incident.tsx

@@ -0,0 +1,81 @@
+import styles from './Incident.module.css';
+import { CBRIncidentsStepProps } from '../../CBRIncidentsStep';
+import { Incident } from '../MaterialCBRIncidentsStep';
+import StepComponent from '../../../../Step';
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+import TextAreaStep from '../../../../TextAreaStep/TextAreaStep';
+import { TextArea } from '../../../../../@Types/FormStep';
+import FormContext from '../../../../../Contexts/FormContext';
+import { useAppSelector } from '../../../../../hooks';
+import { useContext } from 'react';
+
+function IncidentComponent({
+    step,
+    incident,
+    handleDelete,
+    ...others
+}: CBRIncidentsStepProps & {
+    incident: Incident;
+    handleDelete: () => void;
+}): JSX.Element {
+    const { formStyle, postview } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const widthStats = useAppSelector((state) => state.widthStats);
+
+    const spaceStep = form.steps[incident.idSpaceStep];
+    const elementStep = form.steps[incident.idElementStep];
+    const commentStep = form.steps[incident.idCommentStep];
+    if (incident.deleted) {
+        return <div></div>;
+    }
+    return (
+        <div
+            className={
+                widthStats.isMobile || form.size.blockNum < 3
+                    ? styles.mobileContainer
+                    : styles.container
+            }
+        >
+            <div
+                className={styles.contentContainer}
+                style={{
+                    width:
+                        (form.size.blockSize + form.size.spacingSize) *
+                        (form.size.blockNum - 1),
+                }}
+            >
+                <div
+                    className={styles.titleLbl}
+                    style={{ color: formStyle.textColor }}
+                >
+                    {step.unitLabel + ' ' + incident.num}:
+                </div>
+                <div
+                    className={
+                        !others.editable || postview
+                            ? styles.disabledDeleteBtn
+                            : styles.deleteBtn
+                    }
+                    style={{ color: formStyle.textColor }}
+                    onClick={(): void => {
+                        if (others.editable && !postview) {
+                            handleDelete();
+                        }
+                    }}
+                >
+                    <DeleteRoundedIcon fontSize="inherit" />
+                </div>
+
+                <StepComponent {...others} step={spaceStep} />
+                <StepComponent {...others} step={elementStep} />
+                <TextAreaStep
+                    {...others}
+                    step={commentStep as TextArea}
+                    maxLength={200}
+                />
+            </div>
+        </div>
+    );
+}
+
+export default IncidentComponent;

package/src/FormSteps/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/MaterialCBRIncidentsStep.module.css

@@ -0,0 +1,34 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    width: calc(100% - 20px);
+    max-width: calc(100% - 20px);
+    padding: 5px 10px;
+}
+
+.titleLbl {
+    font-size: 24px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: default;
+}
+
+.descriptionPar {
+    font-size: 16px;
+    white-space: pre-wrap;
+    cursor: default;
+}
+.btnContainer {
+    margin-top: 15px;
+    margin-left: 15px;
+    margin-bottom: 3px;
+    width: fit-content;
+}
+
+.errorMsg {
+    font-size: 0.75rem;
+    margin-top: 5px;
+    margin-left: 15px;
+}