arangodb · adityamukho · Oct 4, 2021 · Sep 13, 2021 · Sep 13, 2021 · Sep 13, 2021
diff --git a/js/apps/system/_admin/aardvark/APP/frontend/css/bootstrap.css b/js/apps/system/_admin/aardvark/APP/frontend/css/bootstrap.css
@@ -5621,7 +5621,7 @@ a.badge:hover {
 }
 
 .accordion {
-  margin-bottom: 20px;
+  margin-bottom: 0;
 }
 
 .accordion-group {

diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/templates/modalTable.ejs b/js/apps/system/_admin/aardvark/APP/frontend/js/templates/modalTable.ejs
@@ -1,4 +1,6 @@
 <%
+let advancedCounter = 2;
+
 function createInput(row) {
     switch(row.type) {
         case 'text':
@@ -78,7 +80,11 @@ function createInput(row) {
 
                     <th style="height: unset;"><%= header %></th>
                 <% }); %>
-                <th style="height: unset; min-width: 30px;">+ / &times;</th>
+                <th style="height: unset; min-width: 30px;">
+                    <span style="display: inline-flex">
+                                <button class="graphViewer-icon-button gv-icon-small add addAfter"></button>
+                    </span>
+                </th>
             </tr>
             </thead>
         <% } %>
@@ -96,12 +102,13 @@ function createInput(row) {
                 <% }); %>
                 <td>
                             <span style="display: inline-flex">
-                                <button class="graphViewer-icon-button gv-icon-small add addAfter"></button>
                                 <% if (idx) {%>
                                 <button style="margin-left: 5px;"
                                         class="graphViewer-icon-button gv_internal_remove_line gv-icon-small delete addDelete">
                                 </button>
                                 <% } %>
+                                <% //<i class="moveRowButton moveRowUp disabled fa fa-arrow-circle-up"></i>
+                                // <i class="moveRowButton moveRowDown disabled fa fa-arrow-circle-down"></i> %>
                             </span>
                    </td>
             </tr>
@@ -113,14 +120,45 @@ function createInput(row) {
     }
 }
 
+function generateAdvancedSection(header, content) { %>
+<div class="accordion" id="accordion<%=advancedCounter%>">
+  <div class="accordion-group">
+    <div class="accordion-heading">
+      <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion<%=advancedCounter%>" href="#collapseOne<%=advancedCounter%>">
+        <span><%= header %></span><span><b class="caret"></b></span>
+      </a>
+      </div>
+      <div id="collapseOne<%=advancedCounter%>" class="accordion-body collapse out">
+        <div class="accordion-inner" style="margin-right: 15px;">
+          <table>
+            <tbody>
+            <%
+            _.each(content, function (row) {
+              createTR(row);
+            });
+            %>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+<% advancedCounter++;}
+
 var createTR = function(row) {
     var mandatory = '';
     if (row.mandatory) {
         mandatory = '*';
     }
 %>
+
 <tr class="tableRow" id="<%= 'row_' + row.id %>">
-    <th class="collectionTh"><%= row.label%><%= mandatory %>:</th>
+  <% if (typeof row.label === 'string') { %>
+    <th class="collectionTh">
+      <%= row.label%><%= mandatory %>:
+    </th>
+  <% } %>
+
     <th class="collectionTh"<%= row.info ? '' : ' colspan="2"' %>>
         <% createInput(row) %>
         <% if (row.info) { %>
@@ -148,27 +186,10 @@ var createTR = function(row) {
   <% if (info) { %>
     <%= info %>
   <% } %>
-  <% if (advancedContent) { %>
-    <div class="accordion" id="accordion2">
-      <div class="accordion-group">
-        <div class="accordion-heading">
-          <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
-            <span><%=advancedContent.header%></span><span><b class="caret"></b></span>
-          </a>
-        </div>
-        <div id="collapseOne" class="accordion-body collapse out">
-          <div class="accordion-inner">
-            <table>
-              <tbody>
-                <%
-                _.each(advancedContent.content, function(row) {
-                  createTR(row);
-                });
-                %>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-  <% } %>
+  <% if (advancedContent && Array.isArray(advancedContent)) {
+    _.forEach(advancedContent, function (aC) {
+      generateAdvancedSection(aC.header, aC.content);
+    });
+  } else if (advancedContent) {
+    generateAdvancedSection(advancedContent.header, advancedContent.content);
+  } %>
diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/views/modalView.js b/js/apps/system/_admin/aardvark/APP/frontend/js/views/modalView.js
@@ -274,7 +274,7 @@
         type: this.tables.TABLE,
         head,
         rows,
-        style
+        style: style + " ; display: table; "
       };
     },
 
@@ -283,6 +283,22 @@
       $('#modal-delete-confirmation strong').html('Really ' + buttonText.toLowerCase() + '?');
     },
 
