front-utils/src/lutable.js

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

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

                    $scope.tableOptions = $scope.options();

                    var promiseLoadItems = {
                        id: "promiseLoadItems",
                        groups: ['itemList']
                    };
                    var promiseDelItems = {
                        id: "promiseDelItems",
                        loadGroups: ['itemList']
                    };

                    $scope.loadPage = function (page) {
                        $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) {
                            });
                    };

                    if ($scope.tableOptions.displayItem != null){
                        $scope.displayItem = function(item)
                        {
                            return $scope.tableOptions.displayItem(item, $scope);
                        };
                    }
                    else {
                        $scope.displayItem = function (item) {
                            var ctrl = $scope.tableOptions.getEditController();
                            dialogs.create('views/modals/' + ctrl.toLowerCase() + '.html', ctrl + 'Controller', item)
                                .result.then(function (data) {
                                    $scope.loadPage($scope.page);
                                });
                        };
                    }

                    $scope.removeItems = function () {
                        if ($scope.selectedItems.length == 0) {
                            $scope.loadPage($scope.page);
                            return;
                        }
                        $scope.tableOptions.getDelPromise($scope.selectedItems[0], promiseDelItems)
                            .then(function (data) {
                                $scope.selectedItems.splice(0, 1);
                                $scope.removeItems();
                            }, function (error) {
                                luticateDialogErrorHelper.errorDialog(error)
                                    .result.then(function (data) {
                                        $scope.loadPage($scope.page);
                                    }, function (error) {
                                    });
                            });
                    };

                    $scope.addItem = function () {
                        var ctrl = $scope.tableOptions.getEditController();
                        dialogs.create('views/modals/' + ctrl.toLowerCase() + '.html', ctrl + 'Controller', null)
                            .result.then(function (data) {
                                $scope.loadPage($scope.page);
                            });
                    };

                    $scope.toggleSelectedItem = function (item) {
                        var id = $scope.tableOptions.getItemId(item);
                        var idx = $scope.selectedItems.indexOf(id);
                        if (idx > -1) {
                            $scope.selectedItems.splice(idx, 1);
                        }
                        else {
                            $scope.selectedItems.push(id);
                        }
                    };

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

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

                    if (!$scope.tableOptions.getItemId) {
                        $scope.tableOptions.getItemId = function(item)
                        {
                            return item.Id;
                        };
                    }

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

angular.module('luticateUtils').run(['$templateCache', function($templateCache)
{
    $templateCache.put('/luticate/lutable.html', '<div lu-busy="itemList">' +
'        <table class="col-sm-12 table table-hover">' +
'    <thead>' +
'    <tr>' +
'    <th lu-show-permission="{{ tableOptions.permissions.del }}">' +
'    <input type="checkbox" ng-click="toggleSelectAll()"' +
'    ng-checked="selectedItems.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" style="cursor: pointer" ng-click="displayItem(item)">' +
'    <td lu-show-permission="{{ tableOptions.permissions.del }}">' +
'    <input name="selectedItems[]" type="checkbox" ng-checked="isItemChecked(item)"' +
 '   ng-click="$event.stopPropagation();toggleSelectedItem(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 class="col-sm-12">' +
'    <button class="btn btn-default" type="button" ng-click="removeItems()"' +
'ng-disabled="selectedItems.length == 0" lu-show-permission="{{ tableOptions.permissions.del }}">' +
'    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove' +
'    </button>' +
'    <button class="btn btn-default" type="button" ng-click="addItem()" lu-show-permission="{{ tableOptions.permissions.add }}">' +
'    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add' +
'    </button>' +
'    </div>' +
'    </div>');
}]);