From 49765c98e653f36e23dbd51435cb0ac36f311759 Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Mon, 14 Oct 2024 16:17:30 +0200 Subject: [PATCH] - added stats to dashboard; - improved form builder; --- src/assets/scss/components/formBuilder.scss | 11 +++- src/assets/scss/components/layout.scss | 15 ++++++ .../scss/components/statsBigBadges.scss | 8 +++ src/assets/scss/theme.scss | 4 +- .../components/BuilderElement/index.js | 45 ++++++++++++---- .../components/BuilderElementItem/index.js | 15 ++++-- src/pages/Dashboard/index.js | 54 +++++++++++++++---- src/pages/DashboardBeneficiario/index.js | 38 +++++++++++-- src/service/dashboard-service.js | 14 +++++ src/store/initial.js | 1 + 10 files changed, 177 insertions(+), 28 deletions(-) create mode 100644 src/service/dashboard-service.js diff --git a/src/assets/scss/components/formBuilder.scss b/src/assets/scss/components/formBuilder.scss index 3568f39..d34bbd1 100644 --- a/src/assets/scss/components/formBuilder.scss +++ b/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; } } diff --git a/src/assets/scss/components/layout.scss b/src/assets/scss/components/layout.scss index 6957419..d859314 100644 --- a/src/assets/scss/components/layout.scss +++ b/src/assets/scss/components/layout.scss @@ -112,4 +112,19 @@ img { } } } +} + +@media (max-width: 800px) { + .inner { + flex-direction: column; + + > aside { + flex: 0 0 auto; + margin-bottom: 50px; + } + + > main { + width: 100%; + } + } } \ No newline at end of file diff --git a/src/assets/scss/components/statsBigBadges.scss b/src/assets/scss/components/statsBigBadges.scss index 0b147f2..7de0232 100644 --- a/src/assets/scss/components/statsBigBadges.scss +++ b/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) { diff --git a/src/assets/scss/theme.scss b/src/assets/scss/theme.scss index 9846b19..08279a3 100644 --- a/src/assets/scss/theme.scss +++ b/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"; diff --git a/src/pages/BandoFormsEdit/components/BuilderElement/index.js b/src/pages/BandoFormsEdit/components/BuilderElement/index.js index 1ebe6f0..18351aa 100644 --- 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 ( -
-
- - + draggingElementId === id + ?
+ :
+
+ + +
+
+
-
-
-
) + + /*return ( +
+ {draggingId === id + ?
+ : <> +
+ + +
+
+
+ + } +
+ )*/ } export default BuilderElement; \ No newline at end of file diff --git a/src/pages/BandoFormsEdit/components/BuilderElementItem/index.js b/src/pages/BandoFormsEdit/components/BuilderElementItem/index.js index 8f77591..ee1026d 100644 --- 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) => ({ diff --git a/src/pages/Dashboard/index.js b/src/pages/Dashboard/index.js index c4e6bc9..55d3228 100644 --- 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(
@@ -38,20 +66,28 @@ const Dashboard = () => {

{__('Panoramica di Sistema', 'gepafin')}

- {__('Bandi Attivi', 'gepafin')} - 0 + {__('Bandi attivi', 'gepafin')} + {getStatValue('numberOfActiveCalls', 0)}
- {__('Utenti Registrati', 'gepafin')} - 0 + {__('Utenti registrati', 'gepafin')} + {getStatValue('numberOfResgisteredUsers', 0)}
- {__('Domande in Pre-istruttoria', 'gepafin')} - 0 + {__('Domande in pre-istruttoria', 'gepafin')} + {getStatValue('numberOfSubmittedApplications', 0)}
- {__('Totale Finanziamenti attivi', 'gepafin')} - €0M + {__('Domande in bozza', 'gepafin')} + {getStatValue('numberOfDraftApplications', 0)} +
+
+ {__('Aziende', 'gepafin')} + {getStatValue('numberOfCompany', 0)} +
+
+ {__('Totale finanziamenti attivi', 'gepafin')} + €{formatToMillions(getStatValue('totalActiveFinancing', 0))}
diff --git a/src/pages/DashboardBeneficiario/index.js b/src/pages/DashboardBeneficiario/index.js index 917e3e6..7f1c7c8 100644 --- 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(
@@ -27,15 +57,15 @@ const DashboardBeneficiario = () => {
{__('Domande attive', 'gepafin')} - 0 + {getStatValue('numberOfApplications', 0)}
{__('Bandi osservati', 'gepafin')} - 0 + {getStatValue('numberOfCalls', 0)}
{__('Documenti da integrare', 'gepafin')} - 0 + {getStatValue('numberOfIntegratedDocuments', 0)}
diff --git a/src/service/dashboard-service.js b/src/service/dashboard-service.js new file mode 100644 index 0000000..999c18c --- /dev/null +++ b/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); + }; +} diff --git a/src/store/initial.js b/src/store/initial.js index e3eb373..c5aa75e 100644 --- a/src/store/initial.js +++ b/src/store/initial.js @@ -16,6 +16,7 @@ const initialStore = { formElements: [], elementItems: [], activeElement: '', + draggingElementId: 0, // flow flowData: [], flowForms: [],