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

- added login page;

Browse Source 
- added file upload;
- added faq item edit modal;
This commit is contained in:
Vitalii Kiiko
2024-08-23 16:55:19 +02:00
parent 0a21444ee4
commit 5095ed7365
50 changed files with 1540 additions and 576 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/assets/scss/components/appForm.scss
View File

@@ -7,6 +7,7 @@
display: flex;
flex-direction: column;
gap: 14px;
padding: 5px 0;
label {
font-size: 14px;
@@ -40,14 +41,32 @@
}
}
}
.appForm__fileUploadItem {
display: flex;
justify-content: space-between;
}
.appForm__fileUploadItemName {
}
.appForm__row {
display: flex;
gap: 7px;
align-items: center;
}
.appForm__oneCol {
display: flex;
flex-direction: column;
gap: 7px;
label {
font-weight: 400;
}
}
.appForm__twoCols {
display: flex;
gap: 1rem;
@@ -99,4 +118,12 @@
.appForm__faqTabItem {
display: flex;
gap: 0.5rem;
align-items: center;
.p-togglebutton[data-p-highlight="true"] {
.p-button:not(.p-button-danger) {
background: var(--menuitem-active-background);
border: 1px solid var(--menuitem-active-background);
}
}
}

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

@@ -1,6 +1,7 @@
.appPage {
display: flex;
flex-direction: column;
flex-grow: 2;
h1 {
color: var(--primary-color);
@@ -26,6 +27,10 @@
}
}
.appPageSection__table {
width: 100%;
}
.appTableHeader {
display: flex;
justify-content: space-between;
@@ -65,12 +70,5 @@
.appPageSection__actions {
display: flex;
gap: 24px;
margin-bottom: 24px;
}
.mb-2 {
margin-bottom: 4px;
}
.mb-8 {
margin-bottom: 16px;
padding: 24px 0 48px;
}

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

@@ -32,6 +32,9 @@
.formBuilder__element {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 10px 20px;
border: 1px dashed var(--button-secondary-borderColor);
font-size: 14px;
@@ -61,14 +64,21 @@
list-style: none;
padding: 0;
margin: 0;
}
.formBuilder__elementItem {
display: flex;
padding: 10px 20px;
border: 1px dashed var(--button-secondary-borderColor);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 21px;
li {
display: flex;
padding: 10px 20px;
border: 1px dashed var(--button-secondary-borderColor);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 21px;
&:hover {
cursor: grab;
}
}
.formBuilder__elementSettings {
width: 40rem;
}

89
src/assets/scss/components/layout.scss Normal file
View File

@@ -0,0 +1,89 @@
html {
min-height: 100%;
display: flex;
flex-direction: column;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
flex-grow: 1;
margin: 0;
font-family: 'Montserrat';
p, span, input, label:not(.p-error), textarea, a, li, h1, h2, h3, h4, h5, h6, div, th, td, button {
font-family: 'Montserrat';
color: var(--global-textColor);
}
}
#root, .wrapper {
min-height: 100%;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.inner {
display: flex;
height: 100%;
min-height: 0;
flex-grow: 1;
> aside {
flex: 0 0 320px;
border-right: 1px solid var(--menu-borderColor);
ul {
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0;
li a, li button {
display: flex;
padding: 10.5px 17.5px;
align-items: center;
gap: 7px;
width: 100%;
border: 0;
border-bottom: 1px solid var(--menu-borderColor);
color: var(--menuitem-color);
background-color: transparent;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 100%;
text-decoration: none;
&:hover {
cursor: pointer;
}
i {
color: var(--text-color-secondary);
}
&.active {
color: var(--menuitem-active-color);
background-color: var(--menuitem-active-background);
i {
color: white;
}
span {
color: var(--menuitem-active-color);
}
}
}
}
}
> main {
flex: 1 1 auto;
box-sizing: border-box;
padding: 0 24px 50px;
}
}

14
src/assets/scss/components/login.scss Normal file
View File

@@ -0,0 +1,14 @@
.appPageLogin {
display: flex;
justify-content: center;
align-items: center;
}
.appPageLogin__wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 540px;
padding: 24px;
}

59
src/assets/scss/components/misc.scss Normal file
View File

@@ -0,0 +1,59 @@
.p-steps {
.p-highlight {
span.p-steps-number {
color: var(--menuitem-active-color);
}
}
}
.p-badge {
color: var(--menuitem-active-color);
}
.p-button:not(.p-button-outlined, .p-button-secondary),
.p-button:not(.p-button-outlined, .p-button-secondary) span {
color: var(--menuitem-active-color);
}
.p-fileupload-row {
.p-button-danger {
background-color: #f44336;
opacity: 0.8;
&:hover {
opacity: 1;
}
}
}
.p-tag {
.p-tag-value {
color: var(--menuitem-active-color);
}
}
.p-paginator-page {
color: var(--menuitem-active-color);
}
.p-datepicker-buttonbar .p-button {
color: var(--global-textColor);
}
.p-message.p-message-error {
background: #ffdbdb;
border-left: 5px solid #C2504D;
svg {
path {
fill: var(--global-textColor);
}
}
}
.mb-2 {
margin-bottom: 4px;
}
.mb-8 {
margin-bottom: 16px;
}
.mr-8 {
margin-right: 16px;
}

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

@@ -5,6 +5,7 @@
align-items: center;
grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
gap: 24px;
width: 100%;
}
.statsBigBadges__gridItem {

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

@@ -12,6 +12,7 @@
--card-borderColor-color: #EEC137;
--button-secondary-borderColor: #C79807;
--button-secondary-background: var(--menu-borderColor);
--global-textColor: #4B5563;
--card-full-background-color-2: #EEC137;
--card-full-background-color-3: #FA8E42;
@@ -19,95 +20,13 @@
--card-full-background-color-1: #3B7C43;
}
html {
min-height: 100%;
display: flex;
flex-direction: column;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
flex-grow: 1;
margin: 0;
font-family: 'Montserrat';
p, span, input, label, textarea, a, li, h1, h2, h3, h4, h5, h6, div, th, td, button {
font-family: 'Montserrat';
}
}
#root, .wrapper {
min-height: 100%;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.inner {
display: flex;
height: 100%;
min-height: 0;
flex-grow: 1;
> aside {
flex: 0 0 320px;
border-right: 1px solid var(--menu-borderColor);
ul {
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0;
li a, li button {
display: flex;
padding: 10.5px 17.5px;
align-items: center;
gap: 7px;
width: 100%;
border: 0;
border-bottom: 1px solid var(--menu-borderColor);
color: var(--menuitem-color);
background-color: transparent;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 100%;
text-decoration: none;
&:hover {
cursor: pointer;
}
i {
color: var(--text-color-secondary);
}
&.active {
color: var(--menuitem-active-color);
background-color: var(--menuitem-active-background);
i {
color: white;
}
}
}
}
}
> main {
flex: 1 1 auto;
box-sizing: border-box;
padding: 0 24px 50px;
}
}
@import "./components/layout.scss";
@import "./components/topBar.scss";
@import "./components/appPage.scss";
@import "./components/statsBigBadges.scss";
@import "./components/bandoStatusTag.scss";
@import "./components/appForm.scss";
@import "./components/pageBando.scss";
@import "./components/formBuilder.scss";
@import "./components/formBuilder.scss";
@import "./components/misc.scss";
@import "./components/login.scss";

4
src/components/FormField/components/Datepicker/index.js
View File

@@ -9,7 +9,7 @@ const Datepicker = ({
label,
control,
errors,
defaultValue,
defaultValue = [],
config = {},
infoText = null,
minDate = null,
@@ -27,7 +27,7 @@ const Datepicker = ({
rules={config}
render={({ field, fieldState }) => (
<Calendar id={field.name}
value={field.value}
value={field.value ?? []}
onChange={(e) => field.onChange(e.value)}
dateFormat="dd/mm/yy"
mask="99/99/9999"

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

@@ -11,13 +11,15 @@ const DatepickerRange = ({
label,
control,
errors,
defaultValue,
defaultValue = [],
config = {},
infoText = null,
minDate = null,
maxDate = null
}) => {
const datesDefaultValue = !isNil(defaultValue) && !isEmpty(defaultValue) && defaultValue.length ? defaultValue.map(v => new Date(v)) : [];
const datesDefaultValue = !isNil(defaultValue) && defaultValue.length
? defaultValue.map(v => new Date(v))
: [];
return (
<>
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
@@ -31,12 +33,8 @@ const DatepickerRange = ({
render={({ field, fieldState }) => (
<Calendar id={field.name}
value={field.value}
onChange={(e) => {
const formattedValues = e.value.map(d => d ? d.toISOString() : d);
console.log('formattedValues', formattedValues);
field.onChange(formattedValues)
}}
dateFormat="dd/mm/yy"
onChange={field.onChange}
mask="99/99/9999"
showIcon
minDate={minDate}
@@ -44,6 +42,7 @@ const DatepickerRange = ({
selectionMode="range"
readOnlyInput
hideOnRangeSelection
showButtonBar
className={classNames({ 'p-invalid': fieldState.invalid })}/>
)}/>
{infoText ? <small>{infoText}</small> : null}

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

@@ -1,50 +1,133 @@
import React from 'react';
import React, { useEffect, useState, useRef } from 'react';
import { classNames } from 'primereact/utils';
import { Controller } from 'react-hook-form';
import { __ } from '@wordpress/i18n';
import FileUploadService from '../../../../service/file-upload-service';
import { FileUpload } from 'primereact/fileupload';
import { Tag } from 'primereact/tag';
import { Button } from 'primereact/button';
const Fileupload = ({
fieldName,
setDataFn,
label,
control,
errors,
defaultValue,
register,
defaultValue = [],
config = {},
infoText = null,
accept = 'image/*',
api = '/api/upload',
doctype = 'images',
emptyText = __('Trascina qui il tuo file', 'gepafin'),
chooseLabel = __('Aggiungi immagine', 'gepafin'),
multiple = false
multiple = false
}) => {
const [stateFieldData, setStateFieldData] = useState([]);
const inputRef = useRef();
const customBase64Uploader = (event) => {
const formData = new FormData()
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()]]);
};
const callback = (data) => {
console.log('data', data);
if (data.status === 'SUCCESS') {
setStateFieldData(data.data);
const files = inputRef.current.getFiles();
inputRef.current.setUploadedFiles(files);
inputRef.current.setFiles([]);
}
}
const errorCallback = (err) => {
console.log('err', err);
}
const itemTemplate = (file) => {
return (
<div className="appForm__fileUploadItem">
<span className="appForm__fileUploadItemName">
{file.name}
</span>
{file.id ? <Tag value={__('Caricato', 'gepafin')} severity="success"></Tag> : null}
{!file.id ? <Tag value={__('In attesa', 'gepafin')} severity="warning"></Tag> : null}
<Button icon="pi pi-times" severity="danger"
aria-label={__('Anulla', 'gepafin')}
onClick={() => onTemplateRemove(file)}/>
</div>
);
};
const onTemplateRemove = (file) => {
if (file.id) {
FileUploadService.deleteFile(
{},
(data) => dCallback(data, file.id),
dErrorCallback,
[['id', file.id]]
);
} else {
const files = inputRef.current.getFiles()
const newFiles = files.filter(o => o.lastModified !== file.lastModified && o.name !== file.name);
inputRef.current.setFiles(newFiles);
}
}
const dCallback = (data, id) => {
if (data.status === 'SUCCESS') {
setStateFieldData(prevState => {
const newFiles = prevState.filter(o => o.id !== id);
inputRef.current.setUploadedFiles(newFiles);
console.log('newFiles', newFiles);
return newFiles;
});
}
}
const dErrorCallback = (err) => {
console.log('err', err);
}
useEffect(() => {
setStateFieldData(defaultValue);
register(fieldName, config)
}, []);
useEffect(() => {
inputRef.current.setUploadedFiles(stateFieldData);
setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
}, [stateFieldData])
return (
<>
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
{label}{config.required ? '*' : null}
</label>
<Controller
<FileUpload
ref={inputRef}
id={fieldName}
name={fieldName}
control={control}
defaultValue={defaultValue}
rules={config}
render={({ field, fieldState }) => (
<FileUpload
id={field.name}
name={`${field.name}[]`}
url={api}
multiple={multiple}
accept={accept}
maxFileSize={1000000}
emptyTemplate={<p>{emptyText}</p>}
chooseLabel={chooseLabel}
cancelLabel={__('Cancella', 'gepafin')}
uploadLabel={__('Carica', 'gepafin')}
className={classNames({ 'p-invalid': fieldState.invalid })}/>
)}/>
url={'/document/uploadFile'}
multiple={multiple}
accept={accept}
maxFileSize={1000000}
emptyTemplate={<p>{emptyText}</p>}
chooseLabel={chooseLabel}
cancelLabel={__('Cancella', 'gepafin')}
uploadLabel={__('Carica', 'gepafin')}
className={classNames({ 'p-invalid': errors[fieldName] })}
itemTemplate={itemTemplate}
customUpload
uploadHandler={customBase64Uploader}/>
{infoText ? <small>{infoText}</small> : null}
{defaultValue ? <p>Uploaded:</p> : null}
{defaultValue}
</>)
}

49
src/components/FormField/components/Switch/index.js Normal file
View File

@@ -0,0 +1,49 @@
import React from 'react';
import { classNames } from 'primereact/utils';
import { Controller } from 'react-hook-form';
import { isNil, isEmpty } from 'ramda';
// components
import { InputSwitch } from 'primereact/inputswitch';
const Switch = ({
fieldName,
label,
control,
errors,
defaultValue,
config = {},
infoText = null,
onLabel = '',
offLabel = ''
}) => {
const properValue = !isNil(defaultValue) && !isEmpty(defaultValue) && defaultValue !== false;
const input = <Controller
name={fieldName}
control={control}
defaultValue={properValue}
rules={config}
render={({ field, fieldState }) => (
<InputSwitch
checked={field.value}
onChange={(e) => field.onChange(e.value)}
className={classNames({ 'p-invalid': fieldState.invalid })}/>
)}/>
return (
<>
<div className="appForm__row">
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] }, 'mr-8')}>
{label}{config.required ? '*' : null}
</label>
<div className="appForm__row">
{offLabel ? <span>{offLabel}</span> : null}
{input}
{onLabel ? <span>{onLabel}</span> : null}
</div>
</div>
{infoText ? <small>{infoText}</small> : null}
</>)
}
export default Switch;

6
src/components/FormField/components/TextInput/index.js
View File

@@ -12,7 +12,9 @@ const TextInput = ({
config = {},
infoText = null,
inputgroup = false,
icon = null
icon = null,
placeholder = '',
inputtype = 'text'
}) => {
const input = <Controller
name={fieldName}
@@ -22,6 +24,8 @@ const TextInput = ({
render={({ field, fieldState }) => (
<InputText id={field.name}
{...field}
type={inputtype}
placeholder={placeholder}
className={classNames({ 'p-invalid': fieldState.invalid })}/>
)}/>
return (

4
src/components/FormField/index.js
View File

@@ -9,6 +9,7 @@ import Datepicker from './components/Datepicker';
import DatepickerRange from './components/DatepickerRange';
import Fileupload from './components/Fileupload';
import NumberInput from './components/NumberInput';
import Switch from './components/Switch';
const FormField = (props) => {
const fields = {
@@ -17,7 +18,8 @@ const FormField = (props) => {
datepicker: Datepicker,
datepickerrange: DatepickerRange,
fileupload: Fileupload,
numberinput: NumberInput
numberinput: NumberInput,
switch: Switch
}
const Comp = !isNil(fields[props.type]) ? fields[props.type] : null;

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

@@ -1,6 +1,9 @@
import React, { useRef, useEffect, useState } from 'react';
import { classNames } from 'primereact/utils';
import { __ } from '@wordpress/i18n';
import { isEmpty } from 'ramda';
// components
import { InputText } from 'primereact/inputtext';
import { Button } from 'primereact/button';
import { Menu } from 'primereact/menu';
@@ -14,7 +17,8 @@ const FormFieldRepeater = ({
errors,
register,
label,
infoText
infoText,
config = {}
}) => {
const forMenu = useRef(null);
const [stateFieldData, setStateFieldData] = useState([]);
@@ -23,14 +27,14 @@ const FormFieldRepeater = ({
type: 'existing',
label: __('Esistente', 'gepafin'),
command: (data) => {
setStateFieldData([...stateFieldData, {id: null, value: '', status: data.item.type}]);
setStateFieldData([...stateFieldData, { id: null, value: '', status: data.item.type }]);
}
},
{
type: 'new',
label: __('Nuovo', 'gepafin'),
command: (data) => {
setStateFieldData([...stateFieldData, {id: null, value: '', status: data.item.type}]);
setStateFieldData([...stateFieldData, { id: null, value: '', status: data.item.type }]);
}
}
]
@@ -76,13 +80,13 @@ const FormFieldRepeater = ({
useEffect(() => {
const storeFieldData = data[fieldName] ?? [];
const newData = storeFieldData.map(o => ({...o, status: o.id ? 'existing' : 'new'}))
const newData = storeFieldData.map(o => ({ ...o, status: o.id ? 'existing' : 'new' }));
setStateFieldData(newData);
register(fieldName)
register(fieldName, config);
}, [])
useEffect(() => {
setDataFn(fieldName, [...stateFieldData]);
setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
}, [stateFieldData])
return (

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

@@ -18,7 +18,8 @@ const FormFieldRepeaterCriteria = ({
errors,
register,
label,
infoText
infoText,
config = {}
}) => {
const forMenu = useRef(null);
const [stateFieldData, setStateFieldData] = useState([]);
@@ -72,6 +73,7 @@ const FormFieldRepeaterCriteria = ({
const onThresholdChange = (value) => {
setThreshold(value);
setDataFn('threshold', value, { shouldValidate: true });
}
const properField = (item, i) => {
@@ -92,16 +94,19 @@ const FormFieldRepeaterCriteria = ({
const newData = storeFieldData.map(o => ({ ...o, status: o.id ? 'existing' : 'new' }))
setStateFieldData(newData);
setThreshold(data['threshold'])
register(fieldName)
register(fieldName, config)
register('threshold', {
required: __('È obbligatorio', 'gepafin')
})
}, [])
useEffect(() => {
setDataFn(fieldName, [...stateFieldData]);
setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
}, [stateFieldData])
return (
<div className={classNames(['appForm__field', 'formfieldrepeater'])}>
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] || errors['threshold'] })}>
{label}
</label>
<div className="appForm__oneCol">

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

@@ -1,11 +1,16 @@
import React, { useRef, useEffect, useState } from 'react';
import React, { useEffect, useState } from 'react';
import { classNames } from 'primereact/utils';
import { __ } from '@wordpress/i18n';
import { InputText } from 'primereact/inputtext';
import { isEmpty } from 'ramda';
// components
import { Button } from 'primereact/button';
import { Dropdown } from 'primereact/dropdown';
import { Accordion, AccordionTab } from 'primereact/accordion';
import { ToggleButton } from 'primereact/togglebutton';
import { Dialog } from 'primereact/dialog';
import { InputText } from 'primereact/inputtext';
import { InputTextarea } from 'primereact/inputtextarea';
const FormFieldRepeaterFaq = ({
data,
@@ -15,17 +20,24 @@ const FormFieldRepeaterFaq = ({
errors,
register,
label,
infoText
config = {},
setError,
clearErrors
}) => {
const [stateFieldData, setStateFieldData] = useState([]);
const [question, setQuestion] = useState('');
const [answer, setAnswer] = useState('');
const [editDataIndex, setEditDataIndex] = useState(null);
const [isVisibleEditDialog, setIsVisibleEditDialog] = useState(false);
const removeItem = (index) => {
const newData = stateFieldData.toSpliced(index, 1);
setStateFieldData(newData);
}
const selectItem = () => {
setStateFieldData([...stateFieldData, { id: 0, status: 'new', question: '', answer: '', visible: true }]);
const selectItem = (e) => {
const chosen = {...e.value};
setStateFieldData([...stateFieldData, chosen]);
}
const onInputChange = (e, index) => {
@@ -40,7 +52,8 @@ const FormFieldRepeaterFaq = ({
}
const addNewItem = () => {
const newItem = { id: 0, status: 'new', question: '', answer: '', visible: true };
setStateFieldData([...stateFieldData, newItem]);
}
const setChecked = (e, index) => {
@@ -56,7 +69,53 @@ const FormFieldRepeaterFaq = ({
const editItem = (e, index) => {
e.stopPropagation();
console.log('editItem')
setQuestion(stateFieldData[index].question);
setAnswer(stateFieldData[index].answer);
setEditDataIndex(index);
setIsVisibleEditDialog(true);
}
const hideEditDialog = () => {
setIsVisibleEditDialog(false);
setQuestion('');
setAnswer('');
setEditDataIndex(null);
}
const onChangeEditItem = (value, key) => {
if (key === 'question') {
setQuestion(value);
} else {
setAnswer(value)
}
}
const saveEditDialog = () => {
const newData = stateFieldData.map((o, i) => {
if (i === editDataIndex) {
o.question = question;
o.answer = answer;
return o
} else {
return o;
}
});
setStateFieldData(newData);
setIsVisibleEditDialog(false);
setQuestion('');
setAnswer('');
setEditDataIndex(null);
}
const headerEditDialog = () => {
return <span>{__('Aggiungi/modifica FAQ', 'gepafin')}</span>
}
const footerEditDialog = () => {
return <div>
<Button type="button" label={__('Anulla', 'gepafin')} onClick={hideEditDialog} outlined />
<Button type="button" label={__('Salva', 'gepafin')} onClick={saveEditDialog} />
</div>
}
const usedExistingValues = stateFieldData
@@ -67,11 +126,11 @@ const FormFieldRepeaterFaq = ({
const storeFieldData = data[fieldName] ?? [];
const newData = storeFieldData.map(o => ({ ...o, status: o.id ? 'existing' : 'new' }))
setStateFieldData(newData);
register(fieldName)
register(fieldName, config)
}, [])
useEffect(() => {
setDataFn(fieldName, [...stateFieldData]);
setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
}, [stateFieldData])
return (
@@ -102,7 +161,8 @@ const FormFieldRepeaterFaq = ({
</div>
<div className="appForm__faqTabItem">
<Button icon="pi pi-pencil" severity="success"
aria-label="Edit" onClick={(e) => editItem(e, i)}/>
aria-label="Edit"
onClick={(e) => editItem(e, i)}/>
<Button icon="pi pi-times" severity="danger"
aria-label="Cancel"
onClick={() => removeItem(i)}/>
@@ -115,6 +175,21 @@ const FormFieldRepeaterFaq = ({
</p>
</AccordionTab>)}
</Accordion>
<Dialog
visible={isVisibleEditDialog}
modal header={headerEditDialog}
footer={footerEditDialog}
style={{ maxWidth: '50rem' }}
onHide={hideEditDialog}>
<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} />
</div>
</Dialog>
</div>
)
}

17
src/components/ProtectedRoute/index.js
View File

@@ -1,14 +1,17 @@
import React from 'react';
import {
//Navigate,
Outlet } from 'react-router-dom';
import { Navigate, Outlet } from 'react-router-dom';
// store
import { useStore } from '../../store';
// tools
//import AuthenticationService from '../../service/authentication-service';
import AuthenticationService from '../../service/authentication-service';
const ProtectedRoute = () => {
// we need this to track existance of the token
const token = useStore().main.token();
/*if (!AuthenticationService.wasLoggedIn()) {
if (!AuthenticationService.wasLoggedIn()) {
return (<Navigate to={'/login'} replace/>);
}
@@ -18,10 +21,10 @@ const ProtectedRoute = () => {
if (!AuthenticationService.isLoggedIn()) {
return (<Navigate to={'/login?redirectReason=auth_required'} replace/>);
}*/
}
/*if (window.location.pathname === '/') {
return (<Navigate to={'/dashboard'} replace/>);
return (<Navigate to={'/'} replace/>);
}*/
return <Outlet/>;

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

@@ -1,13 +1,14 @@
import React, { useRef } from 'react';
import { __ } from '@wordpress/i18n';
// store
import { storeSet } from '../../store';
// components
import { Menu } from 'primereact/menu';
import { Avatar } from 'primereact/avatar';
import { Toast } from 'primereact/toast';
const TopBarProfileMenu = ({ menuLeftRef }) => {
const toast = useRef();
let items = [
{
@@ -36,13 +37,12 @@ const TopBarProfileMenu = ({ menuLeftRef }) => {
label: __('Logout', 'gepafin'),
icon: 'pi pi-sign-out',
command: () => {
console.log('logout')
storeSet.main.doLogout();
}
}
];
return <>
<Toast ref={toast}/>
<Menu model={items} popup ref={menuLeftRef} id="topBar_profileMenu" className="topBar__menuProfile"/>
</>
}

34
src/components/UnsavedChangesDetector/index.js Normal file
View File

@@ -0,0 +1,34 @@
import { useEffect, useState, useCallback } from 'react';
import { __ } from '@wordpress/i18n';
import equal from 'fast-deep-equal';
// tools
const UnsavedChangesDetector = ({ initialData, getValuesFn }) => {
const [initial] = useState(initialData);
const warnIfUnsavedChanges = useCallback((event) => {
const updatedData = getValuesFn()
const isEqual = equal(initial, updatedData);
if (!isEqual) {
event.returnValue = __('You have unsaved changes. If you proceed, they will be lost.', 'gepafin');
}
return event.returnValue;
}, [initial])
useEffect(() => {
window.addEventListener('beforeunload', (e) => {
warnIfUnsavedChanges(e);
});
return () => {
window.removeEventListener('beforeunload', (e) => {
warnIfUnsavedChanges(e);
});
}
}, []);
}
export default UnsavedChangesDetector;

8
src/helpers/uniqid.js Normal file
View File

@@ -0,0 +1,8 @@
/**
* Generate unique id
*
* @returns {string}
*/
const uniqid = (l = 'a') => l + Math.random().toString(16).substring(2, 11);
export default uniqid;

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

@@ -148,7 +148,7 @@ const AllBandiTable = () => {
const header = renderHeader();
return(
<div className="latestBandiTable">
<div className="appPageSection__table">
<DataTable value={items} paginator showGridlines rows={10} loading={loading} dataKey="id"
filters={filters}
globalFilterFields={['name', 'status']}

32
src/pages/BandoEdit/components/BandoEditFormActions/index.js Normal file
View File

@@ -0,0 +1,32 @@
import React from 'react';
import { __ } from '@wordpress/i18n';
// components
import { Button } from 'primereact/button';
const BandoEditFormActions = ({ openPreview, openPreviewEvaluation }) => {
return (
<div className="appPageSection">
<div className="appPageSection__actions">
<Button
type="submit"
label={__('Salva bozza', 'gepafin')} icon="pi pi-save" iconPos="right"/>
<Button
type="button"
disabled={true}
outlined
onClick={openPreview}
label={__('Anteprima beneficiario', 'gepafin')} icon="pi pi-eye" iconPos="right"/>
<Button
type="button"
disabled={true}
outlined
onClick={openPreviewEvaluation}
label={__('Anteprima pre-istruttoria', 'gepafin')} icon="pi pi-eye"
iconPos="right"/>
</div>
</div>
)
}
export default BandoEditFormActions;

209
src/pages/BandoEdit/components/BandoEditFormStep1/index.js Normal file
View File

@@ -0,0 +1,209 @@
import React, { forwardRef, useImperativeHandle, useEffect } from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { isEmpty, isNil, is } from 'ramda';
// components
import FormField from '../../../../components/FormField';
import FormFieldRepeater from '../../../../components/FormFieldRepeater';
import FormFieldRepeaterFaq from '../../../../components/FormFieldRepeaterFaq';
import BandoEditFormActions from '../BandoEditFormActions';
import UnsavedChangesDetector from '../../../../components/UnsavedChangesDetector';
const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors }, ref) {
const navigate = useNavigate();
const {
control,
handleSubmit,
formState: { errors, isValid },
setValue,
register,
trigger,
getValues,
clearErrors
} = useForm({defaultValues: initialData, mode: 'onChange'});
const values = getValues();
let minDateStart = new Date();
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);
};
// 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 openPreview = () => {
navigate('/bandi/preview/11');
}
const openPreviewEvaluation = () => {
navigate('/bandi/preview-evaluation/11');
}
useImperativeHandle(
ref,
() => {
return {
isFormValid: () => {
return isValid;
},
getErrors: () => {
return errors;
}
}
}, [errors, isValid]);
useEffect(() => {
trigger().then(() => clearErrors());
}, []);
return (
<form className="appForm" onSubmit={handleSubmit(onSubmit)}>
<UnsavedChangesDetector initialData={values} getValuesFn={getValues}/>
<FormField
type="switch"
fieldName="confidi"
label={__('Bando Confidi', 'gepafin')}
control={control}
errors={errors}
defaultValue={values['confidi']}
onLabel={__('Si', 'gepafin')}
offLabel={__('No', 'gepafin')}
/>
<FormField
type="textinput"
fieldName="name"
label={__('Titolo del Bando', 'gepafin')}
control={control}
errors={errors}
defaultValue={values['name']}
config={{ required: __('È obbligatorio', 'gepafin') }}
/>
<FormField
type="textarea"
fieldName="descriptionShort"
label={__('Descrizione breve', 'gepafin')}
control={control}
errors={errors}
defaultValue={values['descriptionShort']}
config={{
required: __('È obbligatorio', 'gepafin')
}}
/>
<FormField
type="textarea"
fieldName="descriptionLong"
label={__('Descrizione completa', 'gepafin')}
control={control}
errors={errors}
defaultValue={values['descriptionLong']}
config={{
required: __('È obbligatorio', 'gepafin'),
minLength: 200
}}
infoText={__('Almeno 200 caratteri', 'gepafin')}
/>
<FormFieldRepeater
data={values}
setDataFn={setValue}
fieldName="aimedTo"
options={exampleOfAimedToOptions}
errors={errors}
register={register}
trigger={trigger}
config={{
validate: {
minOneItem: v => !isEmpty(v) || __('Almeno 1 tipo di destinatari', 'gepafin'),
noEmptyValue: v => v
.filter(o => isEmpty(o.value)).length === 0 || __('Non lasciare il valore vuoto', 'gepafin')
}
}}
label={<>{__('A chi si rivolge', 'gepafin')}*
<span>{__('(almeno 1 tipo di destinatari)', 'gepafin')}</span></>}
/>
<FormField
type="textarea"
fieldName="documentationRequested"
label={__('Documentazione richiesta', 'gepafin')}
control={control}
errors={errors}
defaultValue={values['documentationRequested']}
config={{
required: __('È obbligatorio', 'gepafin')
}}
/>
<FormField
type="datepickerrange"
fieldName="dates"
label={__('Dati di pubblicazione', 'gepafin')}
control={control}
errors={errors}
defaultValue={values['dates']}
config={{ required: __('È obbligatorio', 'gepafin') }}
minDate={minDateStart}
/>
<div className="appForm__twoCols">
<FormField
type="numberinput"
fieldName="amount"
label={__('Dotazione del Bando', 'gepafin')}
control={control}
errors={errors}
defaultValue={values['amount']}
config={{ required: __('È obbligatorio', 'gepafin') }}
inputgroup={true}
icon="€"
/>
<FormField
type="numberinput"
fieldName="amountMax"
label={__('Importo massimo per Progetto', 'gepafin')}
control={control}
errors={errors}
defaultValue={values['amountMax']}
config={{ required: __('È obbligatorio', 'gepafin') }}
inputgroup={true}
icon="€"
/>
</div>
<FormFieldRepeaterFaq
data={values}
setDataFn={setValue}
fieldName="faq"
options={exampleOfFaqOptions}
errors={errors}
register={register}
trigger={trigger}
config={{
validate: {
noEmptyValue: v => v
.filter(o => isEmpty(o.question) || isEmpty(o.answer)).length === 0 || __('Non lasciare il valore vuoto', 'gepafin')
}
}}
label={__('FAQ', 'gepafin')}/>
<BandoEditFormActions
openPreview={openPreview}
openPreviewEvaluation={openPreviewEvaluation}/>
</form>
)
})
export default BandoEditFormStep1;

146
src/pages/BandoEdit/components/BandoEditFormStep2/index.js Normal file
View File

@@ -0,0 +1,146 @@
import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { is, isEmpty, isNil } from 'ramda';
// components
import FormField from '../../../../components/FormField';
import FormFieldRepeater from '../../../../components/FormFieldRepeater';
import FormFieldRepeaterCriteria from '../../../../components/FormFieldRepeaterCriteria';
import BandoEditFormActions from '../BandoEditFormActions';
import UnsavedChangesDetector from '../../../../components/UnsavedChangesDetector';
const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors }, ref) {
const navigate = useNavigate();
const {
control,
handleSubmit,
formState: { errors, isValid },
setValue,
register,
trigger,
getValues,
clearErrors
} = useForm({defaultValues: initialData, mode: 'onChange'});
const values = getValues();
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);
};
// 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 openPreview = () => {
navigate('/bandi/preview/11');
}
const openPreviewEvaluation = () => {
navigate('/bandi/preview-evaluation/11');
}
useImperativeHandle(
ref,
() => {
return {
isFormValid: () => {
return isValid;
},
getErrors: () => {
return errors;
}
}
}, []);
useEffect(() => {
trigger().then(() => clearErrors());
}, []);
return (
<form className="appForm" onSubmit={handleSubmit(onSubmit)}>
<UnsavedChangesDetector initialData={initialData} getValuesFn={getValues}/>
<FormFieldRepeaterCriteria
data={values}
setDataFn={setValue}
fieldName="criteria"
options={exampleOfCriteriaOptions}
errors={errors}
register={register}
label={<>{__('Criteri di valutazione', 'gepafin')}*
<span>{__('(almeno 1 criterio di valutazione)', 'gepafin')}</span></>}
config={{
validate: {
minOneItem: v => !isEmpty(v) || __('Almeno 1 criterio di valutazione', 'gepafin'),
noEmptyValue: v => v
.filter(o => isEmpty(o.value) || isEmpty(o.score)).length === 0
|| __('Non lasciare il valore vuoto', 'gepafin')
}
}}/>
<FormField
type="fileupload"
setDataFn={setValue}
fieldName="documentation"
label={__('Documentazione', 'gepafin')}
control={control}
errors={errors}
defaultValue={values['documentation']}
config={{ required: __('È obbligatorio', 'gepafin') }}
accept="application/pdf,application/vnd.ms-excel"
chooseLabel={__('Aggiungi documento', 'gepafin')}
multiple={true}
doctype='document'
register={register}
/>
<FormField
type="fileupload"
setDataFn={setValue}
fieldName="images"
label={__('Immagine del Bando', 'gepafin')}
control={control}
errors={errors}
defaultValue={values['images']}
doctype='images'
register={register}
/>
<FormFieldRepeater
data={values}
setDataFn={setValue}
fieldName="checklist"
options={exampleOfChecklistOptions}
errors={errors}
register={register}
label={<>{__('Checklist valutazione Pre-Istruttoria', 'gepafin')}*
<span>{__('(almeno 1 elemento)', 'gepafin')}</span></>}
config={{
validate: {
minOneItem: v => !isEmpty(v) || __('Almeno 1 elemento', 'gepafin'),
noEmptyValue: v => v
.filter(o => isEmpty(o.value)).length === 0 || __('Non lasciare il valore vuoto', 'gepafin')
}
}}
/>
<button type="button" onClick={() => console.log(getValues())}>Check</button>
<BandoEditFormActions
openPreview={openPreview}
openPreviewEvaluation={openPreviewEvaluation}/>
</form>
)
})
export default BandoEditFormStep2;

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

@@ -1,57 +1,71 @@
import React, { useState, useEffect, useRef } from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate, useParams } from 'react-router-dom';
import { useForm } from 'react-hook-form';
// components
import getBandoLabel from '../../helpers/getBandoLabel';
import { Button } from 'primereact/button';
import { Dropdown } from 'primereact/dropdown';
import FormField from '../../components/FormField';
import FormFieldRepeater from '../../components/FormFieldRepeater';
import { Skeleton } from 'primereact/skeleton';
import FormFieldRepeaterCriteria from '../../components/FormFieldRepeaterCriteria';
import FormFieldRepeaterFaq from '../../components/FormFieldRepeaterFaq';
import { Steps } from 'primereact/steps';
import BandoEditFormStep1 from './components/BandoEditFormStep1';
import BandoEditFormStep2 from './components/BandoEditFormStep2';
import { Messages } from 'primereact/messages';
import { is, isNil } from 'ramda';
const BandoEdit = () => {
const navigate = useNavigate();
const { id } = useParams();
const [activeStep, setActiveStep] = useState(0)
const [data, setData] = useState({});
const [isLoading, setIsLoading] = useState(true);
const [selectedTemplate, setSelectedTemplate] = useState(null);
const [templates, setTemplate] = useState(null);
const {
control,
reset,
handleSubmit,
formState: { errors },
setValue,
register
} = useForm(data);
let minDateStart = new Date();
const formRef = useRef(null);
const stepErrorMsgs = useRef(null);
const onSubmit = formData => console.log(formData);
// temp
const exampleOfAimedToOptions = [{ id: 11, value: 'PMI con sede in Umbria' }];
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 exampleOfFaqOptions = [
{ id: 2, question: 'Question 1?', answer: 'Lorem ipsum dolor' }
];
const exampleOfChecklistOptions = [
{ id: 15, value: 'Innovatività del progetto' }
const stepItems = [
{
label: __('Testi', 'gepafin'),
command: () => {
if (activeStep === 0) {
return false
}
stepErrorMsgs.current.clear();
if (formRef.current.isFormValid()) {
goToStep(0)
} else {
stepErrorMsgs.current.show([
{ sticky: true, severity: 'error', summary: 'Error',
detail: __('Potrai andare su altro step dopo risolvere errori della forma', 'gepafin'),
closable: true }
]);
}
}
},
{
label: __('Gestione', 'gepafin'),
command: () => {
if (activeStep === 1) {
return false
}
stepErrorMsgs.current.clear();
const isFormValid = formRef.current.isFormValid();
console.log('before go to step 1:', isFormValid)
if (isFormValid) {
goToStep(1);
} else {
stepErrorMsgs.current.show([
{ sticky: true, severity: 'error', summary: 'Error',
detail: __('Potrai andare su altro step dopo risolvere errori della forma', 'gepafin'),
closable: true }
]);
}
}
}
];
const openPreview = () => {
navigate('/bandi/preview/11');
}
const openPreviewEvaluation = () => {
navigate('/bandi/preview-evaluation/11');
const goToStep = (step) => {
setActiveStep(step);
}
const openBandoFormManagement = () => {
@@ -62,31 +76,72 @@ const BandoEdit = () => {
const parsed = parseInt(id)
const bandoId = !isNaN(parsed) ? parsed : 0;
setTimeout(() => {
const data = 0 === bandoId
? {
status: 'draft',
name: ''
}
: {
name: 'Bando Innovazione 2024',
description: '',
start_date: '2024-08-08T00:00:00+00:00',
end_date: '2024-08-30T00:00:00+00:00',
submissions: 24,
status: 'publish',
id: 11
}
setData(data);
reset();
const data = 0 === bandoId
? {
status: 'draft',
name: ''
}
: {
"name": "Innovazione digitale 2024",
"confidi": false,
"descriptionShort": "Supporto alle PMI per progetti di digitalizzazione e innovazione tecnologica.",
"descriptionLong": "Il bando \"Innovazione Digitale 2024\" mira a sostenere le PMI nell'adozione di tecnologie digitali innovative. I progetti finanziabili includono l'implementazione di soluzioni di intelligenza artificiale, blockchain, IoT, e altre tecnologie avanzate che possono migliorare la competitività delle imprese.",
"documentationRequested": "Documentazione richiesta*",
"dates": [
"2024-08-27T22:00:00.000Z",
"2024-10-29T23:00:00.000Z"
],
"amount": 0,
"amountMax": 0,
"aimedTo": [
{
"id": 3,
"value": "PMI con sede in Umbria",
"status": "existing"
}
],
"faq": [
{
"id": 2,
"question": "Question 1?",
"answer": "Lorem ipsum dolor",
"visible": true,
"status": "existing"
}
],
"documentation": [
/*{
createdDate: "2024-08-23T12:40:47.700350791",
description: null,
filePath: "https://mementoresources.s3.eu-west-1.amazonaws.com/gepafin/SCR-20240820-kiwn.pdf",
id: 10,
name: "SCR-20240820-kiwn.pdf",
updatedDate: "2024-08-23T12:40:47.700373894"
}*/
],
status: 'draft',
id: 11
}
const templates = [
{ name: 'Il mio template', value: 22 },
{ name: 'Template #11', value: 11 },
];
setTemplate(templates);
setIsLoading(false);
}, 3000);
if (bandoId === 0) {
setData(data);
setIsLoading(false);
} else {
setTimeout(() => {
if (!isNil(data.dates) && data.dates.length) {
data.dates = data.dates.map(v => is(String, v) ? new Date(v) : v);
}
setData(data);
const templates = [
{ name: 'Il mio template', value: 22 },
{ name: 'Template #11', value: 11 },
];
setTemplate(templates);
setIsLoading(false);
}, 2000);
}
}, [id]);
return (
@@ -101,7 +156,7 @@ const BandoEdit = () => {
<div className="appPage__spacer"></div>
{!isLoading
{/*!isLoading
? <div className="pageBando__templateSelection">
<div className="appForm__field">
<label htmlFor="template">
@@ -120,178 +175,23 @@ const BandoEdit = () => {
label={__('Applica', 'gepafin')}
icon="pi pi-check"
iconPos="right"/>
</div> : null}
</div> : null*/}
{!isLoading
? <Steps
model={stepItems}
activeIndex={activeStep}
readOnly={false}/>
: null}
<div className="appPage__spacer"></div>
<Messages ref={stepErrorMsgs} />
{!isLoading
? <>
<form className="appForm" onSubmit={handleSubmit(onSubmit)}>
<FormField
type="textinput"
fieldName="name"
label={__('Titolo del Bando', 'gepafin')}
control={control}
errors={errors}
defaultValue={data['name']}
config={{ required: __('È obbligatorio', 'gepafin') }}
/>
<FormField
type="textarea"
fieldName="descriptionShort"
label={__('Descrizione breve', 'gepafin')}
control={control}
errors={errors}
defaultValue={data['descriptionShort']}
config={{
required: __('È obbligatorio', 'gepafin')
}}
/>
<FormField
type="textarea"
fieldName="descriptionLong"
label={__('Descrizione completa', 'gepafin')}
control={control}
errors={errors}
defaultValue={data['descriptionLong']}
config={{
required: __('È obbligatorio', 'gepafin'),
minLength: 200
}}
infoText={__('Almeno 200 caratteri', 'gepafin')}
/>
<FormFieldRepeater
data={data}
setDataFn={setValue}
fieldName="aimedTo"
options={exampleOfAimedToOptions}
errors={errors}
register={register}
label={<>{__('A chi si rivolge', 'gepafin')}*
<span>{__('(almeno 1 tipo di destinatari)', 'gepafin')}</span></>}
/>
<FormField
type="textarea"
fieldName="documentationRequested"
label={__('Documentazione richiesta', 'gepafin')}
control={control}
errors={errors}
defaultValue={data['documentationRequested']}
config={{
required: __('È obbligatorio', 'gepafin')
}}
/>
<FormField
type="datepickerrange"
fieldName="dates"
label={__('Dati di pubblicazione', 'gepafin')}
control={control}
errors={errors}
defaultValue={data['dates']}
config={{ required: __('È obbligatorio', 'gepafin') }}
minDate={minDateStart}
/>
<div className="appForm__twoCols">
<FormField
type="numberinput"
fieldName="amount"
label={__('Dotazione del Bando', 'gepafin')}
control={control}
errors={errors}
defaultValue={data['amount']}
config={{ required: __('È obbligatorio', 'gepafin') }}
inputgroup={true}
icon="€"
/>
<FormField
type="numberinput"
fieldName="amountMax"
label={__('Importo massimo per Progetto', 'gepafin')}
control={control}
errors={errors}
defaultValue={data['amountMax']}
config={{ required: __('È obbligatorio', 'gepafin') }}
inputgroup={true}
icon="€"
/>
</div>
<FormFieldRepeaterCriteria
data={data}
setDataFn={setValue}
fieldName="criteria"
options={exampleOfCriteriaOptions}
errors={errors}
register={register}
label={<>{__('Criteri di valutazione', 'gepafin')}*
<span>{__('(almeno 1 criterio di valutazione)', 'gepafin')}</span></>}/>
<FormField
type="fileupload"
fieldName="documentation"
label={__('Documentazione', 'gepafin')}
control={control}
errors={errors}
defaultValue={data['documentation']}
config={{ required: __('È obbligatorio', 'gepafin') }}
accept="application/pdf,application/vnd.ms-excel"
chooseLabel={__('Aggiungi documento', 'gepafin')}
multiple={true}
/>
<FormField
type="fileupload"
fieldName="images"
label={__('Immagine del Bando', 'gepafin')}
control={control}
errors={errors}
defaultValue={data['documentation']}
/>
<FormFieldRepeaterFaq
data={data}
setDataFn={setValue}
fieldName="faq"
options={exampleOfFaqOptions}
errors={errors}
register={register}
label={__('FAQ', 'gepafin')}/>
<FormFieldRepeater
data={data}
setDataFn={setValue}
fieldName="checklist"
options={exampleOfChecklistOptions}
errors={errors}
register={register}
label={<>{__('Checklist valutazione Pre-Istruttoria', 'gepafin')}*
<span>{__('(almeno 1 elemento)', 'gepafin')}</span></>}
/>
<div className="appPageSection">
<div className="appPageSection__actions">
<Button
type="submit"
label={__('Salva bozza', 'gepafin')} icon="pi pi-save" iconPos="right"/>
<Button
type="button"
onClick={openPreview}
label={__('Anteprima beneficiario', 'gepafin')} icon="pi pi-eye" iconPos="right"/>
<Button
type="button"
onClick={openPreviewEvaluation}
label={__('Anteprima pre-istruttoria', 'gepafin')} icon="pi pi-eye"
iconPos="right"/>
</div>
</div>
</form>
{activeStep === 0
? <BandoEditFormStep1 initialData={data} ref={formRef}/>
: <BandoEditFormStep2 initialData={data} ref={formRef}/>}
<div className="appPageSection">
<h2>{__('Crea o modifica il Form compilabile dal Beneficiario', 'gepafin')}</h2>

65
src/pages/BandoEditForm/components/BuilderElement/index.js
View File

@@ -1,65 +0,0 @@
import React, { useRef, } from 'react'
import { useDrag, useDrop } from 'react-dnd'
import { ItemTypes } from '../ItemTypes';
const BuilderElement = ({ id, text, index, move }) => {
const ref = useRef(null);
const [{ handlerId }, drop] = useDrop({
accept: ItemTypes.FIELD,
collect(monitor) {
return {
handlerId: monitor.getHandlerId(),
}
},
hover(item, monitor) {
if (!ref.current) {
return
}
const dragIndex = item.index
const hoverIndex = index
if (dragIndex === hoverIndex) {
return
}
const hoverBoundingRect = ref.current?.getBoundingClientRect()
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
const clientOffset = monitor.getClientOffset()
const hoverClientY = clientOffset.y - hoverBoundingRect.top
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
return
}
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
return
}
move(dragIndex, hoverIndex)
item.index = hoverIndex
},
});
const [{ isDragging }, drag] = useDrag({
type: ItemTypes.FIELD,
item: () => {
return { id, index }
},
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}),
});
const opacity = isDragging ? 0 : 1;
drag(drop(ref));
return (
<div ref={ref} className="formBuilder__element" style={{ opacity }} data-handler-id={handlerId}>
{text}
</div>
)
}
export default BuilderElement;

73
src/pages/BandoEditForm/components/FormBuilder/index.js
View File

@@ -1,73 +0,0 @@
import React, { useCallback, useState } from 'react'
import { __ } from '@wordpress/i18n';
// components
import BuilderElement from '../BuilderElement';
const FormBuilder = () => {
const [fields, setFields] = useState([
{
id: 1,
text: 'Write a cool JS library',
},
{
id: 2,
text: 'Make it generic enough',
}
]);
const [items, setItems] = useState([
{
id: 1,
label: 'Text Input'
},
{
id: 2,
label: 'Text Area'
}
])
const moveField = useCallback((dragIndex, hoverIndex) => {
console.log('dragIndex, hoverIndex:', dragIndex, hoverIndex)
/*setFields((prevCards) =>
update(prevCards, {
$splice: [
[dragIndex, 1],
[hoverIndex, 0, prevCards[dragIndex]],
],
}),
)*/
}, []);
const renderField = useCallback((card, index) => {
return (
<BuilderElement
key={card.id}
index={index}
id={card.id}
text={card.text}
move={moveField}
/>
)
}, []);
return (
<div className="formBuilder">
<div className="formBuilder__main">
<h2>{__('Trascina qui gli elementi del Form', 'gepafin')}</h2>
<div className="formBuilder__content">
{fields.map((field, i) => renderField(field, i))}
</div>
</div>
<div className="formBuilder__aside">
<h2>{__('Elementi del Form', 'gepafin')}</h2>
<ul className="formBuilder__list">
{items.map((item) => <li key={item.id}>
{item.label}
</li>)}
</ul>
</div>
</div>
)
}
export default FormBuilder;

4
src/pages/BandoEditForms/index.js → src/pages/BandoForms/index.js
View File

@@ -5,7 +5,7 @@ import { useParams, useNavigate } from 'react-router-dom';
// components
import { Button } from 'primereact/button';
const BandoEditForms = () => {
const BandoForms = () => {
const { id } = useParams();
const navigate = useNavigate();
//const [data, setData] = useState({});
@@ -44,4 +44,4 @@ const BandoEditForms = () => {
}
export default BandoEditForms;
export default BandoForms;

92
src/pages/BandoFormsEdit/components/BuilderElement/index.js Normal file
View File

@@ -0,0 +1,92 @@
import React, { useRef } from 'react'
import { useDrag, useDrop } from 'react-dnd'
import { ItemTypes } from '../ItemTypes';
// store
import { storeSet } from '../../../../store';
// components
import { Button } from 'primereact/button';
const BuilderElement = ({ id, name, label, index, move }) => {
const ref = useRef(null);
const [{ handlerId }, drop] = useDrop({
accept: ItemTypes.FIELD,
collect(monitor) {
return {
handlerId: monitor.getHandlerId(),
}
},
hover(item, monitor) {
if (!ref.current) {
return
}
const dragIndex = item.index
if (dragIndex > -1) {
const hoverIndex = index
if (dragIndex === hoverIndex) {
return
}
const hoverBoundingRect = ref.current?.getBoundingClientRect()
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
const clientOffset = monitor.getClientOffset()
const hoverClientY = clientOffset.y - hoverBoundingRect.top
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
return
}
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
return
}
move(dragIndex, hoverIndex, item)
item.index = hoverIndex
} else {
let hoverIndex = index
const hoverBoundingRect = ref.current?.getBoundingClientRect()
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
const clientOffset = monitor.getClientOffset()
const hoverClientY = clientOffset.y - hoverBoundingRect.top;
if (hoverClientY > hoverMiddleY) {
hoverIndex = hoverIndex + 1;
}
move(dragIndex, hoverIndex, item)
item.index = hoverIndex;
}
},
});
const [{ isDragging }, drag] = useDrag({
type: ItemTypes.FIELD,
item: () => {
return { id, name, index }
},
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}),
});
const openSettings = (id) => {
storeSet.main.activeElement(id);
}
const opacity = isDragging ? 0 : 1;
drag(drop(ref));
return (
<div ref={ref} className="formBuilder__element" style={{ opacity }} data-handler-id={handlerId}>
{label}
<Button icon="pi pi-cog" onClick={() => openSettings(id)} outlined />
</div>
)
}
export default BuilderElement;

37
src/pages/BandoFormsEdit/components/BuilderElementItem/index.js Normal file
View File

@@ -0,0 +1,37 @@
import React, { useRef } from 'react'
import { useDrag } from 'react-dnd'
import { ItemTypes } from '../ItemTypes';
import uniqid from '../../../../helpers/uniqid';
const BuilderElementItem = ({ dbId, name, label, move }) => {
const ref = useRef(null);
const [{ isDragging }, drag] = useDrag(() => ({
type: ItemTypes.FIELD,
item: () => {
return { name, dbId, id: uniqid(), index: -1 }
},
end: (item, monitor) => {
const dropResult = monitor.getDropResult()
if (item && dropResult) {
return item;
}
},
collect: (monitor) => ({
isDragging: monitor.isDragging(),
handlerId: monitor.getHandlerId(),
}),
}))
const opacity = isDragging ? 0.4 : 1
drag(ref);
return (
<div ref={ref} className="formBuilder__elementItem" style={{ opacity }}>
{label}
</div>
)
}
export default BuilderElementItem;

98
src/pages/BandoFormsEdit/components/FormBuilder/index.js Normal file
View File

@@ -0,0 +1,98 @@
import React, { useCallback, useState, useEffect } from 'react'
import { __ } from '@wordpress/i18n';
import { head, isEmpty } from 'ramda';
// store
import { storeGet, storeSet, useStore } from '../../../../store';
// components
import BuilderElement from '../BuilderElement';
import BuilderElementItem from '../BuilderElementItem';
import { Sidebar } from 'primereact/sidebar';
const FormBuilder = () => {
const [fields, setFields] = useState([]);
const [items, setItems] = useState([]);
const activeElement = useStore().main.activeElement();
const moveField = useCallback((dragIndex, hoverIndex, item) => {
setFields((prevFields) => {
if (dragIndex === -1) {
const configs = storeGet.main.elementItems();
const itemCfg = head(configs.filter(o => o.id === item.dbId));
const newItem = {
...itemCfg,
id: item.id,
dbId: item.dbId
}
return prevFields.toSpliced(hoverIndex, 0, newItem);
} else {
let newFields = prevFields.toSpliced(dragIndex, 1);
return newFields.toSpliced(hoverIndex, 0, prevFields[dragIndex]);
}
})
}, []);
const renderField = useCallback((field, index) => {
return (
<BuilderElement
key={field.id}
index={index}
id={field.id}
label={field.label}
name={field.name}
move={moveField}
/>
)
}, []);
useEffect(() => {
const elements = storeGet.main.elements();
const elementItems = storeGet.main.elementItems();
setFields(elements);
setItems(elementItems);
}, [])
const renderItem = useCallback((item, index) => {
return (
<BuilderElementItem
key={item.id}
dbId={item.id}
label={item.label}
name={item.name}
move={moveField}
/>
)
}, []);
const closeSettings = () => {
storeSet.main.activeElement('');
}
return (
<>
<Sidebar visible={!isEmpty(activeElement)} onHide={closeSettings} className="formBuilder__elementSettings">
<h2>{__('Impostazioni del campo modulo', 'gepafin')}</h2>
<p>
Form fields here
</p>
</Sidebar>
<div className="formBuilder">
<div className="formBuilder__main">
<h2>{__('Trascina qui gli elementi del Form', 'gepafin')}</h2>
<div className="formBuilder__content">
{fields.map((field, i) => renderField(field, i))}
</div>
</div>
<div className="formBuilder__aside">
<h2>{__('Elementi del Form', 'gepafin')}</h2>
<ul className="formBuilder__list">
{items.map((item) => renderItem(item))}
</ul>
</div>
</div>
</>
)
}
export default FormBuilder;

0
src/pages/BandoEditForm/components/ItemTypes/index.js → src/pages/BandoFormsEdit/components/ItemTypes/index.js
View File

59
src/pages/BandoEditForm/index.js → src/pages/BandoFormsEdit/index.js
View File

@@ -1,18 +1,20 @@
import React, { useEffect } from 'react';
import React, { useEffect, useState } from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate, useParams } from 'react-router-dom';
import { DndProvider } from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'
// store
import { storeSet } from '../../store';
// components
import FormBuilder from './components/FormBuilder';
import { Button } from 'primereact/button';
const BandoEditForm = () => {
const BandoFormsEdit = () => {
const { id, formId } = useParams();
const navigate = useNavigate();
//const [data, setData] = useState({});
//const [isLoading, setIsLoading] = useState(true);
const [isLoading, setIsLoading] = useState(true);
const goBack = () => {
navigate('/bandi/11/forms');
@@ -31,12 +33,47 @@ const BandoEditForm = () => {
}
useEffect(() => {
const parsed = parseInt(id)
const bandoId = !isNaN(parsed) ? parsed : 0;
const parsedFormId = parseInt(formId)
const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
//const parsed = parseInt(id)
//const bandoId = !isNaN(parsed) ? parsed : 0;
//const parsedFormId = parseInt(formId)
//const bandoFormId = !isNaN(parsedFormId) ? parsedFormId : 0;
// 1. TODO get builder content data from API
const elements = [
{
id: 'a123456',
name: 'textinput',
dbId: 1,
label: 'Full Name',
},
{
id: 'a456789',
name: 'textarea',
dbId: 2,
label: 'Bio',
}
]
const elementItems = [
{
id: 1,
name: 'textinput',
label: 'Text Input'
},
{
id: 2,
name: 'textarea',
label: 'Text Area'
},
{
id: 3, // DB id
name: 'piva',
label: 'P.IVA'
},
]
storeSet.main.elements(elements);
storeSet.main.elementItems(elementItems);
setIsLoading(false);
// TODO
}, [id]);
return (
@@ -52,7 +89,7 @@ const BandoEditForm = () => {
<div className="appPageSection">
<DndProvider backend={HTML5Backend}>
<FormBuilder/>
{!isLoading ? <FormBuilder/>: null}
</DndProvider>
</div>
@@ -84,4 +121,4 @@ const BandoEditForm = () => {
}
export default BandoEditForm;
export default BandoFormsEdit;

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

@@ -1,4 +1,4 @@
import React, { useState, useEffect, useRef } from 'react';
import React, { useState, useEffect } from 'react';
import { __ } from '@wordpress/i18n';
import { useParams } from 'react-router-dom';
import { Skeleton } from 'primereact/skeleton';
@@ -11,8 +11,8 @@ const BandoView = () => {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const parsed = parseInt(id)
const bandoId = !isNaN(parsed) ? parsed : 0;
//const parsed = parseInt(id)
//const bandoId = !isNaN(parsed) ? parsed : 0;
setTimeout(() => {
const data = {

2
src/pages/Dashboard/components/LatestBandiTable/index.js
View File

@@ -148,7 +148,7 @@ const LatestBandiTable = () => {
const header = renderHeader();
return(
<div className="latestBandiTable">
<div className="appPageSection__table">
<DataTable value={items} paginator showGridlines rows={10} loading={loading} dataKey="id"
filters={filters}
globalFilterFields={['name', 'status']}

2
src/pages/Dashboard/components/LatestUsersActivityTable/index.js
View File

@@ -102,7 +102,7 @@ const LatestUsersActivityTable = () => {
const header = renderHeader();
return(
<div className="latestBandiTable">
<div className="appPageSection__table">
<DataTable value={items} paginator showGridlines rows={10} loading={loading} dataKey="id"
filters={filters}
globalFilterFields={['name', 'status']}

109
src/pages/Login/index.js
View File

@@ -1,10 +1,109 @@
import React from 'react';
import { __ } from '@wordpress/i18n';
import React, { useRef, useState, useEffect } from 'react';
import { __, sprintf } from '@wordpress/i18n';
import { useForm } from 'react-hook-form';
import { classNames } from 'primereact/utils';
import { isEmpty } from 'ramda';
// tools
import AuthenticationService from '../../service/authentication-service';
// store
import { storeSet, useStore } from '../../store';
// components
import FormField from '../../components/FormField';
import LogoIcon from '../../icons/LogoIcon';
import { Button } from 'primereact/button';
import { Messages } from 'primereact/messages';
const Login = () => {
return(
<div>
{__('Login page', 'gepafin')}
const token = useStore().main.token();
const [loading, setLoading] = useState(false);
const errorMsgs = useRef(null);
const {
control,
handleSubmit,
formState: { errors },
} = useForm({ mode: 'onChange' });
const onSubmit = (formData) => {
errorMsgs.current.clear();
setLoading(true);
const request = {
...formData,
rememberMe: true
}
AuthenticationService.login(request, loginCallback, loginError);
};
const loginCallback = (data) => {
if (data.status === 'SUCCESS') {
storeSet.main.setAuthData({
token: data.data.token,
userData: data.data.user
});
} else {
errorMsgs.current.show([
{ sticky: true, severity: 'error', summary: 'Error',
detail: data.message,
closable: true }
]);
}
setLoading(false);
}
const loginError = (err) => {
errorMsgs.current.show([
{ sticky: true, severity: 'error', summary: 'Error',
detail: sprintf(__('%s', 'gepafin'), err),
closable: true }
]);
setLoading(false);
}
useEffect(() => {
if (!isEmpty(token)) {
setLoading(true);
window.location.replace('/')
}
}, [token]);
return (
<div className={classNames(['appPage', 'appPageLogin'])}>
<div className="appPageLogin__wrapper">
<LogoIcon/>
<h1>{__('Accedi o Registrati', 'gepafin')}</h1>
<div className="appPage__spacer"></div>
<Messages ref={errorMsgs}/>
<form className="appForm" onSubmit={handleSubmit(onSubmit)}>
<FormField
type="textinput"
fieldName="email"
label={__('Email', 'gepafin')}
control={control}
errors={errors}
config={{ required: __('È obbligatorio', 'gepafin') }}
placeholder="sample@example.com"
/>
<FormField
type="textinput"
inputtype="password"
fieldName="password"
label={__('Password', 'gepafin')}
control={control}
errors={errors}
config={{ required: __('È obbligatorio', 'gepafin') }}
/>
<Button label={__('Accedi', 'gepafin')} disabled={loading}/>
</form>
</div>
</div>
)
}

8
src/routes.js
View File

@@ -9,8 +9,8 @@ import DefaultLayout from './layouts/DefaultLayout';
import Bandi from './pages/Bandi';
import BandoEdit from './pages/BandoEdit';
import BandoView from './pages/BandoView';
import BandoEditForms from './pages/BandoEditForms';
import BandoEditForm from './pages/BandoEditForm';
import BandoFormsEdit from './pages/BandoFormsEdit';
import BandoForms from './pages/BandoForms';
const routes = () => (
<Routes>
@@ -20,8 +20,8 @@ const routes = () => (
<Route path="/bandi/preview/:id" element={<DefaultLayout><BandoView/></DefaultLayout>}/>
<Route path="/bandi/preview-evaluation/:id" element={<DefaultLayout><BandoView/></DefaultLayout>}/>
<Route path="/bandi/:id" element={<DefaultLayout><BandoEdit/></DefaultLayout>}/>
<Route path="/bandi/:id/forms" element={<DefaultLayout><BandoEditForms/></DefaultLayout>}/>
<Route path="/bandi/:id/forms/:formId" element={<DefaultLayout><BandoEditForm/></DefaultLayout>}/>
<Route path="/bandi/:id/forms" element={<DefaultLayout><BandoForms/></DefaultLayout>}/>
<Route path="/bandi/:id/forms/:formId" element={<DefaultLayout><BandoFormsEdit/></DefaultLayout>}/>
</Route>
<Route exact path="/login" element={<Login/>}/>
{/*<Route exact path="/forgot-password" element={<ForgotPassword/>}/>*/}

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

@@ -58,11 +58,11 @@ export default class AuthenticationService {
};
static login = (loginRequest, callback, errCallback) => {
NetworkService.unauthorizedPost(`${API_BASE_URL}/user/login/`, loginRequest, callback, errCallback);
NetworkService.unauthorizedPost(`${API_BASE_URL}/user/login`, loginRequest, callback, errCallback);
};
static registerUser = (registerRequest, callback, errCallback) => {
NetworkService.post(`${API_BASE_URL}/user/register/`, registerRequest, callback, errCallback);
NetworkService.post(`${API_BASE_URL}/user/register`, registerRequest, callback, errCallback);
};
static forgotPassword = (request, callback, errCallback) => {
@@ -74,6 +74,6 @@ export default class AuthenticationService {
}
static changePassword = (request, callback, errCallback) => {
NetworkService.unauthorizedPatch(`${API_BASE_URL}/user/reset_password/`, request, callback, errCallback);
NetworkService.unauthorizedPatch(`${API_BASE_URL}/user/reset_password`, request, callback, errCallback);
}
}

14
src/service/file-upload-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 FileUploadService {
static uploadFile = (body, callback, errCallback, queryParams) => {
NetworkService.postMultiPart(`${API_BASE_URL}/document/uploadFile`, body, callback, errCallback, queryParams);
};
static deleteFile = (body, callback, errCallback, queryParams) => {
NetworkService.delete(`${API_BASE_URL}/document/deleteFile`, body, callback, errCallback, queryParams);
};
}

41
src/service/network-service.js
View File

@@ -85,6 +85,47 @@ export class NetworkService {
.catch(err => errorCallback(err));
};
static postMultiPart = (url, body, callback, errorCallback, queryParams) => {
if (queryParams) {
url += '?'
for (let i = 0; i < queryParams.length; i++) {
if (queryParams[i] && this.isNotBlank(queryParams[i][0]) && this.isNotBlank(queryParams[i][1])) {
let param = queryParams[i][0] + '=' + queryParams[i][1]
if (i !== queryParams.length - 1)
param += '&'
url += param;
}
}
if (url.charAt(url.length) === '&')
url = url.substring(0, url.length - 1);
}
fetch(url, {
method: 'POST',
mode: 'cors',
headers: {
//'Content-Type': 'multipart/form-data',
'Authorization': 'Bearer ' + storeGet.main.getToken(),
},
body: body
})
.then(async response => {
let status = response.status;
return { response: await response.json(), status: status }
})
.then(data => {
if (data.status >= 400 && data.status <= 599)
errorCallback(data.response)
else
callback(data.response)
})
.catch(err => errorCallback(err));
};
static unauthorizedPost = (url, body, callback, errorCallback) => {
fetch(url, {
method: 'POST',

8
src/store/actions.js
View File

@@ -12,4 +12,12 @@ export const actionsAlpha = (set, get, api) => ({
})
export const actionsBeta = (set, get, api) => ({
setAuthData: ({ userData, token }) => {
set.userData(userData);
set.token(token);
},
doLogout: () => {
set.userData({});
set.token('');
}
});

9
src/store/initial.js
View File

@@ -1,6 +1,15 @@
const initialStore = {
// ui related
isAsyncRequest: 0, // number
// user
userData: {},
token: '',
// bando form
bandoFormErrors: {},
// form builder
elements: [],
elementItems: [],
activeElement: ''
}
export default initialStore;

5
src/store/selectors.js
View File

@@ -1,9 +1,6 @@
import { isEmpty } from 'ramda';
const selectors = (state, get, api) => ({
getToken: () => {
const userData = get.userData();
return userData.access && !isEmpty(userData.access) ? userData.access : null;
return get.token();
},
})

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

@@ -6,9 +6,7 @@ const zustandXOpts = {
enabled: true,
partialize: (state) => ({
userData: state.userData,
hubsList: state.hubsList,
chosenHub: state.chosenHub,
groups: state.groups,
token: state.token
}),
}
}