Merge pull request #11 from Kitzanos/feature/72-upgrade-dynamic-tags

Upgrades and translation for dynamic tags

src/assets/scss/components/formBuilder.scss

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

src/assets/scss/components/misc.scss

@@ -102,6 +102,22 @@
   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 {
   padding: 1rem 1.5rem;
 }

src/components/FormField/components/NumberInput/index.js

@@ -47,8 +47,8 @@ const NumberInput = ({
         <>
             <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
                 {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>
             {inputgroup
                 ? <div className="p-inputgroup">

src/configData.js

@@ -16,24 +16,26 @@ export const mimeTypes = [
 export const defaultMaxFileSize = 314572800; // 314572800 = 300 Mb
 
 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 = {

src/pages/BandoApplication/index.js

@@ -5,6 +5,7 @@ import { head, is, pluck, isEmpty, pathOr } from 'ramda';
 import { useForm } from 'react-hook-form';
 import { TZDate } from '@date-fns/tz';
 import 'quill/dist/quill.core.css';
+import { wrap } from 'object-path-immutable';
 
 // store
 import { storeSet, storeGet, useStore } from '../../store';
@@ -298,13 +299,14 @@ const BandoApplication = () => {
             setApplicationStatus(data.data.applicationStatus)
             setActiveStep(data.data.currentStep);
 
-            const chosenCompanyId = storeGet.main.chosenCompanyId();
+            const chosenCompanyId = data.data.companyId;
             const companies = storeGet.main.companies();
             const company = head(companies.filter(o => o.id === chosenCompanyId));
             let formDataInitial = {};
             let dynamicData = {
                 company: {},
-                user: {}
+                user: {},
+                custom: {}
             };
 
             if (company) {
@@ -332,6 +334,11 @@ const BandoApplication = () => {
                 return acc;
             }, 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) {
                 // eslint-disable-next-line array-callback-return
                 data.data.applicationFormResponse.content.map((o) => {

src/pages/BandoFormsEdit/components/BuilderElementSettings/index.js

@@ -16,6 +16,7 @@ import { InputSwitch } from 'primereact/inputswitch';
 import ElementSetting from './components/ElementSetting';
 import { Dropdown } from 'primereact/dropdown';
 import { MultiSelect } from 'primereact/multiselect';
+
 import { dynamicDataOptions } from '../../../../configData';
 
 const BuilderElementSettings = ({ closeSettingsFn, bandoStatus }) => {
@@ -25,7 +26,7 @@ const BuilderElementSettings = ({ closeSettingsFn, bandoStatus }) => {
     const [activeElementData, setActiveElementData] = useState({});
     const [settings, setSettings] = useState([]);
     const [validators, setValidators] = useState({});
-    const [dynamicData, setDynamicData] = useState('');
+    const [dynamicData, setDynamicData] = useState([]);
     const [criteria, setCriteria] = useState([]);
     const numberBasedValidatorFields = ['min', 'max', 'minLength', 'maxLength'];
     const customValidationOptions = [
@@ -105,37 +106,26 @@ const BuilderElementSettings = ({ closeSettingsFn, bandoStatus }) => {
         setCriteria(value);
     }
 
-
     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(() => {
         const chosen = head(elements.filter(o => o.id === activeElement));
 
@@ -149,7 +139,7 @@ const BuilderElementSettings = ({ closeSettingsFn, bandoStatus }) => {
             setActiveElementData({});
             setSettings([]);
             setValidators({});
-            setDynamicData('');
+            setDynamicData([]);
             setCriteria([]);
         }
     }, [activeElement]);
@@ -173,6 +163,7 @@ const BuilderElementSettings = ({ closeSettingsFn, bandoStatus }) => {
                                 <Dropdown
                                     id="dynamicData"
                                     value={dynamicData}
+                                    filter
                                     onChange={(e) => setDynamicData(e.value)}
                                     options={getDynamicDataOptions(activeElementData.name)}
                                     optionLabel="label"