- added stats to dashboard;

- improved form builder;
2024-10-14 16:17:30 +02:00
parent 7751e3a745
commit 49765c98e6
10 changed files with 177 additions and 28 deletions
--- a/src/pages/BandoFormsEdit/components/BuilderElement/index.js
+++ b/src/pages/BandoFormsEdit/components/BuilderElement/index.js
@@ -3,7 +3,7 @@ import { useDrag, useDrop } from 'react-dnd'
 import { ItemTypes } from '../ItemTypes';

 // store
-import { storeSet } from '../../../../store';
+import { storeSet, useStore } from '../../../../store';

 // components
 import { Button } from 'primereact/button';
@@ -11,6 +11,7 @@ import { Tag } from 'primereact/tag';
 import BuilderElementProperLabel from '../BuilderElementProperLabel';

 const BuilderElement = ({ id, name, label, index }) => {
+    const draggingElementId = useStore().main.draggingElementId();
    const ref = useRef(null);

    const [{ handlerId }, drop] = useDrop({
@@ -20,6 +21,10 @@ const BuilderElement = ({ id, name, label, index }) => {
                handlerId: monitor.getHandlerId(),
            }
        },
+        drop(item, monitor) {
+            storeSet.main.draggingElementId(0);
+            return item;
+        },
        hover(item, monitor) {
            if (!ref.current) {
                return
@@ -92,17 +97,37 @@ const BuilderElement = ({ id, name, label, index }) => {
    drag(drop(ref));

    return (
-        <div ref={ref} className="formBuilder__element" style={{ opacity }} data-handler-id={handlerId}>
-            <div className="meta">
-                <Tag value={name} severity="info"/>
-                <BuilderElementProperLabel id={id} defaultLabel={label}/>
+        draggingElementId === id
+            ? <div ref={ref} className="formBuilder__elementNew"></div>
+            : <div ref={ref} className="formBuilder__element" style={{ opacity }} data-handler-id={handlerId}>
+                <div className="meta">
+                    <Tag value={name} severity="info"/>
+                    <BuilderElementProperLabel id={id} defaultLabel={label}/>
+                </div>
+                <div className="actions">
+                    <Button icon="pi pi-cog" onClick={() => openSettings(id)} outlined severity="info"/>
+                    <Button icon="pi pi-trash" onClick={() => remove(id)} outlined severity="danger"/>
+                </div>
            </div>
-            <div className="actions">
-                <Button icon="pi pi-cog" onClick={() => openSettings(id)} outlined severity="info" />
-                <Button icon="pi pi-trash" onClick={() => remove(id)} outlined severity="danger" />
-            </div>
-        </div>
    )
+
+    /*return (
+        <div ref={ref} className="formBuilder__element" style={{ opacity }} data-handler-id={handlerId}>
+            {draggingId === id
+                ? <div className="formBuilder__elementNew"></div>
+                : <>
+                    <div className="meta">
+                        <Tag value={name} severity="info"/>
+                        <BuilderElementProperLabel id={id} defaultLabel={label}/>
+                    </div>
+                    <div className="actions">
+                        <Button icon="pi pi-cog" onClick={() => openSettings(id)} outlined severity="info"/>
+                        <Button icon="pi pi-trash" onClick={() => remove(id)} outlined severity="danger"/>
+                    </div>
+                </>
+            }
+        </div>
+    )*/
 }

 export default BuilderElement;
--- a/src/pages/BandoFormsEdit/components/BuilderElementItem/index.js
+++ b/src/pages/BandoFormsEdit/components/BuilderElementItem/index.js
@@ -2,6 +2,7 @@ import React, { useRef } from 'react'
 import { useDrag } from 'react-dnd'
 import { ItemTypes } from '../ItemTypes';
 import uniqid from '../../../../helpers/uniqid';
+import { storeSet } from '../../../../store';


 const BuilderElementItem = ({ dbId, name, label, description = '' }) => {
@@ -10,12 +11,20 @@ const BuilderElementItem = ({ dbId, name, label, description = '' }) => {
    const [{ isDragging }, drag] = useDrag(() => ({
        type: ItemTypes.FIELD,
        item: () => {
-            return { name, dbId, id: uniqid(), index: -1 }
+            const newId = uniqid();
+            storeSet.main.draggingElementId(newId);
+            return { name, dbId, id: newId, index: -1 }
        },
        end: (item, monitor) => {
            const dropResult = monitor.getDropResult()
-            if (item && dropResult) {
-                return item;
+
+            if (monitor.didDrop()) {
+                if (item && dropResult) {
+                    return item;
+                }
+            } else {
+                storeSet.main.removeElement(item.id);
+                storeSet.main.draggingElementId(0);
            }
        },
        collect: (monitor) => ({
--- a/src/pages/Dashboard/index.js
+++ b/src/pages/Dashboard/index.js
@@ -1,6 +1,13 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useNavigate } from 'react-router-dom';
+import { pathOr } from 'ramda';
+
+// store
+import { storeSet } from '../../store';
+
+// api
+import DashboardService from '../../service/dashboard-service';

 // components
 import LatestBandiTable from './components/LatestBandiTable';
@@ -9,6 +16,7 @@ import { Button } from 'primereact/button';

 const Dashboard = () => {
    const navigate = useNavigate();
+    const [mainStats, setMainStats] = useState({});

    const onGoToCreateNewBando = () => {
        navigate('/bandi/new');
@@ -26,6 +34,26 @@ const Dashboard = () => {
        console.log('onGoToSettings')
    }*/

+    function formatToMillions(num) {
+        return Math.abs(num) > 999 ? Math.sign(num)*((Math.abs(num)/1000000).toFixed(1)) + 'M' : Math.sign(num)*Math.abs(num)
+    }
+
+    const getStatValue = (key, fallback = '') => {
+        return pathOr(fallback, [key], mainStats);
+    }
+
+    const getStats = (data) => {
+        if (data.status === 'SUCCESS') {
+            setMainStats(data.data.widget1);
+        }
+    }
+
+    const errGetStats = () => {}
+
+    useEffect(() => {
+        DashboardService.getAdminStats(getStats, errGetStats);
+    }, []);
+
    return(
        <div className="appPage">
            <div className="appPage__pageHeader">
@@ -38,20 +66,28 @@ const Dashboard = () => {
                <h2>{__('Panoramica di Sistema', 'gepafin')}</h2>
                <div className="statsBigBadges__grid">
                    <div className="statsBigBadges__gridItem">
-                        <span>{__('Bandi Attivi', 'gepafin')}</span>
-                        <span>0</span>
+                        <span>{__('Bandi attivi', 'gepafin')}</span>
+                        <span>{getStatValue('numberOfActiveCalls', 0)}</span>
                    </div>
                    <div className="statsBigBadges__gridItem">
-                        <span>{__('Utenti Registrati', 'gepafin')}</span>
-                        <span>0</span>
+                        <span>{__('Utenti registrati', 'gepafin')}</span>
+                        <span>{getStatValue('numberOfResgisteredUsers', 0)}</span>
                    </div>
                    <div className="statsBigBadges__gridItem">
-                        <span>{__('Domande in Pre-istruttoria', 'gepafin')}</span>
-                        <span>0</span>
+                        <span>{__('Domande in pre-istruttoria', 'gepafin')}</span>
+                        <span>{getStatValue('numberOfSubmittedApplications', 0)}</span>
                    </div>
                    <div className="statsBigBadges__gridItem">
-                        <span>{__('Totale Finanziamenti attivi', 'gepafin')}</span>
-                        <span>€0M</span>
+                        <span>{__('Domande in bozza', 'gepafin')}</span>
+                        <span>{getStatValue('numberOfDraftApplications', 0)}</span>
+                    </div>
+                    <div className="statsBigBadges__gridItem">
+                        <span>{__('Aziende', 'gepafin')}</span>
+                        <span>{getStatValue('numberOfCompany', 0)}</span>
+                    </div>
+                    <div className="statsBigBadges__gridItem">
+                        <span>{__('Totale finanziamenti attivi', 'gepafin')}</span>
+                        <span>€{formatToMillions(getStatValue('totalActiveFinancing', 0))}</span>
                    </div>
                </div>
            </div>
--- a/src/pages/DashboardBeneficiario/index.js
+++ b/src/pages/DashboardBeneficiario/index.js
@@ -1,6 +1,13 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useNavigate } from 'react-router-dom';
+import { head, pathOr } from 'ramda';
+
+// store
+import { useStore } from '../../store';
+
+// api
+import DashboardService from '../../service/dashboard-service';

 // components
 import LatestBandiTable from './components/LatestBandiTable';
@@ -9,11 +16,34 @@ import { Button } from 'primereact/button';

 const DashboardBeneficiario = () => {
    const navigate = useNavigate();
+    const [mainStats, setMainStats] = useState({});
+    const companies = useStore().main.companies();
+    const chosenCompanyId = useStore().main.chosenCompanyId();

    const goToAllSubmissions = () => {
        navigate('/bandi');
    }

+    const getStatValue = (key, fallback = '') => {
+        return pathOr(fallback, [key], mainStats);
+    }
+
+    const getStats = (data) => {
+        if (data.status === 'SUCCESS') {
+            setMainStats(data.data);
+        }
+    }
+
+    const errGetStats = () => {}
+
+    useEffect(() => {
+        const existingCompany = head(companies.filter(o => o.id === chosenCompanyId));
+
+        if (existingCompany) {
+            DashboardService.getBeneficiaryStatsForCompany(existingCompany.id, getStats, errGetStats);
+        }
+    }, [companies, chosenCompanyId]);
+
    return(
        <div className="appPage">
            <div className="appPage__pageHeader">
@@ -27,15 +57,15 @@ const DashboardBeneficiario = () => {
                <div className="statsBigBadges__grid">
                    <div className="statsBigBadges__gridItem">
                        <span>{__('Domande attive', 'gepafin')}</span>
-                        <span>0</span>
+                        <span>{getStatValue('numberOfApplications', 0)}</span>
                    </div>
                    <div className="statsBigBadges__gridItem">
                        <span>{__('Bandi osservati', 'gepafin')}</span>
-                        <span>0</span>
+                        <span>{getStatValue('numberOfCalls', 0)}</span>
                    </div>
                    <div className="statsBigBadges__gridItem">
                        <span>{__('Documenti da integrare', 'gepafin')}</span>
-                        <span>0</span>
+                        <span>{getStatValue('numberOfIntegratedDocuments', 0)}</span>
                    </div>
                </div>
            </div>