BFLOWS/bflows-bandi-fe
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- added pec usage data;

Browse Source 
- added stats for instructor manager dashboard;
- fixed dispalying 0 in tables in numeric inputs;
This commit is contained in:
Vitalii Kiiko
2025-02-26 09:27:33 +01:00
parent 923a1e389f
commit 6326735417
13 changed files with 283 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/assets/scss/components/appPage.scss
View File

@@ -159,6 +159,11 @@
opacity: 0.8;
}
&.danger {
border-color: var(--message-error-color);
background-color: #ffd0d0;
}
h2 {
color: var(--global-textColor);
font-size: 21px;
@@ -168,6 +173,12 @@
margin: 0;
}
&.danger {
p, span {
color: var(--message-error-color);
}
}
.row {
display: flex;
gap: 1rem;

2
src/components/FormField/components/CriteriaTable/RenderTable/components/NumericFormulaCell/index.js
View File

@@ -15,7 +15,7 @@ const NumericFormulaCell = ({ getValue, row: { index }, column: { id }, table })
return (
<InputNumber
disabled={disabled}
value={initialValue ?? 0}
value={initialValue}
onValueChange={(e) => onChange(e.value)}
onFocus={onFocus}
minFractionDigits={0}

6
src/components/FormField/components/CriteriaTable/index.js
View File

@@ -120,12 +120,14 @@ const Table = ({
? <span className="appForm__field--required">*</span> : null}
</label>
{tableValue
? <RenderTable
? <div style={{ width: '100%', overflow: 'auto' }}>
<RenderTable
columnsCfg={columns}
tableValue={tableValue}
lastRowCfg={lastRow}
setTableValueFn={updateValue}
disabled={disabled}/> : null}
disabled={disabled}/>
</div> : null}
</>)
}

2
src/components/FormField/components/Table/RenderTable/components/NumericFormulaCell/index.js
View File

