Merge pull request #33 from Kitzanos/feature/114-fields-calculation

Feature/114 fields calculation

package.json

@@ -4,38 +4,41 @@
   "private": true,
   "dependencies": {
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
-    "@babel/preset-react": "7.25.9",
+    "@babel/preset-react": "7.26.3",
     "@date-fns/tz": "1.2.0",
     "@emailjs/browser": "4.4.1",
-    "@emotion/styled": "11.13.5",
+    "@emotion/styled": "11.14.0",
-    "@number-flow/react": "0.4.2",
+    "@number-flow/react": "0.5.5",
-    "@sentry/browser": "8.42.0",
+    "@sentry/browser": "8.51.0",
     "@stomp/stompjs": "7.0.0",
-    "@tanstack/react-table": "8.20.5",
+    "@tanstack/react-table": "8.20.6",
-    "@wordpress/i18n": "5.13.0",
+    "@wordpress/i18n": "5.16.0",
-    "@wordpress/react-i18n": "4.13.0",
+    "@wordpress/react-i18n": "4.16.0",
     "codice-fiscale-js": "2.3.22",
     "copy-to-clipboard": "3.3.3",
     "deep-object-diff": "1.1.9",
-    "dompurify": "3.2.2",
+    "dompurify": "3.2.3",
+    "expression-language": "^1.2.0",
     "fast-deep-equal": "3.1.3",
-    "hotkeys-js": "3.13.7",
+    "hotkeys-js": "3.13.9",
-    "html-react-parser": "5.1.18",
+    "html-react-parser": "5.2.2",
     "jwt-decode": "4.0.0",
     "klona": "2.0.6",
     "leader-line-new": "1.1.9",
     "luxon": "3.5.0",
+    "mathjs": "^14.0.1",
+    "mustache": "^4.2.0",
     "object-path-immutable": "4.1.2",
     "primeicons": "7.0.0",
-    "primereact": "10.8.5",
+    "primereact": "10.9.2",
     "quill": "2.0.3",
     "ramda": "0.30.1",
     "react": "18.3.1",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "react-dom": "18.3.1",
-    "react-hook-form": "7.53.2",
+    "react-hook-form": "7.54.2",
-    "react-router-dom": "7.0.1",
+    "react-router-dom": "7.1.3",
     "react-scripts": "5.0.1",
     "recharts": "2.15.0",
     "sockjs-client": "^1.6.1",
@@ -44,14 +47,14 @@
     "zustand-x": "3.0.4"
   },
   "devDependencies": {
-    "@babel/cli": "7.25.9",
+    "@babel/cli": "7.26.4",
-    "@babel/core": "7.26.0",
+    "@babel/core": "7.26.7",
     "@babel/plugin-syntax-jsx": "7.25.9",
-    "@wordpress/babel-plugin-makepot": "6.13.0",
+    "@wordpress/babel-plugin-makepot": "6.16.0",
     "babel-plugin-macros": "3.1.0",
     "node-wp-i18n": "1.2.7",
-    "sass": "1.81.0",
+    "sass": "1.83.4",
-    "sass-loader": "16.0.3"
+    "sass-loader": "16.0.4"
   },
   "scripts": {
     "start": "GENERATE_SOURCEMAP=false react-scripts start",

src/assets/scss/components/appForm.scss

@@ -57,13 +57,10 @@
     background-color: #e3e3e3;
   }
 
-  &.table {
+  &.table, &.criteria_table {
     div.addNewTableRow {
-      width: 100%;
       text-align: center;
-      padding: 5px 0;
+      justify-content: center;
-      background: var(--table-border-color);
-      color: var(--primary-text);
 
       &:hover {
         cursor: pointer;
@@ -88,7 +85,6 @@
       color: var(--global-textColor);
       font-size: 15px;
       text-align: left;
-      text-align: start;
     }
 
     th {
@@ -97,16 +93,15 @@
     }
 
     td {
+      min-width: 120px;
       input {
         width: 100%;
-        padding: 3px 5px;
       }
     }
 
-    tfoot td,
+    tfoot td {
-    tfoot th {
+      border-top: 1px solid var(--table-border-color);
       border-top: 1px solid var(--table-border-color);
-      border-bottom: 0
     }
 
     table.striped tbody tr:nth-child(odd) td,

src/assets/scss/components/formBuilder.scss

@@ -58,6 +58,11 @@
     flex-direction: column;
     gap: 5px;
     align-items: flex-start;
+    
+    .tagHeader {
+      display: flex;
+      gap: 10px;
+    }
   }
 
   .label {
@@ -176,6 +181,44 @@
   gap: 0.5rem;
 }
 
+.formElementSettings__fieldDescription, .formElementSettings__fieldVarsList {
+  padding: 15px;
+  background-color: #ffe0c5;
+  border: 1px solid #e6a973;
+  
+  p {
+    margin: 0;
+    color: #c68e5e;
+    font-size: 15px;
+    line-height: 1.5;
+  }
+
+  code {
+    font-size: 14px;
+    padding: 3px 6px;
+    border: 1px solid #e1b48b;
+    background-color: #fbeadb;
+    border-radius: 3px;
+    user-select: all;
+  }
+}
+
+.formElementSettings__fieldVarsList {
+  background-color: #e7fddd;
+  border: 1px solid #9de673;
+
+  p {
+    color: #5eae30;
+  }
+
+  code {
+    border: 1px solid #9de673;
+    background-color: #effaea;
+    margin-right: 4px;
+    user-select: all;
+  }
+}
+
 .formElementSettings__tabs {
   width: 100%;
 

src/assets/scss/components/layout.scss

@@ -116,6 +116,20 @@ img {
           }
         }
       }
+
+      li div.nonLink {
+        display: flex;
+        padding: 10.5px 17.5px;
+        align-items: center;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 100%;
+        text-decoration: none;
+        border-bottom: 1px solid var(--menu-borderColor);
+        background-color: var(--button-secondary-borderColor);
+        color: white;
+      }
     }
   }
 

src/assets/scss/components/misc.scss

@@ -31,6 +31,10 @@
   }
 }
 .p-tag {
+  &.p-tag-secondary {
+    background-color: var(--table-border-color);
+  }
+  
   .p-tag-value {
     color: var(--menuitem-active-color);
   }
@@ -147,7 +151,7 @@
   max-width: 100%;
 }
 
-.p-dropdown {
+.p-dropdown, .p-chips, .p-chips-multiple-container {
   width: 100%;
 }
 
@@ -159,6 +163,10 @@
   }
 }
 
+.p-inputnumber-input[readonly] {
+  background-color: #e1e1e1;
+}
+
 .p-inputgroup.flex-1 {
   align-items: center;
 }

src/components/FormField/components/CriteriaTable/RenderTable/components/DefaultCell/index.js

@@ -0,0 +1,20 @@
+import { InputText } from 'primereact/inputtext';
+
+const DefaultCell = ({ getValue, row: { index }, column: { id }, table }) => {
+    const initialValue = getValue();
+    const disabled = table.options.meta?.disabled;
+
+    const onFocus = (e) => {
+        e.target.select();
+    }
+
+    return (
+        <InputText
+            value={initialValue ?? ''}
+            disabled={disabled}
+            onFocus={onFocus}
+            onChange={(e) => table.options.meta?.updateData(index, id, e.target.value)} />
+    );
+};
+
+export default DefaultCell;

src/components/FormField/components/CriteriaTable/RenderTable/components/LastRowCell/index.js

@@ -0,0 +1,14 @@
+import { head, isNil, pathOr } from 'ramda';
+
+const LastRowCell = ({columnId, lastRowCfg, columnMeta = {}, tableValue = []}) => {
+    const cellData = head(lastRowCfg.filter(o => !isNil(o[columnId])));
+    let cellValue = cellData[columnId];
+
+    if (columnMeta.enableFormula) {
+        cellValue = pathOr(0, ['total'], tableValue);
+    }
+
+    return <td>{cellValue}</td>;
+};
+
+export default LastRowCell;

src/components/FormField/components/CriteriaTable/RenderTable/components/NumericFormulaCell/index.js

@@ -0,0 +1,30 @@
+import { InputNumber } from 'primereact/inputnumber';
+
+const NumericFormulaCell = ({ getValue, row: { index }, column: { id }, table }) => {
+    const initialValue = getValue();
+    const disabled = table.options.meta?.disabled;
+
+    const onFocus = (e) => {
+        e.target.select();
+    }
+
+    const onChange = (value) => {
+        table.options.meta?.updateData(index, id, value);
+    };
+
+    return (
+        <InputNumber
+            disabled={disabled}
+            value={initialValue ?? 0}
+            onValueChange={(e) => onChange(e.value)}
+            onFocus={onFocus}
+            minFractionDigits={0}
+            maxFractionDigits={2}
+            locale='it-IT'
+            useGrouping={false}
+            showButtons
+        />
+    );
+};
+
+export default NumericFormulaCell;

src/components/FormField/components/CriteriaTable/RenderTable/index.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { wrap } from 'object-path-immutable';
+import { head, isEmpty, isNil, pathOr, sum } from 'ramda';
+
+// components
+import DefaultCell from './components/DefaultCell';
+import LastRowCell from './components/LastRowCell';
+import getNumberFormatted from '../../../../../helpers/getNumberFormatted';
+
+const RenderTable = ({ tableValue = {}, columnsCfg, lastRowCfg, setTableValueFn, disabled }) => {
+    const rows = pathOr([], ['rows'], tableValue)
+    const table = useReactTable({
+        data: rows,
+        columns: columnsCfg,
+        defaultColumn: {
+            cell: DefaultCell
+        },
+        getCoreRowModel: getCoreRowModel(),
+        meta: {
+            disabled,
+            updateData: (rowIndex, columnId, value) => {
+                const columnCfgData = head(columnsCfg.filter(o => o.accessorKey === columnId));
+                const cellData = head(lastRowCfg.filter(o => !isNil(o[columnId])));
+                const cellValue = cellData[columnId];
+                let newRowsData = wrap(tableValue).set(['rows', rowIndex, columnId], value).value();
+                let total = pathOr(0, ['total'], tableValue);
+
+                if (columnCfgData.meta.enableFormula) {
+                    const getAllRowsValues = newRowsData.rows
+                        .map(row => row[columnId])
+                        .map(v => isEmpty(v) || isNil(v) ? 0 : v);
+
+                    if (cellValue === 'sum') {
+                        total = getNumberFormatted(sum(getAllRowsValues));
+                    } else {
+                        total = 0;
+                    }
+                }
+
+                newRowsData = wrap(newRowsData).set(['total'], total).value();
+                setTableValueFn(newRowsData);
+            },
+        }
+    });
+
+    return (
+        <table>
+            <thead>
+            {table.getHeaderGroups().map((headerGroup) => (
+                <tr key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                        return (
+                            <th key={header.id} colSpan={header.colSpan}>
+                                {header.isPlaceholder ? null : (
+                                    <>
+                                        {flexRender(
+                                            header.column.columnDef.header,
+                                            header.getContext()
+                                        )}
+                                    </>
+                                )}
+                            </th>
+                        );
+                    })}
+                </tr>
+            ))}
+            </thead>
+            <tbody>
+            {table.getRowModel().rows.map((row) => {
+                return (
+                    <tr key={row.id}>
+                        {row.getVisibleCells().map((cell) => {
+                            return (
+                                <td key={cell.id}>
+                                    {flexRender(
+                                        cell.column.columnDef.cell,
+                                        cell.getContext()
+                                    )}
+                                </td>
+                            );
+                        })}
+                    </tr>
+                );
+            })}
+            </tbody>
+            {!isEmpty(lastRowCfg)
+                ? <tfoot><tr>
+                    {columnsCfg.map((o) => <LastRowCell
+                        key={o.accessorKey}
+                        columnId={o.accessorKey}
+                        columnMeta={o.meta}
+                        lastRowCfg={lastRowCfg}
+                        tableValue={tableValue}/>)}
+                </tr></tfoot>
+                : null}
+        </table>
+    )
+}
+
+export default RenderTable

src/components/FormField/components/CriteriaTable/index.js

@@ -0,0 +1,132 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { classNames } from 'primereact/utils';
+import { pathOr, isEmpty } from 'ramda';
+import { wrap } from 'object-path-immutable';
+import equal from 'fast-deep-equal';
+import { klona } from 'klona';
+
+// tools
+import { nonEmptyTables } from '../../../../helpers/validators';
+
+//components
+import RenderTable from './RenderTable';
+import NumericFormulaCell from './RenderTable/components/NumericFormulaCell';
+
+const Table = ({
+                   fieldName,
+                   setDataFn,
+                   label,
+                   register,
+                   errors,
+                   disabled = false,
+                   config = {},
+                   defaultValue = [],
+                   tableColumns = []
+               }) => {
+    const [columnsCfg, setColumnsCfg] = useState([]);
+    const [rowsCfg, setRowsCfg] = useState([]);
+    const [columns, setColumns] = useState([]);
+    const [lastRow, setLastRow] = useState([]);
+    const [tableValue, setTableValue] = useState(null);
+
+    const updateValue = useCallback((data) => {
+        setTableValue(data);
+        setDataFn(fieldName, data, { shouldValidate: true });
+    }, [tableValue, defaultValue]);
+
+    const properConfig = (config) => {
+        let newConfig = klona(config);
+        if (config.validate && config.validate.nonEmptyTables) {
+            newConfig = wrap(newConfig)
+                .set(['validate', 'nonEmptyTables'], (v) => nonEmptyTables(v, tableColumns))
+                .value();
+        }
+
+        return newConfig;
+    }
+
+    useEffect(() => {
+        let newColumns = columnsCfg.map((o) => {
+            const item = {
+                accessorKey: o.name,
+                header: () => o.label,
+                footer: (props) => props.column.id,
+                meta: {
+                    predefined: o.predefined,
+                    enableFormula: o.enableFormula,
+                    fieldtype: o.fieldtype
+                }
+            }
+
+            if (o.enableFormula || o.fieldtype === 'numeric') {
+                item.cell = NumericFormulaCell;
+            } else {
+                item.cell = (info) => info.getValue();
+            }
+
+            return item;
+        });
+
+        setColumns(newColumns);
+    }, [columnsCfg, disabled]);
+
+    useEffect(() => {
+        setTableValue(rowsCfg);
+    }, [rowsCfg]);
+
+    useEffect(() => {
+        const stateFieldData = pathOr([], ['stateFieldData'], tableColumns);
+        const obj = stateFieldData
+            .reduce((acc, cur) => {
+                acc[cur.name] = ''
+                return acc;
+            }, {});
+        let rowsData = pathOr([obj], ['rowsData'], tableColumns);
+        rowsData = isEmpty(rowsData) ? [obj] : rowsData;
+        setColumnsCfg(stateFieldData);
+        setRowsCfg({ rows: rowsData, total: 0 });
+
+        let lastRowData = stateFieldData.reduce((acc, cur) => {
+            const value = cur.enableFormula ? cur.lastRowFormula : (cur.lastRowText ? cur.lastRowText : '');
+            acc.push({ [cur.name]: value });
+            return acc;
+        }, []);
+
+        const lastRowValues = lastRowData
+            .map(o => {
+                const values = Object.values(o);
+                return values[0];
+            })
+            .filter(v => !isEmpty(v));
+
+        setLastRow(!isEmpty(lastRowValues) ? lastRowData : []);
+    }, [tableColumns]);
+
+    useEffect(() => {
+        if (!equal(tableValue, defaultValue)) {
+            setTableValue(defaultValue);
+        }
+    }, [defaultValue]);
+
+    useEffect(() => {
+        setTableValue(defaultValue);
+        register(fieldName, properConfig(config));
+    }, []);
+
+    return (
+        <>
+            <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
+                {label}{config.required || config.isRequired || (config.validate && config.validate.nonEmptyTables)
+                ? <span className="appForm__field--required">*</span> : null}
+            </label>
+            {tableValue
+                ? <RenderTable
+                    columnsCfg={columns}
+                    tableValue={tableValue}
+                    lastRowCfg={lastRow}
+                    setTableValueFn={updateValue}
+                    disabled={disabled}/> : null}
+        </>)
+}
+
+export default Table;

src/components/FormField/components/NumberInput/index.js

