- added stats to dashboard;

- improved form builder;

src/assets/scss/components/formBuilder.scss

@@ -106,8 +106,16 @@
   }
 }
 
+.formBuilder__elementNew {
+  border: 1px solid var(--button-secondary-borderColor);
+  background-color: var(--button-secondary-borderColor);
+  width: 100%;
+  padding: 10px;
+  opacity: 0.6;
+}
+
 .formBuilder__aside {
-  flex: 0 0 250px;
+  flex: 0 0 200px;
   display: flex;
   flex-direction: column;
 
@@ -141,6 +149,7 @@
 
   &:hover {
     cursor: grab;
+    background-color: #F4E8C3;
   }
 }
 

src/assets/scss/components/layout.scss

@@ -113,3 +113,18 @@ img {
     }
   }
 }
+
+@media (max-width: 800px) {
+  .inner {
+    flex-direction: column;
+
+    > aside {
+      flex: 0 0 auto;
+      margin-bottom: 50px;
+    }
+
+    > main {
+      width: 100%;
+    }
+  }
+}

src/assets/scss/components/statsBigBadges.scss

@@ -50,6 +50,14 @@
         border: 1px solid var(--yellow-500);
         background: var(--card-full-background-color-1);
     }
+    &:nth-of-type(5) {
+        border: 1px solid var(--yellow-500);
+        background: var(--card-full-background-color-5);
+    }
+    &:nth-of-type(6) {
+        border: 1px solid var(--yellow-500);
+        background: var(--card-full-background-color-6);
+    }
 }
 
 @media (max-width: 820px) {

src/assets/scss/theme.scss

@@ -24,7 +24,9 @@
   --card-full-background-color-2: #EEC137;
   --card-full-background-color-3: #FA8E42;
   --card-full-background-color-4: #75BD7D;
-  --card-full-background-color-1: #3B7C43;
+  --card-full-background-color-1: #54965b;
+  --card-full-background-color-5: #4ba190;
+  --card-full-background-color-6: #6d68c0;
 }
 
 @import "./components/layout.scss";

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}>
+        draggingElementId === id
-            <div className="meta">
+            ? <div ref={ref} className="formBuilder__elementNew"></div>
-                <Tag value={name} severity="info"/>
+            : <div ref={ref} className="formBuilder__element" style={{ opacity }} data-handler-id={handlerId}>
-                <BuilderElementProperLabel id={id} defaultLabel={label}/>
+                <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;

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) => ({

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>{__('Bandi attivi', 'gepafin')}</span>
-                        <span>0</span>
+                        <span>{getStatValue('numberOfActiveCalls', 0)}</span>
                     </div>
                     <div className="statsBigBadges__gridItem">
-                        <span>{__('Utenti Registrati', 'gepafin')}</span>
+                        <span>{__('Utenti registrati', 'gepafin')}</span>
-                        <span>0</span>
+                        <span>{getStatValue('numberOfResgisteredUsers', 0)}</span>
                     </div>
                     <div className="statsBigBadges__gridItem">
-                        <span>{__('Domande in Pre-istruttoria', 'gepafin')}</span>
+                        <span>{__('Domande in pre-istruttoria', 'gepafin')}</span>
-                        <span>0</span>
+                        <span>{getStatValue('numberOfSubmittedApplications', 0)}</span>
                     </div>
                     <div className="statsBigBadges__gridItem">
-                        <span>{__('Totale Finanziamenti attivi', 'gepafin')}</span>
+                        <span>{__('Domande in bozza', 'gepafin')}</span>
-                        <span>€0M</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>

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>

src/service/dashboard-service.js

@@ -0,0 +1,14 @@
+import { NetworkService } from './network-service';
+
+const API_BASE_URL = process.env.REACT_APP_API_EXECUTION_ADDRESS;
+
+export default class DashboardService {
+
+    static getAdminStats = (callback, errCallback) => {
+        NetworkService.get(`${API_BASE_URL}/dashboard`, callback, errCallback);
+    };
+
+    static getBeneficiaryStatsForCompany = (id, callback, errCallback) => {
+        NetworkService.get(`${API_BASE_URL}/dashboard/beneficiary/company/${id}`, callback, errCallback);
+    };
+}

src/store/initial.js

@@ -16,6 +16,7 @@ const initialStore = {
     formElements: [],
     elementItems: [],
     activeElement: '',
+    draggingElementId: 0,
     // flow
     flowData: [],
     flowForms: [],