Skip to content

GitLab

Commit 12d2c503 authored by Athina Bekakou's avatar Athina Bekakou
Browse files
Options

admin-ui: Extend tables.js 

Add functionality for Filters' Compact View.
parent 583d14c4
Hide whitespace changes
Inline Side-by-side
Showing with 322 additions and 47 deletions
snf-admin-app/synnefo_admin/admin/static/js/tables.js
View file @ 12d2c503
......@@ -5,40 +5,10 @@ $(document).ready(function() {
var $actionbar = $('.actionbar');
if($actionbar.length > 0) {
var $infoBlock = $('.info-block'),
infoBlockMarg = $infoBlock.css('marginRight'),
actionbarTop = $actionbar.offset().top,
actionBarWidth = $actionbar.outerWidth(true),
$win = $(window),
isFixed = 0,
navHeight = $('.main-nav').outerHeight(true),
filtersHeight = $('.filters').outerHeight();
function processScroll() {
var i, scrollTop = $win.scrollTop();
var bigWin = $win.width() > 1200;
if(scrollTop >= navHeight+filtersHeight && !isFixed && bigWin) {
isFixed = 1;
$actionbar.addClass('fixed');
$actionbar.css('top', navHeight);
if(!$infoBlock.hasClass('.fixed-arround')) {
$infoBlock.addClass('fixed-arround');
$infoBlock.css('marginLeft', actionBarWidth);
}
}
else if(scrollTop <= navHeight+filtersHeight && isFixed){
isFixed = 0;
$actionbar.removeClass('fixed');
if($infoBlock.hasClass('fixed-arround')) {
$infoBlock.removeClass('fixed-arround');
$infoBlock.css('marginLeft', infoBlockMarg);
}
}
}
sticker();
//processScroll();
//$win.on('scroll', processScroll);
sticker();
}
else {
$('.compact-view').addClass('no-margin-left');
}
var $lastClicked = null;
......@@ -88,8 +58,9 @@ $(document).ready(function() {
var tableSelectedDomID = '#table-items-selected'
var tableMassiveDomID = '#total-list'
table = $(tableDomID).DataTable({
"autoWidth": false,
"autoWidth": false,
"paging": true,
"searching": false,
// "stateSave": true,
"processing": true,
"serverSide": serverside,
......@@ -99,7 +70,7 @@ $(document).ready(function() {
var prefix = 'sSearch_';
if(!$.isEmptyObject(filters)) {
if(!_.isEmpty(filters)) {
for (var prop in filters) {
data[prefix+prop] = filters[prop];
}
......@@ -179,7 +150,6 @@ $(document).ready(function() {
});
$('.notify').on('click', '.clear-reload', function(e) {
e.preventDefault();
console.log('hi')
resetAll(tableDomID);
$(tableDomID).dataTable().api().ajax.reload();
......@@ -189,7 +159,7 @@ $(document).ready(function() {
function isSelected() {
var tableLength = table.rows()[0].length;
var selectedL = selected.items.length;
if(selectedL !== 0 && tableLength !== 0) { // ***
if(selectedL !== 0 && tableLength !== 0) {
var dataLength = table.row(0).data().length
var extraIndex = dataLength - 1;
for(var j = 0; j<tableLength; j++) { // index of rows start from zero
......@@ -235,7 +205,7 @@ $(document).ready(function() {
var rowL = rowsArray.length;
var extraCol = rowsArray[0].length; //last column
for (var i=0; i<rowL; i++) {
rowsArray[i][extraCol] = response.extra[i] // ***
rowsArray[i][extraCol] = response.extra[i];
}
}
return response.aaData;
......@@ -748,12 +718,12 @@ $(document).ready(function() {
var noError = true;
var itemsNum = $modal.find('tbody tr').length;
if(selected.items.length === 0) {
e.stopPropagation();
snf.modals.showError($modal, 'no-selected');
noError = false;
}
if($modal.attr('data-type') === 'contact') {
noError = snf.modals.validateContactForm($modal);
var validForm = snf.modals.validateContactForm($modal);
noError = noError && validForm;
}
if(!noError) {
e.preventDefault();
......@@ -855,8 +825,8 @@ $(document).ready(function() {
}
$tableBody.append(htmlRows); // should change
$actionBtn.attr('data-ids','['+idsArray+']');
updateCounter($counter, idsArray.length); // ***
updateCounter($counter, idsArray.length);
if(idsArray.length >= maxVisible) {
$btn.css('display', 'block');
}
......@@ -905,6 +875,12 @@ $(document).ready(function() {
/* Filters */
var filters = {};
$('.filter:not(.hidden)').first().find('input').focus();
//var filtersHeightTotal = $('.filters').css('height');
$('.filters').css('min-height', '60px');
/* Standard View Functionality */
function dropdownSelect(filterEl) {
var $dropdownList = $(filterEl).find('.choices');
......@@ -999,7 +975,7 @@ $(document).ready(function() {
}
}
else {
if(filters[key].lenght === 1) {
if(filters[key].lenght === 1) { // to be checked
delete filters[key];
}
else {
......@@ -1015,7 +991,7 @@ $(document).ready(function() {
$input.keyup(function(e) {
// if enter or space is pressed do nothing
if(e.which !== '32' && e.which !== '13') {
if(e.which !== 32 && e.which !== 13) {
var key, value;
key = $(this).data('filter');
value = $.trim($(this).val());
......@@ -1024,7 +1000,6 @@ $(document).ready(function() {
if (filters[key] === '') {
delete filters[key];
}
if(snf.timer === 0) {
snf.timer = 1;
setTimeout(function() {
......@@ -1038,5 +1013,305 @@ $(document).ready(function() {
textFilter('.filter-text');
dropdownSelect('.filters .filter-dropdown .dropdown');
});
/* Change Filters' View */
$('.search-mode input').click(function(e) {
e.stopPropagation();
var $visFilters = $(this).closest('.search-mode').siblings('.filter:not(invisible)');
var $invisFilters = $(this).closest('.search-mode').siblings('.filter.invisible');
$visFilters.addClass('invisible').hide();
if($invisFilters.hasClass('compact-view')) {
$invisFilters.fadeIn(300).css('display', 'inline');
}
else {
$invisFilters.fadeIn(300).css('display', 'inline-block');
}
$invisFilters.each(function() {
$(this).removeClass('invisible');
});
$(this).closest('.search-mode').siblings('.filter:not(.invisible)').first().find('input').focus();
if(!$('.compact-view').hasClass('invisible')) {
standardToCompact();
}
});
/* Tranfer the search terms of standard view to compact view */
function standardToCompact() {
var $advFilt = $('.filters').find('input[data-filter=compact-view]');
var updated = true;
hideFilterError();
$advFilt.val(filtersToString());
};
function filtersToString() {
var text = '';
var newTerm;
for(var prop in filters) {
if(filtersInfo[prop] === 'text') {
newTerm = prop + ': ' + filters[prop];
if(text.length == 0) {
text = newTerm;
}
else {
text = text + ' ' + newTerm;
}
}
else {
newTerm = prop + ': ' + filters[prop].toString();
if(text.length === 0) {
text = newTerm;
}
else {
text = text + ' ' + newTerm;
}
}
}
return text;
};
/* Compact View Functionality */
$('.filters .compact-view').keyup(function(e) {
if(e.which === 13) {
$('.exec-search').trigger('click');
}
});
$('.filters .toggle-instructions').click(function (e) {
e.preventDefault();
var that = this;
$(this).find('.arrow').toggleClass('snf-angle-up snf-angle-down');
if(!$(this).hasClass('open')) {
$(this).addClass('open')
}
$(this).siblings('.content').stop().slideToggle(function() {
if($(that).hasClass('open') && $(this).css('display') === 'none') {
$(that).removeClass('open');
}
});
})
var filtersInfo = {};
var tempFilters = {};
var filtersResetValue = {};
var filtersValidValues = {};
/* Extract keys and values for filtersInfo, filtersResetValue, filtersValidValues the standard view */
$('.filters').find('.filter:not(.compact-view)').each(function(index) {
var key = $(this).find('*[data-filter]').attr('data-filter');
var type; // possible values: 'singe-choice', 'multi-choice', 'text'
var resetValue;
if($(this).find('*[data-filter]').hasClass('dropdown')) {
type = ($(this).closest('.filter-dropdown').hasClass('filter-boolean')? 'single-choice' : 'multi-choice');
resetValue = $(this).find('li.reset').text().toUpperCase();
filtersResetValue[key] = resetValue;
filtersValidValues[key] = [];
$(this).find('li:not(.divider)').each(function() {
filtersValidValues[key].push($(this).text().toUpperCase());
});
}
else {
type = 'text';
}
filtersInfo[key] = type;
});
$('.exec-search').click(function(e) {
e.preventDefault();
tempFilters = {};
var text = $(this).siblings('.form-group').find('input').val().trim();
hideFilterError();
if(text.length > 0) {
var terms = text.split(' ');
var key = 'unknown', value;
var termsL = terms.length;
var keyIndex;
var lastkey;
var filterType;
var isKey = false;
for(var i=0; i<termsL; i++) {
terms[i] = terms[i].trim();
for(var prop in filtersInfo) {
if(terms[i].substring(0, prop.length+1).toUpperCase() === prop.toUpperCase() + ':') {
key = prop;
value = terms[i].substring(prop.length + 1).trim();
isKey = true;
break;
}
}
if(!isKey) {
value = terms[i];
}
if(!tempFilters[key]) {
tempFilters[key] = value;
}
else if(value.length > 0) {
tempFilters[key] = tempFilters[key] + ' ' + value;
}
isKey = false;
}
}
if(!_.isEmpty(tempFilters)) {
for(var filter in tempFilters) {
for(var prop in filtersInfo) {
if(prop === filter && (filtersInfo[prop] === 'single-choice' || filtersInfo[prop] === 'multi-choice')) {
tempFilters[filter] = tempFilters[filter].replace(/\s*,\s*/g ,',').split(',');
break;
}
}
}
}
compactToStandard();
});
function compactToStandard() {
var $filters = $('.filters');
var $choicesLi;
var valuesL;
var validValues = [];
var valid = true;
var temp;
if(_.isEmpty(tempFilters) && !_.isEmpty(filters)) {
filters = {};
$(tableDomID).dataTable().api().ajax.reload();
}
else {
if(tempFilters['unknown']) {
showFilterError(tempFilters['unknown']);
valid = false;
}
for(var prop in tempFilters) {
if(prop !== 'unknown') {
temp = checkValues(prop);
if(valid) {
valid = temp;
}
}
}
}
// execution
if(valid) {
resetBasicFilters();
execFiltering();
}
};
function checkValues(key) {
var wrongTerm;
var isWrong = false;
if(filtersInfo[key] === 'text') {
if(tempFilters[key] === '') {
isWrong = true;
}
}
else if(!isWrong) {
var valuesUpperCased = $.map(tempFilters[key], function(item, index) {
return item.toUpperCase();
});
var valuesL = valuesUpperCased.length;
for(var i=0; i<valuesL; i++) {
if(filtersValidValues[key].indexOf(valuesUpperCased[i]) === -1) {
isWrong = true;
break;
}
}
if(!isWrong) {
if(valuesUpperCased.indexOf(filtersResetValue[key])!==-1 && tempFilters[key].length>1) {
isWrong = true;
}
else if(filtersInfo[key] === 'single-choice' && tempFilters[key].length > 1) {
isWrong = true;
}
}
}
if(isWrong) {
wrongTerm = key + ': ' + tempFilters[key].toString();
showFilterError(wrongTerm);
delete tempFilters[key];
}
return !isWrong;
};
function execFiltering() {
var $choicesLi, valuesL;
var $filters = $('.filters')
for(var prop in tempFilters) {
if(prop !== 'unknown') {
if(filtersInfo[prop] === 'text'){
$filters.find('input[data-filter="' + prop + '"]').val(tempFilters[prop]);
$filters.find('input[data-filter="' + prop + '"]').trigger('keyup');
}
else {
$choicesLi = $filters.find('*[data-filter="' + prop + '"] .choices').find('li');
valuesL = tempFilters[prop].length;
for(var i=0; i<valuesL; i++) { // for each filter
$choicesLi.each(function() {
if(tempFilters[prop][i].toUpperCase() === $(this).text().toUpperCase()) {
if(!$(this).hasClass('active')) {
$(this).find('a').trigger('click');
}
}
});
}
}
}
}
};
function showFilterError(wrongTerm) {
var msg, addition, prevMsg;
$errorDescr = $('.compact-view').find('.error-description');
$errorSign = $('.compact-view').find('.error-sign');
if($errorDescr.text() === '') {
msg = 'Invalid search: "' + wrongTerm + '" is not valid.';
}
else {
prevMsg = $errorDescr.text();
addition = ', "' + wrongTerm + '" are not valid.';
msg = prevMsg.replace('term:', 'terms:');
msg = msg.replace(' are not valid.', addition);
msg = msg.replace(' is not valid.', addition);
}
$errorDescr.text(msg);
$errorSign.css('opacity', 1)
};
function hideFilterError() {
$('.compact-view').find('.error-sign').css('opacity', 0);
$('.compact-view').find('.error-description').text('');
};
function resetBasicFilters() {
$('.filters .filter-dropdown:not(.filter-boolean) li:not(.reset)').each(function() {
if($(this).hasClass('active')) {
$(this).find('a').trigger('click');
}
});
$('.filters .filter-dropdown:not(.filter-boolean) li.reset').each(function() {
if(!$(this).hasClass('active')) {
$(this).find('a').trigger('click');
}
});
$('.filters .filter-dropdown.filter-boolean li.reset').each(function() {
if(!$(this).hasClass('active')) {
$(this).find('a').trigger('click');
}
});
$('.filters .filter-text').find('input').each(function() {
if($(this).val().length !== 0) {
$(this).val('');
$(this).trigger('keyup')
}
});
};
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment