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

- added stats to dashboard;

Browse Source 
- improved form builder;
This commit is contained in:
Vitalii Kiiko
2024-10-14 16:17:30 +02:00
parent 7751e3a745
commit 49765c98e6
10 changed files with 177 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;
}
}

15
src/assets/scss/components/layout.scss
View File

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

8
src/assets/scss/components/statsBigBadges.scss
View File

@@ -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) {

4
src/assets/scss/theme.scss
View File

@@ -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";

45
src/pages/BandoFormsEdit/components/BuilderElement/index.js
View File

@@ -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;

15
src/pages/BandoFormsEdit/components/BuilderElementItem/index.js
View File

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

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

@@ -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>

38
src/pages/DashboardBeneficiario/index.js
View File

@@ -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>

14
src/service/dashboard-service.js Normal file
View File

@@ -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);
};
}

1
src/store/initial.js
View File

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