Merge pull request #29 from Kitzanos/feature/30-better-tables

Feature/30 better tables

src/pages/BandoForms/index.js

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

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

@@ -23,7 +23,7 @@ const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => {
         options: __('Opzioni', 'gepafin'),
         mime: __('Tipo di file', 'gepafin'),
         text: __('Testo formattato', 'gepafin'),
-        table_columns: __('Colonne', 'gepafin'),
+        table_columns: '',
     }
 
     const renderHeader = () => {

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

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react';
-import { __ } from '@wordpress/i18n';
+import React, { useCallback, 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';
@@ -10,6 +10,8 @@ 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,
@@ -55,6 +57,37 @@ const ElementSettingTableColumns = ({
         setStateFieldData(newData);
     }
 
+    const onLastRowInputChange = (e, index) => {
+        const { value } = e.target;
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.lastRowText = value;
+            }
+            return o;
+        })
+        setStateFieldData(newData);
+    }
+
+    const onTypeChange = (value, index) => {
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.fieldtype = value;
+            }
+            return o;
+        })
+        setStateFieldData(newData);
+    }
+
+    const onLastRowFormulaChange = (value, index) => {
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.lastRowFormula = value;
+            }
+            return o;
+        })
+        setStateFieldData(newData);
+    }
+
     const onSubInputChange = (e, name, index) => {
         const { value } = e.target;
         const newRowsData = wrap(rowsData).set([index, name], value).value();
@@ -83,23 +116,124 @@ const ElementSettingTableColumns = ({
         setStateFieldData(newData);
     }
 
-    const properField = (item, i) => {
+    const setColFormulaChecked = (index) => {
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                const newVal = o.enableFormula !== true;
+                o.enableFormula = newVal;
+                if (newVal) {
+                    o.lastRowFormula = 'sum';
+                    o.fieldtype = 'numeric';
+                    delete o.lastRowText;
+                } else {
+                    delete o.lastRowFormula;
+                    delete o.fieldtype;
+                    o.lastRowText = '';
+                }
+            }
+            return o;
+        });
+        setStateFieldData(newData);
+    }
+
+    const properFields = (item, i) => {
         return <>
-            <InputText value={item.label} onInput={(e) => onInputChange(e, i)}/>
-            <div className="flex-1">
-                <span>{__('Predefinito?', 'gepafin')}</span>
+            <div>
+                <InputText
+                    value={item.label}
+                    placeholder={sprintf(__('Colonna %d', 'gepafin'), i + 1)}
+                    onInput={(e) => onInputChange(e, i)}/>
+            </div>
+            <div>
+                <Dropdown
+                    disabled={item.enableFormula}
+                    value={item.fieldtype ? item.fieldtype : 'text'}
+                    onChange={(e) => onTypeChange(e.value, i)}
+                    options={[
+                        { value: 'text', label: __('Testo', 'gepafin') },
+                        { value: 'numeric', label: __('Numerico', 'gepafin') }
+                    ]}/>
+            </div>
+            <div>
+                <button
+                    className="formElementSettings__repeaterItemIconBtn"
+                    onClick={() => setColFormulaChecked(i)}
+                    data-active={item.enableFormula ? item.enableFormula : false}
+                    type="button">
+                    <i className="pi pi-calculator"></i>
+                </button>
+            </div>
+            <div>
                 <InputSwitch
                     checked={item.predefined}
                     disabled={bandoStatus === 'PUBLISH'}
                     onChange={(e) => setChecked(e.value, i)}/>
             </div>
+            <div>
+                <Button icon="pi pi-times"
+                        disabled={bandoStatus === 'PUBLISH'}
+                        className="p-button-danger"
+                        onClick={() => removeItem(i)}/>
+            </div>
         </>
     }
 
     const properSubField = (item, i, name) => {
-        return <InputText value={item[name]} onInput={(e) => onSubInputChange(e, name, i)}/>
+        return <>
+            <div>
+                <InputText value={item[name]} onInput={(e) => onSubInputChange(e, name, i)}/>
+            </div>
+            <div>
+                <Button icon="pi pi-times"
+                        disabled={bandoStatus === 'PUBLISH'}
+                        className="p-button-danger"
+                        onClick={() => removeRow(i)}/>
+            </div>
+        </>
     }
 
