front-utils/src/lubasictable.js

/**
 * Created by robin on 11/3/15.
 */

angular.module('luticateUtils')
    .directive('luBasicTable', ['dialogs', 'luticateDialogErrorHelper',
        function(dialogs, luticateDialogErrorHelper) {
            return {
                restrict: 'E',
                scope: {
                    options: '&'
                },
                templateUrl: "/luticate/lubasictable.html",
                link: function ($scope, element, attrs) {
                    $scope.page = 0;
                    $scope.perPage = 15;
                    $scope.items = [];
                    $scope.pages = [];

                    $scope.tableOptions = $scope.options();
                    if ($scope.tableOptions.checkedItems == null) {
                        $scope.tableOptions.checkedItems = [];
                    }
                    if ($scope.tableOptions.canCheck == null) {
                        $scope.tableOptions.canCheck = function()
                        {
                            return false;
                        }
                    }
                    if ($scope.tableOptions.onItemClicked == null) {
                        $scope.itemsCursor = "";
                        $scope.tableOptions.onItemClicked = function(item, scope)
                        {
                        }
                    }
                    else {
                        $scope.itemsCursor = "pointer";
                    }
                    if ($scope.tableOptions.onItemChecked == null) {
                        $scope.tableOptions.onItemChecked = function(item, checked, scope)
                        {
                            return true;
                        }
                    }
                    if (!$scope.tableOptions.getItemId) {
                        $scope.tableOptions.getItemId = function(item)
                        {
                            return item.Id;
                        };
                    }

                    $scope.loadPage = function (page) {

                        var promiseLoadItems = {
                            id: "promiseLoadItems",
                            groups: ['itemList']
                        };
                        $scope.tableOptions.getLoadPagePromise(page, $scope.perPage, promiseLoadItems)
                            .then(function (items) {
                                $scope.page = page;
                                $scope.items = items;
                                $scope.pages = [];
                                var start = Math.max(0, $scope.page - 5);
                                var end = Math.min(start + 10, (items.Count / $scope.perPage) + (items.Count % $scope.perPage == 0 ? -1 : 0));
                                for (var i = start; i < end; ++i) {
                                    $scope.pages.push(i);
                                }
                            }, function (error) {
                            });
                    };

                    $scope.toggleCheckedItem = function (item) {
                        var id = $scope.tableOptions.getItemId(item);
                        var idx = $scope.tableOptions.checkedItems.indexOf(id);
                        if (idx > -1) {
                            $scope.tableOptions.onItemChecked(item, false, $scope);
                            $scope.tableOptions.checkedItems.splice(idx, 1);
                        }
                        else {
                            $scope.tableOptions.onItemChecked(item, true, $scope);
                            $scope.tableOptions.checkedItems.push(id);
                        }
                    };

                    $scope.toggleCheckAll = function () {
                        if ($scope.tableOptions.checkedItems.length == $scope.items.Data.length) {
                            $scope.tableOptions.checkedItems = [];
                        }
                        else {
                            $scope.tableOptions.checkedItems = [];
                            for (var i = 0; i < $scope.items.Data.length; ++i) {
                                $scope.tableOptions.checkedItems.push($scope.tableOptions.getItemId($scope.items.Data[i]));
                            }
                        }
                    };

                    $scope.isItemChecked = function(item)
                    {
                        return $scope.tableOptions.checkedItems.indexOf($scope.tableOptions.getItemId(item)) > -1;
                    };

                    $scope.onItemClicked = function(item)
                    {
                        $scope.tableOptions.onItemClicked(item, $scope);
                    };

                    $scope.loadPage($scope.page);
                }
            };
        }
    ]);

angular.module('luticateUtils').run(['$templateCache', function($templateCache)
{
    $templateCache.put('/luticate/lubasictable.html', '<div lu-busy="itemList">' +
'        <table class="col-sm-12 table table-hover">' +
'    <thead>' +
'    <tr>' +
'    <th ng-show="tableOptions.canCheck()">' +
'    <input type="checkbox" ng-click="toggleCheckAll()"' +
'    ng-checked="tableOptions.checkedItems.length == items.Data.length && items.Data.length != 0">' +
'        </th>' +
'        <th class="col-sm-{{ col.width }}" ng-repeat="col in tableOptions.columns">{{ col.name }}</th>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'<tr ng-repeat="item in items.Data" ng-style="{\'cursor\': itemsCursor}" ng-click="onItemClicked(item)">' +
'    <td ng-show="tableOptions.canCheck()">' +
'    <input name="tableOptions.checkedItems[]" type="checkbox" ng-checked="isItemChecked(item)"' +
 '   ng-click="$event.stopPropagation();toggleCheckedItem(item)" >' +
'        </td>' +
'        <td ng-repeat="col in tableOptions.columns">{{ col.getValue(item) }}</td>' +
'</tr>' +
'</tbody>' +
'</table>' +

'<div class="col-sm-12 text-center">' +
'    <a class="{{ p == page ? \'pagination-current\' : \'pagination-not-current\'}}" href="" ng-repeat="p in pages" ng-click="loadPage(p)">{{ p + 1 }}&nbsp;</a>' +
'</div>' +
'    </div>');
}]);