diff --git a/src/main/java/com/commafeed/frontend/pages/HomePage.java b/src/main/java/com/commafeed/frontend/pages/HomePage.java
index 05366746..20b7c8cd 100644
--- a/src/main/java/com/commafeed/frontend/pages/HomePage.java
+++ b/src/main/java/com/commafeed/frontend/pages/HomePage.java
@@ -14,6 +14,7 @@ import com.commafeed.frontend.references.angularuibootstrap.AngularUIBootstrapRe
import com.commafeed.frontend.references.angularuistate.AngularUIStateReference;
import com.commafeed.frontend.references.csstreeview.CssTreeViewReference;
import com.commafeed.frontend.references.mousetrap.MouseTrapReference;
+import com.commafeed.frontend.references.nggrid.NGGridReference;
import com.commafeed.frontend.references.nginfinitescroll.NGInfiniteScrollReference;
import com.commafeed.frontend.references.ngupload.NGUploadReference;
import com.commafeed.frontend.references.select2.Select2Reference;
@@ -37,6 +38,7 @@ public class HomePage extends BasePage {
Select2Reference.renderHead(response);
SpinJSReference.renderHead(response);
MouseTrapReference.renderHead(response);
+ NGGridReference.renderHead(response);
CssTreeViewReference.renderHead(response);
diff --git a/src/main/java/com/commafeed/frontend/references/nggrid/NGGridReference.java b/src/main/java/com/commafeed/frontend/references/nggrid/NGGridReference.java
new file mode 100644
index 00000000..a49a14af
--- /dev/null
+++ b/src/main/java/com/commafeed/frontend/references/nggrid/NGGridReference.java
@@ -0,0 +1,35 @@
+package com.commafeed.frontend.references.nggrid;
+
+import java.util.Arrays;
+
+import org.apache.wicket.markup.head.CssHeaderItem;
+import org.apache.wicket.markup.head.HeaderItem;
+import org.apache.wicket.markup.head.IHeaderResponse;
+import org.apache.wicket.markup.head.JavaScriptHeaderItem;
+import org.apache.wicket.request.resource.CssResourceReference;
+import org.apache.wicket.request.resource.JavaScriptResourceReference;
+
+import com.commafeed.frontend.references.angular.AngularReference;
+
+public class NGGridReference extends JavaScriptResourceReference {
+ private static final long serialVersionUID = 1L;
+
+ public static final NGGridReference INSTANCE = new NGGridReference();
+
+ private NGGridReference() {
+ super(NGGridReference.class, "ng-grid-2.0.2.js");
+ }
+
+ @SuppressWarnings("unchecked")
+ @Override
+ public Iterable getDependencies() {
+ return Arrays.asList(JavaScriptHeaderItem
+ .forReference(AngularReference.INSTANCE), CssHeaderItem
+ .forReference(new CssResourceReference(NGGridReference.class,
+ "ng-grid.css")));
+ }
+
+ public static void renderHead(final IHeaderResponse response) {
+ response.render(JavaScriptHeaderItem.forReference(INSTANCE));
+ }
+}
\ No newline at end of file
diff --git a/src/main/java/com/commafeed/frontend/references/nggrid/ng-grid-2.0.2.js b/src/main/java/com/commafeed/frontend/references/nggrid/ng-grid-2.0.2.js
new file mode 100644
index 00000000..7c95af76
--- /dev/null
+++ b/src/main/java/com/commafeed/frontend/references/nggrid/ng-grid-2.0.2.js
@@ -0,0 +1,3185 @@
+/***********************************************
+* ng-grid JavaScript Library
+* Authors: https://github.com/angular-ui/ng-grid/blob/master/README.md
+* License: MIT (http://www.opensource.org/licenses/mit-license.php)
+* Compiled At: 03/08/2013 17:03
+***********************************************/
+(function(window) {
+'use strict';
+// the # of rows we want to add to the top and bottom of the rendered grid rows
+var EXCESS_ROWS = 6;
+var SCROLL_THRESHOLD = 4;
+var ASC = "asc";
+// constant for sorting direction
+var DESC = "desc";
+// constant for sorting direction
+var NG_FIELD = '_ng_field_';
+var NG_DEPTH = '_ng_depth_';
+var NG_HIDDEN = '_ng_hidden_';
+var NG_COLUMN = '_ng_column_';
+var CUSTOM_FILTERS = /CUSTOM_FILTERS/g;
+var COL_FIELD = /COL_FIELD/g;
+var DISPLAY_CELL_TEMPLATE = /DISPLAY_CELL_TEMPLATE/g;
+var EDITABLE_CELL_TEMPLATE = /EDITABLE_CELL_TEMPLATE/g;
+var TEMPLATE_REGEXP = /<.+>/;
+if (!window.ng) {
+ window.ng = {};
+}
+window.ngGrid = {};
+window.ngGrid.i18n = {};
+
+// Declare app level module which depends on filters, and services
+var ngGridServices = angular.module('ngGrid.services', []);
+var ngGridDirectives = angular.module('ngGrid.directives', []);
+var ngGridFilters = angular.module('ngGrid.filters', []);
+// initialization of services into the main module
+angular.module('ngGrid', ['ngGrid.services', 'ngGrid.directives', 'ngGrid.filters']);
+//set event binding on the grid so we can select using the up/down keys
+ng.moveSelectionHandler = function($scope, elm, evt, grid) {
+ if ($scope.selectionService.selectedItems === undefined) {
+ return true;
+ }
+ var charCode = evt.which || evt.keyCode,
+ newColumnIndex,
+ lastInRow = false,
+ firstInRow = false,
+ rowIndex = $scope.selectionService.lastClickedRow.rowIndex;
+
+ if ($scope.col) {
+ newColumnIndex = $scope.col.index;
+ }
+ if(charCode != 37 && charCode != 38 && charCode != 39 && charCode != 40 && charCode != 9 && charCode != 13){
+ return true;
+ }
+
+ if($scope.enableCellSelection){
+ if(charCode == 9){ //tab key
+ evt.preventDefault();
+ }
+ var focusedOnFirstColumn = $scope.showSelectionCheckbox ? $scope.col.index == 1 : $scope.col.index == 0;
+ var focusedOnFirstVisibleColumns = $scope.$index == 1 || $scope.$index == 0;
+ var focusedOnLastVisibleColumns = $scope.$index == ($scope.renderedColumns.length - 1) || $scope.$index == ($scope.renderedColumns.length - 2);
+ var focusedOnLastColumn = $scope.col.index == ($scope.columns.length - 1);
+
+ if(charCode == 37 || charCode == 9 && evt.shiftKey){
+ if (focusedOnFirstVisibleColumns) {
+ if(focusedOnFirstColumn && charCode == 9 && evt.shiftKey){
+ grid.$viewport.scrollLeft(grid.$canvas.width());
+ newColumnIndex = $scope.columns.length - 1;
+ firstInRow = true;
+ } else {
+ grid.$viewport.scrollLeft(grid.$viewport.scrollLeft() - $scope.col.width);
+ }
+ }
+ if(!focusedOnFirstColumn){
+ newColumnIndex -= 1;
+ }
+ } else if(charCode == 39 || charCode == 9 && !evt.shiftKey){
+ if (focusedOnLastVisibleColumns) {
+ if(focusedOnLastColumn && charCode == 9 && !evt.shiftKey){
+ grid.$viewport.scrollLeft(0);
+ newColumnIndex = $scope.showSelectionCheckbox ? 1 : 0;
+ lastInRow = true;
+ } else {
+ grid.$viewport.scrollLeft(grid.$viewport.scrollLeft() + $scope.col.width);
+ }
+ }
+ if(!focusedOnLastColumn){
+ newColumnIndex += 1;
+ }
+ }
+ }
+
+ var items;
+ if ($scope.configGroups.length > 0) {
+ items = grid.rowFactory.parsedData.filter(function (row) {
+ return !row.isAggRow;
+ });
+ } else {
+ items = grid.filteredRows;
+ }
+
+ var offset = 0;
+ if(rowIndex != 0 && (charCode == 38 || charCode == 13 && evt.shiftKey || charCode == 9 && evt.shiftKey && firstInRow)){ //arrow key up or shift enter or tab key and first item in row
+ offset = -1;
+ } else if(rowIndex != items.length - 1 && (charCode == 40 || charCode == 13 && !evt.shiftKey || charCode == 9 && lastInRow)){//arrow key down, enter, or tab key and last item in row?
+ offset = 1;
+ }
+
+ if (offset) {
+ var r = items[rowIndex + offset];
+ if (r.beforeSelectionChange(r, evt)) {
+ r.continueSelection(evt);
+ $scope.$emit('ngGridEventDigestGridParent');
+
+ if ($scope.selectionService.lastClickedRow.renderedRowIndex >= $scope.renderedRows.length - EXCESS_ROWS - 2) {
+ grid.$viewport.scrollTop(grid.$viewport.scrollTop() + $scope.rowHeight);
+ } else if ($scope.selectionService.lastClickedRow.renderedRowIndex <= EXCESS_ROWS + 2) {
+ grid.$viewport.scrollTop(grid.$viewport.scrollTop() - $scope.rowHeight);
+ }
+ }
+ }
+
+ if($scope.enableCellSelection){
+ setTimeout(function(){
+ $scope.domAccessProvider.focusCellElement($scope, $scope.renderedColumns.indexOf($scope.columns[newColumnIndex]));
+ },3);
+ }
+ return false;
+};
+
+if (!String.prototype.trim) {
+ String.prototype.trim = function() {
+ return this.replace(/^\s+|\s+$/g, '');
+ };
+}
+if (!Array.prototype.indexOf) {
+ Array.prototype.indexOf = function(elt /*, from*/) {
+ var len = this.length >>> 0;
+ var from = Number(arguments[1]) || 0;
+ from = (from < 0) ? Math.ceil(from) : Math.floor(from);
+ if (from < 0) {
+ from += len;
+ }
+ for (; from < len; from++) {
+ if (from in this && this[from] === elt) {
+ return from;
+ }
+ }
+ return -1;
+ };
+}
+if (!Array.prototype.filter) {
+ Array.prototype.filter = function(fun /*, thisp */) {
+ "use strict";
+ var t = Object(this);
+ var len = t.length >>> 0;
+ if (typeof fun !== "function") {
+ throw new TypeError();
+ }
+ var res = [];
+ var thisp = arguments[1];
+ for (var i = 0; i < len; i++) {
+ if (i in t) {
+ var val = t[i]; // in case fun mutates this
+ if (fun.call(thisp, val, i, t)) {
+ res.push(val);
+ }
+ }
+ }
+ return res;
+ };
+}
+ngGridFilters.filter('checkmark', function() {
+ return function(input) {
+ return input ? '\u2714' : '\u2718';
+ };
+});
+ngGridFilters.filter('ngColumns', function() {
+ return function(input) {
+ return input.filter(function(col) {
+ return !col.isAggCol;
+ });
+ };
+});
+ngGridServices.factory('$domUtilityService',['$utilityService', function($utils) {
+ var domUtilityService = {};
+ var regexCache = {};
+ var getWidths = function() {
+ var $testContainer = $('');
+ $testContainer.appendTo('body');
+ // 1. Run all the following measurements on startup!
+ //measure Scroll Bars
+ $testContainer.height(100).width(100).css("position", "absolute").css("overflow", "scroll");
+ $testContainer.append('');
+ domUtilityService.ScrollH = ($testContainer.height() - $testContainer[0].clientHeight);
+ domUtilityService.ScrollW = ($testContainer.width() - $testContainer[0].clientWidth);
+ $testContainer.empty();
+ //clear styles
+ $testContainer.attr('style', '');
+ //measure letter sizes using a pretty typical font size and fat font-family
+ $testContainer.append('M');
+ domUtilityService.LetterW = $testContainer.children().first().width();
+ $testContainer.remove();
+ };
+ domUtilityService.eventStorage = {};
+ domUtilityService.AssignGridContainers = function($scope, rootEl, grid) {
+ grid.$root = $(rootEl);
+ //Headers
+ grid.$topPanel = grid.$root.find(".ngTopPanel");
+ grid.$groupPanel = grid.$root.find(".ngGroupPanel");
+ grid.$headerContainer = grid.$topPanel.find(".ngHeaderContainer");
+ $scope.$headerContainer = grid.$headerContainer;
+
+ grid.$headerScroller = grid.$topPanel.find(".ngHeaderScroller");
+ grid.$headers = grid.$headerScroller.children();
+ //Viewport
+ grid.$viewport = grid.$root.find(".ngViewport");
+ //Canvas
+ grid.$canvas = grid.$viewport.find(".ngCanvas");
+ //Footers
+ grid.$footerPanel = grid.$root.find(".ngFooterPanel");
+
+ $scope.$watch(function () {
+ return grid.$viewport.scrollLeft();
+ }, function (newLeft) {
+ return grid.$headerContainer.scrollLeft(newLeft);
+ });
+ domUtilityService.UpdateGridLayout($scope, grid);
+ };
+ domUtilityService.getRealWidth = function (obj) {
+ var width = 0;
+ var props = { visibility: "hidden", display: "block" };
+ var hiddenParents = obj.parents().andSelf().not(':visible');
+ $.swap(hiddenParents[0], props, function () {
+ width = obj.outerWidth();
+ });
+ return width;
+ };
+ domUtilityService.UpdateGridLayout = function($scope, grid) {
+ //catch this so we can return the viewer to their original scroll after the resize!
+ var scrollTop = grid.$viewport.scrollTop();
+ grid.elementDims.rootMaxW = grid.$root.width();
+ if (grid.$root.is(':hidden')) {
+ grid.elementDims.rootMaxW = domUtilityService.getRealWidth(grid.$root);
+ }
+ grid.elementDims.rootMaxH = grid.$root.height();
+ //check to see if anything has changed
+ grid.refreshDomSizes();
+ $scope.adjustScrollTop(scrollTop, true); //ensure that the user stays scrolled where they were
+ };
+ domUtilityService.numberOfGrids = 0;
+ domUtilityService.BuildStyles = function($scope, grid, digest) {
+ var rowHeight = grid.config.rowHeight,
+ $style = grid.$styleSheet,
+ gridId = grid.gridId,
+ css,
+ cols = $scope.columns,
+ sumWidth = 0;
+
+ if (!$style) {
+ $style = $('#' + gridId);
+ if (!$style[0]) {
+ $style = $("").appendTo(grid.$root);
+ }
+ }
+ $style.empty();
+ var trw = $scope.totalRowWidth();
+ css = "." + gridId + " .ngCanvas { width: " + trw + "px; }" +
+ "." + gridId + " .ngRow { width: " + trw + "px; }" +
+ "." + gridId + " .ngCanvas { width: " + trw + "px; }" +
+ "." + gridId + " .ngHeaderScroller { width: " + (trw + domUtilityService.ScrollH + 2) + "px}";
+ for (var i = 0; i < cols.length; i++) {
+ var col = cols[i];
+ if (col.visible !== false) {
+ var colLeft = col.pinned ? grid.$viewport.scrollLeft() + sumWidth : sumWidth;
+ css += "." + gridId + " .col" + i + " { width: " + col.width + "px; left: " + colLeft + "px; height: " + rowHeight + "px }" +
+ "." + gridId + " .colt" + i + " { width: " + col.width + "px; }";
+ sumWidth += col.width;
+ }
+ };
+ if ($utils.isIe) { // IE
+ $style[0].styleSheet.cssText = css;
+ } else {
+ $style[0].appendChild(document.createTextNode(css));
+ }
+ grid.$styleSheet = $style;
+ if (digest) {
+ $scope.adjustScrollLeft(grid.$viewport.scrollLeft());
+ domUtilityService.digest($scope);
+ }
+ };
+ domUtilityService.setColLeft = function(col, colLeft, grid) {
+ if (grid.$styleSheet) {
+ var regex = regexCache[col.index];
+ if (!regex) {
+ regex = regexCache[col.index] = new RegExp("\.col" + col.index + " \{ width: [0-9]+px; left: [0-9]+px");
+ }
+ var str = grid.$styleSheet.html();
+ var newStr = str.replace(regex, "\.col" + col.index + " \{ width: " + col.width + "px; left: " + colLeft + "px");
+ if ($utils.isIe) { // IE
+ setTimeout(function() {
+ grid.$styleSheet.html(newStr);
+ });
+ } else {
+ grid.$styleSheet.html(newStr);
+ }
+ }
+ };
+ domUtilityService.setColLeft.immediate = 1;
+ domUtilityService.RebuildGrid = function($scope, grid){
+ domUtilityService.UpdateGridLayout($scope, grid);
+ if (grid.config.maintainColumnRatios) {
+ grid.configureColumnWidths();
+ }
+ $scope.adjustScrollLeft(grid.$viewport.scrollLeft());
+ domUtilityService.BuildStyles($scope, grid, true);
+ };
+
+ domUtilityService.digest = function($scope) {
+ if (!$scope.$root.$$phase) {
+ $scope.$digest();
+ }
+ };
+ domUtilityService.ScrollH = 17; // default in IE, Chrome, & most browsers
+ domUtilityService.ScrollW = 17; // default in IE, Chrome, & most browsers
+ domUtilityService.LetterW = 10;
+ getWidths();
+ return domUtilityService;
+}]);
+ngGridServices.factory('$sortService', ['$parse', function($parse) {
+ var sortService = {};
+ sortService.colSortFnCache = {}; // cache of sorting functions. Once we create them, we don't want to keep re-doing it
+ // this takes an piece of data from the cell and tries to determine its type and what sorting
+ // function to use for it
+ // @item - the cell data
+ sortService.guessSortFn = function(item) {
+ var itemType = typeof(item);
+ //check for numbers and booleans
+ switch (itemType) {
+ case "number":
+ return sortService.sortNumber;
+ case "boolean":
+ return sortService.sortBool;
+ case "string":
+ // if number string return number string sort fn. else return the str
+ return item.match(/^-?[£$¤]?[\d,.]+%?$/) ? sortService.sortNumberStr : sortService.sortAlpha;
+ default:
+ //check if the item is a valid Date
+ if (Object.prototype.toString.call(item) === '[object Date]') {
+ return sortService.sortDate;
+ } else {
+ //finally just sort the basic sort...
+ return sortService.basicSort;
+ }
+ }
+ };
+ //#region Sorting Functions
+ sortService.basicSort = function(a, b) {
+ if (a == b) {
+ return 0;
+ }
+ if (a < b) {
+ return -1;
+ }
+ return 1;
+ };
+ sortService.sortNumber = function(a, b) {
+ return a - b;
+ };
+ sortService.sortNumberStr = function(a, b) {
+ var numA, numB, badA = false, badB = false;
+ numA = parseFloat(a.replace(/[^0-9.-]/g, ''));
+ if (isNaN(numA)) {
+ badA = true;
+ }
+ numB = parseFloat(b.replace(/[^0-9.-]/g, ''));
+ if (isNaN(numB)) {
+ badB = true;
+ }
+ // we want bad ones to get pushed to the bottom... which effectively is "greater than"
+ if (badA && badB) {
+ return 0;
+ }
+ if (badA) {
+ return 1;
+ }
+ if (badB) {
+ return -1;
+ }
+ return numA - numB;
+ };
+ sortService.sortAlpha = function(a, b) {
+ var strA = a.toLowerCase(),
+ strB = b.toLowerCase();
+ return strA == strB ? 0 : (strA < strB ? -1 : 1);
+ };
+ sortService.sortDate = function(a, b) {
+ var timeA = a.getTime(),
+ timeB = b.getTime();
+ return timeA == timeB ? 0 : (timeA < timeB ? -1 : 1);
+ };
+ sortService.sortBool = function(a, b) {
+ if (a && b) {
+ return 0;
+ }
+ if (!a && !b) {
+ return 0;
+ } else {
+ return a ? 1 : -1;
+ }
+ };
+ //#endregion
+ // the core sorting logic trigger
+ sortService.sortData = function(sortInfo, data /*datasource*/) {
+ // first make sure we are even supposed to do work
+ if (!data || !sortInfo) {
+ return;
+ }
+ var l = sortInfo.fields.length,
+ order = sortInfo.fields,
+ col,
+ direction,
+ // IE9 HACK.... omg, I can't reference data array within the sort fn below. has to be a separate reference....!!!!
+ d = data.slice(0);
+ //now actually sort the data
+ data.sort(function (itemA, itemB) {
+ var tem = 0,
+ indx = 0,
+ sortFn;
+ while (tem == 0 && indx < l) {
+ // grab the metadata for the rest of the logic
+ col = sortInfo.columns[indx];
+ direction = sortInfo.directions[indx],
+ sortFn = sortService.getSortFn(col, d);
+
+ var propA = $parse(order[indx])(itemA);
+ var propB = $parse(order[indx])(itemB);
+ // we want to allow zero values to be evaluated in the sort function
+ if ((!propA && propA != 0) || (!propB && propB != 0)) {
+ // we want to force nulls and such to the bottom when we sort... which effectively is "greater than"
+ if (!propB && !propA) {
+ tem = 0;
+ } else if (!propA) {
+ tem = 1;
+ } else if (!propB) {
+ tem = -1;
+ }
+ } else {
+ tem = sortFn(propA, propB);
+ }
+ indx++;
+ }
+ //made it this far, we don't have to worry about null & undefined
+ if (direction === ASC) {
+ return tem;
+ } else {
+ return 0 - tem;
+ }
+ });
+ };
+ sortService.Sort = function(sortInfo, data) {
+ if (sortService.isSorting) {
+ return;
+ }
+ sortService.isSorting = true;
+ sortService.sortData(sortInfo, data);
+ sortService.isSorting = false;
+ };
+ sortService.getSortFn = function(col, data) {
+ var sortFn = undefined, item;
+ //see if we already figured out what to use to sort the column
+ if (sortService.colSortFnCache[col.field]) {
+ sortFn = sortService.colSortFnCache[col.field];
+ } else if (col.sortingAlgorithm != undefined) {
+ sortFn = col.sortingAlgorithm;
+ sortService.colSortFnCache[col.field] = col.sortingAlgorithm;
+ } else { // try and guess what sort function to use
+ item = data[0];
+ if (!item) {
+ return sortFn;
+ }
+ sortFn = sortService.guessSortFn($parse(col.field)(item));
+ //cache it
+ if (sortFn) {
+ sortService.colSortFnCache[col.field] = sortFn;
+ } else {
+ // we assign the alpha sort because anything that is null/undefined will never get passed to
+ // the actual sorting function. It will get caught in our null check and returned to be sorted
+ // down to the bottom
+ sortFn = sortService.sortAlpha;
+ }
+ }
+ return sortFn;
+ };
+ return sortService;
+}]);
+
+ngGridServices.factory('$utilityService', ['$parse', function($parse) {
+ var utils = {
+ visualLength: function(node) {
+ var elem = document.getElementById('testDataLength');
+ if (!elem) {
+ elem = document.createElement('SPAN');
+ elem.id = "testDataLength";
+ elem.style.visibility = "hidden";
+ document.body.appendChild(elem);
+ }
+ $(elem).css('font', $(node).css('font'));
+ elem.innerHTML = $(node).text();
+ return elem.offsetWidth;
+ },
+ forIn: function(obj, action) {
+ for (var prop in obj) {
+ if (obj.hasOwnProperty(prop)) {
+ action(obj[prop], prop);
+ }
+ }
+ },
+ evalProperty: function (entity, path) {
+ return $parse(path)(entity);
+ },
+ endsWith: function(str, suffix) {
+ if (!str || !suffix || typeof str != "string") {
+ return false;
+ }
+ return str.indexOf(suffix, str.length - suffix.length) !== -1;
+ },
+ isNullOrUndefined: function(obj) {
+ if (obj === undefined || obj === null) {
+ return true;
+ }
+ return false;
+ },
+ getElementsByClassName: function(cl) {
+ var retnode = [];
+ var myclass = new RegExp('\\b' + cl + '\\b');
+ var elem = document.getElementsByTagName('*');
+ for (var i = 0; i < elem.length; i++) {
+ var classes = elem[i].className;
+ if (myclass.test(classes)) {
+ retnode.push(elem[i]);
+ }
+ }
+ return retnode;
+ },
+ newId: (function() {
+ var seedId = new Date().getTime();
+ return function() {
+ return seedId += 1;
+ };
+ })(),
+ seti18n: function($scope, language) {
+ var $langPack = window.ngGrid.i18n[language];
+ for (var label in $langPack) {
+ $scope.i18n[label] = $langPack[label];
+ }
+ },
+
+ // we copy KO's ie detection here bc it isn't exported in the min versions of KO
+ // Detect IE versions for workarounds (uses IE conditionals, not UA string, for robustness)
+ ieVersion: (function() {
+ var version = 3, div = document.createElement('div'), iElems = div.getElementsByTagName('i');
+ // Keep constructing conditional HTML blocks until we hit one that resolves to an empty fragment
+ while (div.innerHTML = '',
+ iElems[0]) ;
+ return version > 4 ? version : undefined;
+ })()
+ };
+
+ $.extend(utils, {
+ isIe: (function() {
+ return utils.ieVersion !== undefined;
+ })()
+ });
+ return utils;
+}]);
+ng.Aggregate = function (aggEntity, rowFactory, rowHeight) {
+ var self = this;
+ self.rowIndex = 0;
+ self.offsetTop = self.rowIndex * rowHeight;
+ self.entity = aggEntity;
+ self.label = aggEntity.gLabel;
+ self.field = aggEntity.gField;
+ self.depth = aggEntity.gDepth;
+ self.parent = aggEntity.parent;
+ self.children = aggEntity.children;
+ self.aggChildren = aggEntity.aggChildren;
+ self.aggIndex = aggEntity.aggIndex;
+ self.collapsed = true;
+ self.isAggRow = true;
+ self.offsetleft = aggEntity.gDepth * 25;
+ self.aggLabelFilter = aggEntity.aggLabelFilter;
+ self.toggleExpand = function() {
+ self.collapsed = self.collapsed ? false : true;
+ if (self.orig) {
+ self.orig.collapsed = self.collapsed;
+ }
+ self.notifyChildren();
+ };
+ self.setExpand = function(state) {
+ self.collapsed = state;
+ self.notifyChildren();
+ };
+ self.notifyChildren = function () {
+ var longest = Math.max(rowFactory.aggCache.length, self.children.length);
+ for (var i = 0; i < longest; i++) {
+ if (self.aggChildren[i]) {
+ self.aggChildren[i].entity[NG_HIDDEN] = self.collapsed;
+ if (self.collapsed) {
+ self.aggChildren[i].setExpand(self.collapsed);
+ }
+ }
+ if (self.children[i]) {
+ self.children[i][NG_HIDDEN] = self.collapsed;
+ }
+ if (i > self.aggIndex && rowFactory.aggCache[i]) {
+ var agg = rowFactory.aggCache[i];
+ var offset = (30 * self.children.length);
+ agg.offsetTop = self.collapsed ? agg.offsetTop - offset : agg.offsetTop + offset;
+ }
+ };
+ rowFactory.renderedChange();
+ };
+ self.aggClass = function() {
+ return self.collapsed ? "ngAggArrowCollapsed" : "ngAggArrowExpanded";
+ };
+ self.totalChildren = function() {
+ if (self.aggChildren.length > 0) {
+ var i = 0;
+ var recurse = function(cur) {
+ if (cur.aggChildren.length > 0) {
+ angular.forEach(cur.aggChildren, function(a) {
+ recurse(a);
+ });
+ } else {
+ i += cur.children.length;
+ }
+ };
+ recurse(self);
+ return i;
+ } else {
+ return self.children.length;
+ }
+ };
+ self.copy = function () {
+ var ret = new ng.Aggregate(self.entity, rowFactory, rowHeight);
+ ret.orig = self;
+ return ret;
+ };
+};
+ng.Column = function(config, $scope, grid, domUtilityService, $templateCache, $utils) {
+ var self = this,
+ colDef = config.colDef,
+ delay = 500,
+ clicks = 0,
+ timer = null;
+ self.width = colDef.width;
+ self.groupIndex = 0;
+ self.isGroupedBy = false;
+ self.minWidth = !colDef.minWidth ? 50 : colDef.minWidth;
+ self.maxWidth = !colDef.maxWidth ? 9000 : colDef.maxWidth;
+ self.enableCellEdit = config.enableCellEdit || colDef.enableCellEdit;
+ self.headerRowHeight = config.headerRowHeight;
+ self.displayName = colDef.displayName || colDef.field;
+ self.index = config.index;
+ self.isAggCol = config.isAggCol;
+ self.cellClass = colDef.cellClass;
+ self.sortPriority = undefined;
+ self.zIndex = function() {
+ return self.pinned ? 5 : 0;
+ };
+ self.cellFilter = colDef.cellFilter ? colDef.cellFilter : "";
+ self.field = colDef.field;
+ self.aggLabelFilter = colDef.cellFilter || colDef.aggLabelFilter;
+ self.visible = $utils.isNullOrUndefined(colDef.visible) || colDef.visible;
+ self.sortable = false;
+ self.resizable = false;
+ self.pinnable = false;
+ self.pinned = colDef.pinned;
+ self.originalIndex = self.index;
+ self.groupable = $utils.isNullOrUndefined(colDef.groupable) || colDef.groupable;
+ if (config.enableSort) {
+ self.sortable = $utils.isNullOrUndefined(colDef.sortable) || colDef.sortable;
+ }
+ if (config.enableResize) {
+ self.resizable = $utils.isNullOrUndefined(colDef.resizable) || colDef.resizable;
+ }
+ if (config.enablePinning) {
+ self.pinnable = $utils.isNullOrUndefined(colDef.pinnable) || colDef.pinnable;
+ }
+ self.sortDirection = undefined;
+ self.sortingAlgorithm = colDef.sortFn;
+ self.headerClass = colDef.headerClass;
+ self.cursor = self.sortable ? 'pointer' : 'default';
+ self.headerCellTemplate = colDef.headerCellTemplate || $templateCache.get('headerCellTemplate.html');
+ self.cellTemplate = colDef.cellTemplate || $templateCache.get('cellTemplate.html').replace(CUSTOM_FILTERS, self.cellFilter ? "|" + self.cellFilter : "");
+ if(self.enableCellEdit) {
+ self.cellEditTemplate = $templateCache.get('cellEditTemplate.html');
+ self.editableCellTemplate = colDef.editableCellTemplate || $templateCache.get('editableCellTemplate.html');
+ }
+ if (colDef.cellTemplate && !TEMPLATE_REGEXP.test(colDef.cellTemplate)) {
+ self.cellTemplate = $.ajax({
+ type: "GET",
+ url: colDef.cellTemplate,
+ async: false
+ }).responseText;
+ }
+ if (self.enableCellEdit && colDef.editableCellTemplate && !TEMPLATE_REGEXP.test(colDef.editableCellTemplate)) {
+ self.editableCellTemplate = $.ajax({
+ type: "GET",
+ url: colDef.editableCellTemplate,
+ async: false
+ }).responseText;
+ }
+ if (colDef.headerCellTemplate && !TEMPLATE_REGEXP.test(colDef.headerCellTemplate)) {
+ self.headerCellTemplate = $.ajax({
+ type: "GET",
+ url: colDef.headerCellTemplate,
+ async: false
+ }).responseText;
+ }
+ self.colIndex = function() {
+ return "col" + self.index + " colt" + self.index;
+ };
+ self.groupedByClass = function() {
+ return self.isGroupedBy ? "ngGroupedByIcon" : "ngGroupIcon";
+ };
+ self.toggleVisible = function() {
+ self.visible = !self.visible;
+ };
+ self.showSortButtonUp = function() {
+ return self.sortable ? self.sortDirection === DESC : self.sortable;
+ };
+ self.showSortButtonDown = function() {
+ return self.sortable ? self.sortDirection === ASC : self.sortable;
+ };
+ self.noSortVisible = function() {
+ return !self.sortDirection;
+ };
+ self.sort = function(evt) {
+ if (!self.sortable) {
+ return true; // column sorting is disabled, do nothing
+ }
+ var dir = self.sortDirection === ASC ? DESC : ASC;
+ self.sortDirection = dir;
+ config.sortCallback(self, evt);
+ return false;
+ };
+ self.gripClick = function() {
+ clicks++; //count clicks
+ if (clicks === 1) {
+ timer = setTimeout(function() {
+ //Here you can add a single click action.
+ clicks = 0; //after action performed, reset counter
+ }, delay);
+ } else {
+ clearTimeout(timer); //prevent single-click action
+ config.resizeOnDataCallback(self); //perform double-click action
+ clicks = 0; //after action performed, reset counter
+ }
+ };
+ self.gripOnMouseDown = function(event) {
+ if (event.ctrlKey && !self.pinned) {
+ self.toggleVisible();
+ domUtilityService.BuildStyles($scope, grid);
+ return true;
+ }
+ event.target.parentElement.style.cursor = 'col-resize';
+ self.startMousePosition = event.clientX;
+ self.origWidth = self.width;
+ $(document).mousemove(self.onMouseMove);
+ $(document).mouseup(self.gripOnMouseUp);
+ return false;
+ };
+ self.onMouseMove = function(event) {
+ var diff = event.clientX - self.startMousePosition;
+ var newWidth = diff + self.origWidth;
+ self.width = (newWidth < self.minWidth ? self.minWidth : (newWidth > self.maxWidth ? self.maxWidth : newWidth));
+ domUtilityService.BuildStyles($scope, grid);
+ return false;
+ };
+ self.gripOnMouseUp = function (event) {
+ $(document).off('mousemove', self.onMouseMove);
+ $(document).off('mouseup', self.gripOnMouseUp);
+ event.target.parentElement.style.cursor = 'default';
+ $scope.adjustScrollLeft(0);
+ domUtilityService.digest($scope);
+ return false;
+ };
+ self.copy = function() {
+ var ret = new ng.Column(config, $scope, grid, domUtilityService, $templateCache);
+ ret.isClone = true;
+ ret.orig = self;
+ return ret;
+ };
+ self.setVars = function (fromCol) {
+ self.orig = fromCol;
+ self.width = fromCol.width;
+ self.groupIndex = fromCol.groupIndex;
+ self.isGroupedBy = fromCol.isGroupedBy;
+ self.displayName = fromCol.displayName;
+ self.index = fromCol.index;
+ self.isAggCol = fromCol.isAggCol;
+ self.cellClass = fromCol.cellClass;
+ self.cellFilter = fromCol.cellFilter;
+ self.field = fromCol.field;
+ self.aggLabelFilter = fromCol.aggLabelFilter;
+ self.visible = fromCol.visible;
+ self.sortable = fromCol.sortable;
+ self.resizable = fromCol.resizable;
+ self.pinnable = fromCol.pinnable;
+ self.pinned = fromCol.pinned;
+ self.originalIndex = fromCol.originalIndex;
+ self.sortDirection = fromCol.sortDirection;
+ self.sortingAlgorithm = fromCol.sortingAlgorithm;
+ self.headerClass = fromCol.headerClass;
+ self.headerCellTemplate = fromCol.headerCellTemplate;
+ self.cellTemplate = fromCol.cellTemplate;
+ self.cellEditTemplate = fromCol.cellEditTemplate;
+ };
+};
+
+ng.Dimension = function(options) {
+ this.outerHeight = null;
+ this.outerWidth = null;
+ $.extend(this, options);
+};
+ng.DomAccessProvider = function(grid) {
+ var self = this, previousColumn;
+ self.selectInputElement = function(elm){
+ var node = elm.nodeName.toLowerCase();
+ if(node == 'input' || node == 'textarea'){
+ elm.select();
+ }
+ };
+
+ self.focusCellElement = function($scope, index){
+ if($scope.selectionProvider.lastClickedRow){
+ var columnIndex = index != undefined ? index : previousColumn;
+ var elm = $scope.selectionProvider.lastClickedRow.clone ? $scope.selectionProvider.lastClickedRow.clone.elm : $scope.selectionProvider.lastClickedRow.elm;
+ if (columnIndex != undefined && elm) {
+ var columns = angular.element(elm[0].children).filter(function () { return this.nodeType != 8;}); //Remove html comments for IE8
+ var i = Math.max(Math.min($scope.renderedColumns.length - 1, columnIndex), 0);
+ if(grid.config.showSelectionCheckbox && angular.element(columns[i]).scope() && angular.element(columns[i]).scope().col.index == 0){
+ i = 1; //don't want to focus on checkbox
+ }
+ if (columns[i]) {
+ columns[i].children[0].focus();
+ }
+ previousColumn = columnIndex;
+ }
+ }
+ };
+
+ var changeUserSelect = function(elm, value) {
+ elm.css({
+ '-webkit-touch-callout': value,
+ '-webkit-user-select': value,
+ '-khtml-user-select': value,
+ '-moz-user-select': value == 'none'
+ ? '-moz-none'
+ : value,
+ '-ms-user-select': value,
+ 'user-select': value
+ });
+ };
+
+ self.selectionHandlers = function($scope, elm){
+ var doingKeyDown = false;
+ elm.bind('keydown', function(evt) {
+ if (evt.keyCode == 16) { //shift key
+ changeUserSelect(elm, 'none', evt);
+ return true;
+ } else if (!doingKeyDown) {
+ doingKeyDown = true;
+ var ret = ng.moveSelectionHandler($scope, elm, evt, grid);
+ doingKeyDown = false;
+ return ret;
+ }
+ return true;
+ });
+ elm.bind('keyup', function(evt) {
+ if (evt.keyCode == 16) { //shift key
+ changeUserSelect(elm, 'text', evt);
+ }
+ return true;
+ });
+ };
+};
+ng.EventProvider = function(grid, $scope, domUtilityService) {
+ var self = this;
+ // The init method gets called during the ng-grid directive execution.
+ self.colToMove = undefined;
+ self.groupToMove = undefined;
+ self.assignEvents = function() {
+ // Here we set the onmousedown event handler to the header container.
+ if (grid.config.jqueryUIDraggable && !grid.config.enablePinning) {
+ grid.$groupPanel.droppable({
+ addClasses: false,
+ drop: function(event) {
+ self.onGroupDrop(event);
+ }
+ });
+ $scope.$evalAsync(self.setDraggables);
+ } else {
+ grid.$groupPanel.on('mousedown', self.onGroupMouseDown).on('dragover', self.dragOver).on('drop', self.onGroupDrop);
+ grid.$headerScroller.on('mousedown', self.onHeaderMouseDown).on('dragover', self.dragOver);
+ if (grid.config.enableColumnReordering && !grid.config.enablePinning) {
+ grid.$headerScroller.on('drop', self.onHeaderDrop);
+ }
+ if (grid.config.enableRowReordering) {
+ grid.$viewport.on('mousedown', self.onRowMouseDown).on('dragover', self.dragOver).on('drop', self.onRowDrop);
+ }
+ }
+ $scope.$watch('columns', self.setDraggables, true);
+ };
+ self.dragStart = function(evt){
+ //FireFox requires there to be dataTransfer if you want to drag and drop.
+ evt.dataTransfer.setData('text', ''); //cannot be empty string
+ };
+ self.dragOver = function(evt) {
+ evt.preventDefault();
+ };
+ //For JQueryUI
+ self.setDraggables = function() {
+ if (!grid.config.jqueryUIDraggable) {
+ //Fix for FireFox. Instead of using jQuery on('dragstart', function) on find, we have to use addEventListeners for each column.
+ var columns = grid.$root.find('.ngHeaderSortColumn'); //have to iterate if using addEventListener
+ angular.forEach(columns, function(col){
+ col.setAttribute('draggable', 'true');
+ //jQuery 'on' function doesn't have dataTransfer as part of event in handler unless added to event props, which is not recommended
+ //See more here: http://api.jquery.com/category/events/event-object/
+ if (col.addEventListener) { //IE8 doesn't have drag drop or event listeners
+ col.addEventListener('dragstart', self.dragStart);
+ }
+ });
+ if (navigator.userAgent.indexOf("MSIE") != -1){
+ //call native IE dragDrop() to start dragging
+ grid.$root.find('.ngHeaderSortColumn').bind('selectstart', function () {
+ this.dragDrop();
+ return false;
+ });
+ }
+ } else {
+ grid.$root.find('.ngHeaderSortColumn').draggable({
+ helper: 'clone',
+ appendTo: 'body',
+ stack: 'div',
+ addClasses: false,
+ start: function(event) {
+ self.onHeaderMouseDown(event);
+ }
+ }).droppable({
+ drop: function(event) {
+ self.onHeaderDrop(event);
+ }
+ });
+ }
+ };
+ self.onGroupMouseDown = function(event) {
+ var groupItem = $(event.target);
+ // Get the scope from the header container
+ if (groupItem[0].className != 'ngRemoveGroup') {
+ var groupItemScope = angular.element(groupItem).scope();
+ if (groupItemScope) {
+ // set draggable events
+ if (!grid.config.jqueryUIDraggable) {
+ groupItem.attr('draggable', 'true');
+ if(this.addEventListener){//IE8 doesn't have drag drop or event listeners
+ this.addEventListener('dragstart', self.dragStart);
+ }
+ if (navigator.userAgent.indexOf("MSIE") != -1){
+ //call native IE dragDrop() to start dragging
+ groupItem.bind('selectstart', function () {
+ this.dragDrop();
+ return false;
+ });
+ }
+ }
+ // Save the column for later.
+ self.groupToMove = { header: groupItem, groupName: groupItemScope.group, index: groupItemScope.$index };
+ }
+ } else {
+ self.groupToMove = undefined;
+ }
+ };
+ self.onGroupDrop = function(event) {
+ event.stopPropagation();
+ // clear out the colToMove object
+ var groupContainer;
+ var groupScope;
+ if (self.groupToMove) {
+ // Get the closest header to where we dropped
+ groupContainer = $(event.target).closest('.ngGroupElement'); // Get the scope from the header.
+ if (groupContainer.context.className == 'ngGroupPanel') {
+ $scope.configGroups.splice(self.groupToMove.index, 1);
+ $scope.configGroups.push(self.groupToMove.groupName);
+ } else {
+ groupScope = angular.element(groupContainer).scope();
+ if (groupScope) {
+ // If we have the same column, do nothing.
+ if (self.groupToMove.index != groupScope.$index) {
+ // Splice the columns
+ $scope.configGroups.splice(self.groupToMove.index, 1);
+ $scope.configGroups.splice(groupScope.$index, 0, self.groupToMove.groupName);
+ }
+ }
+ }
+ self.groupToMove = undefined;
+ grid.fixGroupIndexes();
+ } else if (self.colToMove) {
+ if ($scope.configGroups.indexOf(self.colToMove.col) == -1) {
+ groupContainer = $(event.target).closest('.ngGroupElement'); // Get the scope from the header.
+ if (groupContainer.context.className == 'ngGroupPanel' || groupContainer.context.className == 'ngGroupPanelDescription ng-binding') {
+ $scope.groupBy(self.colToMove.col);
+ } else {
+ groupScope = angular.element(groupContainer).scope();
+ if (groupScope) {
+ // Splice the columns
+ $scope.removeGroup(groupScope.$index);
+ }
+ }
+ }
+ self.colToMove = undefined;
+ }
+ if (!$scope.$$phase) {
+ $scope.$apply();
+ }
+ };
+ //Header functions
+ self.onHeaderMouseDown = function(event) {
+ // Get the closest header container from where we clicked.
+ var headerContainer = $(event.target).closest('.ngHeaderSortColumn');
+ // Get the scope from the header container
+ var headerScope = angular.element(headerContainer).scope();
+ if (headerScope) {
+ // Save the column for later.
+ self.colToMove = { header: headerContainer, col: headerScope.col };
+ }
+ };
+ self.onHeaderDrop = function(event) {
+ if (!self.colToMove) {
+ return;
+ }
+ // Get the closest header to where we dropped
+ var headerContainer = $(event.target).closest('.ngHeaderSortColumn');
+ // Get the scope from the header.
+ var headerScope = angular.element(headerContainer).scope();
+ if (headerScope) {
+ // If we have the same column, do nothing.
+ if (self.colToMove.col == headerScope.col) {
+ return;
+ }
+ // Splice the columns
+ $scope.columns.splice(self.colToMove.col.index, 1);
+ $scope.columns.splice(headerScope.col.index, 0, self.colToMove.col);
+ grid.fixColumnIndexes();
+ // Finally, rebuild the CSS styles.
+ domUtilityService.BuildStyles($scope, grid, true);
+ // clear out the colToMove object
+ self.colToMove = undefined;
+ }
+ };
+ // Row functions
+ self.onRowMouseDown = function(event) {
+ // Get the closest row element from where we clicked.
+ var targetRow = $(event.target).closest('.ngRow');
+ // Get the scope from the row element
+ var rowScope = angular.element(targetRow).scope();
+ if (rowScope) {
+ // set draggable events
+ targetRow.attr('draggable', 'true');
+ // Save the row for later.
+ domUtilityService.eventStorage.rowToMove = { targetRow: targetRow, scope: rowScope };
+ }
+ };
+ self.onRowDrop = function(event) {
+ // Get the closest row to where we dropped
+ var targetRow = $(event.target).closest('.ngRow');
+ // Get the scope from the row element.
+ var rowScope = angular.element(targetRow).scope();
+ if (rowScope) {
+ // If we have the same Row, do nothing.
+ var prevRow = domUtilityService.eventStorage.rowToMove;
+ if (prevRow.scope.row == rowScope.row) {
+ return;
+ }
+ grid.changeRowOrder(prevRow.scope.row, rowScope.row);
+ grid.searchProvider.evalFilter();
+ // clear out the rowToMove object
+ domUtilityService.eventStorage.rowToMove = undefined;
+ // if there isn't an apply already in progress lets start one
+ domUtilityService.digest(rowScope.$root);
+ }
+ };
+
+ self.assignGridEventHandlers = function() {
+ //Chrome and firefox both need a tab index so the grid can recieve focus.
+ //need to give the grid a tabindex if it doesn't already have one so
+ //we'll just give it a tab index of the corresponding gridcache index
+ //that way we'll get the same result every time it is run.
+ //configurable within the options.
+ if (grid.config.tabIndex === -1) {
+ grid.$viewport.attr('tabIndex', domUtilityService.numberOfGrids);
+ domUtilityService.numberOfGrids++;
+ } else {
+ grid.$viewport.attr('tabIndex', grid.config.tabIndex);
+ }
+ $(window).resize(function() {
+ domUtilityService.RebuildGrid($scope,grid);
+ });
+ };
+ // In this example we want to assign grid events.
+ self.assignGridEventHandlers();
+ self.assignEvents();
+};
+
+ng.Footer = function($scope, grid) {
+ $scope.maxRows = function () {
+ var ret = Math.max($scope.pagingOptions.totalServerItems, grid.data.length);
+ return ret;
+ };
+
+ $scope.multiSelect = (grid.config.enableRowSelection && grid.config.multiSelect);
+ $scope.selectedItemCount = grid.selectedItemCount;
+ $scope.maxPages = function () {
+ return Math.ceil($scope.maxRows() / $scope.pagingOptions.pageSize);
+ };
+
+ $scope.pageForward = function() {
+ var page = $scope.pagingOptions.currentPage;
+ if ($scope.pagingOptions.totalServerItems > 0) {
+ $scope.pagingOptions.currentPage = Math.min(page + 1, $scope.maxPages());
+ } else {
+ $scope.pagingOptions.currentPage++;
+ }
+ };
+
+ $scope.pageBackward = function() {
+ var page = $scope.pagingOptions.currentPage;
+ $scope.pagingOptions.currentPage = Math.max(page - 1, 1);
+ };
+
+ $scope.pageToFirst = function() {
+ $scope.pagingOptions.currentPage = 1;
+ };
+
+ $scope.pageToLast = function() {
+ var maxPages = $scope.maxPages();
+ $scope.pagingOptions.currentPage = maxPages;
+ };
+
+ $scope.cantPageForward = function() {
+ var curPage = $scope.pagingOptions.currentPage;
+ var maxPages = $scope.maxPages();
+ if ($scope.pagingOptions.totalServerItems > 0) {
+ return !(curPage < maxPages);
+ } else {
+ return grid.data.length < 1;
+ }
+
+ };
+ $scope.cantPageToLast = function() {
+ if ($scope.pagingOptions.totalServerItems > 0) {
+ return $scope.cantPageForward();
+ } else {
+ return true;
+ }
+ };
+
+ $scope.cantPageBackward = function() {
+ var curPage = $scope.pagingOptions.currentPage;
+ return !(curPage > 1);
+ };
+};
+///
+///
+///
+ng.Grid = function ($scope, options, sortService, domUtilityService, $filter, $templateCache, $utils, $timeout) {
+ var defaults = {
+ //Define an aggregate template to customize the rows when grouped. See github wiki for more details.
+ aggregateTemplate: undefined,
+
+ //Callback for when you want to validate something after selection.
+ afterSelectionChange: function() {
+ },
+
+ /* Callback if you want to inspect something before selection,
+ return false if you want to cancel the selection. return true otherwise.
+ If you need to wait for an async call to proceed with selection you can
+ use rowItem.changeSelection(event) method after returning false initially.
+ Note: when shift+ Selecting multiple items in the grid this will only get called
+ once and the rowItem will be an array of items that are queued to be selected. */
+ beforeSelectionChange: function() {
+ return true;
+ },
+
+ //checkbox templates.
+ checkboxCellTemplate: undefined,
+ checkboxHeaderTemplate: undefined,
+
+ //definitions of columns as an array [], if not defines columns are auto-generated. See github wiki for more details.
+ columnDefs: undefined,
+
+ //*Data being displayed in the grid. Each item in the array is mapped to a row being displayed.
+ data: [],
+
+ //Data updated callback, fires every time the data is modified from outside the grid.
+ dataUpdated: function() {
+ },
+
+ //Enables cell editing.
+ enableCellEdit: false,
+
+ //Enables cell selection.
+ enableCellSelection: false,
+
+ //Enable or disable resizing of columns
+ enableColumnResize: false,
+
+ //Enable or disable reordering of columns
+ enableColumnReordering: false,
+
+ //Enable or disable HEAVY column virtualization. This turns off selection checkboxes and column pinning and is designed for spreadsheet-like data.
+ enableColumnHeavyVirt: false,
+
+ //Enables the server-side paging feature
+ enablePaging: false,
+
+ //Enable column pinning
+ enablePinning: false,
+
+ //Enable drag and drop row reordering. Only works in HTML5 compliant browsers.
+ enableRowReordering: false,
+
+ //To be able to have selectable rows in grid.
+ enableRowSelection: true,
+
+ //Enables or disables sorting in grid.
+ enableSorting: true,
+
+ // string list of properties to exclude when auto-generating columns.
+ excludeProperties: [],
+
+ /* filterOptions -
+ filterText: The text bound to the built-in search box.
+ useExternalFilter: Bypass internal filtering if you want to roll your own filtering mechanism but want to use builtin search box.
+ */
+ filterOptions: {
+ filterText: "",
+ useExternalFilter: false
+ },
+
+ //Defining the height of the footer in pixels.
+ footerRowHeight: 55,
+
+ //Initial fields to group data by. Array of field names, not displayName.
+ groups: [],
+
+ //The height of the header row in pixels.
+ headerRowHeight: 30,
+
+ //Define a header row template for further customization. See github wiki for more details.
+ headerRowTemplate: undefined,
+
+ /*Enables the use of jquery UI reaggable/droppable plugin. requires jqueryUI to work if enabled.
+ Useful if you want drag + drop but your users insist on crappy browsers. */
+ jqueryUIDraggable: false,
+
+ //Enable the use jqueryUIThemes
+ jqueryUITheme: false,
+
+ //Prevent unselections when in single selection mode.
+ keepLastSelected: true,
+
+ /*Maintains the column widths while resizing.
+ Defaults to true when using *'s or undefined widths. Can be ovverriden by setting to false.*/
+ maintainColumnRatios: undefined,
+
+ //Set this to false if you only want one item selected at a time
+ multiSelect: true,
+
+ // pagingOptions -
+
+ pagingOptions: {
+ // pageSizes: list of available page sizes.
+ pageSizes: [250, 500, 1000],
+ //pageSize: currently selected page size.
+ pageSize: 250,
+ //totalServerItems: Total items are on the server.
+ totalServerItems: 0,
+ //currentPage: the uhm... current page.
+ currentPage: 1
+ },
+
+ //Array of plugin functions to register in ng-grid
+ pinSelectionCheckbox: false,
+
+ //Array of plugin functions to register in ng-grid
+ plugins: [],
+
+ //Row height of rows in grid.
+ rowHeight: 30,
+
+ //Define a row template to customize output. See github wiki for more details.
+ rowTemplate: undefined,
+
+ //all of the items selected in the grid. In single select mode there will only be one item in the array.
+ selectedItems: [],
+
+ //Disable row selections by clicking on the row and only when the checkbox is clicked.
+ selectWithCheckboxOnly: false,
+
+ /*Enables menu to choose which columns to display and group by.
+ If both showColumnMenu and showFilter are false the menu button will not display.*/
+ showColumnMenu: false,
+
+ /*Enables display of the filterbox in the column menu.
+ If both showColumnMenu and showFilter are false the menu button will not display.*/
+ showFilter: false,
+
+ //Show or hide the footer alltogether the footer is enabled by default
+ showFooter: false,
+
+ //Show the dropzone for drag and drop grouping
+ showGroupPanel: false,
+
+ //Row selection check boxes appear as the first column.
+ showSelectionCheckbox: false,
+
+ /*Define a sortInfo object to specify a default sorting state.
+ You can also observe this variable to utilize server-side sorting (see useExternalSorting).
+ Syntax is sortinfo: { fields: ['fieldName1',' fieldName2'], direction: 'ASC'/'asc' || 'desc'/'DESC'}*/
+ sortInfo: {fields: [], columns: [], directions: [] },
+
+ //Set the tab index of the Vieport.
+ tabIndex: -1,
+ /*Prevents the internal sorting from executing.
+ The sortInfo object will be updated with the sorting information so you can handle sorting (see sortInfo)*/
+ useExternalSorting: false,
+
+ /*i18n language support. choose from the installed or included languages, en, fr, sp, etc...*/
+ i18n: 'en',
+
+ //the threshold in rows to force virtualization on
+ virtualizationThreshold: 50
+ },
+ self = this;
+ self.maxCanvasHt = 0;
+ //self vars
+ self.config = $.extend(defaults, window.ngGrid.config, options);
+
+ // override conflicting settings
+ self.config.showSelectionCheckbox = (self.config.showSelectionCheckbox && self.config.enableColumnHeavyVirt === false);
+ self.config.enablePinning = (self.config.enablePinning && self.config.enableColumnHeavyVirt === false);
+ self.config.selectWithCheckboxOnly = (self.config.selectWithCheckboxOnly && self.config.showSelectionCheckbox !== false);
+ self.config.pinSelectionCheckbox = self.config.enablePinning;
+
+ if (typeof options.columnDefs == "string") {
+ self.config.columnDefs = $scope.$eval(options.columnDefs);
+ }
+ self.rowCache = [];
+ self.rowMap = [];
+ self.gridId = "ng" + $utils.newId();
+ self.$root = null; //this is the root element that is passed in with the binding handler
+ self.$groupPanel = null;
+ self.$topPanel = null;
+ self.$headerContainer = null;
+ self.$headerScroller = null;
+ self.$headers = null;
+ self.$viewport = null;
+ self.$canvas = null;
+ self.rootDim = self.config.gridDim;
+ self.data = [];
+ self.lateBindColumns = false;
+ self.filteredRows = [];
+
+ //Templates
+ // test templates for urls and get the tempaltes via synchronous ajax calls
+ var getTemplate = function (key) {
+ var t = self.config[key];
+ var uKey = self.gridId + key + ".html";
+ if (t && !TEMPLATE_REGEXP.test(t)) {
+ $templateCache.put(uKey, $.ajax({
+ type: "GET",
+ url: t,
+ async: false
+ }).responseText);
+ } else if (t) {
+ $templateCache.put(uKey, t);
+ } else {
+ var dKey = key + ".html";
+ $templateCache.put(uKey, $templateCache.get(dKey));
+ }
+ };
+ getTemplate('rowTemplate');
+ getTemplate('aggregateTemplate');
+ getTemplate('headerRowTemplate');
+ getTemplate('checkboxCellTemplate');
+ getTemplate('checkboxHeaderTemplate');
+
+ if (typeof self.config.data == "object") {
+ self.data = self.config.data; // we cannot watch for updates if you don't pass the string name
+ }
+ self.calcMaxCanvasHeight = function() {
+ return (self.config.groups.length > 0) ? (self.rowFactory.parsedData.filter(function(e) {
+ return !e[NG_HIDDEN];
+ }).length * self.config.rowHeight) : (self.filteredRows.length * self.config.rowHeight);
+ };
+ self.elementDims = {
+ scrollW: 0,
+ scrollH: 0,
+ rowIndexCellW: 25,
+ rowSelectedCellW: 25,
+ rootMaxW: 0,
+ rootMaxH: 0
+ };
+ //self funcs
+ self.setRenderedRows = function (newRows) {
+ $scope.renderedRows.length = newRows.length;
+ for (var i = 0; i < newRows.length; i++) {
+ if (!$scope.renderedRows[i] || (newRows[i].isAggRow || $scope.renderedRows[i].isAggRow)) {
+ $scope.renderedRows[i] = newRows[i].copy();
+ $scope.renderedRows[i].collapsed = newRows[i].collapsed;
+ if (!newRows[i].isAggRow) {
+ $scope.renderedRows[i].setVars(newRows[i]);
+ }
+ } else {
+ $scope.renderedRows[i].setVars(newRows[i]);
+ }
+ $scope.renderedRows[i].rowIndex = newRows[i].rowIndex;
+ $scope.renderedRows[i].offsetTop = newRows[i].offsetTop;
+ newRows[i].renderedRowIndex = i;
+ }
+ self.refreshDomSizes();
+ $scope.$emit('ngGridEventRows', newRows);
+ };
+ self.minRowsToRender = function() {
+ var viewportH = $scope.viewportDimHeight() || 1;
+ return Math.floor(viewportH / self.config.rowHeight);
+ };
+ self.refreshDomSizes = function() {
+ var dim = new ng.Dimension();
+ dim.outerWidth = self.elementDims.rootMaxW;
+ dim.outerHeight = self.elementDims.rootMaxH;
+ self.rootDim = dim;
+ self.maxCanvasHt = self.calcMaxCanvasHeight();
+ };
+ self.buildColumnDefsFromData = function () {
+ self.config.columnDefs = [];
+ var item = self.data[0];
+ if (!item) {
+ self.lateBoundColumns = true;
+ return;
+ }
+ $utils.forIn(item, function (prop, propName) {
+ if (self.config.excludeProperties.indexOf(propName) == -1) {
+ self.config.columnDefs.push({
+ field: propName
+ });
+ }
+ });
+ };
+ self.buildColumns = function() {
+ var columnDefs = self.config.columnDefs,
+ cols = [];
+ if (!columnDefs) {
+ self.buildColumnDefsFromData();
+ columnDefs = self.config.columnDefs;
+ }
+ if (self.config.showSelectionCheckbox) {
+ cols.push(new ng.Column({
+ colDef: {
+ field: '\u2714',
+ width: self.elementDims.rowSelectedCellW,
+ sortable: false,
+ resizable: false,
+ groupable: false,
+ headerCellTemplate: $templateCache.get($scope.gridId + 'checkboxHeaderTemplate.html'),
+ cellTemplate: $templateCache.get($scope.gridId + 'checkboxCellTemplate.html'),
+ pinned: self.config.pinSelectionCheckbox
+ },
+ index: 0,
+ headerRowHeight: self.config.headerRowHeight,
+ sortCallback: self.sortData,
+ resizeOnDataCallback: self.resizeOnData,
+ enableResize: self.config.enableColumnResize,
+ enableSort: self.config.enableSorting
+ }, $scope, self, domUtilityService, $templateCache, $utils));
+ }
+ if (columnDefs.length > 0) {
+ var indexOffset = self.config.showSelectionCheckbox ? self.config.groups.length + 1 : self.config.groups.length;
+ $scope.configGroups.length = 0;
+ angular.forEach(columnDefs, function(colDef, i) {
+ i += indexOffset;
+ var column = new ng.Column({
+ colDef: colDef,
+ index: i,
+ headerRowHeight: self.config.headerRowHeight,
+ sortCallback: self.sortData,
+ resizeOnDataCallback: self.resizeOnData,
+ enableResize: self.config.enableColumnResize,
+ enableSort: self.config.enableSorting,
+ enablePinning: self.config.enablePinning,
+ enableCellEdit: self.config.enableCellEdit
+ }, $scope, self, domUtilityService, $templateCache, $utils);
+ var indx = self.config.groups.indexOf(colDef.field);
+ if (indx != -1) {
+ column.isGroupedBy = true;
+ $scope.configGroups.splice(indx, 0, column);
+ column.groupIndex = $scope.configGroups.length;
+ }
+ cols.push(column);
+ });
+ $scope.columns = cols;
+ }
+ };
+ self.configureColumnWidths = function() {
+ var cols = self.config.columnDefs;
+ var indexOffset = self.config.showSelectionCheckbox ? $scope.configGroups.length + 1 : $scope.configGroups.length;
+ var numOfCols = cols.length + indexOffset,
+ asterisksArray = [],
+ percentArray = [],
+ asteriskNum = 0,
+ totalWidth = 0;
+ totalWidth += self.config.showSelectionCheckbox ? 25 : 0;
+ angular.forEach(cols, function(col, i) {
+ i += indexOffset;
+ var isPercent = false, t = undefined;
+ //if width is not defined, set it to a single star
+ if ($utils.isNullOrUndefined(col.width)) {
+ col.width = "*";
+ } else { // get column width
+ isPercent = isNaN(col.width) ? $utils.endsWith(col.width, "%") : false;
+ t = isPercent ? col.width : parseInt(col.width, 10);
+ }
+ // check if it is a number
+ if (isNaN(t)) {
+ t = col.width;
+ // figure out if the width is defined or if we need to calculate it
+ if (t == 'auto') { // set it for now until we have data and subscribe when it changes so we can set the width.
+ $scope.columns[i].width = col.minWidth;
+ totalWidth += $scope.columns[i].width;
+ var temp = $scope.columns[i];
+ $timeout(function () {
+ self.resizeOnData(temp, true);
+ });
+ return;
+ } else if (t.indexOf("*") != -1) { // we need to save it until the end to do the calulations on the remaining width.
+ if (col.visible !== false) {
+ asteriskNum += t.length;
+ }
+ col.index = i;
+ asterisksArray.push(col);
+ return;
+ } else if (isPercent) { // If the width is a percentage, save it until the very last.
+ col.index = i;
+ percentArray.push(col);
+ return;
+ } else { // we can't parse the width so lets throw an error.
+ throw "unable to parse column width, use percentage (\"10%\",\"20%\", etc...) or \"*\" to use remaining width of grid";
+ }
+ } else if (col.visible !== false) {
+ totalWidth += $scope.columns[i].width = parseInt(col.width, 10);
+ }
+ });
+ // check if we saved any asterisk columns for calculating later
+ if (asterisksArray.length > 0) {
+ self.config.maintainColumnRatios === false ? angular.noop() : self.config.maintainColumnRatios = true;
+ // get the remaining width
+ var remainigWidth = self.rootDim.outerWidth - totalWidth;
+ // calculate the weight of each asterisk rounded down
+ var asteriskVal = Math.floor(remainigWidth / asteriskNum);
+ // set the width of each column based on the number of stars
+ angular.forEach(asterisksArray, function(col) {
+ var t = col.width.length;
+ $scope.columns[col.index].width = asteriskVal * t;
+ //check if we are on the last column
+ if (col.index + 1 == numOfCols) {
+ var offset = 2; //We're going to remove 2 px so we won't overlflow the viwport by default
+ // are we overflowing?
+ if (self.maxCanvasHt > $scope.viewportDimHeight()) {
+ //compensate for scrollbar
+ offset += domUtilityService.ScrollW;
+ }
+ $scope.columns[col.index].width -= offset;
+ }
+ if (col.visible !== false) {
+ totalWidth += $scope.columns[col.index].width;
+ }
+ });
+ }
+ // Now we check if we saved any percentage columns for calculating last
+ if (percentArray.length > 0) {
+ // do the math
+ angular.forEach(percentArray, function(col) {
+ var t = col.width;
+ $scope.columns[col.index].width = Math.floor(self.rootDim.outerWidth * (parseInt(t.slice(0, -1), 10) / 100));
+ });
+ }
+ };
+ self.init = function() {
+ //factories and services
+ $scope.selectionProvider = new ng.selectionProvider(self, $scope);
+ $scope.domAccessProvider = new ng.DomAccessProvider(self);
+ self.rowFactory = new ng.RowFactory(self, $scope, domUtilityService, $templateCache, $utils);
+ self.searchProvider = new ng.SearchProvider($scope, self, $filter);
+ self.styleProvider = new ng.StyleProvider($scope, self, domUtilityService);
+ $scope.$watch('configGroups', function(a) {
+ var tempArr = [];
+ angular.forEach(a, function(item) {
+ tempArr.push(item.field || item);
+ });
+ self.config.groups = tempArr;
+ self.rowFactory.filteredRowsChanged();
+ $scope.$emit('ngGridEventGroups', a);
+ }, true);
+ $scope.$watch('columns', function (a) {
+ domUtilityService.BuildStyles($scope, self, true);
+ $scope.$emit('ngGridEventColumns', a);
+ }, true);
+ $scope.$watch(function() {
+ return options.i18n;
+ }, function(newLang) {
+ $utils.seti18n($scope, newLang);
+ });
+ self.maxCanvasHt = self.calcMaxCanvasHeight();
+ if (self.config.sortInfo.fields && self.config.sortInfo.fields.length > 0) {
+ if (self.config.sortInfo.columns) {
+ self.config.sortInfo.columns.length = 0;
+ } else {
+ self.config.sortInfo.columns = [];
+ }
+ angular.forEach($scope.columns, function (c) {
+ if (self.config.sortInfo.fields.indexOf(c.field) != -1) {
+ self.config.sortInfo.columns.push(c);
+ }
+ return false;
+ });
+ self.sortData(self.config.sortInfo.columns, {});
+ }
+ };
+
+ self.resizeOnData = function(col) {
+ // we calculate the longest data.
+ var longest = col.minWidth;
+ var arr = $utils.getElementsByClassName('col' + col.index);
+ angular.forEach(arr, function(elem, index) {
+ var i;
+ if (index === 0) {
+ var kgHeaderText = $(elem).find('.ngHeaderText');
+ i = $utils.visualLength(kgHeaderText) + 10; // +10 some margin
+ } else {
+ var ngCellText = $(elem).find('.ngCellText');
+ i = $utils.visualLength(ngCellText) + 10; // +10 some margin
+ }
+ if (i > longest) {
+ longest = i;
+ }
+ });
+ col.width = col.longest = Math.min(col.maxWidth, longest + 7); // + 7 px to make it look decent.
+ domUtilityService.BuildStyles($scope, self, true);
+ };
+ self.lastSortedColumns = [];
+ self.changeRowOrder = function(prevRow, targetRow) {
+ // Splice the Rows via the actual datasource
+ var i = self.rowCache.indexOf(prevRow);
+ var j = self.rowCache.indexOf(targetRow);
+ self.rowCache.splice(i, 1);
+ self.rowCache.splice(j, 0, prevRow);
+ $scope.$emit('ngGridEventChangeOrder', self.rowCache);
+ };
+ self.sortData = function(col, evt) {
+ if (evt.shiftKey && self.config.sortInfo) {
+ var indx = self.config.sortInfo.columns.indexOf(col);
+ if (indx === -1) {
+ if (self.config.sortInfo.columns.length == 1) {
+ self.config.sortInfo.columns[0].sortPriority = 1;
+ }
+ self.config.sortInfo.columns.push(col);
+ col.sortPriority = self.config.sortInfo.columns.length;
+ self.config.sortInfo.fields.push(col.field);
+ self.config.sortInfo.directions.push(col.sortDirection);
+ self.lastSortedColumns.push(col);
+ } else {
+ self.config.sortInfo.directions[indx] = col.sortDirection;
+ }
+ } else {
+ var isArr = $.isArray(col);
+ self.config.sortInfo.columns.length = 0;
+ self.config.sortInfo.fields.length = 0;
+ self.config.sortInfo.directions.length = 0;
+ var push = function (c) {
+ self.config.sortInfo.columns.push(c);
+ self.config.sortInfo.fields.push(c.field);
+ self.config.sortInfo.directions.push(c.sortDirection);
+ self.lastSortedColumns.push(c);
+ };
+ if (isArr) {
+ self.clearSortingData();
+ angular.forEach(col, function (c, i) {
+ c.sortPriority = i + 1;
+ push(c);
+ });
+ } else {
+ self.clearSortingData(col);
+ col.sortPriority = undefined;
+ push(col);
+ }
+ }
+ if (!self.config.useExternalSorting) {
+ var tempData = self.data.slice(0);
+ angular.forEach(tempData, function (item, i) {
+ item.preSortSelected = self.rowCache[self.rowMap[i]].selected;
+ item.preSortIndex = i;
+ });
+ sortService.Sort(self.config.sortInfo, tempData);
+ angular.forEach(tempData, function(item, i) {
+ self.rowCache[i].entity = item;
+ self.rowCache[i].selected = item.preSortSelected;
+ self.rowMap[item.preSortIndex] = i;
+ delete item.preSortSelected;
+ delete item.preSortIndex;
+ });
+ }
+ self.searchProvider.evalFilter();
+ $scope.$emit('ngGridEventSorted', self.config.sortInfo);
+ };
+ self.clearSortingData = function (col) {
+ if (!col) {
+ angular.forEach(self.lastSortedColumns, function (c) {
+ c.sortDirection = "";
+ c.sortPriority = null;
+ });
+ self.lastSortedColumns = [];
+ } else {
+ angular.forEach(self.lastSortedColumns, function (c) {
+ if (col.index != c.index) {
+ c.sortDirection = "";
+ c.sortPriority = null;
+ }
+ });
+ self.lastSortedColumns[0] = col;
+ self.lastSortedColumns.length = 1;
+ };
+ };
+ self.fixColumnIndexes = function() {
+ //fix column indexes
+ for (var i = 0; i < $scope.columns.length; i++) {
+ if ($scope.columns[i].visible !== false) {
+ $scope.columns[i].index = i;
+ }
+ }
+ };
+ self.fixGroupIndexes = function() {
+ angular.forEach($scope.configGroups, function(item, i) {
+ item.groupIndex = i + 1;
+ });
+ };
+ //$scope vars
+ $scope.elementsNeedMeasuring = true;
+ $scope.columns = [];
+ $scope.renderedRows = [];
+ $scope.renderedColumns = [];
+ $scope.headerRow = null;
+ $scope.rowHeight = self.config.rowHeight;
+ $scope.jqueryUITheme = self.config.jqueryUITheme;
+ $scope.showSelectionCheckbox = self.config.showSelectionCheckbox;
+ $scope.enableCellSelection = self.config.enableCellSelection;
+ $scope.footer = null;
+ $scope.selectedItems = self.config.selectedItems;
+ $scope.multiSelect = self.config.multiSelect;
+ $scope.showFooter = self.config.showFooter;
+ $scope.footerRowHeight = $scope.showFooter ? self.config.footerRowHeight : 0;
+ $scope.showColumnMenu = self.config.showColumnMenu;
+ $scope.showMenu = false;
+ $scope.configGroups = [];
+ $scope.gridId = self.gridId;
+ //Paging
+ $scope.enablePaging = self.config.enablePaging;
+ $scope.pagingOptions = self.config.pagingOptions;
+
+ //i18n support
+ $scope.i18n = {};
+ $utils.seti18n($scope, self.config.i18n);
+ $scope.adjustScrollLeft = function (scrollLeft) {
+ var colwidths = 0,
+ totalLeft = 0,
+ x = $scope.columns.length,
+ newCols = [],
+ dcv = !self.config.enableColumnHeavyVirt;
+ var r = 0;
+ var addCol = function (c) {
+ if (dcv) {
+ newCols.push(c);
+ } else {
+ if (!$scope.renderedColumns[r]) {
+ $scope.renderedColumns[r] = c.copy();
+ } else {
+ $scope.renderedColumns[r].setVars(c);
+ }
+ }
+ r++;
+ };
+ for (var i = 0; i < x; i++) {
+ var col = $scope.columns[i];
+ if (col.visible !== false) {
+ var w = col.width + colwidths;
+ if (col.pinned) {
+ addCol(col);
+ var newLeft = i > 0 ? (scrollLeft + totalLeft) : scrollLeft;
+ domUtilityService.setColLeft(col, newLeft, self);
+ totalLeft += col.width;
+ } else {
+ if (w >= scrollLeft) {
+ if (colwidths <= scrollLeft + self.rootDim.outerWidth) {
+ addCol(col);
+ }
+ }
+ }
+ colwidths += col.width;
+ }
+ }
+ if (dcv) {
+ $scope.renderedColumns = newCols;
+ }
+ };
+ self.prevScrollTop = 0;
+ self.prevScrollIndex = 0;
+ $scope.adjustScrollTop = function(scrollTop, force) {
+ if (self.prevScrollTop === scrollTop && !force) {
+ return;
+ }
+ if (scrollTop > 0 && self.$viewport[0].scrollHeight - scrollTop <= self.$viewport.outerHeight()) {
+ $scope.$emit('ngGridEventScroll');
+ }
+ var rowIndex = Math.floor(scrollTop / self.config.rowHeight);
+ var newRange;
+ if (self.filteredRows.length > self.config.virtualizationThreshold) {
+ // Have we hit the threshold going down?
+ if (self.prevScrollTop < scrollTop && rowIndex < self.prevScrollIndex + SCROLL_THRESHOLD) {
+ return;
+ }
+ //Have we hit the threshold going up?
+ if (self.prevScrollTop > scrollTop && rowIndex > self.prevScrollIndex - SCROLL_THRESHOLD) {
+ return;
+ }
+ newRange = new ng.Range(Math.max(0, rowIndex - EXCESS_ROWS), rowIndex + self.minRowsToRender() + EXCESS_ROWS);
+ } else {
+ var maxLen = $scope.configGroups.length > 0 ? self.rowFactory.parsedData.length : self.data.length;
+ newRange = new ng.Range(0, Math.max(maxLen, self.minRowsToRender() + EXCESS_ROWS));
+ }
+ self.prevScrollTop = scrollTop;
+ self.rowFactory.UpdateViewableRange(newRange);
+ self.prevScrollIndex = rowIndex;
+ };
+
+ //scope funcs
+ $scope.toggleShowMenu = function() {
+ $scope.showMenu = !$scope.showMenu;
+ };
+ $scope.toggleSelectAll = function(a) {
+ $scope.selectionProvider.toggleSelectAll(a);
+ };
+ $scope.totalFilteredItemsLength = function() {
+ return self.filteredRows.length;
+ };
+ $scope.showGroupPanel = function() {
+ return self.config.showGroupPanel;
+ };
+ $scope.topPanelHeight = function() {
+ return self.config.showGroupPanel === true ? self.config.headerRowHeight + 32 : self.config.headerRowHeight;
+ };
+
+ $scope.viewportDimHeight = function() {
+ return Math.max(0, self.rootDim.outerHeight - $scope.topPanelHeight() - $scope.footerRowHeight - 2);
+ };
+ $scope.groupBy = function (col) {
+ //first sort the column
+ if (!col.sortDirection) col.sort({shiftKey: false});
+ if (self.data.length < 1 || !col.groupable || !col.field) {
+ return;
+ }
+ var indx = $scope.configGroups.indexOf(col);
+ if (indx == -1) {
+ col.isGroupedBy = true;
+ $scope.configGroups.push(col);
+ col.groupIndex = $scope.configGroups.length;
+ } else {
+ $scope.removeGroup(indx);
+ }
+ self.$viewport.scrollTop(0);
+ domUtilityService.digest($scope);
+ };
+ $scope.removeGroup = function(index) {
+ var col = $scope.columns.filter(function(item) {
+ return item.groupIndex == (index + 1);
+ })[0];
+ col.isGroupedBy = false;
+ col.groupIndex = 0;
+ if ($scope.columns[index].isAggCol) {
+ $scope.columns.splice(index, 1);
+ $scope.configGroups.splice(index, 1);
+ self.fixGroupIndexes();
+ }
+ if ($scope.configGroups.length === 0) {
+ self.fixColumnIndexes();
+ domUtilityService.digest($scope);
+ }
+ $scope.adjustScrollLeft(0);
+ };
+ $scope.togglePin = function (col) {
+ var indexFrom = col.index;
+ var indexTo = 0;
+ for (var i = 0; i < $scope.columns.length; i++) {
+ if (!$scope.columns[i].pinned) {
+ break;
+ }
+ indexTo++;
+ }
+ if (col.pinned) {
+ indexTo = Math.max(col.originalIndex, indexTo - 1);
+ }
+ col.pinned = !col.pinned;
+ // Splice the columns
+ $scope.columns.splice(indexFrom, 1);
+ $scope.columns.splice(indexTo, 0, col);
+ self.fixColumnIndexes();
+ // Finally, rebuild the CSS styles.
+ domUtilityService.BuildStyles($scope, self, true);
+ self.$viewport.scrollLeft(self.$viewport.scrollLeft() - col.width);
+ };
+ $scope.totalRowWidth = function() {
+ var totalWidth = 0,
+ cols = $scope.columns;
+ for (var i = 0; i < cols.length; i++) {
+ if (cols[i].visible !== false) {
+ totalWidth += cols[i].width;
+ }
+ }
+ return totalWidth;
+ };
+ $scope.headerScrollerDim = function() {
+ var viewportH = $scope.viewportDimHeight(),
+ maxHeight = self.maxCanvasHt,
+ vScrollBarIsOpen = (maxHeight > viewportH),
+ newDim = new ng.Dimension();
+
+ newDim.autoFitHeight = true;
+ newDim.outerWidth = $scope.totalRowWidth();
+ if (vScrollBarIsOpen) {
+ newDim.outerWidth += self.elementDims.scrollW;
+ } else if ((maxHeight - viewportH) <= self.elementDims.scrollH) { //if the horizontal scroll is open it forces the viewport to be smaller
+ newDim.outerWidth += self.elementDims.scrollW;
+ }
+ return newDim;
+ };
+ //call init
+ self.init();
+};
+
+ng.Range = function(top, bottom) {
+ this.topRow = top;
+ this.bottomRow = bottom;
+};
+ng.Row = function (entity, config, selectionProvider, rowIndex, $utils) {
+ var self = this, // constant for the selection property that we add to each data item
+ enableRowSelection = config.enableRowSelection;
+
+ self.jqueryUITheme = config.jqueryUITheme;
+ self.rowClasses = config.rowClasses;
+ self.entity = entity;
+ self.selectionProvider = selectionProvider;
+ self.selected = selectionProvider.getSelection(entity);
+ self.cursor = enableRowSelection ? 'pointer' : 'default';
+ self.setSelection = function(isSelected) {
+ self.selectionProvider.setSelection(self, isSelected);
+ self.selectionProvider.lastClickedRow = self;
+ };
+ self.continueSelection = function(event) {
+ self.selectionProvider.ChangeSelection(self, event);
+ };
+ self.ensureEntity = function(expected) {
+ if (self.entity != expected) {
+ // Update the entity and determine our selected property
+ self.entity = expected;
+ self.selected = self.selectionProvider.getSelection(self.entity);
+ }
+ };
+ self.toggleSelected = function(event) {
+ if (!enableRowSelection && !config.enableCellSelection) {
+ return true;
+ }
+ var element = event.target || event;
+ //check and make sure its not the bubbling up of our checked 'click' event
+ if (element.type == "checkbox" && element.parentElement.className != "ngSelectionCell ng-scope") {
+ return true;
+ }
+ if (config.selectWithCheckboxOnly && element.type != "checkbox") {
+ self.selectionProvider.lastClickedRow = self;
+ return true;
+ } else {
+ if (self.beforeSelectionChange(self, event)) {
+ self.continueSelection(event);
+ }
+ }
+ return false;
+ };
+ self.rowIndex = rowIndex;
+ self.offsetTop = self.rowIndex * config.rowHeight;
+ self.rowDisplayIndex = 0;
+ self.alternatingRowClass = function () {
+ var isEven = (self.rowIndex % 2) === 0;
+ var classes = {
+ 'selected': self.selected,
+ 'ui-state-default': self.jqueryUITheme && isEven,
+ 'ui-state-active': self.jqueryUITheme && !isEven,
+ 'even': isEven,
+ 'odd': !isEven
+ };
+ return classes;
+ };
+ self.beforeSelectionChange = config.beforeSelectionChangeCallback;
+ self.afterSelectionChange = config.afterSelectionChangeCallback;
+
+ self.getProperty = function(path) {
+ return $utils.evalProperty(self.entity, path);
+ };
+ self.copy = function () {
+ self.clone = new ng.Row(entity, config, selectionProvider, rowIndex, $utils);
+ self.clone.isClone = true;
+ self.clone.elm = self.elm;
+ return self.clone;
+ };
+ self.setVars = function (fromRow) {
+ fromRow.clone = self;
+ self.entity = fromRow.entity;
+ self.selected = fromRow.selected;
+ };
+};
+ng.RowFactory = function (grid, $scope, domUtilityService, $templateCache, $utils) {
+ var self = this;
+ // we cache rows when they are built, and then blow the cache away when sorting
+ self.aggCache = {};
+ self.parentCache = []; // Used for grouping and is cleared each time groups are calulated.
+ self.dataChanged = true;
+ self.parsedData = [];
+ self.rowConfig = {};
+ self.selectionProvider = $scope.selectionProvider;
+ self.rowHeight = 30;
+ self.numberOfAggregates = 0;
+ self.groupedData = undefined;
+ self.rowHeight = grid.config.rowHeight;
+ self.rowConfig = {
+ enableRowSelection: grid.config.enableRowSelection,
+ rowClasses: grid.config.rowClasses,
+ selectedItems: $scope.selectedItems,
+ selectWithCheckboxOnly: grid.config.selectWithCheckboxOnly,
+ beforeSelectionChangeCallback: grid.config.beforeSelectionChange,
+ afterSelectionChangeCallback: grid.config.afterSelectionChange,
+ jqueryUITheme: grid.config.jqueryUITheme,
+ enableCellSelection: grid.config.enableCellSelection,
+ rowHeight: grid.config.rowHeight
+ };
+
+ self.renderedRange = new ng.Range(0, grid.minRowsToRender() + EXCESS_ROWS);
+
+ // @entity - the data item
+ // @rowIndex - the index of the row
+ self.buildEntityRow = function(entity, rowIndex) {
+ // build the row
+ return new ng.Row(entity, self.rowConfig, self.selectionProvider, rowIndex, $utils);
+ };
+
+ self.buildAggregateRow = function(aggEntity, rowIndex) {
+ var agg = self.aggCache[aggEntity.aggIndex]; // first check to see if we've already built it
+ if (!agg) {
+ // build the row
+ agg = new ng.Aggregate(aggEntity, self, self.rowConfig.rowHeight);
+ self.aggCache[aggEntity.aggIndex] = agg;
+ }
+ agg.rowIndex = rowIndex;
+ agg.offsetTop = rowIndex * self.rowConfig.rowHeight;
+ return agg;
+ };
+ self.UpdateViewableRange = function(newRange) {
+ self.renderedRange = newRange;
+ self.renderedChange();
+ };
+ self.filteredRowsChanged = function() {
+ // check for latebound autogenerated columns
+ if (grid.lateBoundColumns && grid.filteredRows.length > 0) {
+ grid.config.columnDefs = undefined;
+ grid.buildColumns();
+ grid.lateBoundColumns = false;
+ $scope.$evalAsync(function() {
+ $scope.adjustScrollLeft(0);
+ });
+ }
+ self.dataChanged = true;
+ if (grid.config.groups.length > 0) {
+ self.getGrouping(grid.config.groups);
+ }
+ self.UpdateViewableRange(self.renderedRange);
+ };
+
+ self.renderedChange = function() {
+ if (!self.groupedData || grid.config.groups.length < 1) {
+ self.renderedChangeNoGroups();
+ grid.refreshDomSizes();
+ return;
+ }
+ self.wasGrouped = true;
+ self.parentCache = [];
+ var x = 0;
+ var temp = self.parsedData.filter(function (e) {
+ if (e.isAggRow) {
+ if (e.parent && e.parent.collapsed) {
+ return false;
+ }
+ return true;
+ }
+ if (!e[NG_HIDDEN]) {
+ e.rowIndex = x++;
+ }
+ return !e[NG_HIDDEN];
+ });
+ self.totalRows = temp.length;
+ var rowArr = [];
+ for (var i = self.renderedRange.topRow; i < self.renderedRange.bottomRow; i++) {
+ if (temp[i]) {
+ temp[i].offsetTop = i * grid.config.rowHeight;
+ rowArr.push(temp[i]);
+ }
+ }
+ grid.setRenderedRows(rowArr);
+ };
+
+ self.renderedChangeNoGroups = function () {
+ var rowArr = [];
+ for (var i = self.renderedRange.topRow; i < self.renderedRange.bottomRow; i++) {
+ if (grid.filteredRows[i]) {
+ grid.filteredRows[i].rowIndex = i;
+ grid.filteredRows[i].offsetTop = i * grid.config.rowHeight;
+ rowArr.push(grid.filteredRows[i]);
+ }
+ }
+ grid.setRenderedRows(rowArr);
+ };
+
+ self.fixRowCache = function () {
+ var newLen = grid.data.length;
+ var diff = newLen - grid.rowCache.length;
+ if (diff < 0) {
+ grid.rowCache.length = grid.rowMap.length = newLen;
+ } else {
+ for (var i = grid.rowCache.length; i < newLen; i++) {
+ grid.rowCache[i] = grid.rowFactory.buildEntityRow(grid.data[i], i);
+ }
+ }
+ };
+
+ //magical recursion. it works. I swear it. I figured it out in the shower one day.
+ self.parseGroupData = function(g) {
+ if (g.values) {
+ for (var x = 0; x < g.values.length; x++){
+ // get the last parent in the array because that's where our children want to be
+ self.parentCache[self.parentCache.length - 1].children.push(g.values[x]);
+ //add the row to our return array
+ self.parsedData.push(g.values[x]);
+ }
+ } else {
+ for (var prop in g) {
+ // exclude the meta properties.
+ if (prop == NG_FIELD || prop == NG_DEPTH || prop == NG_COLUMN) {
+ continue;
+ } else if (g.hasOwnProperty(prop)) {
+ //build the aggregate row
+ var agg = self.buildAggregateRow({
+ gField: g[NG_FIELD],
+ gLabel: prop,
+ gDepth: g[NG_DEPTH],
+ isAggRow: true,
+ '_ng_hidden_': false,
+ children: [],
+ aggChildren: [],
+ aggIndex: self.numberOfAggregates,
+ aggLabelFilter: g[NG_COLUMN].aggLabelFilter
+ }, 0);
+ self.numberOfAggregates++;
+ //set the aggregate parent to the parent in the array that is one less deep.
+ agg.parent = self.parentCache[agg.depth - 1];
+ // if we have a parent, set the parent to not be collapsed and append the current agg to its children
+ if (agg.parent) {
+ agg.parent.collapsed = false;
+ agg.parent.aggChildren.push(agg);
+ }
+ // add the aggregate row to the parsed data.
+ self.parsedData.push(agg);
+ // the current aggregate now the parent of the current depth
+ self.parentCache[agg.depth] = agg;
+ // dig deeper for more aggregates or children.
+ self.parseGroupData(g[prop]);
+ }
+ }
+ }
+ };
+ //Shuffle the data into their respective groupings.
+ self.getGrouping = function(groups) {
+ self.aggCache = [];
+ self.numberOfAggregates = 0;
+ self.groupedData = {};
+ // Here we set the onmousedown event handler to the header container.
+ var rows = grid.filteredRows,
+ maxDepth = groups.length,
+ cols = $scope.columns;
+
+ for (var x = 0; x < rows.length; x++){
+ var model = rows[x].entity;
+ if (!model) return;
+ rows[x][NG_HIDDEN] = true;
+ var ptr = self.groupedData;
+ for (var y = 0; y < groups.length; y++) {
+ var group = groups[y];
+ var col = cols.filter(function(c) {
+ return c.field == group;
+ })[0];
+ var val = $utils.evalProperty(model, group);
+ val = val ? val.toString() : 'null';
+ if (!ptr[val]) {
+ ptr[val] = {};
+ }
+ if (!ptr[NG_FIELD]) {
+ ptr[NG_FIELD] = group;
+ }
+ if (!ptr[NG_DEPTH]) {
+ ptr[NG_DEPTH] = y;
+ }
+ if (!ptr[NG_COLUMN]) {
+ ptr[NG_COLUMN] = col;
+ }
+ ptr = ptr[val];
+ }
+ if (!ptr.values) {
+ ptr.values = [];
+ }
+ ptr.values.push(rows[x]);
+ };
+ //moved out of above loops due to if no data initially, but has initial grouping, columns won't be added
+ for (var z = 0; z < groups.length; z++) {
+ if (!cols[z].isAggCol && z <= maxDepth) {
+ cols.splice(0, 0, new ng.Column({
+ colDef: {
+ field: '',
+ width: 25,
+ sortable: false,
+ resizable: false,
+ headerCellTemplate: '',
+ pinned: grid.config.pinSelectionCheckbox
+ },
+ isAggCol: true,
+ headerRowHeight: grid.config.headerRowHeight
+ }, $scope, grid, domUtilityService, $templateCache, $utils));
+ }
+ }
+ domUtilityService.BuildStyles($scope, grid, true);
+ grid.fixColumnIndexes();
+ $scope.adjustScrollLeft(0);
+ self.parsedData.length = 0;
+ self.parseGroupData(self.groupedData);
+ self.fixRowCache();
+ };
+
+ if (grid.config.groups.length > 0 && grid.filteredRows.length > 0) {
+ self.getGrouping(grid.config.groups);
+ }
+};
+ng.SearchProvider = function ($scope, grid, $filter) {
+ var self = this,
+ searchConditions = [];
+ self.extFilter = grid.config.filterOptions.useExternalFilter;
+ $scope.showFilter = grid.config.showFilter;
+ $scope.filterText = '';
+
+ self.fieldMap = {};
+
+ self.evalFilter = function () {
+ var filterFunc = function(item) {
+ for (var x = 0, len = searchConditions.length; x < len; x++) {
+ var condition = searchConditions[x];
+ //Search entire row
+ var result;
+ if (!condition.column) {
+ for (var prop in item) {
+ if (item.hasOwnProperty(prop)) {
+ var c = self.fieldMap[prop];
+ if (!c)
+ continue;
+ var f = null,
+ s = null;
+ if (c && c.cellFilter) {
+ s = c.cellFilter.split(':');
+ f = $filter(s[0]);
+ }
+ var pVal = item[prop];
+ if (pVal != null) {
+ if (typeof f == 'function') {
+ var filterRes = f(typeof pVal === 'object' ? evalObject(pVal, c.field) : pVal, s[1]).toString();
+ result = condition.regex.test(filterRes);
+ } else {
+ result = condition.regex.test(typeof pVal === 'object' ? evalObject(pVal, c.field).toString() : pVal.toString());
+ }
+ if (pVal && result) {
+ return true;
+ }
+ }
+ }
+ }
+ return false;
+ }
+ //Search by column.
+ var col = self.fieldMap[condition.columnDisplay];
+ if (!col) {
+ return false;
+ }
+ var sp = col.cellFilter.split(':');
+ var filter = col.cellFilter ? $filter(sp[0]) : null;
+ var value = item[condition.column] || item[col.field.split('.')[0]];
+ if (value == null)
+ return false;
+ if (typeof filter == 'function') {
+ var filterResults = filter(typeof value === 'object' ? evalObject(value, col.field) : value, sp[1]).toString();
+ result = condition.regex.test(filterResults);
+ } else {
+ result = condition.regex.test(typeof value === 'object' ? evalObject(value, col.field).toString() : value.toString());
+ }
+ if (!value || !result) {
+ return false;
+ }
+ }
+ return true;
+ };
+ if (searchConditions.length === 0) {
+ grid.filteredRows = grid.rowCache;
+ } else {
+ grid.filteredRows = grid.rowCache.filter(function(row) {
+ return filterFunc(row.entity);
+ });
+ }
+ for (var i = 0; i < grid.filteredRows.length; i++)
+ {
+ grid.filteredRows[i].rowIndex = i;
+
+ }
+ grid.rowFactory.filteredRowsChanged();
+ };
+
+ //Traversing through the object to find the value that we want. If fail, then return the original object.
+ var evalObject = function (obj, columnName) {
+ if (typeof obj != 'object' || typeof columnName != 'string')
+ return obj;
+ var args = columnName.split('.');
+ var cObj = obj;
+ if (args.length > 1) {
+ for (var i = 1, len = args.length; i < len; i++) {
+ cObj = cObj[args[i]];
+ if (!cObj)
+ return obj;
+ }
+ return cObj;
+ }
+ return obj;
+ };
+ var getRegExp = function (str, modifiers) {
+ try {
+ return new RegExp(str, modifiers);
+ } catch (err) {
+ //Escape all RegExp metacharacters.
+ return new RegExp(str.replace(/(\^|\$|\(|\)|\<|\>|\[|\]|\{|\}|\\|\||\.|\*|\+|\?)/g, '\\$1'));
+ }
+ };
+ var buildSearchConditions = function (a) {
+ //reset.
+ searchConditions = [];
+ var qStr;
+ if (!(qStr = $.trim(a))) {
+ return;
+ }
+ var columnFilters = qStr.split(";");
+ for (var i = 0; i < columnFilters.length; i++) {
+ var args = columnFilters[i].split(':');
+ if (args.length > 1) {
+ var columnName = $.trim(args[0]);
+ var columnValue = $.trim(args[1]);
+ if (columnName && columnValue) {
+ searchConditions.push({
+ column: columnName,
+ columnDisplay: columnName.replace(/\s+/g, '').toLowerCase(),
+ regex: getRegExp(columnValue, 'i')
+ });
+ }
+ } else {
+ var val = $.trim(args[0]);
+ if (val) {
+ searchConditions.push({
+ column: '',
+ regex: getRegExp(val, 'i')
+ });
+ }
+ }
+ };
+ };
+ $scope.$watch(grid.config.filterOptions.filterText, function(a){
+ $scope.filterText = a;
+ });
+ $scope.$watch('filterText', function(a){
+ if(!self.extFilter){
+ $scope.$emit('ngGridEventFilter', a);
+ buildSearchConditions(a);
+ self.evalFilter();
+ }
+ });
+ if (!self.extFilter) {
+ $scope.$watch('columns', function (cs) {
+ for (var i = 0; i < cs.length; i++) {
+ var col = cs[i];
+ if(col.field)
+ self.fieldMap[col.field.split('.')[0]] = col;
+ if(col.displayName)
+ self.fieldMap[col.displayName.toLowerCase().replace(/\s+/g, '')] = col;
+ };
+ });
+ }
+};
+ng.selectionProvider = function (grid, $scope) {
+ var self = this;
+ self.multi = grid.config.multiSelect;
+ self.selectedItems = grid.config.selectedItems;
+ self.selectedIndex = grid.config.selectedIndex;
+ self.lastClickedRow = undefined;
+ self.ignoreSelectedItemChanges = false; // flag to prevent circular event loops keeping single-select var in sync
+
+ // function to manage the selection action of a data item (entity)
+ self.ChangeSelection = function (r, evt) {
+ var rowItem = r.isClone ? grid.filteredRows[r.rowIndex] : r;
+ if (evt && evt.shiftKey && !evt.keyCode && self.multi && grid.config.enableRowSelection) {
+ if (self.lastClickedRow) {
+ var rowsArr;
+ if ($scope.configGroups.length > 0) {
+ rowsArr = grid.rowFactory.parsedData.filter(function(row) {
+ return !row.isAggRow;
+ });
+ } else {
+ rowsArr = grid.filteredRows;
+ }
+ var thisIndx = rowItem.rowIndex;
+ var prevIndx = self.lastClickedRow.rowIndex;
+ self.lastClickedRow = rowItem;
+ if (thisIndx == prevIndx) {
+ return false;
+ }
+ if (thisIndx < prevIndx) {
+ thisIndx = thisIndx ^ prevIndx;
+ prevIndx = thisIndx ^ prevIndx;
+ thisIndx = thisIndx ^ prevIndx;
+ thisIndx--;
+ } else {
+ prevIndx++;
+ }
+ var rows = [];
+ for (; prevIndx <= thisIndx; prevIndx++) {
+ rows.push(rowsArr[prevIndx]);
+ }
+ if (rows[rows.length - 1].beforeSelectionChange(rows, evt)) {
+ for (var i = 0; i < rows.length; i++) {
+ var ri = rows[i];
+ var selectionState = ri.selected;
+ ri.selected = !selectionState;
+ if (ri.clone) {
+ ri.clone.selected = ri.selected;
+ }
+ var index = self.selectedItems.indexOf(ri.entity);
+ if (index === -1) {
+ self.selectedItems.push(ri.entity);
+ } else {
+ self.selectedItems.splice(index, 1);
+ }
+ }
+ rows[rows.length - 1].afterSelectionChange(rows, evt);
+ }
+ return true;
+ }
+ } else if (!self.multi) {
+ if (self.lastClickedRow == rowItem) {
+ self.setSelection(self.lastClickedRow, grid.config.keepLastSelected ? true : !rowItem.selected);
+ } else {
+ if (self.lastClickedRow) {
+ self.setSelection(self.lastClickedRow, false);
+ }
+ self.setSelection(rowItem, !rowItem.selected);
+ }
+ } else if (!evt.keyCode) {
+ self.setSelection(rowItem, !rowItem.selected);
+ }
+ self.lastClickedRow = rowItem;
+ return true;
+ };
+
+ self.getSelection = function(entity) {
+ return self.selectedItems.indexOf(entity) !== -1;
+ };
+
+ // just call this func and hand it the rowItem you want to select (or de-select)
+ self.setSelection = function (r, isSelected) {
+ var rowItem = r.isClone ? grid.filteredRows[r.rowIndex] : r;
+ if(grid.config.enableRowSelection){
+ rowItem.selected = isSelected;
+ if (rowItem.clone) {
+ rowItem.clone.selected = isSelected;
+ }
+ if (!isSelected) {
+ var indx = self.selectedItems.indexOf(rowItem.entity);
+ if(indx != -1){
+ self.selectedItems.splice(indx, 1);
+ }
+ } else {
+ if (self.selectedItems.indexOf(rowItem.entity) === -1) {
+ if(!self.multi && self.selectedItems.length > 0){
+ self.toggleSelectAll(false, true);
+ rowItem.selected = isSelected;
+ if (rowItem.clone) {
+ rowItem.clone.selected = isSelected;
+ }
+ }
+ self.selectedItems.push(rowItem.entity);
+ }
+ }
+ rowItem.afterSelectionChange(rowItem);
+ }
+ };
+ // @return - boolean indicating if all items are selected or not
+ // @val - boolean indicating whether to select all/de-select all
+ self.toggleSelectAll = function (checkAll, bypass) {
+ if (bypass || grid.config.beforeSelectionChange(grid.filteredRows)) {
+ var selectedlength = self.selectedItems.length;
+ if (selectedlength > 0) {
+ self.selectedItems.length = 0;
+ }
+ for (var i = 0; i < grid.filteredRows.length; i++) {
+ grid.filteredRows[i].selected = checkAll;
+ if (grid.filteredRows[i].clone) {
+ grid.filteredRows[i].clone.selected = checkAll;
+ }
+ if (checkAll) {
+ self.selectedItems.push(grid.filteredRows[i].entity);
+ }
+ }
+ if (!bypass) {
+ grid.config.afterSelectionChange(grid.filteredRows);
+ }
+ }
+ };
+};
+ng.StyleProvider = function($scope, grid, domUtilityService) {
+ $scope.headerCellStyle = function(col) {
+ return { "height": col.headerRowHeight + "px" };
+ };
+ $scope.rowStyle = function(row) {
+ return { "top": row.offsetTop + "px", "height": $scope.rowHeight + "px" };
+ };
+ $scope.canvasStyle = function() {
+ return { "height": grid.maxCanvasHt.toString() + "px" };
+ };
+ $scope.headerScrollerStyle = function() {
+ return { "height": grid.config.headerRowHeight + "px" };
+ };
+ $scope.topPanelStyle = function() {
+ return { "width": grid.rootDim.outerWidth + "px", "height": $scope.topPanelHeight() + "px" };
+ };
+ $scope.headerStyle = function() {
+ return { "width": (grid.rootDim.outerWidth - domUtilityService.ScrollW) + "px", "height": grid.config.headerRowHeight + "px" };
+ };
+ $scope.groupPanelStyle = function () {
+ return { "width": (grid.rootDim.outerWidth - domUtilityService.ScrollW) + "px", "height": "32px" };
+ };
+ $scope.viewportStyle = function() {
+ return { "width": grid.rootDim.outerWidth + "px", "height": $scope.viewportDimHeight() + "px" };
+ };
+ $scope.footerStyle = function() {
+ return { "width": grid.rootDim.outerWidth + "px", "height": $scope.footerRowHeight + "px" };
+ };
+};
+ngGridDirectives.directive('ngCellHasFocus', ['$domUtilityService',
+ function (domUtilityService) {
+ var focusOnInputElement = function($scope, elm){
+ $scope.isFocused = true;
+ domUtilityService.digest($scope);
+ var elementWithoutComments = angular.element(elm[0].children).filter(function () { return this.nodeType != 8; });//Remove html comments for IE8
+ var inputElement = angular.element(elementWithoutComments[0].children[0]);
+ if(inputElement.length > 0){
+ angular.element(inputElement).focus();
+ $scope.domAccessProvider.selectInputElement(inputElement[0]);
+ angular.element(inputElement).bind('blur', function(){
+ $scope.isFocused = false;
+ domUtilityService.digest($scope);
+ return true;
+ });
+ }
+ };
+ return function($scope, elm) {
+ var isFocused = false;
+ $scope.editCell = function(){
+ setTimeout(function() {
+ focusOnInputElement($scope,elm);
+ }, 0);
+ };
+ elm.bind('mousedown', function(){
+ elm.focus();
+ return true;
+ });
+ elm.bind('focus', function(){
+ isFocused = true;
+ return true;
+ });
+ elm.bind('blur', function(){
+ isFocused = false;
+ return true;
+ });
+ elm.bind('keydown', function(evt){
+ if(isFocused && evt.keyCode != 37 && evt.keyCode != 38 && evt.keyCode != 39 && evt.keyCode != 40 && evt.keyCode != 9 && !evt.shiftKey && evt.keyCode != 13){
+ focusOnInputElement($scope,elm);
+ }
+ if(evt.keyCode == 27){
+ elm.focus();
+ }
+ return true;
+ });
+ };
+ }]);
+ngGridDirectives.directive('ngCellText',
+ function () {
+ return function(scope, elm) {
+ elm.bind('mouseover', function(evt) {
+ evt.preventDefault();
+ elm.css({
+ 'cursor': 'text'
+ });
+ });
+ elm.bind('mouseleave', function(evt) {
+ evt.preventDefault();
+ elm.css({
+ 'cursor': 'default'
+ });
+ });
+ };
+ });
+ngGridDirectives.directive('ngCell', ['$compile', '$domUtilityService', function ($compile, domUtilityService) {
+ var ngCell = {
+ scope: false,
+ compile: function() {
+ return {
+ pre: function($scope, iElement) {
+ var html;
+ var cellTemplate = $scope.col.cellTemplate.replace(COL_FIELD, '$eval(\'row.entity.\' + col.field)');
+ if($scope.col.enableCellEdit){
+ html = $scope.col.cellEditTemplate;
+ html = html.replace(DISPLAY_CELL_TEMPLATE, cellTemplate);
+ html = html.replace(EDITABLE_CELL_TEMPLATE, $scope.col.editableCellTemplate.replace(COL_FIELD, "col.field"));
+ } else {
+ html = cellTemplate;
+ }
+ var cellElement = $compile(html)($scope);
+ if($scope.enableCellSelection && cellElement[0].className.indexOf('ngSelectionCell') == -1){
+ cellElement[0].setAttribute('tabindex', 0);
+ cellElement.addClass('ngCellElement');
+ }
+ iElement.append(cellElement);
+ },
+ post: function($scope, iElement){
+ if($scope.enableCellSelection){
+ $scope.domAccessProvider.selectionHandlers($scope, iElement);
+ }
+
+ $scope.$on('ngGridEventDigestCell', function(){
+ domUtilityService.digest($scope);
+ });
+ }
+ };
+ }
+ };
+ return ngCell;
+}]);
+ngGridDirectives.directive('ngGrid', ['$compile', '$filter', '$templateCache', '$sortService', '$domUtilityService', '$utilityService', '$timeout', function ($compile, $filter, $templateCache, sortService, domUtilityService, $utils, $timeout) {
+ var ngGrid = {
+ scope: true,
+ compile: function() {
+ return {
+ pre: function($scope, iElement, iAttrs) {
+ var $element = $(iElement);
+ var options = $scope.$eval(iAttrs.ngGrid);
+ options.gridDim = new ng.Dimension({ outerHeight: $($element).height(), outerWidth: $($element).width() });
+ var grid = new ng.Grid($scope, options, sortService, domUtilityService, $filter, $templateCache, $utils, $timeout);
+
+ // if columndefs are a string of a property ont he scope watch for changes and rebuild columns.
+ if (typeof options.columnDefs == "string") {
+ $scope.$parent.$watch(options.columnDefs, function (a) {
+ if (!a) {
+ grid.refreshDomSizes();
+ grid.buildColumns();
+ return;
+ }
+ $scope.columns = [];
+ grid.config.columnDefs = a;
+ grid.buildColumns();
+ grid.configureColumnWidths();
+ grid.eventProvider.assignEvents();
+ domUtilityService.RebuildGrid($scope, grid);
+ });
+ } else {
+ grid.buildColumns();
+ }
+
+ // if it is a string we can watch for data changes. otherwise you won't be able to update the grid data
+ if (typeof options.data == "string") {
+ var dataWatcher = function (a) {
+ // make a temporary copy of the data
+ grid.data = $.extend([], a);
+ grid.rowFactory.fixRowCache();
+ angular.forEach(grid.data, function (item, j) {
+ var indx = grid.rowMap[j] || j;
+ if (grid.rowCache[indx]) {
+ grid.rowCache[indx].ensureEntity(item);
+ }
+ grid.rowMap[indx] = j;
+ });
+ grid.searchProvider.evalFilter();
+ grid.configureColumnWidths();
+ grid.refreshDomSizes();
+ if (grid.config.sortInfo.fields.length > 0) {
+ sortService.sortData(grid.config.sortInfo, grid.data.slice(0));
+ }
+ $scope.$emit("ngGridEventData", grid.gridId);
+ };
+ $scope.$parent.$watch(options.data, dataWatcher);
+ $scope.$parent.$watch(options.data + '.length', function() {
+ dataWatcher($scope.$eval(options.data));
+ });
+ }
+
+ grid.footerController = new ng.Footer($scope, grid);
+ //set the right styling on the container
+ iElement.addClass("ngGrid").addClass(grid.gridId.toString());
+ if (options.jqueryUITheme) {
+ iElement.addClass('ui-widget');
+ }
+ iElement.append($compile($templateCache.get('gridTemplate.html'))($scope)); // make sure that if any of these change, we re-fire the calc logic
+ //walk the element's graph and the correct properties on the grid
+ domUtilityService.AssignGridContainers($scope, iElement, grid);
+ //now use the manager to assign the event handlers
+ grid.eventProvider = new ng.EventProvider(grid, $scope, domUtilityService);
+ //initialize plugins.
+ angular.forEach(options.plugins, function (p) {
+ if (typeof p === 'function') {
+ p.call(this, []).init($scope.$new(), grid, { SortService: sortService, DomUtilityService: domUtilityService });
+ } else {
+ p.init($scope.$new(), grid, { SortService: sortService, DomUtilityService: domUtilityService });
+ }
+ });
+ // method for user to select a specific row programatically
+ options.selectRow = function (rowIndex, state) {
+ if (grid.rowCache[rowIndex]) {
+ grid.rowCache[rowIndex].setSelection(state ? true : false);
+ }
+ };
+ // method for user to select the row by data item programatically
+ options.selectItem = function (itemIndex, state) {
+ options.selectRow(grid.rowMap[itemIndex], state);
+ };
+ // method for user to set the select all state.
+ options.selectAll = function (state) {
+ $scope.toggleSelectAll(state);
+ };
+ // method for user to set the groups programatically
+ options.groupBy = function (field) {
+ if (field) {
+ $scope.groupBy($scope.columns.filter(function(c) {
+ return c.field == field;
+ })[0]);
+ } else {
+ var arr = $.extend(true, [], $scope.configGroups);
+ angular.forEach(arr, $scope.groupBy);
+ }
+ };
+ // method for user to set the sort field programatically
+ options.sortBy = function (field) {
+ var col = $scope.columns.filter(function (c) {
+ return c.field == field;
+ })[0];
+ if (col) col.sort();
+ };
+ // the grid Id, entity, scope for convenience
+ options.gridId = grid.gridId;
+ options.ngGrid = grid;
+ options.$gridScope = $scope;
+ $scope.$on('ngGridEventDigestGrid', function(){
+ domUtilityService.digest($scope.$parent);
+ });
+
+ $scope.$on('ngGridEventDigestGridParent', function(){
+ domUtilityService.digest($scope.$parent);
+ });
+ // set up the columns
+ $scope.$evalAsync(function() {
+ $scope.adjustScrollLeft(0);
+ });
+ return null;
+ }
+ };
+ }
+ };
+ return ngGrid;
+}]);
+ngGridDirectives.directive('ngHeaderCell', ['$compile', function($compile) {
+ var ngHeaderCell = {
+ scope: false,
+ compile: function() {
+ return {
+ pre: function($scope, iElement) {
+ iElement.append($compile($scope.col.headerCellTemplate)($scope));
+ }
+ };
+ }
+ };
+ return ngHeaderCell;
+}]);
+ngGridDirectives.directive('ngHeaderRow', ['$compile', '$templateCache', function ($compile, $templateCache) {
+ var ngHeaderRow = {
+ scope: false,
+ compile: function() {
+ return {
+ pre: function($scope, iElement) {
+ if (iElement.children().length === 0) {
+ iElement.append($compile($templateCache.get($scope.gridId + 'headerRowTemplate.html'))($scope));
+ }
+ }
+ };
+ }
+ };
+ return ngHeaderRow;
+}]);
+/*
+ * Defines the ui-if tag. This removes/adds an element from the dom depending on a condition
+ * Originally created by @tigbro, for the @jquery-mobile-angular-adapter
+ * https://github.com/tigbro/jquery-mobile-angular-adapter
+ */
+ngGridDirectives.directive('ngIf', [function () {
+ return {
+ transclude: 'element',
+ priority: 1000,
+ terminal: true,
+ restrict: 'A',
+ compile: function (e, a, transclude) {
+ return function (scope, element, attr) {
+
+ var childElement;
+ var childScope;
+
+ scope.$watch(attr['ngIf'], function (newValue) {
+ if (childElement) {
+ childElement.remove();
+ childElement = undefined;
+ }
+ if (childScope) {
+ childScope.$destroy();
+ childScope = undefined;
+ }
+
+ if (newValue) {
+ childScope = scope.$new();
+ transclude(childScope, function (clone) {
+ childElement = clone;
+ element.after(clone);
+ });
+ }
+ });
+ };
+ }
+ };
+}]);
+ngGridDirectives.directive('ngInput',['$parse', function($parse) {
+ return function ($scope, elm, attrs) {
+ var getter = $parse($scope.$eval(attrs.ngInput));
+ var setter = getter.assign;
+ var oldCellValue = getter($scope.row.entity);
+ elm.val(oldCellValue);
+ elm.bind('keyup', function() {
+ var newVal = elm.val();
+ if (!$scope.$root.$$phase) {
+ $scope.$apply(function(){setter($scope.row.entity,newVal); });
+ }
+ });
+ elm.bind('keydown', function(evt){
+ switch(evt.keyCode){
+ case 37:
+ case 38:
+ case 39:
+ case 40:
+ evt.stopPropagation();
+ break;
+ case 27:
+ if (!$scope.$root.$$phase) {
+ $scope.$apply(function(){
+ setter($scope.row.entity,oldCellValue);
+ elm.val(oldCellValue);
+ elm.blur();
+ });
+ }
+ default:
+ break;
+ }
+ return true;
+ });
+ };
+}]);
+ngGridDirectives.directive('ngRow', ['$compile', '$domUtilityService', '$templateCache', function ($compile, domUtilityService, $templateCache) {
+ var ngRow = {
+ scope: false,
+ compile: function() {
+ return {
+ pre: function($scope, iElement) {
+ $scope.row.elm = iElement;
+ if ($scope.row.clone) {
+ $scope.row.clone.elm = iElement;
+ }
+ if ($scope.row.isAggRow) {
+ var html = $templateCache.get($scope.gridId + 'aggregateTemplate.html');
+ if ($scope.row.aggLabelFilter) {
+ html = html.replace(CUSTOM_FILTERS, '| ' + $scope.row.aggLabelFilter);
+ } else {
+ html = html.replace(CUSTOM_FILTERS, "");
+ }
+ iElement.append($compile(html)($scope));
+ } else {
+ iElement.append($compile($templateCache.get($scope.gridId + 'rowTemplate.html'))($scope));
+ }
+ $scope.$on('ngGridEventDigestRow', function(){
+ domUtilityService.digest($scope);
+ });
+ }
+ };
+ }
+ };
+ return ngRow;
+}]);
+ngGridDirectives.directive('ngViewport', [function() {
+ return function($scope, elm) {
+ var isMouseWheelActive;
+ var prevScollLeft;
+ var prevScollTop = 0;
+ elm.bind('scroll', function(evt) {
+ var scrollLeft = evt.target.scrollLeft,
+ scrollTop = evt.target.scrollTop;
+ if ($scope.$headerContainer) {
+ $scope.$headerContainer.scrollLeft(scrollLeft);
+ }
+ $scope.adjustScrollLeft(scrollLeft);
+ $scope.adjustScrollTop(scrollTop);
+ if (!$scope.$root.$$phase) {
+ $scope.$digest();
+ }
+ prevScollLeft = scrollLeft;
+ prevScollTop = prevScollTop;
+ isMouseWheelActive = false;
+ return true;
+ });
+ elm.bind("mousewheel DOMMouseScroll", function() {
+ isMouseWheelActive = true;
+ elm.focus();
+ return true;
+ });
+ if (!$scope.enableCellSelection) {
+ $scope.domAccessProvider.selectionHandlers($scope, elm);
+ }
+ };
+}]);
+window.ngGrid.i18n['en'] = {
+ ngAggregateLabel: 'items',
+ ngGroupPanelDescription: 'Drag a column header here and drop it to group by that column.',
+ ngSearchPlaceHolder: 'Search...',
+ ngMenuText: 'Choose Columns:',
+ ngShowingItemsLabel: 'Showing Items:',
+ ngTotalItemsLabel: 'Total Items:',
+ ngSelectedItemsLabel: 'Selected Items:',
+ ngPageSizeLabel: 'Page Size:',
+ ngPagerFirstTitle: 'First Page',
+ ngPagerNextTitle: 'Next Page',
+ ngPagerPrevTitle: 'Previous Page',
+ ngPagerLastTitle: 'Last Page'
+};
+window.ngGrid.i18n['fr'] = {
+ ngAggregateLabel: 'articles',
+ ngGroupPanelDescription: 'Faites glisser un en-tête de colonne ici et déposez-le vers un groupe par cette colonne.',
+ ngSearchPlaceHolder: 'Recherche...',
+ ngMenuText: 'Choisir des colonnes:',
+ ngShowingItemsLabel: 'Articles Affichage des:',
+ ngTotalItemsLabel: 'Nombre total d\'articles:',
+ ngSelectedItemsLabel: 'Éléments Articles:',
+ ngPageSizeLabel: 'Taille de page:',
+ ngPagerFirstTitle: 'Première page',
+ ngPagerNextTitle: 'Page Suivante',
+ ngPagerPrevTitle: 'Page précédente',
+ ngPagerLastTitle: 'Dernière page'
+};
+window.ngGrid.i18n['ge'] = {
+ ngAggregateLabel: 'artikel',
+ ngGroupPanelDescription: 'Ziehen Sie eine Spaltenüberschrift hier und legen Sie es der Gruppe nach dieser Spalte.',
+ ngSearchPlaceHolder: 'Suche...',
+ ngMenuText: 'Spalten auswählen:',
+ ngShowingItemsLabel: 'Zeige Artikel:',
+ ngTotalItemsLabel: 'Meiste Artikel:',
+ ngSelectedItemsLabel: 'Ausgewählte Artikel:',
+ ngPageSizeLabel: 'Größe Seite:',
+ ngPagerFirstTitle: 'Erste Page',
+ ngPagerNextTitle: 'Nächste Page',
+ ngPagerPrevTitle: 'Vorherige Page',
+ ngPagerLastTitle: 'Letzte Page'
+};
+window.ngGrid.i18n['sp'] = {
+ ngAggregateLabel: 'Artículos',
+ ngGroupPanelDescription: 'Arrastre un encabezado de columna aquí y soltarlo para agrupar por esa columna.',
+ ngSearchPlaceHolder: 'Buscar...',
+ ngMenuText: 'Elegir columnas:',
+ ngShowingItemsLabel: 'Artículos Mostrando:',
+ ngTotalItemsLabel: 'Artículos Totales:',
+ ngSelectedItemsLabel: 'Artículos Seleccionados:',
+ ngPageSizeLabel: 'Tamaño de Página:',
+ ngPagerFirstTitle: 'Primera Página',
+ ngPagerNextTitle: 'Página Siguiente',
+ ngPagerPrevTitle: 'Página Anterior',
+ ngPagerLastTitle: 'Última Página'
+};
+window.ngGrid.i18n['zh-cn'] = {
+ ngAggregateLabel: '条目',
+ ngGroupPanelDescription: '拖曳表头到此处以进行分组',
+ ngSearchPlaceHolder: '搜索...',
+ ngMenuText: '数据分组与选择列：',
+ ngShowingItemsLabel: '当前显示条目：',
+ ngTotalItemsLabel: '条目总数：',
+ ngSelectedItemsLabel: '选中条目：',
+ ngPageSizeLabel: '每页显示数：',
+ ngPagerFirstTitle: '回到首页',
+ ngPagerNextTitle: '下一页',
+ ngPagerPrevTitle: '上一页',
+ ngPagerLastTitle: '前往尾页'
+};
+
+angular.module("ngGrid").run(["$templateCache", function($templateCache) {
+
+ $templateCache.put("aggregateTemplate.html",
+ "" +
+ "
{{row.label CUSTOM_FILTERS}} ({{row.totalChildren()}} {{AggItemsLabel}})" +
+ "
" +
+ "
" +
+ "
" +
+ " DISPLAY_CELL_TEMPLATE" +
+ "
" +
+ "
" +
+ " EDITABLE_CELL_TEMPLATE" +
+ "
" +
+ "
{{COL_FIELD CUSTOM_FILTERS}}
"
+ );
+
+ $templateCache.put("checkboxCellTemplate.html",
+ ""
+ );
+
+ $templateCache.put("checkboxHeaderTemplate.html",
+ ""
+ );
+
+ $templateCache.put("editableCellTemplate.html",
+ ""
+ );
+
+ $templateCache.put("gridTemplate.html",
+ "" +
+ "
" +
+ "
{{i18n.ngGroupPanelDescription}}
" +
+ "
0\" class=\"ngGroupList\">" +
+ " - " +
+ " " +
+ " {{group.displayName}}" +
+ " x" +
+ " " +
+ " " +
+ " " +
+ "
" +
+ "
" +
+ "
" +
+ " " +
+ " " +
+ " " +
+ "
" +
+ " " +
+ "
" +
+ "
" +
+ "
{{col.sortPriority}}
" +
+ "
" +
+ "
{{row.label CUSTOM_FILTERS}} ({{row.totalChildren()}} {{AggItemsLabel}}) '),e.put("cellEditTemplate.html",' DISPLAY_CELL_TEMPLATE
EDITABLE_CELL_TEMPLATE
'),e.put("cellTemplate.html",'{{COL_FIELD CUSTOM_FILTERS}}
'),e.put("checkboxCellTemplate.html",''),e.put("checkboxHeaderTemplate.html",''),e.put("editableCellTemplate.html",''),e.put("gridTemplate.html",' {{i18n.ngGroupPanelDescription}}
'),e.put("headerCellTemplate.html",''),e.put("headerRowTemplate.html",''),e.put("rowTemplate.html",'')}])})(window);
\ No newline at end of file
diff --git a/src/main/java/com/commafeed/frontend/references/nggrid/ng-grid.css b/src/main/java/com/commafeed/frontend/references/nggrid/ng-grid.css
new file mode 100644
index 00000000..f5d06b21
--- /dev/null
+++ b/src/main/java/com/commafeed/frontend/references/nggrid/ng-grid.css
@@ -0,0 +1,472 @@
+
+/******** Grid Global ********/
+.nglabel {
+ display: block;
+ float: left;
+ font-weight: bold;
+ padding-right: 5px;
+}
+/******** Grid ********/
+
+.ngGrid{
+ background-color: rgb(253, 253, 253);
+}
+
+/******** Header ********/
+
+.ngGroupPanel{
+ background-color: rgb(234, 234, 234);
+ overflow: hidden;
+ border-bottom: 1px solid rgb(212,212,212);
+}
+
+.ngGroupPanelDescription{
+ margin-top: 5px;
+ margin-left: 5px;
+}
+
+.ngGroupList {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+.ngGroupItem {
+ float: left;
+}
+
+.ngGroupElement {
+ float: left;
+ height: 100%;
+ width: 100%;
+}
+
+.ngGroupName {
+ background-color: rgb(247,247,247);
+ border: 1px solid rgb(212,212,212);
+ padding: 3px 10px;
+ float: left;
+ margin-left: 0;
+ margin-top: 2px;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ font-weight: bold;
+}
+
+.ngGroupItem:first-child{
+ margin-left: 2px;
+}
+
+.ngRemoveGroup {
+ width: 5px;
+ -moz-opacity: 0.4;
+ opacity: 0.4;
+ margin-top: -1px;
+ margin-left: 5px;
+}
+.ngRemoveGroup:hover {
+ color: black;
+ text-decoration: none;
+ cursor: pointer;
+ -moz-opacity: 0.7;
+ opacity: 0.7;
+}
+.ngGroupArrow {
+ width: 0;
+ height: 0;
+ border-top: 6px solid transparent;
+ border-bottom: 6px solid transparent;
+ border-left: 6px solid black;
+ margin-top: 10px;
+ margin-left: 5px;
+ margin-right: 5px;
+ float: right;
+}
+
+.ngTopPanel {
+ position: relative;
+ z-index:5;
+ background-color: rgb(234, 234, 234);
+ border-bottom: 1px solid rgb(212,212,212);
+}
+.ngHeaderContainer {
+ position: relative;
+ overflow: hidden;
+ font-weight: bold;
+ background-color: inherit;
+}
+
+.ngHeaderScroller {
+ position:absolute;
+ background-color: inherit;
+}
+.ngHeaderSortColumn{
+ position:absolute;
+ overflow: hidden;
+}
+
+.ngHeaderCell{
+ border-right: 1px solid rgb(212,212,212);
+ border-left: 1px solid rgb(212,212,212);
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ background-color: inherit;
+}
+
+.ngHeaderCell:first-child{
+ border-left: 0;
+}
+
+.ngSortButtonUp {
+ position: absolute;
+ top: 3px;
+ left: 0;
+ right: 0;
+ margin-left: auto;
+ margin-right: auto;
+ border-color: gray transparent;
+ border-style: solid;
+ border-width: 0 5px 5px 5px;
+ height: 0;
+ width: 0;
+}
+.ngSortButtonDown {
+ position: absolute;
+ top: 3px;
+ left: 0;
+ right: 0;
+ margin-left: auto;
+ margin-right: auto;
+ border-color: gray transparent;
+ border-style: solid;
+ border-width: 5px 5px 0 5px;
+ height: 0;
+ width: 0;
+}
+.ngSortPriority {
+ position: absolute;
+ top: -5px;
+ left: 1px;
+ font-size: 6pt;
+ font-weight: bold;
+}
+.ngHeaderGrip {
+ cursor: col-resize;
+ width: 10px;
+ right: -5px;
+ top: 0;
+ height: 100%;
+ position: absolute;
+ background-color: transparent;
+}
+.ngHeaderText {
+ padding: 5px;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ white-space: nowrap;
+ -ms-text-overflow: ellipsis;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+/******** Viewport ********/
+.ngViewport{
+ overflow: auto;
+ min-height: 20px;
+}
+
+.ngCanvas{
+ position: relative;
+}
+
+/******** Rows ********/
+.ngRow {
+ position: absolute;
+ border-bottom: 1px solid rgb(229, 229, 229);
+}
+.ngRow.even {
+ background-color: rgb(243, 243, 243);
+}
+.ngRow.odd {
+ background-color: rgb(253, 253, 253);
+}
+.ngRow.selected {
+ background-color: rgb(201, 221, 225);
+}
+.ngRow.canSelect {
+ cursor: pointer;
+}
+
+/******** Cells ********/
+
+.ngCell {
+ overflow: hidden;
+ position: absolute;
+ border-right: 1px solid rgb(212,212,212);
+ border-left: 1px solid rgb(212,212,212);
+ top: 0;
+ bottom: 0;
+ background-color: inherit;
+}
+
+.ngCell:first-child{
+ border-left: 0;
+}
+
+.ngCellElement:focus {
+ outline: 0;
+ background-color: rgb(179, 196, 199);
+}
+
+.ngCellText {
+ padding: 5px;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ white-space: nowrap;
+ -ms-text-overflow: ellipsis;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+.ngSelectionHeader {
+ position: absolute;
+ top: 11px;
+ left: 6px;
+}
+.ngGrid input[type="checkbox"] {
+ margin: 0;
+ padding: 0;
+}
+.ngGrid input {
+ vertical-align:top;
+}
+.ngSelectionCell{
+ margin-top: 9px;
+ margin-left: 6px;
+}
+.ngSelectionCheckbox{
+ margin-top: 9px;
+ margin-left: 6px;
+}
+.ngNoSort {
+ cursor:default;
+}
+
+/******** Footer ********/
+.ngFooterPanel{
+ background-color: rgb(234, 234, 234);
+ padding: 0;
+ border-top: 1px solid rgb(212,212,212);
+ position: relative;
+}
+.ngTotalSelectContainer {
+ float: left;
+ margin: 5px;
+ margin-top: 7px;
+}
+.ngFooterSelectedItems {
+ padding: 2px;
+}
+.ngFooterTotalItems {
+ padding: 2px;
+}
+.ngFooterTotalItems.ngnoMultiSelect {
+ padding: 0 !important;
+}
+
+/* Aggregates */
+.ngAggHeader {
+ position: absolute;
+ border: none;
+}
+.ngAggregate {
+ position: absolute;
+ background-color: rgb(201, 221, 225);
+ border-bottom: 1px solid beige;
+ overflow: hidden;
+ top: 0;
+ bottom: 0;
+ right: -1px;
+ left: 0;
+}
+.ngAggregateText {
+ position: absolute;
+ left: 27px;
+ top: 5px;
+ line-height: 20px;
+ white-space:nowrap;
+}
+.ngAggArrowExpanded {
+ position: absolute;
+ left: 8px;
+ bottom: 10px;
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 0 0 9px 9px;
+ border-color: transparent transparent #000000 transparent;
+}
+.ngAggArrowCollapsed {
+ position: absolute;
+ left: 8px;
+ bottom: 10px;
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 5px 0 5px 8.7px;
+ border-color: transparent transparent transparent #000000;
+}
+
+.ngHeaderButton {
+ position: absolute;
+ right: 2px;
+ top: 8px;
+ -moz-border-radius: 50%;
+ -webkit-border-radius: 50%;
+ border-radius: 50%;
+ width: 14px;
+ height: 14px;
+ z-index: 5;
+ background-color: rgb(179, 191, 188);
+ cursor: pointer;
+ /* width and height can be anything, as long as they're equal */
+}
+.ngHeaderButtonArrow {
+ position: absolute;
+ top: 4px;
+ left: 3px;
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 6.5px 4.5px 0 4.5px;
+ border-color: #000 transparent transparent transparent;
+ /* width and height can be anything, as long as they're equal */
+}
+.ngColMenu {
+ right: 2px;
+ padding: 5px;
+ top: 25px;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ background-color: #BDD0CB;
+ position: absolute;
+ border: 2px solid rgb(212,212,212);
+ z-index: 5;
+}
+.ngMenuText {
+ position: relative;
+ top: 2px;
+ left: 2px;
+}
+.ngColList {
+ list-style-type: none;
+}
+
+.ngColListItem {
+ position: relative;
+ right: 17px;
+ top: 2px;
+ white-space:nowrap;
+}
+.ngColListCheckbox {
+ position: relative;
+ right: 3px;
+ top: 4px;
+}
+
+/********Paging Styles **********/
+
+.ngPagerButton{
+ height: 25px;
+ min-width: 26px;
+}
+
+.ngPagerFirstTriangle{
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 5px 8.7px 5px 0;
+ border-color: transparent #000000 transparent transparent;
+ margin-left: 2px;
+}
+
+.ngPagerFirstBar{
+ width: 10px;
+ border-left: 2px solid black;
+ margin-top: -6px;
+ height: 12px;
+ margin-left: -3px;
+}
+
+.ngPagerLastTriangle{
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 5px 0 5px 8.7px;
+ border-color: transparent transparent transparent #000000;
+ margin-left: -1px;
+}
+
+.ngPagerLastBar{
+ width: 10px;
+ border-left: 2px solid black;
+ margin-top: -6px;
+ height: 12px;
+ margin-left: 1px;
+}
+
+.ngPagerPrevTriangle{
+ margin-left: 0;
+}
+
+.ngPagerNextTriangle{
+ margin-left: 1px;
+}
+.ngGroupIcon {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAEFJREFUKFNjoAhISkr+h2J5JDZODNXGwGBsbPwfhIGAA8bGh6HaGBiAGhxAGJmND4M1gQCSM0adCsVQbcPcqQwMALWDGyDvWPefAAAAAElFTkSuQmCC);
+ background-repeat:no-repeat;
+ height: 15px;
+ width: 15px;
+ position: absolute;
+ right: -2px;
+ top: 2px;
+}
+
+.ngGroupedByIcon {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAElJREFUKFNjoAhISkr+R8LyaHwMDNXGwGBsbPwfhoGAA5mPDUO1oWpE52PDYE0gALTFAYbR+dgwWBMIoPlh1I9ADNU2NPzIwAAAFQYI9E4OLvEAAAAASUVORK5CYII=);
+ background-repeat:no-repeat;
+ height: 15px;
+ width: 15px;
+ position: absolute;
+ right: -2px;
+ top: 2px;
+}
+.ngPinnedIcon {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAmElEQVQoU33PQapBURjA8UtkwJuaWYGSgfQWYBMvczPmTCzAAGVuaA228BZhRCkDGSmE31FucuRfvzq3vr5zT/JSjSU7DsypEPXDkDVn2hSIytJhw4kWGaLCxgHh2gt/RBuLzNhz5caWPjnSqqw4EraFfwznf8qklWjwy4IRTerkiQoPGtPl40OehcEJvcfXl8LglLfBJLkDcMgbgHlHhK8AAAAASUVORK5CYII=);
+ background-repeat: no-repeat;
+ position: absolute;
+ right: 5px;
+ top: 5px;
+ height: 10px;
+ width: 10px;
+}
+.ngUnPinnedIcon {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAlElEQVQoU33PPQrCQBRF4fFnI2KfZVi5ARvdgo1l6mwmkCJVOgluwd5OwUoDtnoOxAei8cLXTN7cvEl/skCNDCMPfsUPO5zQwOHIDEvYtMURHe6wOVLgigvOePRyeDkyR4ln7wZ//7XfFBu8B23+aDJjrHGAwza7hjtHJvDmHg7b7Bru7AMjK7Rw2ObBVHDY5oGk9AKQNB2zy8MBTgAAAABJRU5ErkJggg==);
+ background-repeat: no-repeat;
+ position: absolute;
+ height: 10px;
+ width: 10px;
+ right: 5px;
+ top: 5px;
+}
+.ngGroupingNumber {
+ position: absolute;
+ right: -10px;
+ top: -2px;
+}
diff --git a/src/main/java/com/commafeed/frontend/rest/RESTApplication.java b/src/main/java/com/commafeed/frontend/rest/RESTApplication.java
index 20c25752..6679cf4b 100644
--- a/src/main/java/com/commafeed/frontend/rest/RESTApplication.java
+++ b/src/main/java/com/commafeed/frontend/rest/RESTApplication.java
@@ -5,7 +5,7 @@ import java.util.Set;
import javax.ws.rs.ApplicationPath;
import javax.ws.rs.core.Application;
-import com.commafeed.frontend.rest.resources.AdminREST;
+import com.commafeed.frontend.rest.resources.AdminUsersREST;
import com.commafeed.frontend.rest.resources.EntriesREST;
import com.commafeed.frontend.rest.resources.SettingsREST;
import com.commafeed.frontend.rest.resources.SubscriptionsREST;
@@ -22,7 +22,7 @@ public class RESTApplication extends Application {
set.add(SubscriptionsREST.class);
set.add(EntriesREST.class);
set.add(SettingsREST.class);
- set.add(AdminREST.class);
+ set.add(AdminUsersREST.class);
return set;
}
}
diff --git a/src/main/java/com/commafeed/frontend/rest/resources/AdminREST.java b/src/main/java/com/commafeed/frontend/rest/resources/AdminUsersREST.java
similarity index 88%
rename from src/main/java/com/commafeed/frontend/rest/resources/AdminREST.java
rename to src/main/java/com/commafeed/frontend/rest/resources/AdminUsersREST.java
index 7102c18b..bed0993a 100644
--- a/src/main/java/com/commafeed/frontend/rest/resources/AdminREST.java
+++ b/src/main/java/com/commafeed/frontend/rest/resources/AdminUsersREST.java
@@ -14,10 +14,10 @@ import com.commafeed.frontend.rest.SecurityCheck;
import com.google.common.collect.Maps;
@SecurityCheck(Role.ADMIN)
-@Path("admin")
-public class AdminREST extends AbstractREST {
+@Path("admin/users")
+public class AdminUsersREST extends AbstractREST {
- @Path("users/get")
+ @Path("get")
@GET
public Collection getUsers() {
Map users = Maps.newHashMap();
diff --git a/src/main/webapp/js/controllers.js b/src/main/webapp/js/controllers.js
index 164f2258..6db9a2e4 100644
--- a/src/main/webapp/js/controllers.js
+++ b/src/main/webapp/js/controllers.js
@@ -140,7 +140,7 @@ module.controller('FeedListCtrl', function($scope, $stateParams, $http, $route,
}, function(data) {
for ( var i = 0; i < data.entries.length; i++) {
$scope.entries.push(data.entries[i]);
- }
+ };
$scope.name = data.name;
$scope.busy = false;
$scope.hasMore = data.entries.length == limit
@@ -239,7 +239,7 @@ module.controller('FeedListCtrl', function($scope, $stateParams, $http, $route,
openPreviousEntry(e);
})
});
-
+
$scope.$on('reload', function(event, args) {
$scope.name = null;
$scope.entries = [];
@@ -247,4 +247,11 @@ module.controller('FeedListCtrl', function($scope, $stateParams, $http, $route,
$scope.hasMore = true;
$scope.loadMoreEntries();
});
+});
+
+module.controller('ManageUsersCtrl', function($scope, AdminUsersService) {
+ $scope.users = AdminUsersService.get();
+ $scope.gridOptions = {
+ data : 'users'
+ };
});
\ No newline at end of file
diff --git a/src/main/webapp/js/main.js b/src/main/webapp/js/main.js
index a4dffb8d..833c76d3 100644
--- a/src/main/webapp/js/main.js
+++ b/src/main/webapp/js/main.js
@@ -1,6 +1,6 @@
var app = angular.module('commafeed', [ 'ui', 'ui.bootstrap', 'ui.state',
'commafeed.directives', 'commafeed.controllers', 'commafeed.services',
- 'ngSanitize', 'ngUpload', 'infinite-scroll' ]);
+ 'ngSanitize', 'ngUpload', 'infinite-scroll', 'ngGrid' ]);
app.config(function($routeProvider, $stateProvider, $urlRouterProvider) {
$stateProvider.state('feeds', {
@@ -20,6 +20,7 @@ app.config(function($routeProvider, $stateProvider, $urlRouterProvider) {
});
$stateProvider.state('admin.users', {
url : '/users',
+ controller : 'ManageUsersCtrl',
templateUrl : 'templates/admin.users.html'
});
diff --git a/src/main/webapp/js/services.js b/src/main/webapp/js/services.js
index 3f6faefe..3dc25d5e 100644
--- a/src/main/webapp/js/services.js
+++ b/src/main/webapp/js/services.js
@@ -126,4 +126,18 @@ module.service('SettingsService', function($resource) {
$resource('rest/settings/save').save(s.settings);
};
return s;
-});
\ No newline at end of file
+});
+
+module.service('AdminUsersService', function($resource) {
+ var actions = {
+ get : {
+ method : 'GET',
+ params : {
+ _method : 'get'
+ },
+ isArray : true
+ }
+ };
+ var res = $resource('rest/admin/:_method', {}, actions);
+ return res;
+})
\ No newline at end of file
diff --git a/src/main/webapp/templates/admin.users.html b/src/main/webapp/templates/admin.users.html
index e63103de..bdd1620f 100644
--- a/src/main/webapp/templates/admin.users.html
+++ b/src/main/webapp/templates/admin.users.html
@@ -1 +1,3 @@
-Manage users
\ No newline at end of file
+Manage users
+
+