diff --git a/src/assets/scss/components/formBuilder.scss b/src/assets/scss/components/formBuilder.scss index 0eac29a..40ba8ca 100644 --- a/src/assets/scss/components/formBuilder.scss +++ b/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); + } } \ No newline at end of file diff --git a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js index 1da64fa..a226f8c 100644 --- a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js +++ b/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 = () => { diff --git a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js index ee5d9aa..fa3320d 100644 --- a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js +++ b/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 <> - onInputChange(e, i)}/> -
- {__('Predefinito?', 'gepafin')} +
+ onInputChange(e, i)}/> +
+
+ onTypeChange(e.value, i)} + options={[ + { value: 'text', label: __('Testo', 'gepafin') }, + { value: 'number', label: __('Numerico', 'gepafin') } + ]}/> +
+
+ +
+
setChecked(e.value, i)}/>
+
+
} const properSubField = (item, i, name) => { - return onSubInputChange(e, name, i)}/> + return <> +
+ onSubInputChange(e, name, i)}/> +
+
+
+ } useEffect(() => { @@ -119,39 +178,40 @@ const ElementSettingTableColumns = ({ return ( <>
+ {stateFieldData.length > 0 + ?
+
{__('Colonne', 'gepafin')}
+
{__('Tipo', 'gepafin')}
+
{__('Calcola', 'gepafin')}
+
{__('Predefinito?', 'gepafin')}
+
+
: null} {stateFieldData.map((o, i) =>
-
- {properField(o, i)} -
+ {properFields(o, i)}
)} -
{stateFieldData - .filter(o => o.predefined) - .map((o, i) =>
-
- -
- {rowsData.map((c, k) => { - return
-
+ .filter(o => o.predefined).length > 0 + ?
+ {stateFieldData + .filter(o => o.predefined) + .map((o, i) => +
+ {rowsData.map((c, k) => { + return
{properSubField(c, k, o.name)} -
-
- })} -
-
-
)} + })} +
)} +
+ : null} ) }