123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214 |
- /**
- * Created by robin on 11/3/15.
- */
-
- angular.module('luticateUtils')
- .directive('luBasicTable', ['dialogs', 'luticateDialogErrorHelper',
- function(dialogs, luticateDialogErrorHelper) {
- return {
- restrict: 'E',
- scope: {
- options: '&'
- },
- transclude: {
- 'lu-basic-table-filter': '?lu-basic-table-filter'
- },
- 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 ng-transclude="lu-basic-table-filter"></ng-transclude></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>');
- }]);
|