updated form fields and application logic;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+
+// components
+import ElementSettingRepeater from '../ElementSettingRepeater';
+import { InputText } from 'primereact/inputtext';
+
+const ElementSetting = ({ setting, changeFn, updateDataFn }) => {
+
+    const settingLabels = {
+        label: __('Label', 'gepafin'),
+        placeholder: __('Segnaposto', 'gepafin'),
+        step: __('Precisione decimale', 'gepafin'),
+        options: __('Opzioni', 'gepafin'),
+        mime: __('Tipo di file', 'gepafin'),
+    }
+
+    return <div className="formElementSettings__field" key={setting.name}>
+        <label htmlFor={setting.name}>{settingLabels[setting.name]}</label>
+        {setting.name === 'options'
+            ? <ElementSettingRepeater value={setting.value} name={setting.name} setDataFn={updateDataFn}/>
+            : <InputText id={setting.name} aria-describedby={`${setting.name}-help`}
+                         value={setting.value}
+                         onChange={(e) => changeFn(e.target.value, setting.name)}/>}
+    </div>
+}
+
+export default ElementSetting;

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

@@ -12,7 +12,7 @@ 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';
+import ElementSetting from './components/ElementSetting';
 
 const BuilderElementSettings = ({ closeSettings }) => {
     const elements = useStore().main.formElements();
@@ -97,15 +97,11 @@ const BuilderElementSettings = ({ closeSettings }) => {
                 <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>
-                                {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)}/>}
-                            </div>)
+                            ? settings.map((o) => <ElementSetting
+                                key={o.name}
+                                setting={o}
+                                changeFn={onChange}
+                                updateDataFn={onUpdateOptions}/>)
                             : null}
                     </TabPanel>
                     <TabPanel header={__('Validation', 'gepafin')}>

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

@@ -11,11 +11,13 @@ import BuilderElementItem from '../BuilderElementItem';
 import { Sidebar } from 'primereact/sidebar';
 import BuilderElementSettings from '../BuilderElementSettings';
 import BuilderDropzone from '../BuilderDropzone';
+import BlockingOverlay from '../../../../components/BlockingOverlay';
 
 const FormBuilder = () => {
     const elements = useStore().main.formElements();
     const elementItems = useStore().main.elementItems();
     const activeElement = useStore().main.activeElement();
+    const isAsyncRequest = useStore().main.isAsyncRequest();
 
     const renderField = useCallback((field, index) => {
         return (
@@ -65,6 +67,7 @@ const FormBuilder = () => {
                         {elementItems.map((item) => renderItem(item))}
                     </ul>
                 </div>
+                <BlockingOverlay shouldDisplay={isAsyncRequest}/>
             </div>
         </>
     )

src/pages/BandoFormsEdit/index.js

@@ -113,7 +113,7 @@ const BandoFormsEdit = () => {
 
     const getElementItemsCallback = (data) => {
         if (data.status === 'SUCCESS') {
-            storeSet.main.elementItems(elementItems);
+            storeSet.main.elementItems(elementItems.sort((a, b) => a.sortOrder - b.sortOrder));
             //storeSet.main.elementItems(data.data);
         }
         storeSet.main.unsetAsyncRequest();
@@ -184,7 +184,7 @@ const BandoFormsEdit = () => {
 
             <div className="appPageSection">
                 <DndProvider backend={HTML5Backend}>
-                    {!isAsyncRequest ? <FormBuilder/> : null}
+                    <FormBuilder/>
                 </DndProvider>
             </div>
 
@@ -198,10 +198,12 @@ const BandoFormsEdit = () => {
                         label={__('Indietro', 'gepafin')} icon="pi pi-arrow-left" iconPos="left"/>
                     <Button
                         onClick={() => doSave()}
+                        disabled={isAsyncRequest}
                         label={__('Salva progressi', 'gepafin')} icon="pi pi-save" iconPos="right"/>
                     <Button
                         outlined
                         onClick={openPreview}
+                        disabled={isAsyncRequest}
                         label={__('Visualizza Anteprima Beneficiario', 'gepafin')} icon="pi pi-image" iconPos="right"/>
                     {/*<Button
                         disabled={true}
@@ -212,6 +214,7 @@ const BandoFormsEdit = () => {
                     <ConfirmPopup />
                     <Button
                         onClick={confirmDelete}
+                        disabled={isAsyncRequest}
                         severity="danger"
                         label={__('Cancella', 'gepafin')} icon="pi pi-trash" iconPos="right"/>
                 </div>