+    handleSelect2Row: function (row) {
+      // handle select2
+      let options = {
+        tags: row.tags || [],
+        showSearchBox: false,
+        minimumResultsForSearch: -1,
+        width: row.width || '336px'
+      };
+
+      if (row.maxEntrySize) {
+        options.maximumSelectionSize = row.maxEntrySize;
+      }
+
+      $('#' + row.id).select2(options);
+    },
+
     show: function (templateName, title, buttons, tableContent, advancedContent,
       extraInfo, events, noConfirm, tabBar, divID) {
       var self = this;
@@ -419,29 +435,31 @@
       var completeTableContent = tableContent || [];
       if (advancedContent && advancedContent.content) {
         completeTableContent = completeTableContent.concat(advancedContent.content);
+      } else if (Array.isArray(advancedContent)) {
+        _.each(advancedContent, function(arrEntry){
+          if (arrEntry.content) {
+            completeTableContent = completeTableContent.concat(arrEntry.content);
+          }
+        });
       }
 
       _.each(completeTableContent, function (row) {
         self.modalBindValidation(row);
         if (row.type === self.tables.SELECT2) {
-          // handle select2
-
-          var options = {
-            tags: row.tags || [],
-            showSearchBox: false,
-            minimumResultsForSearch: -1,
-            width: '336px'
-          };
-
-          if (row.maxEntrySize) {
-            options.maximumSelectionSize = row.maxEntrySize;
-          }
-
-          $('#' + row.id).select2(options);
+          self.handleSelect2Row(row);
         }
 
         if (row.type === self.tables.TABLE) {
-          row.rows.forEach(row => _.each(row, self.modalBindValidation, self));
+          row.rows.forEach(row => {
+            _.each(row, self.modalBindValidation, self);
+
+            _.each(row, function(innerRow) {
+              if (innerRow.type === self.tables.SELECT2) {
+                innerRow.width = "resolve";
+                self.handleSelect2Row(innerRow);
+              }
+            });
+          });
         }
       });
 
@@ -450,24 +468,37 @@
         this.delegateEvents();
       }
 
-      if ($('#accordion2')) {
-        $('#accordion2 .accordion-toggle').bind('click', function () {
-          if ($('#collapseOne').is(':visible')) {
-            $('#collapseOne').hide();
-            setTimeout(function () {
-              $('.accordion-toggle').addClass('collapsed');
-            }, 100);
-          } else {
-            $('#collapseOne').show();
-            setTimeout(function () {
-              $('.accordion-toggle').removeClass('collapsed');
-            }, 100);
-          }
+      let enableAccordion = function (counter) {
+        const timeoutDuration = 100;
+        if ($(`#accordion${counter}`)) {
+          $(`#accordion${counter} .accordion-toggle`).bind('click', function () {
+            if ($(`#collapseOne${counter}`).is(':visible')) {
+              $(`#collapseOne${counter}`).hide();
+              setTimeout(function () {
+                $(`#accordion${counter} .accordion-toggle`).addClass('collapsed');
+              }, timeoutDuration);
+            } else {
+              $(`#collapseOne${counter}`).show();
+              setTimeout(function () {
+                $(`#accordion${counter} .accordion-toggle`).removeClass('collapsed');
+              }, timeoutDuration);
+            }
+          });
+          $(`#collapseOne${counter}`).hide();
+          setTimeout(function () {
+            $(`#accordion${counter} .accordion-toggle`).addClass('collapsed');
+          }, timeoutDuration);
+        }
+      };
+
+      if (advancedContent && Array.isArray(advancedContent)) {
+        let c = 2;
+        _.each(advancedContent, function(entry) {
+          enableAccordion(c);
+          c++;
         });
-        $('#collapseOne').hide();
-        setTimeout(function () {
-          $('.accordion-toggle').addClass('collapsed');
-        }, 100);
+      } else if (advancedContent) {
+        enableAccordion(2);
       }
 
       if (!divID) {