- saving progress - amendment page works for both instructor and beneficiary;
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { wrap } from 'object-path-immutable';
|
||||
import { findIndex, propEq } from 'ramda';
|
||||
import { pathOr } from 'ramda';
|
||||
|
||||
// components
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
@@ -14,7 +14,8 @@ import uniqid from '../../../../../../helpers/uniqid';
|
||||
const ElementSettingTableColumns = ({
|
||||
value,
|
||||
name,
|
||||
setDataFn
|
||||
setDataFn,
|
||||
bandoStatus
|
||||
}) => {
|
||||
const [stateFieldData, setStateFieldData] = useState([]);
|
||||
const [rowsData, setRowsData] = useState([]);
|
||||
@@ -28,18 +29,19 @@ const ElementSettingTableColumns = ({
|
||||
setStateFieldData([...stateFieldData, { name: uniqid('o'), label: '', predefined: false }]);
|
||||
}
|
||||
|
||||
const addNewRow = (index) => {
|
||||
const newStateFieldData = wrap(stateFieldData)
|
||||
.insert([index, 'rows'], { label: '' }, stateFieldData[index].rows.length)
|
||||
.value();
|
||||
setStateFieldData(newStateFieldData);
|
||||
const addNewRow = () => {
|
||||
const obj = stateFieldData
|
||||
.filter(o => o.predefined)
|
||||
.reduce((acc, cur) => {
|
||||
acc[cur.name] = ''
|
||||
return acc;
|
||||
}, {});
|
||||
setRowsData([...rowsData, obj]);
|
||||
}
|
||||
|
||||
const removeRow = (index, indexK) => {
|
||||
const newStateFieldData = wrap(stateFieldData)
|
||||
.del([index, 'rows', indexK])
|
||||
.value();
|
||||
setStateFieldData(newStateFieldData);
|
||||
const removeRow = (index) => {
|
||||
const newRowsData = wrap(rowsData).del([index]).value();
|
||||
setRowsData(newRowsData);
|
||||
}
|
||||
|
||||
const onInputChange = (e, index) => {
|
||||
@@ -53,24 +55,31 @@ const ElementSettingTableColumns = ({
|
||||
setStateFieldData(newData);
|
||||
}
|
||||
|
||||
const onSubInputChange = (e, index, indexK) => {
|
||||
const onSubInputChange = (e, name, index) => {
|
||||
const { value } = e.target;
|
||||
const newStateFieldData = wrap(stateFieldData)
|
||||
.set([index, 'rows', indexK, 'label'], value)
|
||||
.value();
|
||||
setStateFieldData(newStateFieldData);
|
||||
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;
|
||||
if (value === false) {
|
||||
o.rows = [];
|
||||
}
|
||||
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);
|
||||
}
|
||||
|
||||
@@ -79,23 +88,31 @@ const ElementSettingTableColumns = ({
|
||||
<InputText value={item.label} onInput={(e) => onInputChange(e, i)}/>
|
||||
<div className="flex-1">
|
||||
<span>{__('Predefinito?', 'gepafin')}</span>
|
||||
<InputSwitch checked={item.predefined} onChange={(e) => setChecked(e.value, i)}/>
|
||||
<InputSwitch
|
||||
checked={item.predefined}
|
||||
disabled={bandoStatus === 'PUBLISH'}
|
||||
onChange={(e) => setChecked(e.value, i)}/>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
const properSubField = (item, i, k) => {
|
||||
return <InputText value={item.label} onInput={(e) => onSubInputChange(e, i, k)}/>
|
||||
const properSubField = (item, i, name) => {
|
||||
return <InputText value={item[name]} onInput={(e) => onSubInputChange(e, name, i)}/>
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const storeFieldData = value ?? [];
|
||||
setStateFieldData(storeFieldData);
|
||||
const stateFieldData = pathOr([], ['stateFieldData'], value);
|
||||
setStateFieldData(stateFieldData);
|
||||
const rowsData = pathOr([], ['rowsData'], value);
|
||||
setRowsData(rowsData);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setDataFn(name, [...stateFieldData]);
|
||||
}, [stateFieldData]);
|
||||
setDataFn(name, {
|
||||
stateFieldData,
|
||||
rowsData
|
||||
});
|
||||
}, [stateFieldData, rowsData]);
|
||||
|
||||
stateFieldData.filter(o => o.predefined)
|
||||
|
||||
@@ -105,10 +122,10 @@ const ElementSettingTableColumns = ({
|
||||
{stateFieldData.map((o, i) => <div key={i} className="formElementSettings__repeaterItem">
|
||||
<div className="p-inputgroup flex-1">
|
||||
{properField(o, i)}
|
||||
<Button icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
|
||||
<Button icon="pi pi-times" disabled={bandoStatus === 'PUBLISH'} className="p-button-danger" onClick={() => removeItem(i)}/>
|
||||
</div>
|
||||
</div>)}
|
||||
<Button type="button" outlined label={__('Aggiungi', 'gepafin')} onClick={addNewItem}/>
|
||||
<Button type="button" disabled={bandoStatus === 'PUBLISH'} outlined label={__('Aggiungi', 'gepafin')} onClick={addNewItem}/>
|
||||
</div>
|
||||
{stateFieldData
|
||||
.filter(o => o.predefined)
|
||||
@@ -116,19 +133,22 @@ const ElementSettingTableColumns = ({
|
||||
<div className="formElementSettings__repeater formElementSettings__subRepeater">
|
||||
<label>{__('Righe per colonna:', 'gepafin')} <strong>{o.label}</strong></label>
|
||||
<div className="formElementSettings__repeater">
|
||||
{o.rows.map((c, k) => {
|
||||
const properIndex = findIndex(propEq(o.name, 'name'))(stateFieldData);
|
||||
{rowsData.map((c, k) => {
|
||||
return <div key={k} className="formElementSettings__repeaterItem">
|
||||
<div className="p-inputgroup flex-1">
|
||||
{properSubField(c, properIndex, k)}
|
||||
<Button icon="pi pi-times" className="p-button-danger"
|
||||
onClick={() => removeRow(properIndex, k)}/>
|
||||
{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
|
||||
<Button type="button"
|
||||
outlined
|
||||
disabled={bandoStatus === 'PUBLISH'}
|
||||
label={__('Aggiungi una riga', 'gepafin')}
|
||||
onClick={() => addNewRow(findIndex(propEq(o.name, 'name'))(stateFieldData))}/>
|
||||
onClick={addNewRow}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>)}
|
||||
|
||||
Reference in New Issue
Block a user