- saving progress;

src/assets/scss/components/flowBuilder.scss

@@ -44,24 +44,39 @@
   display: flex;
   flex-direction: column;
   width: max-content;
+  margin: 0 auto;
 }
 
 .flowContainer__level {
   display: flex;
   justify-content: center;
   gap: 20px;
-  padding: 0 0 60px;
   /*min-height: 240px;*/
   /*margin: 0 auto;*/
+
+  &.initialLevel {
+    padding: 0 0 30px;
+  }
+
+  &.intermediateLevel, &.finalLevel {
+    padding: 30px 0 30px;
+  }
+
+  &.intermediateLevel {
+    border-bottom: 1px solid var(--table-border-color);
+    border-top: 1px solid var(--table-border-color);
+  }
 }
 
 .flowContainer__flowItem {
+  position: relative;
   display: flex;
   flex-direction: column;
   width: 280px;
   min-width: 280px;
   padding: 15px;
-  border: 1px solid var(--panel-content-borderColor);
+  border: 1px solid var(--table-border-color);
+  z-index: 9;
 
   .flowContainer__flowItemInner > label {
     border-color: #757575;
@@ -76,6 +91,44 @@
       color: white;
     }
   }
+
+  &.levelForms, &.initialForm {
+    &:after {
+      position: absolute;
+      bottom: -31px;
+      left: 50%;
+      content: '';
+      width: 1px;
+      height: 31px;
+      background-color: var(--table-border-color);
+    }
+  }
+
+  &.levelForms, &.finalForm {
+    &:before {
+      position: absolute;
+      top: -31px;
+      left: 50%;
+      content: '';
+      width: 1px;
+      height: 31px;
+      background-color: var(--table-border-color);
+    }
+  }
+}
+
+.flowContainer__levelMaskStart, .flowContainer__levelMaskEnd {
+  position: absolute;
+  width: 140px;
+  height: 100% ;
+  top: -1px;
+  background-color: white;
+}
+.flowContainer__levelMaskStart {
+  left: 0;
+}
+.flowContainer__levelMaskEnd {
+  right: 0;
 }
 
 .flowContainer__flowItemInner {

src/assets/scss/components/topBar.scss

@@ -72,4 +72,10 @@
     i {
         margin-right: 7px;
     }
+}
+
+@media (max-width: 500px) {
+    .topBar__endContent {
+        flex-wrap: wrap;
+    }
 }

src/pages/BandoFlowEdit/index.js

@@ -210,6 +210,7 @@ const BandoFlowEdit = () => {
                 const field = form ? head(form.content.filter(o => o.id === chosenFieldItem.chosenField)) : null;
                 if (field) {
                     const options = head(field.settings.filter(o => o.name === 'options'));
+                    console.log('suboptions1', options.value)
                     setMainFieldSubOptions(options.value);
                 }
             }
@@ -291,6 +292,7 @@ const BandoFlowEdit = () => {
                 { label: __('Nessun scelta', 'gepafin'), name: '' },
                 ...options.value
             ]
+            console.log('suboptions2', suboptions)
             setMainFieldSubOptions(suboptions);
             const data = {
                 formId: parseInt(initialForm),
@@ -333,6 +335,7 @@ const BandoFlowEdit = () => {
         }
         storeSet.main.flowData([]);
         setChosenMainField('');
+        console.log('suboptions3', [], initialForm)
         setMainFieldSubOptions([]);
         setChosenMainFieldOptions([]);
         const flowForms = storeGet.main.flowForms();
@@ -411,8 +414,7 @@ const BandoFlowEdit = () => {
     const finalFormData = head(forms.filter(o => o.id === finalForm));
     const levelForms = forms.filter(o => o.id !== initialForm && o.id !== finalForm);
 
-    //console.log('isFlowAllowed', isFlowAllowed, flowData, flowEdges);
-    //console.log('forms:', initialForm, finalForm, chosenMainField, chosenMainFieldOptions)
+    console.log('mainFieldSuboptions', mainFieldSuboptions);
     return (
         <div className="appPage">
             <div className="appPage__pageHeader">
@@ -491,7 +493,7 @@ const BandoFlowEdit = () => {
                 {forms.length >= 2 && initialForm && finalForm
                     ? <div className="flowContainer" ref={itemContainerRef}>
                         <div className="flowContainerInner">
-                        <div className="flowContainer__level">
+                        <div className="flowContainer__level initialLevel">
                             <div className="flowContainer__flowItem initialForm"
                                  ref={(el) => initialForm ? setItemRef(initialForm, el) : null}>
                                 <div className="flowContainer__flowItemInner">
@@ -503,8 +505,8 @@ const BandoFlowEdit = () => {
                         </div>
 
                         {levelForms.length && initialForm && finalForm
-                            ? <div className="flowContainer__level">
-                                {levelForms.map(o => <div key={o.id}
+                            ? <div className="flowContainer__level intermediateLevel">
+                                {levelForms.map((o, i) => <div key={o.id}
                                                           ref={(el) => setItemRef(o.id, el)}
                                                           className="flowContainer__flowItem levelForms">
                                     <div className="flowContainer__flowItemInner">
@@ -527,10 +529,13 @@ const BandoFlowEdit = () => {
                                         </div>
                                     </div>
                                 </div>)}
+                                {levelForms.length > 1
+                                    ? <><div className="flowContainer__levelMaskEnd"></div>
+                                        <div className="flowContainer__levelMaskStart"></div></> : null}
                             </div> : null}
 
                         {forms.length >= 2 && initialForm && finalForm
-                            ? <div className="flowContainer__level">
+                            ? <div className="flowContainer__level finalLevel">
                                 <div className="flowContainer__flowItem finalForm"
                                      ref={(el) => finalForm ? setItemRef(finalForm, el) : null}>
                                     <div className="flowContainer__flowItemInner">