edit table

src/lutable.html

@@ -0,0 +1,35 @@
+<div lu-busy="itemList">
+    <table class="col-sm-12 table table-hover">
+        <thead>
+        <tr>
+            <th>
+                <input type="checkbox" ng-click="toggleSelectAll()"
+                       ng-checked="selectedItems.length == items.Data.length && items.Data.length != 0">
+            </th>
+            <th class="col-sm-3" ng-repeat="col in columns">{{ col.name }}</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr ng-repeat="item in items.Data" style="cursor: pointer" ng-click="displayItem(item)">
+            <td>
+                <input name="selectedItems[]" type="checkbox" ng-checked="selectedItems.indexOf(item.Id) > -1"
+                       ng-click="$event.stopPropagation();toggleSelectedItem(item.Id)" >
+            </td>
+            <td ng-repeat="col in 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">
+            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove
+        </button>
+        <button class="btn btn-default" type="button" ng-click="addItem()">
+            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add
+        </button>
+    </div>
+</div>

src/lutable.js

@@ -0,0 +1,141 @@
+/**
+ * Created by robin on 11/3/15.
+ */
+
+angular.module('luticateUtils')
+    .directive('luTable', ['dialogs', 'luticateDialogErrorHelper',
+        function(dialogs, luticateDialogErrorHelper) {
+            return {
+                restrict: 'E',
+                templateUrl: "/luticate/lutable.html",
+                link: function ($scope, element, attrs) {
+                    $scope.page = 0;
+                    $scope.perPage = 15;
+                    $scope.items = [];
+                    $scope.pages = [];
+                    $scope.selectedItems = [];
+
+                    var promiseLoadItems = {
+                        id: "promiseLoadItems",
+                        groups: ['itemList']
+                    };
+                    var promiseDelItems = {
+                        id: "promiseDelItems",
+                        loadGroups: ['itemList']
+                    };
+
+                    $scope.loadPage = function (page) {
+                        $scope.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.displayItem = function (item) {
+                        var ctrl = $scope.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.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.getEditController();
+                        dialogs.create('views/modals/' + ctrl.toLowerCase() + '.html', ctrl + 'Controller', null)
+                            .result.then(function (data) {
+                                $scope.loadPage($scope.page);
+                            });
+                    };
+
+                    $scope.toggleSelectedItem = function (id) {
+                        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.items.Data[i].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>' +
+'    <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 columns">{{ col.name }}</th>' +
+'</tr>' +
+'</thead>' +
+'<tbody>' +
+'<tr ng-repeat="item in items.Data" style="cursor: pointer" ng-click="displayItem(item)">' +
+'    <td>' +
+'    <input name="selectedItems[]" type="checkbox" ng-checked="selectedItems.indexOf(item.Id) > -1"' +
+ '   ng-click="$event.stopPropagation();toggleSelectedItem(item.Id)" >' +
+'        </td>' +
+'        <td ng-repeat="col in 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">' +
+'    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove' +
+'    </button>' +
+'    <button class="btn btn-default" type="button" ng-click="addItem()">' +
+'    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add' +
+'    </button>' +
+'    </div>' +
+'    </div>');
+}]);