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

Merge pull request #3 from Kitzanos/feature/bando-form-editor

Browse Source 
Form editor
This commit is contained in:
Vitalii Kiiko
2024-09-02 17:16:44 +02:00
committed by GitHub
parent d634e425e5 c15360faf0
commit 6f6234a1d8
41 changed files with 1531 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/App.js
View File

@@ -4,11 +4,34 @@ import Routes from './routes';
import { createI18n, setLocaleData } from '@wordpress/i18n';
import { I18nProvider } from '@wordpress/react-i18n';
import './assets/scss/theme.scss';
import AuthenticationService from './service/authentication-service';
// store
import { useStore, storeSet } from './store';
const i18n = createI18n({}, 'gepafin');
function App() {
const role = useStore().main.getRole();
const callback = (data) => {
if (data.status === 'SUCCESS') {
storeSet.main.userData(data.data);
} else {
storeSet.main.doLogout();
}
storeSet.main.unsetAsyncRequest();
}
const errCallback = (data) => {
storeSet.main.doLogout();
storeSet.main.unsetAsyncRequest();
}
useEffect(() => {
storeSet.main.setAsyncRequest();
AuthenticationService.me(callback, errCallback);
fetch('/languages/en_US.json')
.then((res) => res.json())
.then(res => {
@@ -19,7 +42,7 @@ function App() {
return (
<I18nProvider i18n={i18n}>
<BrowserRouter>
<Routes/>
<Routes role={role}/>
</BrowserRouter>
</I18nProvider>
);

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

@@ -100,6 +100,8 @@
padding: 17px;
border-radius: 6px;
border: 1px solid var(--card-borderColor-color);
container-name: section_with_border;
container-type: inline-size;
&.disabled {
filter: grayscale(1);
@@ -140,6 +142,15 @@
}
}
@container section_with_border (max-width: 600px) {
.appPageSection__withBorder {
.row {
flex-direction: column;
align-items: flex-start;
}
}
}
.appPageSection__hero {
display: flex;
height: 172px;
@@ -198,4 +209,5 @@
display: flex;
gap: 24px;
padding: 24px 0 48px;
flex-wrap: wrap;
}

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

@@ -12,9 +12,9 @@
h2 {
color: #404D5B;
font-size: 21px;
font-size: 14px;
font-style: normal;
font-weight: 600;
font-weight: 700;
line-height: normal;
}
}
@@ -58,7 +58,7 @@
.actions {
display: flex;
gap: 1rem;
gap: 0.5rem;
}
}
@@ -69,9 +69,9 @@
h2 {
color: #404D5B;
font-size: 21px;
font-size: 14px;
font-style: normal;
font-weight: 600;
font-weight: 700;
line-height: normal;
}
}
@@ -114,3 +114,23 @@
flex-direction: column;
gap: 0.5rem;
}
.formElementSettings__tabs {
width: 100%;
.p-tabview-nav-link[aria-selected="true"] {
background-color: var(--message-info-background);
}
.p-tabview-panel {
display: flex;
flex-direction: column;
gap: 1rem;
}
}
.formElementSettings__repeater {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

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

@@ -86,6 +86,7 @@ body {
padding: 0 24px 20px;
display: flex;
flex-direction: column;
width: calc(100% - 320px);
> footer {
margin-top: auto;

29
src/assets/scss/components/misc.scss
View File

@@ -36,16 +36,39 @@
}
.p-message.p-message-error {
background: #ffdbdb;
border-left: 5px solid #C2504D;
background: var(--message-error-background);
border-left: 5px solid var(--message-error-color);
span.p-message-detail, span.p-message-summary {
color: var(--message-error-color);
}
svg {
path {
fill: var(--global-textColor);
fill: var(--message-error-color);
}
}
}
.p-message.p-message-info {
background: var(--message-info-background);
border-left: 5px solid var(--message-info-color);
span.p-message-detail, span.p-message-summary {
color: var(--message-info-color);
}
svg {
path {
fill: var(--message-info-color);
}
}
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
background: #C9E3CC;
}
.p-accordion {
width: 100%;
}

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

@@ -1,13 +1,18 @@
.statsBigBadges {
}
.statsBigBadges__grid {
display: grid;
align-items: center;
grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
gap: 24px;
align-items: stretch;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
width: 100%;
}
.statsBigBadges__grid .statsBigBadges__gridItem span {
color: #FFF;
}
.statsBigBadges__gridItem {
display: flex;
justify-content: space-between;
@@ -43,3 +48,9 @@
background: var(--card-full-background-color-1);
}
}
@media (max-width: 1240px) {
.statsBigBadges__grid {
grid-template-columns: 1fr;
}
}

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

@@ -15,6 +15,10 @@
--global-textColor: #4B5563;
--theme-highlight-background: #BADEBE;
--primary-text: #3B7C43;
--message-error-background: #ffdbdb;
--message-error-color: #C2504D;
--message-info-background: rgba(219, 234, 254, 0.70);
--message-info-color: #3B82F6;
--card-full-background-color-2: #EEC137;
--card-full-background-color-3: #FA8E42;

2
src/components/FormField/components/DatepickerRange/index.js
View File

@@ -34,7 +34,7 @@ const DatepickerRange = ({
<Calendar id={field.name}
value={field.value}
onChange={field.onChange}
dateFormat="dd/mm/yy"
mask="99/99/9999"
showIcon
minDate={minDate}

37
src/components/FormField/components/Fileupload/index.js
View File

@@ -21,9 +21,11 @@ const Fileupload = ({
doctype = 'images',
emptyText = __('Trascina qui il tuo file', 'gepafin'),
chooseLabel = __('Aggiungi immagine', 'gepafin'),
multiple = false
multiple = false,
callId = 0
}) => {
const [stateFieldData, setStateFieldData] = useState([]);
const [acceptFormats, setAcceptFormats] = useState('');
const inputRef = useRef();
const customBase64Uploader = (event) => {
@@ -31,14 +33,10 @@ const Fileupload = ({
for (const file of event.files) {
formData.append('file', file)
}
/*for (const pair of formData.entries()) {
console.log(pair[0], pair[1]);
}*/
FileUploadService.uploadFile(formData, callback, errorCallback, [['documentType', doctype.toUpperCase()]]);
FileUploadService.uploadFile(callId, formData, callback, errorCallback, [['documentType', doctype.toUpperCase()]]);
};
const callback = (data) => {
console.log('data', data);
if (data.status === 'SUCCESS') {
setStateFieldData(data.data);
const files = inputRef.current.getFiles();
@@ -86,7 +84,6 @@ const Fileupload = ({
setStateFieldData(prevState => {
const newFiles = prevState.filter(o => o.id !== id);
inputRef.current.setUploadedFiles(newFiles);
console.log('newFiles', newFiles);
return newFiles;
});
}
@@ -96,20 +93,39 @@ const Fileupload = ({
console.log('err', err);
}
const onBeforeDrop = (e) => {
return validateFileInputType(e.dataTransfer.files);
}
const validateFileInputType = ( files ) => {
const MIMEtype = new RegExp( acceptFormats );
return Array.prototype.every.call( files, function passesAcceptedFormat( file ){
return MIMEtype.test( file.type );
} );
}
useEffect(() => {
setStateFieldData(defaultValue);
register(fieldName, config)
}, []);
useEffect(() => {
// eslint-disable-next-line no-useless-escape
setAcceptFormats(accept.replace( /\*/g, '.\*' ).replace( /,/g, '|' ));
}, [accept]);
useEffect(() => {
inputRef.current.setUploadedFiles(stateFieldData);
setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
}, [stateFieldData])
return (
<>
callId && callId !== 0
? <>
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
{label}{config.required ? '*' : null}
{acceptFormats ? ' (' + acceptFormats.split('|').join(', ') + ')' : null}
</label>
<FileUpload
ref={inputRef}
@@ -126,9 +142,12 @@ const Fileupload = ({
className={classNames({ 'p-invalid': errors[fieldName] })}
itemTemplate={itemTemplate}
customUpload
onBeforeDrop={onBeforeDrop}
uploadHandler={customBase64Uploader}/>
{infoText ? <small>{infoText}</small> : null}
</>)
</>
: null
)
}
export default Fileupload;

49
src/components/FormFieldRepeater/index.js
View File

@@ -1,7 +1,7 @@
import React, { useRef, useEffect, useState } from 'react';
import React, { useRef, useEffect, useState, useCallback } from 'react';
import { classNames } from 'primereact/utils';
import { __ } from '@wordpress/i18n';
import { isEmpty } from 'ramda';
import { head, isNil, pluck } from 'ramda';
// components
import { InputText } from 'primereact/inputtext';
@@ -22,19 +22,20 @@ const FormFieldRepeater = ({
}) => {
const forMenu = useRef(null);
const [stateFieldData, setStateFieldData] = useState([]);
const [stateOptionsData, setStateOptionsData] = useState([]);
const menuItems = [
{
type: 'existing',
label: __('Esistente', 'gepafin'),
command: (data) => {
setStateFieldData([...stateFieldData, { id: null, value: '', status: data.item.type }]);
setStateFieldData([...stateFieldData, { id: null, value: '', lookUpDataId: 0 }]);
}
},
{
type: 'new',
label: __('Nuovo', 'gepafin'),
command: (data) => {
setStateFieldData([...stateFieldData, { id: null, value: '', status: data.item.type }]);
setStateFieldData([...stateFieldData, { id: null, value: '', lookUpDataId: null }]);
}
}
]
@@ -45,15 +46,15 @@ const FormFieldRepeater = ({
}
const selectItem = (e, index) => {
const targetedOption = head(stateOptionsData.filter(o => o.value === e.value));
if (targetedOption) {
const newData = stateFieldData.map((o, i) => {
if (i === index) {
o.value = e.value;
o.id = e.id;
}
return o;
return i === index ? targetedOption : o;
})
setStateFieldData(newData);
}
}
const onInputChange = (e, index) => {
const { value } = e.target;
@@ -67,24 +68,30 @@ const FormFieldRepeater = ({
}
const properField = (item, i) => {
return item.status === 'new'
? <InputText value={item.value} onInput={(e) => onInputChange(e, i)}/>
: <Dropdown value={item.value}
return !isNil(item.lookUpDataId)
? <Dropdown value={item.value}
onChange={(e) => selectItem(e, i)}
optionDisabled={(opt) => usedExistingValues.includes(opt.value)}
options={options} optionLabel="value"/>
optionDisabled={(opt) => usedExistingValues().includes(opt.value)}
options={stateOptionsData}
optionLabel="value"/>
: <InputText value={item.value} onInput={(e) => onInputChange(e, i)}/>
}
const usedExistingValues = stateFieldData
.filter(o => o.status === 'existing')
.map(o => o.value);
const usedExistingValues = useCallback(() => {
return stateFieldData
.filter(o => o.lookUpDataId > 0)
.map(o => o.value)
}, [stateFieldData]);
useEffect(() => {
const storeFieldData = data[fieldName] ?? [];
const newData = storeFieldData.map(o => ({ ...o, status: o.id ? 'existing' : 'new' }));
setStateFieldData(newData);
setStateFieldData(storeFieldData);
register(fieldName, config);
}, [])
}, []);
useEffect(() => {
setStateOptionsData([...options]);
}, [options]);
useEffect(() => {
setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
@@ -100,7 +107,7 @@ const FormFieldRepeater = ({
{properField(o, i)}
<Button icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
</div>
{o.status === 'new' && infoText ? <small>{infoText}</small> : null}
{isNil(o.lookUpDataId) && infoText ? <small>{infoText}</small> : null}
</div>)}
<Menu model={menuItems} popup ref={forMenu} id="aimedForMenu"/>
<Button type="button" iconPos="right" label={__('Aggiungi', 'gepafin')}

54
src/components/FormFieldRepeaterCriteria/index.js
View File

@@ -1,7 +1,7 @@
import React, { useRef, useEffect, useState } from 'react';
import React, { useRef, useEffect, useState, useCallback } from 'react';
import { classNames } from 'primereact/utils';
import { __ } from '@wordpress/i18n';
import { head } from 'ramda';
import { head, isNil, pluck } from 'ramda';
// components
import { InputText } from 'primereact/inputtext';
@@ -23,20 +23,21 @@ const FormFieldRepeaterCriteria = ({
}) => {
const forMenu = useRef(null);
const [stateFieldData, setStateFieldData] = useState([]);
const [stateOptionsData, setStateOptionsData] = useState([]);
const [threshold, setThreshold] = useState(0);
const menuItems = [
{
type: 'existing',
label: __('Esistente', 'gepafin'),
command: (data) => {
setStateFieldData([...stateFieldData, { id: null, value: '', status: data.item.type }]);
setStateFieldData([...stateFieldData, { id: null, value: '', lookUpDataId: 0 }]);
}
},
{
type: 'new',
label: __('Nuovo', 'gepafin'),
command: (data) => {
setStateFieldData([...stateFieldData, { id: null, value: '', status: data.item.type }]);
setStateFieldData([...stateFieldData, { id: null, value: '', lookUpDataId: null }]);
}
}
]
@@ -47,17 +48,12 @@ const FormFieldRepeaterCriteria = ({
}
const selectItem = (e, index) => {
const targetedOption = head(options.filter(o => o.value === e.value));
const targetedOption = head(stateOptionsData.filter(o => o.value === e.value));
if (targetedOption) {
const newData = stateFieldData.map((o, i) => {
if (i === index) {
o.value = targetedOption.value;
o.score = targetedOption.score;
o.id = targetedOption.id;
}
return o;
});
console.log('newData', newData)
return i === index ? targetedOption : o;
})
setStateFieldData(newData);
}
}
@@ -78,32 +74,38 @@ const FormFieldRepeaterCriteria = ({
}
const properField = (item, i) => {
return item.status === 'new'
? <InputText value={item.value} onInput={(e) => onInputChange(e.target.value, i, 'value')}/>
: <Dropdown value={item.value}
return !isNil(item.lookUpDataId)
? <Dropdown value={item.value}
onChange={(e) => selectItem(e, i)}
optionDisabled={(opt) => usedExistingValues.includes(opt.value)}
options={options} optionLabel="value"/>
optionDisabled={(opt) => usedExistingValues().includes(opt.value)}
options={stateOptionsData} optionLabel="value"/>
: <InputText value={item.value} onInput={(e) => onInputChange(e.target.value, i, 'value')}/>
}
const usedExistingValues = stateFieldData
.filter(o => o.status === 'existing')
.map(o => o.value);
const usedExistingValues = useCallback(() => {
return stateFieldData
.filter(o => o.lookUpDataId > 0)
.map(o => o.value)
}, [stateFieldData]);
useEffect(() => {
const storeFieldData = data[fieldName] ?? [];
const newData = storeFieldData.map(o => ({ ...o, status: o.id ? 'existing' : 'new' }));
setStateFieldData(newData);
setStateFieldData(storeFieldData);
setStateOptionsData([...options, ...storeFieldData]);
setThreshold(data['threshold'])
register(fieldName, config)
register('threshold', {
required: __('È obbligatorio', 'gepafin')
})
}, [])
}, []);
useEffect(() => {
setStateOptionsData([...options]);
}, [options]);
useEffect(() => {
setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
}, [stateFieldData])
}, [stateFieldData]);
return (
<div className={classNames(['appForm__field', 'formfieldrepeater'])}>
@@ -126,7 +128,7 @@ const FormFieldRepeaterCriteria = ({
{properField(o, i)}
<Button icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
</div>
{o.status === 'new' && infoText ? <small>{infoText}</small> : null}
{isNil(o.lookUpDataId) && infoText ? <small>{infoText}</small> : null}
</div>
<div>
<label htmlFor="criterionMin">{__('Punteggio', 'gepafin')}</label>

63
src/components/FormFieldRepeaterFaq/index.js
View File

@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, useCallback } from 'react';
import { classNames } from 'primereact/utils';
import { __ } from '@wordpress/i18n';
import { isEmpty } from 'ramda';
import { head } from 'ramda';
// components
import { Button } from 'primereact/button';
@@ -20,11 +20,10 @@ const FormFieldRepeaterFaq = ({
errors,
register,
label,
config = {},
setError,
clearErrors
config = {}
}) => {
const [stateFieldData, setStateFieldData] = useState([]);
const [stateOptionsData, setStateOptionsData] = useState([]);
const [question, setQuestion] = useState('');
const [answer, setAnswer] = useState('');
const [editDataIndex, setEditDataIndex] = useState(null);
@@ -36,12 +35,15 @@ const FormFieldRepeaterFaq = ({
}
const selectItem = (e) => {
const chosen = {...e.value};
setStateFieldData([...stateFieldData, chosen]);
const targetedOption = head(stateOptionsData.filter(o => o.question === e.value));
if (targetedOption) {
setStateFieldData([...stateFieldData, targetedOption]);
}
}
const addNewItem = () => {
const newItem = { id: 0, status: 'new', question: '', answer: '', visible: true };
const newItem = { id: null, lookUpDataId: null, question: '', response: '', visible: true };
setStateFieldData([...stateFieldData, newItem]);
}
@@ -49,7 +51,7 @@ const FormFieldRepeaterFaq = ({
e.preventDefault();
const newData = stateFieldData.map((o, i) => {
if (i === index) {
o.visible = e.value;
o.isVisible = e.value;
}
return o;
});
@@ -59,7 +61,7 @@ const FormFieldRepeaterFaq = ({
const editItem = (e, index) => {
e.stopPropagation();
setQuestion(stateFieldData[index].question);
setAnswer(stateFieldData[index].answer);
setAnswer(stateFieldData[index].response);
setEditDataIndex(index);
setIsVisibleEditDialog(true);
}
@@ -83,7 +85,7 @@ const FormFieldRepeaterFaq = ({
const newData = stateFieldData.map((o, i) => {
if (i === editDataIndex) {
o.question = question;
o.answer = answer;
o.response = answer;
return o
} else {
return o;
@@ -102,25 +104,31 @@ const FormFieldRepeaterFaq = ({
const footerEditDialog = () => {
return <div>
<Button type="button" label={__('Anulla', 'gepafin')} onClick={hideEditDialog} outlined />
<Button type="button" label={__('Salva', 'gepafin')} onClick={saveEditDialog} />
<Button type="button" label={__('Anulla', 'gepafin')} onClick={hideEditDialog} outlined/>
<Button type="button" label={__('Salva', 'gepafin')} onClick={saveEditDialog}/>
</div>
}
const usedExistingValues = stateFieldData
.filter(o => o.status === 'existing')
.map(o => o.question);
const usedExistingValues = useCallback(() => {
return stateFieldData
.filter(o => o.lookUpDataId)
.map(o => o.question)
}, [stateFieldData]);
useEffect(() => {
const storeFieldData = data[fieldName] ?? [];
const newData = storeFieldData.map(o => ({ ...o, status: o.id ? 'existing' : 'new' }))
setStateFieldData(newData);
setStateFieldData(storeFieldData);
setStateOptionsData([...options, ...storeFieldData]);
register(fieldName, config)
}, [])
}, []);
useEffect(() => {
setStateOptionsData([...options]);
}, [options]);
useEffect(() => {
setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
}, [stateFieldData])
}, [stateFieldData]);
return (
<div className={classNames(['appForm__field', 'formfieldrepeater'])}>
@@ -131,8 +139,9 @@ const FormFieldRepeaterFaq = ({
<Button type="button" iconPos="left" label={__('Aggiungi', 'gepafin')}
icon="pi pi-plus" onClick={addNewItem}/>
<Dropdown onChange={(e) => selectItem(e)}
optionDisabled={(opt) => usedExistingValues.includes(opt.value)}
options={options} optionLabel="question"/>
optionDisabled={(opt) => usedExistingValues().includes(opt.value)}
options={stateOptionsData}
optionLabel="question"/>
</div>
<Accordion activeIndex={0}>
{stateFieldData.map((o, i) => <AccordionTab key={i}
@@ -144,7 +153,7 @@ const FormFieldRepeaterFaq = ({
offIcon="pi pi-eye-slash"
onLabel=""
offLabel=""
checked={o.visible}
checked={o.isVisible}
onChange={(e) => setChecked(e, i)}/>
{o.question}
</div>
@@ -160,7 +169,7 @@ const FormFieldRepeaterFaq = ({
}
>
<p className="m-0">
{o.answer}
{o.response}
</p>
</AccordionTab>)}
</Accordion>
@@ -170,14 +179,18 @@ const FormFieldRepeaterFaq = ({
footer={footerEditDialog}
style={{ maxWidth: '50rem' }}
onHide={hideEditDialog}>
<div className="appPage__spacer"></div>
<div className="appForm__field">
<label>{__('Titolo FAQ', 'gepafin')}</label>
<InputText value={question} onChange={(e) => onChangeEditItem(e.target.value, 'question')}/>
</div>
<div className="appForm__field">
<label>{__('Risposta', 'gepafin')}</label>
<InputTextarea value={answer} onChange={(e) => onChangeEditItem(e.target.value, 'answer')} rows={5} cols={30} />
<InputTextarea value={answer} onChange={(e) => onChangeEditItem(e.target.value, 'response')}
rows={5}
cols={30}/>
</div>
<div className="appPage__spacer"></div>
</Dialog>
</div>
)

7
src/components/TopBarProfileMenu/index.js
View File

@@ -2,13 +2,14 @@ import React, { useRef } from 'react';
import { __ } from '@wordpress/i18n';
// store
import { storeSet } from '../../store';
import { storeSet, useTrackedStore } from '../../store';
// components
import { Menu } from 'primereact/menu';
import { Avatar } from 'primereact/avatar';
const TopBarProfileMenu = ({ menuLeftRef }) => {
const userData = useTrackedStore().main.userData();
let items = [
{
@@ -17,8 +18,8 @@ const TopBarProfileMenu = ({ menuLeftRef }) => {
<div className="topBar__menuProfileItem">
<Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
<div className="userInfo">
<span className="userName">Mario Rossi</span>
<span className="userEmail">mario.rossi@example.com</span>
<span className="userName">{`${userData.firstName} ${userData.lastName}`}</span>
<span className="userEmail">{userData.email}</span>
</div>
</div>
);

8
src/components/UnsavedChangesDetector/index.js
View File

@@ -5,7 +5,7 @@ import equal from 'fast-deep-equal';
// tools
const UnsavedChangesDetector = ({ initialData, getValuesFn }) => {
const [initial] = useState(initialData);
const [initial, setInitial] = useState(initialData);
const warnIfUnsavedChanges = useCallback((event) => {
const updatedData = getValuesFn();
@@ -16,7 +16,11 @@ const UnsavedChangesDetector = ({ initialData, getValuesFn }) => {
}
return event.returnValue;
}, [initial])
}, [initialData]);
useEffect(() => {
setInitial(initialData);
}, [initialData])
useEffect(() => {
window.addEventListener('beforeunload', (e) => {

11
src/helpers/getBandoLabel.js
View File

@@ -2,14 +2,17 @@ import { __ } from '@wordpress/i18n';
const getBandoLabel = (status) => {
switch (status) {
case 'publish':
case 'PUBLISH':
return __('Pubblicato', 'gepafin');
case 'draft':
case 'READY_TO_PUBLISH':
return __('Pronto', 'gepafin');
case 'DRAFT':
return __('Bozza', 'gepafin');
case 'closed':
return __('Chiuso', 'gepafin');
case 'EXPIRED':
return __('Scaduto', 'gepafin');
default:
return '';

9
src/helpers/getBandoSeverity.js
View File

@@ -1,12 +1,15 @@
const getBandoSeverity = (status) => {
switch (status) {
case 'publish':
case 'PUBLISH':
return 'success';
case 'draft':
case 'READY_TO_PUBLISH':
return 'info';
case 'DRAFT':
return 'warning';
case 'closed':
case 'EXPIRED':
return 'closed';
default:

4
src/helpers/getDateFromISOstring.js
View File

@@ -1,6 +1,6 @@
const getDateFromISOstring = (value, options = {}) => {
const optionsMerged = options || { day: '2-digit', month: '2-digit', year: 'numeric', dateStyle: 'short' }
return Intl.DateTimeFormat('it-IT', optionsMerged).format(new Date(value))
const optionsMerged = options || { day: '2-digit', month: '2-digit', year: 'numeric', hour12: false }
return value ? Intl.DateTimeFormat('it-IT', optionsMerged).format(new Date(value)) : value;
}
export default getDateFromISOstring;

34
src/layouts/DefaultLayout/components/AppSidebar/index.js
View File

@@ -1,52 +1,66 @@
import React from 'react';
import { __ } from '@wordpress/i18n';
import { intersection } from 'ramda';
// store
import { useStore } from '../../../../store';
// components
import { NavLink } from 'react-router-dom';
const AppSidebar = () => {
const permissions = useStore().main.getPermissions();
const items = [
{
label: __('Riepilogo', 'gepafin'),
icon: 'pi pi-objects-column',
href: '/',
id: 1
id: 1,
enable: true
},
{
label: __('Gestione Bandi', 'gepafin'),
icon: 'pi pi-file',
href: '/bandi',
id: 2
id: 2,
enable: intersection(permissions, ['VIEW_CALLS', 'MANAGE_TENDERS']).length
},
{
label: __('Gestione Utenti', 'gepafin'),
icon: 'pi pi-users',
href: '/utenti',
id: 3
//href: '/utenti',
id: 3,
enable: intersection(permissions, ['VIEW_USERS', 'MANAGE_USERS']).length
},
{
label: __('Configurazione', 'gepafin'),
icon: 'pi pi-cog',
href: '/configurazione',
id: 4
//href: '/configurazione',
id: 4,
enable: false
},
{
label: __('Report e Analisi', 'gepafin'),
icon: 'pi pi-chart-bar',
href: '/stats',
id: 5
//href: '/stats',
id: 5,
enable: false
},
{
label: __('Log di Sistema', 'gepafin'),
icon: 'pi pi-receipt',
clickFn: () => {},
id: 6
id: 6,
enable: false
}
]
return <aside>
<ul>
{items.map(o => <li key={o.id}>
{items
.filter(o => o.enable)
.map(o => <li key={o.id}>
{o.href
? <NavLink to={o.href}>
<i className={o.icon}></i>

78
src/pages/Bandi/components/AllBandiTable/index.js
View File

@@ -1,10 +1,17 @@
import React, { useState, useEffect} from 'react';
import { __ } from '@wordpress/i18n';
import { uniq } from 'ramda';
import { is, uniq } from 'ramda';
// store
import { storeSet, storeGet } from '../../../../store';
// tools
import getBandoSeverity from '../../../../helpers/getBandoSeverity';
import getBandoLabel from '../../../../helpers/getBandoLabel';
import getDateFromISOstring from '../../../../helpers/getDateFromISOstring';
// api
import BandoService from '../../../../service/bando-service';
// components
import { FilterMatchMode, FilterOperator } from 'primereact/api';
@@ -20,6 +27,7 @@ import { Tag } from 'primereact/tag';
import ProperBandoLabel from '../../../../components/ProperBandoLabel';
import { Link } from 'react-router-dom';
const AllBandiTable = () => {
const [items, setItems] = useState(null);
const [filters, setFilters] = useState(null);
@@ -28,56 +36,36 @@ const AllBandiTable = () => {
const [statuses, setStatuses] = useState([]);
useEffect(() => {
// TODO
const items = [
{
name: 'Bando Innovazione 2024',
start_date: '2024-08-08T00:00:00+00:00',
end_date: '2024-08-30T00:00:00+00:00',
submissions: 24,
status: 'publish',
id: 11
},
{
name: 'Bando Sostenibilità 2024',
start_date: '2024-07-28T00:00:00+00:00',
end_date: '2024-08-15T00:00:00+00:00',
submissions: 35,
status: 'draft',
id: 9
},
{
name: 'Bando A',
start_date: '2024-06-28T00:00:00+00:00',
end_date: '2024-06-15T00:00:00+00:00',
submissions: 2,
status: 'closed',
id: 2
const isAsyncRequest = storeGet.main.isAsyncRequest();
if (isAsyncRequest !== 0) {
return;
}
]
setItems(getFormattedBandiData(items));
setStatuses(uniq(items.map(o => o.status)))
setLoading(false);
initFilters();
storeSet.main.setAsyncRequest();
BandoService.getBandi(getCallback, errGetCallbacks);
}, []);
const getCallback = (data) => {
if (data.status === 'SUCCESS') {
setItems(getFormattedBandiData(data.data));
setStatuses(uniq(data.data.map(o => o.status)))
initFilters();
}
storeSet.main.unsetAsyncRequest();
}
const errGetCallbacks = (data) => {
console.log('errGetCallbacks', data)
storeSet.main.unsetAsyncRequest();
}
const getFormattedBandiData = (data) => {
return [...(data || [])].map((d) => {
d.start_date = new Date(d.start_date);
d.end_date = new Date(d.end_date);
return data.map((d) => {
d.dates = d.dates.map(v => is(String, v) ? new Date(v) : (v ? v : ''));
return d;
});
};
const formatDate = (value) => {
return value.toLocaleDateString('it-IT', {
day: '2-digit',
month: '2-digit',
year: 'numeric'
});
};
const clearFilter = () => {
initFilters();
};
@@ -116,11 +104,11 @@ const AllBandiTable = () => {
};
const dateStartBodyTemplate = (rowData) => {
return formatDate(rowData.start_date);
return getDateFromISOstring(rowData.dates[0]);
};
const dateEndBodyTemplate = (rowData) => {
return formatDate(rowData.end_date);
return getDateFromISOstring(rowData.dates[1]);
};
const dateFilterTemplate = (options) => {

5
src/pages/BandoEdit/components/BandoEditFormActions/index.js
View File

@@ -1,10 +1,11 @@
import React from 'react';
import { __ } from '@wordpress/i18n';
import { isNil } from 'ramda';
// components
import { Button } from 'primereact/button';
const BandoEditFormActions = ({ openPreview, openPreviewEvaluation }) => {
const BandoEditFormActions = ({ id, openPreview, openPreviewEvaluation }) => {
return (
<div className="appPageSection">
<div className="appPageSection__actions">
@@ -13,7 +14,7 @@ const BandoEditFormActions = ({ openPreview, openPreviewEvaluation }) => {
label={__('Salva bozza', 'gepafin')} icon="pi pi-save" iconPos="right"/>
<Button
type="button"
disabled={false}
disabled={isNil(id)}
outlined
onClick={openPreview}
label={__('Anteprima beneficiario', 'gepafin')} icon="pi pi-eye" iconPos="right"/>

102
src/pages/BandoEdit/components/BandoEditFormStep1/index.js
View File

@@ -1,4 +1,4 @@
import React, { forwardRef, useImperativeHandle, useEffect } from 'react';
import React, { forwardRef, useImperativeHandle, useEffect, useState, useMemo } from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form';
@@ -10,9 +10,16 @@ import FormFieldRepeater from '../../../../components/FormFieldRepeater';
import FormFieldRepeaterFaq from '../../../../components/FormFieldRepeaterFaq';
import BandoEditFormActions from '../BandoEditFormActions';
import UnsavedChangesDetector from '../../../../components/UnsavedChangesDetector';
import BandoService from '../../../../service/bando-service';
import LookupdataService from '../../../../service/lookupdata-service';
import { storeSet, useStore } from '../../../../store';
const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors }, ref) {
const navigate = useNavigate();
const isAsyncRequest = useStore().main.isAsyncRequest();
const [aimedToOptions, setAimedToOptions] = useState([]);
const [faqOptions, setFaqOptions] = useState([]);
const [formInitialData, setFormInitialData] = useState(initialData);
const {
control,
handleSubmit,
@@ -21,8 +28,13 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
register,
trigger,
getValues,
clearErrors
} = useForm({defaultValues: initialData, mode: 'onChange'});
clearErrors,
reset
} = useForm({
defaultValues: useMemo(() => {
return formInitialData;
}, [formInitialData]), mode: 'onChange'
});
const values = getValues();
let minDateStart = new Date();
@@ -30,22 +42,67 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
if (!isNil(formData.dates) && formData.dates.length) {
formData.dates = formData.dates.map(v => is(String, v) ? v : v.toISOString());
}
console.log('onSubmit', formData);
if (!formData.id) {
BandoService.createBando(formData, createCallback, errCreateCallback);
} else {
BandoService.updateBandoStep1(formData.id, formData, createCallback, errCreateCallback);
}
};
// TODO temp data
const exampleOfAimedToOptions = [{ id: 11, value: 'PMI con sede in Umbria' }];
const exampleOfFaqOptions = [
{ id: 2, question: 'Question 1?', answer: 'Lorem ipsum dolor', visible: true }
];
// end of temp data
const createCallback = (data) => {
if (data.status === 'SUCCESS') {
const values = getValues();
if (!values.id && data.data.id) {
navigate(`/bandi/${data.data.id}`);
} else {
setFormInitialData(data.data);
reset();
}
}
}
const errCreateCallback = (data) => {
console.log('errCreateCallback', data);
}
const openPreview = () => {
navigate('/bandi/11/preview');
navigate(`/bandi/${values.id}/preview`);
}
const openPreviewEvaluation = () => {
navigate('/bandi/11/preview-evaluation');
navigate(`/bandi/${values.id}/preview-evaluation`);
}
const lookupdataCallback = (data) => {
if (data.status === 'SUCCESS') {
const aimedTo = data.data
.filter(o => o.type === 'AIMED_TO')
.map(o => {
delete o.type;
return {
...o,
lookUpDataId: o.id
};
});
setAimedToOptions(aimedTo);
const faqItems = data.data
.filter(o => o.type === 'FAQ')
.map(o => {
delete o.type;
return {
...o,
lookUpDataId: o.id
};
});
setFaqOptions(faqItems);
}
storeSet.main.unsetAsyncRequest();
}
const errLookupdataCallback = (data) => {
console.log('errLookupdataCallback', data);
storeSet.main.unsetAsyncRequest();
}
useImperativeHandle(
@@ -65,12 +122,26 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
}, [errors, isValid]);
useEffect(() => {
setFormInitialData(initialData);
}, [initialData]);
useEffect(() => {
reset(formInitialData);
}, [formInitialData]);
useEffect(() => {
if (isAsyncRequest !== 0) {
return;
}
trigger().then(() => clearErrors());
//storeSet.main.setAsyncRequest();
LookupdataService.getItems(lookupdataCallback, errLookupdataCallback, [['type', ['AIMED_TO', 'FAQ']]])
}, []);
return (
<form className="appForm" onSubmit={handleSubmit(onSubmit)}>
<UnsavedChangesDetector initialData={values} getValuesFn={getValues}/>
<UnsavedChangesDetector initialData={formInitialData} getValuesFn={getValues}/>
<FormField
type="switch"
fieldName="confidi"
@@ -123,7 +194,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
data={values}
setDataFn={setValue}
fieldName="aimedTo"
options={exampleOfAimedToOptions}
options={aimedToOptions}
errors={errors}
register={register}
trigger={trigger}
@@ -191,7 +262,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
data={values}
setDataFn={setValue}
fieldName="faq"
options={exampleOfFaqOptions}
options={faqOptions}
errors={errors}
register={register}
trigger={trigger}
@@ -210,6 +281,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
</div>
<BandoEditFormActions
id={values.id}
openPreview={openPreview}
openPreviewEvaluation={openPreviewEvaluation}/>
</form>

98
src/pages/BandoEdit/components/BandoEditFormStep2/index.js
View File

@@ -1,4 +1,4 @@
import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form';
@@ -10,9 +10,14 @@ import FormFieldRepeater from '../../../../components/FormFieldRepeater';
import FormFieldRepeaterCriteria from '../../../../components/FormFieldRepeaterCriteria';
import BandoEditFormActions from '../BandoEditFormActions';
import UnsavedChangesDetector from '../../../../components/UnsavedChangesDetector';
import BandoService from '../../../../service/bando-service';
import LookupdataService from '../../../../service/lookupdata-service';
const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors }, ref) {
const navigate = useNavigate();
const [criteriaOptions, setCriteriaOptions] = useState([]);
const [checklistOptions, setChecklistOptions] = useState([]);
const [formInitialData, setFormInitialData] = useState(initialData);
const {
control,
handleSubmit,
@@ -21,27 +26,71 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
register,
trigger,
getValues,
clearErrors
} = useForm({defaultValues: initialData, mode: 'onChange'});
clearErrors,
reset
} = useForm({
defaultValues: useMemo(() => {
return formInitialData;
}, [formInitialData]), mode: 'onChange'
});
const values = getValues();
const step2Props = ['threshold', 'criteria', 'checkList', 'docs', 'images'];
const onSubmit = (formData) => {
if (!isNil(formData.dates) && formData.dates.length) {
formData.dates = formData.dates.map(v => is(String, v) ? v : v.toISOString());
}
console.log('onSubmit', formData);
const forSubmit = Object.keys(formData).reduce((acc, cur) => {
if (step2Props.includes(cur)) {
acc[cur] = formData[cur];
}
return acc;
}, {});
BandoService.updateBandoStep2(formData.id, forSubmit, createCallback, errCreateCallback);
};
// TODO temp data
const exampleOfCriteriaOptions = [
{ id: 15, value: 'Innovatività del progetto', score: 9 },
{ id: 16, value: 'Impatto sulla competitività dell\'azienda', score: 3 },
{ id: 17, value: 'Sostenibilità economico-finanziaria', score: 5 }
];
const exampleOfChecklistOptions = [
{ id: 15, value: 'Innovatività del progetto' }
];
// end of temp data
const createCallback = (data) => {
if (data.status === 'SUCCESS') {
setFormInitialData(data.data);
reset();
}
}
const errCreateCallback = (data) => {
console.log('errCreateCallback', data);
}
const lookupdataCallback = (data) => {
if (data.status === 'SUCCESS') {
const criteria = data.data
.filter(o => o.type === 'EVALUATION_CRITERIA')
.map(o => {
delete o.type;
return {
...o,
score: 0,
lookUpDataId: o.id
};
});
setCriteriaOptions(criteria);
const checklist = data.data
.filter(o => o.type === 'CHECKLIST')
.map(o => {
delete o.type;
return {
...o,
lookUpDataId: o.id
};
});
setChecklistOptions(checklist);
}
}
const errLookupdataCallback = (data) => {
console.log('errLookupdataCallback', data)
}
const openPreview = () => {
navigate('/bandi/preview/11');
@@ -67,8 +116,17 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
}
}, [errors, isValid]);
useEffect(() => {
setFormInitialData(initialData);
}, [initialData]);
useEffect(() => {
reset(formInitialData);
}, [formInitialData]);
useEffect(() => {
trigger().then(() => clearErrors());
LookupdataService.getItems(lookupdataCallback, errLookupdataCallback, [['type', ['CHECKLIST', 'EVALUATION_CRITERIA']]])
}, []);
return (
@@ -78,7 +136,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
data={values}
setDataFn={setValue}
fieldName="criteria"
options={exampleOfCriteriaOptions}
options={criteriaOptions}
errors={errors}
register={register}
label={<>{__('Criteri di valutazione', 'gepafin')}*
@@ -95,17 +153,18 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
<FormField
type="fileupload"
setDataFn={setValue}
fieldName="documentation"
fieldName="docs"
label={__('Documentazione', 'gepafin')}
control={control}
errors={errors}
defaultValue={values['documentation']}
defaultValue={values['docs']}
config={{ required: __('È obbligatorio', 'gepafin') }}
accept="application/pdf,application/vnd.ms-excel"
chooseLabel={__('Aggiungi documento', 'gepafin')}
multiple={true}
doctype='document'
register={register}
callId={values.id}
/>
<FormField
@@ -118,13 +177,14 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
defaultValue={values['images']}
doctype='images'
register={register}
callId={values.id}
/>
<FormFieldRepeater
data={values}
setDataFn={setValue}
fieldName="checklist"
options={exampleOfChecklistOptions}
fieldName="checkList"
options={checklistOptions}
errors={errors}
register={register}
label={<>{__('Checklist valutazione Pre-Istruttoria', 'gepafin')}*

240
src/pages/BandoEdit/index.js
View File

@@ -1,31 +1,37 @@
import React, { useState, useEffect, useRef } from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate, useParams } from 'react-router-dom';
//import equal from 'fast-deep-equal';
import { is, isNil } from 'ramda';
// components
// store
import { storeSet, useStore } from '../../store';
// api
import BandoService from '../../service/bando-service';
// tools
import getBandoLabel from '../../helpers/getBandoLabel';
// components
import { Button } from 'primereact/button';
import { Skeleton } from 'primereact/skeleton';
import { Steps } from 'primereact/steps';
import BandoEditFormStep1 from './components/BandoEditFormStep1';
import BandoEditFormStep2 from './components/BandoEditFormStep2';
import { Messages } from 'primereact/messages';
// TODO temp
import { bandoTest } from '../../tempData';
import FormsService from '../../service/forms-service';
const BandoEdit = () => {
const isAsyncRequest = useStore().main.isAsyncRequest();
const navigate = useNavigate();
const { id } = useParams();
const [activeStep, setActiveStep] = useState(0)
const [activeStep, setActiveStep] = useState(null)
const [data, setData] = useState({});
const [isLoading, setIsLoading] = useState(true);
const [forms, setForms] = useState([]);
//const [selectedTemplate, setSelectedTemplate] = useState(null);
//const [templates, setTemplate] = useState(null);
const formRef = useRef(null);
const stepErrorMsgs = useRef(null);
const bandoMsgs = useRef(null);
const stepItems = [
{
@@ -34,7 +40,7 @@ const BandoEdit = () => {
if (activeStep === 0) {
return false
}
stepErrorMsgs.current.clear();
bandoMsgs.current.clear();
const isFormValid = formRef.current.isFormValid();
//const values = formRef.current.getValues();
//const diffData = equal(values, data);
@@ -42,10 +48,13 @@ const BandoEdit = () => {
if (isFormValid) {
goToStep(0)
} else {
stepErrorMsgs.current.show([
{ sticky: true, severity: 'error', summary: 'Error',
bandoMsgs.current.show([
{
id: '98',
sticky: true, severity: 'error', summary: 'Error',
detail: __('Potrai andare su altro step dopo risolvere errori della forma', 'gepafin'),
closable: true }
closable: true
}
]);
}
}
@@ -56,7 +65,7 @@ const BandoEdit = () => {
if (activeStep === 1) {
return false
}
stepErrorMsgs.current.clear();
bandoMsgs.current.clear();
const isFormValid = formRef.current.isFormValid();
//const values = formRef.current.getValues();
//const diffData = equal(values, data);
@@ -64,10 +73,13 @@ const BandoEdit = () => {
if (isFormValid) {
goToStep(1);
} else {
stepErrorMsgs.current.show([
{ sticky: true, severity: 'error', summary: 'Error',
bandoMsgs.current.show([
{
id: '98',
sticky: true, severity: 'error', summary: 'Error',
detail: __('Potrai andare su altro step dopo risolvere errori della forma', 'gepafin'),
closable: true }
closable: true
}
]);
}
}
@@ -79,40 +91,151 @@ const BandoEdit = () => {
}
const openBandoFormManagement = () => {
navigate('/bandi/11/forms');
navigate(`/bandi/${id}/forms`);
}
const validateBando = () => {
storeSet.main.setAsyncRequest();
bandoMsgs.current.clear();
BandoService.validateBando(id, validateCallback, errValidateCallback);
}
const validateCallback = (data) => {
if (data.status === 'SUCCESS') {
if (bandoMsgs.current) {
bandoMsgs.current.show([
{
id: '99',
sticky: true, severity: 'success', summary: '',
detail: __('Potrai pubblicare il tuo Bando.', 'gepafin'),
closable: false
}
]);
}
}
storeSet.main.unsetAsyncRequest();
}
const errValidateCallback = (data) => {
standardErrCallback(data);
}
const publishBando = () => {
storeSet.main.setAsyncRequest();
bandoMsgs.current.clear();
BandoService.updateBandoStatus(id, publishCallback, errPublishCallback, [['status', 'PUBLISH']]);
}
const publishCallback = (data) => {
if (data.status === 'SUCCESS') {
if (bandoMsgs.current) {
bandoMsgs.current.show([
{
id: '99',
sticky: true, severity: 'success', summary: '',
detail: __('Pubblicato!', 'gepafin'),
closable: false
}
]);
}
}
storeSet.main.unsetAsyncRequest();
}
const errPublishCallback = (data) => {
standardErrCallback(data);
}
const getCallback = (data) => {
if (data.status === 'SUCCESS') {
if (!isNil(data.data.dates) && data.data.dates.length) {
data.data.dates = data.data.dates.map(v => is(String, v) ? new Date(v) : v);
}
if (data.data.status === 'READY_TO_PUBLISH') {
bandoMsgs.current.clear();
bandoMsgs.current.show([
{
id: '1',
sticky: true, severity: 'info', summary: 'Info',
detail: __('Potrai pubblicare il tuo Bando.', 'gepafin'),
closable: false
}
]);
} else if (data.data.status === 'DRAFT') {
if (bandoMsgs.current) {
bandoMsgs.current.clear();
bandoMsgs.current.show([
{
id: '1',
sticky: true, severity: 'info', summary: 'Info',
detail: __('Potrai pubblicare il tuo Bando solo dopo aver completato tutti i campi obbligatori contrassegnati dagli asterischi.', 'gepafin'),
closable: false
}
]);
}
}
setData(data.data);
}
storeSet.main.unsetAsyncRequest();
}
const errGetCallback = (data) => {
standardErrCallback(data);
}
const standardErrCallback = (data) => {
if (bandoMsgs.current && data.message) {
bandoMsgs.current.show([
{
sticky: true, severity: 'error', summary: 'Error',
detail: data.message,
closable: true
}
]);
}
storeSet.main.unsetAsyncRequest();
}
const getFormsCallback = (data) => {
if (data.status === 'SUCCESS') {
setForms(data.data);
}
storeSet.main.unsetAsyncRequest();
}
useEffect(() => {
storeSet.main.setAsyncRequest();
setActiveStep(0);
const parsed = parseInt(id)
const bandoId = !isNaN(parsed) ? parsed : 0;
const data = 0 === bandoId
? {
if (bandoId === 0) {
setData({
status: 'draft',
name: ''
}
: bandoTest;
});
storeSet.main.unsetAsyncRequest();
if (bandoId === 0) {
setData(data);
setIsLoading(false);
if (bandoMsgs.current) {
bandoMsgs.current.clear();
bandoMsgs.current.show([
{
id: '1',
sticky: true, severity: 'info', summary: 'Info',
detail: __('Potrai pubblicare il tuo Bando solo dopo aver completato tutti i campi obbligatori contrassegnati dagli asterischi.', 'gepafin'),
closable: false
}
]);
}
} else {
setTimeout(() => {
if (!isNil(data.dates) && data.dates.length) {
data.dates = data.dates.map(v => is(String, v) ? new Date(v) : v);
BandoService.getBando(id, getCallback, errGetCallback);
FormsService.getFormsForCall(id, getFormsCallback, () => {
});
}
setData(data);
/*const templates = [
{ name: 'Il mio template', value: 22 },
{ name: 'Template #11', value: 11 },
];
setTemplate(templates);*/
setIsLoading(false);
}, 2000);
}
}, [id]);
}, []);
return (
<div className="appPage">
@@ -146,7 +269,7 @@ const BandoEdit = () => {
icon="pi pi-check"
iconPos="right"/>
</div> : null*/}
{!isLoading
{!isAsyncRequest
? <Steps
model={stepItems}
activeIndex={activeStep}
@@ -155,13 +278,14 @@ const BandoEdit = () => {
<div className="appPage__spacer"></div>
<Messages ref={stepErrorMsgs} />
<Messages ref={bandoMsgs}/>
{!isLoading
{!isAsyncRequest
? <>
{activeStep === 0
? <BandoEditFormStep1 initialData={data} ref={formRef}/>
: <BandoEditFormStep2 initialData={data} ref={formRef}/>}
? <BandoEditFormStep1 initialData={data} ref={formRef}/> : null}
{activeStep === 1
? <BandoEditFormStep2 initialData={data} ref={formRef}/> : null}
<div className="appPageSection">
<h2>{__('Crea o modifica il Form compilabile dal Beneficiario', 'gepafin')}</h2>
@@ -169,6 +293,34 @@ const BandoEdit = () => {
type="button"
onClick={openBandoFormManagement}
label={__('Crea/modifica form', 'gepafin')}/>
{forms.length
? <ul className="">
{forms.map(o => <li key={o.id}>
{o.label}
</li>)}
</ul>
: <p>No forms created yet.</p>}
</div>
<div className="appPage__spacer"></div>
<div className="appPageSection">
<h2>{__('Publicca il Form', 'gepafin')}</h2>
<div className="appPageSection__actions">
<Button
type="button"
outlined
disabled={!(data.status === 'DRAFT')}
onClick={validateBando}
label={__('Validate', 'gepafin')}/>
<Button
type="button"
disabled={!(data.status === 'READY_TO_PUBLISH')}
onClick={publishBando}
label={__('Publish', 'gepafin')}/>
</div>
</div>
</>
: <>

74
src/pages/BandoForms/index.js
View File

@@ -1,18 +1,25 @@
import React, { useState, useEffect, useRef } from 'react';
import React, { useState, useEffect } from 'react';
import { __ } from '@wordpress/i18n';
import { useParams, useNavigate } from 'react-router-dom';
import { isEmpty } from 'ramda';
// components
import { Button } from 'primereact/button';
import { Dropdown } from 'primereact/dropdown';
// service
import FormsService from '../../service/forms-service';
// store
import { storeSet } from '../../store';
const BandoForms = () => {
const { id } = useParams();
const navigate = useNavigate()
const [templates, setTemplate] = useState(null);
const [templates, setTemplates] = useState(null);
const [selectedTemplate, setSelectedTemplate] = useState(null);
//const [data, setData] = useState({});
//const [isLoading, setIsLoading] = useState(true);
const [selectedForm, setSelectedForm] = useState(null);
const [forms, setForms] = useState([]);
const doCreateNewForm = () => {
navigate(`/bandi/${id}/forms/new`);
@@ -22,17 +29,35 @@ const BandoForms = () => {
navigate(`/bandi/${id}`);
}
const goToEditForm = () => {
if (selectedForm && selectedForm !== 0) {
navigate(`/bandi/${id}/forms/${selectedForm}`);
}
}
const goToEditFormFromTemplate = () => {
console.log('goToEditFormFromTemplate', selectedTemplate)
//navigate(`/bandi/${id}`);
}
const getFormsCallback = (data) => {
if (data.status === 'SUCCESS') {
const forms = data.data.map(o => ({label: o.label, value: o.id}))
setForms(forms);
}
storeSet.main.unsetAsyncRequest();
}
useEffect(() => {
const parsed = parseInt(id)
const bandoId = !isNaN(parsed) ? parsed : 0;
const templates = [
{ name: 'Il mio template', value: 22 },
{ name: 'Template #11', value: 11 },
];
setTemplate(templates);
setTemplates([
{label: "Form template", value: 11}
])
// TODO
storeSet.main.setAsyncRequest();
FormsService.getFormsForCall(bandoId, getFormsCallback, () => {});
}, [id]);
return (
@@ -66,8 +91,15 @@ const BandoForms = () => {
value={selectedTemplate}
onChange={(e) => setSelectedTemplate(e.value)}
options={templates}
optionLabel="name"
optionLabel="label"
placeholder={__('Seleziona template', 'gepafin')}/>
<Button
type="button"
outlined
disabled={true}
onClick={goToEditFormFromTemplate}
label={__('Crea', 'gepafin')}
icon="pi pi-plus" iconPos="right"/>
</div>
</div>
@@ -82,15 +114,25 @@ const BandoForms = () => {
</div>
</div>
<div className="appPageSection__withBorder disabled">
<h2>{__('Modifica Form esistente', 'gepafin')}</h2>
<div className="appPageSection__withBorder">
<h2>{__('Modifica form esistente', 'gepafin')}</h2>
<div className="row">
<p>{__('Continua a lavorare su un form precedentemente salvato', 'gepafin')}</p>
<Dropdown
id="form"
disabled={isEmpty(forms)}
value={selectedForm}
onChange={(e) => setSelectedForm(e.value)}
options={forms}
optionLabel="label"
placeholder={__('Seleziona form', 'gepafin')}/>
<Button
type="button"
disabled={true}
onClick={doCreateNewForm}
label={__('Modifica', 'gepafin')}/>
outlined
disabled={!selectedForm}
onClick={goToEditForm}
label={__('Modifica', 'gepafin')}
icon="pi pi-cog" iconPos="right"/>
</div>
</div>
</div>

64
src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSettingRepeater/index.js Normal file
View File

@@ -0,0 +1,64 @@
import React, { useEffect, useState } from 'react';
import { __ } from '@wordpress/i18n';
// components
import { InputText } from 'primereact/inputtext';
import { Button } from 'primereact/button';
// tools
import uniqid from '../../../../../../helpers/uniqid';
const ElementSettingRepeater = ({
value,
name,
setDataFn
}) => {
const [stateFieldData, setStateFieldData] = useState([]);
const removeItem = (index) => {
const newData = stateFieldData.toSpliced(index, 1);
setStateFieldData(newData);
}
const addNewItem = () => {
setStateFieldData([...stateFieldData, { name: uniqid('o'), label: '' }]);
}
const onInputChange = (e, index) => {
const { value } = e.target;
const newData = stateFieldData.map((o, i) => {
if (i === index) {
o.label = value;
}
return o;
})
setStateFieldData(newData);
}
const properField = (item, i) => {
return <InputText value={item.label} onInput={(e) => onInputChange(e, i)}/>
}
useEffect(() => {
const storeFieldData = value ?? [];
setStateFieldData(storeFieldData);
}, []);
useEffect(() => {
setDataFn(name, [...stateFieldData]);
}, [stateFieldData])
return (
<div className="formElementSettings__repeater">
{stateFieldData.map((o, i) => <div key={i} className="formElementSettings__repeaterItem">
<div className="p-inputgroup flex-1">
{properField(o, i)}
<Button icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
</div>
</div>)}
<Button type="button" label={__('Aggiungi', 'gepafin')} onClick={addNewItem}/>
</div>
)
}
export default ElementSettingRepeater;

93
src/pages/BandoFormsEdit/components/BuilderElementSettings/index.js
View File

@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import { head } from 'ramda';
import { __ } from '@wordpress/i18n';
import { head, isNil } from 'ramda';
import { __, sprintf } from '@wordpress/i18n';
import { klona } from 'klona';
// store
@@ -10,12 +10,17 @@ import { storeSet, useStore } from '../../../../store';
import { InputText } from 'primereact/inputtext';
import { Button } from 'primereact/button';
import { Tag } from 'primereact/tag';
import { TabView, TabPanel } from 'primereact/tabview';
import { InputSwitch } from 'primereact/inputswitch';
import ElementSettingRepeater from './components/ElementSettingRepeater';
const BuilderElementSettings = () => {
const elements = useStore().main.elements();
const BuilderElementSettings = ({ closeSettings }) => {
const elements = useStore().main.formElements();
const activeElement = useStore().main.activeElement();
const [activeElementData, setActiveElementData] = useState({});
const [settings, setSettings] = useState([]);
const [validators, setValidators] = useState({});
const textBasedValidatorFields = ['min', 'max', 'minLength', 'maxLength', 'pattern', 'custom'];
const onChange = (value, name) => {
const newSettings = settings
@@ -30,10 +35,47 @@ const BuilderElementSettings = () => {
setSettings(newSettings);
}
const onUpdateOptions = (name, value) => {
const newSettings = settings
.map(o => {
if (o.name === name) {
o.value = value;
}
return o;
});
setSettings(newSettings);
}
const saveSettings = () => {
activeElementData.settings = settings;
activeElementData.validators = validators;
const newElements = elements.map(o => o.id === activeElementData.id ? activeElementData : o);
storeSet.main.elements(newElements);
storeSet.main.formElements(newElements);
closeSettings();
}
const showField = (value, key) => {
let newValidators = klona(validators);
if (value) {
newValidators[key] = '';
} else {
newValidators[key] = null;
}
setValidators(newValidators);
}
const toggleRequired = (value, key) => {
let newValidators = klona(validators);
newValidators[key] = value;
setValidators(newValidators);
}
const onChangeValidator = (value, name) => {
let newValidators = klona(validators);
newValidators[name] = value;
setValidators(newValidators);
}
useEffect(() => {
@@ -41,22 +83,59 @@ const BuilderElementSettings = () => {
if (chosen) {
setActiveElementData(klona(chosen));
setSettings(klona(chosen.settings));
setValidators(klona(chosen.validators))
} else {
setActiveElementData({});
setSettings([]);
setValidators({})
}
}, [activeElement])
return (activeElementData
? <div className="formElementSettings">
<Tag value={activeElementData.name} severity="info"/>
<TabView className="formElementSettings__tabs">
<TabPanel header={__('Presentation', 'gepafin')}>
{settings
? settings.map((o) => <div className="formElementSettings__field" key={o.name}>
<label htmlFor={o.name}>{o.name}</label>
<InputText id={o.name} aria-describedby={`${o.name}-help`}
{o.name === 'options'
? <ElementSettingRepeater value={o.value} name={o.name} setDataFn={onUpdateOptions} />
: <InputText id={o.name} aria-describedby={`${o.name}-help`}
value={o.value}
onChange={(e) => onChange(e.target.value, o.name)}/>
onChange={(e) => onChange(e.target.value, o.name)}/>}
</div>) : null}
</TabPanel>
<TabPanel header={__('Validation', 'gepafin')}>
{validators
? Object.keys(validators).map((k) => <div
className="formElementSettings__field" key={k}>
{k === 'isRequired'
? <div className="formElementSettings__field">
<label htmlFor={k}>{__('Required?', 'gepafin')}</label>
<InputSwitch
checked={validators[k]}
onChange={(e) => toggleRequired(e.value, k)}/>
</div>
: null}
{textBasedValidatorFields.includes(k)
? <div className="formElementSettings__field">
<label htmlFor={`enable_${k}`}>{sprintf(__('Set %s', 'gepafin'), k)}</label>
<InputSwitch
checked={!isNil(validators[k])}
onChange={(e) => showField(e.value, k)}/>
</div>
: null}
{textBasedValidatorFields.includes(k) && !isNil(validators[k])
? <div className="formElementSettings__field">
<label htmlFor={k}>{k}</label>
<InputText id={k} aria-describedby={`${k}-help`}
value={validators[k]}
onChange={(e) => onChangeValidator(e.target.value, k)}/>
</div> : null}
</div>) : null}
</TabPanel>
</TabView>
<Button label={__('Salva', 'gepafin')} onClick={saveSettings}/>
</div>

2
src/pages/BandoFormsEdit/components/FormBuilder/index.js
View File

@@ -48,7 +48,7 @@ const FormBuilder = () => {
<>
<Sidebar visible={!isEmpty(activeElement)} onHide={closeSettings} className="formBuilder__elementSettings">
<h2>{__('Impostazioni del campo modulo', 'gepafin')}</h2>
{!isEmpty(activeElement) ? <BuilderElementSettings/> : null}
{!isEmpty(activeElement) ? <BuilderElementSettings closeSettings={closeSettings}/> : null}
</Sidebar>
<div className="formBuilder">
<div className="formBuilder__main">

111
src/pages/BandoFormsEdit/index.js
View File

@@ -6,52 +6,121 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
import { klona } from 'klona';
// store
import { storeSet, storeGet } from '../../store';
import { storeSet, storeGet, useStore } from '../../store';
// components
import FormBuilder from './components/FormBuilder';
import { Button } from 'primereact/button';
// TODO temp
import { formData, elementItems } from '../../tempData';
// components
import { InputText } from 'primereact/inputtext';
import FormsService from '../../service/forms-service';
const BandoFormsEdit = () => {
const { id, formId } = useParams();
const navigate = useNavigate();
const [isLoading, setIsLoading] = useState(true);
const [formName, setFormName] = useState('');
const isAsyncRequest = useStore().main.isAsyncRequest();
const getBandoId = () => {
const parsed = parseInt(id)
return !isNaN(parsed) ? parsed : 0;
}
const goBack = () => {
navigate(`/bandi/${id}/forms`);
const bandoId = getBandoId();
navigate(`/bandi/${bandoId}/forms`);
}
const doSave = () => {
console.log('doSave', storeGet.main.formElements());
const content = storeGet.main.formElements();
const bandoId = getBandoId();
const parsedFormId = parseInt(formId)
const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
const formData = {
label: formName,
content
}
storeSet.main.setAsyncRequest();
if (bandoFormId === 0) {
FormsService.createFormForCall(bandoId, formData, formCreateCallback, errFormCreateCallback);
} else {
FormsService.updateForm(bandoFormId, formData, formCreateCallback, errFormCreateCallback)
}
}
const formCreateCallback = (data) => {
if (data.status === 'SUCCESS') {
const parsed = parseInt(id)
const bandoId = !isNaN(parsed) ? parsed : 0;
if (data.data.id) {
navigate(`/bandi/${bandoId}/forms/${data.data.id}`);
}
}
storeSet.main.unsetAsyncRequest();
}
const errFormCreateCallback = (data) => {
console.log('errFormCreateCallback', data)
storeSet.main.unsetAsyncRequest();
}
const openPreview = () => {
navigate(`/bandi/${id}/forms/${formId}/preview`);
const bandoId = getBandoId();
navigate(`/bandi/${bandoId}/forms/${formId}/preview`);
}
const doPublish = () => {
console.log('doPublish');
}
useEffect(() => {
//const parsed = parseInt(id)
//const bandoId = !isNaN(parsed) ? parsed : 0;
//const parsedFormId = parseInt(formId)
//const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
const getElementItemsCallback = (data) => {
if (data.status === 'SUCCESS') {
storeSet.main.elementItems(data.data);
}
storeSet.main.unsetAsyncRequest();
}
// 1. TODO get builder content data from API
storeSet.main.formLabel(formData.label);
const elements = klona(formData.content);
const errGetElementItemsCallbacks = (data) => {
console.log('errGetElementItemsCallbacks', data)
storeSet.main.unsetAsyncRequest();
}
const getFormCallback = (data) => {
if (data.status === 'SUCCESS') {
storeSet.main.formId(data.data.id);
storeSet.main.formLabel(data.data.label);
setFormName(data.data.label);
const elements = klona(data.data.content);
storeSet.main.formElements(elements);
storeSet.main.elementItems(elementItems);
setIsLoading(false);
}
storeSet.main.unsetAsyncRequest();
}
}, [id]);
const errGetFormCallbacks = (data) => {
console.log('errGetElementItemsCallbacks', data)
storeSet.main.unsetAsyncRequest();
}
useEffect(() => {
const parsedFormId = parseInt(formId)
const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
storeSet.main.setAsyncRequest();
FormsService.getElementItems(getElementItemsCallback, errGetElementItemsCallbacks);
if (bandoFormId) {
storeSet.main.setAsyncRequest();
FormsService.getFormById(bandoFormId, getFormCallback, errGetFormCallbacks);
}
return () => {
storeSet.main.formId(0);
storeSet.main.formLabel('');
storeSet.main.formElements([]);
}
}, [id, formId]);
return (
<div className="appPage">
@@ -65,11 +134,11 @@ const BandoFormsEdit = () => {
<div className="appPage__spacer"></div>
<div className="appForm__field">
<label htmlFor="label">{__('Form label', 'gepafin')}</label>
<label htmlFor="label">{__('Assegna un nome a questo form', 'gepafin')}</label>
<InputText
id="label"
value={formName}
placeholder={__('Nome della forma', 'gepafin')}
placeholder=""
onChange={(e) => setFormName(e.target.value)}
aria-describedby="label-help"/>
</div>
@@ -78,7 +147,7 @@ const BandoFormsEdit = () => {
<div className="appPageSection">
<DndProvider backend={HTML5Backend}>
{!isLoading ? <FormBuilder/> : null}
{!isAsyncRequest ? <FormBuilder/> : null}
</DndProvider>
</div>

64
src/pages/BandoView/index.js
View File

@@ -1,7 +1,10 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import { __, sprintf } from '@wordpress/i18n';
import { useNavigate, useParams } from 'react-router-dom';
import { bandoTest } from '../../tempData';
import { is, isEmpty } from 'ramda';
// store
import { storeSet, useStore } from '../../store';
// tools
import getNumberWithCurrency from '../../helpers/getNumberWithCurrency';
@@ -13,13 +16,16 @@ import { Accordion } from 'primereact/accordion';
import { AccordionTab } from 'primereact/accordion';
import { InputTextarea } from 'primereact/inputtextarea';
import { Button } from 'primereact/button';
import BandoService from '../../service/bando-service';
import { Messages } from 'primereact/messages';
const BandoView = () => {
const isAsyncRequest = useStore().main.isAsyncRequest();
const { id } = useParams();
const navigate = useNavigate();
const [data, setData] = useState({});
const [newQuestion, setNewQuestion] = useState('');
const [isLoading, setIsLoading] = useState(true);
const bandoMsgs = useRef(null);
const closePreview = () => {
navigate(`/bandi/${id}`);
@@ -41,20 +47,41 @@ const BandoView = () => {
}
useEffect(() => {
//const parsed = parseInt(id)
//const bandoId = !isNaN(parsed) ? parsed : 0;
const getCallback = (data) => {
if (data.status === 'SUCCESS') {
setData(getFormattedBandiData(data.data));
}
storeSet.main.unsetAsyncRequest();
}
setTimeout(() => {
const data = bandoTest;
setData(data);
setIsLoading(false)
}, 3000);
const errGetCallback = (data) => {
if (bandoMsgs.current && data.message) {
bandoMsgs.current.show([
{
sticky: true, severity: 'error', summary: 'Error',
detail: data.message,
closable: true
}
]);
}
storeSet.main.unsetAsyncRequest();
}
const getFormattedBandiData = (data) => {
data.dates = data.dates.map(v => is(String, v) ? new Date(v) : (v ? v : ''));
return data;
};
useEffect(() => {
const parsed = parseInt(id)
const bandoId = !isNaN(parsed) ? parsed : 0;
BandoService.getBando(bandoId, getCallback, errGetCallback);
}, [id]);
return (
<div className="appPage">
{!isLoading
{!isAsyncRequest && !isEmpty(data)
? <div className="appPage__pageHeader">
<h1>{data.name}</h1>
<p>
@@ -68,8 +95,9 @@ const BandoView = () => {
</>}
<div className="appPage__spacer"></div>
<Messages ref={bandoMsgs}/>
{!isLoading
{!isAsyncRequest && !isEmpty(data)
? <div className="appPage__content">
<div className="appPageSection__preview">
<Button
@@ -107,11 +135,11 @@ const BandoView = () => {
<div className="appPageSection__withBorder">
<p className="appPageSection__pMeta">
<span>{__('Data apertura', 'gepafin')}</span>
<span></span>
<span>{getDateFromISOstring(data.dates[0])}</span>
</p>
<p className="appPageSection__pMeta">
<span>{__('Data chiusura', 'gepafin')}</span>
<span></span>
<span>{getDateFromISOstring(data.dates[1])}</span>
</p>
</div>
</div>
@@ -156,7 +184,7 @@ const BandoView = () => {
<h2>{__('Allegati', 'gepafin')}</h2>
<div className="row rowContent">
<ul>
{data.documentation.map((o, i) => <li key={i}>
{data.docs.map((o, i) => <li key={i}>
<a href={o.filePath} target="_blank" rel="noreferrer">{o.name}</a>
</li>)}
</ul>
@@ -168,7 +196,7 @@ const BandoView = () => {
<Accordion>
{data.faq.map((o, i) => <AccordionTab key={i} header={o.question}>
<p>
{o.answer}
{o.response}
</p>
</AccordionTab>)}
</Accordion>
@@ -196,12 +224,14 @@ const BandoView = () => {
<div className="appPageSection__actions">
<Button
type="button"
disabled={true}
outlined
onClick={scaricaBando}
label={__('Scarica Bando Completo', 'gepafin')}
icon="pi pi-download" iconPos="right"/>
<Button
type="button"
disabled={true}
outlined
onClick={scaricaModulistica}
label={__('Scarica Modulistica', 'gepafin')}

176
src/pages/DashboardBenefeciario/components/LatestBandiTable/index.js Normal file
View File

@@ -0,0 +1,176 @@
import React, { useState, useEffect} from 'react';
import { __ } from '@wordpress/i18n';
import { uniq } from 'ramda';
// tools
import getBandoLabel from '../../../../helpers/getBandoLabel';
import getBandoSeverity from '../../../../helpers/getBandoSeverity';
// components
import { FilterMatchMode, FilterOperator } from 'primereact/api';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { InputText } from 'primereact/inputtext';
import { IconField } from 'primereact/iconfield';
import { InputIcon } from 'primereact/inputicon';
import { Dropdown } from 'primereact/dropdown';
import { InputNumber } from 'primereact/inputnumber';
import { Button } from 'primereact/button';
import { Calendar } from 'primereact/calendar';
import { Tag } from 'primereact/tag';
import ProperBandoLabel from '../../../../components/ProperBandoLabel';
const LatestBandiTable = () => {
const [items, setItems] = useState(null);
const [filters, setFilters] = useState(null);
const [loading, setLoading] = useState(false);
const [globalFilterValue, setGlobalFilterValue] = useState('');
const [statuses, setStatuses] = useState([]);
useEffect(() => {
// TODO
const items = [
{
name: 'Bando Innovazione 2024',
start_date: '2024-08-08T00:00:00+00:00',
end_date: '2024-08-30T00:00:00+00:00',
submissions: 24,
status: 'publish',
id: 11
},
{
name: 'Bando Sostenibilità 2024',
start_date: '2024-07-28T00:00:00+00:00',
end_date: '2024-08-15T00:00:00+00:00',
submissions: 35,
status: 'publish',
id: 9
},
{
name: 'Bando A',
start_date: '2024-06-28T00:00:00+00:00',
end_date: '2024-06-15T00:00:00+00:00',
submissions: 2,
status: 'closed',
id: 2
}
]
setItems(getFormattedBandiData(items));
setStatuses(uniq(items.map(o => o.status)))
setLoading(false);
initFilters();
}, []);
const getFormattedBandiData = (data) => {
return [...(data || [])].map((d) => {
d.start_date = new Date(d.start_date);
d.end_date = new Date(d.end_date);
return d;
});
};
const formatDate = (value) => {
return value.toLocaleDateString('it-IT', {
day: '2-digit',
month: '2-digit',
year: 'numeric'
});
};
const clearFilter = () => {
initFilters();
};
const onGlobalFilterChange = (e) => {
const value = e.target.value;
let _filters = { ...filters };
_filters['global'].value = value;
setFilters(_filters);
setGlobalFilterValue(value);
};
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 }] },
submissions: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
});
setGlobalFilterValue('');
};
const renderHeader = () => {
return (
<div className="appTableHeader">
<Button type="button" icon="pi pi-filter-slash" label={__('Pulisci', 'gepafin')} outlined onClick={clearFilter} />
<IconField iconPosition="left">
<InputIcon className="pi pi-search" />
<InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder={__('Cerca', 'gepafin')} />
</IconField>
</div>
);
};
const dateStartBodyTemplate = (rowData) => {
return formatDate(rowData.start_date);
};
const dateEndBodyTemplate = (rowData) => {
return formatDate(rowData.end_date);
};
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 balanceFilterTemplate = (options) => {
return <InputNumber value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} />;
};
const statusBodyTemplate = (rowData) => {
return <ProperBandoLabel status={rowData.status}/>;
};
const statusFilterTemplate = (options) => {
return <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear />;
};
const statusItemTemplate = (option) => {
return <Tag value={getBandoLabel(option)} severity={getBandoSeverity(option)} />;
};
const header = renderHeader();
return(
<div className="appPageSection__table">
<DataTable value={items} paginator showGridlines rows={10} loading={loading} dataKey="id"
filters={filters}
globalFilterFields={['name', 'status']}
header={header}
emptyMessage="Nothing found." onFilter={(e) => setFilters(e.filters)}>
<Column field="name" header={__('Nome Bando', 'gepafin')} filter filterPlaceholder="Search by name"
style={{ minWidth: '12rem' }}/>
<Column header={__('Data Pubblicazione', 'gepafin')} filterField="start_date" dataType="date"
style={{ minWidth: '10rem' }}
body={dateStartBodyTemplate} filter filterElement={dateFilterTemplate}/>
<Column header={__('Data Scadenza', 'gepafin')} filterField="end_date" dataType="date"
style={{ minWidth: '10rem' }}
body={dateEndBodyTemplate} filter filterElement={dateFilterTemplate}/>
<Column header={__('Domande ricevute', 'gepafin')} filterField="submissions" dataType="numeric"
style={{ minWidth: '10rem' }} field="submissions"
filter filterElement={balanceFilterTemplate}/>
<Column field="status" header={__('Stato', 'gepafin')} filterMenuStyle={{ width: '14rem' }}
style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter
filterElement={statusFilterTemplate}/>
</DataTable>
</div>
)
}
export default LatestBandiTable;

123
src/pages/DashboardBenefeciario/components/LatestUsersActivityTable/index.js Normal file
View File

@@ -0,0 +1,123 @@
import React, { useState, useEffect} from 'react';
import { __ } from '@wordpress/i18n';
// components
import { FilterMatchMode, FilterOperator } from 'primereact/api';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { InputText } from 'primereact/inputtext';
import { IconField } from 'primereact/iconfield';
import { InputIcon } from 'primereact/inputicon';
import { Button } from 'primereact/button';
import { Calendar } from 'primereact/calendar';
const LatestUsersActivityTable = () => {
const [items, setItems] = useState(null);
const [filters, setFilters] = useState(null);
const [loading, setLoading] = useState(false);
const [globalFilterValue, setGlobalFilterValue] = useState('');
useEffect(() => {
// TODO
const bandi = [
{
date: '2024-08-02T00:00:00+14:32',
email: 'mario.rossi@gepafin.it',
action: 'Valutazione Domanda',
details: 'Bando Innovazione 2024 - Domanda #123',
id: 11
},
{
date: '2024-08-01T00:00:00+08:23',
email: 'laura.bianchi@gepafin.it',
action: 'Creazione Bando',
details: 'Nuovo bando "Formazione 2025" in bozza',
id: 9
}
]
setItems(getFormattedBandiData(bandi));
setLoading(false);
initFilters();
}, []);
const getFormattedBandiData = (data) => {
return [...(data || [])].map((d) => {
d.date = new Date(d.date);
return d;
});
};
const formatDate = (value) => {
return value.toLocaleDateString('it-IT', {
day: '2-digit',
month: '2-digit',
year: 'numeric'
});
};
const clearFilter = () => {
initFilters();
};
const onGlobalFilterChange = (e) => {
const value = e.target.value;
let _filters = { ...filters };
_filters['global'].value = value;
setFilters(_filters);
setGlobalFilterValue(value);
};
const initFilters = () => {
setFilters({
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
email: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
});
setGlobalFilterValue('');
};
const renderHeader = () => {
return (
<div className="appTableHeader">
<Button type="button" icon="pi pi-filter-slash" label={__('Pulisci', 'gepafin')} outlined onClick={clearFilter} />
<IconField iconPosition="left">
<InputIcon className="pi pi-search" />
<InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder={__('Cerca', 'gepafin')} />
</IconField>
</div>
);
};
const dateBodyTemplate = (rowData) => {
return formatDate(rowData.date);
};
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 header = renderHeader();
return(
<div className="appPageSection__table">
<DataTable value={items} paginator showGridlines rows={10} loading={loading} dataKey="id"
filters={filters}
globalFilterFields={['name', 'status']}
header={header}
emptyMessage="Nothing found." onFilter={(e) => setFilters(e.filters)}>
<Column header={__('Timestamp', 'gepafin')} filterField="date" dataType="date"
style={{ minWidth: '10rem' }}
body={dateBodyTemplate} filter filterElement={dateFilterTemplate}/>
<Column field="email" header={__('Utente', 'gepafin')} filter filterPlaceholder="Search by email"
style={{ minWidth: '12rem' }}/>
<Column field="action" header={__('Azione', 'gepafin')}/>
<Column field="dettails" header={__('Dettagli', 'gepafin')}/>
</DataTable>
</div>
)
}
export default LatestUsersActivityTable;

58
src/pages/DashboardBenefeciario/index.js Normal file
View File

@@ -0,0 +1,58 @@
import React from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate } from 'react-router-dom';
// components
import LatestBandiTable from './components/LatestBandiTable';
import LatestUsersActivityTable from './components/LatestUsersActivityTable';
import { Button } from 'primereact/button';
const DashboardBenefeciario = () => {
const navigate = useNavigate();
const onGoToCreateNewBando = () => {
navigate('/bandi/new');
}
const onGoToUsers = () => {
console.log('onGoToUsers')
}
const onGoToStats = () => {
console.log('onGoToStats')
}
const onGoToSettings = () => {
console.log('onGoToSettings')
}
return(
<div className="appPage">
<div className="appPage__pageHeader">
<h1>{__('Dashboard', 'gepafin')}</h1>
</div>
<div className="appPage__spacer"></div>
<div className="appPageSection statsBigBadges">
<h2>{__('Panoramica di Sistema', 'gepafin')}</h2>
<div className="statsBigBadges__grid">
<div className="statsBigBadges__gridItem">
<span>{__('Domande attivi', 'gepafin')}</span>
<span>3</span>
</div>
<div className="statsBigBadges__gridItem">
<span>{__('Bandi osservati', 'gepafin')}</span>
<span>42</span>
</div>
<div className="statsBigBadges__gridItem">
<span>{__('Documenti da integrare', 'gepafin')}</span>
<span>2</span>
</div>
</div>
</div>
</div>
)
}
export default DashboardBenefeciario;

41
src/routes.js
View File

@@ -5,6 +5,7 @@ import PageNotFound from './pages/PageNotFound';
import Login from './pages/Login';
import ProtectedRoute from './components/ProtectedRoute';
import Dashboard from './pages/Dashboard';
import DashboardBenefeciario from './pages/DashboardBenefeciario';
import DefaultLayout from './layouts/DefaultLayout';
import Bandi from './pages/Bandi';
import BandoEdit from './pages/BandoEdit';
@@ -13,21 +14,41 @@ import BandoFormsEdit from './pages/BandoFormsEdit';
import BandoForms from './pages/BandoForms';
import BandoFormsPreview from './pages/BandoFormsPreview';
const routes = () => (
const routes = ({ role }) => {
return (
<Routes>
<Route element={<ProtectedRoute/>}>
<Route path="/" element={<DefaultLayout><Dashboard/></DefaultLayout>}/>
<Route path="/bandi" element={<DefaultLayout><Bandi/></DefaultLayout>}/>
<Route path="/bandi/:id" element={<DefaultLayout><BandoEdit/></DefaultLayout>}/>
<Route path="/bandi/:id/preview" element={<DefaultLayout><BandoView/></DefaultLayout>}/>
<Route path="/bandi/:id/preview-evaluation" element={<DefaultLayout><BandoView/></DefaultLayout>}/>
<Route path="/bandi/:id/forms" element={<DefaultLayout><BandoForms/></DefaultLayout>}/>
<Route path="/bandi/:id/forms/:formId" element={<DefaultLayout><BandoFormsEdit/></DefaultLayout>}/>
<Route path="/bandi/:id/forms/:formId/preview" element={<DefaultLayout><BandoFormsPreview/></DefaultLayout>}/>
<Route path="/" element={<DefaultLayout>
{'ROLE_SUPER_ADMIN' === role ? <Dashboard/> : null}
{'ROLE_BENEFICIARY' === role ? <DashboardBenefeciario/> : null}
</DefaultLayout>}/>
<Route path="/bandi" element={<DefaultLayout>
{'ROLE_SUPER_ADMIN' === role ? <Bandi/> : null}
</DefaultLayout>}/>
<Route path="/bandi/:id" element={<DefaultLayout>
{'ROLE_SUPER_ADMIN' === role ? <BandoEdit/> : null}
</DefaultLayout>}/>
<Route path="/bandi/:id/preview" element={<DefaultLayout>
{'ROLE_SUPER_ADMIN' === role ? <BandoView/> : null}
</DefaultLayout>}/>
<Route path="/bandi/:id/preview-evaluation" element={<DefaultLayout>
{'ROLE_SUPER_ADMIN' === role ? <BandoView/> : null}
</DefaultLayout>}/>
<Route path="/bandi/:id/forms" element={<DefaultLayout>
{'ROLE_SUPER_ADMIN' === role ? <BandoForms/> : null}
</DefaultLayout>}/>
<Route path="/bandi/:id/forms/:formId" element={<DefaultLayout>
{'ROLE_SUPER_ADMIN' === role ? <BandoFormsEdit/> : null}
</DefaultLayout>}/>
<Route path="/bandi/:id/forms/:formId/preview" element={<DefaultLayout>
{'ROLE_SUPER_ADMIN' === role ? <BandoFormsPreview/> : null}
</DefaultLayout>}/>
</Route>
<Route exact path="/login" element={<Login/>}/>
{/*<Route exact path="/forgot-password" element={<ForgotPassword/>}/>*/}
<Route path="*" element={<PageNotFound/>}/>
</Routes>);
</Routes>)
};
export default routes;

4
src/service/authentication-service.js
View File

@@ -76,4 +76,8 @@ export default class AuthenticationService {
static changePassword = (request, callback, errCallback) => {
NetworkService.unauthorizedPatch(`${API_BASE_URL}/user/reset_password`, request, callback, errCallback);
}
static me = (callback, errCallback) => {
NetworkService.get(`${API_BASE_URL}/user/me`, callback, errCallback);
};
}

34
src/service/bando-service.js Normal file
View File

@@ -0,0 +1,34 @@
import { NetworkService } from './network-service';
const API_BASE_URL = process.env.REACT_APP_API_EXECUTION_ADDRESS;
export default class BandoService {
static getBandi = (callback, errCallback) => {
NetworkService.get(`${API_BASE_URL}/call`, callback, errCallback);
};
static getBando = (id, callback, errCallback) => {
NetworkService.get(`${API_BASE_URL}/call/${id}`, callback, errCallback);
};
static validateBando = (id, callback, errCallback) => {
NetworkService.post(`${API_BASE_URL}/call/validate/${id}`, {}, callback, errCallback);
};
static createBando = (body, callback, errCallback, queryParams) => {
NetworkService.post(`${API_BASE_URL}/call/step1`, body, callback, errCallback, queryParams);
};
static updateBandoStep1 = (id, body, callback, errCallback) => {
NetworkService.put(`${API_BASE_URL}/call/step1/${id}`, body, callback, errCallback);
};
static updateBandoStep2 = (id, body, callback, errCallback) => {
NetworkService.put(`${API_BASE_URL}/call/step2/${id}`, body, callback, errCallback);
};
static updateBandoStatus = (id, callback, errCallback, queryParams) => {
NetworkService.put(`${API_BASE_URL}/call/${id}/status`, {}, callback, errCallback, queryParams);
};
}

4
src/service/file-upload-service.js
View File

@@ -4,8 +4,8 @@ const API_BASE_URL = process.env.REACT_APP_API_EXECUTION_ADDRESS;
export default class FileUploadService {
static uploadFile = (body, callback, errCallback, queryParams) => {
NetworkService.postMultiPart(`${API_BASE_URL}/document/uploadFile`, body, callback, errCallback, queryParams);
static uploadFile = (id, body, callback, errCallback, queryParams) => {
NetworkService.postMultiPart(`${API_BASE_URL}/document/uploadFile/call/${id}`, body, callback, errCallback, queryParams);
};
static deleteFile = (body, callback, errCallback, queryParams) => {

26
src/service/forms-service.js Normal file
View File

@@ -0,0 +1,26 @@
import { NetworkService } from './network-service';
const API_BASE_URL = process.env.REACT_APP_API_EXECUTION_ADDRESS;
export default class FormsService {
static getElementItems = (callback, errCallback) => {
NetworkService.get(`${API_BASE_URL}/formField`, callback, errCallback);
};
static getFormsForCall = (id, callback, errCallback) => {
NetworkService.get(`${API_BASE_URL}/form/call/${id}`, callback, errCallback);
};
static createFormForCall = (id, body, callback, errCallback) => {
NetworkService.post(`${API_BASE_URL}/form/call/${id}`, body, callback, errCallback);
};
static updateForm = (id, body, callback, errCallback) => {
NetworkService.put(`${API_BASE_URL}/form/${id}`, body, callback, errCallback);
};
static getFormById = (id, callback, errCallback) => {
NetworkService.get(`${API_BASE_URL}/form/${id}`, callback, errCallback);
};
}

10
src/service/lookupdata-service.js Normal file
View File

@@ -0,0 +1,10 @@
import { NetworkService } from './network-service';
const API_BASE_URL = process.env.REACT_APP_API_EXECUTION_ADDRESS;
export default class LookupdataService {
static getItems = (callback, errCallback, queryParams) => {
NetworkService.get(`${API_BASE_URL}/lookUpData/type`, callback, errCallback, queryParams);
};
}

4
src/store/initial.js
View File

@@ -4,10 +4,8 @@ const initialStore = {
// user
userData: {},
token: '',
// bando form
bandoFormErrors: {},
// form builder
formId: '',
formId: 0,
formLabel: '',
formElements: [],
elementItems: [],

8
src/store/selectors.js
View File

@@ -2,6 +2,14 @@ const selectors = (state, get, api) => ({
getToken: () => {
return get.token();
},
getRole: () => {
const userData = get.userData();
return userData.role ? userData.role.roleType : '';
},
getPermissions: () => {
const userData = get.userData();
return userData.role ? userData.role.permissions : [];
},
})
export default selectors;

2
src/store/zustand-x-opts.js
View File

@@ -5,7 +5,7 @@ const zustandXOpts = {
persist: {
enabled: true,
partialize: (state) => ({
userData: state.userData,
//userData: state.userData,
token: state.token
}),
}