<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js@1.2.21" data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="lrDragNDrop.js"></script>
<script src="smart-table.debug.js"></script>
</head>
<body ng-controller="mainCtrl">
<div class="table-container">
<table st-table="rowCollection" class="table table-striped">
<thead>
<tr>
<th lr-drag-src="headers" lr-drop-target="headers" ng-repeat="col in columns" st-sort="{{col}}">{{col}}</th>
</tr>
<tr>
<th>
<input st-search="firstName" placeholder="search for firstname" class="input-sm form-control" type="search"/>
</th>
<th colspan="4">
<input st-search placeholder="global search" class="input-sm form-control" type="search"/>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection">
<td ng-repeat="col in columns">{{row[col]}}</td>
</tr>
</tbody>
</table>
</div>
<div ng-show="isLoading" class="loading-indicator"></div>
</body>
</html>
angular.module('myApp', ['smart-table','lrDragNDrop'])
.controller('mainCtrl', ['$scope', '$timeout',
function ($scope, $timeout) {
var nameList = ['Pierre', 'Pol', 'Jacques', 'Robert', 'Elisa'];
var familyName = ['Dupont', 'Germain', 'Delcourt', 'bjip', 'Menez'];
$scope.isLoading = false;
$scope.rowCollection = [];
function createRandomItem() {
var
firstName = nameList[Math.floor(Math.random() * 4)],
lastName = familyName[Math.floor(Math.random() * 4)],
age = Math.floor(Math.random() * 100),
email = firstName + lastName + '@whatever.com',
balance = Math.random() * 3000;
return {
firstName: firstName,
lastName: lastName,
age: age,
email: email,
balance: balance
};
}
$scope.columns=['firstName', 'lastName','age','email','balance'];
for(var i=0;i<50;i++){
$scope.rowCollection.push(createRandomItem());
}
}
]);
.st-sort-ascent:before {
content: '\25B2';
}
.st-sort-descent:before {
content: '\25BC';
}
.lr-drop-target-before{
border-left: 2px solid orange;
}
.lr-drop-target-after{
border-right: 2px solid orange;
}
(function (ng) {
'use strict';
ng.module('smart-table',[]);
})(angular);
(function (ng, undefined) {
'use strict';
ng.module('smart-table')
.controller('stTableController', ['$scope', '$parse', '$filter', '$attrs', function StTableController($scope, $parse, $filter, $attrs) {
var propertyName = $attrs.stTable;
var displayGetter = $parse(propertyName);
var displaySetter = displayGetter.assign;
var safeGetter;
var orderBy = $filter('orderBy');
var filter = $filter('filter');
var safeCopy = copyRefs(displayGetter($scope));
var tableState = {
sort: {},
search: {},
pagination: {
start: 0
}
};
var pipeAfterSafeCopy = true;
var ctrl = this;
function copyRefs(src) {
return [].concat(src);
}
function updateSafeCopy() {
safeCopy = copyRefs(safeGetter($scope));
if (pipeAfterSafeCopy === true) {
ctrl.pipe();
}
}
if ($attrs.stSafeSrc) {
safeGetter = $parse($attrs.stSafeSrc);
$scope.$watch(function () {
var safeSrc = safeGetter($scope);
return safeSrc ? safeSrc.length : 0;
}, function (newValue, oldValue) {
if (newValue !== oldValue) {
updateSafeCopy()
}
});
$scope.$watch(function () {
return safeGetter($scope);
}, function (newValue, oldValue) {
if (newValue !== oldValue) {
updateSafeCopy();
}
});
}
/**
* sort the rows
* @param predicate function or string which will be used as predicate for the sorting
* @param [optional] reverse if you want to reverse the order
*/
this.sortBy = function sortBy(predicate, reverse) {
tableState.sort.predicate = predicate;
tableState.sort.reverse = reverse === true;
tableState.pagination.start = 0;
this.pipe();
};
/**
* search matching rows
* @param input the input string
* @param predicate [optional] the property name against you want to check the match, otherwise it will search on all properties
*/
this.search = function search(input, predicate) {
var predicateObject = tableState.search.predicateObject || {};
var prop = predicate ? predicate : '$';
predicateObject[prop] = input;
tableState.search.predicateObject = predicateObject;
tableState.pagination.start = 0;
this.pipe();
};
/**
* this will chain the operations of sorting and filtering based on the current table state (sort options, filtering, ect)
*/
this.pipe = function pipe() {
var filtered = tableState.search.predicateObject ? filter(safeCopy, tableState.search.predicateObject) : safeCopy;
filtered = orderBy(filtered, tableState.sort.predicate, tableState.sort.reverse);
if (tableState.pagination.number !== undefined) {
tableState.pagination.numberOfPages = filtered.length > 0 ? Math.ceil(filtered.length / tableState.pagination.number) : 1;
filtered = filtered.slice(tableState.pagination.start, tableState.pagination.start + tableState.pagination.number);
}
displaySetter($scope, filtered);
};
/**
* select a dataRow (it will add the attribute isSelected to the row object)
* @param row the row to select
* @param mode "single" or "multiple"
*/
this.select = function select(row, mode) {
var rows = displayGetter($scope);
var index = rows.indexOf(row);
if (index !== -1) {
if (mode === 'single') {
ng.forEach(displayGetter($scope), function (value, key) {
value.isSelected = key === index ? !value.isSelected : false;
});
} else {
rows[index].isSelected = !rows[index].isSelected;
}
}
};
/**
* take a slice of the current sorted/filtered collection (pagination)
*
* @param start index of the slice
* @param number the number of item in the slice
*/
this.slice = function splice(start, number) {
tableState.pagination.start = start;
tableState.pagination.number = number;
this.pipe();
};
/**
* return the current state of the table
* @returns {{sort: {}, search: {}, pagination: {start: number}}}
*/
this.tableState = function getTableState() {
return tableState;
};
/**
* Use a different filter function than the angular FilterFilter
* @param filterName the name under which the custom filter is registered
*/
this.setFilterFunction = function setFilterFunction(filterName) {
filter = $filter(filterName);
};
/**
*User a different function than the angular orderBy
* @param sortFunctionName the name under which the custom order function is registered
*/
this.setSortFunction = function setSortFunction(sortFunctionName) {
orderBy = $filter(sortFunctionName);
};
/**
* Usually when the safe copy is updated the pipe function is called.
* Calling this method will prevent it, which is something required when using a custom pipe function
*/
this.preventPipeOnWatch = function preventPipe() {
pipeAfterSafeCopy = false;
};
}])
.directive('stTable', function () {
return {
restrict: 'A',
controller: 'stTableController',
link: function (scope, element, attr, ctrl) {
}
};
});
})(angular);
(function (ng) {
'use strict';
ng.module('smart-table')
.directive('stSearch', ['$timeout', function ($timeout) {
return {
replace: true,
require: '^stTable',
scope: {
predicate: '=?stSearch'
},
link: function (scope, element, attr, ctrl) {
var tableCtrl = ctrl;
var promise = null;
var throttle = attr.stDelay || 400;
scope.$watch('predicate', function (newValue, oldValue) {
if (newValue !== oldValue) {
ctrl.tableState().search = {};
tableCtrl.search(element[0].value || '', newValue);
}
});
element.bind('input', function (evt) {
evt = evt.originalEvent || evt;
if (promise !== null) {
$timeout.cancel(promise);
}
promise = $timeout(function () {
tableCtrl.search(evt.target.value, scope.predicate || '');
promise = null;
}, throttle);
});
}
}
}])
})(angular);
(function (ng) {
'use strict';
ng.module('smart-table')
.directive('stSelectRow', function () {
return {
restrict: 'A',
require: '^stTable',
scope: {
row: '=stSelectRow'
},
link: function (scope, element, attr, ctrl) {
var mode = attr.stSelectMode || 'single';
element.bind('click', function () {
scope.$apply(function () {
ctrl.select(scope.row, mode);
});
});
scope.$watch('row.isSelected', function (newValue, oldValue) {
if (newValue === true) {
element.addClass('st-selected');
} else {
element.removeClass('st-selected');
}
});
}
}
});
})(angular);
(function (ng, undefined) {
'use strict';
ng.module('smart-table')
.directive('stSort', ['$parse', function ($parse) {
return {
restrict: 'A',
require: '^stTable',
link: function (scope, element, attr, ctrl) {
var predicate = attr.stSort;
var getter = $parse(predicate);
var index = 0;
var states = ['descent', 'ascent', 'natural'];
function reset() {
index = 0;
element
.removeClass('st-sort-ascent')
.removeClass('st-sort-descent');
}
function sort() {
index++;
var stateIndex = index % 2;
if (index % 3 === 0) {
//manual reset
ctrl.tableState().sort = {};
ctrl.tableState().pagination.start = 0;
} else {
ctrl.sortBy(predicate, stateIndex === 0);
element
.removeClass('st-sort-' + states[(stateIndex + 1) % 2])
.addClass('st-sort-' + states[stateIndex]);
}
}
if (ng.isFunction(getter(scope))) {
predicate = getter(scope);
}
element.bind('click', function sortClick() {
if (predicate) {
scope.$apply(sort);
}
});
if (attr.stSortDefault !== undefined) {
index = attr.stSortDefault === 'reverse' ? 1 : 0;
sort();
}
scope.$watch(function () {
return ctrl.tableState().sort;
}, function (newValue, oldValue) {
if (newValue !== oldValue) {
if (newValue.predicate !== predicate) {
reset();
}
}
}, true);
}
};
}])
})(angular);
(function (ng) {
'use strict';
ng.module('smart-table')
.directive('stPagination', function () {
return {
restrict: 'EA',
require: '^stTable',
scope: {},
template: '<div class="pagination"><ul class="pagination"><li ng-repeat="page in pages" ng-class="{active: page==currentPage}"><a ng-click="selectPage(page)">{{page}}</a></li></ul></div>',
replace: true,
link: function (scope, element, attrs, ctrl) {
function isNotNan(value) {
return !(typeof value === 'number' && isNaN(value));
}
var itemsByPage = isNotNan(parseInt(attrs.stItemsByPage, 10)) == true ? parseInt(attrs.stItemsByPage, 10) : 10;
var displayedPages = isNotNan(parseInt(attrs.stDisplayedPages, 10)) == true ? parseInt(attrs.stDisplayedPages, 10) : 5;
scope.currentPage = 1;
scope.pages = [];
scope.$watch(function () {
return ctrl.tableState().pagination;
},
function () {
var paginationState = ctrl.tableState().pagination;
var start = 1;
var end;
var i;
scope.currentPage = Math.floor(paginationState.start / paginationState.number) + 1;
start = Math.max(start, scope.currentPage - Math.abs(Math.floor(displayedPages / 2)));
end = start + displayedPages;
if (end > paginationState.numberOfPages) {
end = paginationState.numberOfPages + 1;
start = Math.max(1, end - displayedPages);
}
scope.pages = [];
scope.numPages = paginationState.numberOfPages;
for (i = start; i < end; i++) {
scope.pages.push(i);
}
}, true);
scope.selectPage = function (page) {
if (page > 0 && page <= scope.numPages) {
ctrl.slice((page - 1) * itemsByPage, itemsByPage);
}
};
//select the first page
ctrl.slice(0, itemsByPage);
}
};
});
})(angular);
(function (ng) {
'use strict';
ng.module('smart-table')
.directive('stPipe', function () {
return {
require: 'stTable',
scope: {
stPipe: '='
},
link: {
pre: function (scope, element, attrs, ctrl) {
if (ng.isFunction(scope.stPipe)) {
ctrl.preventPipeOnWatch();
ctrl.pipe = ng.bind(ctrl, scope.stPipe, ctrl.tableState());
}
}
}
};
});
})(angular);
(function (ng) {
'use strict';
var module = ng.module('lrDragNDrop', []);
module.service('lrDragStore', ['$document', function (document) {
var store = {};
this.hold = function hold(key, item, collectionFrom, safe) {
store[key] = {
item: item,
collection: collectionFrom,
safe: safe === true
}
};
this.get = function (namespace) {
var
modelItem = store[namespace], itemIndex;
if (modelItem) {
itemIndex = modelItem.collection.indexOf(modelItem.item);
return modelItem.safe === true ? modelItem.item : modelItem.collection.splice(itemIndex, 1)[0];
} else {
return null;
}
};
this.clean = function clean() {
store = {};
};
this.isHolding = function (namespace) {
return store[namespace] !== undefined;
};
document.bind('dragend', this.clean);
}]);
function parseRepeater(scope, attr) {
var
repeatExpression = attr.ngRepeat,
match;
if (!repeatExpression) {
throw Error('this directive must be used with ngRepeat directive');
}
match = repeatExpression.match(/^(.*\sin).(\S*)/);
if (!match) {
throw Error("Expected ngRepeat in form of '_item_ in _collection_' but got '" +
repeatExpression + "'.");
}
return scope.$eval(match[2]);
}
function lrDragSrcDirective(store, safe) {
return function compileFunc(el, iattr) {
iattr.$set('draggable', true);
return function linkFunc(scope, element, attr) {
var
collection,
key = (safe === true ? attr.lrDragSrcSafe : attr.lrDragSrc ) || 'temp';
collection = parseRepeater(scope, attr);
element.bind('dragstart', function (evt) {
store.hold(key, collection[scope.$index], collection, safe);
});
}
}
}
module.directive('lrDragSrc', ['lrDragStore', function (store) {
return{
compile: lrDragSrcDirective(store)
};
}]);
module.directive('lrDragSrcSafe', ['lrDragStore', function (store) {
return{
compile: lrDragSrcDirective(store, true)
};
}]);
module.directive('lrDropTarget', ['lrDragStore', function (store) {
return {
link: function (scope, element, attr) {
var
collection,
key = attr.lrDropTarget || 'temp',
classCache = null;
function isAfter(x, y) {
//check if below or over the diagonal of the box element
return (element[0].offsetHeight - x * element[0].offsetHeight / element[0].offsetWidth) < y;
}
function resetStyle() {
if (classCache !== null) {
element.removeClass(classCache);
classCache = null;
}
}
collection = parseRepeater(scope, attr);
element.bind('drop', function (evt) {
var
collectionCopy = ng.copy(collection),
item = store.get(key),
dropIndex, i, l;
if (item !== null) {
dropIndex = scope.$index;
dropIndex = isAfter(evt.offsetX, evt.offsetY) ? dropIndex + 1 : dropIndex;
//srcCollection=targetCollection => we may need to apply a correction
if (collectionCopy.length > collection.length) {
for (i = 0, l = Math.min(dropIndex, collection.length - 1); i <= l; i++) {
if (!ng.equals(collectionCopy[i], collection[i])) {
dropIndex = dropIndex - 1;
break;
}
}
}
scope.$apply(function () {
collection.splice(dropIndex, 0, item);
});
evt.preventDefault();
resetStyle();
store.clean();
}
});
element.bind('dragleave', resetStyle);
element.bind('dragover', function (evt) {
var className;
if (store.isHolding(key)) {
className = isAfter(evt.offsetX, evt.offsetY) ? 'lr-drop-target-after' : 'lr-drop-target-before';
if (classCache !== className && classCache !== null) {
element.removeClass(classCache);
}
if (classCache !== className) {
element.addClass(className);
}
classCache = className;
}
evt.preventDefault();
});
}
};
}]);
})(angular);