- added accordions for table rows;

This commit is contained in:
Vitalii Kiiko
2025-01-07 11:33:18 +01:00
parent 67030578d6
commit f052be6ce8
2 changed files with 43 additions and 33 deletions

View File

@@ -290,21 +290,23 @@ const BandoForms = () => {
<h2>{__('Modifica form esistente', 'gepafin')}</h2> <h2>{__('Modifica form esistente', 'gepafin')}</h2>
<div className="row"> <div className="row">
<p>{__('Continua a lavorare su un form precedentemente salvato', 'gepafin')}</p> <p>{__('Continua a lavorare su un form precedentemente salvato', 'gepafin')}</p>
<Dropdown <div className="row">
id="form" <Dropdown
disabled={isEmpty(forms)} id="form"
value={selectedForm} disabled={isEmpty(forms)}
onChange={(e) => setSelectedForm(e.value)} value={selectedForm}
options={forms} onChange={(e) => setSelectedForm(e.value)}
optionLabel="label" options={forms}
placeholder={__('Seleziona form', 'gepafin')}/> optionLabel="label"
<Button placeholder={__('Seleziona form', 'gepafin')}/>
type="button" <Button
outlined type="button"
disabled={!selectedForm} outlined
onClick={goToEditForm} disabled={!selectedForm}
label={__('Modifica', 'gepafin')} onClick={goToEditForm}
icon="pi pi-cog" iconPos="right"/> label={__('Modifica', 'gepafin')}
icon="pi pi-cog" iconPos="right"/>
</div>
</div> </div>
</div> </div>

View File

@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { __, sprintf } from '@wordpress/i18n'; import { __, sprintf } from '@wordpress/i18n';
import { wrap } from 'object-path-immutable'; import { wrap } from 'object-path-immutable';
import { pathOr } from 'ramda'; import { isEmpty, pathOr } from 'ramda';
// components // components
import { InputText } from 'primereact/inputtext'; import { InputText } from 'primereact/inputtext';
@@ -11,6 +11,7 @@ import { InputSwitch } from 'primereact/inputswitch';
// tools // tools
import uniqid from '../../../../../../helpers/uniqid'; import uniqid from '../../../../../../helpers/uniqid';
import { Dropdown } from 'primereact/dropdown'; import { Dropdown } from 'primereact/dropdown';
import { Accordion, AccordionTab } from 'primereact/accordion';
const ElementSettingTableColumns = ({ const ElementSettingTableColumns = ({
value, value,
@@ -109,7 +110,7 @@ const ElementSettingTableColumns = ({
<div> <div>
<InputText <InputText
value={item.label} value={item.label}
placeholder={sprintf(__('Colonna %d', 'gepafin'), i)} placeholder={sprintf(__('Colonna %d', 'gepafin'), i + 1)}
onInput={(e) => onInputChange(e, i)}/> onInput={(e) => onInputChange(e, i)}/>
</div> </div>
<div> <div>
@@ -173,7 +174,7 @@ const ElementSettingTableColumns = ({
}); });
}, [stateFieldData, rowsData]); }, [stateFieldData, rowsData]);
stateFieldData.filter(o => o.predefined) //stateFieldData.filter(o => o.predefined)
return ( return (
<> <>
@@ -195,21 +196,28 @@ const ElementSettingTableColumns = ({
{stateFieldData {stateFieldData
.filter(o => o.predefined).length > 0 .filter(o => o.predefined).length > 0
? <div className="formElementSettings__subRepeaterWrapper"> ? <div className="formElementSettings__subRepeaterWrapper">
{stateFieldData <Accordion activeIndex={0}>
.filter(o => o.predefined) {stateFieldData
.map((o, i) => //.filter(o => o.predefined)
<div key={i} className="formElementSettings__subRepeaterWrapper"> .map((o, i) =>
{rowsData.map((c, k) => { o.predefined
return <div key={k} className="formElementSettings__subRepeaterItem"> ? <AccordionTab
{properSubField(c, k, o.name)} key={i}
</div> header={sprintf(__('Righe per colonna: %s'), !isEmpty(o.label) ? o.label : i + 1)}>
})} <div className="formElementSettings__subRepeaterWrapper">
<Button type="button" {rowsData.map((c, k) => {
outlined return <div key={k} className="formElementSettings__subRepeaterItem">
disabled={bandoStatus === 'PUBLISH'} {properSubField(c, k, o.name)}
label={__('Aggiungi una riga', 'gepafin')} </div>
onClick={addNewRow}/> })}
</div>)} <Button type="button"
outlined
disabled={bandoStatus === 'PUBLISH'}
label={__('Aggiungi una riga', 'gepafin')}
onClick={addNewRow}/>
</div>
</AccordionTab> : null)}
</Accordion>
</div> </div>
: null} : null}
</> </>