- saving progress;

src/assets/scss/components/appForm.scss

@@ -109,6 +109,12 @@
       background-color: var(--table-border-color)
     }
   }
+  
+  &.fileselect {
+    .fileselectInner {
+      flex-direction: row;
+    }
+  }
 }
 
 .appForm__field--required.appForm__field--required {

src/assets/scss/components/misc.scss

@@ -167,6 +167,13 @@
   }
 }
 
+.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+  color: white;
+}
+.p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+  color: white;
+}
+
 .p-inputnumber-input[readonly] {
   background-color: #e1e1e1;
 }

src/components/DataTableAsync/DataTableAsync.js

@@ -1,41 +1,101 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { __ } from '@wordpress/i18n';
 
+import translationStrings from '../../translationStringsForComponents';
+
 // components
 import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import BandoService from '../../service/bando-service';
 
-import translationStrings from '../../translationStringsForComponents';
+const DataTableAsync = () => {
-
+    const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
-const DataTableAsync = ({
+    const [items, setItems] = useState(null);
-                            items = [],
+    const [totalRecordsNum, setTotalRecordsNum] = useState(0);
-                            totalRecordsNum = 0,
+    const [lazyState, setLazyState] = useState({
-                            isLoading = false,
+        first: 0,
-                            onPageChangeFn = () => {
+        rows: 5,
+        page: 1,
+        sortField: null,
+        sortOrder: null,
+        filters: {
+            name: { value: '', matchMode: 'contains' }
         }
-                        }) => {
+    });
+
+    const getPaginationQuery = () => {
+        return {
+            "globalFilters": {
+                "page": 0,
+                "limit": lazyState.rows,
+                "sortBy": {
+                    "columnName": "ID",
+                    "sortDesc": true
+                }
+            }
+        }
+    }
+
+    const onPage = (event) => {
+        setLazyState(event);
+    };
+
+    const onSort = (event) => {
+        setLazyState(event);
+    };
+
+    const onFilter = (event) => {
+        event['first'] = 0;
+        setLazyState(event);
+    };
+
+    const getCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            const { body, totalRecords, currentPage, totalPages, pageSize } = data.data;
+            setTotalRecordsNum(totalRecords);
+            const newItems = body.filter(o => o.status === 'PUBLISH');
+            setItems(getFormattedBandiData(newItems));
+        }
+        setLocalAsyncRequest(false);
+    }
+
+    const errGetCallbacks = (data) => {
+        setLocalAsyncRequest(false);
+    }
+
+    const getFormattedBandiData = (data) => {
+        return [...(data || [])].map((d) => {
+            d.start_date = new Date(d.dates[0]);
+            d.end_date = new Date(d.dates[1]);
+
+            return d;
+        });
+    };
+
+    useEffect(() => {
+        console.log(lazyState)
+    }, [lazyState]);
+
+    useEffect(() => {
+        if (!localAsyncRequest) {
+            setLocalAsyncRequest(true);
+            const paginationQuery = getPaginationQuery();
+            BandoService.getBandiPaginated(paginationQuery, getCallback, errGetCallbacks);
+        }
+    }, []);
 
     return (
         <div className="appPageSection__table">
-            <DataTable value={items}
+            <DataTable
-                       paginator
+                value={items} stripedRows showGridlines
-                       showGridlines
+                lazy filterDisplay="row" dataKey="id" paginator
-                       lazy
+                first={lazyState.first} rows={lazyState.rows} totalRecords={totalRecordsNum} onPage={onPage}
-                       totalRecords={totalRecordsNum}
+                onSort={onSort} sortField={lazyState.sortField} sortOrder={lazyState.sortOrder}
-                       onPage={onPageChangeFn}
+                onFilter={onFilter} filters={lazyState.filters} loading={localAsyncRequest}
-                       rows={5}
+                emptyMessage={translationStrings.emptyMessage}>
-                       loading={isLoading}
+                <Column field="name" filterField="name" filter
-                       dataKey="id"
-                       filters={filters}
-                       stripedRows
-                       removableSort
-                       header={header}
-                       emptyMessage={translationStrings.emptyMessage}
-                       onFilter={(e) => setFilters(e.filters)}>
-                <Column field="name"
                         header={__('Nome Bando', 'gepafin')}
-                        filter sortable
-                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
                         style={{ minWidth: '8rem' }}/>
             </DataTable>
         </div>

src/components/FormField/components/FileSelect/index.js

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react';
+import { classNames } from 'primereact/utils';
+
+// components
+import { ListBox } from 'primereact/listbox';
+import { Button } from 'primereact/button';
+import { __ } from '@wordpress/i18n';
+
+const FileSelect = ({
+                       fieldName,
+                       label,
+                        register,
+                       errors,
+                       defaultValue,
+                       config = {},
+                       infoText = null,
+                       disabled = false,
+
+                   }) => {
+    const [stateFieldData, setStateFieldData] = useState([]);
+    const [selectedUnconfirmed, setSelectedUnconfirmed] = useState(null);
+    const cities = [
+        {
+            label: 'Germany',
+            code: 'DE',
+            items: [
+                { label: 'Berlin', value: 'berlin' },
+                { label: 'Frankfurt', value: 'frankfurt' },
+                { label: 'Hamburg', value: 'hamburg' },
+                { label: 'Munich', value: 'munich' }
+            ]
+        },
+        {
+            label: 'USA',
+            code: 'US',
+            items: [
+                { label: 'Chicago', value: 'chicago' },
+                { label: 'Los Angeles', value: 'los Angeles' },
+                { label: 'New York', value: 'New York' },
+                { label: 'San Francisco', value: 'San Francisco' }
+            ]
+        },
+        {
+            label: 'Japan',
+            code: 'JP',
+            items: [
+                { label: 'Kyoto', value: 'Kyoto' },
+                { label: 'Osaka', value: 'Osaka' },
+                { label: 'Tokyo', value: 'Tokyo' },
+                { label: 'Yokohama', value: 'Yokohama' }
+            ]
+        }
+    ];
+
+    useEffect(() => {
+        console.log('selectedUnconfirmed', selectedUnconfirmed)
+    }, [selectedUnconfirmed]);
+
+    useEffect(() => {
+        setStateFieldData(defaultValue);
+        register(fieldName, config)
+    }, []);
+
+    useEffect(() => {
+        setStateFieldData(defaultValue);
+    }, [defaultValue]);
+
+    return (
+        <>
+            <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
+                {label}{config.required || config.isRequired ? <span className="appForm__field--required">*</span> : null}
+            </label>
+            <div className="fileselectInner">
+                <ListBox multiple
+                         value={selectedUnconfirmed}
+                         onChange={(e) => setSelectedUnconfirmed(e.value)}
+                         options={cities}
+                         optionLabel="label"
+                         optionGroupLabel="label"
+                         optionGroupChildren="items"
+                         className="w-full md:w-14rem"
+                         listStyle={{ maxHeight: '130px' }} />
+                <div className="">
+                    <Button
+                        severity="success"
+                        label={__('Conferma selezionati', 'gepafin')} icon="pi pi-plus" size="small" iconPos="right" />
+                    <p>{__('Selezionati')}</p>
+                    <ul>
+
+                    </ul>
+                </div>
+            </div>
+            {infoText ? <small>{infoText}</small> : null}
+        </>)
+}
+
+export default FileSelect;

src/components/FormField/index.js

@@ -18,6 +18,7 @@ import Fileupload from './components/Fileupload';
 import Table from './components/Table';
 import PasswordField from './components/PasswordField';
 import CriteriaTable from './components/CriteriaTable';
+import FileSelect from './components/FileSelect';
 
 const FormField = (props) => {
     const fields = {
@@ -35,7 +36,8 @@ const FormField = (props) => {
         checkboxes: Checkboxes,
         table: Table,
         criteria_table: CriteriaTable,
-        password: PasswordField
+        password: PasswordField,
+        fileselect: FileSelect,
     }
     const Comp = !isNil(fields[props.type]) ? fields[props.type] : null;
 

src/pages/BandoEdit/components/BandoEditFormStep3/index.js

@@ -78,7 +78,11 @@ const BandoEditFormStep3 = forwardRef(function () {
     const getElementItemsCallback = (data) => {
         if (data.status === 'SUCCESS') {
             //storeSet.main.elementItems(elementItems.sort((a, b) => a.sortOrder - b.sortOrder));
-            storeSet.main.elementItems(data.data.sort((a, b) => a.sortOrder - b.sortOrder));
+            storeSet.main.elementItems(
+                data.data
+                    .filter(o => !['fileselect'].includes(o.name))
+                    .sort((a, b) => a.sortOrder - b.sortOrder)
+            );
         }
         storeSet.main.unsetAsyncRequest();
     }

src/pages/BandoFormsEdit/index.js

@@ -24,7 +24,7 @@ import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
 import BandoService from '../../service/bando-service';
 
 // TODO temp data
-//import { elementItems } from '../../tempData';
+import { elementItems } from '../../tempData';
 
 const BandoFormsEdit = () => {
     const { id, formId } = useParams();
@@ -215,10 +215,10 @@ const BandoFormsEdit = () => {
 
     const getElementItemsCallback = (data) => {
         if (data.status === 'SUCCESS') {
-            //storeSet.main.elementItems(elementItems.sort((a, b) => a.sortOrder - b.sortOrder));
+            storeSet.main.elementItems(elementItems.sort((a, b) => a.sortOrder - b.sortOrder));
-            storeSet.main.elementItems(data.data
+            /*storeSet.main.elementItems(data.data
                 .filter(o => o.id !== 22)
-                .sort((a, b) => a.sortOrder - b.sortOrder));
+                .sort((a, b) => a.sortOrder - b.sortOrder));*/
         }
         storeSet.main.unsetAsyncRequest();
     }

src/pages/Dashboard/components/LatestBandiTableAsync/index.js

@@ -0,0 +1,194 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { __ } from '@wordpress/i18n';
+
+import translationStrings from '../../../../translationStringsForComponents';
+
+// api
+import BandoService from '../../../../service/bando-service';
+
+// components
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Link } from 'react-router-dom';
+import { Button } from 'primereact/button';
+import ProperBandoLabel from '../../../../components/ProperBandoLabel';
+import { Dropdown } from 'primereact/dropdown';
+import { Tag } from 'primereact/tag';
+import getBandoLabel from '../../../../helpers/getBandoLabel';
+import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+
+const LatestBandiTableAsync = () => {
+    const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
+    const [items, setItems] = useState(null);
+    const [totalRecordsNum, setTotalRecordsNum] = useState(0);
+    const [lazyState, setLazyState] = useState({
+        first: 0,
+        rows: 5,
+        page: 0,
+        sortField: null,
+        sortOrder: null,
+        filters: {
+            name: { value: '', matchMode: 'contains' },
+            status: { value: '', matchMode: 'contains' }
+        }
+    });
+    const statuses = ['PUBLISH'];
+
+    const getPaginationQuery = useCallback(() => {
+        let sortBy = {
+            "columnName": "ID",
+            "sortDesc": true
+        };
+
+        if (lazyState.sortField) {
+            sortBy = {
+                "columnName": lazyState.sortField,
+                "sortDesc": lazyState.sortOrder === -1
+            }
+        }
+        return {
+            "globalFilters": {
+                "page": lazyState.page ? lazyState.page + 1 : 1,
+                "limit": lazyState.rows,
+                sortBy,
+                status: statuses
+            }
+        }
+    }, [lazyState]);
+
+    const onPage = (event) => {
+        console.log('onPage', event);
+        setLazyState(event);
+    };
+
+    const onSort = (event) => {
+        console.log('onSort', event);
+        setLazyState(event);
+    };
+
+    const onFilter = useCallback((event) => {
+        console.log('onFilter', event);
+        event['first'] = 0;
+        setLazyState(event);
+    }, [lazyState]);
+
+    const getCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            const { body, totalRecords, currentPage, totalPages, pageSize } = data.data;
+            setTotalRecordsNum(totalRecords);
+            //const newItems = body.filter(o => o.status === 'PUBLISH');
+            setItems(getFormattedBandiData(body));
+        }
+        setLocalAsyncRequest(false);
+    }
+
+    const errGetCallbacks = (data) => {
+        setLocalAsyncRequest(false);
+    }
+
+    const getFormattedBandiData = (data) => {
+        return [...(data || [])].map((d) => {
+            d.start_date = new Date(d.dates[0]);
+            d.end_date = new Date(d.dates[1]);
+
+            return d;
+        });
+    };
+
+    const actionsBodyTemplate = (rowData) => {
+        return <Link to={`/bandi/${rowData.id}`}>
+            <Button severity="info" label={__('Modifica', 'gepafin')} icon="pi pi-pencil" size="small" iconPos="right" />
+        </Link>
+    }
+
+    const statusBodyTemplate = (rowData) => {
+        return <ProperBandoLabel status={rowData.status}/>;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={getBandoLabel(option)} severity={getBandoSeverity(option)}/>;
+    };
+
+    const statusFilterTemplate = (options) => {
+        return <Dropdown value={options.value} options={statuses}
+                         onChange={(e) => {
+                             options.filterCallback(e.value, options.index)
+                             const filters = { ...lazyState.filters };
+                             if (e.value) {
+                                 filters['status'] = { value: e.value, matchMode: 'equals' };
+                             } else {
+                                 delete filters['status'];
+                             }
+                             setLazyState({ ...lazyState, filters, first: 0 });
+                         }}
+                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"
+                         showClear/>;
+    };
+
+    const dateStartBodyTemplate = (rowData) => {
+        return formatDate(rowData.start_date);
+    };
+
+    const dateEndBodyTemplate = (rowData) => {
+        return formatDate(rowData.end_date);
+    };
+
+    const formatDate = (value) => {
+        return value.toLocaleDateString('it-IT', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        });
+    };
+
+    useEffect(() => {
+        console.log('lazyState', lazyState)
+        /*const paginationQuery = getPaginationQuery();
+        console.log('paginationQuery', paginationQuery)*/
+        setLocalAsyncRequest(true);
+        const paginationQuery = getPaginationQuery();
+        console.log('paginationQuery', paginationQuery)
+        BandoService.getBandiPaginated(paginationQuery, getCallback, errGetCallbacks);
+    }, [lazyState]);
+
+    useEffect(() => {
+        if (!localAsyncRequest) {
+            setLocalAsyncRequest(true);
+            const paginationQuery = getPaginationQuery();
+            BandoService.getBandiPaginated(paginationQuery, getCallback, errGetCallbacks);
+        }
+    }, []);
+
+    return (
+        <div className="appPageSection__table">
+            <DataTable
+                value={items} stripedRows showGridlines
+                lazy filterDisplay="menu" dataKey="id" paginator
+                first={lazyState.first} rows={lazyState.rows} totalRecords={totalRecordsNum} onPage={onPage}
+                onSort={onSort} sortField={lazyState.sortField} sortOrder={lazyState.sortOrder}
+                onFilter={onFilter} filters={lazyState.filters} loading={localAsyncRequest}
+                emptyMessage={translationStrings.emptyMessage}>
+                <Column field="name"
+                        sortable
+                        filterField="name" filter filterMatchModeOptions={['contains']}
+                        header={__('Nome Bando', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+                <Column header={__('Data Pubblicazione', 'gepafin')}
+                        style={{ minWidth: '8rem' }}
+                        body={dateStartBodyTemplate}/>
+                <Column header={__('Data Scadenza', 'gepafin')}
+                        style={{ minWidth: '8rem' }}
+                        body={dateEndBodyTemplate}/>
+                <Column field="status"
+                        filterElement={statusFilterTemplate} filter filterMatchModeOptions={['contains']}
+                        header={__('Stato', 'gepafin')}
+                        style={{ minWidth: '7rem' }}
+                        body={statusBodyTemplate} />
+                <Column header={__('Azioni', 'gepafin')}
+                        body={actionsBodyTemplate}/>
+            </DataTable>
+        </div>
+    )
+}
+
+export default LatestBandiTableAsync;

src/pages/Dashboard/index.js

@@ -14,6 +14,7 @@ import AllDomandeTable from '../Domande/components/AllDomandeTable';
 import DraftApplicationsTable from './components/DraftApplicationsTable';
 import ChartDomandePerBando from '../../components/ChartDomandePerBando';
 import ChartStatoDomande from '../../components/ChartStatoDomande';
+import LatestBandiTableAsync from './components/LatestBandiTableAsync';
 
 const Dashboard = () => {
     const navigate = useNavigate();
@@ -121,7 +122,8 @@ const Dashboard = () => {
 
             <div className="appPageSection">
                 <h2>{__('Ultimi bandi pubblicati', 'gepafin')}</h2>
-                <LatestBandiTable/>
+                <LatestBandiTableAsync/>
+                {/*<LatestBandiTable/>*/}
             </div>
 
             <div className="appPage__spacer"></div>

src/tempData.js

@@ -483,5 +483,25 @@ export const elementItems = [
         validators: {
             isRequired: false
         }
+    },
+    {
+        id: 23,
+        sortOrder: 23,
+        name: 'fileselect',
+        label: 'Seleziona File',
+        description: "Per selezionare di documenti o immagini",
+        settings: [
+            {
+                name: "label",
+                value: "Seleziona File"
+            },
+            {
+                name: "isDelegation",
+                value: false
+            }
+        ],
+        validators: {
+            isRequired: false
+        }
     }
 ]