Browse Source

fixed lu basic table and lu edit table

tags/0.1.0
Robin Thoni 9 years ago
parent
commit
b94c786459
3 changed files with 132 additions and 129 deletions
  1. 16
    11
      src/lubasictable.js
  2. 51
    118
      src/luedittable.js
  3. 65
    0
      src/luitempicker.js

+ 16
- 11
src/lubasictable.js View File

@@ -16,6 +16,7 @@ angular.module('luticateUtils')
16 16
                     $scope.pages = [];
17 17
 
18 18
                     $scope.tableOptions = $scope.options();
19
+                    $scope.tableOptions.luBasicTableScope = $scope;
19 20
                     if ($scope.tableOptions.tableName == null) {
20 21
                         $scope.tableOptions.tableName = $scope.$id;
21 22
                     }
@@ -48,17 +49,21 @@ angular.module('luticateUtils')
48 49
                             return false;
49 50
                         }
50 51
                     }
51
-                    if ($scope.tableOptions.onItemClicked == null) {
52
-                        $scope.itemsCursor = "";
53
-                        $scope.tableOptions.onItemClicked = function(item, scope)
52
+                    if ($scope.tableOptions.canClick == null) {
53
+                        $scope.tableOptions.canClick = function()
54 54
                         {
55
+                            return true;
55 56
                         }
56 57
                     }
57
-                    else {
58
-                        $scope.itemsCursor = "pointer";
59
-                    }
58
+                    var onItemClicked = $scope.tableOptions.onItemClicked;
59
+                    $scope.tableOptions.onItemClicked = function(item)
60
+                    {
61
+                        if ($scope.tableOptions.canClick()){
62
+                            onItemClicked(item);
63
+                        }
64
+                    };
60 65
                     if ($scope.tableOptions.onItemChecked == null) {
61
-                        $scope.tableOptions.onItemChecked = function(item, checked, scope)
66
+                        $scope.tableOptions.onItemChecked = function(item, checked)
62 67
                         {
63 68
                             return true;
64 69
                         }
@@ -95,11 +100,11 @@ angular.module('luticateUtils')
95 100
                         var id = $scope.tableOptions.getItemId(item);
96 101
                         var idx = $scope.tableOptions.checkedItems.indexOf(id);
97 102
                         if (idx > -1) {
98
-                            $scope.tableOptions.onItemChecked(item, false, $scope);
103
+                            $scope.tableOptions.onItemChecked(item, false);
99 104
                             $scope.tableOptions.checkedItems.splice(idx, 1);
100 105
                         }
101 106
                         else {
102
-                            $scope.tableOptions.onItemChecked(item, true, $scope);
107
+                            $scope.tableOptions.onItemChecked(item, true);
103 108
                             $scope.tableOptions.checkedItems.push(id);
104 109
                         }
105 110
                     };
@@ -123,7 +128,7 @@ angular.module('luticateUtils')
123 128
 
124 129
                     $scope.onItemClicked = function(item)
125 130
                     {
126
-                        $scope.tableOptions.onItemClicked(item, $scope);
131
+                        $scope.tableOptions.onItemClicked(item);
127 132
                     };
128 133
 
129 134
                     $scope.loadPage($scope.tableOptions.page);
@@ -146,7 +151,7 @@ angular.module('luticateUtils').run(['$templateCache', function($templateCache)
146 151
 '</tr>' +
147 152
 '</thead>' +
148 153
 '<tbody>' +
149
-'<tr ng-repeat="item in items.Data" ng-style="{\'cursor\': itemsCursor}" ng-click="onItemClicked(item)">' +
154
+'<tr ng-repeat="item in items.Data" ng-style="{\'cursor\': tableOptions.canClick() ? \'pointer\' : \'\'}" ng-click="onItemClicked(item)">' +
150 155
 '    <td ng-show="tableOptions.canCheck()">' +
151 156
 '    <input name="tableOptions.checkedItems[]" type="checkbox" ng-checked="isItemChecked(item)"' +
152 157
  '   ng-click="$event.stopPropagation();toggleCheckedItem(item)" >' +

+ 51
- 118
src/luedittable.js View File

@@ -3,7 +3,7 @@
3 3
  */
4 4
 
5 5
 angular.module('luticateUtils')
6
-    .directive('luTable', ['dialogs', 'luticateDialogErrorHelper',
6
+    .directive('luEditTable', ['dialogs', 'luticateDialogErrorHelper',
7 7
         function(dialogs, luticateDialogErrorHelper) {
8 8
             return {
9 9
                 restrict: 'E',
@@ -12,67 +12,61 @@ angular.module('luticateUtils')
12 12
                 },
13 13
                 templateUrl: "/luticate/lutable.html",
14 14
                 link: function ($scope, element, attrs) {
15
-                    $scope.page = 0;
16
-                    $scope.perPage = 15;
17
-                    $scope.items = [];
18
-                    $scope.pages = [];
19
-                    $scope.selectedItems = [];
20 15
 
21 16
                     $scope.tableOptions = $scope.options();
22 17
 
23
-                    var promiseLoadItems = {
24
-                        id: "promiseLoadItems",
25
-                        groups: ['itemList']
26
-                    };
27
-                    var promiseDelItems = {
28
-                        id: "promiseDelItems",
29
-                        loadGroups: ['itemList']
30
-                    };
31
-
32
-                    $scope.loadPage = function (page) {
33
-                        $scope.tableOptions.getLoadPagePromise(page, $scope.perPage, promiseLoadItems)
34
-                            .then(function (items) {
35
-                                $scope.page = page;
36
-                                $scope.items = items;
37
-                                $scope.pages = [];
38
-                                var start = Math.max(0, $scope.page - 5);
39
-                                var end = Math.min(start + 10, (items.Count / $scope.perPage) + (items.Count % $scope.perPage == 0 ? -1 : 0));
40
-                                for (var i = start; i < end; ++i) {
41
-                                    $scope.pages.push(i);
42
-                                }
43
-                            }, function (error) {
44
-                            });
45
-                    };
46
-
47
-                    if ($scope.tableOptions.displayItem != null){
48
-                        $scope.displayItem = function(item)
18
+                    if ($scope.tableOptions.onItemDeleted == null) {
19
+                        $scope.tableOptions.onItemDeleted = function(item)
49 20
                         {
50
-                            return $scope.tableOptions.displayItem(item, $scope);
51
-                        };
21
+                        }
52 22
                     }
53
-                    else {
54
-                        $scope.displayItem = function (item) {
55
-                            var ctrl = $scope.tableOptions.getEditController();
56
-                            dialogs.create('views/modals/' + ctrl.toLowerCase() + '.html', ctrl + 'Controller', item)
57
-                                .result.then(function (data) {
58
-                                    $scope.loadPage($scope.page);
59
-                                });
60
-                        };
23
+                    if ($scope.tableOptions.onItemEdited == null) {
24
+                        $scope.tableOptions.onItemEdited = function(item)
25
+                        {
26
+                        }
61 27
                     }
28
+                    if ($scope.tableOptions.onItemAdded == null) {
29
+                        $scope.tableOptions.onItemAdded = function(item)
30
+                        {
31
+                        }
32
+                    }
33
+                    var onItemClicked = $scope.tableOptions.onItemClicked;
34
+                    $scope.tableOptions.onItemClicked = function (item) {
35
+                        if (onItemClicked != null) {
36
+                            onItemClicked(item);
37
+                        }
38
+                        var ctrl = $scope.tableOptions.getEditController();
39
+                        dialogs.create('views/modals/' + ctrl.toLowerCase() + '.html', ctrl + 'Controller', item)
40
+                            .result.then(function (data) {
41
+                                $scope.tableOptions.luBasicTableScope.loadPage($scope.tableOptions.page);
42
+                                $scope.tableOptions.onItemEdited(data);
43
+                            });
44
+                    };
45
+
62 46
 
63
-                    $scope.removeItems = function () {
64
-                        if ($scope.selectedItems.length == 0) {
65
-                            $scope.loadPage($scope.page);
47
+                    $scope.tableOptions.canCheck = $scope.tableOptions.canDelete;
48
+                    $scope.tableOptions.canClick = $scope.tableOptions.canEdit;
49
+
50
+
51
+                    $scope.deleteItems = function () {
52
+                        if ($scope.tableOptions.checkedItems.length == 0) {
53
+                            $scope.tableOptions.luBasicTableScope.loadPage($scope.tableOptions.page);
66 54
                             return;
67 55
                         }
68
-                        $scope.tableOptions.getDelPromise($scope.selectedItems[0], promiseDelItems)
56
+                        var promiseDelItems = {
57
+                            id: "promiseDelItems",
58
+                            loadGroups: [$scope.tableOptions.luBusy.group]
59
+                        };
60
+                        var item = $scope.tableOptions.checkedItems[0];
61
+                        $scope.tableOptions.getDelPromise(item, promiseDelItems)
69 62
                             .then(function (data) {
70
-                                $scope.selectedItems.splice(0, 1);
71
-                                $scope.removeItems();
63
+                                $scope.tableOptions.onItemDeleted(item, $scope);
64
+                                $scope.tableOptions.checkedItems.splice(0, 1);
65
+                                $scope.deleteItems();
72 66
                             }, function (error) {
73 67
                                 luticateDialogErrorHelper.errorDialog(error)
74 68
                                     .result.then(function (data) {
75
-                                        $scope.loadPage($scope.page);
69
+                                        $scope.tableOptions.luBasicTableScope.loadPage($scope.tableOptions.page);
76 70
                                     }, function (error) {
77 71
                                     });
78 72
                             });
@@ -82,46 +76,10 @@ angular.module('luticateUtils')
82 76
                         var ctrl = $scope.tableOptions.getEditController();
83 77
                         dialogs.create('views/modals/' + ctrl.toLowerCase() + '.html', ctrl + 'Controller', null)
84 78
                             .result.then(function (data) {
85
-                                $scope.loadPage($scope.page);
79
+                                $scope.tableOptions.luBasicTableScope.loadPage($scope.tableOptions.page);
80
+                                $scope.tableOptions.onItemAdded(data);
86 81
                             });
87 82
                     };
88
-
89
-                    $scope.toggleSelectedItem = function (item) {
90
-                        var id = $scope.tableOptions.getItemId(item);
91
-                        var idx = $scope.selectedItems.indexOf(id);
92
-                        if (idx > -1) {
93
-                            $scope.selectedItems.splice(idx, 1);
94
-                        }
95
-                        else {
96
-                            $scope.selectedItems.push(id);
97
-                        }
98
-                    };
99
-
100
-                    $scope.toggleSelectAll = function () {
101
-                        if ($scope.selectedItems.length == $scope.items.Data.length) {
102
-                            $scope.selectedItems = [];
103
-                        }
104
-                        else {
105
-                            $scope.selectedItems = [];
106
-                            for (var i = 0; i < $scope.items.Data.length; ++i) {
107
-                                $scope.selectedItems.push($scope.tableOptions.getItemId($scope.items.Data[i]));
108
-                            }
109
-                        }
110
-                    };
111
-
112
-                    $scope.isItemChecked = function(item)
113
-                    {
114
-                        return $scope.selectedItems.indexOf($scope.tableOptions.getItemId(item)) > -1;
115
-                    };
116
-
117
-                    if (!$scope.tableOptions.getItemId) {
118
-                        $scope.tableOptions.getItemId = function(item)
119
-                        {
120
-                            return item.Id;
121
-                        };
122
-                    }
123
-
124
-                    $scope.loadPage($scope.page);
125 83
                 }
126 84
             };
127 85
         }
@@ -129,40 +87,15 @@ angular.module('luticateUtils')
129 87
 
130 88
 angular.module('luticateUtils').run(['$templateCache', function($templateCache)
131 89
 {
132
-    $templateCache.put('/luticate/lutable.html', '<div lu-busy="itemList">' +
133
-'        <table class="col-sm-12 table table-hover">' +
134
-'    <thead>' +
135
-'    <tr>' +
136
-'    <th lu-show-permission="{{ tableOptions.permissions.del }}">' +
137
-'    <input type="checkbox" ng-click="toggleSelectAll()"' +
138
-'    ng-checked="selectedItems.length == items.Data.length && items.Data.length != 0">' +
139
-'        </th>' +
140
-'        <th class="col-sm-{{ col.width }}" ng-repeat="col in tableOptions.columns">{{ col.name }}</th>' +
141
-'</tr>' +
142
-'</thead>' +
143
-'<tbody>' +
144
-'<tr ng-repeat="item in items.Data" style="cursor: pointer" ng-click="displayItem(item)">' +
145
-'    <td lu-show-permission="{{ tableOptions.permissions.del }}">' +
146
-'    <input name="selectedItems[]" type="checkbox" ng-checked="isItemChecked(item)"' +
147
- '   ng-click="$event.stopPropagation();toggleSelectedItem(item)" >' +
148
-'        </td>' +
149
-'        <td ng-repeat="col in tableOptions.columns">{{ col.getValue(item) }}</td>' +
150
-'</tr>' +
151
-'</tbody>' +
152
-'</table>' +
153
-
154
-'<div class="col-sm-12 text-center">' +
155
-'    <a class="{{ p == page ? \'pagination-current\' : \'pagination-not-current\'}}" href="" ng-repeat="p in pages" ng-click="loadPage(p)">{{ p + 1 }}&nbsp;</a>' +
156
-'</div>' +
157
-
90
+    $templateCache.put('/luticate/lutable.html',
91
+'        <lu-basic-table options="tableOptions"></lu-basic-table>' +
158 92
 '<div class="col-sm-12">' +
159
-'    <button class="btn btn-default" type="button" ng-click="removeItems()"' +
160
-'ng-disabled="selectedItems.length == 0" lu-show-permission="{{ tableOptions.permissions.del }}">' +
161
-'    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove' +
93
+'    <button class="btn btn-default" type="button" ng-click="deleteItems()"' +
94
+'ng-disabled="tableOptions.checkedItems.length == 0" ng-show="tableOptions.canDelete()">' +
95
+'    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Delete' +
162 96
 '    </button>' +
163
-'    <button class="btn btn-default" type="button" ng-click="addItem()" lu-show-permission="{{ tableOptions.permissions.add }}">' +
97
+'    <button class="btn btn-default" type="button" ng-click="addItem()" ng-show="tableOptions.canAdd()">' +
164 98
 '    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add' +
165 99
 '    </button>' +
166
-'    </div>' +
167 100
 '    </div>');
168 101
 }]);

+ 65
- 0
src/luitempicker.js View File

@@ -0,0 +1,65 @@
1
+/**
2
+ * Created by robin on 11/6/15.
3
+ */
4
+
5
+
6
+angular.module('luticateUtils')
7
+    .directive('luItemPicker', ['dialogs', 'luticateDialogErrorHelper',
8
+        function(dialogs, luticateDialogErrorHelper) {
9
+            return {
10
+                restrict: 'E',
11
+                scope: {
12
+                    options: '&',
13
+                    luModel: '&'
14
+                },
15
+                templateUrl: "views/itempicker.html",//"/luticate/luitempicker.html",
16
+                link: function ($scope, element, attrs) {
17
+                    $scope.selectedItems = $scope.luModel();
18
+
19
+                    $scope.pickerOptions = $scope.options();
20
+
21
+
22
+                }
23
+            };
24
+        }
25
+    ]);
26
+
27
+angular.module('luticateUtils').run(['$templateCache', function($templateCache)
28
+{
29
+    $templateCache.put('/luticate/luitempicker.html', '<div lu-busy="itemList">' +
30
+        '        <table class="col-sm-12 table table-hover">' +
31
+        '    <thead>' +
32
+        '    <tr>' +
33
+        '    <th lu-show-permission="{{ tableOptions.permissions.del }}">' +
34
+        '    <input type="checkbox" ng-click="toggleSelectAll()"' +
35
+        '    ng-checked="selectedItems.length == items.Data.length && items.Data.length != 0">' +
36
+        '        </th>' +
37
+        '        <th class="col-sm-{{ col.width }}" ng-repeat="col in tableOptions.columns">{{ col.name }}</th>' +
38
+        '</tr>' +
39
+        '</thead>' +
40
+        '<tbody>' +
41
+        '<tr ng-repeat="item in items.Data" style="cursor: pointer" ng-click="displayItem(item)">' +
42
+        '    <td lu-show-permission="{{ tableOptions.permissions.del }}">' +
43
+        '    <input name="selectedItems[]" type="checkbox" ng-checked="isItemChecked(item)"' +
44
+        '   ng-click="$event.stopPropagation();toggleSelectedItem(item)" >' +
45
+        '        </td>' +
46
+        '        <td ng-repeat="col in tableOptions.columns">{{ col.getValue(item) }}</td>' +
47
+        '</tr>' +
48
+        '</tbody>' +
49
+        '</table>' +
50
+
51
+        '<div class="col-sm-12 text-center">' +
52
+        '    <a class="{{ p == page ? \'pagination-current\' : \'pagination-not-current\'}}" href="" ng-repeat="p in pages" ng-click="loadPage(p)">{{ p + 1 }}&nbsp;</a>' +
53
+        '</div>' +
54
+
55
+        '<div class="col-sm-12">' +
56
+        '    <button class="btn btn-default" type="button" ng-click="removeItems()"' +
57
+        'ng-disabled="selectedItems.length == 0" lu-show-permission="{{ tableOptions.permissions.del }}">' +
58
+        '    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove' +
59
+        '    </button>' +
60
+        '    <button class="btn btn-default" type="button" ng-click="addItem()" lu-show-permission="{{ tableOptions.permissions.add }}">' +
61
+        '    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add' +
62
+        '    </button>' +
63
+        '    </div>' +
64
+        '    </div>');
65
+}]);

Loading…
Cancel
Save