- saving progress;

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

@@ -18,6 +18,7 @@ import BuilderElementProperLabel from '../BuilderElementProperLabel';
 
 const BuilderElement = ({ id, name, label, index, bandoStatus }) => {
     const draggingElementId = useStore().main.draggingElementId();
+    const selectedElement = useStore().main.selectedElement();
     const ref = useRef(null);
     const elements = useStore().main.formElements();
     const element = head(elements.filter(o => o.id === id));
@@ -99,11 +100,15 @@ const BuilderElement = ({ id, name, label, index, bandoStatus }) => {
         storeSet.main.moveElement(dragIndex, hoverIndex, item);
     }
 
-    const openSettings = (id) => {
+    const openSettings = () => {
         storeSet.main.activeElement(id);
     }
 
-    const duplicateElement = useCallback((id) => {
+    const selectElement = () => {
+        storeSet.main.selectedElement(id);
+    }
+
+    const duplicateElement = useCallback(() => {
         const duplicatedElement = head(elements.filter(o => o.id === id));
 
         if (duplicatedElement) {
@@ -121,7 +126,7 @@ const BuilderElement = ({ id, name, label, index, bandoStatus }) => {
         }
     }, [elements]);
 
-    const remove = (id) => {
+    const remove = () => {
         storeSet.main.removeElement(id);
     }
 
@@ -158,7 +163,11 @@ const BuilderElement = ({ id, name, label, index, bandoStatus }) => {
             ? <div ref={ref} className="formBuilder__elementNew">
                 {__('lascia qui', 'gepafin')}
             </div>
-            : <div ref={ref} className="formBuilder__element" style={{ opacity }} data-handler-id={handlerId}>
+            : <div ref={ref}
+                   className={`formBuilder__element${selectedElement === id ? ' selected' : ''}`}
+                   style={{ opacity }}
+                   onClick={selectElement}
+                   data-handler-id={handlerId}>
                 <div className="meta">
                     <div className="tagHeader">
                         <Tag value={label} severity="info"/>
@@ -174,9 +183,9 @@ const BuilderElement = ({ id, name, label, index, bandoStatus }) => {
                     <BuilderElementProperLabel id={id} defaultLabel={label}/>
                 </div>
                 <div className="actions">
-                    <Button icon="pi pi-clone" onClick={() => duplicateElement(id)} outlined severity="success"/>
-                    <Button icon="pi pi-cog" onClick={() => openSettings(id)} outlined severity="info"/>
-                    <Button icon="pi pi-trash" disabled={bandoStatus === 'PUBLISH'} onClick={() => remove(id)} outlined severity="danger"/>
+                    <Button icon="pi pi-clone" onClick={duplicateElement} outlined severity="success"/>
+                    <Button icon="pi pi-cog" onClick={openSettings} outlined severity="info"/>
+                    <Button icon="pi pi-trash" disabled={bandoStatus === 'PUBLISH'} onClick={remove} outlined severity="danger"/>
                 </div>
             </div>
     )

src/pages/BandoFormsEdit/index.js

@@ -223,7 +223,7 @@ const BandoFormsEdit = () => {
         storeSet.main.unsetAsyncRequest();
     }
 
-    const errGetElementItemsCallback = (data) => {
+    const errGetElementItemsCallback = () => {
         storeSet.main.unsetAsyncRequest();
     }
 
@@ -278,6 +278,8 @@ const BandoFormsEdit = () => {
             storeSet.main.formLabel('');
             storeSet.main.formElements([]);
             storeSet.main.bandoCriteria([]);
+            storeSet.main.activeElement('');
+            storeSet.main.selectedElement('');
         }
     }, [id, formId]);