+    const properFieldsLastRow = (item, i) => {
+        return <>
+            <div>
+                <span>{sprintf(__('Colonna %d'), i + 1)}</span>
+            </div>
+            {item.enableFormula
+                ? <div>
+                    <Dropdown
+                        value={item.lastRowFormula}
+                        onChange={(e) => onLastRowFormulaChange(e.value, i)}
+                        options={[
+                            { value: 'sum', label: __('Somma automatica', 'gepafin') }
+                        ]}/>
+                </div>
+                : <div>
+                    <InputText
+                        value={item.lastRowText}
+                        onInput={(e) => onLastRowInputChange(e, i)}/>
+                </div>}
+        </>
+    }
+
+    const lastRow = useCallback(() => {
+        return <div className="formElementSettings__repeater">
+            <div className="formElementSettings__lastRowHeader">
+                <div className="formElementSettings__lastRowHeaderTitle">
+                    {__('Definisci ultima righa', 'gepafin')}
+                </div>
+                <Button type="button"
+                        outlined
+                        label={__('Pulisci', 'gepafin')}
+                        iconPos="right"
+                        icon="pi pi-refresh"
+                        onClick={() => {
+                        }}/>
+            </div>
+            {stateFieldData.map((o, i) => <div key={i} className="formElementSettings__lastRowItem">
+                {properFieldsLastRow(o, i)}
+            </div>)}
+        </div>
+    }, [stateFieldData]);
+
     useEffect(() => {
         const stateFieldData = pathOr([], ['stateFieldData'], value);
         setStateFieldData(stateFieldData);
@@ -114,44 +248,51 @@ const ElementSettingTableColumns = ({
         });
     }, [stateFieldData, rowsData]);
 
-    stateFieldData.filter(o => o.predefined)
-
     return (
         <>
             <div className="formElementSettings__repeater">
+                {stateFieldData.length > 0
+                    ? <div className="formElementSettings__repeaterItem">
+                        <div>{__('Colonne', 'gepafin')}</div>
+                        <div>{__('Tipo', 'gepafin')}</div>
+                        <div>{__('Calcola', 'gepafin')}</div>
+                        <div>{__('Predefinito?', 'gepafin')}</div>
+                        <div></div>
+                    </div> : null}
                 {stateFieldData.map((o, i) => <div key={i} className="formElementSettings__repeaterItem">
-                    <div className="p-inputgroup flex-1">
-                        {properField(o, i)}
-                        <Button icon="pi pi-times" disabled={bandoStatus === 'PUBLISH'} className="p-button-danger" onClick={() => removeItem(i)}/>
-                    </div>
+                    {properFields(o, i)}
                 </div>)}
-                <Button type="button" disabled={bandoStatus === 'PUBLISH'} outlined label={__('Aggiungi', 'gepafin')} onClick={addNewItem}/>
+                <Button type="button" disabled={bandoStatus === 'PUBLISH'} outlined
+                        label={__('Aggiungi colonna', 'gepafin')} onClick={addNewItem}/>
             </div>
             {stateFieldData
-                .filter(o => o.predefined)
-                .map((o, i) => <div key={i} className="formElementSettings__repeaterItem">
-                    <div className="formElementSettings__repeater formElementSettings__subRepeater">
-                        <label>{__('Righe per colonna:', 'gepafin')} <strong>{o.label}</strong></label>
-                        <div className="formElementSettings__repeater">
-                            {rowsData.map((c, k) => {
-                                return <div key={k} className="formElementSettings__repeaterItem">
-                                    <div className="p-inputgroup flex-1">
-                                        {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
-                                    disabled={bandoStatus === 'PUBLISH'}
-                                    label={__('Aggiungi una riga', 'gepafin')}
-                                    onClick={addNewRow}/>
-                        </div>
-                    </div>
-                </div>)}
+                .filter(o => o.predefined).length > 0
+                ? <div className="formElementSettings__subRepeaterWrapper">
+                    <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}
+            {lastRow()}
         </>
     )
 }

src/pages/BandoFormsPreview/index.js

@@ -155,8 +155,8 @@ const BandoFormsPreview = () => {
                                 }, {});
 
                                 return ['paragraph'].includes(o.name) && text
-                                    ? <div>
-                                        <div className="ql-editor" key={o.id}>
+                                    ? <div key={o.id}>
+                                        <div className="ql-editor">
                                             {renderHtmlContent(text.value)}
                                         </div>
                                     </div>