basic display table

src/lubasictable.js

@@ -0,0 +1,141 @@
+/**
+ * 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>');
+}]);