- saving progress;

src/assets/scss/components/formBuilder.scss

@@ -191,16 +191,70 @@
 }
 
 .formElementSettings__repeater {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: 1fr;
   gap: 0.5rem;
 }
 
 .formElementSettings__repeaterItem {
+  display: grid;
+  grid-template-columns: 4.5fr 2.4fr 1fr 1.4fr 0.7fr;
+  gap: 12px;
 
+  > div {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+
+    input, select, .p-dropdown {
+      width: 100%;
+      box-sizing: border-box;
+    }
+  }
 }
 
-.formElementSettings__subRepeater {
-  padding: 10px 20px;
-  background-color: #f9f9f9;
+.formElementSettings__subRepeaterWrapper {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 7px;
+}
+
+.formElementSettings__subRepeaterItem {
+  display: grid;
+  grid-template-columns: 9.3fr 0.7fr;
+  gap: 12px;
+
+  > div {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+
+    input, select, .p-dropdown {
+      width: 100%;
+      box-sizing: border-box;
+    }
+  }
+}
+
+.formElementSettings__repeaterItemIconBtn {
+  border: none;
+  background: transparent;
+  padding: 0;
+  font-size: 2rem;
+  color: var(--table-border-color);
+
+  i {
+    font-size: 2rem;
+  }
+
+  &:hover {
+    cursor: pointer;
+    color: var(--menuitem-active-background);
+  }
+
+  &:not([data-active="false"]) {
+    color: var(--menuitem-active-background);
+  }
 }

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

@@ -22,7 +22,7 @@ const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => {
         options: __('Opzioni', 'gepafin'),
         mime: __('Tipo di file', 'gepafin'),
         text: __('Testo formattato', 'gepafin'),
-        table_columns: __('Colonne', 'gepafin'),
+        table_columns: '',
     }
 
     const renderHeader = () => {

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { wrap } from 'object-path-immutable';
 import { pathOr } from 'ramda';
 
@@ -10,6 +10,7 @@ import { InputSwitch } from 'primereact/inputswitch';
 
 // tools
 import uniqid from '../../../../../../helpers/uniqid';
+import { Dropdown } from 'primereact/dropdown';
 
 const ElementSettingTableColumns = ({
                                         value,
@@ -55,6 +56,16 @@ const ElementSettingTableColumns = ({
         setStateFieldData(newData);
     }
 
+    const onTypeChange = (value, index) => {
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.fieldtype = value;
+            }
+            return o;
+        })
+        setStateFieldData(newData);
+    }
+
     const onSubInputChange = (e, name, index) => {
         const { value } = e.target;
         const newRowsData = wrap(rowsData).set([index, name], value).value();
@@ -83,21 +94,69 @@ const ElementSettingTableColumns = ({
         setStateFieldData(newData);
     }
 
-    const properField = (item, i) => {
+    const setColFormulaChecked = (index) => {
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.enableFormula = o.enableFormula !== true;
+            }
+            return o;
+        });
+        setStateFieldData(newData);
+    }
+
+    const properFields = (item, i) => {
         return <>
-            <InputText value={item.label} onInput={(e) => onInputChange(e, i)}/>
-            <div className="flex-1">
-                <span>{__('Predefinito?', 'gepafin')}</span>
+            <div>
+                <InputText
+                    value={item.label}
+                    placeholder={sprintf(__('Colonna %d', 'gepafin'), i)}
+                    onInput={(e) => onInputChange(e, i)}/>
+            </div>
+            <div>
+                <Dropdown
+                    value={item.fieldtype ? item.fieldtype : 'text'}
+                    onChange={(e) => onTypeChange(e.value, i)}
+                    options={[
+                        { value: 'text', label: __('Testo', 'gepafin') },
+                        { value: 'number', label: __('Numerico', 'gepafin') }
+                    ]}/>
+            </div>
+            <div>
+                <button
+                    className="formElementSettings__repeaterItemIconBtn"
+                    onClick={() => setColFormulaChecked(i)}
+                    data-active={item.enableFormula ? item.enableFormula : false}
+                    type="button">
+                    <i className="pi pi-calculator"></i>
+                </button>
+            </div>
+            <div>
                 <InputSwitch
                     checked={item.predefined}
                     disabled={bandoStatus === 'PUBLISH'}
                     onChange={(e) => setChecked(e.value, i)}/>
             </div>
+            <div>
+                <Button icon="pi pi-times"
+                        disabled={bandoStatus === 'PUBLISH'}
+                        className="p-button-danger"
+                        onClick={() => removeItem(i)}/>
+            </div>
         </>
     }
 
     const properSubField = (item, i, name) => {
-        return <InputText value={item[name]} onInput={(e) => onSubInputChange(e, name, i)}/>
+        return <>
+            <div>
+                <InputText value={item[name]} onInput={(e) => onSubInputChange(e, name, i)}/>
+            </div>
+            <div>
+                <Button icon="pi pi-times"
+                        disabled={bandoStatus === 'PUBLISH'}
+                        className="p-button-danger"
+                        onClick={() => removeRow(i)}/>
+            </div>
+        </>
     }
 
     useEffect(() => {
@@ -119,39 +178,40 @@ const ElementSettingTableColumns = ({
     return (
         <>
             <div className="formElementSettings__repeater">
+                {stateFieldData.length > 0
+                    ? <div className="formElementSettings__repeaterItem">
+                        <div>{__('Colonne', 'gepafin')}</div>
+                        <div>{__('Tipo', 'gepafin')}</div>
+                        <div>{__('Calcola', 'gepafin')}</div>
+                        <div>{__('Predefinito?', 'gepafin')}</div>
+                        <div></div>
+                    </div> : null}
                 {stateFieldData.map((o, i) => <div key={i} className="formElementSettings__repeaterItem">
-                    <div className="p-inputgroup flex-1">
-                        {properField(o, i)}
-                        <Button icon="pi pi-times" disabled={bandoStatus === 'PUBLISH'} className="p-button-danger" onClick={() => removeItem(i)}/>
-                    </div>
+                    {properFields(o, i)}
                 </div>)}
-                <Button type="button" disabled={bandoStatus === 'PUBLISH'} outlined label={__('Aggiungi', 'gepafin')} onClick={addNewItem}/>
+                <Button type="button" disabled={bandoStatus === 'PUBLISH'} outlined
+                        label={__('Aggiungi colonna', 'gepafin')} onClick={addNewItem}/>
             </div>
             {stateFieldData
-                .filter(o => o.predefined)
-                .map((o, i) => <div key={i} className="formElementSettings__repeaterItem">
-                    <div className="formElementSettings__repeater formElementSettings__subRepeater">
-                        <label>{__('Righe per colonna:', 'gepafin')} <strong>{o.label}</strong></label>
-                        <div className="formElementSettings__repeater">
-                            {rowsData.map((c, k) => {
-                                return <div key={k} className="formElementSettings__repeaterItem">
-                                    <div className="p-inputgroup flex-1">
+                .filter(o => o.predefined).length > 0
+                ? <div className="formElementSettings__subRepeaterWrapper">
+                    {stateFieldData
+                        .filter(o => o.predefined)
+                        .map((o, i) =>
+                            <div key={i} className="formElementSettings__subRepeaterWrapper">
+                                {rowsData.map((c, k) => {
+                                    return <div key={k} className="formElementSettings__subRepeaterItem">
                                         {properSubField(c, k, o.name)}
-                                        <Button icon="pi pi-times"
-                                                disabled={bandoStatus === 'PUBLISH'}
-                                                className="p-button-danger"
-                                                onClick={() => removeRow(k)}/>
                                     </div>
-                                </div>
-                            })}
-                            <Button type="button"
-                                    outlined
-                                    disabled={bandoStatus === 'PUBLISH'}
-                                    label={__('Aggiungi una riga', 'gepafin')}
-                                    onClick={addNewRow}/>
-                        </div>
-                    </div>
-                </div>)}
+                                })}
+                                <Button type="button"
+                                        outlined
+                                        disabled={bandoStatus === 'PUBLISH'}
+                                        label={__('Aggiungi una riga', 'gepafin')}
+                                        onClick={addNewRow}/>
+                            </div>)}
+                </div>
+                : null}
         </>
     )
 }