@@ -15,7 +15,7 @@ const NumericFormulaCell = ({ getValue, row: { index }, column: { id }, table })
return (
<InputNumber
disabled={disabled}
value={initialValue ?? 0}
value={initialValue}
onValueChange={(e) => onChange(e.value)}
onFocus={onFocus}
minFractionDigits={0}

7
src/components/FormField/components/Table/index.js
View File

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

2
src/components/NotificationsSidebar/index.js
View File

@@ -257,7 +257,9 @@ const NotificationsSidebar = () => {
};
useEffect(() => {
if (userData && userData.id) {
fetchMessages();
}
}, [chosenCompanyId, userData.id, isConnected]);
useEffect(() => {

9
src/helpers/getTimeFromISOstring.js Normal file
View File

@@ -0,0 +1,9 @@
const getTimeFromISOstring = (
value,
options = {
hour: 'numeric', minute: 'numeric'
}) => {
return value ? Intl.DateTimeFormat('it-IT', options).format(new Date(value)) : value;
}
export default getTimeFromISOstring;

8
src/pages/BandoApplication/index.js
View File

@@ -64,6 +64,7 @@ const BandoApplication = () => {
const [signedPdfFile, setSignedPdfFile] = useState([]);
const [isRequestForApplData, setIsRequestForApplData] = useState(false);
const isAsyncRequest = useStore().main.isAsyncRequest();
const previousStatus = useRef('');
const toast = useRef(null);
const formMsgs = useRef(null);
const {
@@ -578,6 +579,13 @@ const BandoApplication = () => {
}, [formValues]);
useEffect(() => {
if (previousStatus.current === applicationStatus || (previousStatus.current !== applicationStatus && isEmpty(previousStatus.current))) {
previousStatus.current = applicationStatus;
return;
} else {
previousStatus.current = applicationStatus;
}
if ('DRAFT' === applicationStatus && !isRequestForApplData) {
const applId = getApplicationId();

2
src/pages/Dashboard/components/DraftApplicationsTable/index.js
View File

@@ -126,7 +126,7 @@ const DraftApplicationsTable = () => {
};
const actionsBodyTemplate = (rowData) => {
return <Link to={`/domande/${rowData.id}`}>
return <Link to={`/domande/${rowData.id}/preview`}>
<Button severity="info" label={__('Anteprima', 'gepafin')} icon="pi pi-eye" size="small"
iconPos="right"/>
</Link>

8
src/pages/Dashboard/components/LatestBandiTable/index.js
View File

@@ -14,6 +14,8 @@ import { Calendar } from 'primereact/calendar';
import ProperBandoLabel from '../../../../components/ProperBandoLabel';
import { Link } from 'react-router-dom';
import translationStrings from '../../../../translationStringsForComponents';
import getTimeParsedFromString from '../../../../helpers/getTimeParsedFromString';
import getTimeFromISOstring from '../../../../helpers/getTimeFromISOstring';
const LatestBandiTable = () => {
@@ -107,11 +109,13 @@ const LatestBandiTable = () => {
};
const dateStartBodyTemplate = (rowData) => {
return formatDate(rowData.start_date);
const startTimeObj = getTimeParsedFromString(rowData.startTime);
return formatDate(rowData.start_date) + ' ' + getTimeFromISOstring(startTimeObj);
};
const dateEndBodyTemplate = (rowData) => {
return formatDate(rowData.end_date);
const endTimeObg = getTimeParsedFromString(rowData.endTime);
return formatDate(rowData.end_date) + ' ' + getTimeFromISOstring(endTimeObg);
};
const dateFilterTemplate = (options) => {

15
src/pages/Dashboard/index.js
View File

@@ -19,6 +19,7 @@ const Dashboard = () => {
const navigate = useNavigate();
const [mainStats, setMainStats] = useState({});
const [chartStats, setChartStats] = useState({});
const [pecUsage, setPecUsage] = useState(0);
const onGoToCreateNewBando = () => {
navigate('/bandi/new');
@@ -44,6 +45,7 @@ const Dashboard = () => {
if (data.status === 'SUCCESS') {
setMainStats(data.data.widget1);
setChartStats(data.data.widgetBars);
setPecUsage(data.data.pecUsage/data.data.pecLimit * 100);
}
}
@@ -62,6 +64,19 @@ const Dashboard = () => {
<div className="appPage__spacer"></div>
<div className={`appPageSection__withBorder${pecUsage > 91 ? ' danger' : ''}`}>
<p className="appPageSection__pMeta">
<span>{__('PEC inbox quota', 'gepafin')}</span>
<span>{<NumberFlow
value={pecUsage}
format={{ notation: 'compact' }}
suffix={'%'}
locales="it-IT"/>}</span>
</p>
</div>
<div className="appPage__spacer"></div>
<div className="appPageSection statsBigBadges">
<h2>{__('Panoramica di Sistema', 'gepafin')}</h2>
<div className="statsBigBadges__grid">

137
src/pages/DashboardInstructorManager/components/LatestBandiTableInstructorManager/index.js Normal file
View File

@@ -0,0 +1,137 @@
import React, { useState, useEffect} from 'react';
import { __ } from '@wordpress/i18n';
import { uniq } from 'ramda';
// 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 { Button } from 'primereact/button';
import { Calendar } from 'primereact/calendar';
import ProperBandoLabel from '../../../../components/ProperBandoLabel';
import { Link } from 'react-router-dom';
import translationStrings from '../../../../translationStringsForComponents';
import getTimeParsedFromString from '../../../../helpers/getTimeParsedFromString';
import getTimeFromISOstring from '../../../../helpers/getTimeFromISOstring';
const LatestBandiTable = () => {
const [items, setItems] = useState(null);
const [filters, setFilters] = useState(null);
const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
const [, setStatuses] = useState([]);
useEffect(() => {
setLocalAsyncRequest(true);
BandoService.getBandi(getCallback, errGetCallbacks);
}, []);
const getCallback = (data) => {
if (data.status === 'SUCCESS') {
const newItems = data.data.filter(o => o.status === 'PUBLISH');
setItems(getFormattedBandiData(newItems));
setStatuses(uniq(data.data.map(o => o.status)));
initFilters();
}
setLocalAsyncRequest(false);
}
const errGetCallbacks = (data) => {
setLocalAsyncRequest(false);
}
const getFormattedBandiData = (data) => {
return [...(data || [])].map((d) => {
d.start_date = new Date(d.dates[0]);
d.end_date = new Date(d.dates[1]);
return d;
});
};
const 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 },
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 dateStartBodyTemplate = (rowData) => {
const startTimeObj = getTimeParsedFromString(rowData.startTime);
return formatDate(rowData.start_date) + ' ' + getTimeFromISOstring(startTimeObj);
};
const dateEndBodyTemplate = (rowData) => {
const endTimeObg = getTimeParsedFromString(rowData.endTime);
return formatDate(rowData.end_date) + ' ' + getTimeFromISOstring(endTimeObg);
};
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 actionsBodyTemplate = (rowData) => {
return <Link to={`/bandi/${rowData.id}`}>
<Button severity="info" label={__('Modifica', 'gepafin')} icon="pi pi-pencil" 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 il nome', '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')}
style={{ minWidth: '7rem' }} body={statusBodyTemplate} />
</DataTable>
</div>
)
}
export default LatestBandiTable;

102
src/pages/DashboardInstructorManager/index.js
View File

@@ -9,30 +9,37 @@ import DashboardService from '../../service/dashboard-service';
// components
import { Button } from 'primereact/button';
import PreInstructorDomandeTable from '../DashboardPreInstructor/components/PreInstructorDomandeTable';
import LatestBandiTableInstructorManager from './components/LatestBandiTableInstructorManager';
import AllDomandeTable from '../Domande/components/AllDomandeTable';
import DraftApplicationsTable from '../Dashboard/components/DraftApplicationsTable';
import ChartDomandePerBando from '../../components/ChartDomandePerBando';
import ChartStatoDomande from '../../components/ChartStatoDomande';
const DashboardInstructorManager = () => {
const navigate = useNavigate();
const [mainStats, setMainStats] = useState({});
const [chartStats, setChartStats] = 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);
}
const getStats = (data) => {
if (data.status === 'SUCCESS') {
setMainStats(data.data.widget1);
setChartStats(data.data.widgetBars);
}
}
const errGetStats = () => {
}
useEffect(() => {
DashboardService.getEvaluationsStats(getStats, errGetStats);
DashboardService.getAdminStats(getStats, errGetStats);
}, []);
return(
@@ -44,63 +51,102 @@ const DashboardInstructorManager = () => {
<div className="appPage__spacer"></div>
<div className="appPageSection statsBigBadges">
<h2>{__('Riepilogo', 'gepafin')}</h2>
<div className="statsBigBadges__grid applStats">
<h2>{__('Panoramica di Sistema', 'gepafin')}</h2>
<div className="statsBigBadges__grid">
<div className="statsBigBadges__gridItem">
<span>{__('Totale domande', 'gepafin')}</span>
<span>{__('Bandi attivi', 'gepafin')}</span>
<span><NumberFlow
value={getStatValue('numberOfAssignedApplication', 0)}
value={getStatValue('numberOfActiveCalls', 0)}
format={{ notation: 'compact' }}
locales="it-IT"/></span>
</div>
<div className="statsBigBadges__gridItem">
<span>{__('In soccorso', 'gepafin')}</span>
<span>{__('Utenti registrati', 'gepafin')}</span>
<span><NumberFlow
value={getStatValue('numberOfApplicationInAmendmentState', 0)}
value={getStatValue('numberOfResgisteredUsers', 0)}
format={{ notation: 'compact' }}
locales="it-IT"/></span>
</div>
<div className="statsBigBadges__gridItem">
<span>{__('In valutazione', 'gepafin')}</span>
<span>{__('Domande in pre-istruttoria', 'gepafin')}</span>
<span><NumberFlow
value={getStatValue('numberOfApplicationInOpenState', 0)}
value={getStatValue('numberOfSubmittedApplications', 0)}
format={{ notation: 'compact' }}
locales="it-IT"/></span>
</div>
<div className="statsBigBadges__gridItem">
<span>{__('Completate', 'gepafin')}</span>
<span>{__('Domande in bozza', 'gepafin')}</span>
<span><NumberFlow
value={getStatValue('numberOfApplicationInCloseState', 0)}
value={getStatValue('numberOfDraftApplications', 0)}
format={{ notation: 'compact' }}
locales="it-IT"/></span>
</div>
<div className="statsBigBadges__gridItem">
<span>{__('Tempo medio di valutazione', 'gepafin')}</span>
<span>{__('Aziende', 'gepafin')}</span>
<span><NumberFlow
value={getStatValue('averageEvaluationDays', 0)}
value={getStatValue('numberOfCompany', 0)}
format={{ notation: 'compact' }}
suffix={` ${__('giorni', 'gepafin')}`}
locales="it-IT"/></span>
</div>
<div className="statsBigBadges__gridItem">
<span>{__('Domande in scadenza (48h)', 'gepafin')}</span>
<span>{__('Totale finanziamenti attivi', 'gepafin')}</span>
<span><NumberFlow
value={getStatValue('numberOfApplicationExpiringIn48Hours', 0)}
format={{ notation: 'compact' }}
locales="en-US"/></span>
value={getStatValue('totalActiveFinancing', 0)}
format={{
notation: 'compact',
compactDisplay: 'short',
roundingMode: 'trunc',
style: 'currency',
currency: 'EUR',
currencyDisplay: 'symbol'
}}
locales="it-IT"/></span>
</div>
</div>
</div>
<div className="appPage__spacer"></div>
<div className="appPageSection">
{/*<div className="appPageSection">
<h2>{__('Panoramica delle domande da valutare', 'gepafin')}</h2>
<PreInstructorDomandeTable statuses={['OPEN', 'SOCCORSO']} userId={0}/>
</div>*/}
<div className="appPageSection">
<h2>{__('Ultimi bandi pubblicati', 'gepafin')}</h2>
<LatestBandiTableInstructorManager/>
</div>
<div className="appPage__spacer"></div>
<div className="appPageSection">
<h2>{__('Ultime domande pubblicate', 'gepafin')}</h2>
<AllDomandeTable/>
</div>
<div className="appPage__spacer"></div>
<div className="appPageSection">
<h2>{__('Domande in bozza', 'gepafin')}</h2>
<DraftApplicationsTable/>
</div>
<div className="appPage__spacer"></div>
{chartStats.applicationPerCall
? <div className="appPageSection">
<h2>{__('Statistiche di sistema', 'gepafin')}</h2>
<div className="appPageSection columns">
<ChartDomandePerBando
title={__('Domande per bando', 'gepafin')}
data={chartStats.applicationPerCall}/>
<ChartStatoDomande
title={__('Stato domande', 'gepafin')}
data={chartStats.applicationPerStatus}/>
</div>
</div> : null}
<div className="appPage__spacer"></div>
<div className="appPageSection__hr">
<span>{__('Azioni rapide', 'gepafin')}</span>
</div>