- saving progress - amendment page works for both instructor and beneficiary;

This commit is contained in:
Vitalii Kiiko
2024-12-18 15:00:17 +01:00
parent 6724b9a5ba
commit 23525141b1
8 changed files with 170 additions and 134 deletions

View File

@@ -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>)}