- fixed preview of the application;

src/components/FormField/components/CriteriaTable/RenderTable/index.js

@@ -6,6 +6,7 @@ import { head, isEmpty, isNil, pathOr, sum } from 'ramda';
 // components
 import DefaultCell from './components/DefaultCell';
 import LastRowCell from './components/LastRowCell';
+import getNumberFormatted from '../../../../../helpers/getNumberFormatted';
 
 const RenderTable = ({ tableValue = {}, columnsCfg, lastRowCfg, setTableValueFn, disabled }) => {
     const rows = pathOr([], ['rows'], tableValue)
@@ -31,7 +32,7 @@ const RenderTable = ({ tableValue = {}, columnsCfg, lastRowCfg, setTableValueFn,
                         .map(v => isEmpty(v) || isNil(v) ? 0 : v);
 
                     if (cellValue === 'sum') {
-                        total = sum(getAllRowsValues);
+                        total = getNumberFormatted(sum(getAllRowsValues));
                     } else {
                         total = 0;
                     }

src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js

@@ -1,4 +1,5 @@
 import { head, isEmpty, isNil, sum } from 'ramda';
+import getNumberFormatted from '../../../../../../../helpers/getNumberFormatted';
 
 const LastRowCell = ({columnId, lastRowCfg, columnMeta = {}, getColumnDataFn}) => {
     const cellData = head(lastRowCfg.filter(o => !isNil(o[columnId])));
@@ -9,7 +10,7 @@ const LastRowCell = ({columnId, lastRowCfg, columnMeta = {}, getColumnDataFn}) =
             .map(v => isEmpty(v) || isNil(v) ? 0 : v);
 
         if (cellValue === 'sum') {
-            cellValue = sum(getAllRowsValues);
+            cellValue = getNumberFormatted(sum(getAllRowsValues));
         } else {
             cellValue = 0;
         }

src/pages/BandoApplicationPreview/index.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { __, sprintf } from '@wordpress/i18n';
 import { useParams } from 'react-router-dom';
-import { head, isEmpty, pathOr } from 'ramda';
+import { head, isEmpty, isNil, pathOr } from 'ramda';
 import { useForm } from 'react-hook-form';
 import 'quill/dist/quill.core.css';
 
@@ -33,6 +33,11 @@ import { Toast } from 'primereact/toast';
 import { Messages } from 'primereact/messages';
 import ApplicationSteps from '../BandoApplication/ApplicationSteps';
 import BlockingOverlay from '../../components/BlockingOverlay';
+import { klona } from 'klona';
+import getTokens from '../../helpers/getTokens';
+import renderWithDataVars from '../../helpers/renderWithDataVars';
+import { evaluate } from 'mathjs';
+import equal from 'fast-deep-equal';
 
 const BandoApplicationPreview = () => {
     const { id } = useParams();
@@ -55,7 +60,8 @@ const BandoApplicationPreview = () => {
         trigger,
         register,
         getValues,
-        reset
+        reset,
+        watch
     } = useForm({
         defaultValues: useMemo(() => {
             return formInitialData ? formInitialData : {}
@@ -77,6 +83,7 @@ const BandoApplicationPreview = () => {
     }
     const activeStepIndex = activeStep - 1;
     const values = getValues();
+    const formValues = watch();
 
     const onValidate = () => {
         const applId = getApplicationId();
@@ -252,6 +259,43 @@ const BandoApplicationPreview = () => {
             iconPos="right"/>
     </div>
 
+    useEffect(() => {
+        let updatedFormValues = klona(formValues);
+        let context = {};
+
+        // eslint-disable-next-line array-callback-return
+        formData.map((o) => {
+            const variable = head(o.settings.filter(o => o.name === 'variable'));
+            const formula = head(o.settings.filter(o => o.name === 'formula'));
+
+            if (formula && !isEmpty(formula.value)) {
+                context = getTokens(formula.value)
+                    .filter(v => !['false', 'null', 'true'].includes(v))
+                    .reduce((acc, cur) => {
+                        acc[cur] = isNil(context[cur]) ? 0 : context[cur];
+                        return acc;
+                    }, context);
+                const mathFormula = renderWithDataVars(formula.value, context);
+                try {
+                    updatedFormValues[o.id] = evaluate(mathFormula);
+                } catch (e) {
+                    console.log('Error in math formula: "', mathFormula, '"', e.message);
+                    updatedFormValues[o.id] = 0;
+                }
+            }
+
+            if (variable && !isEmpty(variable.value)) {
+                context[variable.value[0]] = 'criteria_table' === o.name
+                    ? pathOr(0, [o.id, 'total'], updatedFormValues)
+                    : pathOr(0, [o.id], updatedFormValues);
+            }
+        });
+
+        if (!isEmpty(updatedFormValues) && !equal(updatedFormValues, formValues)) {
+            reset(updatedFormValues);
+        }
+    }, [formValues]);
+
     useEffect(() => {
         if (formInitialData) {
             //reset();
@@ -301,9 +345,13 @@ const BandoApplicationPreview = () => {
                         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) {
@@ -339,6 +387,7 @@ const BandoApplicationPreview = () => {
                             </div>
                             : <FormField
                                 key={o.id}
+                                readOnly={formula && !isEmpty(formula.value)}
                                 type={o.name}
                                 disabled={o.name === 'fileupload' || 'DRAFT' !== applicationStatus}
                                 fieldName={o.id}