- added render for last row with autosum;

src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { __, sprintf } from '@wordpress/i18n';
 import { wrap } from 'object-path-immutable';
 import { isEmpty, pathOr } from 'ramda';
@@ -57,6 +57,17 @@ const ElementSettingTableColumns = ({
         setStateFieldData(newData);
     }
 
+    const onLastRowInputChange = (e, index) => {
+        const { value } = e.target;
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.lastRowText = value;
+            }
+            return o;
+        })
+        setStateFieldData(newData);
+    }
+
     const onTypeChange = (value, index) => {
         const newData = stateFieldData.map((o, i) => {
             if (i === index) {
@@ -67,6 +78,16 @@ const ElementSettingTableColumns = ({
         setStateFieldData(newData);
     }
 
+    const onLastRowFormulaChange = (value, index) => {
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.lastRowFormula = value;
+            }
+            return o;
+        })
+        setStateFieldData(newData);
+    }
+
     const onSubInputChange = (e, name, index) => {
         const { value } = e.target;
         const newRowsData = wrap(rowsData).set([index, name], value).value();
@@ -98,7 +119,17 @@ const ElementSettingTableColumns = ({
     const setColFormulaChecked = (index) => {
         const newData = stateFieldData.map((o, i) => {
             if (i === index) {
-                o.enableFormula = o.enableFormula !== true;
+                const newVal = o.enableFormula !== true;
+                o.enableFormula = newVal;
+                if (newVal) {
+                    o.lastRowFormula = 'sum';
+                    o.fieldtype = 'numeric';
+                    delete o.lastRowText;
+                } else {
+                    delete o.lastRowFormula;
+                    delete o.fieldtype;
+                    o.lastRowText = '';
+                }
             }
             return o;
         });
@@ -115,11 +146,12 @@ const ElementSettingTableColumns = ({
             </div>
             <div>
                 <Dropdown
+                    disabled={item.enableFormula}
                     value={item.fieldtype ? item.fieldtype : 'text'}
                     onChange={(e) => onTypeChange(e.value, i)}
                     options={[
                         { value: 'text', label: __('Testo', 'gepafin') },
-                        { value: 'number', label: __('Numerico', 'gepafin') }
+                        { value: 'numeric', label: __('Numerico', 'gepafin') }
                     ]}/>
             </div>
             <div>
@@ -160,6 +192,48 @@ const ElementSettingTableColumns = ({
         </>
     }
 
+    const properFieldsLastRow = (item, i) => {
+        return <>
+            <div>
+                <span>{sprintf(__('Colonna %d'), i + 1)}</span>
+            </div>
+            {item.enableFormula
+                ? <div>
+                    <Dropdown
+                        value={item.lastRowFormula}
+                        onChange={(e) => onLastRowFormulaChange(e.value, i)}
+                        options={[
+                            { value: 'sum', label: __('Somma automatica', 'gepafin') }
+                        ]}/>
+                </div>
+                : <div>
+                    <InputText
+                        value={item.lastRowText}
+                        onInput={(e) => onLastRowInputChange(e, i)}/>
+                </div>}
+        </>
+    }
+
+    const lastRow = useCallback(() => {
+        return <div className="formElementSettings__repeater">
+            <div className="formElementSettings__lastRowHeader">
+                <div className="formElementSettings__lastRowHeaderTitle">
+                    {__('Definisci ultima righa', 'gepafin')}
+                </div>
+                <Button type="button"
+                        outlined
+                        label={__('Pulisci', 'gepafin')}
+                        iconPos="right"
+                        icon="pi pi-refresh"
+                        onClick={() => {
+                        }}/>
+            </div>
+            {stateFieldData.map((o, i) => <div key={i} className="formElementSettings__lastRowItem">
+                {properFieldsLastRow(o, i)}
+            </div>)}
+        </div>
+    }, [stateFieldData]);
+
     useEffect(() => {
         const stateFieldData = pathOr([], ['stateFieldData'], value);
         setStateFieldData(stateFieldData);
@@ -174,8 +248,6 @@ const ElementSettingTableColumns = ({
         });
     }, [stateFieldData, rowsData]);
 
-    //stateFieldData.filter(o => o.predefined)
-
     return (
         <>
             <div className="formElementSettings__repeater">
@@ -220,6 +292,7 @@ const ElementSettingTableColumns = ({
                     </Accordion>
                 </div>
                 : null}
+            {lastRow()}
         </>
     )
 }

src/pages/BandoFormsPreview/index.js

@@ -155,8 +155,8 @@ const BandoFormsPreview = () => {
                                 }, {});
 
                                 return ['paragraph'].includes(o.name) && text
-                                    ? <div>
-                                        <div className="ql-editor" key={o.id}>
+                                    ? <div key={o.id}>
+                                        <div className="ql-editor">
                                             {renderHtmlContent(text.value)}
                                         </div>
                                     </div>