- saving progress;

src/pages/BandoFormsPreview/index.js

@@ -2,9 +2,11 @@ import React, { useState, useEffect } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useNavigate, useParams } from 'react-router-dom';
 import { klona } from 'klona';
-import { head, isNil } from 'ramda';
+import { head, isNil , isEmpty } from 'ramda';
 import { useForm } from 'react-hook-form';
 import 'quill/dist/quill.core.css';
+import { evaluate } from 'mathjs';
+import equal from 'fast-deep-equal';
 
 // store
 import { storeSet, useStore } from '../../store';
@@ -30,12 +32,16 @@ import {
     isUrl, minChecks, maxChecks, nonEmptyTables
 } from '../../helpers/validators';
 import renderHtmlContent from '../../helpers/renderHtmlContent';
+import renderWithDataVars from '../../helpers/renderWithDataVars';
+import getTokens from '../../helpers/getTokens';
 
 const BandoFormsPreview = () => {
     const { id, formId } = useParams();
     const navigate = useNavigate();
     const [formData, setFormData] = useState([]);
     const [formName, setFormName] = useState('');
+    const [fieldsWithVars, setFieldsWithVars] = useState({});
+    const [fieldsWithFormula, setFieldsWithFormula] = useState({});
     const isAsyncRequest = useStore().main.isAsyncRequest();
     const {
         control,
@@ -43,9 +49,12 @@ const BandoFormsPreview = () => {
         formState: { errors },
         getValues,
         register,
-        setValue
+        setValue,
+        watch,
+        reset
     } = useForm({ defaultValues: {}, mode: 'onChange' });
     const values = getValues();
+    const formValues = watch();
     const validationFns = {
         isPIVA,
         isCodiceFiscale,
@@ -75,6 +84,23 @@ const BandoFormsPreview = () => {
         if (data.status === 'SUCCESS') {
             setFormName(data.data.label);
             const elements = klona(data.data.content);
+            let allvars = {};
+            let allformulas = {};
+
+            // eslint-disable-next-line array-callback-return
+            elements.map((o) => {
+                const variable = head(o.settings.filter(o => o.name === 'variable'));
+                if (variable && !isEmpty(variable.value)) {
+                    allvars[o.id] = variable.value[0];
+                }
+                const formula = head(o.settings.filter(o => o.name === 'formula'));
+                if (formula && !isEmpty(formula.value)) {
+                    allformulas[o.id] = formula.value;
+                }
+            });
+
+            setFieldsWithVars(allvars);
+            setFieldsWithFormula(allformulas);
             setFormData(elements);
         }
         storeSet.main.unsetAsyncRequest();
@@ -85,6 +111,41 @@ const BandoFormsPreview = () => {
         storeSet.main.unsetAsyncRequest();
     }
 
+    useEffect(() => {
+        if (!isEmpty(fieldsWithVars) && !isEmpty(fieldsWithFormula)) {
+            const updatedFormValues = klona(formValues);
+            let context = {};
+
+            // eslint-disable-next-line array-callback-return
+            Object.keys(updatedFormValues).map(fieldId => {
+                if (!isNil(fieldsWithFormula[fieldId])) {
+                    const formula = fieldsWithFormula[fieldId];
+                    context = getTokens(formula)
+                        .filter(v => !['false', 'null', 'true'].includes(v))
+                        .reduce((acc, cur) => {
+                            acc[cur] = isNil(context[cur]) ? 0 : context[cur];
+                            return acc;
+                        }, {});
+                    const mathFormula = renderWithDataVars(formula, context);
+                    try {
+                        updatedFormValues[fieldId] = evaluate(mathFormula);
+                    } catch (e) {
+                        console.log('Error in math formula: "', mathFormula, '"', e.message);
+                        updatedFormValues[fieldId] = 0;
+                    }
+                }
+                if (!isNil(fieldsWithVars[fieldId])) {
+                    context[fieldsWithVars[fieldId]] = updatedFormValues[fieldId]
+                }
+            });
+
+            if (!isEmpty(updatedFormValues) && !equal(updatedFormValues, formValues)) {
+                reset(updatedFormValues);
+            }
+
+        }
+    }, [formValues]);
+
     useEffect(() => {
         const parsedFormId = parseInt(formId)
         const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
@@ -126,9 +187,13 @@ const BandoFormsPreview = () => {
                                 const text = head(o.settings.filter(o => o.name === 'text'));
                                 const placeholder = head(o.settings.filter(o => o.name === 'placeholder'));
                                 const options = head(o.settings.filter(o => o.name === 'options'));
-                                const tableColumns = head(o.settings.filter(o => o.name === 'table_columns'));
+                                let tableColumns = head(o.settings.filter(o => o.name === 'table_columns'));
+                                if (!tableColumns) {
+                                    tableColumns = head(o.settings.filter(o => o.name === 'criteria_table_columns'));
+                                }
                                 const step = head(o.settings.filter(o => o.name === 'step'));
                                 const mime = head(o.settings.filter(o => o.name === 'mime'));
+                                const formula = head(o.settings.filter(o => o.name === 'formula'));
                                 let mimeValue = '';
 
                                 if (mime) {
@@ -162,6 +227,7 @@ const BandoFormsPreview = () => {
                                     </div>
                                     : <FormField
                                         key={o.id}
+                                        readOnly={formula && !isEmpty(formula.value)}
                                         type={o.name}
                                         fieldName={o.id}
                                         label={label ? label.value : ''}