diff --git a/src/assets/scss/components/formBuilder.scss b/src/assets/scss/components/formBuilder.scss index b07f322..9382f37 100644 --- a/src/assets/scss/components/formBuilder.scss +++ b/src/assets/scss/components/formBuilder.scss @@ -58,6 +58,11 @@ flex-direction: column; gap: 5px; align-items: flex-start; + + .tagHeader { + display: flex; + gap: 10px; + } } .label { diff --git a/src/assets/scss/components/misc.scss b/src/assets/scss/components/misc.scss index 8f89d4f..9f59541 100644 --- a/src/assets/scss/components/misc.scss +++ b/src/assets/scss/components/misc.scss @@ -31,6 +31,10 @@ } } .p-tag { + &.p-tag-secondary { + background-color: var(--table-border-color); + } + .p-tag-value { color: var(--menuitem-active-color); } @@ -147,7 +151,7 @@ max-width: 100%; } -.p-dropdown { +.p-dropdown, .p-chips, .p-chips-multiple-container { width: 100%; } diff --git a/src/pages/BandoFormsEdit/components/BuilderElement/index.js b/src/pages/BandoFormsEdit/components/BuilderElement/index.js index 8a7b86e..9f5e0d0 100644 --- a/src/pages/BandoFormsEdit/components/BuilderElement/index.js +++ b/src/pages/BandoFormsEdit/components/BuilderElement/index.js @@ -1,7 +1,8 @@ -import React, { useRef } from 'react' +import React, { useEffect, useRef, useState } from 'react' import { useDrag, useDrop } from 'react-dnd' import { ItemTypes } from '../ItemTypes'; import { __ } from '@wordpress/i18n'; +import { head, isEmpty } from 'ramda'; // store import { storeSet, useStore } from '../../../../store'; @@ -14,6 +15,10 @@ import BuilderElementProperLabel from '../BuilderElementProperLabel'; const BuilderElement = ({ id, name, label, index, bandoStatus }) => { const draggingElementId = useStore().main.draggingElementId(); const ref = useRef(null); + const elements = useStore().main.formElements(); + const element = head(elements.filter(o => o.id === id)); + const [isVariable, setIsVariable] = useState('secondary'); + const [isFormula, setIsFormula] = useState('secondary'); const [{ handlerId }, drop] = useDrop({ accept: ItemTypes.FIELD, @@ -97,6 +102,19 @@ const BuilderElement = ({ id, name, label, index, bandoStatus }) => { const opacity = isDragging ? 0 : 1; drag(drop(ref)); + useEffect(() => { + const variable = head(element.settings.filter(o => o.name === 'variable')); + const formula = head(element.settings.filter(o => o.name === 'formula')); + + if (variable && !isEmpty(variable.value)) { + setIsVariable('warning'); + } + + if (formula && !isEmpty(formula.value)) { + setIsFormula('warning'); + } + }, [elements]); + return ( draggingElementId === id ?
@@ -104,7 +122,13 @@ const BuilderElement = ({ id, name, label, index, bandoStatus }) => {
:
- +
+ + {name === 'numberinput' + ? : null} + {name === 'numberinput' + ? : null} +
diff --git a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js index 67c1bf0..8a5d0c8 100644 --- a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js +++ b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js @@ -11,6 +11,7 @@ import { Editor } from 'primereact/editor'; import { mimeTypes } from '../../../../../../configData'; import ElementSettingTableColumns from '../ElementSettingTableColumns'; import { InputSwitch } from 'primereact/inputswitch'; +import ElementSettingChips from '../ElementSettingChips'; const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => { @@ -24,6 +25,8 @@ const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => { mime: __('Tipo di file', 'gepafin'), text: __('Testo formattato', 'gepafin'), table_columns: '', + variable: __('Variable (only letters and "_")', 'gepafin'), + formula: __('Auto calculation formula', 'gepafin') } const renderHeader = () => { @@ -85,6 +88,11 @@ const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => { return changeFn(e.value, setting.name)}/> + } else if (['variable'].includes(setting.name)) { + return changeFn(value, setting.name)} + value={setting.value}/> } else { return { + const [lastTyped, setLastTyped] = useState([]) + + const isValidValue = (newVal) => { + const validationRegex = /^[a-zA-Z_]+$/; + return validationRegex.test(newVal); + }; + + const handleAdd = (e) => { + const newValue = e.value[e.value.length - 1]; + + if (restrictedValues.includes(newValue)) { + changeFn([]); + return; + } + + if (!isValidValue(newValue)) { + changeFn(lastTyped); + return; + } + + setLastTyped(e.value) + changeFn(e.value); + }; + + return ( +
+ +
+ ); +} + +export default ElementSettingChips; \ No newline at end of file diff --git a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns-old/index.js b/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns-old/index.js deleted file mode 100644 index ee5d9aa..0000000 --- a/src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns-old/index.js +++ /dev/null @@ -1,159 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { __ } from '@wordpress/i18n'; -import { wrap } from 'object-path-immutable'; -import { pathOr } from 'ramda'; - -// components -import { InputText } from 'primereact/inputtext'; -import { Button } from 'primereact/button'; -import { InputSwitch } from 'primereact/inputswitch'; - -// tools -import uniqid from '../../../../../../helpers/uniqid'; - -const ElementSettingTableColumns = ({ - value, - name, - setDataFn, - bandoStatus - }) => { - const [stateFieldData, setStateFieldData] = useState([]); - const [rowsData, setRowsData] = useState([]); - - const removeItem = (index) => { - const newData = stateFieldData.toSpliced(index, 1); - setStateFieldData(newData); - } - - const addNewItem = () => { - setStateFieldData([...stateFieldData, { name: uniqid('o'), label: '', predefined: false }]); - } - - const addNewRow = () => { - const obj = stateFieldData - .filter(o => o.predefined) - .reduce((acc, cur) => { - acc[cur.name] = '' - return acc; - }, {}); - setRowsData([...rowsData, obj]); - } - - const removeRow = (index) => { - const newRowsData = wrap(rowsData).del([index]).value(); - setRowsData(newRowsData); - } - - const onInputChange = (e, index) => { - const { value } = e.target; - const newData = stateFieldData.map((o, i) => { - if (i === index) { - o.label = value; - } - return o; - }) - setStateFieldData(newData); - } - - const onSubInputChange = (e, name, index) => { - const { value } = e.target; - const newRowsData = wrap(rowsData).set([index, name], value).value(); - setRowsData(newRowsData); - } - - const setChecked = (value, index) => { - let name = ''; - const newData = stateFieldData.map((o, i) => { - if (i === index) { - o.predefined = value; - name = o.name; - } - return o; - }); - - let newRowsData = []; - - if (value === false) { - newRowsData = rowsData.map(o => wrap(o).set([name], '').value()); - } else { - newRowsData = rowsData.map(o => wrap(o).set([name], '').value()); - } - - setRowsData(newRowsData); - setStateFieldData(newData); - } - - const properField = (item, i) => { - return <> - onInputChange(e, i)}/> -
- {__('Predefinito?', 'gepafin')} - setChecked(e.value, i)}/> -
- - } - - const properSubField = (item, i, name) => { - return onSubInputChange(e, name, i)}/> - } - - useEffect(() => { - const stateFieldData = pathOr([], ['stateFieldData'], value); - setStateFieldData(stateFieldData); - const rowsData = pathOr([], ['rowsData'], value); - setRowsData(rowsData); - }, []); - - useEffect(() => { - setDataFn(name, { - stateFieldData, - rowsData - }); - }, [stateFieldData, rowsData]); - - stateFieldData.filter(o => o.predefined) - - return ( - <> -
- {stateFieldData.map((o, i) =>
-
- {properField(o, i)} -
-
)} -
- {stateFieldData - .filter(o => o.predefined) - .map((o, i) =>
-
- -
- {rowsData.map((c, k) => { - return
-
- {properSubField(c, k, o.name)} -
-
- })} -
-
-
)} - - ) -} - -export default ElementSettingTableColumns; \ No newline at end of file diff --git a/src/pages/BandoFormsEdit/components/BuilderElementSettings/index.js b/src/pages/BandoFormsEdit/components/BuilderElementSettings/index.js index 3e4f66a..0c1eed9 100644 --- a/src/pages/BandoFormsEdit/components/BuilderElementSettings/index.js +++ b/src/pages/BandoFormsEdit/components/BuilderElementSettings/index.js @@ -160,7 +160,9 @@ const BuilderElementSettings = ({ closeSettingsFn, bandoStatus }) => { {settings - ? settings.map((o) => !['variable', 'formula'].includes(o.name)) + .map((o) => { placeholder={__('Scegli', 'gepafin')}/>
+ + {settings + ? settings + .filter(o => ['variable', 'formula'].includes(o.name)) + .map((o) => ) + : null} +