- saving progress;

src/pages/BandoApplication/index.js

@@ -1,10 +1,13 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { __, sprintf } from '@wordpress/i18n';
 import { useParams } from 'react-router-dom';
-import { head, is, pluck, isEmpty, pathOr } from 'ramda';
+import { head, is, pluck, isEmpty, pathOr, isNil } from 'ramda';
 import { useForm } from 'react-hook-form';
 import 'quill/dist/quill.core.css';
 import { wrap } from 'object-path-immutable';
+import { evaluate } from 'mathjs';
+import equal from 'fast-deep-equal';
+import { klona } from 'klona';
 
 // store
 import { storeSet, storeGet, useStore } from '../../store';
@@ -26,6 +29,10 @@ import {
 import renderHtmlContent from '../../helpers/renderHtmlContent';
 import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
 import getFormatedFileSizeText from '../../helpers/getFormatedFileSizeText';
+import renderWithDataVars from '../../helpers/renderWithDataVars';
+import getTokens from '../../helpers/getTokens';
+import formatDateString from '../../helpers/formatDateString';
+import isDateTimeInPast from '../../helpers/isDateTimeInPast';
 
 // components
 import { Skeleton } from 'primereact/skeleton';
@@ -39,8 +46,6 @@ import { Dialog } from 'primereact/dialog';
 import FileuploadApplicationSignedPdf from '../../components/FileuploadApplicationSignedPdf';
 
 import { defaultMaxFileSize } from '../../configData';
-import formatDateString from '../../helpers/formatDateString';
-import isDateTimeInPast from '../../helpers/isDateTimeInPast';
 
 const BandoApplication = () => {
     const chosenCompanyId = useStore().main.chosenCompanyId();
@@ -48,6 +53,8 @@ const BandoApplication = () => {
     const [isExpired, setIsExpired] = useState(false);
     const [formData, setFormData] = useState([]);
     const [formInitialData, setFormInitialData] = useState(null);
+    const [fieldsWithVars, setFieldsWithVars] = useState({});
+    const [fieldsWithFormula, setFieldsWithFormula] = useState({});
     const [bandoTitle, setBandoTitle] = useState('');
     const [bandoId, setBandoId] = useState(0);
     const [formId, setFormId] = useState('');
@@ -67,6 +74,7 @@ const BandoApplication = () => {
         trigger,
         register,
         getValues,
+        watch,
         reset
     } = useForm({
         defaultValues: useMemo(() => {
@@ -89,6 +97,7 @@ const BandoApplication = () => {
     }
     const activeStepIndex = activeStep - 1;
     const values = getValues();
+    const formValues = watch();
 
     const onValidate = () => {
         const applId = getApplicationId();
@@ -342,6 +351,8 @@ const BandoApplication = () => {
             dynamicData = wrap(dynamicData).set(['custom', 'userFullName'], userFullName).value();
             const legalRepresentantName = company.isLegalRepresentant ? userFullName : '';
             dynamicData = wrap(dynamicData).set(['custom', 'legalRepresentant'], legalRepresentantName).value();
+            let allvars = {};
+            let allformulas = {};
 
             if (data.data.applicationFormResponse.content) {
                 // eslint-disable-next-line array-callback-return
@@ -349,7 +360,15 @@ const BandoApplication = () => {
                     if (o.dynamicData && !isEmpty(o.dynamicData)) {
                         formDataInitial[o.id] = pathOr('', o.dynamicData.split('.'), dynamicData);
                     }
-                })
+                    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;
+                    }
+                });
             }
 
             if (data.data.applicationFormResponse.formFields) {
@@ -366,6 +385,8 @@ const BandoApplication = () => {
             }
 
             reset();
+            setFieldsWithVars(allvars);
+            setFieldsWithFormula(allformulas);
             setFormInitialData(formDataInitial);
         }
         storeSet.main.unsetAsyncRequest();
@@ -501,10 +522,45 @@ const BandoApplication = () => {
     // TODO hardcoded for now
     const signedDocMime = bandoId === 10
         ? ['.p7m,application/pkcs7-mime,application/x-pkcs7-mime', '.pdf,application/pdf']
-        : ['.p7m,application/pkcs7-mime,application/x-pkcs7-mime']
+        : ['.p7m,application/pkcs7-mime,application/x-pkcs7-mime'];
     const signedDocValidationString = bandoId === 10
         ? ['.p7m', '.pdf']
-        : ['.p7m']
+        : ['.p7m'];
+
+    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(() => {
         if ('SUBMIT' === applicationStatus) {
@@ -595,6 +651,7 @@ const BandoApplication = () => {
                             const tableColumns = head(o.settings.filter(o => o.name === '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) {
@@ -630,6 +687,7 @@ const BandoApplication = () => {
                                 </div>
                                 : <FormField
                                     key={o.id}
+                                    readOnly={formula && !isEmpty(formula.value)}
                                     type={o.name}
                                     fieldName={o.id}
                                     label={label ? label.value : ''}