Skip to content

Commit

Permalink
Bug fix/views web UI part 2 (#14848)
Browse files Browse the repository at this point in the history 
* modalView supports now multiple advanced sections, added two m ore accordion containers to arangosearch creation window

* remove console log, add possibility to skip label rendering

* no labels for search advanced sections

* fix styling of a table inside of a modal accordion

* move add row button into thead

* preperation for switch row btns

* more work on UI refactorting related to views - this COMMIT eventually must be removed
  • Loading branch information
@hkernbach
hkernbach committed Oct 4, 2021
1 parent 6e3df2f commit c3722d7
Show file tree
Hide file tree
Showing 93 changed files with 230 additions and 3,328 deletions.
2 changes: 1 addition & 1 deletion js/apps/system/_admin/aardvark/APP/frontend/css/bootstrap.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5621,7 +5621,7 @@ a.badge:hover {
}

.accordion {
margin-bottom: 20px;
margin-bottom: 0;
}

.accordion-group {
Expand Down
75 changes: 48 additions & 27 deletions js/apps/system/_admin/aardvark/APP/frontend/js/templates/modalTable.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<%
let advancedCounter = 2;
function createInput(row) {
switch(row.type) {
case 'text':
Expand Down Expand Up @@ -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>
<% } %>
Expand All @@ -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>
Expand All @@ -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) { %>
Expand Down Expand Up @@ -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);
} %>
97 changes: 64 additions & 33 deletions js/apps/system/_admin/aardvark/APP/frontend/js/views/modalView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,7 @@
type: this.tables.TABLE,
head,
rows,
style
style: style + " ; display: table; "
};
},

Expand All @@ -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;
Expand Down Expand Up @@ -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);
}
});
});
}
});

Expand All @@ -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) {
Expand Down

0 comments on commit c3722d7

Please sign in to comment.