- added accordions for table rows;

src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingTableColumns/index.js

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