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: '&'
                },
                transclude: {
                    'luBasicTableFilter': '?luBasicTableFilter'
                },
                templateUrl: "/luticate/lubasictable.html",
                link: function ($scope, element, attrs) {
                    $scope.items = [];
                    $scope.pages = [];
                    $scope.maxPage = 1;

                    $scope.tableOptions = $scope.options();
                    $scope.tableOptions.luBasicTableScope = $scope;
                    if ($scope.tableOptions.tableName == null) {
                        $scope.tableOptions.tableName = $scope.$id;
                    }
                    if (typeof $scope.tableOptions.luBusy == 'string') {
                        $scope.tableOptions.luBusy = {
                            group: $scope.tableOptions.luBusy
                        };
                    }
                    if ($scope.tableOptions.luBusy == null) {
                        $scope.tableOptions.luBusy = {
                            group:  'luBasicTableItemList_' + $scope.$id
                        };
                    }
                    if ($scope.tableOptions.page == null) {
                        $scope.tableOptions.page = 0;
                    }
                    if ($scope.tableOptions.perPage == null) {
                        $scope.tableOptions.perPage = 15;
                    }
                    if ($scope.tableOptions.query == null) {
                        $scope.tableOptions.query = "";
                    }
                    if ($scope.tableOptions.checkedItems == null) {
                        $scope.tableOptions.checkedItems = [];
                    }
                    if ($scope.tableOptions.canCheck == null) {
                        $scope.tableOptions.canCheck = function()
                        {
                            return false;
                        }
                    }
                    if ($scope.tableOptions.canClick == null) {
                        $scope.tableOptions.canClick = function(item)
                        {
                            return false;
                        }
                    }
                    if ($scope.tableOptions.canFilter == null) {
                        $scope.tableOptions.canFilter = function()
                        {
                            return true;
                        }
                    }
                    var onItemClicked = $scope.tableOptions.onItemClicked;
                    $scope.tableOptions.onItemClicked = function(item)
                    {
                        if ($scope.tableOptions.canClick(item)){
                            onItemClicked(item);
                        }
                    };
                    if ($scope.tableOptions.onItemChecked == null) {
                        $scope.tableOptions.onItemChecked = function(item, checked)
                        {
                        }
                    }
                    if (!$scope.tableOptions.onPageChanged) {
                        $scope.tableOptions.onPageChanged = function()
                        {
                        };
                    }
                    if (!$scope.tableOptions.getItemId) {
                        $scope.tableOptions.getItemId = function(item)
                        {
                            return item.Id;
                        };
                    }

                    $scope.loadPage = function (page) {
                        if (page < 0 || page >= $scope.maxPage) {
                            return;
                        }
                        $scope.tableOptions.checkedItems = [];
                        var promiseLoadItems = {
                            id: "promiseLoadItems_" + $scope.$id,
                            groups: [$scope.tableOptions.luBusy.group]
                        };
                        $scope.tableOptions.getLoadPagePromise(page, $scope.tableOptions.perPage,
                            $scope.tableOptions.query, promiseLoadItems)
                            .then(function (items) {
                                $scope.tableOptions.page = page;
                                $scope.items = items;
                                $scope.pages = [];
                                $scope.maxPage = Math.max(items.Count / $scope.tableOptions.perPage, 1);
                                var start = Math.max(0, $scope.tableOptions.page - 5);
                                var end = Math.min(start + 10, $scope.maxPage);
                                for (var i = start; i < end; ++i) {
                                    $scope.pages.push(i);
                                }
                                $scope.tableOptions.onPageChanged();
                            }, luticateDialogErrorHelper.errorDialog);
                    };

                    $scope.toggleCheckedItem = function (item) {
                        var id = $scope.tableOptions.getItemId(item);
                        $scope.toggleCheckedId(id, item);
                    };

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

                    $scope.unCheckAll = function()
                    {
                        while ($scope.tableOptions.checkedItems.length != 0) {
                            $scope.toggleCheckedId($scope.tableOptions.checkedItems[0]);
                        }
                    };

                    $scope.checkAll = function()
                    {
                        $scope.unCheckAll();
                        for (var i = 0; i < $scope.items.Data.length; ++i) {
                            $scope.toggleCheckedItem($scope.items.Data[i]);
                        }
                    };

                    $scope.toggleCheckAll = function () {
                        if ($scope.tableOptions.checkedItems.length == $scope.items.Data.length) {
                            $scope.unCheckAll();
                        }
                        else {
                            $scope.checkAll();
                        }
                    };

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

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

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

angular.module('luticateUtils').run(['$templateCache', function($templateCache)
{
    $templateCache.put('/luticate/lubasictable.html',
'<div lu-busy="tableOptions.luBusy">' +
'    <div class="col-sm-9" ng-transclude="luBasicTableFilter"></div>' +
'    <div class="col-sm-3" ng-show="tableOptions.canFilter()"><input placeholder="Filter" class="form-control" ng-model-options="{debounce: 500}" ' +
'       ng-model="tableOptions.query" ng-change="loadPage(0)"/></div>' +
'    <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\': tableOptions.canClick(item) ? \'pointer\' : \'\'}" 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">' +
'       <div class="pagination"><ul>' +
'           <li class="previous">' +
'               <a href="" class="fui-arrow-left" ng-click="loadPage(tableOptions.page - 1)"></a></li>' +
'           <li ng-repeat="p in pages" ng-class="{ \'active\' : p == tableOptions.page}">' +
'               <a href="" ng-click="loadPage(p)">{{ p + 1 }}</a></li>' +
'           <li class="next">' +
'               <a href="" class="fui-arrow-right" ng-click="loadPage(tableOptions.page + 1)"></a></li>' +
'   </ul></div></div>' +
'</div>');
}]);