- added rapresentante dynamic tag;

- added full user name dynamic tag;
- translated dynamic tags;
- fixed issue related to number form field;
This commit is contained in:
Vitalii Kiiko
2024-11-19 11:46:04 +01:00
parent 7b2a756100
commit 8570c01952
6 changed files with 69 additions and 51 deletions

View File

@@ -28,6 +28,7 @@
flex-direction: column; flex-direction: column;
gap: 7px; gap: 7px;
padding: 20px; padding: 20px;
overscroll-behavior: contain;
border: 1px #DDD; border: 1px #DDD;
background: var(--surface-50); background: var(--surface-50);
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.10); box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.10);
@@ -141,6 +142,7 @@
margin: 0; margin: 0;
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
overscroll-behavior: contain;
} }
.formBuilder__elementItem { .formBuilder__elementItem {
display: flex; display: flex;

View File

@@ -102,6 +102,22 @@
color: white; color: white;
} }
.p-autocomplete-token-label, .p-autocomplete-item.p-highlight {
color: white;
}
.p-autocomplete-token-icon {
path {
fill: white;
}
}
.p-autocomplete-multiple-container {
width: 100%;
}
.p-dropdown-panel, .p-dropdown-panel *, .p-dialog-content {
overscroll-behavior: contain;
}
.p-dialog-content { .p-dialog-content {
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
} }

View File