@@ -21,6 +21,7 @@ const NumberInput = ({
                          min,
                          max,
                          disabled = false,
+                         readOnly = false,
                          useGrouping = true
                      }) => {
     const minAttr = config.min ? config.min : min;
@@ -33,11 +34,13 @@ const NumberInput = ({
         render={({ field, fieldState }) => (
             <InputNumber inputId={field.name}
                          disabled={disabled}
+                         readOnly={readOnly}
                          value={field.value}
                          onValueChange={(e) => field.onChange(e.value)}
                          min={minAttr}
                          max={maxAttr}
                          locale={locale}
+                         showButtons
                          useGrouping={useGrouping}
                          maxFractionDigits={!isNaN(parseInt(maxFractionDigits)) ? parseInt(maxFractionDigits) : 0}
                          minFractionDigits={!isNaN(parseInt(minFractionDigits)) ? parseInt(minFractionDigits) : 0}

src/components/FormField/components/Table/RenderTable/components/DefaultCell/index.js

@@ -1,24 +1,19 @@
+import { InputText } from 'primereact/inputtext';
+
 const DefaultCell = ({ getValue, row: { index }, column: { id }, table }) => {
     const initialValue = getValue();
     const disabled = table.options.meta?.disabled;
 
-    const onBlur = (e) => {
-        table.options.meta?.updateData(index, id, e.target.value);
-    };
-
     const onFocus = (e) => {
         e.target.select();
     }
 
     return (
-        <input
+        <InputText
-            disabled={disabled}
             value={initialValue ?? ''}
-            onChange={(e) => table.options.meta?.updateData(index, id, e.target.value)}
+            disabled={disabled}
-            onBlur={onBlur}
             onFocus={onFocus}
-            className="w-full px-2 py-1 border rounded"
+            onChange={(e) => table.options.meta?.updateData(index, id, e.target.value)} />
-        />
     );
 };
 

src/components/FormField/components/Table/RenderTable/components/LastRowCell/index.js

@@ -1,7 +1,8 @@
 import { head, isEmpty, isNil, sum } from 'ramda';
+import getNumberFormatted from '../../../../../../../helpers/getNumberFormatted';
 
-const LastRowCell = ({columnId, lastRows, columnMeta = {}, getColumnDataFn}) => {
+const LastRowCell = ({columnId, lastRowCfg, columnMeta = {}, getColumnDataFn}) => {
-    const cellData = head(lastRows.filter(o => !isNil(o[columnId])));
+    const cellData = head(lastRowCfg.filter(o => !isNil(o[columnId])));
     let cellValue = cellData[columnId];
 
     if (columnMeta.enableFormula) {
@@ -9,7 +10,7 @@ const LastRowCell = ({columnId, lastRows, columnMeta = {}, getColumnDataFn}) =>
             .map(v => isEmpty(v) || isNil(v) ? 0 : v);
 
         if (cellValue === 'sum') {
-            cellValue = sum(getAllRowsValues);
+            cellValue = getNumberFormatted(sum(getAllRowsValues));
         } else {
             cellValue = 0;
         }

src/components/FormField/components/Table/RenderTable/components/NumericFormulaCell/index.js

@@ -1,32 +1,28 @@
+import { InputNumber } from 'primereact/inputnumber';
+
 const NumericFormulaCell = ({ getValue, row: { index }, column: { id }, table }) => {
     const initialValue = getValue();
     const disabled = table.options.meta?.disabled;
 
-    const onBlur = (e) => {
-        const numValue = e.target.value === 0 ? null : Number(e.target.value);
-        table.options.meta?.updateData(index, id, numValue);
-    };
-
     const onFocus = (e) => {
         e.target.select();
     }
 
-    const onChange = (e) => {
+    const onChange = (value) => {
-        if (e.target.value === 0 || !isNaN(e.target.value)) {
+        table.options.meta?.updateData(index, id, value);
-            table.options.meta?.updateData(index, id, e.target.value);
-        }
     };
 
     return (
-        <input
+        <InputNumber
-            type="number"
             disabled={disabled}
             value={initialValue ?? 0}
-            onChange={onChange}
+            onValueChange={(e) => onChange(e.value)}
             onFocus={onFocus}
-            onBlur={onBlur}
+            minFractionDigits={0}
-            step="any"
+            maxFractionDigits={2}
-            className="w-full px-2 py-1 border rounded"
+            locale='it-IT'
+            useGrouping={false}
+            showButtons
         />
     );
 };

src/components/FormField/components/Table/RenderTable/index.js

@@ -7,10 +7,10 @@ import { isEmpty } from 'ramda';
 import DefaultCell from './components/DefaultCell';
 import LastRowCell from './components/LastRowCell';
 
-const RenderTable = ({ data, columns, lastRow, setRowsFn, disabled }) => {
+const RenderTable = ({ rowsData, columnsCfg, lastRowCfg, setRowsFn, disabled }) => {
     const table = useReactTable({
-        data,
+        data: rowsData,
-        columns,
+        columns: columnsCfg,
         defaultColumn: {
             cell: DefaultCell
         },
@@ -18,7 +18,7 @@ const RenderTable = ({ data, columns, lastRow, setRowsFn, disabled }) => {
         meta: {
             disabled,
             updateData: (rowIndex, columnId, value) => {
-                const newRowsData = wrap(data).set([rowIndex, columnId], value).value();
+                const newRowsData = wrap(rowsData).set([rowIndex, columnId], value).value();
                 setRowsFn(newRowsData);
             },
         }
@@ -68,17 +68,17 @@ const RenderTable = ({ data, columns, lastRow, setRowsFn, disabled }) => {
                     </tr>
                 );
             })}
-            {!isEmpty(lastRow)
+            </tbody>
-                ? <tr>
+            {!isEmpty(lastRowCfg)
-                    {columns.map((o) => <LastRowCell
+                ? <tfoot><tr>
+                    {columnsCfg.map((o) => <LastRowCell
                         key={o.accessorKey}
                         columnId={o.accessorKey}
                         columnMeta={o.meta}
-                        lastRows={lastRow}
+                        lastRowCfg={lastRowCfg}
                         getColumnDataFn={getColumnData}/>)}
-                </tr>
+                </tr></tfoot>
                 : null}
-            </tbody>
         </table>
     )
 }

src/components/FormField/components/Table/index.js

@@ -170,13 +170,13 @@ const Table = ({
                 ? <span className="appForm__field--required">*</span> : null}
             </label>
             {rows ? <RenderTable
-                columns={columns}
+                columnsCfg={columns}
-                data={rows}
+                rowsData={rows}
-                lastRow={lastRow}
+                lastRowCfg={lastRow}
                 setRowsFn={updateRows}
                 disabled={disabled}/> : null}
             {!isEmpty(columns) && !shouldDisableNewRows
-                ? <div className="addNewTableRow" onClick={addNewRow}>
+                ? <div className="addNewTableRow p-button p-component" onClick={addNewRow}>
                     {__('Aggiungi una riga', 'gepafin')}
                 </div>
                 : null}

src/components/FormField/index.js

@@ -17,6 +17,7 @@ import Checkboxes from './components/Checkboxes';
 import Fileupload from './components/Fileupload';
 import Table from './components/Table';
 import PasswordField from './components/PasswordField';
+import CriteriaTable from './components/CriteriaTable';
 
 const FormField = (props) => {
     const fields = {
@@ -33,6 +34,7 @@ const FormField = (props) => {
         wysiwyg: Wysiwyg,
         checkboxes: Checkboxes,
         table: Table,
+        criteria_table: CriteriaTable,
         password: PasswordField
     }
     const Comp = !isNil(fields[props.type]) ? fields[props.type] : null;

src/helpers/getTokens.js

@@ -0,0 +1,11 @@
+import { tokenize } from 'expression-language';
+
+const getTokens = expr => tokenize(expr).tokens
+    .filter((o, i, arr) => o.type === 'name'
+        && (typeof arr[i+1] === 'undefined'
+            || (typeof arr[i+1] !== 'undefined' && arr[i+1].value !== '('))
+    )
+    .map(o => o.value)
+    .filter((v, i, arr) => arr.indexOf(v) === i);
+
+export default getTokens;

src/helpers/keepKeys.js

@@ -0,0 +1,3 @@
+const keepKeys = (arr, keys) => arr.map(obj => Object.fromEntries(keys.map(k => [k, obj[k]])));
+
+export default keepKeys;

src/helpers/removeKey.js

@@ -0,0 +1,3 @@
+const removeKey = (arr, key) => arr.map(({[key]: _, ...rest}) => rest);
+
+export default removeKey;

src/helpers/renderWithDataVars.js

@@ -0,0 +1,23 @@
+import mustache from 'mustache';
+import { replace } from 'ramda';
+
+/**
+ * Use mustachejs to parse content and replace variables with their values
+ * Each variable (everything in brackets) is expression for EE
+ *
+ * @param {string} content
+ * @param {object} context
+ *
+ * @returns {string}
+ */
+const renderWithDataVars = (content = '', context = {}) => {
+    try {
+        let newContent = replace(/{/g, '{{&', content);
+        newContent = replace(/}/g, '}}', newContent);
+        return mustache.render(newContent, context);
+    } catch {
+        return content;
+    }
+};
+
+export default renderWithDataVars;

src/layouts/DefaultLayout/components/AppSidebar/index.js

@@ -53,69 +53,97 @@ const AppSidebar = () => {
             icon: 'pi pi-file',
             href: '/domande',
             id: 6,
-            enable: intersection(permissions, ['VIEW_USERS', 'MANAGE_USERS']).length
+            enable: intersection(permissions, ['VIEW_USERS', 'MANAGE_USERS', 'ASSIGED_APPLICATION']).length
         },
         {
             label: __('Domande da valutare', 'gepafin'),
             icon: 'pi pi-calendar-clock',
             href: '/domande',
             id: 7,
+            enable: intersection(permissions, ['EVALUATE_APPLICATIONS']).length && !intersection(permissions, ['ASSIGED_APPLICATION']).length
+        },
+        {
+            label: __('Bandi attivi', 'gepafin'),
+            icon: 'pi pi-file',
+            href: '/bandi',
+            id: 8,
+            enable: intersection(permissions, ['EVALUATE_APPLICATIONS']).length
+        },
+        {
+            label: __('Soccorso', 'gepafin'),
+            icon: <HelpIcon/>,
+            href: '/soccorso-istruttorio',
+            id: 9,
             enable: intersection(permissions, ['EVALUATE_APPLICATIONS']).length
         },
         {
             label: __('Archivio domande', 'gepafin'),
             icon: 'pi pi-briefcase',
             href: '/domande',
-            id: 8,
+            id: 10,
             enable: intersection(permissions, ['APPLY_CALLS']).length
         },
         {
             label: __('Archivio domande', 'gepafin'),
             icon: 'pi pi-briefcase',
             href: '/domande-archivio',
-            id: 9,
+            id: 11,
             enable: intersection(permissions, ['VIEW_USERS', 'MANAGE_USERS']).length
         },
         {
             label: __('Archivio domande', 'gepafin'),
             icon: 'pi pi-briefcase',
             href: '/domande-archivio',
-            id: 10,
+            id: 12,
             enable: intersection(permissions, ['EVALUATE_APPLICATIONS']).length
         },
+        {
+            label: __('Area personale', 'gepafin'),
+            icon: 'pi pi-calendar-clock',
+            id: 17,
+            enable: intersection(permissions, ['ASSIGED_APPLICATION']).length
+        },
+        {
+            label: __('Domande da valutare', 'gepafin'),
+            icon: 'pi pi-calendar-clock',
+            href: '/mie-domande',
+            id: 18,
+            enable: intersection(permissions, ['ASSIGED_APPLICATION']).length
+        },
         {
             label: __('Soccorso istruttorio', 'gepafin'),
             icon: <HelpIcon/>,
-            href: '/soccorso-istruttorio',
+            href: '/mio-soccorso-istruttorio',
-            id: 11,
+            id: 19,
-            enable: intersection(permissions, ['EVALUATE_APPLICATIONS']).length
+            enable: intersection(permissions, ['ASSIGED_APPLICATION']).length
         },
         {
             label: __('Gestione utenti', 'gepafin'),
             icon: 'pi pi-users',
             href: '/utenti',
-            id: 12,
+            id: 13,
             enable: intersection(permissions, ['VIEW_USERS', 'MANAGE_USERS']).length
         },
         {
             label: __('Configurazione', 'gepafin'),
             icon: 'pi pi-cog',
             //href: '/configurazione',
-            id: 13,
+            id: 14,
             enable: false
         },
         {
             label: __('Report e Analisi', 'gepafin'),
             icon: 'pi pi-chart-bar',
             //href: '/stats',
-            id: 14,
+            id: 15,
             enable: false
         },
         {
             label: __('Log di Sistema', 'gepafin'),
             icon: 'pi pi-receipt',
-            clickFn: () => {},
+            clickFn: () => {
-            id: 15,
+            },
+            id: 16,
             enable: false
         }
     ]
@@ -132,12 +160,17 @@ const AppSidebar = () => {
                                 : o.icon}
                             <span>{o.label}</span>
                         </NavLink>
-                    : <button onClick={() => {}}>
+                        : (o.clickFn ?
+                            <button onClick={() => {
+                            }}>
                                 {is(String, o.icon)
                                     ? <i className={o.icon}></i>
                                     : o.icon}
                                 <span>{o.label}</span>
-                    </button>}
+                            </button>
+                            : <div className="nonLink">
+                                <span>{o.label}</span>
+                            </div>)}
                 </li>)}
         </ul>
     </aside>

src/pages/BandiPreInstructor/components/AllBandiTable/index.js

@@ -0,0 +1,149 @@
+import React, { useState, useEffect} from 'react';
+import { __ } from '@wordpress/i18n';
+import { is, uniq } from 'ramda';
+
+// tools
+import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+import getBandoLabel from '../../../../helpers/getBandoLabel';
+import getDateFromISOstring from '../../../../helpers/getDateFromISOstring';
+
+// api
+import BandoService from '../../../../service/bando-service';
+
+// components
+import { FilterMatchMode, FilterOperator } from 'primereact/api';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Dropdown } from 'primereact/dropdown';
+import { Button } from 'primereact/button';
+import { Calendar } from 'primereact/calendar';
+import { Tag } from 'primereact/tag';
+import ProperBandoLabel from '../../../../components/ProperBandoLabel';
+import { Link } from 'react-router-dom';
+import translationStrings from '../../../../translationStringsForComponents';
+
+
+const AllBandiTable = () => {
+    const [items, setItems] = useState(null);
+    const [filters, setFilters] = useState(null);
+    const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
+    const [statuses, setStatuses] = useState([]);
+
+    useEffect(() => {
+        setLocalAsyncRequest(true);
+        BandoService.getBandi(getCallback, errGetCallbacks);
+    }, []);
+
+    const getCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            setItems(getFormattedBandiData(data.data));
+            setStatuses(uniq(data.data.map(o => o.status)))
+            initFilters();
+        }
+        setLocalAsyncRequest(false);
+    }
+
+    const errGetCallbacks = (data) => {
+        setLocalAsyncRequest(false);
+    }
+
+    const getFormattedBandiData = (data) => {
+        return data.map((d) => {
+            d.dates = d.dates.map(v => is(String, v) ? new Date(v) : (v ? v : ''));
+            return d;
+        });
+    };
+
+    const clearFilter = () => {
+        initFilters();
+    };
+
+    const initFilters = () => {
+        setFilters({
+            global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+            name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+            start_date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+            end_date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+            status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        });
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="appTableHeader">
+                <Button type="button" icon="pi pi-filter-slash" label={__('Pulisci', 'gepafin')} outlined onClick={clearFilter} />
+            </div>
+        );
+    };
+
+    /*const nameBodyTemplate = (rowData) => {
+        return <span>{rowData.name}</span>
+    }*/
+
+    const dateStartBodyTemplate = (rowData) => {
+        return getDateFromISOstring(rowData.dates[0]);
+    };
+
+    const dateEndBodyTemplate = (rowData) => {
+        return getDateFromISOstring(rowData.dates[1]);
+    };
+
+    const dateFilterTemplate = (options) => {
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <ProperBandoLabel status={rowData.status}/>;
+    };
+
+    const statusFilterTemplate = (options) => {
+        return <Dropdown
+            value={options.value}
+            options={statuses}
+            onChange={(e) => options.filterCallback(e.value, options.index)}
+            itemTemplate={statusItemTemplate}
+            placeholder={translationStrings.selectOneLabel}
+            className="p-column-filter"
+            showClear />;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={getBandoLabel(option)} severity={getBandoSeverity(option)} />;
+    };
+
+    const actionsBodyTemplate = (rowData) => {
+        return <Link to={`/bandi/${rowData.id}`}>
+            <Button severity="info" label={__('Mostra', 'gepafin')} icon="pi pi-eye" size="small" iconPos="right" />
+        </Link>
+    }
+
+    const header = renderHeader();
+
+    return(
+        <div className="appPageSection__table">
+            <DataTable value={items} paginator showGridlines rows={5} loading={localAsyncRequest} 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', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+                <Column header={__('Data Pubblicazione', 'gepafin')} filterField="start_date" dataType="date"
+                        style={{ minWidth: '8rem' }}
+                        body={dateStartBodyTemplate} filter filterElement={dateFilterTemplate}/>
+                <Column header={__('Data Scadenza', 'gepafin')} filterField="end_date" dataType="date"
+                        style={{ minWidth: '8rem' }}
+                        body={dateEndBodyTemplate} filter filterElement={dateFilterTemplate}/>
+                <Column field="status" header={__('Stato', 'gepafin')} filterMenuStyle={{ width: '14rem' }}
+                        style={{ minWidth: '7rem' }} body={statusBodyTemplate} filter
+                        filterElement={statusFilterTemplate}/>
+                <Column header={__('Azioni', 'gepafin')}
+                        body={actionsBodyTemplate}/>
+            </DataTable>
+        </div>
+    )
+}
+
+export default AllBandiTable;

src/pages/BandiPreInstructor/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+import { useNavigate } from 'react-router-dom';
+
+// components
+import AllBandiTable from './components/AllBandiTable';
+import { Button } from 'primereact/button';
+
+const BandiPreInstructor = () => {
+    const navigate = useNavigate();
+
+    return(
+        <div className="appPage">
+            <div className="appPage__pageHeader">
+                <h1>{__('Bandi attivi', 'gepafin')}</h1>
+            </div>
+
+            <div className="appPage__spacer"></div>
+
+            <div className="appPageSection">
+                <AllBandiTable/>
+            </div>
+        </div>
+    )
+}
+
+export default BandiPreInstructor;

src/pages/BandoApplication/index.js

@@ -1,10 +1,13 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { __, sprintf } from '@wordpress/i18n';
 import { useParams } from 'react-router-dom';
-import { head, is, pluck, isEmpty, pathOr } from 'ramda';
+import { head, is, pluck, isEmpty, pathOr, isNil } from 'ramda';
 import { useForm } from 'react-hook-form';
 import 'quill/dist/quill.core.css';
 import { wrap } from 'object-path-immutable';
+import { evaluate } from 'mathjs';
+import equal from 'fast-deep-equal';
+import { klona } from 'klona';
 
 // store
 import { storeSet, storeGet, useStore } from '../../store';
@@ -26,6 +29,10 @@ import {
 import renderHtmlContent from '../../helpers/renderHtmlContent';
 import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
 import getFormatedFileSizeText from '../../helpers/getFormatedFileSizeText';
+import renderWithDataVars from '../../helpers/renderWithDataVars';
+import getTokens from '../../helpers/getTokens';
+import formatDateString from '../../helpers/formatDateString';
+import isDateTimeInPast from '../../helpers/isDateTimeInPast';
 
 // components
 import { Skeleton } from 'primereact/skeleton';
@@ -39,8 +46,6 @@ import { Dialog } from 'primereact/dialog';
 import FileuploadApplicationSignedPdf from '../../components/FileuploadApplicationSignedPdf';
 
 import { defaultMaxFileSize } from '../../configData';
-import formatDateString from '../../helpers/formatDateString';
-import isDateTimeInPast from '../../helpers/isDateTimeInPast';
 
 const BandoApplication = () => {
     const chosenCompanyId = useStore().main.chosenCompanyId();
@@ -48,6 +53,8 @@ const BandoApplication = () => {
     const [isExpired, setIsExpired] = useState(false);
     const [formData, setFormData] = useState([]);
     const [formInitialData, setFormInitialData] = useState(null);
+    const [fieldsWithVars, setFieldsWithVars] = useState({});
+    const [fieldsWithFormula, setFieldsWithFormula] = useState({});
     const [bandoTitle, setBandoTitle] = useState('');
     const [bandoId, setBandoId] = useState(0);
     const [formId, setFormId] = useState('');
@@ -67,6 +74,7 @@ const BandoApplication = () => {
         trigger,
         register,
         getValues,
+        watch,
         reset
     } = useForm({
         defaultValues: useMemo(() => {
@@ -89,6 +97,7 @@ const BandoApplication = () => {
     }
     const activeStepIndex = activeStep - 1;
     const values = getValues();
+    const formValues = watch();
 
     const onValidate = () => {
         const applId = getApplicationId();
@@ -355,6 +364,8 @@ const BandoApplication = () => {
             dynamicData = wrap(dynamicData).set(['custom', 'userFullName'], userFullName).value();
             const legalRepresentantName = company.isLegalRepresentant ? userFullName : '';
             dynamicData = wrap(dynamicData).set(['custom', 'legalRepresentant'], legalRepresentantName).value();
+            let allvars = {};
+            let allformulas = {};
 
             if (data.data.applicationFormResponse.content) {
                 // eslint-disable-next-line array-callback-return
@@ -362,7 +373,15 @@ const BandoApplication = () => {
                     if (o.dynamicData && !isEmpty(o.dynamicData)) {
                         formDataInitial[o.id] = pathOr('', o.dynamicData.split('.'), dynamicData);
                     }
-                })
+                    const variable = head(o.settings.filter(o => o.name === 'variable'));
+                    if (variable && !isEmpty(variable.value)) {
+                        allvars[o.id] = variable.value[0];
+                    }
+                    const formula = head(o.settings.filter(o => o.name === 'formula'));
+                    if (formula && !isEmpty(formula.value)) {
+                        allformulas[o.id] = formula.value;
+                    }
+                });
             }
 
             if (data.data.applicationFormResponse.formFields) {
@@ -379,6 +398,8 @@ const BandoApplication = () => {
             }
 
             reset();
+            setFieldsWithVars(allvars);
+            setFieldsWithFormula(allformulas);
             setFormInitialData(formDataInitial);
         }
         storeSet.main.unsetAsyncRequest();
@@ -516,10 +537,47 @@ const BandoApplication = () => {
     // TODO hardcoded for now
     const signedDocMime = bandoId === 10
         ? ['.p7m,application/pkcs7-mime,application/x-pkcs7-mime', '.pdf,application/pdf']
-        : ['.p7m,application/pkcs7-mime,application/x-pkcs7-mime']
+        : ['.p7m,application/pkcs7-mime,application/x-pkcs7-mime'];
     const signedDocValidationString = bandoId === 10
         ? ['.p7m', '.pdf']
-        : ['.p7m']
+        : ['.p7m'];
+
+    useEffect(() => {
+        let updatedFormValues = klona(formValues);
+        let context = {};
+
+        // eslint-disable-next-line array-callback-return
+        formData.map((o) => {
+            const variable = head(o.settings.filter(o => o.name === 'variable'));
+            const formula = head(o.settings.filter(o => o.name === 'formula'));
+
+            if (formula && !isEmpty(formula.value)) {
+                context = getTokens(formula.value)
+                    .filter(v => !['false', 'null', 'true'].includes(v))
+                    .reduce((acc, cur) => {
+                        acc[cur] = isNil(context[cur]) ? 0 : context[cur];
+                        return acc;
+                    }, context);
+                const mathFormula = renderWithDataVars(formula.value, context);
+                try {
+                    updatedFormValues[o.id] = evaluate(mathFormula);
+                } catch (e) {
+                    console.log('Error in math formula: "', mathFormula, '"', e.message);
+                    updatedFormValues[o.id] = 0;
+                }
+            }
+
+            if (variable && !isEmpty(variable.value)) {
+                context[variable.value[0]] = 'criteria_table' === o.name
+                    ? pathOr(0, [o.id, 'total'], updatedFormValues)
+                    : pathOr(0, [o.id], updatedFormValues);
+            }
+        });
+
+        if (!isEmpty(updatedFormValues) && !equal(updatedFormValues, formValues)) {
+            reset(updatedFormValues);
+        }
+    }, [formValues]);
 
     useEffect(() => {
         if ('SUBMIT' === applicationStatus) {
@@ -607,9 +665,13 @@ const BandoApplication = () => {
                             const text = head(o.settings.filter(o => o.name === 'text'));
                             const placeholder = head(o.settings.filter(o => o.name === 'placeholder'));
                             const options = head(o.settings.filter(o => o.name === 'options'));
-                            const tableColumns = head(o.settings.filter(o => o.name === 'table_columns'));
+                            let tableColumns = head(o.settings.filter(o => o.name === 'table_columns'));
+                            if (!tableColumns) {
+                                tableColumns = head(o.settings.filter(o => o.name === 'criteria_table_columns'));
+                            }
                             const step = head(o.settings.filter(o => o.name === 'step'));
                             const mime = head(o.settings.filter(o => o.name === 'mime'));
+                            const formula = head(o.settings.filter(o => o.name === 'formula'));
                             let mimeValue = '';
 
                             if (mime) {
@@ -645,6 +707,7 @@ const BandoApplication = () => {
                                 </div>
                                 : <FormField
                                     key={o.id}
+                                    readOnly={formula && !isEmpty(formula.value)}
                                     type={o.name}
                                     fieldName={o.id}
                                     label={label ? label.value : ''}

src/pages/BandoApplicationPreview/index.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { __, sprintf } from '@wordpress/i18n';
 import { useParams } from 'react-router-dom';
-import { head, isEmpty, pathOr } from 'ramda';
+import { head, isEmpty, isNil, pathOr } from 'ramda';
 import { useForm } from 'react-hook-form';
 import 'quill/dist/quill.core.css';
 
@@ -33,6 +33,11 @@ import { Toast } from 'primereact/toast';
 import { Messages } from 'primereact/messages';
 import ApplicationSteps from '../BandoApplication/ApplicationSteps';
 import BlockingOverlay from '../../components/BlockingOverlay';
+import { klona } from 'klona';
+import getTokens from '../../helpers/getTokens';
+import renderWithDataVars from '../../helpers/renderWithDataVars';
+import { evaluate } from 'mathjs';
+import equal from 'fast-deep-equal';
 
 const BandoApplicationPreview = () => {
     const { id } = useParams();
@@ -55,7 +60,8 @@ const BandoApplicationPreview = () => {
         trigger,
         register,
         getValues,
-        reset
+        reset,
+        watch
     } = useForm({
         defaultValues: useMemo(() => {
             return formInitialData ? formInitialData : {}
@@ -77,6 +83,7 @@ const BandoApplicationPreview = () => {
     }
     const activeStepIndex = activeStep - 1;
     const values = getValues();
+    const formValues = watch();
 
     const onValidate = () => {
         const applId = getApplicationId();
@@ -252,6 +259,43 @@ const BandoApplicationPreview = () => {
             iconPos="right"/>
     </div>
 
+    useEffect(() => {
+        let updatedFormValues = klona(formValues);
+        let context = {};
+
+        // eslint-disable-next-line array-callback-return
+        formData.map((o) => {
+            const variable = head(o.settings.filter(o => o.name === 'variable'));
+            const formula = head(o.settings.filter(o => o.name === 'formula'));
+
+            if (formula && !isEmpty(formula.value)) {
+                context = getTokens(formula.value)
+                    .filter(v => !['false', 'null', 'true'].includes(v))
+                    .reduce((acc, cur) => {
+                        acc[cur] = isNil(context[cur]) ? 0 : context[cur];
+                        return acc;
+                    }, context);
+                const mathFormula = renderWithDataVars(formula.value, context);
+                try {
+                    updatedFormValues[o.id] = evaluate(mathFormula);
+                } catch (e) {
+                    console.log('Error in math formula: "', mathFormula, '"', e.message);
+                    updatedFormValues[o.id] = 0;
+                }
+            }
+
+            if (variable && !isEmpty(variable.value)) {
+                context[variable.value[0]] = 'criteria_table' === o.name
+                    ? pathOr(0, [o.id, 'total'], updatedFormValues)
+                    : pathOr(0, [o.id], updatedFormValues);
+            }
+        });
+
+        if (!isEmpty(updatedFormValues) && !equal(updatedFormValues, formValues)) {
+            reset(updatedFormValues);
+        }
+    }, [formValues]);
+
     useEffect(() => {
         if (formInitialData) {
             //reset();
@@ -301,9 +345,13 @@ const BandoApplicationPreview = () => {
                         const text = head(o.settings.filter(o => o.name === 'text'));
                         const placeholder = head(o.settings.filter(o => o.name === 'placeholder'));
                         const options = head(o.settings.filter(o => o.name === 'options'));
-                        const tableColumns = head(o.settings.filter(o => o.name === 'table_columns'));
+                        let tableColumns = head(o.settings.filter(o => o.name === 'table_columns'));
+                        if (!tableColumns) {
+                            tableColumns = head(o.settings.filter(o => o.name === 'criteria_table_columns'));
+                        }
                         const step = head(o.settings.filter(o => o.name === 'step'));
                         const mime = head(o.settings.filter(o => o.name === 'mime'));
+                        const formula = head(o.settings.filter(o => o.name === 'formula'));
                         let mimeValue = '';
 
                         if (mime) {
@@ -339,6 +387,7 @@ const BandoApplicationPreview = () => {
                             </div>
                             : <FormField
                                 key={o.id}
+                                readOnly={formula && !isEmpty(formula.value)}
                                 type={o.name}
                                 disabled={o.name === 'fileupload' || 'DRAFT' !== applicationStatus}
                                 fieldName={o.id}

src/pages/BandoFlowEdit/index.js

@@ -35,7 +35,6 @@ const BandoFlowEdit = () => {
     const [forms, setForms] = useState([]);
     const [formOptions, setFormOptions] = useState([]);
     const [chosenMainFieldOptions, setChosenMainFieldOptions] = useState([]);
-    //const [chosenMainField, setChosenMainField] = useState('');
     const [mainFieldSuboptions, setMainFieldSubOptions] = useState([]);
     const [bandoStatus, setBandoStatus] = useState('');
     const [isFlowAllowed, setIsFlowAllowed] = useState(true);

src/pages/BandoFormsEdit/components/BuilderElement/index.js

@@ -1,7 +1,8 @@
-import React, { useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useDrag, useDrop } from 'react-dnd'
 import { ItemTypes } from '../ItemTypes';
 import { __ } from '@wordpress/i18n';
+import { head, isEmpty } from 'ramda';
 
 // store
 import { storeSet, useStore } from '../../../../store';
@@ -14,6 +15,10 @@ import BuilderElementProperLabel from '../BuilderElementProperLabel';
 const BuilderElement = ({ id, name, label, index, bandoStatus }) => {
     const draggingElementId = useStore().main.draggingElementId();
     const ref = useRef(null);
+    const elements = useStore().main.formElements();
+    const element = head(elements.filter(o => o.id === id));
+    const [isVariable, setIsVariable] = useState('secondary');
+    const [isFormula, setIsFormula] = useState('secondary');
 
     const [{ handlerId }, drop] = useDrop({
         accept: ItemTypes.FIELD,
@@ -97,6 +102,19 @@ const BuilderElement = ({ id, name, label, index, bandoStatus }) => {
     const opacity = isDragging ? 0 : 1;
     drag(drop(ref));
 
+    useEffect(() => {
+        const variable = head(element.settings.filter(o => o.name === 'variable'));
+        const formula = head(element.settings.filter(o => o.name === 'formula'));
+
+        if (variable && !isEmpty(variable.value)) {
+            setIsVariable('warning');
+        }
+
+        if (formula && !isEmpty(formula.value)) {
+            setIsFormula('warning');
+        }
+    }, [elements]);
+
     return (
         draggingElementId === id
             ? <div ref={ref} className="formBuilder__elementNew">
@@ -104,7 +122,13 @@ const BuilderElement = ({ id, name, label, index, bandoStatus }) => {
             </div>
             : <div ref={ref} className="formBuilder__element" style={{ opacity }} data-handler-id={handlerId}>
                 <div className="meta">
+                    <div className="tagHeader">
                         <Tag value={label} severity="info"/>
+                        {['numberinput', 'criteria_table'].includes(name)
+                            ? <Tag value="var" severity={isVariable}/> : null}
+                        {name === 'numberinput'
+                            ? <Tag value="f(x)" severity={isFormula}/> : null}
+                    </div>
                     <BuilderElementProperLabel id={id} defaultLabel={label}/>
                 </div>
                 <div className="actions">

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

@@ -1,18 +1,28 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { __ } from '@wordpress/i18n';
-import { is } from 'ramda';
+import { head, is, isEmpty, isNil, uniq } from 'ramda';
+
+// store
+import { storeGet } from '../../../../../../store';
+
+// tools
+import renderHtmlContent from '../../../../../../helpers/renderHtmlContent';
 
 // components
 import ElementSettingRepeater from '../ElementSettingRepeater';
 import { InputText } from 'primereact/inputtext';
 import { MultiSelect } from 'primereact/multiselect';
 import { Editor } from 'primereact/editor';
-
-import { mimeTypes } from '../../../../../../configData';
 import ElementSettingTableColumns from '../ElementSettingTableColumns';
 import { InputSwitch } from 'primereact/inputswitch';
+import ElementSettingChips from '../ElementSettingChips';
+import ElementSettingCriteriaTableColumns from '../ElementSettingCriteriaTableColumns';
+
+import { mimeTypes } from '../../../../../../configData';
+
 
 const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => {
+    const [existingVars, setExistingVars] = useState([]);
 
     const settingLabels = {
         label: __('Label', 'gepafin'),
@@ -24,6 +34,13 @@ const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => {
         mime: __('Tipo di file', 'gepafin'),
         text: __('Testo formattato', 'gepafin'),
         table_columns: '',
+        criteria_table_columns: '',
+        variable: __('Variable (only letters and "_")', 'gepafin'),
+        formula: __('Auto calculation formula', 'gepafin')
+    }
+
+    const settingDescription = {
+        formula: __('Create formula using previously declared variables. Use these math operators: <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>. Example of formula: <code>{entrate}+{assicurazione}</code>.', 'gepafin')
     }
 
     const renderHeader = () => {
@@ -81,10 +98,21 @@ const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => {
                 name={setting.name}
                 bandoStatus={bandoStatus}
                 setDataFn={updateDataFn}/>
+        } else if (setting.name === 'criteria_table_columns') {
+            return <ElementSettingCriteriaTableColumns
+                value={is(Object, setting.value) ? setting.value : {}}
+                name={setting.name}
+                bandoStatus={bandoStatus}
+                setDataFn={updateDataFn}/>
         } else if (['isRequestedAmount', 'isDelegation'].includes(setting.name)) {
             return <InputSwitch
                 checked={setting.value}
                 onChange={(e) => changeFn(e.value, setting.name)}/>
+        } else if (['variable'].includes(setting.name)) {
+            return <ElementSettingChips
+                restrictedValues={[]}
+                changeFn={(value) => changeFn(value, setting.name)}
+                value={setting.value}/>
         } else {
             return <InputText id={setting.name} aria-describedby={`${setting.name}-help`}
                               value={setting.value}
@@ -92,9 +120,34 @@ const ElementSetting = ({ setting, changeFn, updateDataFn, bandoStatus }) => {
         }
     }
 
+    useEffect(() => {
+        const elements = storeGet.main.formElements();
+        const activeElement = storeGet.main.activeElement();
+        const vars = elements
+            .filter(o => o.id !== activeElement)
+            // eslint-disable-next-line
+            .map((o) => {
+                const variableSetting = head(o.settings.filter(s => s.name === 'variable'));
+                if (variableSetting) {
+                    return variableSetting.value[0];
+                }
+            })
+            .filter(v => !isNil(v));
+
+        setExistingVars(uniq(vars));
+    }, []);
+
     return <div className="formElementSettings__field" key={setting.name}>
         <label htmlFor={setting.name}>{settingLabels[setting.name]}</label>
         {getProperField(setting)}
+        {setting.name === 'formula' && !isEmpty(existingVars)
+            ? <div className="formElementSettings__fieldVarsList">
+                <p>Existing variables: {existingVars.map(v => <code key={v}>{`{${v}}`}</code>)}</p>
+            </div> : null}
+        {settingDescription[setting.name]
+            ? <div className="formElementSettings__fieldDescription">
+                <p>{renderHtmlContent(settingDescription[setting.name])}</p>
+            </div> : null}
     </div>
 }
 

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

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+
+// components
+import { Chips } from 'primereact/chips';
+import { isEmpty } from 'ramda';
+
+const ElementSettingChips = ({ restrictedValues = [], changeFn, value = [] }) => {
+    const [lastTyped, setLastTyped] = useState([])
+
+    const isValidValue = (newVal) => {
+        const validationRegex = /^[a-zA-Z_]+$/;
+        return validationRegex.test(newVal);
+    };
+
+    const handleAdd = (e) => {
+        const newValue = isEmpty(e.value) ? '' : e.value[e.value.length - 1];
+
+        if (restrictedValues.includes(newValue)) {
+            changeFn([]);
+            return;
+        }
+
+        if (!isValidValue(newValue)) {
+            changeFn(lastTyped);
+            return;
+        }
+
+        setLastTyped(e.value)
+        changeFn(e.value);
+    };
+
+    return (
+        <div>
+            <Chips
+                value={value}
+                addOnBlur={true}
+                onChange={handleAdd}
+                max={1}
+            />
+        </div>
+    );
+}
+
+export default ElementSettingChips;

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

@@ -0,0 +1,329 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { __, sprintf } from '@wordpress/i18n';
+import { wrap } from 'object-path-immutable';
+import { isEmpty, last, pathOr } from 'ramda';
+
+// components
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+import { InputSwitch } from 'primereact/inputswitch';
+import { Dropdown } from 'primereact/dropdown';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+
+// tools
+import uniqid from '../../../../../../helpers/uniqid';
+import removeKey from '../../../../../../helpers/removeKey';
+
+const ElementSettingCriteriaTableColumns = ({
+                                        value,
+                                        name,
+                                        setDataFn,
+                                        bandoStatus
+                                    }) => {
+    const [stateFieldData, setStateFieldData] = useState([]);
+    const [rowsData, setRowsData] = useState([]);
+
+    const removeItem = (index) => {
+        let newData = stateFieldData
+            .toSpliced(index, 1);
+        newData = newData.map((o, i) => {
+                return i === newData.length - 1
+                    ? {...o, fieldtype: 'numeric', predefined: false, enableFormula: true}
+                    : {...o, fieldtype: 'text', predefined: true, enableFormula: false}
+            });
+        setStateFieldData(newData);
+        const newRowsData = removeKey(rowsData, last(newData.map(o => o.name)));
+        setRowsData(newRowsData);
+    }
+
+    const addNewItem = () => {
+        setStateFieldData([
+            ...stateFieldData.map(o => ({...o, fieldtype: 'text', predefined: true, enableFormula: false})),
+            { name: uniqid('o'), label: '', fieldtype: 'numeric', predefined: false, enableFormula: true }
+        ]);
+    }
+
+    const addNewRow = () => {
+        const obj = stateFieldData
+            .filter(o => o.predefined)
+            .reduce((acc, cur) => {
+                acc[cur.name] = ''
+                return acc;
+            }, {});
+        setRowsData([...rowsData, obj]);
+    }
+
+    const removeRow = (index) => {
+        const newRowsData = wrap(rowsData).del([index]).value();
+        setRowsData(newRowsData);
+    }
+
+    const onInputChange = (e, index) => {
+        const { value } = e.target;
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.label = value;
+            }
+            return o;
+        })
+        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();
+        setRowsData(newRowsData);
+    }
+
+    const setChecked = (value, index) => {
+        let name = '';
+        const newData = stateFieldData.map((o, i) => {
+            if (i === index) {
+                o.predefined = value;
+                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);
+    }
+
+    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 handleClearLastRowData = useCallback(() => {
+        const newData = stateFieldData.map((o) => {
+            delete o.lastRowFormula;
+            o.lastRowText = '';
+            delete o.enableFormula;
+
+            return o;
+        });
+
+        setStateFieldData(newData);
+    }, [stateFieldData]);
+
+    const properFields = (item, i) => {
+        return <>
+            <div>
+                <InputText
+                    value={item.label}
+                    placeholder={sprintf(__('Colonna %d', 'gepafin'), i + 1)}
+                    onInput={(e) => onInputChange(e, i)}/>
+            </div>
+            <div>
+                <Dropdown
+                    disabled={true}
+                    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
+                    disabled={true}
+                    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={true}
+                    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 <>
+            <div>
+                <InputText
+                    value={item[name]}
+                    onInput={(e) => onSubInputChange(e, name, i)}/>
+            </div>
+            <div>
+                <Button icon="pi pi-times"
+                        className="p-button-danger"
+                        onClick={() => removeRow(i)}/>
+            </div>
+        </>
+    }
+
+    const properFieldsLastRow = useCallback((item, i) => {
+        return <>
+            <div>
+                <span>{sprintf(__('Colonna %d'), i + 1)}</span>
+            </div>
+            {item.enableFormula
+                ? <div>
+                    <Dropdown
+                        disabled={bandoStatus === 'PUBLISH'}
+                        value={item.lastRowFormula}
+                        onChange={(e) => onLastRowFormulaChange(e.value, i)}
+                        options={[
+                            { value: 'sum', label: __('Somma automatica', 'gepafin') }
+                        ]}/>
+                </div>
+                : <div>
+                    <InputText
+                        value={item.lastRowText ? item.lastRowText : ''}
+                        onInput={(e) => onLastRowInputChange(e, i)}/>
+                </div>}
+        </>
+    }, [stateFieldData]);
+
+    const lastRow = <div className="formElementSettings__repeater">
+        <div className="formElementSettings__lastRowHeader">
+            <div className="formElementSettings__lastRowHeaderTitle">
+                {__('Definisci ultima righa', 'gepafin')}
+            </div>
+            <Button type="button"
+                    disabled={bandoStatus === 'PUBLISH'}
+                    outlined
+                    label={__('Pulisci', 'gepafin')}
+                    iconPos="right"
+                    icon="pi pi-refresh"
+                    onClick={handleClearLastRowData}/>
+        </div>
+        {stateFieldData.map((o, i) => <div key={i} className="formElementSettings__lastRowItem">
+            {properFieldsLastRow(o, i)}
+        </div>)}
+    </div>;
+
+    useEffect(() => {
+        const stateFieldData = pathOr([], ['stateFieldData'], value);
+        setStateFieldData(stateFieldData);
+        const rowsData = pathOr([], ['rowsData'], value);
+        setRowsData(rowsData);
+    }, []);
+
+    useEffect(() => {
+        setDataFn(name, {
+            stateFieldData,
+            rowsData
+        });
+    }, [stateFieldData, rowsData]);
+
+    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">
+                    {properFields(o, i)}
+                </div>)}
+                <Button
+                    type="button"
+                    disabled={bandoStatus === 'PUBLISH'}
+                    outlined
+                    label={__('Aggiungi colonna', 'gepafin')}
+                    onClick={addNewItem}/>
+            </div>
+            {stateFieldData
+                .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}
+        </>
+    )
+}
+
+export default ElementSettingCriteriaTableColumns;

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

@@ -1,159 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { __ } from '@wordpress/i18n';
-import { wrap } from 'object-path-immutable';
-import { pathOr } from 'ramda';
-
-// components
-import { InputText } from 'primereact/inputtext';
-import { Button } from 'primereact/button';
-import { InputSwitch } from 'primereact/inputswitch';
-
-// tools
-import uniqid from '../../../../../../helpers/uniqid';
-
-const ElementSettingTableColumns = ({
-                                        value,
-                                        name,
-                                        setDataFn,
-                                        bandoStatus
-                                    }) => {
-    const [stateFieldData, setStateFieldData] = useState([]);
-    const [rowsData, setRowsData] = useState([]);
-
-    const removeItem = (index) => {
-        const newData = stateFieldData.toSpliced(index, 1);
-        setStateFieldData(newData);
-    }
-
-    const addNewItem = () => {
-        setStateFieldData([...stateFieldData, { name: uniqid('o'), label: '', predefined: false }]);
-    }
-
-    const addNewRow = () => {
-        const obj = stateFieldData
-            .filter(o => o.predefined)
-            .reduce((acc, cur) => {
-                acc[cur.name] = ''
-                return acc;
-            }, {});
-        setRowsData([...rowsData, obj]);
-    }
-
-    const removeRow = (index) => {
-        const newRowsData = wrap(rowsData).del([index]).value();
-        setRowsData(newRowsData);
-    }
-
-    const onInputChange = (e, index) => {
-        const { value } = e.target;
-        const newData = stateFieldData.map((o, i) => {
-            if (i === index) {
-                o.label = value;
-            }
-            return o;
-        })
-        setStateFieldData(newData);
-    }
-
-    const onSubInputChange = (e, name, index) => {
-        const { value } = e.target;
-        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;
-                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);
-    }
-
-    const properField = (item, i) => {
-        return <>
-            <InputText value={item.label} onInput={(e) => onInputChange(e, i)}/>
-            <div className="flex-1">
-                <span>{__('Predefinito?', 'gepafin')}</span>
-                <InputSwitch
-                    checked={item.predefined}
-                    disabled={bandoStatus === 'PUBLISH'}
-                    onChange={(e) => setChecked(e.value, i)}/>
-            </div>
-        </>
-    }
-
-    const properSubField = (item, i, name) => {
-        return <InputText value={item[name]} onInput={(e) => onSubInputChange(e, name, i)}/>
-    }
-
-    useEffect(() => {
-        const stateFieldData = pathOr([], ['stateFieldData'], value);
-        setStateFieldData(stateFieldData);
-        const rowsData = pathOr([], ['rowsData'], value);
-        setRowsData(rowsData);
-    }, []);
-
-    useEffect(() => {
-        setDataFn(name, {
-            stateFieldData,
-            rowsData
-        });
-    }, [stateFieldData, rowsData]);
-
-    stateFieldData.filter(o => o.predefined)
-
-    return (
-        <>
-            <div className="formElementSettings__repeater">
-                {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>
-                </div>)}
-                <Button type="button" disabled={bandoStatus === 'PUBLISH'} outlined label={__('Aggiungi', '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>)}
-        </>
-    )
-}
-
-export default ElementSettingTableColumns;

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

@@ -1,17 +1,18 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { __, sprintf } from '@wordpress/i18n';
 import { wrap } from 'object-path-immutable';
-import { isEmpty, pathOr } from 'ramda';
+import { isEmpty, last, pathOr } from 'ramda';
 
 // components
 import { InputText } from 'primereact/inputtext';
 import { Button } from 'primereact/button';
 import { InputSwitch } from 'primereact/inputswitch';
+import { Dropdown } from 'primereact/dropdown';
+import { Accordion, AccordionTab } from 'primereact/accordion';
 
 // tools
 import uniqid from '../../../../../../helpers/uniqid';
-import { Dropdown } from 'primereact/dropdown';
+import removeKey from '../../../../../../helpers/removeKey';
-import { Accordion, AccordionTab } from 'primereact/accordion';
 
 const ElementSettingTableColumns = ({
                                         value,
@@ -25,6 +26,8 @@ const ElementSettingTableColumns = ({
     const removeItem = (index) => {
         const newData = stateFieldData.toSpliced(index, 1);
         setStateFieldData(newData);
+        const newRowsData = removeKey(rowsData, last(newData.map(o => o.name)));
+        setRowsData(newRowsData);
     }
 
     const addNewItem = () => {
@@ -158,7 +161,7 @@ const ElementSettingTableColumns = ({
             </div>
             <div>
                 <Dropdown
-                    disabled={item.enableFormula}
+                    disabled={item.enableFormula || bandoStatus === 'PUBLISH'}
                     value={item.fieldtype ? item.fieldtype : 'text'}
                     onChange={(e) => onTypeChange(e.value, i)}
                     options={[
@@ -168,6 +171,7 @@ const ElementSettingTableColumns = ({
             </div>
             <div>
                 <button
+                    disabled={bandoStatus === 'PUBLISH'}
                     className="formElementSettings__repeaterItemIconBtn"
                     onClick={() => setColFormulaChecked(i)}
                     data-active={item.enableFormula ? item.enableFormula : false}
@@ -193,11 +197,12 @@ const ElementSettingTableColumns = ({
     const properSubField = (item, i, name) => {
         return <>
             <div>
-                <InputText value={item[name]} onInput={(e) => onSubInputChange(e, name, i)}/>
+                <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>
@@ -212,6 +217,7 @@ const ElementSettingTableColumns = ({
             {item.enableFormula
                 ? <div>
                     <Dropdown
+                        disabled={bandoStatus === 'PUBLISH'}
                         value={item.lastRowFormula}
                         onChange={(e) => onLastRowFormulaChange(e.value, i)}
                         options={[
@@ -232,6 +238,7 @@ const ElementSettingTableColumns = ({
                 {__('Definisci ultima righa', 'gepafin')}
             </div>
             <Button type="button"
+                    disabled={bandoStatus === 'PUBLISH'}
                     outlined
                     label={__('Pulisci', 'gepafin')}
                     iconPos="right"
@@ -271,8 +278,12 @@ const ElementSettingTableColumns = ({
                 {stateFieldData.map((o, i) => <div key={i} className="formElementSettings__repeaterItem">
                     {properFields(o, i)}
                 </div>)}
-                <Button type="button" disabled={bandoStatus === 'PUBLISH'} outlined
+                <Button
-                        label={__('Aggiungi colonna', 'gepafin')} onClick={addNewItem}/>
+                    type="button"
+                    disabled={bandoStatus === 'PUBLISH'}
+                    outlined
+                    label={__('Aggiungi colonna', 'gepafin')}
+                    onClick={addNewItem}/>
             </div>
             {stateFieldData
                 .filter(o => o.predefined).length > 0

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

@@ -110,22 +110,6 @@ const BuilderElementSettings = ({ closeSettingsFn, bandoStatus }) => {
         return dynamicDataOptions[type] ?? [];
     }
 
-    /*const searchDynamicTags = (event) => {
-        const type = activeElementData.name;
-        const available = dynamicDataOptions[type];
-        let filtered;
-
-        if (!event.query.trim().length) {
-            filtered = [...available];
-        } else {
-            filtered = available.filter((tag) => {
-                return tag.label.toLowerCase().startsWith(event.query.toLowerCase());
-            });
-        }
-
-        setFilteredDynamicDataOptions(filtered);
-    }*/
-
     useEffect(() => {
         const chosen = head(elements.filter(o => o.id === activeElement));
         const elementItems = storeGet.main.elementItems();
@@ -160,7 +144,9 @@ const BuilderElementSettings = ({ closeSettingsFn, bandoStatus }) => {
                 <TabView className="formElementSettings__tabs">
                     <TabPanel header={__('Presentation', 'gepafin')}>
                         {settings
-                            ? settings.map((o) => <ElementSetting
+                            ? settings
+                                .filter(o => !['variable', 'formula'].includes(o.name))
+                                .map((o) => <ElementSetting
                                     key={o.name}
                                     setting={o}
                                     bandoStatus={bandoStatus}
@@ -248,6 +234,21 @@ const BuilderElementSettings = ({ closeSettingsFn, bandoStatus }) => {
                                 placeholder={__('Scegli', 'gepafin')}/>
                         </div>
                     </TabPanel>
+                    {settings
+                    && settings
+                        .filter(o => ['variable', 'formula'].includes(o.name)).length > 0
+                        ? <TabPanel header={__('Calculation', 'gepafin')}>
+                            {settings
+                                ? settings
+                                    .filter(o => ['variable', 'formula'].includes(o.name))
+                                    .map((o) => <ElementSetting
+                                        key={o.name}
+                                        setting={o}
+                                        bandoStatus={bandoStatus}
+                                        changeFn={onChange}
+                                        updateDataFn={onUpdateOptions}/>)
+                                : null}
+                        </TabPanel> : null}
                 </TabView>
 
                 <Button label={__('Salva', 'gepafin')} onClick={saveSettings}/>

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,8 +215,8 @@ 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.sort((a, b) => a.sortOrder - b.sortOrder));
+            //storeSet.main.elementItems(data.data.sort((a, b) => a.sortOrder - b.sortOrder));
         }
         storeSet.main.unsetAsyncRequest();
     }

src/pages/BandoFormsPreview/index.js

@@ -2,9 +2,11 @@ import React, { useState, useEffect } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useNavigate, useParams } from 'react-router-dom';
 import { klona } from 'klona';
-import { head, isNil } from 'ramda';
+import { head, isNil, isEmpty, pathOr } from 'ramda';
 import { useForm } from 'react-hook-form';
 import 'quill/dist/quill.core.css';
+import { evaluate } from 'mathjs';
+import equal from 'fast-deep-equal';
 
 // store
 import { storeSet, useStore } from '../../store';
@@ -30,6 +32,8 @@ import {
     isUrl, minChecks, maxChecks, nonEmptyTables
 } from '../../helpers/validators';
 import renderHtmlContent from '../../helpers/renderHtmlContent';
+import renderWithDataVars from '../../helpers/renderWithDataVars';
+import getTokens from '../../helpers/getTokens';
 
 const BandoFormsPreview = () => {
     const { id, formId } = useParams();
@@ -43,9 +47,12 @@ const BandoFormsPreview = () => {
         formState: { errors },
         getValues,
         register,
-        setValue
+        setValue,
+        watch,
+        reset
     } = useForm({ defaultValues: {}, mode: 'onChange' });
     const values = getValues();
+    const formValues = watch();
     const validationFns = {
         isPIVA,
         isCodiceFiscale,
@@ -85,6 +92,43 @@ const BandoFormsPreview = () => {
         storeSet.main.unsetAsyncRequest();
     }
 
+    useEffect(() => {
+        let updatedFormValues = klona(formValues);
+        let context = {};
+
+        // eslint-disable-next-line array-callback-return
+        formData.map((o) => {
+            const variable = head(o.settings.filter(o => o.name === 'variable'));
+            const formula = head(o.settings.filter(o => o.name === 'formula'));
+
+            if (formula && !isEmpty(formula.value)) {
+                context = getTokens(formula.value)
+                    .filter(v => !['false', 'null', 'true'].includes(v))
+                    .reduce((acc, cur) => {
+                        acc[cur] = isNil(context[cur]) ? 0 : context[cur];
+                        return acc;
+                    }, context);
+                const mathFormula = renderWithDataVars(formula.value, context);
+                try {
+                    updatedFormValues[o.id] = evaluate(mathFormula);
+                } catch (e) {
+                    console.log('Error in math formula: "', mathFormula, '"', e.message);
+                    updatedFormValues[o.id] = 0;
+                }
+            }
+
+            if (variable && !isEmpty(variable.value)) {
+                context[variable.value[0]] = 'criteria_table' === o.name
+                    ? pathOr(0, [o.id, 'total'], updatedFormValues)
+                    : pathOr(0, [o.id], updatedFormValues);
+            }
+        });
+
+        if (!isEmpty(updatedFormValues) && !equal(updatedFormValues, formValues)) {
+            reset(updatedFormValues);
+        }
+    }, [formValues]);
+
     useEffect(() => {
         const parsedFormId = parseInt(formId)
         const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
@@ -126,9 +170,13 @@ const BandoFormsPreview = () => {
                                 const text = head(o.settings.filter(o => o.name === 'text'));
                                 const placeholder = head(o.settings.filter(o => o.name === 'placeholder'));
                                 const options = head(o.settings.filter(o => o.name === 'options'));
-                                const tableColumns = head(o.settings.filter(o => o.name === 'table_columns'));
+                                let tableColumns = head(o.settings.filter(o => o.name === 'table_columns'));
+                                if (!tableColumns) {
+                                    tableColumns = head(o.settings.filter(o => o.name === 'criteria_table_columns'));
+                                }
                                 const step = head(o.settings.filter(o => o.name === 'step'));
                                 const mime = head(o.settings.filter(o => o.name === 'mime'));
+                                const formula = head(o.settings.filter(o => o.name === 'formula'));
                                 let mimeValue = '';
 
                                 if (mime) {
@@ -162,6 +210,7 @@ const BandoFormsPreview = () => {
                                     </div>
                                     : <FormField
                                         key={o.id}
+                                        readOnly={formula && !isEmpty(formula.value)}
                                         type={o.name}
                                         fieldName={o.id}
                                         label={label ? label.value : ''}

src/pages/BandoViewPreInstructor/index.js

@@ -0,0 +1,274 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { __ } from '@wordpress/i18n';
+import { useNavigate, useParams } from 'react-router-dom';
+import { is, isEmpty, isNil } from 'ramda';
+import 'quill/dist/quill.core.css';
+
+// store
+import { storeSet, useStore } from '../../store';
+
+// tools
+import getNumberWithCurrency from '../../helpers/getNumberWithCurrency';
+import getDateFromISOstring from '../../helpers/getDateFromISOstring';
+
+// components
+import { Skeleton } from 'primereact/skeleton';
+import { Accordion } from 'primereact/accordion';
+import { AccordionTab } from 'primereact/accordion';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { Button } from 'primereact/button';
+import BandoService from '../../service/bando-service';
+import { Messages } from 'primereact/messages';
+import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
+import renderHtmlContent from '../../helpers/renderHtmlContent';
+
+const REACT_APP_HUB_ID = process.env.REACT_APP_HUB_ID;
+
+const BandoViewPreInstructor = () => {
+    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const { id } = useParams();
+    const navigate = useNavigate();
+    const [data, setData] = useState({});
+    const [newQuestion, setNewQuestion] = useState('');
+    const bandoMsgs = useRef(null);
+
+    const closePreview = () => {
+        navigate(`/bandi/${id}`);
+    }
+
+    const getCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            setData(getFormattedBandiData(data.data));
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetCallback = (data) => {
+        if (bandoMsgs.current && data.message) {
+            bandoMsgs.current.show([
+                {
+                    sticky: true, severity: 'error', summary: '',
+                    detail: data.message,
+                    closable: true
+                }
+            ]);
+        }
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const getFormattedBandiData = (data) => {
+        data.dates = data.dates.map(v => is(String, v) ? new Date(v) : (v ? v : ''));
+        return data;
+    };
+
+    useEffect(() => {
+        const parsed = parseInt(id)
+        const bandoId = !isNaN(parsed) ? parsed : 0;
+
+        BandoService.getBando(bandoId, getCallback, errGetCallback);
+    }, [id]);
+
+    return (
+        <div className="appPage">
+            {!isAsyncRequest && !isEmpty(data)
+                ? <div className="appPage__pageHeader">
+                    <h1>{data.name}</h1>
+                    <p>
+                        {__('Data:', 'gepafin')}
+                        <span>{getDateFromISOstring(data.createdDate)}</span>
+                    </p>
+                </div>
+                : <>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
+                </>}
+
+            <div className="appPage__spacer"></div>
+            <Messages ref={bandoMsgs}/>
+
+            {!isAsyncRequest && !isEmpty(data)
+                ? <div className="appPage__content">
+                    {!isEmpty(data.images)
+                        ? <picture className="appPageSection__hero">
+                            <source srcSet={data.images[0] ? data.images[0].filePath : ''}/>
+                            <img src={data.images[0] ? data.images[0].filePath : ''} alt={data.name}/>
+                        </picture> : null}
+
+                    <div className="appPageSection__withBorder">
+                        <h2>{__('Descrizione breve', 'gepafin')}</h2>
+                        <div className="ql-editor">
+                            {renderHtmlContent(data.descriptionShort)}
+                        </div>
+                    </div>
+
+                    <div className="appPageSection__row">
+                        <div className="appPageSection__withBorder">
+                            <p className="appPageSection__pMeta">
+                                <span>{__('Importo totale', 'gepafin')}</span>
+                                <span>{getNumberWithCurrency(data.amount)}</span>
+                            </p>
+                            <p className="appPageSection__pMeta">
+                                <span>{__('Importo minimo per progetto', 'gepafin')}</span>
+                                <span>{getNumberWithCurrency(data.amountMin)}</span>
+                            </p>
+                            <p className="appPageSection__pMeta">
+                                <span>{__('Importo massimo per progetto', 'gepafin')}</span>
+                                <span>{getNumberWithCurrency(data.amountMax)}</span>
+                            </p>
+                        </div>
+
+                        <div className="appPageSection__withBorder">
+                            <p className="appPageSection__pMeta">
+                                <span>{__('Data apertura', 'gepafin')}</span>
+                                <span>{getDateFromISOstring(data.dates[0])} {data.startTime}</span>
+                            </p>
+                            <p className="appPageSection__pMeta">
+                                <span>{__('Data chiusura', 'gepafin')}</span>
+                                <span>{getDateFromISOstring(data.dates[1])} {data.endTime}</span>
+                            </p>
+                        </div>
+                    </div>
+
+                    <div className="appPageSection__withBorder">
+                        <h2>{__('Descrizione dettagliata', 'gepafin')}</h2>
+                        <div className="ql-editor">
+                            {renderHtmlContent(data.descriptionLong)}
+                        </div>
+                    </div>
+
+                    <div className="appPageSection__withBorder">
+                        <h2>{__('Requisiti di Partecipazione', 'gepafin')}</h2>
+                        <div className="row rowContent">
+                            <ul>
+                                {data.aimedTo.map((o, i) => <li key={i}>
+                                    {o.value}
+                                </li>)}
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div className="appPageSection__withBorder">
+                        <h2>{__('Documentazione richiesta', 'gepafin')}</h2>
+                        <div className="ql-editor">
+                            {renderHtmlContent(data.documentationRequested)}
+                        </div>
+                    </div>
+
+                    {/*<div className="appPageSection__withBorder">
+                        <h2>{__('Criteri di Valutazione', 'gepafin')}</h2>
+                        <div className="row rowContent">
+                            <ul>
+                                {data.criteria.map((o, i) => <li key={i}>
+                                    {o.value} {o.score > 0 ? sprintf(__(' (%d punti)'), o.score) : null}
+                                </li>)}
+                            </ul>
+                        </div>
+                    </div>*/}
+
+                    <div className="appPageSection__withBorder">
+                        <h2>{__('Allegati', 'gepafin')}</h2>
+                        <div className="row rowContent">
+                            <ul>
+                                {data.docs
+                                    .filter(o => o.source === 'CALL' && o.type === 'DOCUMENT')
+                                    .map((o, i) => <li key={i}>
+                                        <a href={o.filePath} target="_blank" rel="noreferrer">{o.name}</a>
+                                    </li>)}
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div className="appPageSection">
+                        <h2>{__('FAQ', 'gepafin')}</h2>
+                        <Accordion>
+                            {data.faq
+                                .filter(o => o.isVisible)
+                                .map((o, i) => <AccordionTab key={i} header={renderHtmlContent(o.value)}>
+                                    <div className="ql-editor">
+                                        {renderHtmlContent(o.response)}
+                                    </div>
+                                </AccordionTab>)}
+                        </Accordion>
+                    </div>
+
+                    {REACT_APP_HUB_ID === 't7jh5wfg9QXylNaTZkPoE'
+                        ? null
+                        : <div className="appPageSection">
+                            <h2>{__('Non hai trovato la risposta che cercavi?', 'gepafin')}</h2>
+                            <div className="appForm__field">
+                                <label htmlFor="newQuestion">{__('Fai una domanda', 'gepafin')}</label>
+                                <InputTextarea
+                                    id="newQuestion"
+                                    disabled
+                                    rows={7}
+                                    value={newQuestion}
+                                    placeholder={__('Digita qui la tua domanda', 'gepafin')}
+                                    onChange={(e) => setNewQuestion(e.target.value)}
+                                    aria-describedby="newQuestion-help"/>
+                                <small id="newQuestion-help">
+                                    {__('Riceverai una notifica quando ti risponderemo', 'gepafin')}
+                                </small>
+                            </div>
+                        </div>}
+
+                    <div className="appPageSection">
+                        <h2>{__('Download Documenti', 'gepafin')}</h2>
+                        <div className="appPageSection__actions">
+                            <Button
+                                type="button"
+                                outlined
+                                onClick={() => {
+                                }}
+                                label={__('Scarica Bando Completo', 'gepafin')}
+                                icon="pi pi-download" iconPos="right"/>
+                            <Button
+                                type="button"
+                                outlined
+                                onClick={() => {
+                                }}
+                                label={__('Scarica Modulistica', 'gepafin')}
+                                icon="pi pi-download" iconPos="right"/>
+                            <Button
+                                type="button"
+                                disabled={true}
+                                onClick={() => {
+                                }}
+                                label={__('Presenta Domanda', 'gepafin')}
+                                icon="pi pi-save" iconPos="right"/>
+                            {/*<Button
+                                type="button"
+                                outlined
+                                rounded
+                                disabled={true}
+                                onClick={() => {}}
+                                label={__('Aggiungi a preferiti', 'gepafin')}
+                                icon="pi pi-heart" iconPos="left"/>*/}
+                        </div>
+                    </div>
+
+                    <div className="appPageSection__withBorder">
+                        <h2>{__('Contatti per Assistenza', 'gepafin')}</h2>
+                        <div className="row rowContent">
+                            <p>Email: {data.email}</p>
+                            {!isNil(data.phoneNumber) ?
+                                <p>{__('Telefono', 'gepafin')}: +39 {data.phoneNumber}</p> : null}
+                        </div>
+                    </div>
+                </div>
+                : <>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="4rem" className="mb-8"></Skeleton>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="4rem"></Skeleton>
+                </>}
+        </div>
+    )
+
+}
+
+export default BandoViewPreInstructor;

src/pages/DashboardInstructorManager/components/InstructorManagerMieDomandeTable/index.js

@@ -0,0 +1,195 @@
+import React, { useState, useEffect} from 'react';
+import { __ } from '@wordpress/i18n';
+import { is, uniq, isNil } from 'ramda';
+import { Link } from 'react-router-dom';
+
+// api
+import AssignedApplicationService from '../../../../service/assigned-application-service';
+
+// tools
+import getBandoLabel from '../../../../helpers/getBandoLabel';
+import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+
+// components
+import { FilterMatchMode, FilterOperator } from 'primereact/api';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import { Calendar } from 'primereact/calendar';
+import ProperBandoLabel from '../../../../components/ProperBandoLabel';
+import { Dropdown } from 'primereact/dropdown';
+import { Tag } from 'primereact/tag';
+
+import translationStrings from '../../../../translationStringsForComponents';
+import { useStore } from '../../../../store';
+
+const APP_HUB_ID = process.env.REACT_APP_HUB_ID;
+
+const InstructorManagerMieDomandeTable = ({ userId = null, statuses = [] }) => {
+    const [items, setItems] = useState(null);
+    const [filters, setFilters] = useState(null);
+    const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
+    const [statusesForFilter, setStatusesForFilter] = useState([]);
+    const userData = useStore().main.userData();
+
+    useEffect(() => {
+        if (!isNil(userId)) {
+            setLocalAsyncRequest(true);
+
+            if (userId === 0) {
+                AssignedApplicationService.getAssignedApplications(getCallback, errGetCallbacks, [
+                    ['statuses', statuses]
+                ]);
+            } else {
+                AssignedApplicationService.getAssignedApplications(getCallback, errGetCallbacks, [
+                    ['userId', userId],
+                    ['statuses', statuses]
+                ]);
+            }
+        }
+    }, [userId]);
+
+    const getCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            setItems(getFormattedData(data.data));
+            setStatusesForFilter(uniq(data.data.map(o => o.status)))
+            initFilters();
+        }
+        setLocalAsyncRequest(false);
+    }
+
+    const errGetCallbacks = (data) => {
+        setLocalAsyncRequest(false);
+    }
+
+    const getFormattedData = (data) => {
+        return data.map((d) => {
+            d.evaluationEndDate = is(String, d.evaluationEndDate) ? new Date(d.evaluationEndDate) : (d.evaluationEndDate ? d.evaluationEndDate : '');
+            d.submissionDate = is(String, d.submissionDate) ? new Date(d.submissionDate) : (d.submissionDate ? d.submissionDate : '');
+            return d;
+        });
+    };
+
+    const formatDate = (value) => {
+        return value.toLocaleDateString('it-IT', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        });
+    };
+
+    const clearFilter = () => {
+        initFilters();
+    };
+
+    const initFilters = () => {
+        setFilters({
+            global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+            callName: {
+                operator: FilterOperator.AND,
+                constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }]
+            },
+            companyName: {
+                operator: FilterOperator.AND,
+                constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }]
+            },
+            submissionDate: {
+                operator: FilterOperator.AND,
+                constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }]
+            },
+            evaluationEndDate: {
+                operator: FilterOperator.AND,
+                constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }]
+            }
+        });
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="appTableHeader">
+                <Button type="button" icon="pi pi-filter-slash" label={__('Pulisci', 'gepafin')} outlined onClick={clearFilter} />
+            </div>
+        );
+    };
+
+    const dateAppliedBodyTemplate = (rowData) => {
+        return formatDate(rowData.submissionDate);
+    };
+
+    const dateEndBodyTemplate = (rowData) => {
+        return formatDate(rowData.evaluationEndDate);
+    };
+
+    const dateFilterTemplate = (options) => {
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <ProperBandoLabel status={rowData.status}/>;
+    };
+
+    const statusFilterTemplate = (options) => {
+        return <Dropdown value={options.value} options={statusesForFilter} onChange={(e) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter" showClear />;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={getBandoLabel(option)} severity={getBandoSeverity(option)} />;
+    };
+
+    const actionsBodyTemplate = (rowData) => {
+        const label = ['OPEN', 'SOCCORSO'].includes(rowData.status) && userData.id === rowData.userId
+            ? __('Valuta', 'gepafin')
+            : __('Mostra', 'gepafin');
+        return <Link to={`/mie-domande/${rowData.applicationId}`}>
+            <Button severity="info" label={label} icon="pi pi-eye" size="small" iconPos="right"/>
+        </Link>
+    }
+
+    const header = renderHeader();
+
+    return(
+        <div className="appPageSection__table">
+            <DataTable value={items} paginator showGridlines rows={5} loading={localAsyncRequest} dataKey="id"
+                       filters={filters} stripedRows removableSort
+                       header={header}
+                       emptyMessage={translationStrings.emptyMessage}
+                       onFilter={(e) => setFilters(e.filters)}>
+                <Column field="applicationId" header={__('ID domanda', 'gepafin')}
+                        sortable filterPlaceholder={__('Cerca', 'gepafin')}
+                        style={{ minWidth: '6rem' }}/>
+                <Column field="protocolNumber" header={__('Protocollo', 'gepafin')}
+                        sortable filterPlaceholder={__('Cerca', 'gepafin')}
+                        style={{ minWidth: '6rem' }}/>
+                {APP_HUB_ID !== 't7jh5wfg9QXylNaTZkPoE'
+                    ? <Column field="ndg" header={__('NDG', 'gepafin')}
+                        sortable filterPlaceholder={__('Cerca', 'gepafin')}
+                        style={{ minWidth: '6rem' }}/> : null}
+                {APP_HUB_ID !== 't7jh5wfg9QXylNaTZkPoE'
+                    ? <Column field="appointmentId" header={__('ID appuntamento', 'gepafin')}
+                        sortable filterPlaceholder={__('Cerca', 'gepafin')}
+                        style={{ minWidth: '6rem' }}/> : null}
+                <Column field="callName" header={__('Bando', 'gepafin')}
+                        filter sortable
+                        filterPlaceholder={__('Cerca', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+                <Column field="companyName" header={__('Azienda', 'gepafin')}
+                        filter sortable
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+                <Column header={__('Data ricezione', 'gepafin')} filterField="submissionDate" dataType="date"
+                        style={{ minWidth: '8rem' }}
+                        body={dateAppliedBodyTemplate} filter filterElement={dateFilterTemplate}/>
+                <Column header={__('Scadenza', 'gepafin')} filterField="evaluationEndDate" dataType="date"
+                        style={{ minWidth: '8rem' }}
+                        body={dateEndBodyTemplate} filter filterElement={dateFilterTemplate}/>
+                <Column field="status" header={__('Stato', 'gepafin')}
+                        style={{ minWidth: '7rem' }} body={statusBodyTemplate} filter
+                        filterElement={statusFilterTemplate} />
+                <Column header={__('Azioni', 'gepafin')}
+                        body={actionsBodyTemplate}/>
+            </DataTable>
+        </div>
+    )
+}
+
+export default InstructorManagerMieDomandeTable;

src/pages/DashboardInstructorManager/index.js

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from 'react';
+import { __ } from '@wordpress/i18n';
+import { useNavigate } from 'react-router-dom';
+import NumberFlow from '@number-flow/react';
+import { pathOr } from 'ramda';
+
+// service
+import DashboardService from '../../service/dashboard-service';
+
+// components
+import { Button } from 'primereact/button';
+import PreInstructorDomandeTable from '../DashboardPreInstructor/components/PreInstructorDomandeTable';
+
+const DashboardInstructorManager = () => {
+    const navigate = useNavigate();
+    const [mainStats, setMainStats] = useState({});
+
+    const goToAllEvaluations = () => {
+        navigate('/domande');
+    }
+
+    const getStats = (data) => {
+        if (data.status === 'SUCCESS') {
+            setMainStats(data.data);
+        }
+    }
+
+    const errGetStats = () => {}
+
+    const getStatValue = (key, fallback = '') => {
+        return pathOr(fallback, [key], mainStats);
+    }
+
+    useEffect(() => {
+        DashboardService.getEvaluationsStats(getStats, errGetStats);
+    }, []);
+
+    return(
+        <div className="appPage">
+            <div className="appPage__pageHeader">
+                <h1>{__('Dashboard', 'gepafin')}</h1>
+            </div>
+
+            <div className="appPage__spacer"></div>
+
+            <div className="appPageSection statsBigBadges">
+                <h2>{__('Riepilogo', 'gepafin')}</h2>
+                <div className="statsBigBadges__grid applStats">
+                    <div className="statsBigBadges__gridItem">
+                        <span>{__('Totale domande', 'gepafin')}</span>
+                        <span><NumberFlow
+                            value={getStatValue('numberOfAssignedApplication', 0)}
+                            format={{ notation: 'compact' }}
+                            locales="it-IT"/></span>
+                    </div>
+                    <div className="statsBigBadges__gridItem">
+                        <span>{__('In soccorso', 'gepafin')}</span>
+                        <span><NumberFlow
+                            value={getStatValue('numberOfApplicationInAmendmentState', 0)}
+                            format={{ notation: 'compact' }}
+                            locales="it-IT"/></span>
+                    </div>
+                    <div className="statsBigBadges__gridItem">
+                        <span>{__('In valutazione', 'gepafin')}</span>
+                        <span><NumberFlow
+                            value={getStatValue('numberOfApplicationInOpenState', 0)}
+                            format={{ notation: 'compact' }}
+                            locales="it-IT"/></span>
+                    </div>
+                    <div className="statsBigBadges__gridItem">
+                        <span>{__('Completate', 'gepafin')}</span>
+                        <span><NumberFlow
+                            value={getStatValue('numberOfApplicationInCloseState', 0)}
+                            format={{ notation: 'compact' }}
+                            locales="it-IT"/></span>
+                    </div>
+                    <div className="statsBigBadges__gridItem">
+                        <span>{__('Tempo medio di valutazione', 'gepafin')}</span>
+                        <span><NumberFlow
+                            value={getStatValue('averageEvaluationDays', 0)}
+                            format={{ notation: 'compact' }}
+                            suffix={` ${__('giorni', 'gepafin')}`}
+                            locales="it-IT"/></span>
+                    </div>
+                    <div className="statsBigBadges__gridItem">
+                        <span>{__('Domande in scadenza (48h)', 'gepafin')}</span>
+                        <span><NumberFlow
+                            value={getStatValue('numberOfApplicationExpiringIn48Hours', 0)}
+                            format={{ notation: 'compact' }}
+                            locales="en-US"/></span>
+                    </div>
+                </div>
+            </div>
+
+            <div className="appPage__spacer"></div>
+
+            <div className="appPageSection">
+                <h2>{__('Panoramica delle domande da valutare', 'gepafin')}</h2>
+                <PreInstructorDomandeTable statuses={['OPEN', 'SOCCORSO']} userId={0}/>
+            </div>
+
+            <div className="appPage__spacer"></div>
+
+            <div className="appPageSection__hr">
+                <span>{__('Azioni rapide', 'gepafin')}</span>
+            </div>
+
+            <div className="appPageSection">
+                <div className="appPageSection__actions">
+                    <Button
+                        onClick={goToAllEvaluations}
+                        label={__('Tutte le domande', 'gepafin')} icon="pi pi-arrow-right" iconPos="right"/>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default DashboardInstructorManager;

src/pages/DashboardPreInstructor/components/PreInstructorDomandeTable/index.js

@@ -1,11 +1,8 @@
 import React, { useState, useEffect} from 'react';
 import { __ } from '@wordpress/i18n';
-import { is, uniq } from 'ramda';
+import { is, uniq, isNil } from 'ramda';
 import { Link } from 'react-router-dom';
 
-// store
-import { useStore } from '../../../../store';
-
 // api
 import AssignedApplicationService from '../../../../service/assigned-application-service';
 
@@ -24,27 +21,38 @@ import { Dropdown } from 'primereact/dropdown';
 import { Tag } from 'primereact/tag';
 
 import translationStrings from '../../../../translationStringsForComponents';
+import { useStore } from '../../../../store';
 
 const APP_HUB_ID = process.env.REACT_APP_HUB_ID;
 
-const PreInstructorDomandeTable = () => {
+const PreInstructorDomandeTable = ({ userId = null, statuses = [] }) => {
-    const userData = useStore().main.userData();
     const [items, setItems] = useState(null);
     const [filters, setFilters] = useState(null);
     const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
-    const [statuses, setStatuses] = useState([]);
+    const [statusesForFilter, setStatusesForFilter] = useState([]);
+    const userData = useStore().main.userData();
 
     useEffect(() => {
+        if (!isNil(userId)) {
             setLocalAsyncRequest(true);
+
+            if (userId === 0) {
                 AssignedApplicationService.getAssignedApplications(getCallback, errGetCallbacks, [
-            ['userId', userData.id]
+                    ['statuses', statuses]
                 ]);
-    }, []);
+            } else {
+                AssignedApplicationService.getAssignedApplications(getCallback, errGetCallbacks, [
+                    ['userId', userId],
+                    ['statuses', statuses]
+                ]);
+            }
+        }
+    }, [userId]);
 
     const getCallback = (data) => {
         if (data.status === 'SUCCESS') {
             setItems(getFormattedData(data.data));
-            setStatuses(uniq(data.data.map(o => o.status)))
+            setStatusesForFilter(uniq(data.data.map(o => o.status)))
             initFilters();
         }
         setLocalAsyncRequest(false);
@@ -121,7 +129,7 @@ const PreInstructorDomandeTable = () => {
     };
 
     const statusFilterTemplate = (options) => {
-        return <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter" showClear />;
+        return <Dropdown value={options.value} options={statusesForFilter} onChange={(e) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter" showClear />;
     };
 
     const statusItemTemplate = (option) => {
@@ -129,8 +137,11 @@ const PreInstructorDomandeTable = () => {
     };
 
     const actionsBodyTemplate = (rowData) => {
+        const label = ['OPEN', 'SOCCORSO'].includes(rowData.status) && userData.id === rowData.userId
+            ? __('Valuta', 'gepafin')
+            : __('Mostra', 'gepafin');
         return <Link to={`/domande/${rowData.applicationId}`}>
-            <Button severity="info" label={__('Valuta', 'gepafin')} icon="pi pi-eye" size="small" iconPos="right"/>
+            <Button severity="info" label={label} icon="pi pi-eye" size="small" iconPos="right"/>
         </Link>
     }
 

src/pages/DashboardPreInstructor/index.js

@@ -1,58 +1,106 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useNavigate } from 'react-router-dom';
+import NumberFlow from '@number-flow/react';
+import { pathOr } from 'ramda';
 
 // store
-//import { useStore } from '../../store';
+import { useStore } from '../../store';
 
-// api
+// service
-//import DashboardService from '../../service/dashboard-service';
+import DashboardService from '../../service/dashboard-service';
 
 // components
-//import LatestBandiTable from './components/LatestBandiTable';
-//import MyLatestSubmissionsTable from './components/MyLatestSubmissionsTable';
 import { Button } from 'primereact/button';
 import PreInstructorDomandeTable from './components/PreInstructorDomandeTable';
 
 const DashboardPreInstructor = () => {
     const navigate = useNavigate();
-    //const [mainStats, setMainStats] = useState({});
+    const [mainStats, setMainStats] = useState({});
+    const userData = useStore().main.userData();
 
     const goToAllEvaluations = () => {
         navigate('/domande');
     }
 
+    const getStats = (data) => {
+        if (data.status === 'SUCCESS') {
+            setMainStats(data.data);
+        }
+    }
+
+    const errGetStats = () => {}
+
+    const getStatValue = (key, fallback = '') => {
+        return pathOr(fallback, [key], mainStats);
+    }
+
+    useEffect(() => {
+        DashboardService.getEvaluationsStats(getStats, errGetStats);
+    }, []);
+
     return(
         <div className="appPage">
             <div className="appPage__pageHeader">
                 <h1>{__('Dashboard', 'gepafin')}</h1>
             </div>
 
-            {/*<div className="appPage__spacer"></div>
+            <div className="appPage__spacer"></div>
 
             <div className="appPageSection statsBigBadges">
-                <h2>{__('Panoramica di Sistema', 'gepafin')}</h2>
+                <h2>{__('Riepilogo', 'gepafin')}</h2>
-                <div className="statsBigBadges__grid">
+                <div className="statsBigBadges__grid applStats">
                     <div className="statsBigBadges__gridItem">
-                        <span>{__('Domande attive', 'gepafin')}</span>
+                        <span>{__('Totale domande', 'gepafin')}</span>
-                        <span>{getStatValue('numberOfApplications', 0)}</span>
+                        <span><NumberFlow
+                            value={getStatValue('numberOfAssignedApplication', 0)}
+                            format={{ notation: 'compact' }}
+                            locales="it-IT"/></span>
                     </div>
                     <div className="statsBigBadges__gridItem">
-                        <span>{__('Bandi osservati', 'gepafin')}</span>
+                        <span>{__('In soccorso', 'gepafin')}</span>
-                        <span>{getStatValue('numberOfCalls', 0)}</span>
+                        <span><NumberFlow
+                            value={getStatValue('numberOfApplicationInAmendmentState', 0)}
+                            format={{ notation: 'compact' }}
+                            locales="it-IT"/></span>
                     </div>
                     <div className="statsBigBadges__gridItem">
-                        <span>{__('Documenti da integrare', 'gepafin')}</span>
+                        <span>{__('In valutazione', 'gepafin')}</span>
-                        <span>{getStatValue('numberOfIntegratedDocuments', 0)}</span>
+                        <span><NumberFlow
+                            value={getStatValue('numberOfApplicationInOpenState', 0)}
+                            format={{ notation: 'compact' }}
+                            locales="it-IT"/></span>
+                    </div>
+                    <div className="statsBigBadges__gridItem">
+                        <span>{__('Completate', 'gepafin')}</span>
+                        <span><NumberFlow
+                            value={getStatValue('numberOfApplicationInCloseState', 0)}
+                            format={{ notation: 'compact' }}
+                            locales="it-IT"/></span>
+                    </div>
+                    <div className="statsBigBadges__gridItem">
+                        <span>{__('Tempo medio di valutazione', 'gepafin')}</span>
+                        <span><NumberFlow
+                            value={getStatValue('averageEvaluationDays', 0)}
+                            format={{ notation: 'compact' }}
+                            suffix={` ${__('giorni', 'gepafin')}`}
+                            locales="it-IT"/></span>
+                    </div>
+                    <div className="statsBigBadges__gridItem">
+                        <span>{__('Domande in scadenza (48h)', 'gepafin')}</span>
+                        <span><NumberFlow
+                            value={getStatValue('numberOfApplicationExpiringIn48Hours', 0)}
+                            format={{ notation: 'compact' }}
+                            locales="en-US"/></span>
+                    </div>
                 </div>
             </div>
-            </div>*/}
 
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
                 <h2>{__('Coda di lavoro', 'gepafin')}</h2>
-                <PreInstructorDomandeTable/>
+                <PreInstructorDomandeTable statuses={['OPEN', 'SOCCORSO']} userId={userData.id}/>
             </div>
 
             <div className="appPage__spacer"></div>

src/pages/DomandaEditInstructorManager/index.js

@@ -68,7 +68,7 @@ const DomandaEditPreInstructor = () => {
     });
 
     const goToEvaluationsPage = () => {
-        navigate('/domande');
+        navigate('/mie-domande');
     }
 
     const updateFlagsForSoccorso = (data) => {
@@ -101,9 +101,9 @@ const DomandaEditPreInstructor = () => {
 
     const doNewSoccorso = () => {
         if (connectedSoccorsoId !== 0) {
-            navigate(`/domande/${id}/soccorso/${connectedSoccorsoId}`);
+            navigate(`/mie-domande/${id}/soccorso/${connectedSoccorsoId}`);
         } else {
-            doSaveDraft(`/domande/${id}/aggiungi-soccorso/`)
+            doSaveDraft(`/mie-domande/${id}/aggiungi-soccorso/`)
         }
     }
 
@@ -506,7 +506,7 @@ const DomandaEditPreInstructor = () => {
     }
 
     const evaluationShouldBeBlocked = (data = {}) => {
-        const userData = storeGet.main.userData()
+        const userData = storeGet.main.userData();
         return isAsyncRequest || userData.id !== data.assignedUserId;
     }
 
@@ -592,6 +592,10 @@ const DomandaEditPreInstructor = () => {
                             <span>{__('Data assegnazione', 'gepafin')}</span>
                             <span>{getDateTimeFromISOstring(data.assignedAt)}</span>
                         </p>
+                        <p className="appPageSection__pMeta">
+                            <span>{__('Aassegnato a', 'gepafin')}</span>
+                            <span>{data.assignedUserName}</span>
+                        </p>
                         <p className="appPageSection__pMeta">
                             <span>{__('Scadenza Valutazione', 'gepafin')}</span>
                             <span>{getDateFromISOstring(data.evaluationEndDate)}</span>

src/pages/DomandaEditPreInstructor/index.js

@@ -594,6 +594,10 @@ const DomandaEditPreInstructor = () => {
                             <span>{__('Data assegnazione', 'gepafin')}</span>
                             <span>{getDateTimeFromISOstring(data.assignedAt)}</span>
                         </p>
+                        <p className="appPageSection__pMeta">
+                            <span>{__('Aassegnato a', 'gepafin')}</span>
+                            <span>{data.assignedUserName}</span>
+                        </p>
                         <p className="appPageSection__pMeta">
                             <span>{__('Scadenza Valutazione', 'gepafin')}</span>
                             <span>{getDateFromISOstring(data.evaluationEndDate)}</span>

src/pages/DomandeArchive/index.js

@@ -2,10 +2,10 @@ import React from 'react';
 import { __ } from '@wordpress/i18n';
 
 // components
-import AllDomandeArchiveTable from './components/AllDomandeArchiveTable';
+//import AllDomandeArchiveTable from './components/AllDomandeArchiveTable';
-
+import PreInstructorDomandeTable from '../DashboardPreInstructor/components/PreInstructorDomandeTable';
-const Domande = () => {
 
+const DomandeArchive = () => {
     return (
         <div className="appPage">
             <div className="appPage__pageHeader">
@@ -15,11 +15,11 @@ const Domande = () => {
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
-                <h2>{__('Domande pubblicate', 'gepafin')}</h2>
+                <h2>{__('Domande completate', 'gepafin')}</h2>
-                <AllDomandeArchiveTable/>
+                <PreInstructorDomandeTable statuses={['CLOSE']} userId={0}/>
             </div>
         </div>
     )
 }
 
-export default Domande;
+export default DomandeArchive;

src/pages/DomandeArchivePreInstructor/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+
+// store
+import { useStore } from '../../store';
+
+// components
+import PreInstructorDomandeTable from '../DashboardPreInstructor/components/PreInstructorDomandeTable';
+
+const DomandeArchivePreInstructor = () => {
+    const userData = useStore().main.userData();
+
+    return (
+        <div className="appPage">
+            <div className="appPage__pageHeader">
+                <h1>{__('Archivio domande', 'gepafin')}</h1>
+            </div>
+
+            <div className="appPage__spacer"></div>
+
+            <div className="appPageSection">
+                <h2>{__('Domande completate', 'gepafin')}</h2>
+                <PreInstructorDomandeTable statuses={['CLOSE']} userId={userData.id}/>
+            </div>
+        </div>
+    )
+}
+
+export default DomandeArchivePreInstructor;

src/pages/DomandeInstructorManager/index.js

@@ -159,17 +159,25 @@ const DomandeInstructorManager = () => {
     return(
         <div className="appPage">
             <div className="appPage__pageHeader">
-                <h1>{__('Domande da valutare', 'gepafin')}</h1>
+                <h1>{__('Gestione domande', 'gepafin')}</h1>
             </div>
 
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
-                <PreInstructorDomandeTable/>
+                <h2>{__('Da assegnare', 'gepafin')}</h2>
+                <AllDomandeTable openDialogFn={openAssignDialog} updaterString={updaterString}/>
             </div>
 
             <div className="appPage__spacer"></div>
 
+            <div className="appPageSection">
+                <h2>{__('In lavorazione', 'gepafin')}</h2>
+                <PreInstructorDomandeTable statuses={['OPEN', 'SOCCORSO']} userId={0}/>
+            </div>
+
+            {/*<div className="appPage__spacer"></div>
+
             <div className="appPageSection statsBigBadges">
                 <h2>{__('Riepilogo', 'gepafin')}</h2>
                 <div className="statsBigBadges__grid applStats">
@@ -217,14 +225,7 @@ const DomandeInstructorManager = () => {
                             locales="en-US"/></span>
                     </div>
                 </div>
-            </div>
+            </div>*/}
-
-            <div className="appPage__spacer"></div>
-
-            <div className="appPageSection">
-                <h2>{__('Domande pubblicate', 'gepafin')}</h2>
-                <AllDomandeTable openDialogFn={openAssignDialog} updaterString={updaterString}/>
-            </div>
 
             <Dialog
                 visible={isVisibleEditDialog}

src/pages/DomandeMieInstructorManager/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+
+// store
+import { useStore } from '../../store';
+
+// components
+import InstructorManagerMieDomandeTable
+    from '../DashboardInstructorManager/components/InstructorManagerMieDomandeTable';
+
+const DomandeMieInstructorManager = () => {
+    const userData = useStore().main.userData();
+
+    return(
+        <div className="appPage">
+            <div className="appPage__pageHeader">
+                <h1>{__('Domande da valutare', 'gepafin')}</h1>
+            </div>
+
+            <div className="appPage__spacer"></div>
+
+            <div className="appPageSection">
+                <h2>{__('Nuove domande da valutare', 'gepafin')}</h2>
+                <InstructorManagerMieDomandeTable statuses={['AWAITING']} userId={userData.id}/>
+            </div>
+
+            <div className="appPage__spacer"></div>
+
+            <div className="appPageSection">
+                <h2>{__('Coda di lavoro', 'gepafin')}</h2>
+                <InstructorManagerMieDomandeTable statuses={['OPEN', 'SOCCORSO']} userId={userData.id}/>
+            </div>
+        </div>
+    )
+}
+
+export default DomandeMieInstructorManager;

src/pages/DomandePreInstructor/index.js

@@ -1,30 +1,14 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { __ } from '@wordpress/i18n';
 
+// store
+import { useStore } from '../../store';
+
 // components
 import PreInstructorDomandeTable from '../DashboardPreInstructor/components/PreInstructorDomandeTable';
-import { pathOr } from 'ramda';
-import DashboardService from '../../service/dashboard-service';
-import NumberFlow from '@number-flow/react';
 
 const DomandePreInstructor = () => {
-    const [mainStats, setMainStats] = useState({});
+    const userData = useStore().main.userData();
-
-    const getStats = (data) => {
-        if (data.status === 'SUCCESS') {
-            setMainStats(data.data);
-        }
-    }
-
-    const errGetStats = () => {}
-
-    const getStatValue = (key, fallback = '') => {
-        return pathOr(fallback, [key], mainStats);
-    }
-
-    useEffect(() => {
-        DashboardService.getEvaluationsStats(getStats, errGetStats);
-    }, []);
 
     return(
         <div className="appPage">
@@ -35,58 +19,8 @@ const DomandePreInstructor = () => {
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
-                <PreInstructorDomandeTable/>
+                <h2>{__('Nuove domande da valutare', 'gepafin')}</h2>
-            </div>
+                <PreInstructorDomandeTable statuses={['AWAITING']} userId={userData.id}/>
-
-            <div className="appPage__spacer"></div>
-
-            <div className="appPageSection statsBigBadges">
-                <h2>{__('Riepilogo', 'gepafin')}</h2>
-                <div className="statsBigBadges__grid applStats">
-                    <div className="statsBigBadges__gridItem">
-                        <span>{__('Totale domande', 'gepafin')}</span>
-                        <span><NumberFlow
-                            value={getStatValue('numberOfAssignedApplication', 0)}
-                            format={{ notation: 'compact' }}
-                            locales="it-IT"/></span>
-                    </div>
-                    <div className="statsBigBadges__gridItem">
-                        <span>{__('In soccorso', 'gepafin')}</span>
-                        <span><NumberFlow
-                            value={getStatValue('numberOfApplicationInAmendmentState', 0)}
-                            format={{ notation: 'compact' }}
-                            locales="it-IT"/></span>
-                    </div>
-                    <div className="statsBigBadges__gridItem">
-                        <span>{__('In valutazione', 'gepafin')}</span>
-                        <span><NumberFlow
-                            value={getStatValue('numberOfApplicationInOpenState', 0)}
-                            format={{ notation: 'compact' }}
-                            locales="it-IT"/></span>
-                    </div>
-                    <div className="statsBigBadges__gridItem">
-                        <span>{__('Completate', 'gepafin')}</span>
-                        <span><NumberFlow
-                            value={getStatValue('numberOfApplicationInCloseState', 0)}
-                            format={{ notation: 'compact' }}
-                            locales="it-IT"/></span>
-                    </div>
-                    <div className="statsBigBadges__gridItem">
-                        <span>{__('Tempo medio di valutazione', 'gepafin')}</span>
-                        <span><NumberFlow
-                            value={getStatValue('averageEvaluationDays', 0)}
-                            format={{ notation: 'compact' }}
-                            suffix={` ${__('giorni', 'gepafin')}`}
-                            locales="it-IT"/></span>
-                    </div>
-                    <div className="statsBigBadges__gridItem">
-                        <span>{__('Domande in scadenza (48h)', 'gepafin')}</span>
-                        <span><NumberFlow
-                            value={getStatValue('numberOfApplicationExpiringIn48Hours', 0)}
-                            format={{ notation: 'compact' }}
-                            locales="en-US"/></span>
-                    </div>
-                </div>
             </div>
         </div>
     )

src/pages/ResetPassword/index.js

@@ -1,8 +1,8 @@
-import React, { useRef, useState, useEffect, useMemo } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { __, sprintf } from '@wordpress/i18n';
 import { useForm } from 'react-hook-form';
 import { classNames } from 'primereact/utils';
-import { isEmpty, isNil } from 'ramda';
+import { isEmpty } from 'ramda';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
 // tools

src/pages/SoccorsoAddInstructorManager/index.js

@@ -0,0 +1,351 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { __ } from '@wordpress/i18n';
+import { useNavigate, useParams } from 'react-router-dom';
+import { isEmpty } from 'ramda';
+import { wrap } from 'object-path-immutable';
+
+// store
+import { storeSet, useStore } from '../../store';
+
+// api
+import AmendmentsService from '../../service/amendments-service';
+
+// tools
+import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
+
+// components
+import { Skeleton } from 'primereact/skeleton';
+import { Button } from 'primereact/button';
+import { Checkbox } from 'primereact/checkbox';
+import { Editor } from 'primereact/editor';
+import { InputNumber } from 'primereact/inputnumber';
+import BlockingOverlay from '../../components/BlockingOverlay';
+import { Toast } from 'primereact/toast';
+import { InputSwitch } from 'primereact/inputswitch';
+import ApplicationEvaluationService from '../../service/application-evaluation-service';
+import { Dialog } from 'primereact/dialog';
+
+const SoccorsoAddInstructorManager = () => {
+    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const { id } = useParams();
+    const navigate = useNavigate();
+    const [data, setData] = useState({});
+    const [evaluationId, setEvaluationId] = useState(0);
+    const [formData, setFormData] = useState({});
+    const [isVisibleConfirmDialog, setIsVisibleConfirmDialog] = useState(false)
+    const toast = useRef(null);
+
+    const goToEvaluationPage = () => {
+        navigate(`/mie-domande/${id}`);
+    }
+
+    useEffect(() => {
+        const parsed = parseInt(id)
+        const entityId = !isNaN(parsed) ? parsed : 0;
+
+        storeSet.main.setAsyncRequest();
+        ApplicationEvaluationService.getEvaluationByApplId(getCallbackEvaluation, errGetCallback, [
+            ['applicationId', entityId]
+        ]);
+    }, [id]);
+
+    const getCallbackEvaluation = (data) => {
+        if (data.status === 'SUCCESS') {
+            setEvaluationId(data.data.id);
+            AmendmentsService.getSoccorsoByApplEvalId(data.data.id, getCallback, errGetCallback)
+        }
+    }
+
+    const getCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            setData(data.data);
+            setFormData(getFormattedFormData(data.data));
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetCallback = (data) => {
+        if (toast.current && data.message) {
+            toast.current.show({
+                severity: 'error',
+                summary: '',
+                detail: data.message
+            });
+        }
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const getFormattedFormData = (data) => {
+        let newData = {};
+        newData.formFields = data.formFields;
+        newData.responseDays = 10;
+        newData.note = '';
+        newData.isSendNotification = true;
+        newData.isSendEmail = true;
+        return newData;
+    };
+
+    const renderHeader = () => {
+        return (
+            <span className="ql-formats">
+                <button className="ql-bold" aria-label="Bold"></button>
+                <button className="ql-italic" aria-label="Italic"></button>
+                <button className="ql-underline" aria-label="Underline"></button>
+                <button className="ql-link" aria-label="Link"></button>
+                <button className="ql-list" value="ordered"></button>
+                <button className="ql-header" value="2"></button>
+                <button className="ql-header" value="3"></button>
+                <button className="ql-blockquote"></button>
+                <button className="ql-list" value="bullet"></button>
+                <button className="ql-indent" value="-1"></button>
+                <button className="ql-indent" value="+1"></button>
+            </span>
+        );
+    };
+
+    const header = renderHeader();
+
+    const updateEvaluationValue = (value, path, maxValue) => {
+        let finalValue = value;
+
+        if (maxValue) {
+            finalValue = value > maxValue ? maxValue : value;
+        }
+
+        const newData = wrap(formData).set(path.split('.'), finalValue).value();
+
+        setFormData(newData);
+    }
+
+    const doCreate = () => {
+        storeSet.main.setAsyncRequest();
+
+        AmendmentsService.createSoccorso(formData, createCallback, errCreateCallback, [
+            ['applicationEvaluationId', evaluationId]
+        ]);
+    }
+
+    const createCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            if (toast.current) {
+                toast.current.show({
+                    severity: 'success',
+                    summary: '',
+                    detail: data.message
+                });
+            }
+            setTimeout(() => {
+                navigate(`/mie-domande/${id}/soccorso/${data.data.id}`);
+            }, 1000)
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errCreateCallback = (data) => {
+        if (toast.current && data.message) {
+            toast.current.show({
+                severity: 'error',
+                summary: '',
+                detail: data.message
+            });
+        }
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const initCreationProcess = () => {
+        setIsVisibleConfirmDialog(true);
+    }
+
+    const headerConfirmDialog = () => {
+        return <span>{__('Richiesta di conferma', 'gepafin')}</span>;
+    }
+
+    const hideConfirmDialog = () => {
+        setIsVisibleConfirmDialog(false);
+    }
+
+    const footerConfirmDialog = () => {
+        return <div>
+            <Button type="button" label={__('No', 'gepafin')} onClick={goToEvaluationPage} outlined/>
+            <Button
+                type="button"
+                label={__('Si', 'gepafin')} onClick={doConfirm}/>
+        </div>
+    }
+
+    const doConfirm = () => {
+        setIsVisibleConfirmDialog(false);
+        doCreate();
+    }
+
+    return (
+        <div className="appPage">
+            <div className="appPage__pageHeader">
+                <h1>{__('Richiesta Integrazione Documentale', 'gepafin')}</h1>
+            </div>
+
+            <div className="appPage__spacer"></div>
+            <Toast ref={toast}/>
+            <BlockingOverlay shouldDisplay={isAsyncRequest}/>
+
+            <div className="appPageSection__row">
+                <Button
+                    type="button"
+                    outlined
+                    onClick={goToEvaluationPage}
+                    label={__('Indietro', 'gepafin')}
+                    icon="pi pi-arrow-left" iconPos="left"/>
+            </div>
+
+            <div className="appPage__spacer"></div>
+
+            {!isAsyncRequest && !isEmpty(data)
+                ? <div className="appPage__content">
+                    <div className="appPageSection__withBorder column">
+                        <p className="appPageSection__pMeta">
+                            <span>{__('ID domanda', 'gepafin')}</span>
+                            <span>{data.applicationId}</span>
+                        </p>
+                        <p className="appPageSection__pMeta">
+                            <span>{__('Bando', 'gepafin')}</span>
+                            <span>{data.callName}</span>
+                        </p>
+                        <p className="appPageSection__pMeta">
+                            <span>{__('Referente Aziendale', 'gepafin')}</span>
+                            <span>{data.beneficiaryName}</span>
+                        </p>
+                    </div>
+
+                    <div className="appPageSection">
+                        <div className="appPageSection columns">
+                            <div>
+                                <h3>{__('Pec/Email', 'gepafin')}</h3>
+                                <div style={{marginBottom: '30px'}}>
+                                    <Editor
+                                        value={formData.note}
+                                        placeholder={__('Digita qui il messagio', 'gepafin')}
+                                        headerTemplate={header}
+                                        onTextChange={(e) => updateEvaluationValue(
+                                            e.htmlValue,
+                                            'note'
+                                        )}
+                                        style={{ height: 80 * 3, width: '100%' }}
+                                    />
+                                </div>
+
+                                <h3>{__('Tempo per la Risposta (giorni)', 'gepafin')}</h3>
+                                <div style={{marginBottom: '30px'}}>
+                                    <InputNumber
+                                        keyfilter="int"
+                                        value={formData.responseDays}
+                                        showButtons
+                                        onChange={(e) => updateEvaluationValue(
+                                            e.value,
+                                            'responseDays',
+                                            9999
+                                        )}/>
+                                </div>
+
+                                <h3>{__('Notifica', 'gepafin')}</h3>
+                                <div className="appPageSection__withBorder grey">
+                                    <div className="appForm__field row">
+                                        <InputSwitch
+                                            inputId="notify_email"
+                                            checked={formData.isSendEmail}
+                                            onChange={(e) => updateEvaluationValue(
+                                                e.value,
+                                                'isSendEmail'
+                                            )}/>
+                                        <label htmlFor="notify_email">{__('Notifiche Email', 'gepafin')}</label>
+                                    </div>
+                                    <div className="appForm__field row">
+                                        <InputSwitch
+                                            inputId="notify_push"
+                                            checked={formData.isSendNotification}
+                                            onChange={(e) => updateEvaluationValue(
+                                                e.value,
+                                                'isSendNotification'
+                                            )}/>
+                                        <label htmlFor="notify_push">{__('Notifiche Push', 'gepafin')}</label>
+                                    </div>
+                                </div>
+                            </div>
+                            {formData.formFields
+                                ? <div>
+                                    <h3>{__('Documenti da Integrare', 'gepafin')}</h3>
+                                    <div className="appPageSection__withBorder grey">
+                                        <div className="appPageSection__checklist">
+                                            {formData.formFields.map((o, i) => <div key={o.fieldId}>
+                                                <Checkbox
+                                                    inputId={`checklist_${o.fieldId}`}
+                                                    onChange={(e) => updateEvaluationValue(
+                                                        e.checked,
+                                                        `formFields.${i}.selected`
+                                                    )}
+                                                    checked={o.selected}></Checkbox>
+                                                <label htmlFor={`checklist_${o.fieldId}`}>{o.label}</label>
+                                            </div>)}
+                                        </div>
+                                    </div>
+                                </div>
+                                : null}
+                        </div>
+                    </div>
+
+                    <div className="appPageSection__message warning">
+                        <i className="pi pi-exclamation-triangle"></i>
+                        <span className="summary">{__('Attenzione', 'gepafin')}</span>
+                        <span>{__("L'invio della richiesta di integrazione sospenderà il termine di valutazione della domanda.", 'gepafin')}</span>
+                    </div>
+
+                    <div className="appPageSection__hr">
+                        <span>{__('Azioni', 'gepafin')}</span>
+                    </div>
+
+                    <div className="appPageSection">
+                        <div className="appPageSection__actions">
+                            <Button
+                                type="button"
+                                outlined
+                                onClick={goToEvaluationPage}
+                                label={__('Anulla', 'gepafin')}
+                                icon="pi pi-times" iconPos="right"/>
+                            <Button
+                                type="button"
+                                onClick={initCreationProcess}
+                                label={__('Invia richiesta', 'gepafin')}
+                                icon="pi pi-check" iconPos="right"/>
+                        </div>
+                    </div>
+
+                    <Dialog
+                        visible={isVisibleConfirmDialog}
+                        modal
+                        header={headerConfirmDialog}
+                        footer={footerConfirmDialog}
+                        style={{ maxWidth: '600px', width: '100%' }}
+                        onHide={hideConfirmDialog}>
+                        <div className="appForm__field">
+                            <p>{__('Soccorso istruttorio autorizzato dal direttore e autorizzazione caricata su portale a seguito del quale parte l\'email?', 'gepafin')}</p>
+                        </div>
+                    </Dialog>
+
+                </div>
+                : <>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="4rem" className="mb-8"></Skeleton>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="4rem"></Skeleton>
+                </>}
+        </div>
+    )
+
+}
+
+export default SoccorsoAddInstructorManager;

src/pages/SoccorsoEditInstructorManager/index.js

@@ -0,0 +1,587 @@
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { __ } from '@wordpress/i18n';
+import { useNavigate, useParams } from 'react-router-dom';
+import { is, isEmpty } from 'ramda';
+import { wrap } from 'object-path-immutable';
+import { klona } from 'klona';
+import { useForm } from 'react-hook-form';
+
+// store
+import { storeSet, useStore } from '../../store';
+
+// api
+import AmendmentsService from '../../service/amendments-service';
+
+// tools
+import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
+import getBandoLabel from '../../helpers/getBandoLabel';
+import getDateFromISOstring from '../../helpers/getDateFromISOstring';
+import getEmailTemplateForSoccorso from '../../helpers/getStrippedHtmlBodyTags';
+
+// components
+import { Button } from 'primereact/button';
+import BlockingOverlay from '../../components/BlockingOverlay';
+import { Toast } from 'primereact/toast';
+import { classNames } from 'primereact/utils';
+import { Dialog } from 'primereact/dialog';
+import FormField from '../../components/FormField';
+import { Editor } from 'primereact/editor';
+import { InputNumber } from 'primereact/inputnumber';
+import SoccorsoComunications from '../SoccorsoEditPreInstructor/components/SoccorsoComunications';
+
+
+const SoccorsoEditInstructorManager = () => {
+    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const { id, amendmentId } = useParams();
+    const navigate = useNavigate();
+    const [data, setData] = useState({});
+    const [isVisibleCloseAmendDialog, setIsVisibleCloseAmendDialog] = useState(false);
+    const [isVisibleExtendTimeDialog, setIsVisibleExtendTimeDialog] = useState(false);
+    const [extendedTime, setExtendedTime] = useState(3);
+    const [isLoadingExtendingTime, setIsLoadingExtendingTime] = useState(false);
+    const [isLoadingReminding, setIsLoadingReminding] = useState(false);
+    const [internalNote, setInternalNote] = useState('');
+    const toast = useRef(null);
+    const [formInitialData, setFormInitialData] = useState({});
+    const {
+        control,
+        handleSubmit,
+        formState: { errors },
+        setValue,
+        register,
+        trigger,
+        getValues
+    } = useForm({
+        defaultValues: useMemo(() => {
+            return formInitialData;
+        }, [formInitialData]), mode: 'onChange'
+    });
+
+    const goToEvaluationPage = () => {
+        navigate(`/mie-domande/${id}`);
+    }
+
+    const getCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            setData(getFormattedData(data.data));
+            let formDataInitial = data.data.applicationFormFields.reduce((acc, cur) => {
+                if (cur.fieldValue) {
+                    acc[cur.fieldId] = cur.fieldValue;
+                }
+                return acc;
+            }, {});
+            formDataInitial = {
+                ...formDataInitial,
+                amendmentDocuments: data.data.amendmentDocuments
+            }
+            setFormInitialData(formDataInitial);
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetCallback = (data) => {
+        if (toast.current && data.message) {
+            toast.current.show({
+                severity: 'error',
+                summary: '',
+                detail: data.message
+            });
+        }
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const getFormattedData = (data) => {
+        data.startDate = is(String, data.startDate) ? new Date(data.startDate) : (data.startDate ? data.startDate : '');
+        data.expirationDate = is(String, data.expirationDate) ? new Date(data.expirationDate) : (data.expirationDate ? data.expirationDate : '');
+        return data;
+    };
+
+    const renderHeader = () => {
+        return (
+            <span className="ql-formats">
+                <button className="ql-bold" aria-label="Bold"></button>
+                <button className="ql-italic" aria-label="Italic"></button>
+                <button className="ql-underline" aria-label="Underline"></button>
+                <button className="ql-link" aria-label="Link"></button>
+                <button className="ql-list" value="ordered"></button>
+                <button className="ql-header" value="2"></button>
+                <button className="ql-header" value="3"></button>
+                <button className="ql-blockquote"></button>
+                <button className="ql-list" value="bullet"></button>
+                <button className="ql-indent" value="-1"></button>
+                <button className="ql-indent" value="+1"></button>
+            </span>
+        );
+    };
+
+    const header = renderHeader();
+
+    const updateNewAmendmentData = (value, path) => {
+        const newData = wrap(data).set(path, value).value();
+        setData(newData);
+    }
+
+    const onSubmit = () => {
+    };
+
+    const doUpdateAmendment = (doClose = false) => {
+        trigger();
+        let formValues = klona(getValues());
+        const newFormValues = Object.keys(formValues)
+            .filter(v => v !== 'amendmentDocuments')
+            .reduce((acc, cur) => {
+                let fieldVal = formValues[cur];
+
+                fieldVal = isEmpty(fieldVal) ? null : fieldVal;
+                fieldVal = is(Array, fieldVal) ? fieldVal.map(o => o.id).join(',') : null;
+
+                acc.push({
+                    'fieldId': cur,
+                    'fieldValue': fieldVal
+                });
+                return acc;
+            }, []);
+        const newAmendDocs = formValues.amendmentDocuments
+            ? formValues.amendmentDocuments.map(o => o.id).join(',')
+            : '';
+
+        const submitData = {
+            applicationFormFields: newFormValues,
+            amendmentDocuments: newAmendDocs,
+            amendmentNotes: data.amendmentNotes
+        }
+
+        storeSet.main.setAsyncRequest();
+        AmendmentsService.updateSoccorso(
+            amendmentId,
+            submitData,
+            (resp) => updateAmendmentCallback(resp, doClose),
+            errUpdateAmendmentCallback
+        );
+    }
+
+    const updateAmendmentCallback = (data, doClose = false) => {
+        if (data.status === 'SUCCESS') {
+            setData(getFormattedData(data.data));
+
+            if (doClose) {
+                const submitData = {
+                    internalNote
+                }
+                storeSet.main.setAsyncRequest();
+                AmendmentsService.closeSoccorso(amendmentId, submitData, closeAmendmentCallback, errCloseAmendmentCallback);
+            } else {
+                if (toast.current) {
+                    toast.current.show({
+                        severity: 'success',
+                        summary: '',
+                        detail: data.message
+                    });
+                }
+                let formDataInitial = data.data.applicationFormFields.reduce((acc, cur) => {
+                    if (cur.fieldValue) {
+                        acc[cur.fieldId] = cur.fieldValue;
+                    }
+                    return acc;
+                }, formInitialData);
+                formDataInitial = {
+                    ...formDataInitial,
+                    amendmentDocuments: data.data.amendmentDocuments
+                }
+                setFormInitialData(formDataInitial);
+            }
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errUpdateAmendmentCallback = (data) => {
+        if (toast.current && data.message) {
+            toast.current.show({
+                severity: 'error',
+                summary: '',
+                detail: data.message
+            });
+        }
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const openCloseAmendmentDialog = () => {
+        setIsVisibleCloseAmendDialog(true);
+    }
+
+    const headerCloseAmendDialog = () => {
+        return <span>{__('Chiudi Soccorso Istruttorio', 'gepafin')}</span>
+    }
+
+    const hideCloseAmendDialog = () => {
+        setIsVisibleCloseAmendDialog(false);
+    }
+
+    const footerCloseAmendDialog = () => {
+        return <div>
+            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideCloseAmendDialog} outlined/>
+            <Button
+                type="button"
+                disabled={isAsyncRequest || isEmpty(data.internalNotes)}
+                label={__('Invia', 'gepafin')} onClick={doCloseAmendment}/>
+        </div>
+    }
+
+    const doCloseAmendment = () => {
+        doUpdateAmendment(true);
+    }
+
+    const closeAmendmentCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            if (toast.current) {
+                toast.current.show({
+                    severity: 'success',
+                    summary: '',
+                    detail: data.message
+                });
+            }
+            if (data.data.status) {
+                updateNewAmendmentData(data.data.status, ['status']);
+                setIsVisibleCloseAmendDialog(false);
+            }
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errCloseAmendmentCallback = (data) => {
+        if (toast.current && data.message) {
+            toast.current.show({
+                severity: 'error',
+                summary: '',
+                detail: data.message
+            });
+        }
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const headerExtendRespDialog = () => {
+        return <span>{__('Estendi scadenza', 'gepafin')}</span>
+    }
+
+    const hideExtendRespDialog = () => {
+        setIsVisibleExtendTimeDialog(false);
+    }
+
+    const footerExtendRespDialog = () => {
+        return <div>
+            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideExtendRespDialog} outlined/>
+            <Button
+                type="button"
+                disabled={isLoadingExtendingTime || isEmpty(extendedTime)}
+                label={__('Invia', 'gepafin')} onClick={doExtendTimeResponse}/>
+        </div>
+    }
+
+    const openExtendResponseTimeDialog = () => {
+        setIsVisibleExtendTimeDialog(true);
+        setExtendedTime(3);
+    }
+
+    const doExtendTimeResponse = () => {
+        setIsLoadingExtendingTime(true);
+        AmendmentsService.extendSoccorso(amendmentId, extendedTime, extendCallback, errExtendCallback);
+    }
+
+    const extendCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            if (toast.current) {
+                toast.current.show({
+                    severity: 'success',
+                    summary: '',
+                    detail: data.message
+                });
+            }
+            setIsVisibleExtendTimeDialog(false);
+        }
+        setIsLoadingExtendingTime(false);
+    }
+
+    const errExtendCallback = (data) => {
+        if (toast.current && data.message) {
+            toast.current.show({
+                severity: 'error',
+                summary: '',
+                detail: data.message
+            });
+        }
+        set404FromErrorResponse(data);
+        setIsLoadingExtendingTime(false);
+    }
+
+    const sendReminder = () => {
+        setIsLoadingReminding(true);
+        AmendmentsService.sendReminderForSoccorso(amendmentId, reminderCallback, errReminderCallback)
+    }
+
+    const reminderCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            if (toast.current) {
+                toast.current.show({
+                    severity: 'success',
+                    summary: '',
+                    detail: data.message
+                });
+            }
+        }
+        setIsLoadingReminding(false);
+    }
+
+    const errReminderCallback = (data) => {
+        if (toast.current && data.message) {
+            toast.current.show({
+                severity: 'error',
+                summary: '',
+                detail: data.message
+            });
+        }
+        set404FromErrorResponse(data);
+        setIsLoadingReminding(false);
+    }
+
+    useEffect(() => {
+        if (formInitialData) {
+            Object.keys(formInitialData).map(k => setValue(k, formInitialData[k]));
+            trigger();
+        }
+    }, [formInitialData]);
+
+    useEffect(() => {
+        const parsedSoccorsoId = parseInt(amendmentId);
+        const soccorsoEntityId = !isNaN(parsedSoccorsoId) ? parsedSoccorsoId : 0;
+
+        AmendmentsService.getSoccorsoById(getCallback, errGetCallback, [['id', soccorsoEntityId]]);
+    }, [amendmentId]);
+
+    return (
+        <div className="appPage">
+            <div className="appPage__pageHeader">
+                <h1>{__('Soccorso Istruttorio - Dettagli', 'gepafin')}</h1>
+            </div>
+
+            <div className="appPage__spacer"></div>
+            <Toast ref={toast}/>
+            <BlockingOverlay shouldDisplay={isAsyncRequest}/>
+
+            <div className="appPageSection__row">
+                <Button
+                    type="button"
+                    outlined
+                    onClick={goToEvaluationPage}
+                    label={__('Indietro', 'gepafin')}
+                    icon="pi pi-arrow-left" iconPos="left"/>
+            </div>
+
+            <div className="appPage__spacer"></div>
+
+            <div className="appPage__content">
+                <div className="appPageSection__withBorder columns">
+                    <p className="appPageSection__pMeta">
+                        <span>{__('ID domanda', 'gepafin')}</span>
+                        <span>{data.applicationId}</span>
+                    </p>
+                    <p className="appPageSection__pMeta">
+                        <span>{__('Bando', 'gepafin')}</span>
+                        <span>{data.callName}</span>
+                    </p>
+                    <p className="appPageSection__pMeta">
+                        <span>{__('Referente Aziendale', 'gepafin')}</span>
+                        <span>{data.beneficiaryName}</span>
+                    </p>
+                    <p className="appPageSection__pMeta">
+                        <span>{__('Inizio', 'gepafin')}</span>
+                        <span>{getDateFromISOstring(data.startDate)}</span>
+                    </p>
+                    <p className="appPageSection__pMeta">
+                        <span>{__('Scadenza', 'gepafin')}</span>
+                        <span>{getDateFromISOstring(data.expirationDate)}</span>
+                    </p>
+                    <p className="appPageSection__pMeta">
+                        <span>{__('Stato', 'gepafin')}</span>
+                        <span>{getBandoLabel(data.status)}</span>
+                    </p>
+                </div>
+
+                <div className="appPageSection">
+                    <h2>{__('Dettagli richiesta', 'gepafin')}</h2>
+                    <h3>{__('Note e spiegazioni', 'gepafin')}</h3>
+                    <div
+                        className="appPageSection__emailTemplate">{getEmailTemplateForSoccorso(data.emailTemplate, data.note)}</div>
+                </div>
+                <div className="appPageSection">
+                    <h3>{__('Documenti richiesti', 'gepafin')}</h3>
+                    <ol className="appPageSection__list">
+                        {data.formFields
+                            ? data.formFields.map((o, i) => <li key={o.fieldId}
+                                                                style={{ flexDirection: 'row' }}>
+                                <span>{o.label}</span>
+                            </li>) : null}
+                    </ol>
+                </div>
+
+                <div className="appPageSection">
+                    <h2>{__('Comunicazioni', 'gepafin')}</h2>
+                    <SoccorsoComunications amendmentId={amendmentId} soccorsoStatus={data.status}/>
+                </div>
+
+                {data.formFields && !isEmpty(data.formFields)
+                    ? <div className="appPageSection">
+                        <h2>{__('Documenti Ricevuti', 'gepafin')}</h2>
+
+                        <form className="appForm" onSubmit={handleSubmit(onSubmit)}>
+                            {data.formFields.map((o, i) => {
+                                return <FormField
+                                    key={o.fieldId}
+                                    disabled={['CLOSE', 'AWAITING', 'EXPIRED'].includes(data.status)}
+                                    type="fileupload"
+                                    setDataFn={setValue}
+                                    saveFormCallback={doUpdateAmendment}
+                                    fieldName={o.fieldId}
+                                    label={o.label}
+                                    control={control}
+                                    register={register}
+                                    errors={errors}
+                                    defaultValue={formInitialData[o.fieldId] ? formInitialData[o.fieldId] : []}
+                                    accept={[]}
+                                    source="AMENDMENT"
+                                    sourceId={amendmentId}
+                                    multiple={true}
+                                />
+                            })}
+                        </form>
+                    </div> : null}
+
+                <div className="appPageSection">
+                    <h2>{__('Documenti aggiuntivi', 'gepafin')}</h2>
+                    <div className="appPageSection">
+                        <h3>{__('Notes', 'gepafin')}</h3>
+                        <div style={{ marginBottom: '30px', width: '100%', position: 'relative' }}>
+                            <BlockingOverlay shouldDisplay={['CLOSE', 'AWAITING', 'EXPIRED'].includes(data.status)}/>
+                            <Editor
+                                value={data.amendmentNotes}
+                                readOnly={['CLOSE', 'AWAITING', 'EXPIRED'].includes(data.status)}
+                                placeholder={__('Digita qui il messagio', 'gepafin')}
+                                headerTemplate={header}
+                                onTextChange={(e) => updateNewAmendmentData(
+                                    e.htmlValue,
+                                    'amendmentNotes'
+                                )}
+                                style={{ height: 80 * 3, width: '100%' }}
+                            />
+                        </div>
+                        <FormField
+                            type="fileupload"
+                            disabled={['CLOSE', 'AWAITING', 'EXPIRED'].includes(data.status)}
+                            setDataFn={setValue}
+                            saveFormCallback={doUpdateAmendment}
+                            fieldName="amendmentDocuments"
+                            label={__('I file', 'gepafin')}
+                            control={control}
+                            register={register}
+                            errors={errors}
+                            defaultValue={formInitialData.amendmentDocuments ? formInitialData.amendmentDocuments : []}
+                            accept={[]}
+                            source="amendment"
+                            sourceId={amendmentId}
+                            multiple={true}
+                        />
+                    </div>
+                </div>
+
+                <div className="appPage__spacer"></div>
+
+                <div className="appPageSection__hr">
+                    <span>{__('Azioni', 'gepafin')}</span>
+                </div>
+
+                <div className="appPageSection">
+                    <div className="appPageSection__actions">
+                        <Button
+                            type="button"
+                            onClick={sendReminder}
+                            disabled={isLoadingReminding || ['CLOSE', 'EXPIRED'].includes(data.status)}
+                            outlined
+                            label={__('Invia Sollecito', 'gepafin')}
+                            icon="pi pi-send"
+                        />
+                        <Button
+                            type="button"
+                            onClick={openExtendResponseTimeDialog}
+                            disabled={isLoadingExtendingTime || ['CLOSE', 'EXPIRED'].includes(data.status)}
+                            outlined
+                            label={__('Estendi Scadenza', 'gepafin')}
+                            icon="pi pi-stopwatch"
+                        />
+                        <Button
+                            type="button"
+                            onClick={() => doUpdateAmendment()}
+                            disabled={isAsyncRequest || ['CLOSE', 'AWAITING', 'EXPIRED'].includes(data.status)}
+                            label={__('Salva bozza', 'gepafin')}
+                            icon="pi pi-save" iconPos="right"/>
+                        <Button
+                            type="button"
+                            onClick={openCloseAmendmentDialog}
+                            disabled={isAsyncRequest || ['CLOSE', 'AWAITING'].includes(data.status)}
+                            label={__('Chiudi Soccorso Istruttorio', 'gepafin')}
+                            icon="pi pi-times" iconPos="right"/>
+                    </div>
+                </div>
+
+            </div>
+
+            <Dialog
+                visible={isVisibleExtendTimeDialog}
+                modal
+                header={headerExtendRespDialog}
+                footer={footerExtendRespDialog}
+                style={{ maxWidth: '600px', width: '100%' }}
+                onHide={hideExtendRespDialog}>
+                <div className="appForm__field">
+                    <label
+                        className={classNames({ 'p-error': isEmpty(extendedTime) })}>
+                        {__('Giorni', 'gepafin')}*
+                    </label>
+                    <InputNumber
+                        keyfilter="int"
+                        disabled={['CLOSE', 'EXPIRED'].includes(data.status)}
+                        value={extendedTime}
+                        showButtons
+                        onChange={(e) => setExtendedTime(e.value)}/>
+                </div>
+            </Dialog>
+
+            <Dialog
+                visible={isVisibleCloseAmendDialog}
+                modal
+                header={headerCloseAmendDialog}
+                footer={footerCloseAmendDialog}
+                style={{ maxWidth: '600px', width: '100%' }}
+                onHide={hideCloseAmendDialog}>
+                <div className="appForm__field">
+                    <label>{__('Motivazioni', 'gepafin')}</label>
+                    <div style={{ position: 'relative' }}>
+                        <BlockingOverlay shouldDisplay={data.status === 'CLOSE'}/>
+                        <Editor
+                            value={internalNote}
+                            readOnly={['CLOSE', 'EXPIRED'].includes(data.status)}
+                            placeholder={__('Digita qui il messagio', 'gepafin')}
+                            headerTemplate={header}
+                            onTextChange={(e) => setInternalNote(e.htmlValue)}
+                            style={{ height: 80 * 3, width: '100%' }}
+                        />
+                    </div>
+                </div>
+            </Dialog>
+        </div>
+    )
+
+}
+
+export default SoccorsoEditInstructorManager;

src/pages/SoccorsoIstruttorioPreInstructor/index.js

@@ -34,12 +34,6 @@ const SoccorsoIstruttorioPreInstructor = () => {
 
             <div className="appPage__spacer"></div>
 
-            <div className="appPageSection">
-                <PreInstructorSoccorsiTable/>
-            </div>
-
-            <div className="appPage__spacer"></div>
-
             <div className="appPageSection statsBigBadges">
                 <h2>{__('Riepilogo', 'gepafin')}</h2>
                 <div className="statsBigBadges__grid applStats">
@@ -88,6 +82,12 @@ const SoccorsoIstruttorioPreInstructor = () => {
                     </div>
                 </div>
             </div>
+
+            <div className="appPage__spacer"></div>
+
+            <div className="appPageSection">
+                <PreInstructorSoccorsiTable/>
+            </div>
         </div>
     )
 }

src/routes.js

@@ -41,6 +41,13 @@ import DomandeInstructorManager from './pages/DomandeInstructorManager';
 import DomandaEditInstructorManager from './pages/DomandaEditInstructorManager';
 import UserActivity from './pages/UserActivity';
 import DomandeArchive from './pages/DomandeArchive';
+import BandiPreInstructor from './pages/BandiPreInstructor';
+import BandoViewPreInstructor from './pages/BandoViewPreInstructor';
+import DomandeArchivePreInstructor from './pages/DomandeArchivePreInstructor';
+import DashboardInstructorManager from './pages/DashboardInstructorManager';
+import DomandeMieInstructorManager from './pages/DomandeMieInstructorManager';
+import SoccorsoAddInstructorManager from './pages/SoccorsoAddInstructorManager';
+import SoccorsoEditInstructorManager from './pages/SoccorsoEditInstructorManager';
 
 const routes = ({ role, chosenCompanyId }) => {
 
@@ -51,19 +58,19 @@ const routes = ({ role, chosenCompanyId }) => {
                     {'ROLE_SUPER_ADMIN' === role ? <Dashboard/> : null}
                     {'ROLE_BENEFICIARY' === role ? <DashboardBeneficiario/> : null}
                     {'ROLE_PRE_INSTRUCTOR' === role ? <DashboardPreInstructor/> : null}
-                    {'ROLE_INSTRUCTOR_MANAGER' === role ? <DashboardPreInstructor/> : null}
+                    {'ROLE_INSTRUCTOR_MANAGER' === role ? <DashboardInstructorManager/> : null}
                 </DefaultLayout>}/>
                 <Route path="/bandi" element={<DefaultLayout>
                     {'ROLE_SUPER_ADMIN' === role ? <Bandi/> : null}
                     {'ROLE_BENEFICIARY' === role ? <BandiBeneficiario/> : null}
-                    {'ROLE_PRE_INSTRUCTOR' === role ? <PageNotFound/> : null}
+                    {'ROLE_PRE_INSTRUCTOR' === role ? <BandiPreInstructor/> : null}
-                    {'ROLE_INSTRUCTOR_MANAGER' === role ? <PageNotFound/> : null}
+                    {'ROLE_INSTRUCTOR_MANAGER' === role ? <BandiPreInstructor/> : null}
                 </DefaultLayout>}/>
                 <Route path="/bandi/:id" element={<DefaultLayout>
                     {'ROLE_SUPER_ADMIN' === role ? <BandoEdit/> : null}
                     {'ROLE_BENEFICIARY' === role ? <BandoViewBeneficiario/> : null}
-                    {'ROLE_PRE_INSTRUCTOR' === role ? <PageNotFound/> : null}
+                    {'ROLE_PRE_INSTRUCTOR' === role ? <BandoViewPreInstructor/> : null}
-                    {'ROLE_INSTRUCTOR_MANAGER' === role ? <PageNotFound/> : null}
+                    {'ROLE_INSTRUCTOR_MANAGER' === role ? <BandoViewPreInstructor/> : null}
                 </DefaultLayout>}/>
                 <Route path="/bandi/:id/preview" element={<DefaultLayout>
                     {'ROLE_SUPER_ADMIN' === role ? <BandoView/> : null}
@@ -117,7 +124,7 @@ const routes = ({ role, chosenCompanyId }) => {
                     {'ROLE_SUPER_ADMIN' === role ? <BandoApplicationPreview/> : null}
                     {'ROLE_BENEFICIARY' === role ? <SoccorsoEditBeneficiario/> : null}
                     {'ROLE_PRE_INSTRUCTOR' === role ? <DomandaEditPreInstructor/> : null}
-                    {'ROLE_INSTRUCTOR_MANAGER' === role ? <DomandaEditInstructorManager/> : null}
+                    {'ROLE_INSTRUCTOR_MANAGER' === role ? <DomandaEditPreInstructor/> : null}
                 </DefaultLayout>}/>
                 <Route path="/domande/:id/preview" element={<DefaultLayout>
                     {'ROLE_SUPER_ADMIN' === role ? <BandoApplicationPreview/> : null}
@@ -128,7 +135,7 @@ const routes = ({ role, chosenCompanyId }) => {
                 <Route path="/domande-archivio" element={<DefaultLayout>
                     {'ROLE_SUPER_ADMIN' === role ? <DomandeArchive/> : null}
                     {'ROLE_BENEFICIARY' === role ? <PageNotFound/> : null}
-                    {'ROLE_PRE_INSTRUCTOR' === role ? <DomandeArchive/> : null}
+                    {'ROLE_PRE_INSTRUCTOR' === role ? <DomandeArchivePreInstructor/> : null}
                     {'ROLE_INSTRUCTOR_MANAGER' === role ? <DomandeArchive/> : null}
                 </DefaultLayout>}/>
                 <Route path="/domande-archivio/:id/preview" element={<DefaultLayout>
@@ -141,7 +148,7 @@ const routes = ({ role, chosenCompanyId }) => {
                     {'ROLE_SUPER_ADMIN' === role ? <PageNotFound/> : null}
                     {'ROLE_BENEFICIARY' === role ? <PageNotFound/> : null}
                     {'ROLE_PRE_INSTRUCTOR' === role ? <SoccorsoAddPreInstructor/> : null}
-                    {'ROLE_INSTRUCTOR_MANAGER' === role ? <SoccorsoAddPreInstructor/> : null}
+                    {'ROLE_INSTRUCTOR_MANAGER' === role ? <PageNotFound/> : null}
                 </DefaultLayout>}/>
                 <Route path="/domande/:id/soccorso/:amendmentId" element={<DefaultLayout>
                     {'ROLE_SUPER_ADMIN' === role ? <PageNotFound/> : null}
@@ -155,6 +162,36 @@ const routes = ({ role, chosenCompanyId }) => {
                     {'ROLE_PRE_INSTRUCTOR' === role ? <SoccorsoIstruttorioPreInstructor/> : null}
                     {'ROLE_INSTRUCTOR_MANAGER' === role ? <SoccorsoIstruttorioPreInstructor/> : null}
                 </DefaultLayout>}/>
+                <Route path="/mie-domande" element={<DefaultLayout>
+                    {'ROLE_SUPER_ADMIN' === role ? <PageNotFound/> : null}
+                    {'ROLE_BENEFICIARY' === role ? <PageNotFound/> : null}
+                    {'ROLE_PRE_INSTRUCTOR' === role ? <PageNotFound/> : null}
+                    {'ROLE_INSTRUCTOR_MANAGER' === role ? <DomandeMieInstructorManager/> : null}
+                </DefaultLayout>}/>
+                <Route path="/mie-domande/:id/" element={<DefaultLayout>
+                    {'ROLE_SUPER_ADMIN' === role ? <PageNotFound/> : null}
+                    {'ROLE_BENEFICIARY' === role ? <PageNotFound/> : null}
+                    {'ROLE_PRE_INSTRUCTOR' === role ? <PageNotFound/> : null}
+                    {'ROLE_INSTRUCTOR_MANAGER' === role ? <DomandaEditInstructorManager/> : null}
+                </DefaultLayout>}/>
+                <Route path="/mie-domande/:id/aggiungi-soccorso" element={<DefaultLayout>
+                    {'ROLE_SUPER_ADMIN' === role ? <PageNotFound/> : null}
+                    {'ROLE_BENEFICIARY' === role ? <PageNotFound/> : null}
+                    {'ROLE_PRE_INSTRUCTOR' === role ? <PageNotFound/> : null}
+                    {'ROLE_INSTRUCTOR_MANAGER' === role ? <SoccorsoAddInstructorManager/> : null}
+                </DefaultLayout>}/>
+                <Route path="/mie-domande/:id/soccorso/:amendmentId" element={<DefaultLayout>
+                    {'ROLE_SUPER_ADMIN' === role ? <PageNotFound/> : null}
+                    {'ROLE_BENEFICIARY' === role ? <PageNotFound/> : null}
+                    {'ROLE_PRE_INSTRUCTOR' === role ? <PageNotFound/> : null}
+                    {'ROLE_INSTRUCTOR_MANAGER' === role ? <SoccorsoEditInstructorManager/> : null}
+                </DefaultLayout>}/>
+                <Route path="/mio-soccorso-istruttorio/" element={<DefaultLayout>
+                    {'ROLE_SUPER_ADMIN' === role ? <PageNotFound/> : null}
+                    {'ROLE_BENEFICIARY' === role ? <PageNotFound/> : null}
+                    {'ROLE_PRE_INSTRUCTOR' === role ? <PageNotFound/> : null}
+                    {'ROLE_INSTRUCTOR_MANAGER' === role ? <SoccorsoIstruttorioPreInstructor/> : null}
+                </DefaultLayout>}/>
                 <Route path="/imieibandi" element={<DefaultLayout>
                     {'ROLE_SUPER_ADMIN' === role ? <PageNotFound/> : null}
                     {'ROLE_BENEFICIARY' === role ? <Applications/> : null}

src/tempData.js

@@ -92,7 +92,15 @@ export const elementItems = [
             {
                 name: "isRequestedAmount",
                 value: false
-            }
+            },
+            {
+                name: "variable",
+                value: []
+            },
+            {
+                name: "formula",
+                value: ""
+            },
         ],
         validators: {
             isRequired: false,
@@ -427,5 +435,29 @@ export const elementItems = [
         validators: {
             custom: 'nonEmptyTables'
         }
+    },
+    {
+        id: 21,
+        sortOrder: 21,
+        name: 'criteria_table',
+        label: 'Tabella di criteri',
+        description: 'Tabella di criteri',
+        settings: [
+            {
+                name: "label",
+                value: "Tabella"
+            },
+            {
+                name: "criteria_table_columns",
+                value: {}
+            },
+            {
+                name: "variable",
+                value: []
+            }
+        ],
+        validators: {
+            custom: 'nonEmptyTables'
+        }
     }
 ]