test table ajax more functions popover

SE/se-lib/TableAjax.php

@@ -796,7 +796,7 @@ class TableAjax extends ViewAjax {
 			}
 		};
 
-		priv.renderRow = function (props) {
+		priv.renderRow = function(props) {
 			var rowNode = $('<tr></tr>'),
 					uniqueColName = _state.uniqueCol,
 					rowPK = (uniqueColName in props)? props[uniqueColName] : null,
@@ -804,10 +804,9 @@ class TableAjax extends ViewAjax {
 			;
 
 			if (priv.options.rowFunctions || priv.options.filtersClean) {
-				cellNode = $('<td class="text-right stickyCol1"></td>').appendTo(rowNode);
-				$.map(priv.options.rowFunctions, function(funObj, funName){
-					$(funObj.f(rowPK)).appendTo(cellNode);
-				});
+				cellNode = priv.renderCellRowFunctions(priv.options.rowFunctions, rowPK, props);
+				cellNode.addClass('text-right stickyCol1');
+				cellNode.appendTo(rowNode);
 			}
 
 			//create checkbox
@@ -974,7 +973,7 @@ class TableAjax extends ViewAjax {
 				if (columnProps._tsRetId) {
 					showTooltip = false;
 					if (columnProps._tsRetId > 0) {
-						cellCnt.on('click', {id:rowPK, col:columnName, friendly:columnProps.friendly, value:format.f(val)}, priv.popoverCell);
+						cellCnt.on('click', {id:rowPK, col:columnName, friendly:columnProps.friendly, value:format.f(val)}, priv.popoverCellTypeSpecial);
 					}
 				}
 
@@ -988,6 +987,126 @@ class TableAjax extends ViewAjax {
 			return rowNode;
 		};
 
+		priv.renderCellRowFunctions = function(rowFunctions, rowPK, rowProps) {
+			var cellNode = $('<td></td>'),
+					keys = Object.keys(rowFunctions),
+					total = keys.length,
+					moreFuncBtnNode,
+					moreFunctions = [],
+					idx
+			;
+			idx = keys.indexOf('hist');
+			if (idx !== -1) {
+				histFunc = keys.splice(idx, 1);
+				keys.push('hist');
+			}
+			moreFunctions = keys.splice(3);
+			keys.forEach(function(key) {
+				var funObj = rowFunctions[key];
+				$(funObj.f(rowPK)).appendTo(cellNode);
+			});
+			moreFuncBtnNode = $('<a href="#" style="text-decoration:none" title="Więcej funkcji" class="glyphicon glyphicon-menu-hamburger"> </a>');
+			moreFuncBtnNode.on('click', {rowPK: rowPK, rowFunctions: rowFunctions, more: moreFunctions}, priv.popoverCellMoreFunctions);
+			moreFuncBtnNode.appendTo(cellNode);
+			return cellNode;
+		};
+
+		priv.popoverCellMoreFunctions = function (e) {
+			e.preventDefault();
+			e.stopPropagation();
+console.log('priv.popoverCellMoreFunctions::rowPK', e.data.rowPK, 'moreFunctions', e.data.more, 'rowFunctions', e.data.rowFunctions);
+			if ('rowPK' in e.data && e.data.rowPK > 0) {
+				var lastId = _popoverCell.data('rowid'),
+						lastCol = _popoverCell.data('col'),
+						rowPK = e.data.rowPK,
+						moreFuncHtml = 'TODO: moreFunctions=['+e.data.more.join(',')+']';
+
+				if (lastId == e.data.rowPK && lastCol == 'moreFunctions') {
+					//_popoverCellCurrent.popover('toggle');
+				}
+				else {
+					if (_popoverCellCurrent) {
+						_popoverCellCurrent.popover('destroy');
+					}
+
+					_popoverCell.data('rowid', rowPK);
+					_popoverCell.data('col', 'rowFunctions');
+					_popoverCell.html(moreFuncHtml + '<div class="popoverCellContent" style="white-space:normal"></div>');
+
+					_popoverCellCurrent = jQuery(e.currentTarget);
+					// title : '<span class="text-info"><strong>title</strong></span> <button type="button" id="close" class="close">&times;</button>'
+					var opts = {
+						placement: 'right',
+						trigger: 'click',
+						template: '',
+						html: true,
+						content: _popoverCell.html()
+					}
+					opts.template += '<div class="popover" role="tooltip">';
+					{
+						opts.template += '<div class="arrow"></div>';
+						//opts.template += '<h3 class="popover-title"></h3>';
+						opts.template += '<div style="width:300px;display:block;position:relative;padding:0 20px 0 0;">';
+						{
+							opts.template += '<div class="popover-title">';
+							opts.template += '</div>';
+							opts.template += '<button type="button" class="close" onclick="return hidePopover();" style="position:absolute;right:0;top:0;">&times;</button>';
+						}
+						opts.template += '</div>';
+						opts.template += '<div class="popover-content"></div>';
+					}
+					opts.template += '</div>';
+
+					_popoverCellCurrent.popover(opts);
+					_popoverCellCurrent.on('shown.bs.popover', function(e) {
+						if (_popoverCellCurrent) {
+							var popoverNodeId = _popoverCellCurrent.attr('aria-describedby');
+							if (popoverNodeId) {
+								jQuery('#' + popoverNodeId).css({maxWidth:'400px', width:'300px'});
+							}
+						}
+						priv.ajaxLoadMoreFunctionsCell(rowPK);
+					});
+					_popoverCellCurrent.popover('show');
+				}
+			} else {
+				if (priv.options.debug) console.log('NO data');
+				return false;
+			}
+			return;
+		};
+
+		priv.ajaxLoadMoreFunctionsCell = function(rowPK) {
+			if (_popoverCellAjaxXhr) {
+				_popoverCellAjaxXhr.abort();
+			}
+			var addHtml = '<p>TODO: more functions for ' + rowPK + '</p>';
+			_popoverCell.append(addHtml);
+			_popoverCell.find('.popoverCellContent').append(addHtml);
+
+			_popoverCellAjaxXhr = $.ajax({
+				type: 'GET',
+				url: 'index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_cls=<?php echo __CLASS__; ?>&_hash=<?php echo $this->_htmlID; ?>&_task=MORE_FUNCTIONS_CELL&ID=' + rowPK,
+				dataType: 'json',
+				contentType: "application/json; charset=utf-8",
+				data: '',
+				success: function(data) {
+					if (data && 'success' === data.type) {
+						var addHtml = '';
+						addHtml += 'TODO: ...';
+						//_popoverCell.append(addHtml);// cache
+						if (_popoverCellCurrent) {
+							var popoverNodeId = _popoverCellCurrent.attr('aria-describedby');
+							if (popoverNodeId) {
+								jQuery('#' + popoverNodeId).find('.popoverCellContent').append(addHtml);
+							}
+						}
+					}
+				}
+			});
+
+		};
+
 		priv.renderRowEmptyNode = function() {
 			var rowNode = $('<tr></tr>');
 
@@ -2533,7 +2652,7 @@ class TableAjax extends ViewAjax {
 				_popoverCellAjaxXhr.abort();
 			}
 
-			var _popoverCellAjaxXhr = $.ajax({
+			_popoverCellAjaxXhr = $.ajax({
 				type: 'GET',
 				url: 'index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_cls=<?php echo __CLASS__; ?>&_hash=<?php echo $this->_htmlID; ?>&_task=TYPESPECIALL_CELL&ID=' + id + '&col=' + col,
 				dataType: 'json',
@@ -2550,22 +2669,30 @@ class TableAjax extends ViewAjax {
 							addHtml += '<a href="' + url + '">Wyszukaj ' + req.data.items[i].id + '</a>: ' + req.data.items[i].label;
 							addHtml += '<br>';
 						}
-						_popoverCell.append(addHtml);
-						jQuery('#popoverCellContent').append(addHtml);
+						//_popoverCell.append(addHtml);// cache
+						if (_popoverCellCurrent) {
+							var popoverNodeId = _popoverCellCurrent.attr('aria-describedby');
+							if (popoverNodeId) {
+								jQuery('#' + popoverNodeId).find('.popoverCellContent').append(addHtml);
+							}
+						}
 					}
 				}
 			});
 
 		};
 
-		priv.popoverCell = function (e) {
+		priv.popoverCellTypeSpecial = function (e) {
 			e.preventDefault();
 			e.stopPropagation();
 			if ('id' in e.data && 'col' in e.data && e.data.id > 0) {
 				var lastId = _popoverCell.data('rowid'),
-					lastCol = _popoverCell.data('col');
+						lastCol = _popoverCell.data('col'),
+						rowPK = e.data.id,
+						colName = e.data.col
+				;
 
-				if (lastId == e.data.id && lastCol == e.data.col) {
+				if (lastId == rowPK && lastCol == colName) {
 					//_popoverCellCurrent.popover('toggle');
 				}
 				else {
@@ -2573,14 +2700,9 @@ class TableAjax extends ViewAjax {
 						_popoverCellCurrent.popover('destroy');
 					}
 
-					_popoverCell.data('rowid', e.data.id);
-					_popoverCell.data('col', e.data.col);
-					_popoverCell.html(e.data.value + '<div id="popoverCellContent" style="white-space:normal"></div>');
-					if (_data.cols[e.data.col]) {
-						if (_data.cols[e.data.col]._tsRetId > 0) {
-							priv.ajaxLoadTypeSpeciallCell(e.data.id, e.data.col);
-						}
-					}
+					_popoverCell.data('rowid', rowPK);
+					_popoverCell.data('col', colName);
+					_popoverCell.html(e.data.value + '<div class="popoverCellContent loading" style="white-space:normal"></div>');
 
 					_popoverCellCurrent = jQuery(e.currentTarget);
 					// title : '<span class="text-info"><strong>title</strong></span> <button type="button" id="close" class="close">&times;</button>'
@@ -2588,12 +2710,19 @@ class TableAjax extends ViewAjax {
 						placement: 'left'
 						, trigger: 'click'
 					//	, title: e.data.col + '<a href="#" class="glyphicon glyphicon-remove pull-right" onclick="return hidePopover();"></a>'
-						, title: '<div style="display:block;position:relative;padding:0 20px 0 0;">' + (e.data.friendly || e.data.col) + ' <button type="button" class="close" onclick="return hidePopover();" style="position:absolute;right:0;top:0;">&times;</button>' + '</div>'
+						, title: '<div style="display:block;position:relative;padding:0 20px 0 0;">' + (e.data.friendly || colName) + ' <button type="button" class="close" onclick="return hidePopover();" style="position:absolute;right:0;top:0;">&times;</button>' + '</div>'
 						, html: true
 						, content: _popoverCell.html()
 					}
 
 					_popoverCellCurrent.popover(opts);
+					if (_data.cols[colName]) {
+						if (_data.cols[colName]._tsRetId > 0) {
+							_popoverCellCurrent.on('shown.bs.popover', function() {
+								priv.ajaxLoadTypeSpeciallCell(rowPK, colName);
+							});
+						}
+					}
 					_popoverCellCurrent.popover('show');
 				}
 			} else {
@@ -3375,6 +3504,7 @@ function <?php echo $jsToogleFiltrProcesuFunctionName; ?>(n) {
 				break;
 			}
 			case 'TYPESPECIALL_CELL': {
+sleep(1);// TODO: RMME
 				$id = V::get('ID', 0, $_REQUEST, 'int');
 				$col = V::get('col', '', $_REQUEST);
 				if ($id > 0 && !empty($col)) {
@@ -3384,6 +3514,11 @@ function <?php echo $jsToogleFiltrProcesuFunctionName; ?>(n) {
 				}
 				break;
 			}
+			case 'MORE_FUNCTIONS_CELL': {
+sleep(1);// TODO: RMME
+				$this->sendAjaxResponseJson('ajaxMoreFunctionsCell', $_REQUEST);
+				break;
+			}
 			case 'HIDDEN_COLS_SAVE': {
 				$this->sendAjaxResponseJson('ajaxHiddenColsSave', $_POST);
 				break;
@@ -5668,4 +5803,16 @@ jQuery(document).ready(function(){
 		return $response;
 	}
 
+	function ajaxMoreFunctionsCell($args) {// ajax task 'MORE_FUNCTIONS_CELL'
+		$id = V::get('ID', 0, $args, 'int');
+		if ($id <= 0) {
+			throw new HttpException("404", 404);
+		}
+
+		$response = new stdClass();
+		$response->type = 'success';
+		$response->msg = 'TODO: L.' . __LINE__;
+		return $response;
+	}
+
 }