@@ -47,8 +47,8 @@ const NumberInput = ({
<> <>
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}> <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
{label}{config.required || config.isRequired ? <span className="appForm__field--required">*</span> : null} {label}{config.required || config.isRequired ? <span className="appForm__field--required">*</span> : null}
{!isEmpty(minAttr) ? <span>(min. {minAttr})</span> : null} {minAttr && !isEmpty(minAttr) ? <span>(min. {minAttr})</span> : null}
{!isEmpty(maxAttr) ? <span>(max. {maxAttr})</span> : null} {maxAttr && !isEmpty(maxAttr) ? <span>(max. {maxAttr})</span> : null}
</label> </label>
{inputgroup {inputgroup
? <div className="p-inputgroup"> ? <div className="p-inputgroup">

View File

@@ -16,24 +16,26 @@ export const mimeTypes = [
export const defaultMaxFileSize = 314572800; // 314572800 = 300 Mb export const defaultMaxFileSize = 314572800; // 314572800 = 300 Mb
const dynamicDataForTextinput = [ const dynamicDataForTextinput = [
{ label: 'company name', value: 'company.companyName' }, { label: 'ragione sociale', value: 'company.companyName' },
{ label: 'company piva', value: 'company.vatNumber' }, { label: 'partita IVA', value: 'company.vatNumber' },
{ label: 'company codiceFiscale', value: 'company.codiceFiscale' }, { label: 'codice fiscale azienda', value: 'company.codiceFiscale' },
{ label: 'company address', value: 'company.address' }, { label: 'indirizzo', value: 'company.address' },
{ label: 'company phoneNumber', value: 'company.phoneNumber' }, { label: 'numero di telefono azienda', value: 'company.phoneNumber' },
{ label: 'company city', value: 'company.city' }, { label: 'città', value: 'company.city' },
{ label: 'company province', value: 'company.province' }, { label: 'provincia', value: 'company.province' },
{ label: 'company cap', value: 'company.cap' }, { label: 'CAP', value: 'company.cap' },
{ label: 'company country', value: 'company.country' }, { label: 'paese', value: 'company.country' },
{ label: 'company pec', value: 'company.pec' }, { label: 'PEC', value: 'company.pec' },
{ label: 'company email', value: 'company.email' }, { label: 'email azienda', value: 'company.email' },
{ label: 'company contactName', value: 'company.contactName' }, { label: 'nome del referente', value: 'company.contactName' },
{ label: 'company contactEmail', value: 'company.contactEmail' }, { label: 'email del referente', value: 'company.contactEmail' },
{ label: 'user email', value: 'user.email' }, { label: 'email utente', value: 'user.email' },
{ label: 'user firstName', value: 'user.firstName' }, { label: 'nome utente', value: 'user.firstName' },
{ label: 'user lastName', value: 'user.lastName' }, { label: 'cognome utente', value: 'user.lastName' },
{ label: 'user phoneNumber', value: 'user.phoneNumber' }, { label: 'numero di telefono utente', value: 'user.phoneNumber' },
{ label: 'user codiceFiscale', value: 'user.codiceFiscale' } { label: 'codice fiscale utente', value: 'user.codiceFiscale' },
{ label: 'nome del rappresentante', value: 'custom.legalRepresentant' },
{ label: 'nome e cognome utente', value: 'custom.userFullName' },
] ]
export const dynamicDataOptions = { export const dynamicDataOptions = {

View File

@@ -5,6 +5,7 @@ import { head, is, pluck, isEmpty, pathOr } from 'ramda';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { TZDate } from '@date-fns/tz'; import { TZDate } from '@date-fns/tz';
import 'quill/dist/quill.core.css'; import 'quill/dist/quill.core.css';
import { wrap } from 'object-path-immutable';
// store // store
import { storeSet, storeGet, useStore } from '../../store'; import { storeSet, storeGet, useStore } from '../../store';
@@ -304,7 +305,8 @@ const BandoApplication = () => {
let formDataInitial = {}; let formDataInitial = {};
let dynamicData = { let dynamicData = {
company: {}, company: {},
user: {} user: {},
custom: {}
}; };
if (company) { if (company) {
@@ -332,6 +334,11 @@ const BandoApplication = () => {
return acc; return acc;
}, dynamicData); }, dynamicData);
const userFullName = `${userData.firstName} ${userData.lastName}`;
dynamicData = wrap(dynamicData).set(['custom', 'userFullName'], userFullName).value();
const legalRepresentantName = company.isLegalRepresentant ? userFullName : '';
dynamicData = wrap(dynamicData).set(['custom', 'legalRepresentant'], legalRepresentantName).value();
if (data.data.applicationFormResponse.content) { if (data.data.applicationFormResponse.content) {
// eslint-disable-next-line array-callback-return // eslint-disable-next-line array-callback-return
data.data.applicationFormResponse.content.map((o) => { data.data.applicationFormResponse.content.map((o) => {

View File

@@ -16,6 +16,7 @@ import { InputSwitch } from 'primereact/inputswitch';
import ElementSetting from './components/ElementSetting'; import ElementSetting from './components/ElementSetting';
import { Dropdown } from 'primereact/dropdown'; import { Dropdown } from 'primereact/dropdown';
import { MultiSelect } from 'primereact/multiselect'; import { MultiSelect } from 'primereact/multiselect';
import { dynamicDataOptions } from '../../../../configData'; import { dynamicDataOptions } from '../../../../configData';
const BuilderElementSettings = ({ closeSettingsFn, bandoStatus }) => { const BuilderElementSettings = ({ closeSettingsFn, bandoStatus }) => {
@@ -25,7 +26,7 @@ const BuilderElementSettings = ({ closeSettingsFn, bandoStatus }) => {
const [activeElementData, setActiveElementData] = useState({}); const [activeElementData, setActiveElementData] = useState({});
const [settings, setSettings] = useState([]); const [settings, setSettings] = useState([]);
const [validators, setValidators] = useState({}); const [validators, setValidators] = useState({});
const [dynamicData, setDynamicData] = useState(''); const [dynamicData, setDynamicData] = useState([]);
const [criteria, setCriteria] = useState([]); const [criteria, setCriteria] = useState([]);
const numberBasedValidatorFields = ['min', 'max', 'minLength', 'maxLength']; const numberBasedValidatorFields = ['min', 'max', 'minLength', 'maxLength'];
const customValidationOptions = [ const customValidationOptions = [
@@ -105,37 +106,26 @@ const BuilderElementSettings = ({ closeSettingsFn, bandoStatus }) => {
setCriteria(value); setCriteria(value);
} }
const getDynamicDataOptions = (type) => { const getDynamicDataOptions = (type) => {
switch (type) { return dynamicDataOptions[type] ?? [];
case 'datepicker' :
return [
{ label: 'user dateOfBirth', value: 'user.dateOfBirth' }
]
default :
return [
{ label: 'company name', value: 'company.companyName' },
{ label: 'company piva', value: 'company.vatNumber' },
{ label: 'company codiceFiscale', value: 'company.codiceFiscale' },
{ label: 'company address', value: 'company.address' },
{ label: 'company phoneNumber', value: 'company.phoneNumber' },
{ label: 'company city', value: 'company.city' },
{ label: 'company province', value: 'company.province' },
{ label: 'company cap', value: 'company.cap' },
{ label: 'company country', value: 'company.country' },
{ label: 'company pec', value: 'company.pec' },
{ label: 'company email', value: 'company.email' },
{ label: 'company contactName', value: 'company.contactName' },
{ label: 'company contactEmail', value: 'company.contactEmail' },
{ label: 'user email', value: 'user.email' },
{ label: 'user firstName', value: 'user.firstName' },
{ label: 'user lastName', value: 'user.lastName' },
{ label: 'user phoneNumber', value: 'user.phoneNumber' },
{ label: 'user codiceFiscale', value: 'user.codiceFiscale' }
]
}
} }
/*const searchDynamicTags = (event) => {
const type = activeElementData.name;
const available = dynamicDataOptions[type];
let filtered;
if (!event.query.trim().length) {
filtered = [...available];
} else {
filtered = available.filter((tag) => {
return tag.label.toLowerCase().startsWith(event.query.toLowerCase());
});
}
setFilteredDynamicDataOptions(filtered);
}*/
useEffect(() => { useEffect(() => {
const chosen = head(elements.filter(o => o.id === activeElement)); const chosen = head(elements.filter(o => o.id === activeElement));
@@ -149,7 +139,7 @@ const BuilderElementSettings = ({ closeSettingsFn, bandoStatus }) => {
setActiveElementData({}); setActiveElementData({});
setSettings([]); setSettings([]);
setValidators({}); setValidators({});
setDynamicData(''); setDynamicData([]);
setCriteria([]); setCriteria([]);
} }
}, [activeElement]); }, [activeElement]);
@@ -173,6 +163,7 @@ const BuilderElementSettings = ({ closeSettingsFn, bandoStatus }) => {
<Dropdown <Dropdown
id="dynamicData" id="dynamicData"
value={dynamicData} value={dynamicData}
filter
onChange={(e) => setDynamicData(e.value)} onChange={(e) => setDynamicData(e.value)}
options={getDynamicDataOptions(activeElementData.name)} options={getDynamicDataOptions(activeElementData.name)}
optionLabel="label" optionLabel="label"