added column filters to column picker in TableAjax

SE/se-lib/TableAjax.php

@@ -1621,16 +1621,24 @@ class TableAjax extends ViewAjax {
 				var span = $('<span class="caret"></span>').appendTo(btn);
 				var ul = $('<ul class="dropdown-menu" style="max-height:250px;overflow:auto;">').appendTo(node);
 
+				var columnFilters = priv.modelColFilter_getFilters();
+				var selectedFilter = priv.modelColFilter_getSelected();
+				$.each(columnFilters, function(idx, colFltr) {
+					var li = $('<li></li>').appendTo(ul),
+							selected = (selectedFilter && selectedFilter == colFltr.name)? 'checked="checked"' : '',
+							input = '<input ' + selected + ' type="radio" style="margin:0"/>',
+							a = $('<a href="#" data-col_filter="' + colFltr.name + '" style="padding:0px 20px;">' + input + ' ' + colFltr.label + '</a>').appendTo(li);
+				});
+				$('<li class="divider"></li>').appendTo(ul);
 				$.each(_data.cols, function(col, props) {
 					if (props.type != "unique" && col != 'ID') {
 						var li = $('<li></li>').appendTo(ul),
-								a = $('<a href="#" style="padding:0px 20px;"></a>').appendTo(li),
-								label = props.friendly || col;
-						label = label.replace(/<br\/?>/g, ' ');
-						$('<input {0} type="checkbox" title="{1}" value="{1}" style="margin:0">&nbsp;{2}</input>'.f((props.hidden) ? '' : 'checked', col, label)).appendTo(a);
+								label = (props.friendly || col).replace(/<br\/?>/g, ' '),
+								input = '<input {0} type="checkbox" title="{1}" value="{1}" style="margin:0"/>&nbsp;{2}'.f((props.hidden) ? '' : 'checked', col, label),
+								a = $('<a href="#" style="padding:0px 20px;">' + input + '</a>').appendTo(li);
 					}
 				});
-				node.on('click', 'input', priv.columnPickerClicked);
+				node.on('click', 'input[type="checkbox"]', priv.columnPickerClicked);
 				node.on('click', 'a', priv.columnPickerLinkClicked);
 			} else {
 				node = $('<span class="' + nodeClass + '"></span>');
@@ -2565,7 +2573,7 @@ class TableAjax extends ViewAjax {
 			var column = $(this).val();
 
 			//toggle column visibility
-			_data.cols[column].hidden = !_data.cols[column].hidden;
+			priv.modelColFilter_toggleColumn(column);
 
 			priv.saveHiddenCols();
 
@@ -2573,25 +2581,126 @@ class TableAjax extends ViewAjax {
 			jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body']);
 		};
 
-		priv.columnPickerLinkClicked = function(e) {
-			e.stopPropagation();
-			e.preventDefault();
-
-			var input$ = $(this).find('input');
-			if (input$.length != 1) return;
+		priv.modelColFilter_init = function() {
+			var isAllSelected = true;
+			if (undefined === _state._modelColFilter) {
+				var columnFilters = [];
+				{
+					var fltrAll = {'name': 'all', 'label': 'Wszystkie', visibleCols: []};
+					$.each(_data.cols, function(col, props) {
+						if ("unique" == props.type) return;
+						fltrAll.visibleCols.push(col);
+						if (_data.cols[col].hidden) isAllSelected = false;
+					});
+					columnFilters.push(fltrAll);
+				}
+				{
+					var fltrMostUsed = {'name': 'most_used', 'label': 'Najczęściej używane', visibleCols: []};
+					var fltrMostUsedLimit = 10;
+					$.each(_data.cols, function(col, props) {
+						if ("unique" == props.type) return;
+						if (fltrMostUsedLimit-- > 0) {
+							fltrMostUsed.visibleCols.push(col);
+						}
+					});
+					columnFilters.push(fltrMostUsed);
+				}
 
-			var column = input$.val();
-			if (!column) return;
+				_state._modelColFilter = {
+					selected: (isAllSelected)? 'all' : null,
+					filters: columnFilters
+				};
+			}
+		};
+		priv.modelColFilter_getFilters = function() {
+			priv.modelColFilter_init();
+			return _state._modelColFilter.filters;
+		};
+		priv.modelColFilter_getSelected = function() {
+			priv.modelColFilter_init();
+			return _state._modelColFilter.selected;
+		};
+		priv.modelColFilter_setFilter = function(filterKey) {
+			priv.modelColFilter_init();
+			_state._modelColFilter.selected = filterKey;
 
-			input$.prop("checked", !input$.is(':checked'));
+			priv.modelColFilter_uiUncheckAllColFilters();
+			priv.modelColFilter_uiCheckColFilter(filterKey);
+		};
+		priv.modelColFilter_toggleColumn = function(column, value) {
+			priv.modelColFilter_init();
+			_state._modelColFilter.selected = null;
+			if (!_data.cols[column] || !_data.cols[column]) return;
+			_data.cols[column].hidden = (undefined !== value)? value : !_data.cols[column].hidden;
+
+			priv.modelColFilter_uiUncheckAllColFilters();
+			{
+				var isAllSelected = true;
+				$.each(_data.cols, function(col, props) {
+					if ("unique" == props.type) return;
+					if (_data.cols[col].hidden) isAllSelected = false;
+				});
+				if (isAllSelected) {
+					_state._modelColFilter.selected = 'all';
+					priv.modelColFilter_uiCheckColFilter('all');
+				}
+			}
+		};
+		priv.modelColFilter_uiUncheckAllColFilters = function() {
+			var nodeClass = 'tblAjax__' + 'footer__toolbar__columnPicker',
+					currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass)
+			;
+			currentNode.find('input[type="radio"]').prop("checked", false);
+		};
+		priv.modelColFilter_uiCheckColFilter = function(filterKey) {
+			var nodeClass = 'tblAjax__' + 'footer__toolbar__columnPicker',
+					currentNode = $(_uiNodeCont).next('.foot').find('.' + nodeClass)
+			;
+			currentNode.find('input[type="radio"]').each(function(idx, input) {
+				var input$ = jQuery(input);
+				if (filterKey == jQuery(input$).parent().data('col_filter')) {
+					input$.prop("checked", true);
+				} else {
+					input$.prop("checked", false);
+				}
+			});
+		};
 
-			//toggle column visibility
-			_data.cols[column].hidden = !_data.cols[column].hidden;
+		priv.columnPickerLinkClicked = function(e) {
+			e.stopPropagation();
+			var input$ = $(this).find('input'),
+					col_filter = $(this).data('col_filter'),
+					columnFilters = priv.modelColFilter_getFilters()
+			;
 
-			priv.saveHiddenCols();
+			if (col_filter) {
+				var filter = null;
+				$.each(columnFilters, function(idx, colFltr) {
+					if (col_filter == colFltr.name) {
+						filter = colFltr;
+					}
+				});
+				if (!filter) return;
+				$.each(_data.cols, function(col, props) {
+					var isHidden = (-1 === filter.visibleCols.indexOf(col));
+					priv.modelColFilter_toggleColumn(col, isHidden);
+				});
+				priv.modelColFilter_setFilter(col_filter);
+				priv.saveHiddenCols();
+				jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body', 'foot__columnPicker']);
+			} else {
+				e.preventDefault();
+				if (input$.length != 1) return;
+				var column = input$.val();
+				if (!column) return;
+				//toggle column visibility
+				priv.modelColFilter_toggleColumn(column);
+				input$.prop("checked", !input$.is(':checked'));// update view
+				priv.saveHiddenCols();
+				//_data.cols[column].index = new priv.ext.XDate();
+				jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body']);
+			}
 
-			//_data.cols[column].index = new priv.ext.XDate();
-			jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body']);
 		};
 
 		priv.columnHideClicked = function(e) {
@@ -2605,7 +2714,7 @@ class TableAjax extends ViewAjax {
 			}
 
 			//toggle column visibility
-			_data.cols[column].hidden = !_data.cols[column].hidden;
+			priv.modelColFilter_toggleColumn(column);
 
 			priv.saveHiddenCols();